/* =========================================================================
   Variante 04 "Konsequent neu gedacht".
   Schwarz, Knochenweiss, ein Chartreuse. Eine Schriftfamilie (Archivo)
   in extremen Breiten. Keine Karten, keine Schatten, keine Rundungen.
   ========================================================================= */

@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-wdth-normal.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-wdth-italic.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
    --schwarz: #111110;
    --knochen: #ECE8DF;
    --grau: #8C8a84;
    --gift: #D7FF3A;
    --rand: clamp(1.25rem, 4vw, 3.5rem);

    --fv-scrim: rgba(17, 17, 16, .85);
    --fv-bg: var(--knochen);
    --fv-fg: var(--schwarz);
    --fv-muted: #55534e;
    --fv-line: var(--schwarz);
    --fv-accent: var(--schwarz);
    --fv-accent-fg: var(--gift);
    --fv-radius: 0;
    --fv-feld-radius: 0;
    --fv-rand: 3px;
    --fv-schatten: none;
    --fv-font: 'Archivo', system-ui, sans-serif;

    --gal-bg: var(--schwarz);
    --gal-fg: var(--knochen);
    --gal-muted: var(--grau);
    --gal-accent: var(--gift);
    --gal-accent-fg: var(--schwarz);
    --gal-font: 'Archivo', system-ui, sans-serif;
    --gal-rand: 1px solid #3a3a37;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--schwarz); color: var(--knochen); font-family: 'Archivo', system-ui, sans-serif; font-size: 1.1rem; line-height: 1.55; font-stretch: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, .ko-band:focus-visible { outline: 3px solid var(--gift); outline-offset: 3px; }

.ko-etikett { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-stretch: 125%; color: var(--gift); }
.ko-klein { font-size: .9rem; color: var(--grau); }

.ko-knopf {
    display: inline-flex; align-items: center; gap: 1rem; padding: 1.15rem 1.6rem;
    background: var(--gift); color: var(--schwarz); text-decoration: none;
    font-weight: 800; font-stretch: 112%; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em;
    transition: gap .2s ease, background .2s ease;
}
.ko-knopf:hover { gap: 1.6rem; background: var(--knochen); }

/* --- Kopf -------------------------------------------------------------- */
.ko-kopf { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem var(--rand); border-bottom: 1px solid #2c2c2a; font-size: .85rem; }
.ko-marke { font-weight: 800; font-stretch: 125%; font-size: 1.1rem; text-decoration: none; letter-spacing: -.01em; margin-right: auto; }
.ko-variante { display: none; color: var(--grau); }
.ko-variante a { color: var(--gift); text-decoration: none; }
@media (min-width: 700px) { .ko-variante { display: inline; } }
.ko-sprache { display: flex; gap: .6rem; }
.ko-sprache a { color: var(--grau); text-decoration: none; font-weight: 700; }
.ko-sprache a.ist-aktiv { color: var(--knochen); text-decoration: underline; text-decoration-color: var(--gift); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ko-kopfknopf { background: var(--gift); color: var(--schwarz); padding: .45rem .8rem; font-weight: 800; text-decoration: none; font-stretch: 112%; }

/* --- Start ------------------------------------------------------------- */
.ko-start { padding: clamp(3rem, 8vw, 7rem) var(--rand) 4rem; border-bottom: 1px solid #2c2c2a; }
.ko-start h1 { font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .84; letter-spacing: -.01em; font-size: clamp(4.2rem, 17vw, 17rem); }
.ko-start h1 span { display: block; }
.ko-hohl { color: transparent; -webkit-text-stroke: 2px var(--knochen); }
@supports not (-webkit-text-stroke: 2px red) { .ko-hohl { color: var(--grau); } }
.ko-start-unten { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 900px) { .ko-start-unten { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4rem; } }
.ko-lead { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; max-width: 38rem; }
.ko-start-aktion { display: grid; gap: .9rem; justify-items: start; }

/* --- Befund ------------------------------------------------------------ */
.ko-befund { padding: 5rem var(--rand); }
.ko-befund-raster { display: grid; gap: 3rem; margin-top: 2rem; }
@media (min-width: 900px) { .ko-befund-raster { grid-template-columns: 1fr 1.4fr; gap: 0; } .ko-ich { border-left: 1px solid #2c2c2a; padding-left: 3rem; } .ko-tool { padding-right: 3rem; } }
.ko-wer { font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .08em; margin-bottom: 1.25rem; color: var(--grau); }
.ko-ich .ko-wer { color: var(--gift); }
.ko-befund ul { list-style: none; padding: 0; margin: 0; }
.ko-tool li { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; color: var(--grau); padding: .5rem 0; border-top: 1px solid #2c2c2a; }
.ko-tool s { text-decoration-color: var(--gift); text-decoration-thickness: 2px; }
.ko-fazit { margin-top: 1.25rem; color: var(--knochen); font-style: italic; }
.ko-ich li { font-size: clamp(1.5rem, 2.8vw, 2.4rem); font-weight: 700; font-stretch: 85%; line-height: 1.12; padding: .9rem 0; border-top: 1px solid #2c2c2a; }

/* --- FAKTEN-Band -------------------------------------------------------- */
.ko-fakten { background: var(--knochen); color: var(--schwarz); padding: 5rem 0 4rem; }
.ko-fakten-kopf { padding: 0 var(--rand); display: grid; gap: 1rem; }
@media (min-width: 900px) { .ko-fakten-kopf { grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; } }
.ko-fakten h2 { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .9; }
.ko-wisch { font-weight: 800; white-space: nowrap; }
.ko-band {
    list-style: none; margin: 2.5rem 0 0; padding: 0 var(--rand) 1rem; display: flex; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--schwarz) transparent;
}
.ko-band li {
    flex: 0 0 min(80vw, 22rem); scroll-snap-align: start; padding: 1.5rem 1.5rem 2rem;
    border: 2px solid var(--schwarz); margin-right: -2px; display: flex; flex-direction: column; gap: .6rem;
}
.ko-band li:nth-child(3) { background: var(--schwarz); color: var(--knochen); }
.ko-band li:nth-child(3) .ko-buchstabe { color: var(--gift); }
.ko-buchstabe { font-weight: 900; font-stretch: 125%; font-size: 7rem; line-height: .85; }
.ko-band h3 { font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; margin-top: .8rem; }
.ko-frage { font-size: 1.4rem; font-weight: 700; font-stretch: 85%; line-height: 1.15; }
.ko-band p:last-child { font-size: .98rem; }

/* --- Paket ------------------------------------------------------------- */
.ko-paket { padding: 5rem var(--rand); }
.ko-paket h2 { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .9; }
.ko-paketliste { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.ko-paketliste li { display: grid; gap: .3rem 2rem; padding: 1.2rem 0; border-top: 1px solid #2c2c2a; align-items: baseline; }
@media (min-width: 760px) { .ko-paketliste li { grid-template-columns: 16rem 1fr; } }
.ko-paketliste b { font-size: 2.2rem; font-weight: 800; font-stretch: 125%; color: var(--gift); line-height: 1; }
.ko-paketliste span { font-size: 1.2rem; }

/* --- Preis ------------------------------------------------------------- */
.ko-preis { background: var(--gift); color: var(--schwarz); padding: 5rem var(--rand); }
.ko-preis .ko-etikett { color: var(--schwarz); }
.ko-preis h2 { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(3.2rem, 10vw, 9rem); line-height: .86; margin: 1rem 0 2.5rem; }
.ko-preis-text { display: grid; gap: 1.5rem; max-width: 64rem; }
@media (min-width: 900px) { .ko-preis-text { grid-template-columns: 1fr 1fr; column-gap: 4rem; } .ko-preis-text .ko-klein { grid-column: 2; } }
.ko-preis-text > p:first-child { font-size: 1.3rem; line-height: 1.45; }
.ko-wege { list-style: none; margin: 0; padding: 0; }
.ko-wege li { padding: .8rem 0; border-top: 2px solid var(--schwarz); }
.ko-wege b { font-stretch: 112%; text-transform: uppercase; }
.ko-preis .ko-klein { color: #3d4a10; }

/* --- Wer --------------------------------------------------------------- */
.ko-wer-macht { padding: 5rem var(--rand); border-bottom: 1px solid #2c2c2a; }
.ko-gross { margin-top: 1.5rem; font-size: clamp(1.6rem, 3.2vw, 2.8rem); font-weight: 600; font-stretch: 88%; line-height: 1.15; max-width: 60rem; }
.ko-stimme { margin: 3rem 0 0; padding-left: 1.5rem; border-left: 3px solid var(--gift); max-width: 44rem; }
.ko-stimme p { font-style: italic; font-size: 1.2rem; }
.ko-uebersetzung { color: var(--grau); font-size: 1rem !important; margin-top: .4rem; }
.ko-stimme footer { margin-top: .7rem; font-size: .9rem; color: var(--grau); }

/* --- Design ------------------------------------------------------------ */
.ko-design { padding: 5rem var(--rand); }
.ko-design h2 { margin: 1rem 0 2rem; font-weight: 800; font-stretch: 125%; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.05; max-width: 22ch; letter-spacing: -.02em; }
.ko-design-raster { display: grid; gap: 1.5rem 4rem; color: #c9c5bb; }
@media (min-width: 900px) { .ko-design-raster { grid-template-columns: 1fr 1fr; } }

/* --- Schluss ----------------------------------------------------------- */
.ko-schluss { padding: 5rem var(--rand) 6rem; border-top: 1px solid #2c2c2a; display: grid; gap: 3rem; }
@media (min-width: 1000px) { .ko-schluss { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.ko-schluss h2 { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(3.4rem, 9vw, 8rem); line-height: .86; }
.ko-schluss-aktion { display: grid; gap: 1.2rem; justify-items: start; }
.ko-schluss-aktion p { color: var(--grau); }
.ko-schluss-aktion button { background: none; border: 0; padding: 0; font: inherit; color: var(--knochen); text-decoration: underline; text-decoration-color: var(--gift); text-underline-offset: 4px; cursor: pointer; }

.fv-galerie { border-top: 1px solid #2c2c2a; }
.ko-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--rand) 2rem; font-size: .85rem; color: var(--grau); border-top: 1px solid #2c2c2a; }
.ko-fuss nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Popups: schwarzer Sendeknopf mit Chartreuse-Schrift, harte Kanten */
.fv-titel { font-stretch: 112%; text-transform: uppercase; font-weight: 900; }
.fv-input { border-width: 2px; border-color: var(--schwarz); }