/* ══════════════════════════════════════════════
           RESPONSIVE — TABLET  (max-width: 1199px)
        ══════════════════════════════════════════════ */
        @media (max-width: 1199px) {
            .slide {
                padding: 3rem 3rem;
            }

            #s-dorf {
                padding-top: 2.5rem;
            }

            #s-title h1 {
                font-size: clamp(3rem, 7vw, 5.5rem);
            }

            .slide-title {
                font-size: clamp(1.6rem, 3.5vw, 2.6rem);
            }

            .consent-hero {
                font-size: clamp(2.2rem, 5vw, 4rem);
            }

            #s-closing blockquote {
                font-size: clamp(1.4rem, 3vw, 2rem);
            }

            .vision-quote {
                font-size: clamp(1.3rem, 2.5vw, 1.8rem);
            }

            /* Dorf: Panel unterhalb des Grids auf Tablet */
            #s-dorf .village-wrap {
                flex-direction: column;
                max-width: 680px;
            }

            .building-panel {
                width: 100%;
            }

            /* Szene: Panel unterhalb auf Tablet */
            .scene-wrap {
                flex-direction: column;
                max-width: 680px;
            }

            /* align-self:flex-start kollabiert die Stage auf 0 Breite in column-Kontext,
               da alle Kinder absolut positioniert sind — width:100% erzwingt korrekte Breite */
            .scene-stage {
                width: 100%;
            }

            .scene-side {
                width: 100%;
            }

            /* Tech-Phasen: 2 Spalten */
            .tech-phases {
                flex-wrap: wrap;
            }

            .tech-phase {
                flex: 1 1 calc(50% - 0.75rem);
                min-width: 220px;
            }

            /* Finance: 2 Spalten */
            .finance-grid {
                grid-template-columns: 1fr 1fr;
            }

            /* Consent-Cards: 2 Spalten */
            .consent-cards {
                flex-wrap: wrap;
            }

            .consent-card {
                flex: 1 1 calc(50% - 0.75rem);
                min-width: 240px;
            }
        }

        /* ══════════════════════════════════════════════
           RESPONSIVE — MOBIL  (max-width: 767px)
        ══════════════════════════════════════════════ */
        @media (max-width: 767px) {
            /* --- Grundlayout --- */
            body {
                overflow: auto;
            }

            .slide {
                padding: 4.5rem 1.25rem 6rem;
                overflow-y: auto;
                justify-content: flex-start;
            }

            .slide.active {
                justify-content: flex-start;
            }

            /* --- Typografie (fluid) --- */
            #s-title h1 {
                font-size: clamp(2.4rem, 11vw, 4rem);
                letter-spacing: 0;
            }

            #s-title .tagline {
                font-size: clamp(0.95rem, 4vw, 1.35rem);
            }

            .slide-title {
                font-size: clamp(1.3rem, 5.5vw, 2rem);
                margin-bottom: 1.25rem;
            }

            .consent-hero {
                font-size: clamp(1.8rem, 7.5vw, 3rem);
            }

            #s-closing blockquote {
                font-size: clamp(1.2rem, 5vw, 1.7rem);
            }

            .vision-quote {
                font-size: clamp(1.1rem, 4.5vw, 1.5rem);
                margin-bottom: 1.5rem;
            }

            .eyebrow {
                font-size: 1rem;
            }

            /* --- Nav-Pfeile: größer, besser positioniert --- */
            #nav-prev, #nav-next {
                width: 44px;
                height: 44px;
                bottom: 1.25rem;
            }

            #nav-prev {
                left: calc(50% - 2.75rem);
            }

            #nav-next {
                left: calc(50% + 0.5rem);
            }

            #slide-counter {
                bottom: 0.4rem;
            }

            /* Key-Hint auf Mobil ausblenden */
            #key-hint {
                display: none;
            }

            /* Nav-Dots: kleiner, noch rechts */
            #dots {
                right: 0.5rem;
                gap: 0.45rem;
            }

            /* --- Slide 1 --- */
            #s-title .chips {
                gap: 0.5rem;
                margin-bottom: 2rem;
            }

            /* --- Two-col → single col --- */
            .two-col {
                grid-template-columns: 1fr;
            }

            /* --- Target-Grid --- */
            .target-grid {
                gap: 0.6rem;
            }

            .target-card {
                min-width: 130px;
                padding: 1rem 1.25rem;
            }

            /* --- Stats-Row --- */
            .stats-row {
                gap: 0.75rem;
                margin-top: 1.25rem;
            }

            .stat-card {
                min-width: 120px;
                padding: 0.6rem 1rem;
            }

            /* --- Dorf --- */
            #s-dorf {
                padding-top: 4.5rem;
            }

            #s-dorf .village-wrap {
                flex-direction: column;
                gap: 1rem;
            }

            .building-panel {
                width: 100%;
            }

            .village-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .building {
                padding: 0.5rem 0.4rem;
            }

            .b-icon {
                font-size: 1.2rem;
            }

            .b-name {
                font-size: 0.9rem;
            }

            .weather-btns {
                justify-content: flex-start;
            }

            /* --- Szene --- */
            .scene-wrap {
                flex-direction: column;
                gap: 1rem;
            }

            .scene-side {
                width: 100%;
            }

            .scene-stage {
                width: 100%;
                aspect-ratio: 4 / 3;
            }

            /* --- Privacy-Layout: single col --- */
            .privacy-layout {
                grid-template-columns: 1fr;
            }

            .privacy-box.vault {
                grid-row: auto;
            }

            /* --- Safety-Rows: single col --- */
            .safety-row {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }

            /* --- Vision-Cards: single col --- */
            .vision-cards {
                grid-template-columns: 1fr;
            }

            /* --- A11y-Cols: single col --- */
            .a11y-cols {
                grid-template-columns: 1fr;
            }

            /* --- Tech-Phasen: single col, kompakter damit alle 3 sichtbar --- */
            .tech-phases {
                flex-direction: column;
            }

            .tech-phase {
                min-width: 0;
                padding: 0.85rem 1rem;
            }

            .tech-row {
                padding: 0.3rem 0;
            }

            .phase-name {
                margin-bottom: 0.6rem;
                font-size: 1.05rem;
            }

            .phase-tag {
                margin-bottom: 0.5rem;
            }

            /* --- Open-Cols: single col --- */
            .open-cols {
                grid-template-columns: 1fr;
            }

            /* --- Consent-Cards: single col --- */
            .consent-cards {
                flex-direction: column;
            }

            .consent-card {
                flex: none;
                min-width: 0;
                padding: 1.25rem;
            }

            .consent-lead {
                margin-bottom: 1.25rem;
            }

            /* --- Straftat-DL: single col --- */
            .straftat-dl {
                grid-template-columns: 1fr;
            }

            .straftat-dl dt {
                margin-top: 0.6rem;
            }

            .straftat-dl dd {
                margin-bottom: 0.2rem;
            }

            /* --- Mod-Teams: 2 Spalten auf Mobil, kleinere Kacheln --- */
            .mod-teams {
                grid-template-columns: repeat(2, 1fr);
            }

            .mod-team-card {
                padding: 0.65rem 0.75rem;
            }

            .mod-team-card h3 {
                font-size: 0.9rem;
            }

            .mod-team-card p {
                font-size: 0.9rem;
            }

            .mobile-hide {
                display: none;
            }

            /* --- Finance-Grid: single col --- */
            .finance-grid {
                grid-template-columns: 1fr;
            }

            /* --- Roadmap: vertikal auf Mobil --- */
            .roadmap-track {
                padding: 0;
                max-width: 100%;
            }

            .roadmap-line {
                display: none;
            }

            .roadmap-steps {
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                padding-left: 0.75rem;
                border-left: 2px solid rgba(245, 240, 232, 0.1);
            }

            .rm-step {
                flex-direction: row;
                align-items: center;
                gap: 0.9rem;
                width: 100%;
                padding: 0.5rem 0;
                flex: none;
            }

            .rm-dot {
                flex-shrink: 0;
                margin-left: -1.5rem;
            }

            .rm-label {
                font-size: 0.95rem;
                max-width: none;
                text-align: left;
            }

            .roadmap-caption {
                margin-top: 1.5rem;
                font-size: 0.9rem;
            }

            /* --- Abschluss --- */
            #s-closing .credits {
                flex-direction: column;
                align-items: center;
                gap: 0.75rem;
            }

            /* --- A11y-Widget-Button: sicherer Abstand zu Nav --- */
            #a11y-widget {
                bottom: 4.5rem;
            }

            /* --- USP-Grid: 2-spaltig auf Mobil --- */
            .usp-card {
                flex: 1 1 calc(50% - 0.5rem);
            }
        }

        /* ══════════════════════════════════════════════
           RESPONSIVE — SEHR KLEIN  (max-width: 359px)
        ══════════════════════════════════════════════ */
        @media (max-width: 359px) {
            .slide {
                padding: 4.5rem 1rem 6rem;
            }

            #s-title h1 {
                font-size: 2.2rem;
            }

            .slide-title {
                font-size: 1.2rem;
            }

            .village-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .usp-card {
                flex: 1 1 100%;
            }

            .target-card {
                min-width: 100px;
                padding: 0.75rem 1rem;
            }
        }