html {
    width: 100%;
    min-height: 100%;
    height: -webkit-fill-available;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

header {
    background-color:var(--qc-dark);
    color: white;
    padding:0;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    padding-top: 0.5dvh;
    padding-bottom: 0.5dvh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:8vh;
    height:8dvh;
    min-height:45px; /* fuer Hamburger Menu */
}
header .logo-text {
    font-family: 'Monoton', sans-serif;
    font-style:normal;
    font-weight:400;
    font-synthesis-weight: none;        /* modernere, feinere Kontrolle */
    font-synthesis-style: none;
    margin: 0;
    margin-left:20px;
    padding:0;
    font-size:calc(18px + 1.6vh);
    font-size:calc(18px + 1.6dvh);
}

header .logo-text a, header .logo-text a:hover {
    text-decoration:none;
    color:white;
}

main {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin:0px;
    padding:0px;
    flex:1;
}
footer {
    background-color: #1e1e1e;
    color:#a0a0a0;
    display:flex;
    align-items: center;
    padding-right:20px;
    padding-left:20px;
    padding-top: 0.5vh;
    padding-bottom:0.5vh;
    padding-top: 0.5dvh;
    padding-bottom:0.5dvh;
    margin: 0px;
    height: 6.0dvh;
    font-size:calc(11px + 0.05vh);
    font-size:calc(11px + 0.05dvh);
}

h1, h2 {
    font-weight:400;
}

.carousel-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin:0;
    padding:0;
    flex: 1 0 auto;
}
.carousel {
    width: 100vw;
    height: 78vh;
    height: 78dvh;
    margin: 0px auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    flex: 1 0 auto;
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
    padding:0;
    height:100%;
    cursor: grab;
}

.carousel-slide:active {
    cursor: grabbing;
}

.carousel-item {
    min-width: 100vw;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: white;
    font-size: calc(16px + 1.6vw);
    font-family: 'Monoton', sans-serif;
    font-style:normal;
    font-weight:400;
    font-synthesis-weight: none;
    font-synthesis-style: none;
    padding: 0px;
}

.carousel-item h1,
.carousel-item h2 {
    font-style: normal;
    font-weight: 400 !important;

    /* moderner Schutz gegen künstliches Bold/Italic */
    font-synthesis: none;
    font-synthesis-weight: none;
    font-synthesis-style: none;

    /* Safari/macOS Rendering etwas schlanker */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-shadow: none;
}

/* Image Overlay */
.carousel-item{
    position: relative;
    overflow: hidden;
}

/* Bild-Layer in bg1 */
.bg1 .bg1-hero-img{
    position: absolute;
    inset: 0;                 /* top/right/bottom/left = 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0.28;            /* <- Transparenz: 0.15..0.45 testen */
    z-index: 0;

    pointer-events: none;
    filter: saturate(0.95) contrast(1.05);
}

/* Lesbarkeits-Overlay */
.bg1::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    /* oben/mitte etwas dunkler, damit Text steht */
    background: radial-gradient(circle at 50% 35%,
                                rgba(0,0,0,0.35) 0%,
                                rgba(0,0,0,0.05) 55%,
                                rgba(0,0,0,0.25) 100%
    );
}

.bg1 > *:not(.bg1-hero-img){
    position: relative;
    z-index: 2;
}


/* Image Overlay ENDE */

.carousel-item p {
    font-family: 'Gudea', sans-serif;
    font-weight:normal;
    font-size: calc(12px + 1.3vw);
}
.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.carousel-controls button {
    appearance: none;
    -webkit-appearance: none;

    background: rgba(30, 30, 30, 0.72);
    color: #ffffff;

    border: none;
    outline: none;

    border-radius: 999px;
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 18px;

    transition: transform 0.18s ease, background 0.18s ease;
    z-index: 10;

    box-sizing: border-box;
}

.carousel-controls button:hover {
    background: var(--qc-orange);
    /*transform: scale(1.08);*/
}

.carousel-link, .carousel-link:hover, .carousel-link:active, .carousel-link:visited, .carousel-link:visited:active, .carousel-link::after {
    content: none !important;
    color:white;
    text-decoration:none;
}

.carousel-link {
    display: inline-block;
    padding: 12px 24px;
    color: white;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: calc(12px + 1vw);
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Dynamische Farben für die Hintergründe */
.bg1 .carousel-link {
    background: linear-gradient(135deg, #ff0000, #ff7300);
}

.bg2 .carousel-link {
    background: linear-gradient(135deg, #0099ff, #6600ff);
}

.bg3 .carousel-link {
    background: linear-gradient(135deg, #00ff99, #00ccff);
    color: #1e1e1e;
}

.bg4 .carousel-link {
    background: linear-gradient(135deg, #ff00ff, #ff6699);
}

.bg5 .carousel-link {
    background: linear-gradient(135deg, #ffff00, #ff6600);
    color: #1e1e1e; /* Dunkler Text für bessere Lesbarkeit */
}

.bg6 .carousel-link {
    background: linear-gradient(135deg, #00ffcc, #ff3399);
}

/* Hover-Effekte */
.bg1 .carousel-link:hover {
    background: linear-gradient(135deg, #ff7300, #ff0000);
    /*transform: scale(1.08);*/
}

.bg2 .carousel-link:hover {
    background: linear-gradient(135deg, #6600ff, #0099ff);
    /*transform: scale(1.08);*/
}

.bg3 .carousel-link:hover {
    background: linear-gradient(135deg, #00ccff, #00ff99);
    /*transform: scale(1.08);*/
}

.bg4 .carousel-link:hover {
    background: linear-gradient(135deg, #ff6699, #ff00ff);
    /*transform: scale(1.08);*/
}

.bg5 .carousel-link:hover {
    background: linear-gradient(135deg, #ff6600, #ffff00);
    color: #1e1e1e;
    /*transform: scale(1.08);*/
}

.bg6 .carousel-link:hover {
    background: linear-gradient(135deg, #ff3399, #00ffcc);
    /*transform: scale(1.08);*/
}

/* Ripple Effekt */
.carousel-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    pointer-events: none;
}

.carousel-link:active::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
}

.countdown-timer {
    display:none;   /* block zeigt die countdown-Zahl an */
    position: absolute;
    bottom: 30px;
    left: 30px;
    /*background: rgba(0, 0, 0, 0.5);*/
    /*color: rgba(0, 0, 0, 0.1);*/
    color: rgba(30, 30, 30, 0.08);
    font-family: 'Rajdhani', sans-serif;
    font-size: 10vh;
    font-size: 10dvh;
    line-height:1;
    /*padding: 5px 10px;*/
    /*border-radius: 8px;*/
    z-index: 5;
    text-decoration:none;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #ddd;
    z-index: 5;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background-color: #1e1e1e; /* Anthrazit */
    transition: width 9s linear;
    margin:0;
    padding:0;
}

.bg1 { background: linear-gradient(45deg, #ff0000, #ff7300); }
.bg2 { background: linear-gradient(45deg, #0099ff, #6600ff); }
.bg3 { background: linear-gradient(45deg, #00ff99, #00ccff); }
.bg4 { background: linear-gradient(45deg, #ff00ff, #ff6699); }
.bg5 { background: linear-gradient(45deg, #ffff00, #ff6600); }
.bg6 { background: linear-gradient(45deg, #00ffcc, #ff3399); }

h3 {
    color:white;
}

h1,h2 {
    color:white;
    font-size:1.2em;
    line-height:1.8em;
    padding:5px;
    margin:5px;

}


/******************************************/
/* /////////Responsive Adjustments ////// */
/* ////////////// 1000px //////////////// */
/******************************************/
@media (max-width: 1000px) {
    .carousel-controls button {
        font-size: calc(8px + 0.03vw);
        padding: 6px;
    }

    .carousel-item {
        font-size: calc(14px + 3vw);
    }
    .carousel-item p {
        font-size: calc(12px + 2vw);
        padding-left:3vw;
        padding-right:3vw;
    }
}

/* ////////////////////////////////////// */
/* /////////////// 700px //////////////// */
/* ////////////////////////////////////// */
@media (max-width: 700px) {
    .carousel-item {
        font-size: calc(12px + 1.5vw);
    }
    .carousel-item p {
        font-size: calc(10px + 0.7vw);
    }
}

/* ////////////////////////////////////// */
/* /////////////// Touchscreen //////////////// */
/* ////////////////////////////////////// */
@media (hover: none) and (pointer: coarse) {
    .carousel-controls button {
        display: none;
    }
}


.carousel-slide {
    transform: translateX(-100vw); /* Erste echte Slide */
    transition: none;
}
body:not(.carousel-ready) .carousel-slide {
    visibility: hidden;
}


/* Textzeile unter dem Button */
.carousel-item p.carousel-text {
    /* Layout & Abstände */
    margin: 10px 3vw 0;
    max-width: min(78ch, 88vw);
    text-align: center;

    /* Typografie */
    font-family: 'Gudea', sans-serif;
    font-style: italic;
    font-weight: normal;
    line-height: 1.35;

    font-size: clamp(16px, 2vw, 24px);
    /*color: rgba(255, 255, 255, 0.78);*/
    color: rgba(0, 0, 0, 0.85);

    /* leichte Lesbarkeitsstütze ohne aufdringlich zu sein */
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Mobile Feintuning */
@media (max-width: 700px) {
    .carousel-item p.carousel-text {
        font-size: clamp(12px, 2.6vw, 14px);
        margin: 8px 4vw 0;
        text-shadow: none; /* etwas cleaner auf kleinen Screens */
    }
}


/* ====================================================================
   QUELLCODE 360 — STARTSEITE 2026
   Ergänzungen ab hier; bestehende Regeln wurden bewusst beibehalten.
   Grafikdateien: /images/carousel_*_2026.*
   Alle Selektoren sind auf body.index-2026 begrenzt.
   ==================================================================== */

/* Layout ohne weisse Zwischenstreifen, auch bei Browser-Zoom < 100 %. */
html:has(body.index-2026) { min-height: 100%; }
body.index-2026 {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background: #1e1e1e;
}
body.index-2026 header,
body.index-2026 footer {
    flex-shrink: 0;
    box-sizing: border-box;
}
body.index-2026 main {
    min-height: 0;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 0 auto;
}
body.index-2026 .carousel-container {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
}
body.index-2026 .carousel {
    width: 100%;
    min-height: 70dvh;
    height: 78dvh;     /* Fallback und ursprüngliche Proportion */
    flex: 1 1 auto;
    margin: 0;
    background: #650a06;
}

/* Bildwelten: echte Bilder/SVG-Grafiken statt eingebrannter Texte. */
body.index-2026 .carousel-item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 100vw; /* Beibehaltung der bestehenden JS-Slide-Berechnung */
    height: 100%;
    padding: clamp(44px, 6vh, 100px) clamp(74px, 8vw, 175px);
    text-align: left;
    isolation: isolate;
    overflow: hidden;
}
body.index-2026 .carousel-item::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0 0 0 44%;
    background-image: var(--qc-hero-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
    pointer-events: none;
}
body.index-2026 .carousel-item::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(24, 6, 13, .43), rgba(19, 9, 18, .10) 59%, transparent 82%);
    pointer-events: none;
}
body.index-2026 .carousel-item.bg1 {
    --qc-hero-image: url('/images/carousel_software_2026.svg');
    background: linear-gradient(115deg, #970608 1%, #bc1c08 49%, #ee5509 100%);
}
body.index-2026 .carousel-item.bg2 {
    --qc-hero-image: url('/images/carousel_it_2026.svg');
    background: linear-gradient(115deg, #08113d 1%, #182d9e 56%, #6424ae 100%);
}
body.index-2026 .carousel-item.bg3 {
    --qc-hero-image: url('/images/carousel_web_2026.svg');
    background: linear-gradient(115deg, #063a44 1%, #00747e 56%, #2cb99f 100%);
}
body.index-2026 .carousel-item.bg5 {
    --qc-hero-image: url('/images/carousel_apps_2026.svg');
    background: linear-gradient(115deg, #7a3207 1%, #b75706 56%, #f8a711 100%);
}

/* Überschriften, Beschreibung und CTA: linke Spalte wie im Entwurf. */
body.index-2026 .carousel-item > h1,
body.index-2026 .carousel-item > h2,
body.index-2026 .carousel-item > p {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    max-width: min(750px, 56vw);
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
body.index-2026 .carousel-item > h1,
body.index-2026 .carousel-item > h2 {
    margin-top: 0;
    margin-bottom: clamp(14px, 2.4vh, 30px);
    padding: 0;
    font-family: 'Monoton', sans-serif;
    font-size: clamp(30px, 6vw, 60px);
    line-height: 1.6;
    font-weight: 400;
    color: #fff;
    text-wrap: balance;
}
body.index-2026 .carousel-item > p:not(.carousel-text) {
    margin-top: 0;
    margin-bottom: clamp(15px, 2.2vh, 30px);
    font-size: inherit;
}
body.index-2026 .carousel-item > p.carousel-text {
    width: min(600px, 47vw);
    max-width: min(600px, 47vw);
    margin: 0;
    padding: 0;
    font-family: 'Gudea', sans-serif;
    font-size: clamp(15px, 1.1vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    font-style: normal;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .30);
}
body.index-2026 .carousel-item > p.carousel-text strong { font-weight: 700; }
body.index-2026 .carousel-item .carousel-link {
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    padding: clamp(12px, 1.2vw, 19px) clamp(16px, 1.6vw, 26px);
    font-size: clamp(15px, 1.3vw, 23px);
    line-height: 1.5;
    font-weight: 600;
    text-align: left;
    transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
body.index-2026 .carousel-item .carousel-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,0,0,.30);
    filter: brightness(1.06);
}
body.index-2026 .carousel-item.bg1 .carousel-link { background: linear-gradient(110deg, #f91508, #ff710a); }
body.index-2026 .carousel-item.bg2 .carousel-link { background: linear-gradient(110deg, #0088ec, #7620da); }
body.index-2026 .carousel-item.bg3 .carousel-link { background: linear-gradient(110deg, #04ac8e, #31d5d0); color: #092c31; }
body.index-2026 .carousel-item.bg5 .carousel-link { background: linear-gradient(110deg, #ffcf24, #ff7304); color: #1e1e1e; }

/* Carousel-Steuerung (ausgeblendet), Navigationspunkte und Timer-Fortschrittslinie. */
/* Carousel-Pfeile bleiben im HTML/JS erhalten, werden aber ausgeblendet. */
body.index-2026 .carousel-controls { display: none; z-index: 6; pointer-events: none; }
body.index-2026 .carousel-controls button {
    pointer-events: auto;
    flex: 0 0 auto;
    width: clamp(35px, 3vw, 45px);
    height: clamp(35px, 3vw, 45px);
    font-size: 15px;
    background: rgba(24, 20, 22, .70);
    backdrop-filter: blur(5px);
    border-radius: 50%;
}
body.index-2026 .carousel-controls button:hover { background: rgba(255,102,0,.92); }
/* 2026-Korrektur: ursprünglichen 9s-Timer-Streifen wieder sichtbar machen. */
body.index-2026 .progress-bar {
    display: block;
    position: absolute;
    bottom: -1px;   /* 1px subpixel-Naht zum Footer überdecken */
    left: 0;
    right: 0;
    width: 100%;
    height: 6px;    /* Sichtbar bleiben 5px, da .carousel overflow:hidden hat */
    z-index: 8;
    background-color: transparent; /* Keine helle Spur auf der Reststrecke */
    pointer-events: none;
}
body.index-2026 .progress-fill {
    height: 100%;
    background-color: var(--qc-orange, #ff6600);
}
body.index-2026 .carousel-dots {
    position: absolute;
    z-index: 7;
    bottom: clamp(16px, 3.5vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
body.index-2026 .carousel-dot {
    appearance: none;
    width: 11px;
    height: 11px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}
body.index-2026 .carousel-dot.is-active { width: 26px; background: #ff790d; }
body.index-2026 .carousel-dot:focus-visible { outline: 2px solid white; outline-offset: 4px; }

/* Im Mobilformat werden Bilder zum dezenten Hintergrund, Inhalt bleibt lesbar. */
@media (max-width: 900px) {
    body.index-2026 .carousel-item {
        padding: clamp(40px, 9vh, 92px) clamp(48px, 7vw, 90px);
    }
    body.index-2026 .carousel-item::before { inset: 0 0 0 28%; opacity: .67; }
    body.index-2026 .carousel-item::after {
        background: linear-gradient(90deg, rgba(15,6,14,.78) 0%, rgba(15,6,14,.57) 62%, rgba(15,6,14,.15) 100%);
    }
    body.index-2026 .carousel-item > h1,
    body.index-2026 .carousel-item > h2,
    body.index-2026 .carousel-item > p { max-width: min(680px, 85vw); }
    body.index-2026 .carousel-item > p.carousel-text { width: min(600px, 75vw); max-width: min(600px, 75vw); }
    body.index-2026 .carousel-item > h1,
    body.index-2026 .carousel-item > h2 { font-size: clamp(27px, 10vw, 48px); }
}
@media (max-width: 600px) {
    body.index-2026 main { flex: 1 0 auto; }
    body.index-2026 .carousel { height: 78dvh; min-height: max(570px, 72dvh); }
    body.index-2026 .carousel-item {
        padding: 55px 50px 75px;
        align-items: flex-start;
    }
    body.index-2026 .carousel-item::before { inset: 0; opacity: .27; background-position: 60% center; }
    body.index-2026 .carousel-item::after { background: linear-gradient(90deg, rgba(13,7,15,.74), rgba(13,7,15,.42)); }
    body.index-2026 .carousel-item > h1,
    body.index-2026 .carousel-item > h2 { font-size: clamp(19px, 12vw, 48px); line-height: 1.6; overflow-wrap: anywhere; }
    body.index-2026 .carousel-item > h1,
    body.index-2026 .carousel-item > h2,
    body.index-2026 .carousel-item > p,
    body.index-2026 .carousel-item > p.carousel-text { width: 100%; max-width: 100%; }
    body.index-2026 .carousel-item > p.carousel-text { font-size: clamp(14px, 3.1vw, 17px); }
    body.index-2026 .carousel-item .carousel-link { font-size: clamp(14px, 3.3vw, 18px); padding: 12px 15px; }
    body.index-2026 .carousel-controls button { width: 31px; height: 31px; margin: 0 8px; }
    body.index-2026 .carousel-dots { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body.index-2026 .carousel-item .carousel-link,
    body.index-2026 .carousel-dot { transition: none; }
}


/* ====================================================================
   2026-KORREKTUR 1.1 – Mobile Viewport und Timer
   - Kein festes 570px-Minimum mehr für das Carousel auf Smartphones.
   - Header, Promo, Hauptbereich und Footer teilen sich 100dvh.
   - Weiterhin alle Texte, Slides und Punkte vorhanden (Pfeile per CSS ausgeblendet).
   ==================================================================== */
@media (max-width: 600px) {
    html:has(body.index-2026) {
        height: 100%;
        min-height: 0;
    }
    body.index-2026 {
        height: 100vh;       /* Fallback */
        height: 100dvh;      /* mobile Browser-Adressleiste berücksichtigen */
        min-height: 0;
        overflow-y: hidden; /* kein Seitenüberlauf unter den Footer */
    }
    body.index-2026 > header,
    body.index-2026 > .promo-strip,
    body.index-2026 > footer {
        flex: 0 0 auto;
    }
    body.index-2026 main {
        flex: 1 1 0%;
        min-height: 0;
        overflow: hidden;
    }
    body.index-2026 .carousel-container {
        flex: 1 1 0%;
        min-height: 0;
        height: 100%;
    }
    body.index-2026 .carousel {
        flex: 1 1 0%;
        height: 100%;
        min-height: 0;      /* überschreibt min-height: max(570px, 72dvh) */
        max-height: 100%;
    }
    body.index-2026 .carousel-slide {
        height: 100%;
    }
    body.index-2026 .carousel-item {
        height: 100%;
        padding: clamp(14px, 2.8dvh, 26px) 45px clamp(39px, 6dvh, 54px);
        overflow-x: hidden;
        overflow-y: auto;    /* extreme Kurzformate scrollen nur den Slide-Inhalt */
        scrollbar-width: none;
    }
    body.index-2026 .carousel-item::-webkit-scrollbar { display: none; }
    body.index-2026 .carousel-item > h1,
    body.index-2026 .carousel-item > h2 {
        margin-bottom: clamp(7px, 1.5dvh, 14px);
        font-size: clamp(17px, 4.75vw, 28px);
        line-height: 1.4;
    }
    body.index-2026 .carousel-item > p:not(.carousel-text) {
        margin-bottom: clamp(9px, 1.8dvh, 16px);
    }
    body.index-2026 .carousel-item > p.carousel-text {
        font-size: clamp(13px, 3.2vw, 16px);
        line-height: 1.4;
    }
    body.index-2026 .carousel-item .carousel-link {
        padding: 9px 13px;
        font-size: clamp(13px, 3.1vw, 17px);
        line-height: 1.4;
    }
    body.index-2026 .carousel-dots { bottom: 25px; }
    body.index-2026 .carousel-controls button { z-index: 9; }
}
/* Im Querformat ist die sichtbare Höhe knapper; der Slide kann intern scrollen. */
@media (max-width: 900px) and (max-height: 520px) {
    body.index-2026 { height: 100dvh; min-height: 0; overflow-y: hidden; }
    body.index-2026 main { flex: 1 1 0%; min-height: 0; overflow: hidden; }
    body.index-2026 .carousel-container { flex: 1 1 0%; min-height: 0; }
    body.index-2026 .carousel { flex: 1 1 0%; height: 100%; min-height: 0; max-height: 100%; }
    body.index-2026 .carousel-item {
        padding-top: 10px;
        padding-bottom: 36px;
        overflow-y: auto;
        scrollbar-width: none;
    }
    body.index-2026 .carousel-item::-webkit-scrollbar { display: none; }
    body.index-2026 .carousel-item > h1,
    body.index-2026 .carousel-item > h2 { font-size: clamp(16px, 3vw, 48px); margin-bottom: 8px; }
    body.index-2026 .carousel-item > p:not(.carousel-text) { margin-bottom: 8px; }
    body.index-2026 .carousel-item > p.carousel-text { font-size: 13px; line-height: 1.25; }
    body.index-2026 .carousel-item .carousel-link { padding: 7px 11px; font-size: 13px; }
    body.index-2026 .carousel-dots { bottom: 13px; }
}


/* ===================================================================
   Korrektur 1.2 – Tablets und schmale Browser bis 900 CSS-Pixel.
   Bei 601–900px würde das ursprüngliche 78dvh-Karussell andernfalls
   zusammen mit Header, Rabattbanner und Footer über 100dvh hinausgehen.
   Die mobile Korrektur für <=600px bleibt unverändert.
   =================================================================== */
@media (min-width: 601px) and (max-width: 900px) {
    html:has(body.index-2026) { height: 100%; min-height: 0; }
    body.index-2026 {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow-y: hidden;
    }
    body.index-2026 > header,
    body.index-2026 > .promo-strip,
    body.index-2026 > footer { flex: 0 0 auto; }
    body.index-2026 main { flex: 1 1 0%; min-height: 0; overflow: hidden; }
    body.index-2026 .carousel-container { flex: 1 1 0%; min-height: 0; height: 100%; }
    body.index-2026 .carousel { flex: 1 1 0%; height: 100%; min-height: 0; max-height: 100%; }
    body.index-2026 .carousel-item {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        padding-top: clamp(15px, 4dvh, 45px);
        padding-bottom: clamp(44px, 7dvh, 72px);
    }
    body.index-2026 .carousel-item::-webkit-scrollbar { display: none; }
}


/* =====================================================================
   Korrektur 1.3 – Mobiles Hamburger-Menü bündig unter dem Header.
   Ursprünglich nutzt style_nav.css top: 9dvh, der Header ist aber 8dvh
   hoch (inkl. Padding durch border-box). Dadurch wurde ein sichtbarer
   Streifen des Rabattbanners freigelegt. Anker ist jetzt der echte Header.
   Desktop-Navigation bleibt unverändert.
   ===================================================================== */
@media (max-width: 1150px) {
    body.index-2026 > header {
        position: relative;
    }

    body.index-2026 > header nav {
        top: 100%;
    }
}


/* =====================================================================
   Korrektur 1.4 – Header exakt wie auf den Unterseiten (style.css).
   Die Unterseiten benutzen das CSS-Standard-Boxmodell (content-box):
   8dvh Content-Hoehe + 0.5dvh Padding oben + 0.5dvh unten = 9dvh.
   Die 2026-Version hatte border-box und war dadurch 1dvh niedriger.
   Nur Header korrigieren: Footer und das flexible Carousel-Layout bleiben.
   Die Navigation aus Korrektur 1.3 folgt weiterhin mit top:100%.
   ===================================================================== */
body.index-2026 > header {
    box-sizing: content-box;
}


/* =====================================================================
   Korrektur 1.5 – Mobil: CTA-Fluchtlinie
   Nur gezielte Overrides. Bestehendes Carousel-JavaScript bleibt erhalten.
   ===================================================================== */
/* Der alte @media-Block .carousel-item p vergibt seitliches Padding
   an den <p>-Wrapper des CTA. Dies verschiebt den Button nach rechts. */
@media (max-width: 1000px) {
    body.index-2026 .carousel-item > p:not(.carousel-text) {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    /* Headline, CTA und Beschreibung: gleiche 20px-Fluchtlinie. */
    body.index-2026 .carousel-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =====================================================================
   Korrektur 1.6 – Vorbereitung fuer Google-Reviews unter dem Beschreibungstext;
   CTA seitlich ohne zusaetzliches <p>-Padding.
   ===================================================================== */
@media (max-width: 900px) {
    body.index-2026 .carousel-item > p:not(.carousel-text) {
        box-sizing: border-box;
        padding-inline: 0;
    }
}

/* =====================================================================
   Korrektur 1.8 – Mobile Reviews ohne JS-Positionsberechnung
   Der Teaser ist ein echtes Element DIREKT hinter .carousel-text.
   Damit folgt er automatisch der Texthoehe jeder Folie. Der Dialog
   bleibt wie bisher als separates Widget ausserhalb des Carousels.
   ===================================================================== */
body.index-2026 .carousel-item > .qc-reviews-inline-toggle { display: none; }
@media (max-width: 900px) {
    body.index-2026 .carousel-item > .qc-reviews-inline-toggle {
        position: relative;
        z-index: 3;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        margin: clamp(18px, 2.6dvh, 26px) 0 0;
        padding: 6px 12px 6px 9px;
        border: 1px solid rgba(255,255,255,.38);
        border-radius: 8px;
        background: rgba(255,255,255,.96);
        color: #1e1e1e;
        box-shadow: 0 6px 17px rgba(0,0,0,.2);
        font: 700 13px/1.1 'Rajdhani', sans-serif;
        text-align: left;
        cursor: pointer;
        white-space: nowrap;
    }
    body.index-2026 .carousel-item > .qc-reviews-inline-toggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 4px;
    }
    body.index-2026 .qc-reviews-inline-g {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 50%;
        background: #fff;
        color: #4285f4;
        font: 900 17px/1 Arial, sans-serif;
    }
    body.index-2026 .qc-reviews-inline-label {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    body.index-2026 .qc-reviews-inline-label strong {
        color: #fbbc04;
        font-size: 11px;
        letter-spacing: .6px;
    }
}
@media (min-width: 901px) {
    body.index-2026 .carousel-item > .qc-reviews-inline-toggle { display: none; }
}



/* =====================================================================
   TIMER-KORREKTUR 1.10 (auf Basis der beigefuegten style_index_2026.old)
   - Balken via transform statt width animieren (weniger Layout-Ruckler)
   - Anfangszustand bei 0 % bis zum verzoegerten JS-Start
   ===================================================================== */
body.index-2026 .progress-fill {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: none;
    will-change: transform;
}