/* =========================================================================
   Variante 01 "Klartext" - hell, ruhig, sehr gut lesbar.
   Papier, Waldgruen, Orange nur fuer Aktionen.
   ========================================================================= */

@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
    --papier: #F4F1EA;
    --hell: #FBFAF6;
    --gruen: #1B3B2B;
    --text: #22312A;
    --grau: #5B675F;
    --linie: #D8D2C3;
    --orange: #E05A2B;
    --orange-tief: #B9441B;
    --mono: 'Plex Mono', ui-monospace, Consolas, monospace;

    /* Popups */
    --fv-scrim: rgba(27, 59, 43, .55);
    --fv-bg: var(--hell);
    --fv-fg: var(--text);
    --fv-muted: var(--grau);
    --fv-line: var(--linie);
    --fv-accent: var(--orange-tief);
    --fv-accent-fg: #fff;
    --fv-radius: 6px;
    --fv-feld-radius: 4px;
    --fv-schatten: 0 24px 60px -24px rgba(27, 59, 43, .5);
    --fv-font: 'Atkinson', system-ui, sans-serif;
    --fv-input-bg: #fff;

    /* Galerie */
    --gal-bg: var(--gruen);
    --gal-fg: var(--papier);
    --gal-muted: rgba(244, 241, 234, .72);
    --gal-accent: #F08A5D;
    --gal-accent-fg: var(--gruen);
    --gal-font: 'Atkinson', system-ui, sans-serif;
    --gal-rand: 1px solid rgba(244, 241, 234, .25);
    --gal-radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0; background: var(--papier); color: var(--text);
    font-family: 'Atkinson', system-ui, sans-serif; font-size: 1.125rem; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--gruen); line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: var(--orange-tief); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.kt-breit { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 900px) { .kt-breit { padding: 0 2rem; } }

.kt-skip { position: absolute; left: -9999px; }
.kt-skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--gruen); color: #fff; padding: .5rem 1rem; }

/* --- Hinweisstreifen und Kopf ----------------------------------------- */
.kt-hinweis { background: var(--gruen); color: var(--papier); font-size: .8rem; }
.kt-hinweis .kt-breit { display: flex; justify-content: space-between; gap: 1rem; padding-top: .4rem; padding-bottom: .4rem; }
.kt-hinweis a { color: var(--papier); }

.kt-kopf { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 234, .96); border-bottom: 1px solid var(--linie); }
.kt-kopf-zeile { display: flex; align-items: center; gap: 1rem; height: 4.25rem; }
@media (min-width: 860px) { .kt-kopf-zeile { gap: 2rem; } }
.kt-marke { font-weight: 700; font-size: 1.3rem; color: var(--gruen); text-decoration: none; letter-spacing: -.01em; }
.kt-marke span { color: var(--orange-tief); }
.kt-nav { display: none; gap: 1.75rem; }
.kt-nav a { color: var(--text); text-decoration: none; font-size: 1rem; }
.kt-nav a:hover { color: var(--orange-tief); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 860px) { .kt-nav { display: flex; } }
.kt-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.kt-sprache { display: flex; gap: .5rem; font-family: var(--mono); font-size: .85rem; }
.kt-sprache a { color: var(--grau); text-decoration: none; padding: .2rem .1rem; }
.kt-sprache a.ist-aktiv { color: var(--gruen); border-bottom: 2px solid var(--orange); }

/* --- Knoepfe ----------------------------------------------------------- */
.kt-knopf {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    padding: .85rem 1.4rem; border: 2px solid var(--orange-tief); border-radius: 4px;
    background: var(--orange-tief); color: #fff; font: inherit; font-size: 1rem; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.kt-knopf:hover { background: var(--gruen); border-color: var(--gruen); }
.kt-knopf-klein { padding: .45rem .9rem; font-size: .9rem; }
.kt-knopf-ruhig { background: transparent; color: var(--gruen); border-color: var(--gruen); }
.kt-knopf-ruhig:hover { background: var(--gruen); color: #fff; }
.kt-knopf-hell { background: var(--orange); border-color: var(--orange); color: #1b1b1b; }
.kt-knopf-hell:hover { background: var(--papier); border-color: var(--papier); color: var(--gruen); }
.kt-textknopf { background: none; border: 0; padding: 0; font: inherit; color: var(--orange-tief); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kt-textknopf-hell { color: var(--papier); }

.kt-zeile { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); margin-bottom: 1rem; }

/* --- Einstieg ---------------------------------------------------------- */
.kt-start { padding: 4rem 0 3.5rem; }
.kt-start-raster { display: grid; gap: 3rem; align-items: end; }
@media (min-width: 900px) { .kt-start-raster { grid-template-columns: 1.4fr 1fr; gap: 4rem; } .kt-start { padding: 6rem 0 5rem; } }
.kt-start h1 { font-size: clamp(2.6rem, 6.5vw, 4.75rem); letter-spacing: -.02em; max-width: 12ch; }
.kt-lead { margin-top: 1.5rem; font-size: 1.3rem; max-width: 34rem; }
.kt-start-aktion { margin-top: 2rem; }

.kt-status { background: var(--hell); border: 1px solid var(--linie); border-left: 4px solid var(--gruen); padding: 1.4rem 1.5rem; }
.kt-status-kopf { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gruen); margin-bottom: .9rem; }
.kt-punkt { width: .6rem; height: .6rem; border-radius: 50%; background: #2F8F5B; box-shadow: 0 0 0 4px rgba(47, 143, 91, .18); }
.kt-status dl { margin: 0; }
.kt-status dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .55rem 0; border-top: 1px dashed var(--linie); font-size: .98rem; }
.kt-status dt { color: var(--grau); }
.kt-status dd { margin: 0; color: var(--gruen); font-weight: 700; }
@media (max-width: 480px) { .kt-status dl > div { grid-template-columns: 1fr; gap: 0; } }

/* --- Argument als Grafik ------------------------------------------------ */
.kt-argument { background: var(--hell); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 4.5rem 0; }
.kt-argument-text { max-width: 44rem; }
.kt-argument h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.01em; }
.kt-argument-text p { margin-top: 1.1rem; }

.kt-grafik { margin: 3rem 0 0; }
.kt-spur { display: grid; gap: .5rem; margin-bottom: 1.6rem; }
@media (min-width: 760px) { .kt-spur { grid-template-columns: 11rem 1fr; align-items: center; gap: 1.5rem; } }
.kt-spur-name { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); }
.kt-spur-gut .kt-spur-name { color: var(--gruen); font-weight: 500; }
.kt-balken { position: relative; display: flex; align-items: stretch; height: 3.25rem; }
.kt-seg {
    flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0 .3rem; font-size: .78rem; line-height: 1.15; overflow: hidden; hyphens: auto;
    background: #E6E1D4; color: var(--text); border-right: 2px solid var(--hell);
}
.kt-spur-gut .kt-seg { background: var(--gruen); color: var(--papier); }
.kt-seg-schleife { background: repeating-linear-gradient(135deg, #E6E1D4 0 8px, #DCD5C4 8px 16px); }
.kt-seg-warten { background: repeating-linear-gradient(90deg, transparent 0 6px, #E6E1D4 6px 12px); color: var(--grau); font-style: italic; }
.kt-spur-gut .kt-seg-danach { background: transparent; color: var(--gruen); border: 2px dashed var(--gruen); border-left: 0; font-style: italic; }
.kt-ziel {
    flex: 0 0 auto; display: flex; align-items: center; padding: 0 .7rem;
    background: var(--orange); color: #1b1b1b; font-weight: 700; font-size: .85rem;
}
@media (max-width: 759px) {
    .kt-balken { height: 3.6rem; }
    .kt-seg { font-size: .66rem; padding: 0 .15rem; border-right-width: 1px; }
    .kt-ziel { padding: 0 .35rem; font-size: .7rem; max-width: 4.6rem; text-align: center; word-break: break-word; }
}
.kt-grafik figcaption { font-size: .8rem; color: var(--grau); margin-top: -.4rem; }
@media (min-width: 760px) { .kt-grafik figcaption { margin-left: 12.5rem; } .kt-seg { font-size: .85rem; } }

.kt-beleg { margin: 2.75rem 0 0; padding: 0 0 0 1.5rem; border-left: 4px solid var(--orange); max-width: 46rem; }
.kt-beleg p { font-size: 1.35rem; font-style: italic; color: var(--gruen); line-height: 1.45; }
.kt-beleg .kt-uebersetzung { font-size: 1rem; color: var(--grau); margin-top: .5rem; }
.kt-beleg footer { margin-top: .8rem; font-size: .9rem; color: var(--grau); }

/* --- Drei Wege --------------------------------------------------------- */
.kt-wege { padding: 5rem 0; }
.kt-wege h2, .kt-spalte-titel h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -.01em; }
.kt-wegliste { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 2px solid var(--gruen); }
.kt-wegliste li { display: grid; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 860px) { .kt-wegliste li { grid-template-columns: 4rem 1fr auto; align-items: center; gap: 2rem; } }
.kt-nr { font-family: var(--mono); font-size: 2.4rem; line-height: 1; color: var(--orange); }
.kt-wegliste h3 { font-size: 1.45rem; }
.kt-wegliste p { margin-top: .4rem; max-width: 40rem; color: var(--text); }
.kt-wegliste .kt-knopf { justify-self: start; }

/* --- Zweispaltige Abschnitte ------------------------------------------- */
.kt-leistungen, .kt-referenzen, .kt-fragen, .kt-design { padding: 4.5rem 0; border-top: 1px solid var(--linie); }
.kt-leistungen { background: var(--hell); }
.kt-zweispaltig { display: grid; gap: 2rem; }
@media (min-width: 900px) {
    .kt-zweispaltig { grid-template-columns: 1fr 1.7fr; gap: 4rem; }
    .kt-spalte-titel { position: sticky; top: 6rem; align-self: start; }
}
.kt-spalte-titel p { margin-top: .9rem; color: var(--grau); }
.kt-spalte-titel .kt-zeile { margin-top: 0; }

.kt-liste { margin: 0; }
.kt-liste > div { padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.kt-liste > div:first-child { border-top: 2px solid var(--gruen); }
.kt-liste dt { font-weight: 700; font-size: 1.25rem; color: var(--gruen); }
.kt-liste dd { margin: .35rem 0 0; }

.kt-reflist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gruen); }
.kt-reflist li { display: grid; gap: .6rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 700px) { .kt-reflist li { grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } }
.kt-reflist h3 { font-size: 1.25rem; }
.kt-reflist h3 a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kt-reflist p { margin-top: .25rem; color: var(--grau); }
.kt-pfeil { font-weight: 700; text-decoration: none; white-space: nowrap; }
.kt-pfeil:hover { text-decoration: underline; }

.kt-faq { border-top: 2px solid var(--gruen); }
.kt-faq details { border-bottom: 1px solid var(--linie); }
.kt-faq summary {
    list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
    font-weight: 700; font-size: 1.15rem; color: var(--gruen);
}
.kt-faq summary::-webkit-details-marker { display: none; }
.kt-faq summary::after { content: '+'; position: absolute; right: .3rem; top: 1rem; font-family: var(--mono); font-size: 1.5rem; color: var(--orange-tief); }
.kt-faq details[open] summary::after { content: '–'; }
.kt-faq details p { padding: 0 0 1.4rem; max-width: 42rem; }

.kt-design { background: var(--hell); }
.kt-design-text > p { font-size: 1.2rem; max-width: 42rem; }
.kt-design-liste { margin: 2rem 0 0; }
.kt-design-liste > div { display: grid; gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--linie); }
@media (min-width: 640px) { .kt-design-liste > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }
.kt-design-liste dt { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-tief); padding-top: .2rem; }
.kt-design-liste dd { margin: 0; }

/* --- Abschluss und Fuss ------------------------------------------------ */
.kt-schluss { background: var(--gruen); color: var(--papier); padding: 5rem 0; }
.kt-schluss h2 { color: var(--papier); font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 20ch; letter-spacing: -.01em; }
.kt-schluss p { margin-top: 1rem; max-width: 36rem; font-size: 1.2rem; }
.kt-schluss-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem !important; }

.fv-galerie { border-top: 1px solid rgba(244, 241, 234, .15); }

.kt-fuss { padding: 2rem 0; font-size: .9rem; color: var(--grau); }
.kt-fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.kt-fuss nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.kt-fuss a { color: var(--grau); }
.kt-fuss b { color: var(--gruen); }

/* Popups: Titel in Waldgruen */
.fv-titel { color: var(--gruen); }