/* Grundlegende Stile & Resets */
        :root {
            --primary-color: #333;
            --background-color: #ffffff;
            --text-color: #383937;
            --light-gray-bg: #f8f9fa;
            
            --orange:#f48e00;
            --turkies:#00a8b5;
            --antrazit: #383937;

            --hellturkies:#d6edf2;

            --hellgrau:#e8e8e8;
            --grau:#d2d2d2;
        }

        @font-face {
            font-family: 'Bitter-Regular';
            src: url('../font/Bitter-Regular.ttf') format('truetype');
            font-weight: 100 900; /* Variable Schriftstärke */
            font-style: normal;
        }

        @font-face {
            font-family: 'Bitter-Bold';
            src: url('../font/Bitter-Bold.ttf') format('truetype');
            font-weight: 100 900; /* Variable Schriftstärke */
            font-style: normal;
        }

        @font-face {
            font-family: 'Bitter-Italic';
            src: url('../font/Bitter-Italic.ttf') format('truetype');
            font-weight: 100 900; /* Variable Schriftstärke */
            font-style: normal;
        }

        @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");
        }

        body {
            font-family: 'Roboto', Helvetica, Arial, sans-serif;
            font-size: 20px;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .slider-start-slide .container {
            position: absolute;
            width: 100%;
            bottom:20px;
            left:50%;
            transform:translateX(-50%);
            text-align: left;
        }

        .slider-start-container {
            position: relative; /* Wichtig, damit der Button sich daran orientiert */
        }

        .swiper-pause-button {
            position: absolute;
            bottom: 15px; /* Abstand von unten */
            right: 15px;  /* Abstand von rechts */
            z-index: 10;  /* Stellt sicher, dass er über den Slides liegt */
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%; /* Macht den Button rund */
            width: 44px;
            height: 44px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s;
        }

        .swiper-pause-button:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        h1, h2, h3 {
            color: var(--text-color);
            font-weight: 600;
            font-family: 'Bitter-Regular';
        }

        h1 {
            font-size: 45px;
            line-height:1.2em;
        }

        h1.underline {
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid #fff;
        }

        h2, .text-content h1 {
            font-size: 36px;
        }

        h5 {
            font-size:20px;
            border-bottom:2px solid var(--text-color);
        }

        hr {
            margin-bottom: 40px;
            border: 1px solid var(--text-color);
        }

        a {
            color: var(--turkies);
            text-decoration: none;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .bg1 {
            background-color: var(--hellgrau);
        }

        .bg2 {
            background-color: var(--grau);
        }

        .btn {
            display: inline-block;
            padding: 12px 28px;
            background-color: var(--orange);
            color: #fff;
            text-align: center;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
            text-transform: uppercase;
            line-height:1.2em;
        }

        .cta {
            margin-top:20px;
        }

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

        .btn svg {
            width: 30px;
        }

        .book-flex {
            display: flex;
            width:100%;
            align-items: center;
            justify-content: space-evenly;
            flex-wrap: wrap;
            gap:10px;
        }

        .book-flex a {
            /* Aktiviert das Flexbox-Layout */
            display: flex;
            
            /* Zentriert die Elemente vertikal (Icon und Text auf einer Höhe) */
            align-items: center;
            
            /* Zentriert die Elemente horizontal innerhalb des Links */
            justify-content: center;
            
            /* Verhindert einen Zeilenumbruch, falls der Text zu lang wird */
            white-space: nowrap; 
            
            /* Optional: Fügt einen kleinen Abstand zwischen dem SVG-Icon und dem Text hinzu */
            gap: 8px; 
            min-width:fit-content;
            flex: 1;
        }

        .support-actions .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .btn.botschafter {
            background-color: var(--turkies);
            color:#fff;  
            border:1px solid var(--turkies);          
        }

        .btn.botschafter:hover {
            border:1px solid #fff;
        }

        .btn.foerderer {
            background-color: #fff;
            color:var(--turkies);
            border:1px solid #fff;
        }

        .btn.foerderer:hover {
            border:1px solid var(--turkies);
        }

        .btn.koordinator {
            background-color: var(--hellturkies);
            color:var(--turkies);
            border:1px solid var(--hellturkies);
        }

        .btn.koordinator:hover {
            border:1px solid var(--turkies);
        }

        /* Header & Navigation */
        /* Header & Navigation */
        .main-header {
            background: var(--antrazit); /* Geänderte Hintergrundfarbe */
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 0; /* Padding wird vom Wrapper übernommen */
        }

        /* Neuer Wrapper für die Flexbox-Struktur */
        .header-content-wrapper {
            display: flex;
            align-items: stretch; /* Stellt sicher, dass die Farb-Divs die volle Höhe haben */
        }

        /* Neue Klassen für die Farbstreifen */
        .color-bar-container {
            display: flex;
        }

        .color-bar {
            width: 30px;
        }

        /* Container-Anpassung */
        .main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-grow: 1; /* Nimmt den restlichen Platz ein */
            padding: 15px 60px 15px 0;
            gap:20px;
        }

        .logo {
            display: flex;
            font-size: 1.5em;
            font-weight: bold;
            color: #fff;
            align-items: center;
        }

        .logo img {
            min-height: 40px;
            max-width: 100%;
            height: 100%;
        }

        .main-nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .main-nav li {
            margin-left: 25px;
            margin-bottom: 0;
        }

        .main-nav a {
            /*background-color: var(--antrazit);*/
            color: #fff; /* Geänderte Linkfarbe */
            font-weight: 500;
            transition: color 0.3s ease; /* Übergang für Hover-Effekt */
            padding: 5px 0;
        }

        /* Neuer Hover-Effekt */
        .main-nav a:hover {
            color: #3abac6; /* Türkis beim Hovern */
        }

        .main-nav a.active {
            color: var(--orange);
            font-weight:bold;
        }

        .hamburger-menu {
            display: none;
            cursor: pointer;
            font-size: 24px;
            color: #fff; /* Geänderte Farbe */
        }

        /* Hero Section */
        .hero {
            text-align: center;
            padding: 80px 20px;
        }

        .hero p {
            text-align: left;
        }
        
        .hero h1 {
            font-size: 2.8em;
            margin-bottom: 20px;
        }

        .current-poll {
            margin-top: 40px;
            border: 1px dashed #ccc;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
        }

        .current-poll h3 {
            margin-top: 0;
        }

        /* Sections */
        .section {
            padding: 60px 0;
        }

        .section-gray {
            background-color: var(--light-gray-bg);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
            gap: 40px;
        }

        .grid-item h3 {
            margin-top: 0;
        }

        .timeline {
            list-style: none;
            padding: 0;
            position: relative;
        }
        
        .timeline li {
            margin-bottom: 30px;
            padding-left: 40px;
            position: relative;
        }

        .timeline li::before {
            content: attr(data-step);
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background: var(--turkies);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* Book Section */
        .book-section {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .book-cover {
            flex: 0 0 40%;
        }

        .book-description {
            flex: 1;
        }

        /* Support Section */
        .support-actions {
            grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
            display: grid;
            gap: 20px;
            justify-items: stretch;
            align-items: end;
        }

        .support-actions div {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .support-actions p {
            text-align: left;
            margin-top:0;
        }

        /* Footer */
        .main-footer {
            background: var(--primary-color);
            color: #fff;
            padding: 40px 0;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-content div {
            flex: 1;
            min-width: 200px;
        }

        .footer-content h4 {
            margin-top: 0;
            border-bottom: 1px solid #555;
            padding-bottom: 10px;
        }

        .footer-content a {
            color: #fff;
        }

        div.start.innenw {
            width: 35%;
            height: 545px;
            color: #fff;
            max-width: 1920px;
            padding-right: unset;
            /*padding-left:100px;*/
        }

        /* Grundcontainer für den Start-Slider */
        .slider-start-container {
            width: 100%;
            height: auto; /* Höhe passt sich dem Inhalt an */
            position: relative; /* Wichtig für die Positionierung der Texte und Bullets */
            overflow: hidden; /* Versteckt alles außerhalb des Sliders */
        }

        /* Styling für jeden einzelnen Slide */
        .slider-start-slide {
            position: relative; /* Damit der Text-Container sich daran ausrichten kann */
            text-align: center; /* Zentriert den Inhalt, falls gewünscht */
        }

        .slider-start-slide img {
            display: block;
            height: 100%;
            min-width: 100%;
            object-fit: cover; /* Sorgt dafür, dass das Bild den Container füllt, ohne sich zu verzerren */
        }

        /* Der Text-Container, der über dem Bild schwebt */
        .slider-start-slide .start {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start; /* Zentriert den Text horizontal */
            align-items: center; /* Zentriert den Text vertikal */
            color: white; /* Beispiel für Textfarbe, falls das Bild dunkel ist */
            background: rgba(0, 0, 0, 0.3); /* Optional: Ein leichter Schatten für bessere Lesbarkeit */
        }

        .swiper {
            z-index:10!important;
            height: 70dvh;
            min-height: 350px;
            max-height:90dvh!important;
        }

        /* Paginierung (Bullets) */        
        .slider-start-container .swiper-pagination {
            position: absolute;
            bottom: 20px !important; /* Abstand vom unteren Rand */
            left: 50%;
            transform: translateX(-50%);
            width: auto !important;
        }

        .slider-start-container .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.7); /* Dezente, halbtransparente Bullets */
            opacity: 1;
            transition: background-color 0.3s;
        }

        .slider-start-container .swiper-pagination-bullet-active {
            background-color: #ffffff; /* Aktiver Bullet ist voll sichtbar */
        }

        .slider-start-slide .start {
            background-color: transparent!important;
            background: transparent;
        }

        .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
            left: 50%!important;
            transform: translateX(-50%);
        }

        .swiper-fade .swiper-slide {
            text-align: left;
        }

        .swiper-wrapper {
            overflow: hidden;
            max-height: calc(100dvh - var(--abstand_oben) - var(--social_bar));
            background: rgb(42 59 82);
        }

        .innenw {
            padding-right: calc((100% - 1300px + 1100px)/2);
            padding-left: calc((100% - 1300px)/2);
            padding-top: 4%;
            padding-bottom: 4%;
        }

        .text-content {
            max-width: 550px;
            background: var(--antrazit);
            opacity: .9;
            padding: 20px 40px 40px 40px;
            color:#fff;
            height: fit-content;
        }

        .text-content h1,.text-content h2,.text-content h3 {
            line-height: 1.2em;
            color:#fff;
        }

        .text-content h5 {
            color:#fff;
            border-color:#fff;
        }


        /* Stellt den Paragraphen und das Details-Element in eine Zeile */
        .info-box p,
       details, .info-text p {
        display: inline;
        }

        /* Gestaltet das <summary>-Element (den klickbaren Teil) */
        summary {
        display: inline;
        cursor: pointer;
        font-weight: bold;
        color: var(--turkies);

        /* Schritt 1: Versteckt den Original-Text "Mehr..." aus dem HTML,
            indem die Schriftgröße auf 0 gesetzt wird. */
        font-size: 0;
        }

        /* Schritt 2: Fügt den sichtbaren Text per CSS hinzu */
        summary::after {
        content: 'Mehr...'; /* Der Standardtext, wenn geschlossen */
        font-size: 1rem; /* Setzt die Schriftgröße für unseren CSS-Text zurück */
        }

        /* Schritt 3: Ändert den Text, wenn das Element geöffnet ist */
       details[open] > summary::after {
        content: 'Weniger...'; /* Der neue Text, wenn offen */
        }

        /* Fügt einen Unterstrich beim Darüberfahren hinzu */
        summary:hover {
        text-decoration: underline;
        }

        /* Verhindert einen Fokus-Rahmen beim Anklicken */
        summary:focus {
        outline: none;
        }

        /* Stellt sicher, dass der aufklappende Inhalt ein eigener Block bleibt */
       details[open] {
        display: block;
        margin-top: 10px;
        }

        
        div.frage {
            margin-bottom: 10px;
        }

        p.frage {
            gap: 15px;
            display: flex;
            color: #000;
            cursor: pointer;
            margin: 0;
            text-align: left;
            border: 0;
            padding: 10px;
            background-color: var(--grau);
            align-items: center;
        }

        p.frage span::before {
            content:"+";
            color:var(--drot);
            font-size:200%;
        }

        .offen p.frage span::before {
            content: "—"; /* Hier wird das Minuszeichen eingefügt */
            color: #fff;
            font-size: 200%;
        }


        .offen p.frage {    
            color: #fff;
            background-color: #787878;
        }

        .frage.offen p.frage {
            font-weight:bold;
        }

        p.antwort {
            display: none;
            text-align: left;
        }

        .offen > p.antwort {
            padding: 20px 20px 20px 52px;
            margin-top: 0;
            background-color: #fff;
            display: block;
        }

        .m-top {
            margin-top:40px;
        }


        .center {
            text-align: center;
        }


        .mobilenot {
            display:block!important;
        }
        
        .pcnot {
            display: none!important;
        }

        /*Karte*/
        .ergebnis-container {
            height: 350px;
        }

        .ab-haende {
            max-width: 300px;
            height: 200px;
            display: grid;
            grid-template-columns: 48% 48%;
            grid-template-rows: 100% 1fr;
            grid-gap: 4%;
            width: 100%;
            align-items: end;
            box-sizing: border-box;
        }

        .bn div {
            background-color: #f48400;
        }

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

        .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;
        }

        .bj, .bn, .bj-grau, .bn-grau {
            display: flex;
            height: 80%;
            flex-direction: column;
            justify-content: flex-end;
        }

        .abh-child {
            position: relative;
            font-size: 1rem;
            text-align: center;
        }

        /*Karte*/
        .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;
        }

        .flex4 .abh-child {
            width:50%;
            font-weight:bold;
        }

        .ergebnis-svg svg {
            width: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 */
        }

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

        .gap {
            gap: 5%;
        }

        .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%;
        }

        .bn div {
            background-color: #f48400;
        }

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

        .ergebnis_zahl {
            position: absolute;
            top: -33px;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            background-color: transparent !important;
        }

        .erg-zahl {
            font-size: 0.8rem;
            text-align: center!important;
        }

        .ergebnis_zahl p {
            margin: 0px !important;
        }

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

        .erg-proz {
            font-size: 1rem;
            font-weight: bold;
        }

        #overlay-fc-karte {
            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-karte .header__bar {
            border-bottom: 1px solid #ccc;
            justify-content: center !important;
            height: 4rem;
            padding: 0 1rem 0 1rem;
        }

        #overlay-fc-karte .overlay-inhalt {
            height: calc(100% - 4rem) !important;
            width: 100%;
            bottom: 0px;
            position: absolute;
            background-color: white;
            overflow-y: auto;
            z-index: 555;
            box-sizing: border-box;
        }

          .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);
        }

        .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;
        }
        /*Karte Ende*/

        .abstimmungs-flex {
            gap: 40px;
            display: flex;
            width: 100%;
        }

        .abstimmungs-flex .bild {
            width:70%;
        }

        .abstimmungs-flex .bild img {
            width:100%;
            height:auto;
        }

        /* Stile für den "Karten"-Look des gesamten Moduls */
/* Die Hauptkarte dient jetzt nur noch als Rahmen mit abgerundeten Ecken und Schatten. */
.poll-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Die Ecken werden abgerundet */
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    
    /* WICHTIG: Kein Padding und kein Hintergrund mehr hier! */
    padding: 0;
    background-color: transparent;

    /* Sorgt dafür, dass die Ecken der inneren farbigen Blöcke mit abgeschnitten werden. */
    overflow: hidden; 
}

/* 1. Styling für den oberen, türkisen Intro-Bereich */
.poll-intro {
    background-color: var(--turkies);
    padding: 30px;
    text-align: center;
    color: #fff;
}

.poll-intro h2 {
    color:#fff;
}

.poll-intro h5 {
    border-bottom: 2px solid var(--turkies); /* Eine kräftigere Linie in dunklerem Türkis */
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.poll-intro p {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

/* 2. Styling für den unteren, weißen Hauptbereich */
.poll-content-main {
    background-color: #fdfdfd; /* Dein bisheriger weißer Hintergrund */
    padding: 30px;
}

/* Optional: Ein etwas auffälligerer Trenner zwischen Intro und Abstimmung */
.poll-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    margin: 10px 0 30px 0;
}

/* Die Überschrift der Abstimmung selbst braucht keinen oberen Abstand mehr */
.poll-card .section-title {
    margin-top: 0;
}

/* Der Hauptcontainer für den Infoblock */
.info-block {
    box-sizing: border-box;

    display: flex; /* Richtet Icon und Text nebeneinander aus */
    align-items: flex-start; /* Stellt sicher, dass das Icon oben bündig ist */
    gap: 15px; /* Abstand zwischen Icon und Text */
    
    background-color: var(--hellturkies); /* Deine helle Hintergrundfarbe */
    color: var(--antrazit); /* Dunkler Text für guten Kontrast */
    
    border-radius: 8px; /* Passend zum Kartendesign */
    border-left: 5px solid var(--turkies); /* Auffälliger linker Rand */
    
    padding: 20px;
    margin: 20px 0; /* Etwas Abstand nach oben und unten */
}

/* Container für das SVG-Icon */
.info-icon {
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
    margin-top: 3px; /* Feinanpassung der vertikalen Position */
}

/* Das SVG-Icon selbst färben */
.info-icon svg {
    stroke: var(--turkies); /* Färbt das Icon in deiner Haupt-Türkisfarbe */
}

/* Stellt sicher, dass die Absätze im Infoblock keinen unerwünschten Abstand haben */
.info-text {
    text-align: left;
}

.info-text p {
    margin: 0;
    padding: 0;
}

/* Fügt einen kleinen Abstand zwischen den beiden Absätzen hinzu */
.info-text p:not(:last-child) {
    margin-bottom: 10px;
}

        /* Haupt-Container, der Flexbox für die Spalten verwendet */
        .poll-container {
            display: flex;
            gap: 30px; /* Abstand zwischen den Spalten */
            flex-wrap: wrap; /* Erlaubt den Umbruch auf kleinen Bildschirmen */
        }

        /* Linke Spalte: Info */
        .poll-info {
            flex: 1; /* Nimmt 50% des verfügbaren Platzes ein */
            min-width: 300px; 
        }

        .poll-info p {
            text-align: left;
        }

        .poll-info h2 {
            margin-top: 0;
            font-size: 1.8em; /* Titel etwas größer machen */
        }

        /* Stellt sicher, dass das Bild in der Spalte nicht überläuft */
        .poll-image img {
            width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 15px 0;
        }

        /* Rechte Spalte: Ergebnisse */
        .poll-results {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
        }

        .poll-results h3 {
            text-align: center;
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.4em;
            color: #333;
        }

        /* Dein bestehender Container wird so angepasst, dass er sich gut in die Spalte einfügt */
        .poll-results .details-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Schiebt den Button nach unten */
            flex-grow: 1; /* Sorgt dafür, dass der Container die volle Höhe der Spalte einnimmt */
        }

        /* Stellt sicher, dass dein Ergebnis-SVG den Platz gut ausfüllt */
        .ergebnis-svg {
            margin-bottom: 20px;
        }

        /* Anpassung deines bestehenden Button-Stils für bessere Sichtbarkeit */
        .poll-results .btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.1em;
            font-weight: bold;
            transition: background-color 0.3s;
            margin-top: auto; /* Klebt am unteren Rand, falls der Inhalt nicht ausreicht */
        }

        li {
            text-align: left;
            margin-bottom:10px;
        }



        /* Responsive Design / Hamburger Menu */
        @media (max-width: 768px) {

            body {
                font-size: 18px;
            }

            .main-header .container {
                padding: 10px 20px;
            }

            .swiper {
                height:100dvh;
                min-height: fit-content;
            }

            .unterseite .swiper {
                height:60dvh;
            }

            .slider-start-slide img {
                height:30%;
            }

            .unterseite .slider-start-slide img {
                height:50%;
            }

            .slider-start-slide .container {
                padding: 0;
                height:70%;
                bottom:0;
                left:0;
                transform:translateX(0);
                width:100%;
            }

            h2, .text-content h1 {
                font-size: 25px;
                line-height:1.2em;
            }

            .unterseite .slider-start-slide .container {
                height:50%;
            }
        
            .unterseite h2.section-title {
                margin-top:0;
            }

            .unterseite .bg1 .container{
                padding-top:50px;
                padding-bottom:50px;
            }

            h5 {
                font-size: 20px;
                line-height:1.2em;
                font-weight:normal;
                padding-bottom:5px;
            }

            .text-content {
                height:100%;
                padding:20px;
            }

            .text-content p {
                line-height: 1.2em;
            }

            .text-content h5 {
                margin-top:0;
            }

            footer ul {
                padding: 0 20px;
            }

            .poll-card {
                margin-top:0;
            }

            .color-bar {
                width: 20px;
            }

            .nopadd {
                padding:0;
            }

            .hero {
                text-align: center;
                padding: 0px 0px;
            }

            .grid-container, .support-actions {
                display: flex;
                flex-direction: column;
            }

            .support-actions {
                gap:40px;
            }

            .mobilenot {
                display:none!important;
            }
            
            .pcnot {
                display: block!important;
            }

            .poll-container {
                flex-direction: column; /* Stellt die Spalten untereinander dar */
            }
            .poll-info h2 {
                text-align: center; /* Titel auf Mobilgeräten zentrieren */
            }

            .hamburger-menu {
                display: block;
            }

            .main-nav {
                display: none; /* Menü standardmäßig ausblenden */
                position: absolute;
                top: 60px; /* Höhe deiner Header/Navbar anpassen */
                left: 0;
                width: 100%;
                height: calc(100dvh - 60px); /* Volle Höhe abzüglich Header */
                
                /* WICHTIG: Hintergrundfarbe mit Transparenz definieren */
                /* Ersetze 51, 51, 51 mit den RGB-Werten von var(--antrazit) */
                background-color: rgba(51, 51, 51, 0.9);
                
                /* Der Weichzeichner-Effekt */
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px); /* Für Safari */

                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            /* Wenn das Menü per Klick (z.B. via JavaScript) aktiv ist */
            .main-nav.active {
                display: block; /* Menü anzeigen */
            }

            .main-nav.active {
                display: block;
            }

            .main-nav ul {
                flex-direction: column;
                width: 100%;
            }

            .main-nav li {
                margin: 0;
                width: 100%;
                text-align: center;
            }

            .main-nav a {
                display: block;
                padding: 15px;
                border-bottom: 1px solid #eee;
            }
            
            .header-cta {
                display: none; /* Button im Header auf Mobil ausblenden */
            }

            .book-section {
                flex-direction: column;
                text-align: center;
            }
        }