@font-face {
    font-family: Roboto;
    src: url(/fonts/roboto/Roboto-Regular.ttf) format("truetype");
  }
  
  @font-face {
      font-family: Roboto-Black;
      src: url(/fonts/roboto/Roboto-Black.ttf) format("truetype");
    }
  
    @font-face {
      font-family: Roboto-Medium;
      src: url(/fonts/roboto/Roboto-Medium.ttf) format("truetype");
    }

    :root {
        --orange:#f48e00;
        --orange-hell:#ffcf17;
        --turkies:#00a8b5;
        --krieg-frieden-blau: #c3e3de;
    }

  body {
      background-color:#efefef;    
  }
  
  body, header {
      max-width: 500px;
      font-family: Roboto;
      margin: 0 auto!important;
      box-sizing: border-box;
      left:auto !important;
      overflow-x: hidden;
  }
  
  header {
      position:fixed;
      top:0px;
      width:100%;
  }
  
  input, button, select, textarea{
      font-family: 'Roboto';
  }
  
  p {
      margin:8px 0px 0px 0px;
  }

  b {
    font-family: Roboto-Medium;
  }
  
  .relative {
      position:relative;
  }

  .error {
    margin-top: 20px;
    width: 100%;
    left: 50%;
    background-color: #f8d7da;
    color: #721c24;
    padding: 20px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    box-sizing: border-box;
}

.erfolg {
    margin-top: 20px;
    width: 100%;
    left: 50%;
    background-color: #ddf8d7;
    color: #1c7227;
    border: 1px solid #ddf8d7;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 500px;
    box-sizing: border-box;
}
  
  #plzResults ul {
      background-color: #eee!important;
      cursor: pointer;
      border: 1px solid;
      border-radius: 0vw 0vw 1vw 1vw;
      background-color: rgba(255,255,255,0.5);
      list-style-type: none;
      text-align: left;
      padding: 1vw;
      margin: 0px;
  }
  
  #plzResults li {
      font-weight:normal;
      border-bottom: 1px dotted #aaa;
      padding: 2vw 5vw;
  }
  
  #plzResults li:hover {
      font-weight:bold;
      background-color: #eee!important;
  }
  
  #plzResults li:active {
      background-color: rgba(255,255,255,0.95);
  }
  #plzResults li:before {
      content:''!important;
  }
  
  .header__bar {
      width: 100%;
      align-items: center;
      justify-content: space-between;
      height: 6vh;
      background-color: #fff;
      transition-timing-function: ease-in-out;
      box-sizing: border-box;
      padding: 0 3vw 0 5vw;
      display: flex;
      position: relative;
  }
  
  #overlay-fc .header__bar, #overlay-wahl-fc .header__bar, #overlay-fc-karte .header__bar {
      border-bottom: 1px solid #ccc;
      justify-content: center!important;
  }
  
  #overlay-wahl-fc {
      transition: transform 1s ease; /* Animationsübergang für transform */
      transform: translateX(-100%); /* Startposition außerhalb des Bildschirms (rechts) */
  }
  
  .div-logo, .div-filter, .div-menue, .men-plz{
     display: flex;
     align-items: center;
     justify-content: flex-end;
     cursor: pointer;
  }
  
  .div-logo {
      height:100%;
  }

  .div-logo img {
    max-height: 100%;
    max-width: 70%;
    left: 6%;
    position: absolute;
    min-height: 70%!important;
  }
  
  .logo, .div-filter, .div-menue, .men-plz {
      height:75%;
  }
  
  .div-filter svg, .div-menue svg, .men-plz svg, .logo svg {
      height:100%;
      margin-right:1vw;
  }
  
  .div-komm-form textarea {
      font-size: 4vw;
      border-radius: 5px;
      background-color: #ccc;
      margin: 0px;
      height: 10vh;
      padding: 3%;
      width: 94%;
  }
  
  .div-komm-form button, .melden-button {
      border-radius: 5px!important;
      padding: 1.5vw;
      color: #fff!important;
      background-color: #383937!important;
  }
  
  .melden-button {
      margin-right:5vw;
  }
  
  .komm-username {
      font-weight: bold;
      width: calc(50% - 5vw);
  }
  
  .komm-avatar {
      display: flex;
      align-items: center; /* Vertikal zentrieren */
      justify-content: center; /* Horizontal zentrieren */
      text-align: center;
      color: #fff;
      font-weight:600;
      width: 8vw;
      height: 8vw;
      border-radius: 100%;
      margin-right: 5px;
      overflow: hidden;;
  }
  
  .komm-avatar img {
      width:100%;
  }
  
  .komm-zeit {
      width: calc(50% - 2vw);
      font-size:3.5vw;
      text-align:right;
      padding-right:5px;
      box-sizing: border-box;
  }
  
  .debug {
      font-size:2vw;
      font-family: Roboto;
  }
  
  .komm-ben {
      max-width: 100%;
      font-size:3.5vw;
  }
  
  .komm-men {
      display: flex;
      align-items: center; /* Vertikal zentrieren */
      justify-content: center; /* Horizontal zentrieren */
      text-align: center;
      width:4%;
      height:100%;
  }
  
  .komm-menue {
      position: absolute;
      z-index: 99999;
      width:100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      display:none;
      left:0;
      padding: 0 5vw;
      box-sizing: border-box;
  }
  
  .haupt-menue {
      position: fixed;
      z-index: 99999;
      width: 80%;
      flex-direction: column;
      align-items: flex-start;
      display: none;
      max-width: 400px;
      right: 0;
      margin-right: calc((50% - 50px));
      top: 6vh;
      overflow: hidden;
      opacity: 0;
      transition: transform 1s;
      box-shadow: -20px 20px 10px 10px rgba(0, 0, 0, 0.5);
      border-radius: 3% 0 0 3%;
      border-style: solid;
      border-color: #000;
      border-width: 0px 0px 1px 1px;
      transform: translateX(100%);
  }
  
  div.komm-menue > div:last-child {
      border-radius: 0px 0px 15px 15px;
  }
  
  div.komm-menue > div:first-child{
      border-radius: 15px 15px 0px 0px;
  }
  
  
  .komm-melden, .komm-teilen, .komm-loeschen, .komm-teilen-wahl {
      align-items: center;
      border: 1px solid #ababab;
      background-color: #efefef;
      font-size: 4vw;
      display: flex;
      width: 30%;
      height: 3.5vh;
      padding: 0vw 2vw;
  }
  
  .men-profil, .men-hilfe, .men-funktion, .men-kontakt, .men-neu, .men-logout, .men-login, .men-app, .men-appiphone, .men-rechtliches, .men-impressum, .men-datenschutz, .men-ueber, .men-alle-ab, .men-wahlomat-ergebnis, .men-chart, .men-kf-ergebnis {
      align-items: center;
      border: 1px solid #ababab;
      background-color: #efefef;
      font-size: 2vh;
      display: flex;
      width: 100%;
      height: 6.5vh;
      padding: 0vw 2vw;
      cursor:pointer;
      box-sizing: border-box;
  }
  
  .rechtliches {
      display:none;
      width: 100%;
  }
  
  .blau {
      color: var(--turkies);
  }
  
  .bg-blau {
      background-color: #eaf7f9;
  }
  
  .orange {
      color: var(--orange);
  }

  .bg-orange {
    background-color: var(--orange);
    color:#fff;
    font-weight:700;
    letter-spacing:1px;
    padding:10px;
  }
  
  .sub-men {
      height: 5.5vh;
      background-color: #bbb;
      font-size: 1.5vh;
      width: 100%!important;
  }
  
  .sub-men:hover {
      background-color: #f4e8d7;
  }
  
  
  .haupt-menue div:hover {
      background-color: #d7eef1;
  }
  
  .men-app, .men-appiphone {
      display:none;
      background-color: #d7eef1;
  }
  
  .men-app:hover, .men-appiphone:hover {
      background-color: #f4e8d7;
  }
  
  .men-text {
      width: 80%;
  }
  
  .komm-melden svg, .komm-teilen svg, .komm-loeschen svg, .komm-teilen-wahl svg {
      height:80%;
      margin-right:5px;
  }
  
  .men-profil svg, .men-hilfe svg, .men-funktion svg, .men-kontakt svg, .men-neu svg, .men-logout svg, .men-login svg, .men-app svg, .men-ueber svg, .men-alle-ab svg, .men-wahlomat-ergebnis svg, .men-appiphone svg, .men-kf-ergebnis svg  {
      max-height: 3vh;
      width:3vh;
      margin-right: 3%;
  }
  
  .avatar {
      text-align: center;
      overflow: hidden;
      width: 100%;
      cursor: pointer;
  }
  
  .avatar img, .avatar svg {
      border: 10px solid #ddd;
      height: 10rem;
      overflow: hidden;
      border-radius: 100%;
      width: 10rem;
  }
  
  .men-rechtliches svg {
      max-height:2vh;
      width:2vh;
      margin-right: 3%;
      margin-left: 0.5vh;
  }
  
  .men-rechtliches .men-text {
      margin-left: 0.5vh;
  }
  
  .komm-teilen, .komm-loeschen, .komm-teilen-wahl {
      margin-top:-1px;
  }
  
  .komm-men svg {
      max-height: 40px;
      height:100%;
  }
  
  .komm-haende {
      margin: 0 auto;
      left: 15%;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 10vw 5vw;
      width: 70%;
  }
  
  .komm-hr {
      position: relative;
      border: 1px solid #ddd;
      margin:0;
      width:90vw;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .ab-ort{
      font-family: Roboto-Medium;
      color:var(--turkies);
      font-weight: 500;
  }
  
  .ab-titel{
      font-family: Roboto-Black;
      color:#000;
      /*font-weight: 900;*/
      font-size: 5vw;
      letter-spacing: 0.1vw;
  }
  
  .ab-titel-wahl {
      font-family: 'Roboto';
      color: #000;
      font-weight: normal;
      font-size: 7vw;
      letter-spacing: 0.1vw;
      width:100%;
  }
  
  .wahl-aufz {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Ändere 'align-items: top' zu 'flex-start' */
    padding-right: 2vw;
    border-bottom: 1px solid #bbb;
    border-top: 0px;
  }
  
  .wahl-aufz .ow-titel {
      font-size: 4.8vw;
      padding: 1vw 1vw 1vw 13vw;
      background-size: 8vw 8vw!important;
      color: #222;
      border-bottom: 0px;
  }
  
  .k-aufz {
      display:flex;
      justify-content: flex-start;
      align-items: center;
      padding-right: 2vw;
  }
  
  
  .pfeil-rechts{
      height: 3vw;
      width: 3vw;
      background: url(/icns/icon-pfeil-zurueck.svg) no-repeat scroll 1% 0px;
      background-size: 100% 100%!important;
      transform: rotate(180deg);
      margin-left: auto;
  }
  
  .k-aufz .pfeil-rechts {
      height:5vw;
      width:4vw;
  }
  
  .aufz-infos .ow-titel {
      background: url(/icns/icon-infos.svg) no-repeat scroll 1% 50%;
  }

  .aufz-presse a {
    color:#222;
    text-decoration: none;
  }

  .aufz-presse a.blau {
    color:var(--turkies);
  }

  .aufz-presse a {
    color:var(--orange);
  }
  
  .aufz-presse .ow-titel {
      background: url(/icns/icon-presse.svg) no-repeat scroll 1% 0.5vw;
  }
  
  .aufz-presse-deakt .ow-titel {
      background: url(/icns/icon-presse-deakt.svg) no-repeat scroll 1% 50%;
      color: #ccc !important;
  }
  
  .aufz-kommentare .ow-titel {
      background: url(/icns/icon-diskussion.svg) no-repeat scroll 1% 50%;
  }
  
  .aufz-ergebnis-deakt .ow-titel {
      background: url(/icns/icon-ergebnis-grau.svg) no-repeat scroll 1% 50%;
      color: #ccc!important;
  }
  
  .aufz-ergebnis-akt .ow-titel {
      background: url(/icns/icon-ergebnis-farbig.svg) no-repeat scroll 1% 50%;
  }
  
  .aufz-kandidaten .ow-titel {
      background: url(/icns/icon-wahlkreuz.svg) no-repeat scroll 1% 50%;
  }
  
  .cont-kandidaten {
      padding: 5vw 5vw 0vw 5vw;
      z-index:9999;
  }
  
  .ow-kandidat {
      font-size: 3vw;
      background-position: left;
      padding: 5vw 5vw 5vw 13vw;
      border-bottom: 1px solid #bbb;
      border-top: 0px;
      color: #222;
  }

  .bv-titel {
    font-size: 4.8vw;
    background-position: left;
    padding: 1vw 1vw 1vw 20px;
    background-color: #efefef;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
  
  .ab-inhalt .ow-titel {
      font-size: 4vw;
      background-position: left;
      padding: 1vw 1vw 1vw 11vw;
      background: url(/icns/icon-wahlkreuz.svg) no-repeat scroll 1% 0px;
      background-size: 9vw 100%;
      background-color: #efefef;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
  }
  
  .ow-titel-bereich {
      padding-left: 5vw;
      width: calc(100% - 30vw);
  }
  
  .klink {
      width:100%;
      text-align: right;
  }
  
  .linkvorschau {
    padding:20px;
    text-align: center;
    margin-bottom:20px;
    width: 80%;
    background: linear-gradient(45deg, #ffffff, #ffffff, rgba(200, 200, 220, 0.1));
    border-radius: 5px 5px 5px 15px;
    border: 1px solid #dedede;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    box-shadow: 6px 18px 18px -16px rgba(0,0,0,0.3);
    left: 50%; /* Zentriere das Bild horizontal, wenn gewünscht */
    transform: translateX(-50%) rotate(0deg);
  }

  .linkvorschau img {
      max-width: 200px;
  }

/* Styles für das Ladesymbol */
#loader {
position: fixed;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
border: 8px solid var(--turkies);
border-top: 8px solid #ffffff;
border-radius: 50%;
animation: spin 2s linear infinite;
z-index: 9999; /* Sicherstellen, dass es über allen anderen Inhalten liegt */
display:none;
}

/* Animation für das Ladesymbol */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
  
  .pfeil_rechts {
      margin-left: 1vw;
      height: 3vw;
      width: 3vw;
      background: url(/icns/icon-pfeil-zurueck.svg) no-repeat scroll 1% 0px;
      background-size: 100% 100%!important;
      transform: rotate(180deg);
  }
  
  .kandidaten {
      display: grid;
      grid-template-columns: 22% 22% 22% 22%;
      grid-template-rows: auto 1fr;
      grid-gap: 4%;
      width: 100%;
  }
  
  .kandidat {
      width: 100%;
      border-radius:10%;
  }
  
  .ab-text {
      position:relative;
      margin:8px 0px;
      lang: de; /* Sprache auf Deutsch setzen */
      hyphens: auto;
  }
  
  .ab-text a, #linkVorschau a, .pro a, .contra a {
      color: var(--orange);
      text-decoration: none;
      word-wrap: break-word;
  }

  .ab-text a:hover, #linkVorschau a:hover, .pro a:hover, .contra a:hover {
    font-weight:bold;
  }

  .map-pin {
    background: url(/icns/map-pin.svg) no-repeat scroll 0px 50%;
    background-size: 6vw 6vw!important;
    padding-left:7vw;
}

  .link {
    color: var(--orange);
    text-decoration: none;
    cursor: pointer;
  }

  .ds_check {
    margin: 0px 5px 0px 0px!important;
    padding: 0px!important;
    width: fit-content!important;
  }
  
  .ab-text-ov {
      position:absolute;
      width:100%;
      height:100%;
      top: 0px;
      left:0px;
      background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
  
  .ab-text-ov svg {
      width:20px;
      position: absolute;
      bottom: 0;
      left: 50%; /* Zentriere das Bild horizontal, wenn gewünscht */
      transform: translateX(-50%) rotate(0deg);
  }
  
  .ab-text-ov.active, .ov-pfeil-unten.active, .offen .ab-text-ov {
      background-image:none;
      background-color: rgba(255, 255, 255, 0); /* Hintergrund, wenn Details geöffnet sind */
    }
  
  .offen .ab-text-ov svg {
      transform: rotate(180deg);
      margin-bottom:2.5%;
  }

  .offen a {
    position: relative;
    z-index: 99999;
  }
  
  .ab-inhalt{
      color:#000;
      font-weight: normal;
      font-size: 4vw;
  }
  
  .ab-bild {
      position: relative;
      display: inline-block;
      width:100%;
      max-height:33vh;
      overflow: hidden;
  }
  
  .ow-bild {
      border-radius: 15%;
      overflow: hidden;
      height: 30vw;
      width: 30vw;
  }
  
  .ow-bild1 {
      border-radius: 15%;
      overflow: hidden;
      height: 15vw;
      width: 15vw;
  }
  
  .ow-bild img, .ow-bild1 img {
      position: relative;
      height:100%;
      left: 50%;
      transform: translate(-50%, 0%);
  }
  
  .details-wrapper, .bescheid-trigger, .k_trigger, .detail-trigger, .person-trigger, .komm-men, .komm-melden, .komm-teilen, .komm-teilen-wahl, .komm-loeschen, .overlay-close, .overlay-back, #abbrechen, .wahl-trigger, .kandidat-trigger, .ab-text-ov, .aufz-kommentare, #weiterButton, #submitBtn, #komm-laden, #plz_reset, .presse-trigger, .info-trigger, .hinweisbox-icon, .hinweisbox-pfeil, .frage-trigger, .bv-trigger, .bv-bescheid-trigger{
      cursor: pointer;
  }
  
  .frage-trigger {
    z-index:999;
  }

  #abbrechen:hover {
      color: #f48400;
  }
  
  .kandidat-trigger {
      position: relative;
      z-index: 1;
  }
  
  .ab-bild img {
      display: block;
      width:100%;
  }
  
  .ab-pille-container {
      position: absolute;
      display:flex;
      border-radius: 15px 0px 0px 15px;
      width: 40vw;
      top: 2vh;
      right: 0vw;
      background-color: rgba(255,255,255,0.8);
      padding: 8px;
      gap: 5px;
  }
  
  .ab-pille {
      border-radius:15px;
      width:20vw;
      height:1.5vh;
      border:1px solid;
  }
  
  .ab-grau {
      margin-bottom: 3vh;
      background-color: #ddd;
      padding: 3vw 5vw;
      font-size: 4vw;
  }
  
  .ab-teilnehmer {
      width: 100%;
      display: flex;
      align-items: center;
  }
  
  .ab-teilnehmer svg {
      width:auto!important;
      height:3.5vh;
  }
  
  .hr-grau, .hr-grau1 {
      border: 1px solid #ddd;
      margin: 8vw 0vw 3vw 0vw;
  }

  .abstand3 {
    margin: 8vw 0vw 3vw 0vw;
  }
  
  .pro, .contra {
      position: relative;
      color:#000;
      font-weight: normal;
      font-size: 4vw;
      /*height:15vh;*/
      overflow: hidden;
      lang: de; /* Sprache auf Deutsch setzen */
      hyphens: auto;
  }
  
  .offen {
      height: auto!important;
      overflow: auto!important;
      padding-bottom: 5%;
      z-index:99;
  }
  
  .zu {
      height:15vh;
      overflow: hidden;
      z-index:99;
  }
  
  .padd5 {
      padding:5vw;
  }
  
  .padd6 {
     padding: 5vw 5vw 0vw 5vw;
  }

  .padd7 {
    padding:2vw 5vw 2vw 5vw;
  }

  .padd8 {
    padding:0 5vw;
  }

  .padd6p {
    padding: 0 6%;
  }
  
  .marg5 {
      margin-bottom:5vw;
  }

  .margt5 {
    margin-top:2rem;
}

.pw_vg {
    font-size: 80%;
    text-align: left;
}
  
  .pro {
      background-color: #d7eef1;
  }
  
  .contra {
      background-color: #f1e8d8;
  }
  
  .ov-header-titel {
      font-size: 5vw;
      font-weight: normal;
      position: absolute;
      width: 100%;
      text-align: center;
  }
  
  .ov-titel {
      text-align: center;
      font-weight:800;
  }
  
  .ov-text, .ov-titel {
      font-size:4vw;
  }
  
  .h-komment {
      display:flex;
      background-color: #383937;
      padding: 2vw 5vw;
      color: #fff;
      font-weight: 800;
  }
  
  .h-presse {
      display: flex;
      background-color: #ccc;
      padding: 2vw 5vw;
      color: #000;
      font-weight: 800;
  }
  
  .komm-text {
      margin-top:1vh;
      font-size:4vw;
  }
  
  .filter-beschr {
      width: calc(100% - 2vw - 40px);
  }
  
  #form-komm-filter {
      padding: 2vw 5vw 0vw 0vw;
      text-align: end;
  }
  
  #form-komm-filter select {
      padding:1vw;
      border-color:#ababab;
  }
  
  .farb-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
  .ab-tage {
      justify-content: flex-end;
      display: flex;
      align-items: center;
      width: 20vw;
      font-size: 3vw;
      text-wrap: nowrap;
  }
  
  .ab-tage-bb {
      text-align:center;
      width: 100%;
      font-size: 3vw;
      font-weight:bold;
  }
  
  .ab-pdf-dwl {
    width: 50px;
    position: absolute;
    bottom: 2vw;
    right: 5vw;
  }
  

  .ab-inhalt > * {
      padding-left: 5vw;
      padding-right: 5vw;
      box-sizing: border-box;
  }
  
  .ab-id {
      font-size:2.5vw;
  }
  
  .cont {
      
      margin-top:6vh;
  }
  
  .logo {
      max-height:45px;
  }    
  
  .container {
      box-sizing: border-box;
      background-color: #fff;
      position: relative;
      width: 100%;
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Hinzugefügte Opacity-Transition */
      margin-bottom: 10px;
      box-shadow: 6px 18px 18px -16px rgba(0,0,0,0.3);
  }
  
  .hide-left {
      transform: translateX(-50%);
      opacity: 0; /* Hinzugefügte Opacity auf 0 */
  }
  
  .hide-right {
      transform: translateX(50%);
      opacity: 0; /* Hinzugefügte Opacity auf 0 */
  }
  
  .show-again {
      transform: translateX(0%);
      opacity: 1; /* Hinzugefügte Opacity auf 0 */
  }
  
  .neu {
      width: fit-content;
      padding: 3px 5px;
      background-color:#f48400;
      color: #fff;    
      font-weight: bold;
      letter-spacing: 0.4vw;
      white-space: nowrap;
  }
  
  .aktiv {
      font-size:5vw;
      letter-spacing: 0.4vw;
      font-family: Roboto-Black;
      color: #f48400;
       /*font-weight: 900;*/
  }
  
  .inaktiv {
      color:#9d9e9e;
      font-weight: bold;
  }
      
  /* CSS für das Overlay */
  #overlay, #overlay-fc, #overlay-fc-karte, #overlay-wahl-fc {
      display: none;
      position: fixed;
      overflow-x: hidden;
      overflow-y: auto;
      top: 0;
      left: 0;
      width: 100%;
      max-width: 500px;
      height: 100%;
      /*overflow: hidden;*/
      background-color: rgba(0,0,0, 0.7);
      box-sizing: border-box;
  }
  
  #overlay-fc, #overlay-fc-karte {
      z-index: 9997;
  }
  
  #overlay-wahl-fc {
      z-index: 9998;
  }
  
  #overlay {
      z-index: 9999;
  }
  
  .overlay:before, #overlay-fc:before, #overlay-wahl-fc:before, #overlay-fc-karte:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: inherit; /* Übernimmt das Hintergrundbild */
      background-size: inherit;
      filter: blur(10px); /* Verschwommener Hintergrund */
    }
  
  #overlay .overlay-inhalt {
      margin-top: 3vh;
      width: 85%;
      font-size: 4vw;
      /* min-height: 95%; */
      position: absolute;
      /* top: 0%; */
      left: 50%;
      transform: translate(-50%, 0%);
      background-color: white;
      border-radius: 15px;
  }
  
  #overlay-fc .overlay-inhalt, #overlay-wahl-fc .overlay-inhalt, #overlay-fc-karte .overlay-inhalt {
      width: 100%;
      height: calc(100% - 6vh)!important;
      bottom:0px;
      position: absolute;
      background-color: white;
      overflow-y: auto;
      z-index:555;
      box-sizing: border-box;
  }
  
  #overlay-fc .overlay-close, #overlay-wahl-fc .overlay-close, #overlay-fc-karte .overlay-close {
      display: flex;
      background: url(/icns/icon-x-kreuz.svg) no-repeat scroll 1% 0px;
      background-size: 70% 100%!important;
      align-items: center;
      margin: 1px;
      position: absolute;
      right: 1%;
      color: #555;
      width: 2vh;
      height: 2vh;
      z-index: 10000;
      padding: 3vw;
      text-align: center;
  }
  
  #overlay-fc .overlay-back, #overlay-wahl-fc .overlay-back, #overlay-fc-karte .overlay-back {
      margin: 1px;
      position: absolute;
      left:3%;
      width: 2vh;
      height: 2vh;
      z-index: 556;
      padding: 3vw;
      text-align:center;
      background: url(/icns/icon-pfeil-zurueck.svg) no-repeat scroll 1% 0px;
      background-size: 3vw 100%;
  }
  
  
  
  #loadingIndicator {
          display: none;
          line-height: 90vh;
          text-align: center;
          height: 100%;
          width: 100%;
          position: absolute;
          font-size: 7vw;
          background-color: rgba(200,200,200,0.8);
          padding: 5%;
          z-index: 999999;
  }
  
  .ov-logo, .ov-logo-small, .ov-logo-h {
      text-align: center;
  }
  
  .ov-logo svg {
      width:45%;
  }

  .ov-logo-small svg {
    width:35%;
}

.ov-logo-h svg {
    width:35%;
    max-width:200px;
}
  
  #login-form {
      margin-top:2vh;
  }
  
  .div-reg {
      background-color: #eaf7f9;
      padding: 5vw;
      font-size:5vw;
      /*margin-top: 15vw;*/
      text-align: center;
  }

  .div-reg label {
    position: absolute;
    top: -23px;
    font-size: 80%;
    display: block;
    font-weight: bold;
    text-align: left;
  }

  .label_normal {
    position:relative!important;
    top:auto!important;
    font-weight: normal!important;
    padding-left:10px;
  }

  .hinweis-text {
    color: #777;
    padding-top: 5px;
    text-align: left;
    font-size: 80%;
  }
  
  .div-reg ul {
      margin-top:30px;
      font-size: 1rem;
      list-style-type: none; /* Standard-Aufzählungszeichen entfernen */
      text-align: left;
    }
    
    .div-reg ul li:before {
      content: "▶"; /* Dreieckiges Aufzählungszeichen */
      margin-right: 1rem; /* Abstand zwischen dem Aufzählungszeichen und dem Text */
      display: inline-block; /* Für die Berechnung der Breite des Zeichens */
    }
  /*
    .div-reg ul li::before {
      position:absolute;
      left:0;
    }*/
    
    .div-reg ul li {
      text-indent: -1rem; /* Negative Einzug für den Text in der zweiten Zeile */
      margin-bottom: 1vh;
    }
  
  .reg-titel {
      font-size:6vw;
      margin-bottom: 3vh;
  }
  
  .plz-titel {
      font-family: 'Roboto-Medium';
      font-size:6vw;
      padding:0px 5vw 0px 5vw;
      margin-top: 20px;
  }

  .bg-orange .plz-titel {
    font-size: 2rem;
  }
  
  .div-reg button, .button {
      color: #fff;
      margin-top: 1vh;
      font-weight: bold;
      padding: 2vw 10vw;
      background-color: var(--turkies);
      border-radius: 5vw;
      font-size: 5vw;
      border: 0px;
      cursor:pointer;
  }

  .btn3{
    text-decoration: none;
    display: flex;
    width: 90%;
    padding: 10px;
    background-color: #ccc;
    color: #000;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 5px;
  }
  
  .div-reg button:hover {
      background-color: var(--turkies);
      color:#fff;
  }
  
  .div-login {
      padding: 0px 5vw;
      font-size:4vw;
      margin: 5vh 0vh 5vh 0vh;
      text-align: center;
  }
  
  .div-profil {
      padding: 0px 5vw;
      font-size:4vw;
      margin: 0vh 0vh 5vh 0vh;
      text-align: left;
  }
  
  .div-login input, .div-reg input, .div-login select, #userdaten input, #userdaten select {
      width: 100%;
      height: 55px;
      max-width:100%;
      padding: 1vw 8%;
      border:1px solid;
      box-sizing: border-box;
  }
  
  .div-profil input {
      width: 100%;
      height: 45px;
      max-width:100%;
      padding: 2%;
      border:1px solid;
      box-sizing: border-box;
  }
  
  .div-profil select {
      width: 100%;
      height: 45px;
      max-width:100%;
      padding: 2%;
      border:1px solid;
      box-sizing: border-box;
  }
  
  .div-profil input:focus, .div-profil select:focus {
      background-color: #d7eef1;
  }
  
  .div-profil select option {
      font-size: 4vw;
      background-color: #fff;
  }
  
  .div-login input#tel {
      background: url(/icns/icon-handy.svg) no-repeat scroll 3% 0px;
      background-size: 3vw 100%;
  }
  
  .tel-hinweis {
      padding-left: 5%;
      text-align: left;
      font-size:4vw;
  }
  
  .div-login input#pw {
      background: url(/icns/icon-passwort.svg) no-repeat scroll 3% 0px;
      background-size: 3vw 100%;
      margin-top:3vw;
  }
  
  input#plz {
      background-color: #fff!important;
      background: url(/icns/icon-standort.svg) no-repeat scroll 3% 0px;
      background-size: 5% 100%;
      margin-top:3vw;
      border-radius:5px;
      padding-left: 10%;
  }
  
  input#plz::placeholder {
      margin-left:5px;
      text-align:left;
      padding-left:0px!important;
  }
  
  input#email,
  input#email:focus,
  input#email:valid,
  input#email:invalid, #email-input {
      background-color: #fff!important;
      background: url(/icns/icon-e-mail.svg) no-repeat scroll 3% 0px;
      background-size: 5% 100%;
      border-radius:5px;
      padding-left: 10%!important;
  }

  input#passwort, input#passwort_wh {
    background-color: #fff!important;
    background: url(/icns/icon-passwort.svg) no-repeat scroll 3% 0px;
    background-size: 5% 100%;
    border-radius:5px;
    padding-left: 10%!important;
}
  
  input#handy, input#tel {
      background-color: #fff!important;
      background: url(/icns/icon-handy.svg) no-repeat scroll 3.5% 0px;
      background-size: 15px 100%;
      border-radius: 5px;
      padding-left: 10%;
  }
  
  input#vw-de {
      background: url(/icns/flagge-deutsch.svg) no-repeat scroll 10px 0px;
  }
  
  input#vw-at {
      background: url(/icns/flagge-oesterreich.svg) no-repeat scroll 10px 0px;
  }
  
  input#vw-de, input#vw-at {
      width: 85px;
      background-color: #fff!important;
      background-size: 20px 100%;
      border-radius: 5px;
      padding-left: 35px;
      margin-right: 10px;
  }
  
  
  
  
  input#ben {
      background-color: #fff!important;
      background: url(/icns/icon-profil.svg) no-repeat scroll 3% 0px;
      background-size: 5% 100%;
      border-radius:5px;
      padding-left: 10%;
  }
  
  select#geschlecht {
      background-color: #fff!important;
      border-radius:5px;
      padding-left: 10%;
  }
  
  .ab-neu svg {
      margin-right: 2%;
      width: 10%;
  }
  
  .ab-neu div {
      width:88%;
  }
  
  .rot {
      color: #d50c14;
  }

  
  #error {
      margin-top: 1vh;
      color: var(--orange);
  }
  
  .sms-code {
      text-align: center;
      margin-right: 1vw;
      width: 15%!important;
      height: 7vh !important;
      max-height: 65px;
      min-height: 55px;
      border: 1px solid;
      padding: unset!important;
  }
  
  .sms-code:focus, #tel:focus {
      border: 2px solid #00a8b5 !important;
      box-shadow: 0 0 5px var(--turkies);
    }
  
  .div-sms-code {
      margin-bottom:2vh;
  }
  
  .div-login button, .div-profil button, #weiterButton {
      font-weight: bold;
      padding: 2vw 7vw;
      background-color: var(--turkies);
      color:#fff;
      border:0px;
      border-radius: 5vw;
      font-size: 5vw;
  }
  
  
  #dwl {
      display: flex;
      position:relative;
      align-items: center;
      left: 50%; /* In der Mitte des Containers positionieren */
      transform: translateX(-50%);
      font-size: 4vw;
  }
  
  #dwl svg {
      width:15%;
      margin-right:5px;
  }
  
  .div-login button[disabled] {
      background-color: #bcbcbc;
  }
  
  .punkte {
      letter-spacing: 5px;
      font-weight: 1000;
      cursor: pointer;
      font-size: 5vw;
  }
  
  summary {
      list-style-type: none;
  }

  .wahlomat summary {
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    width: fit-content;
    border: 1px solid var(--orange);
    cursor: pointer;
    font-weight: bold;
    margin-top: 5px;
    font-size: 90%;
    text-align: center;
  }

  .wahlomat summary:hover {
    background-color: #eee;
    color:var(--orange);
  }

  .wahlomat .arrow {
    color: var(--orange);
    transition: transform 0.3s ease;
  }

  .detail-text {
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-10px); /* Leichter Versatz nach oben */
    visibility: hidden;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Wenn <details> geöffnet wird */
details[open] .detail-text {
    opacity: 1;
    transform: translateY(0); /* Zurück auf ursprüngliche Position */
    visibility: visible;
}


    
  .flex{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
  }
  
  .flex1 {
      position: relative;
      width: 100%;
      /*height:4vh;*/
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index:22;
      box-sizing: border-box;
  }
  
  .flex2 {
      margin: 0 auto;
      margin-left: 15%;
      text-align: center;
      width: 70%;
      height: 4vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .flex3 {
      width: 100%;
      display: flex;
      box-sizing: border-box;
  }

  .flex4 {
    display: flex;
    width:100%;
    justify-content: center;
    align-items: stretch;
    position:relative;
  }

  .flex5 {
    display: flex;
    height:80%;
    justify-content: flex-end;
    align-items: flex-end;
    position:relative;
  }

  .flex5 .abh-child {
    width:50%;
  }

  .flex6 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

  .de-balken-container {
    display: flex;
    width: 40%;
    flex-direction: column;
    justify-content: flex-end;
  }

  .wd100 {
    width:100%!important;
  }
  
  .flex1:last-child {
      justify-content: flex-end;
  }
  
  .fl100 {
      display: flex;
      flex-basis: 100%;
      justify-content: flex-end;
      padding: 4vw 0vw 4vw 0vw;
  }

  .gap {
    gap:5%;
  }

  .gap1 {
    gap:1%;
  }
  
  .vcenter {
      align-items: center;
  }
  
  .ab-hinweis {
      width: 100%;
  }
  
  .kommentar_container {
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding: 2vw 5vw;
  }
  
  .komm {
      margin: 0;
      height: 100%;
      display: flex;
      align-items: center;
      color: #000;
      text-decoration: none;
      cursor: pointer;
      margin-right:10%;
  }
  
  .komm-border {
      /*background-color: #efef;*/
      border-radius: 15px;
      border: 20px solid #ddd;
      border-top: 50px solid #ddd;
  }
  
  .komm-border::before {
      content: "Geteilter Kommentar";
      position: absolute;
      top: -40px; /* Abstand nach oben anpassen */
      left: 50%; /* In der Mitte des Containers positionieren */
      transform: translateX(-50%);
      padding: 0 10px; /* Abstand zum Text anpassen */
      text-align: center;
      width: 100%;
  }
  
  .komm:last-child {
      margin-right:0px;
  }
  
  .komm svg{
      height:35px;
  }
  
  .plz-titel svg {
      height:3vh;
      margin-right: 1vw;
  }
  
  .ergebnis {
      width:60%;
  }
  
  .erg-u {
      width: fit-content;
      display: flex;
      background-color: #383937;
      padding: 2vw;
      color: #fff;
      font-weight: 800;
      letter-spacing: 0.1vw;
      white-space: nowrap;
  }

  .erg-u a {
    color:#fff;
    text-decoration: none;
  }
  
  .balken {
      width:40%;
      padding-left:5%;
      box-sizing: border-box;
  }
  
  .hwbox {
      border:2px solid #000;
      background-color: #ddd;
  }
  
  .ab-haende {
      display: grid;
      grid-template-columns: 30% 15% 15% 30%;
      grid-template-rows: 25vw 1fr;
      grid-gap: 3%;
      width:100%;
      align-items: end;
      box-sizing: border-box;
  }

  .ab-haende.cont-kandidaten {
    padding-bottom: 2rem;
    margin-top:2rem;
  }
  
  .ab-haende-bescheid {
      height:65%;
      display: grid;
      grid-template-columns: 45% 45%;
      grid-template-rows: 100% 1fr;
      grid-gap: 10%;
      width: 100%;
      align-items: end;
      box-sizing: border-box;
  }
  
  .ab-haende-bescheid1 {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 100% 1fr;
      grid-gap: 3%;
      width: 100%;
      align-items: end;
      box-sizing: border-box;
  }
  
  
  .ab-haende > :last-child {
      margin-right: 0;
  }
  
  .abh-child {
      position:relative;
      margin-top: 3px;
      font-size: 4vw;
      text-align: center;
  }
  
  
  .bj, .bn, .bj-grau, .bn-grau {
      display: flex;
      height: 80%;
      flex-direction: column;
      justify-content: flex-end;
  }
  
  .ab-haende-bescheid .bj, .ab-haende-bescheid .bn, .ab-haende-bescheid .bj-grau, .ab-haende-bescheid .bn-grau {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: flex-end;
  }
  
  .bj div {
      background-color: var(--turkies);
  }
  
  .bn div {
      background-color: #f48400;
  }
  
  .bj-grau div {
      background-color: #ddd;
  }
  
  .bn-grau div {
      background-color: #ddd;
  }
  
  .hj, .hn {
      height: 50%;
      width: 50%;
      cursor: pointer;
      transition: transform 0.5s ease-in-out;
      padding: 9%;
      border-radius: 50%;
      border: 2px solid #000;
      background-color: #fff;
  }
  
  .ab-hand-abgestimmt {
      position: absolute; 
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 11vh!important;
      height: 11vh!important;
      /*width:auto!important;
      height:45%!important;*/
      z-index: 1000;
      padding: 3vw;
      background-color: rgba(255,255,255,0.8);
      border-radius: 100%;
  }
  
  .ab-hand-abgestimmt-wahl {
      position: absolute;
      top: 15%!important;
      right: 5%!important;
      left: auto!important;
      transform: translate(0%, 0%)!important;
      width: 15vw!important;
      height: 15vw!important;
      z-index: 1000;
      padding: 3vw;
      background-color: rgba(255,255,255,0.8);
      border-radius: 100%;
  }
  
  .ab-hand-abgestimmt-komm {
      position: absolute; 
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8vh!important;
      height: 8vh!important;
      z-index: 1000;
      padding: 3vw;
      background-color: rgba(255,255,255,0.8);
      border-radius: 100%;
  }
  
  .hj {
      justify-self: end;
      margin-right:10%!important;
  }
  
  .bg-hj, .bg-hj-ab, .bg-hn, .bg-hn-ab {
      width: 100%;
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
  }
  
  .bg-hj {
      background-image: url('/icns/icon-ja-leer.svg');
  }
  
  .bg-hj-ab {
      background-image: url('/icns/icon-ja-farbig.svg');
  }
  
  .bg-hn {
      background-image: url('/icns/icon-nein-leer.svg');
  }
  
  .bg-hn-ab {
      background-image: url('/icns/icon-nein-farbig.svg');
  }
  
  .ov-pfeil-unten {
      bottom: 5%;
      width: 100%;
      position: absolute;
      /*z-index: 1000;*/
      background-image: url(/icns/icon-pfeil-mehr-text.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 5%;
  }
  
  .bgcolor-hn-ab {
      border-color: #000;
      background-color: #f4e8d7;
  }
  
  .bgcolor-hj-ab {
      border-color: #000;
      background-color: #eaf7f9;
  }
  
  .hn {
      margin-left:10%!important;
  }
  
  .hj svg, .hn svg {
      width: 100%;
  }
  
  .filter_container {
      display: flex;
      align-items: center;
  }
  
  /* Verstecke die standardmäßige Darstellung des Checkbox-Elements */
  .visually-hidden {
      position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
    }
    
    /* Stilisierung des Toggle-Schalters */
    .toggle-label {
      display: inline-block;
      width: 40px; /* Breite des Schalters */
      height: 20px; /* Höhe des Schalters */
      background-color: #ddd; /* Hintergrundfarbe des Schalters */
      border-radius: 15px; /* Runde Ecken für den Schalter */
      position: relative;
      margin-right: 2vw; /*für Beschriftung*/
    }
    
    /* Stil für den sichtbaren Schieberegler */
    .toggle-label:after {
      content: '';
      position: absolute;
      top: 2px; /* Position des Schiebereglers */
      left: 2px; /* Position des Schiebereglers */
      width: 16px; /* Breite des Schiebereglers */
      height: 16px; /* Höhe des Schiebereglers */
      background-color:#fff; /* Farbe des Schiebereglers */
      border-radius: 50%; /* Runde Ecken für den Schieberegler */
      transition: left 0.3s; /* Animation beim Umschalten des Schiebereglers */
    }
  
    .toggle-switch:checked + .toggle-label {
      background-color:#7fb800; /* Farbe des Schiebereglers */
    }
    
    /* Stil für den Schalter im aktivierten Zustand */
    input[type="checkbox"]:checked + .toggle-label:after {
      left: 22px; /* Position des Schiebereglers, wenn der Schalter aktiviert ist */
    }
    
    .zeilenabstand {
      line-height:2em;
    }
  
    .zeilenabstand p {
      line-height:1em;
      margin-bottom:1vh;
    }
  
    .center {
      text-align:center;
    }
  
    .abstand {
      margin-top:3vh;
    }
  
    .abstand2 {
      margin-top:6vh;
    }
  
  .hr-dick {
      width:50%;
      border: 5px solid #ddd;
      border-radius:5px;
  }
  
  .ergebnis_balken {
      position: relative;
      min-height:1px!important;
  }
  
  .ergebnis_zahl {
      position: absolute;
      top: -1.5vh;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background-color: transparent!important;
  }
  
    .ergebnis_hinweis {
        font-weight: bold;
        transform: translateX(-50%);
        left: 50%;
        bottom: 10px;
        position: absolute;
        color: #fff;
        background-color: transparent!important;
    }

  .ab-haende-bescheid .ergebnis_zahl, .de-balken-container .ergebnis_zahl {
      top: -2.5vh!important;
  }
  
  .ergebnis_zahl p {
      margin:0px!important;
  }
  
  .erg-proz {
      font-size: 4vw;
      font-weight:bold;
  }
  
  .erg-zahl {
      font-size: 3vw;
  }
  
  .bold {
      font-weight: bold;
  }
  
  .hand-ov, .hand-ov-ende {
      position: absolute;
      left: -12%;
      background-color: rgba(255,255,255,0.8);
      width: 124%;
      height: 124%;
      top: -12%;
      cursor:pointer;
  }

  .hand-ov::after {
    content: "Du kannst hier nicht abstimmen, da du nicht im Abstimmungsbereich wohnst.";
  }

  .hand-ov-ende::after {
    content: "Du kannst hier nicht abstimmen. Diese Abstimmung ist beendet.";
  }

  .hand-ov::after, .hand-ov-ende::after {
    position: absolute;
    bottom: 100%; /* Platziere den Tooltip über dem Element */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75); /* Halbtransparentes Schwarz für Tooltip */
    color: white;
    padding: 5px;
    border-radius: 3px;
    /*white-space: nowrap; /* Kein Umbruch im Text */
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Tooltip nicht klickbar */
    z-index:99999999;
}

.hand-ov:hover::after, .hand-ov-ende:hover::after {
    opacity: 1;
    visibility: visible;
    z-index:99999999;
}
  
  #obligatorisch {
      height:auto;
      padding:0;
      margin: 1vw 1vw 0 0;
      width: 10vw;
  }
  
  #meldung {
      font-size: 4vw;
      box-sizing: border-box;
      padding: 1vw;
      border-radius: 5px;
      height: 20vh;
      width: 100%;
      border: 1px solid #ababab;
  }
  
  .block {
      display:block;
  }
  .flex-start {
      align-items: flex-start;
  }
  
  .hinweisbox {
      font-size: 4.5vw;
      color: #fff;
      top: 20px;
      width: 100%;
      box-sizing: border-box;
      background-color: var(--turkies);
  }

  .hinweisbox_orange_sticky {
        font-family: Roboto-Medium;
        color: #fff;
        width: 100%;
        box-sizing: border-box;
        background-color: #f48400;
        box-shadow: 6px 18px 18px -16px rgba(0,0,0,0.3);
    }

    .hinweisbox_orange_sticky {
        position: sticky;
        top: 6vh;
        z-index:9900;
    }

    .hinweisbox_container {
        position: sticky;
        top: calc(6vh - 20px);
        z-index:9902;
    }

    .hinweisbox_bsp, .hinweisbox_grau, .hinweisbox_orange {
        font-size: 4.5vw;
        position:relative;
        top:20px;
        padding: 10px;
        text-align: center;
        color: #fff;
        width: 100%;
        box-sizing: border-box;  
        box-shadow: 6px 18px 18px -16px rgba(0,0,0,0.3);
    }

    .hinweisbox_bsp {
        background-color: var(--turkies);
    }

    .hinweisbox_grau {
        background-color: #444;
    }

    .hinweisbox_orange {
        background-color: #f48400;
    }
  
  .hinweisbox-icon {
      background-color: #fff;
      border-radius: 50%;
      background-image: url(/icns/icon-plus-zeichen.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 70%;
      width: 13vw;
      height: 13vw;
  }

  .hinweisbox-pfeil {
    background-color: #fff;
    border-radius: 50%;
    background-image: url(/icns/icon-pfeil-auswahl.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    width: 13vw;
    height: 13vw;
}

.pfeil_container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    width: 13vw;
    height: 13vw;
}

.pfeil_icon {
    width: 8vw;
    height: 8vw;
}
  
  .hinweisbox-text {
      padding-right: 20px;
      width: calc(100% - 13vw);
      box-sizing: border-box;
      text-align: left; 
  }
  
  .hinweisbox-eck {
      top: 20px;
      position: relative;
      z-index: 999;
      height: 20px;
      width: 100%;
      background-size: 40px;
      background-image: url(/icns/icon-dreieck.svg);
      background-position: 20% 0%;
      background-repeat: no-repeat;
  }

  .hinweisbox-eck-mittig, .hinweisbox-eck-mittig-grau, .hinweisbox-eck-mittig-orange {
        top: 20px;
        position: relative;
        z-index: 999;
        height: 20px;
        width: 100%;
        background-size: 40px;
        background-position: 50% 0%;
        background-repeat: no-repeat;
    }

    .hinweisbox-eck-mittig {
        background-image: url(/icns/icon-dreieck.svg);
    }

    .hinweisbox-eck-mittig-grau {
        background-image: url(/icns/icon-dreieck-grau.svg);
    }

    .hinweisbox-eck-mittig-orange {
        background-image: url(/icns/icon-dreieck-orange.svg);
    }
    
  ol li {
      margin-bottom: 10px;
  }
  
  .teilen, .teilen1 {
      background-color: #222;
      width: 20%;
      max-width: 50px;
      padding: 10px;
      border-radius: 5px;
      height: auto;
      box-sizing: border-box;
  }
  
  .teilen:hover {
      background-color: var(--turkies);
  }
  
  .teilen1:hover {
      background-color: #f48400;
  }
  
  .teilen a {
      align-items: center;
      display: flex;
  }
  
  .teilen img {
      width: 100%;
      height:auto;
  }
  
  .bb {
      box-sizing: border-box;
  }

  .bundesland path, .bundesland polygon, .bundesland polyline {
    transition: fill 0.3s ease;
    stroke:#fff;
    stroke-width: 2px;
  }
  
  .bundesland:hover path, .bundesland:hover polygon, .bundesland:hover polyline {
    fill: #777; /* Farbe, wenn man über ein Bundesland hovert */
    box-shadow: -20px 20px 10px 10px rgba(0, 0, 0, 0.5);
  }
  
  .bundesland text {
    fill: #000;
    color: #000;
    font-size: 1rem;
  }
  
  .bundesland-details {
    display: none;
    position: absolute;
    background: rgba(255,255,255,0.7);
    border: 1px solid #ccc;
    border-radius:3px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-wrap: nowrap;
    z-index:9999999;
  }

  .back-de-karte {
    cursor: pointer;
  }

  .back-de-karte:hover {
    color:var(--orange);
  }

 .flex4 svg {
    width: 60%!important;
  }

  .ergebnis-svg svg {
    width:100%;
  }

  /* Basic slider styling */
.slider {
    /*padding: 0 6%;
    left: -6%;*/
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    overflow: hidden;
  }
  
  .slides {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Füge sanften Übergang beim Slide hinzu */
  }
  
  .slide {
        display: flex;
        min-width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
  }
  
  .slide > * {
    padding:0 6%;
  }

  .slice > .disk-teilen {
    padding:0 0 0 0!important;
  }
  
  /* Navigation buttons styling */
  button.prev, button.next {
    height: 40px;
    width: 40px;
    border-radius: 100%;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    /* padding: .5vw; */
    cursor: pointer;
  }
  
  button.prev {
    left: 0px;
  }
  
  button.next {
    right: 0px;
  }
  
  /* Dots / bullet points styling */
  .dots {
    text-align: center;
    padding: 10px;
  }
  
  .dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
  }
  
  .dot.active {
    background-color: #717171;
  }

  .disk-teilen {
    padding:0 0 0 0!important;
  }

  .disk-teilen-flex {
    display: flex;
    border-style: solid;
    border-color: #bbb;
    border-width: 1px 0 1px 0;
    padding: 2% 6%;
  }

  .disk-teilen.mute {
    border:0px solid #bbb;
    padding-bottom:6%;
  }

  .disk-teilen.mute div{
    display:none;
  }
  
  .disk-teilen-flex div {
    width:50%;
    text-wrap: nowrap;
  }

  .disk-teilen .ergebnis-info{
    padding:2% 6%;
  }

/* Standard-Anzeige der .container, wenn der Container ausgeklappt ist */
.abstimmungen_container .container {
    border:1px solid #bbb;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0; /* Kein Padding im eingeklappten Zustand */
    display: none; /* Standardmäßig verstecken */
}

.abstimmungen_container .bspcontainer {
    max-height: 0;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0; /* Kein Padding im eingeklappten Zustand */
    display: none; /* Standardmäßig verstecken */
}

/* Ausgeklappter Zustand ohne Padding */
.abstimmungen_container.expanded .container, .abstimmungen_container.expanded .bspcontainer {
    padding: 0; /* Kein Padding im ausgeklappten Zustand */
    display:block;
    max-height: none;
}

/* Eingeklappter Zustand mit Padding */
.abstimmungen_container .container.collapsed, .abstimmungen_container .bspcontainer.collapsed {
    padding: 0; /* Padding hinzufügen, wenn eingeklappt */
    margin: 0;
    display:block;
}

.teilen-bv-trigger1 {
    cursor:pointer;
}

.ergebnis-svg {
    padding-bottom:1rem;
  }


.de-zoom {
    width: 2rem;
    height:2rem;
    margin-top: 2em;
    margin-left: 4em;
    position: absolute;
    cursor:pointer;
}

.de-zoom svg {
    height: 2rem!important;
    width: 2rem!important;
 }

 .de-zoom svg:hover {
    stroke:var(--orange);
 }

 .de-zoom::after {
    content: "Klick um die Karte zu vergrößern.";
  }

  .de-zoom::after{
    text-wrap: nowrap;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 99999999;
}

.de-zoom:hover::after {
    opacity: 1;
    visibility: visible;
    z-index:99999999;
}

.ab-inhalt > .slider {
    padding: 0; /* Überschreibt das Padding für direkt untergeordnetes .disk-teilen */
}

.ab-inhalt .bv-titel {
    padding: 7px 6%;
    background-size: 3rem 100%;
}

.bgj1 {
    background-color: #00a8b5;
}

.bgj2 {
    background-color: #1ac0cd;
}

.bgj3 {
    background-color: #35cbd7;
}

.bgj4 {
    background-color: #58d9e3;
}

.bgj5 {
    background-color: #84ebf3;
}

.bgn1 {
    background-color: #f48e00;
}

.bgn2 {
    background-color: #faa124;
}

.bgn3 {
    background-color: #fab14b;
}

.bgn4 {
    background-color: #fabf6e;
}

.bgn5 {
    background-color: #facf93;
}

.bgjn{
    background-color: #CCCCCC;
}

.verteilungscontainer {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 22;
    gap:1px;
    margin-bottom:2rem;
}

.square {
    flex: 1; /* Jede .square nimmt den gleichen Raum ein */
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
  }
  
  .square b, .square span {
    height: 100%;
    font-size: 10px;
    margin-top: 50px;
    display: flex;
    align-items: flex-start;
  }
  
  
  .square::after {
    content: attr(data-text); /* Platzhalter für den Text */
    display: block;
    text-align: center;
    font-size: 10px;
    margin-top: 5px; /* Platz zwischen der Box und dem Text */
  }

  #userdaten_save {
    color: #fff;
    border-radius: 5px;
    background-color: var(--turkies);
    margin-top:1rem;
    border:0px;
    }
  
    #userdaten input, #userdaten select {
        border-radius: 5px;
    }

    .polkontakte summary {        
        cursor: pointer;
        margin-top: 1rem;
        border-radius: 5px;
        border: 1px solid #000;
        padding: 2.5% 2.5% 2.5% 40px;
        background: url(/icns/icon-abgeordnete.svg) no-repeat scroll 5px 50%;
        background-size: 30px 30px;
    }

    .polkontakte summary:hover { 
        background-color: #eaf7f9
    }

    .pol_liste {
        padding: 2.5%;
        border-radius: 5px;
        border: 1px solid #111;
        background-color: #eee;
    }

    .pol_liste ul {
        margin:0;
        font-size: .7rem;
        padding-left: 1rem;
    }


/* Styling für den hervorgehobenen Begriff */
.info-icon {
    border-bottom: 2px dotted var(--orange);
    position: relative;
    cursor: pointer;
    font-weight: bold;
}

/* Styling für die Infobox */
.infotext {
    display: none;
    position: absolute;
    bottom: 125%; /* Position der Box über dem Wort */
    background-color:rgba(10,10,10,0.9);
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    max-width: 450px;
    min-width: 250px;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Verhindert, dass die Box den Hover unterbricht */
}

/* Zeige den Infotext beim Hover über das markierte Wort */
.info-icon:hover .infotext {
    display: block;
    opacity: 1;
}

.info-symbol {
    border: 1px solid #000;
    top: -5px;
    left: -5px;
    position: absolute;
    text-align: center;
    margin-right: 3px;
    display: inline-block;
    border-radius: 100px;
    background-color: #fff;
    color: green;
    font-weight: bold;
    min-width: 14px;
    height: 14px;
}

.silbentrennung {
    hyphens: auto; /* Automatische Silbentrennung */
    word-wrap: break-word; /* Falls nötig, Wörter umbrechen */
    overflow-wrap: break-word; /* Alternative für ältere Browser */
}


h1 {
    font-family: 'Roboto-Black';
    /* font-weight: 700; */
    padding-top: 40px;
    line-height: 1em;
    position: relative;
    margin: 0;
    font-size: 290%;
}

h3 {
    font-family: 'Roboto';
    font-weight: bold;
    padding: 10px 0;
    line-height: 1em;
    position: relative;
    margin: 0;
    font-size: 149%;
}

form#newsletter {
    margin-top: 20px;
}

form#newsletter input[type="email"],form#newsletter input[type="text"] {
    padding:10px 10px 10px 25px!important;
    border:2px solid #000;
    width:55%;
    box-sizing: border-box;
    margin-top:0!important;
    margin-bottom:10px;
}

form#newsletter input[type="submit"] {
    color: #fff;
    padding: 10px 20px;
    border: 2px solid #000;
    background-color: var(--turkies);
    text-align: center;
    cursor: pointer;
}

.wahlomat .untertitel {
    font-size: 90%;
    font-weight: bold;
}

.wahlomat .ab-haende.cont-kandidaten {
    margin-top: 0rem;
}

.wahlomat.printtext {
    font-size: 105%;
}

.wahlomat.langtext {
    margin-top: 15px;
    font-size: 90%;
}

.wahlomat .cont {
    background-color: var(--orange-hell);
}

.krieg-frieden .cont {
    background-color: var(--krieg-frieden-blau);
}

.wahlomat .header__bar .div-filter {
    display:none;
}

.wahlomat .ausblenden {
    display:none;
}

.hinweis-box {
    display: flex;
    align-items: center;
    background-color: #f0f8ff;
    border: 1px solid #b0e0e6;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    margin-top: 20px;
}
.wahlomat .info-icon, .krieg-frieden .info-icon {
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    background-color: #17a2b8;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-right: 10px;
    border: 0;
}
.hinweis-text {
    font-size: 80%;
    font-weight: 100;
}

/* Stile für den CAPTCHA-Bereich */
#captcha-container {
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    width: 100%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    margin-bottom: 10px;
    box-shadow: 6px 18px 18px -16px rgba(0,0,0,0.3);
}

/* Label für CAPTCHA */
#captcha-container label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
    color: #333;
}

/* Container für das CAPTCHA-Bild */
.captcha-container {
    margin-bottom: 10px;
}

/* Das CAPTCHA-Bild */
#captcha-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}

/* Button für das Neuladen des CAPTCHA */
#captcha-container button {
    color: var(--turkies);
    text-decoration: none;
    transition: color 0.3s ease;
    border: 0;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
}

#captcha-container button:hover {
    color: var(--orange);
}

/* Textfeld für die CAPTCHA-Eingabe */
#captcha {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* Textfeld im Fokus */
#captcha:focus {
    outline: none;
    border-color: #007bff;
}

/* Fehleranzeige, falls die Eingabe ungültig ist */
#captcha:invalid {
    border-color: #ff0000;
    background-color: #ffcccc;
}

.wahlomat a {
    color: var(--turkies);
    text-decoration: none;
    transition: color 0.3s ease; /* Übergang für die Farbe mit 0.3 Sekunden Dauer */
}

.wahlomat a:hover {
    color: var(--orange);
}

.erg-flex {
    box-sizing: border-box;
    gap: 20px;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.balken-container {
    width: 70px;
    height: 200px;
    padding: 1.5vh 0;
}

.hidden {
    display: none;
}
.toggle-container {
    text-align: center;
    margin-bottom: 10px;
}

.toggle-btn {
    font-size: 70%;
    padding: 5px 10px;
    margin: 0 3px;
    border: none;
    background-color: #ddd;
    cursor: pointer;
}

.toggle-btn.active {
    background-color: #007bff;
    color: white;
}

.ergebnisbereich {
    margin-top: 20px;
}

.men-wahlomat-ergebnis {
    background-color: var(--orange-hell);
}

.men-kf-ergebnis {
    background-color: var(--krieg-frieden-blau);
}

.wahlomat .ow-titel-bereich {
    padding-left:0;
}

.sozial {
    background-color: rgba(255,255,255,.5);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sozial a, .sozial p {
    display: flex;
    align-items: center;
    margin-left: 0.5em;
}

.sozial a svg {
    width:30px;
}

.hidden {
    display: none;
}

.login-choice, .back-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    font-size: 1.1em;
    background-color: #e0e0e0;
    border: none;
    cursor: pointer;
}

.login-choice:hover, .back-button:hover {
    background-color: #ccc;
}

#startChoice button {
    margin: 0 auto;
    /* gap: 10px; */
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    box-sizing: border-box;
    padding: 15px;
    margin-top: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    color: #fff;
    box-shadow: 6px 18px 18px -16px rgba(0, 0, 0, 0.3);
    text-align: center;
    justify-content: center;
}

.login-choice.guest {
    color: var(--turkies)!important;
    border: 1px solid var(--turkies);
    background-color: #fff;
}

.login-choice.login {
    background-color: var(--turkies);
}

.login-choice:hover {
    background-color:var(--orange);
    color:#fff!important;
    border:var(--orange);
}

#login-form .relative {
    font-weight:bold;
    text-align:left;
}

.back-button {
    font-weight: normal;
    left: 0;
    top: 0px;
    font-size: 70%!important;
    margin-top: 0;
    padding: 0!important;
    width: fit-content;
    color: #000!important;
    background-color: transparent!important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    display: none;
    position: absolute;
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparent */
    backdrop-filter: blur(5px); /* Verschwommener Effekt */
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column-reverse;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    max-width: 500px;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 120%;
    color: #fff;
    text-align: center;
}

.div-reg .plz-titel {
    line-height: 1.3;
    font-size: 1.2rem;
    padding: 0px 6% 0px 6%;
}

.hinweis {
    font-size: .8rem;
}

  @media only screen and (min-width: 500px) {

    .bg-orange .plz-titel {
        font-size: 2.2rem;
    }

    .div-reg .plz-titel {
        line-height: 1.3;
        font-size: 1.4rem;
        padding: 0px 6% 0px 6%;
    }

    .toggle-btn {
        font-size:90%;
        padding: 8px 16px;
        margin: 0 5px;
        border: none;
        background-color: #ddd;
        cursor: pointer;
    }

    .ab-haende.cont-kandidaten {
        padding-bottom: 3rem;
    }


    .div-reg label {
        position: absolute;
        top: -3px;
        font-size: 80%;
        display: block;
        font-weight: bold;
        text-align: left;
      }

    .pol_liste ul {
        font-size: .9rem;
        padding-left: 1rem;
    }

    .wischwahl {
        padding-bottom: 3rem;
    }

    .swipe-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        opacity: 0;
        transition: opacity 0.3s ease-out;
        z-index: -1;
    }

    .hinweisbox_bsp, .hinweisbox_grau, .hinweisbox_orange, .hinweisbox {
        font-size: 1.1rem;
    }
  
      .hinweisbox-icon, .hinweisbox-pfeil,.pfeil_container {
          height: 60px;
          width: 60px;
      }

      .pfeil_icon {
            width: 40px;
            height: 40px;
        }
      
      .hinweisbox-text {
          width: calc(100% - 60px);
          text-align: left;
      }
  
      .intercom-messenger-frame, .intercom-launcher, .intercom-launcher-active, .intercom-zi3hra {
          left: calc(50% - 200px)!important;
          top: 10%!important;
          bottom: 10%!important;
      }
  
      .ab-pille-container {
          width:40%;
      }
  
      .ab-tage, .ab-tage-bb {
          font-size:0.9rem;
      }
  
      .aktiv {
          font-size: 1.5rem;
          letter-spacing: 0.2rem;
      }
  
      .ab-inhalt {
          font-size: 1rem;
          /*padding-left: 6%;
          padding-right: 6%;*/
      }

      .ab-inhalt > * {
        padding-left: 6%;
        padding-right: 6%;
        box-sizing: border-box;
    }
    

    
  
      .ab-titel {
          font-size: 1.3rem;
          letter-spacing: 0.1vw;
      }

      .wahlomat .ab-titel {
        line-height: 1em;
        margin-top: 5px;
      }
  
      .ab-titel-wahl {
          font-size: 1.5rem;
          letter-spacing: 0.1rem;
      }
  
      .ab-haende {
          display: grid;
          grid-template-columns: 30% 15% 15% 30%;
          grid-template-rows: 100% 1fr;
          grid-gap: 3%;
          width: 100%;
          align-items: end;
      }
  
      .abh-child {
          font-size:1rem;
      }
  
      .punkte {
          font-size:1rem;
      }
  
      .hj, .hn {
          height: 4rem;
          width: 4rem;
      }
  
      .ab-hand-abgestimmt {
          position: absolute;
          width: 7rem!important;
          height: 7rem!important;
          padding: 1rem;
      }
      .header__bar {
          height: 4rem;
          padding: 0 1rem 0 1rem;
      }

      .hinweisbox_container {
            position: sticky;
            top: calc(4rem - 20px);
            z-index:9902;
            cursor: pointer;
        }
    
      #overlay, #overlay-fc, #overlay-fc-karte, #overlay-wahl-fc {
          /* margin: 0 auto!important; */
          /* margin: 0px auto; */
          left:auto;
          overflow-x: hidden;
          overflow-y:auto;
  
      }
  
      #overlay-fc .overlay-close, #overlay-wahl-fc .overlay-close, #overlay-fc-karte .overlay-close {
          width: 1rem;
          height: 1rem;
          padding: 1rem;
      }
  
      #overlay .overlay-inhalt {
          font-size:1rem
      }
  
      .ab-grau {
          padding: 1rem 2rem;
          font-size: 1rem;
      }
  
      .padd5 {
          padding: 6%
      }
  
      .padd6 {
          padding: 6% 6% 0vw 6%;
       }

       .padd7 {
        padding:2% 6% 2% 6%;
       }

       .padd8 {
        padding:0 6%;
       }

       .nomargin {
         margin: 0!important;
         margin-top:0!important;
         margin-bottom:0!important;
         margin-left:0!important;
         margin-right:0!important;
       }

       .relative {
        position:relative;
       }
  
      .marg5 {
          margin-bottom: 1rem;
      }

      .margt5 {
        margin-top: 1rem;
    }
  
      .pro, .contra {
          font-size: 1rem;
      }
  
      .komm-zeit {
          max-width: 35%;
          font-size: 0.7rem;
      }
  
      .komm-avatar {
          width: 3rem;
          height: 3rem;
      }
  
      .komm-text {
          margin-top: 1.5rem;
          margin-bottom: 1.5rem;
          font-size: 1rem;
      }
  
      .h-komment, .h-presse {
          letter-spacing: 1px;
          padding: 1rem 6%;
      }
  
      #form-komm-filter {
          padding: 1rem;
      }
  
      #form-komm-filter select {
          padding: 0.5rem;
      }
  
      .div-komm-form textarea {
          font-size: 1rem;
      }
  
      .div-komm-form button {
          font-size: 1rem;  
          padding: 0.8rem!important;
      }
      .komm-melden, .komm-teilen, .komm-teilen-wahl, .komm-loeschen {
          font-size: 1rem;
          padding: 0.3rem;
      }
  
      .ov-text, .ov-titel {
          font-size: 1.5rem;
      }
  
      .div-reg {
          font-size: 1rem;
          padding: 1rem 2rem;
      }
  
      .div-reg button, .button, .div-login button, .div-profil button, #weiterButton {
          padding: 1rem 3rem;
          font-size: 1rem;
      }
      
      .div-reg input, .div-profil input, .div-profil select, .div-profil select option, #userdaten input, #userdaten select {
          margin-top: 1rem!important;
          padding: 0.8rem 5%;
          height:auto;
          font-size: 1rem;
      }

      .div-login input {
        padding: 0.8rem 5%;
        height:auto;
        font-size: 1rem;
    }
  
      .plz-titel {
          font-size: 1.7rem;
          padding: 0px 6% 0px 6%;
      }
  
      .div-reg ul {
          margin-top: 40px;
          font-size: 1rem;
          line-height: 1.4em;
      }
  
      .div-reg ul li {
          text-indent: -1rem;
          margin-bottom: 5px;
      }
  
      .div-login {
          position: relative;
          font-size: 1rem;
          margin: 2vh 0vh 5vh 0vh;
      }
  
      .div-profil {
          padding: 0px 6%;
          font-size: 1rem;
          margin: 0vh 0vh 5vh 0vh;
      }
  
      .div-login input#plz {
          width:100%;
          box-sizing: border-box;
          padding: 1.5rem 1.5rem 1.5rem 3rem;
          font-size: 1rem;
          background-size: 1.3rem 100%;
          margin-top: 1rem;
      }
  
      #plzResults li {
          padding: 0.5rem 0rem;
      }  
      
      p {
          margin: 1rem 0px 0px 0px;
      }
  
      .reg-titel {
          font-size: 2rem;
          margin-bottom: 3rem!important;
      }
  
      .komm-ben {
          font-size: 0.8rem;
      }
  
      .ab-hand-abgestimmt-komm {
          padding:1rem;
      }
  
      .hr-grau, .abstand3 {
          margin: 4rem 0vw 1rem 0vw;
      }

      .hr-grau1 {
        margin: 3rem 0vw 1rem 0vw;
      }
  
      .div-filter svg, .div-menue svg, .men-plz svg{
          height: 90%;
      }
  
      .ab-inhalt .ow-titel {
          font-size: 1.3rem;
          padding: 1vw 1vw 1vw 4rem;
          background-size: 3rem 100%;
      }

      .ab-inhalt .bv-titel {
        font-size: 1.3rem;
        padding: 15px 15px 15px 6%;
        }
  
      .pfeil_rechts {
          width: 1rem;
          height: 1rem;
      }
  
      .flex3 {
          box-sizing: border-box;
          max-height: 30vh;
      }
  
      .ow-bild {
          height: 150px;
          width: 150px;
      }
  
      .ow-titel-bereich {
          padding-left: 1rem;
          width: calc(100% - 150px);
      }
  
      .bg-grau {
          background-color: #efefef;
          padding: 0vw 1rem;
      }
  
      .bg-grau .ow-titel {
          font-size: 1.5rem;
          padding: 1rem 1rem 1rem 4rem;
          background-size: 3rem 100%;
      }
  
      .ow-bild1 {
          height: 15vh;
          width: 15vh;
      }
  
      .wahl-aufz .ow-titel {
          font-size: 1rem;
          padding: 1rem 1rem 1rem 3rem;
          background-size: 2rem 2rem!important;
          color: #222;
          border-bottom: 0px;
      }

      .aufz-presse .ow-titel {
        background: url(/icns/icon-presse.svg) no-repeat scroll 1% 0.5rem;
    }
  
      .cont-kandidaten {
          padding: 0vw 6%;
          /*z-index:9999;*/
      }
  
      .pfeil-rechts {
          height: 1rem;
          width: 1rem;
      }
  
      .k-aufz .pfeil-rechts {
          height: 2rem;
          width: 1rem;
      }
  
      .neu {
          letter-spacing: 0.2rem;
          white-space: nowrap;
      }
  
      .ov-header-titel {
          font-size: 1.5rem;
      }
  
      #overlay-fc .overlay-back, #overlay-wahl-fc .overlay-back, #overlay-fc-karte .overlay-back {
          width: 1rem;
          height: 1rem;
          padding: 1rem;
          background-size: 1rem 100%;
      }
  
      .ab-hand-abgestimmt-wahl {
          width: 5rem!important;
          height: 5rem!important;
          padding: 1rem;
          top: 15%;
          right: 5%;
      }
  
      .men-profil, .men-hilfe, .men-funktion, .men-kontakt, .men-neu, .men-logout, .men-login, .men-app, .men-appiphone, .men-rechtliches, .men-ueber, .men-alle-ab, .men-wahlomat-ergebnis, .men-chart, .men-kf-ergebnis {
          font-size: 1rem;
          padding: 0vw 1rem;
      }
  
      .haupt-menue {
          top: 4rem;
      }
  
      #overlay-fc .overlay-inhalt, #overlay-wahl-fc .overlay-inhalt, #overlay-fc-karte .overlay-inhalt {
          height: calc(100% - 4rem)!important;
      }
  
      #loadingIndicator {
          font-size:2rem;
      }
  
      .tel-hinweis {
          font-size:1rem;
      }
  
      .kommentar_container, .komm-menue {
          padding: 3% 6%;
      }
  
      .plz-titel svg {
          height: 2rem;
          margin-right: 0.5rem;
      }
  
      #obligatorisch {
          margin:0;
          width: 15%;
      }
  
      #meldung {
          font-size: 1rem;
          padding: 2%;
      }
  
      .melden-button {
          margin-right:6%;
      }
  
      .komm-hr {
          width: 88%;
      }
  
      .debug {
          font-size:1rem;
      }
  
      .erg-u {
          padding:7px;
      }
  
      .erg-proz {
          font-size: 1rem;
      }
  
      .erg-zahl {
          font-size: 0.8rem;
      }
  
      #dwl {
          font-size:1.2rem;
      }
  
      .cont {
          margin-top:4rem;
      }

      .map-pin {
        align-items: center;
        display: flex;
        min-height: 25px;
        background-size: 20px 20px!important;
        padding-left: 25px;
    }
  
    }

@media only screen and (max-width: 380px) {

    .komm svg {
        height: 25px;
        font-size:3.5vw!important;
    }
    
}