/* ==========================================================================
   style.css - gemeinsames Stylesheet beider Websites.
   Am 29.08.2026 aus Webseite KI.Rauch.Coach\website\css\ uebernommen, damit
   rauch.coach die sechs Korrekturen vom 27./28.08. mitbekommt, die hier fehlten:

     1. Handy-Bewegung: ".modul" statt ".js .modul" hat nie gegriffen, es lief
        der volle Desktop-Versatz von 160px und riss ein Loch in den Text.
     2. Spezifitaet: dadurch blieb am Handy alles dauerhaft gedreht.
     3. .bildrahmen--breit war 16/10 statt 16/9 und schnitt am Handy seitlich
        je fuenf Prozent ab - genau dort sitzt die KI-Kennzeichnung.
     4. Links im Fliesstext hatten keine eigene Regel und waren auf Navy
        unsichtbar. Betrifft die Bausteine ablauf und systemisch.
     5. .bericht-karte erbte ihre Schriftfarbe und war auf Navy unsichtbar.
     6. Es gab keine einzige Fokusregel (WCAG 2.4.7).

   Die vorherige Fassung liegt in
   werkstatt\sicherung\style-vor-uebernahme-2026-08-29\style.css.alt
   Was rauch.coach zusaetzlich braucht, steht in rauch-coach.css.
   ========================================================================== */

/* ============================================================
   SCHRIFTEN — lokal ausgeliefert
   Vorher kamen Oswald, Inter und Caveat direkt von den Servern
   von Google. Zwei Gruende, das zu aendern:

   1. Datenschutz. Beim Laden von fonts.gstatic.com geht die
      IP-Adresse des Besuchers an Google in die USA. Das LG
      Muenchen I hat dafuer 2022 Schadenersatz zugesprochen
      (Az. 3 O 17493/20). Lokal ausgeliefert entfaellt das,
      und der entsprechende Abschnitt in der
      Datenschutzerklaerung wird gegenstandslos.
   2. Ladezeit. Zwei fremde Verbindungen weniger, kein
      blockierendes Stylesheet von aussen.

   Inter ist eine Variable Font: eine Datei deckt alle
   Schnitte von 400 bis 800 ab.
   ============================================================ */

/* Oswald 600 */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/oswald-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/oswald-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Inter 400 bis 800 (Variable Font, eine Datei je Zeichensatz) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/inter-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/inter-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Caveat 600 — nur fuer das Zitat */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/caveat-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/caveat-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   ki.rauch.coach — Gestaltungsentwurf 23.08.2026
   Prinzipien uebernommen von phamilypharma.com, Farben und
   Schrift eigenstaendig:
     - wenige Farben, grosse Flaechen
     - KEINE Schatten (Tiefe nur durch Flaechen)
     - wenige, grosse Radien
     - eine Plakatschrift ausschliesslich fuer Ueberschriften
     - ein wiederkehrendes Signature-Element (Goldbalken)
     - Sektionen als schwebende, gerundete Bloecke
   ============================================================ */

/* --------------------------------------------------------------
   FARBREGEL (nach dem Unruhe-Befund vom 23.08.2026)

   Farbe hat auf dieser Seite genau drei Aufgaben:

   1. Flaechenwechsel Navy <-> Creme  = die Gliederung.
      Daran erkennt man den Abschnitt, nicht an Marken oder Rahmen.
   2. Gold = EIN Akzent pro Sektion, und zwar die zweite Zeile der
      Ueberschrift. Sonst nirgends dekorativ.
   3. Gold als Flaeche nur beim Hauptknopf - das ist Funktion
      (die Handlung, die der Besucher tun soll), keine Deko.

   Alles andere ist Navy oder Creme. Wer einen weiteren Goldakzent
   einbauen will, nimmt dafuer einen bestehenden weg.
   -------------------------------------------------------------- */

:root {
    --creme:      #F7F3EA;   /* Grundflaeche, nie reines Weiss */
    --creme-hell: #FDFBF6;
    /* Exakt die Werte aus website\css\style.css. Vorher stand hier
       ein selbst gemischtes #0F2540 - deutlich dunkler und weniger
       blau als Willis eingefuehrter Ton. */
    --navy:       #1B3A6B;   /* Flaeche UND Text - kein Schwarz */
    --navy-tief:  #122850;
    /* Exakt die Werte aus website\css\style.css - nicht abwandeln.
       Der kraeftigere #D9A441 wirkte als Flaeche senffarben. */
    /* EIN Goldton, sonst nichts. Ich hatte drei Abstufungen
       eingefuehrt, um Kontrastprobleme auf hellem Grund zu loesen -
       technisch sauber, gestalterisch inkonsequent: drei Goldtoene
       auf einer Seite lesen sich wie ein Versehen.
       Konsequenz daraus: Gold ist die Akzentfarbe auf DUNKLEM Grund.
       Auf hellen Bloecken traegt die Typografie allein. */
    --gold:       #C9A84C;
    --gold-hell:  #F0E0B0;

    --r-klein: 18px;
    --r-gross: 36px;
    --r-pille: 999px;

    --rand: 14px;            /* Abstand der Bloecke zum Seitenrand */
    --max: 1180px;
    --pad: 32px;

    /* Der letzte Wert liegt ueber 1: das Element schiesst ueber das
       Ziel hinaus und federt zurueck. Kern der Bewegung. */
    --feder: cubic-bezier(.17, .67, .3, 1.33);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Platz fuer die klebende Kopfzeile, wenn ein Anker angesprungen wird */
section[id] { scroll-margin-top: 96px; }
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--navy);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Typografie ---------------------------------- */

h1, h2, h3 {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    /* 1.08 statt der 0.94 des Vorbilds: deutsche Umlaute brauchen
       Platz nach oben, sonst ragen die Punkte in die Zeile darueber. */
    line-height: 1.08;
    text-wrap: balance;
}

h1 { font-size: clamp(32px, 4vw, 54px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.05; }

p { max-width: 62ch; }
p + p { margin-top: 18px; }

/* Abschnittsmarke - bewusst OHNE Farbe, Kasten oder Balken.
   Die Version mit Goldkasten stammte von der alten Seite; dort
   funktioniert sie, weil dort sonst kaum Farbe ist. Hier kam sie
   zu den Farbfeldern und den Goldzeilen dazu und machte die Seite
   unruhig. Der Abschnitt ist schon durch den Flaechenwechsel und
   den Abstand markiert - die Marke muss ihn nur benennen.
   (Befund 23.08.2026) */
.kicker {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: block;
    margin-bottom: 18px;
    color: var(--navy);
    opacity: .5;
}
.block--navy .kicker, .auf-navy .kicker { color: var(--creme-hell); opacity: .55; }

/* Das Signature-Element: die zweite Zeile der Ueberschrift steht
   in Gold. Genau einmal pro Sektion. Kein Kasten - der ueberlappte
   bei enger Zeilenhoehe die Zeile darueber und war als Flaeche zu
   laut (Befund 23.08.2026). */
/* Auf dunklem Grund Gold, auf hellem Grund gar keine Farbe:
   die Plakatschrift traegt die Zeile dort allein. */
.marker { color: inherit; }
.auf-navy .marker, .block--navy .marker { color: var(--gold); }


/* ---------- Bloecke ------------------------------------- */

.block {
    max-width: calc(var(--max) + 2 * var(--pad));
    margin: var(--rand) auto;
    padding: clamp(48px, 7vw, 104px) var(--pad);
    border-radius: var(--r-gross);
}
.block--navy { background: var(--navy); color: var(--creme-hell); }
.block--creme { background: var(--creme-hell); }
/* KEIN Block in Gold. Gold ist ein Akzent, keine Flaechenfarbe -
   auf grosser Flaeche wirkt jeder Goldton senffarben, unabhaengig
   vom Hexwert. (Befund 23.08.2026) */
.auf-navy { color: var(--creme-hell); }

.inhalt { max-width: var(--max); margin: 0 auto; }

/* ---------- Kopfzeile ----------------------------------- */

.kopf {
    position: sticky;
    top: var(--rand);
    z-index: 50;
    max-width: calc(var(--max) + 2 * var(--pad));
    margin: var(--rand) auto 0;
    padding: 14px 24px;
    border-radius: var(--r-pille);
    background: var(--navy);
    color: var(--creme-hell);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.kopf__marke {
    text-decoration: none;
    color: inherit;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 19px;
}
.kopf__nav { display: flex; gap: 24px; align-items: center; }
.kopf__nav a {
    color: var(--creme-hell);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    opacity: .8;
    transition: opacity .2s;
}

/* ---------- Zwei Ebenen in der Kopfzeile -----------------
   Links die drei Angebote, dann ein sichtbarer Abstand, dann die
   zwei Hintergrundbereiche, rechts der Knopf. Ein Textlink, der nur
   ans Seitenende springt, verspricht eine Seite, die es nicht gibt.
   Ein Knopf kuendigt eine Aktion an. Willi, 27.08.2026. */
.kopf__nav-zwei { margin-left: 22px; }

.kopf__cta {
    background: var(--gold);
    color: #FFFFFF !important;
    border-radius: var(--r-pille);
    padding: 9px 20px !important;
    font-weight: 700;
    margin-left: 12px;
    transition: background .2s, color .2s;
}
.kopf__cta:hover { background: var(--gold-hell); color: var(--navy-tief) !important; }

@media (max-width: 900px) {
    /* Im Klappmenue stapelt alles untereinander, ein Abstand nach
       links waere dort sinnlos. Stattdessen eine Trennlinie. */
    .kopf__nav-zwei { margin-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px !important; }
    .kopf__cta { margin: 10px 20px 6px; text-align: center; }
}
.kopf__nav a:hover { opacity: 1; }

/* ---------- Menue ----------------------------------------
   Auf breiten Schirmen steht die Navigation offen da, der
   Aufklapper ist unsichtbar. Auf schmalen wird daraus ein
   Klappmenue. Bewusst mit <details> statt JavaScript: Die
   Navigation ist der wichtigste Teil einer Seite, sie darf
   nicht davon abhaengen, ob ein Skript laedt (Regel R9).
   Vorher war die Navigation unter 900px komplett
   ausgeblendet, auf dem Handy gab es also gar kein Menue.
   --------------------------------------------------------- */
.menue__schalter { display: none; }
.menue__knopf { display: none; }

/* ---------- Schaltflaechen ------------------------------ */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: var(--r-pille);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .18s var(--feder), background .2s, color .2s;
}
.knopf:hover { transform: translateY(-2px); }
/* Weisse Schrift auf dem vollen Gold. Der gemessene Kontrast liegt
   bei 2,3:1 und damit unter dem, was als gut lesbar gilt - Willi
   hat das gewusst und sich am 23.08.2026 bewusst dafuer entschieden,
   weil ein zweiter Goldton das Farbsystem zerreissen wuerde.
   Schriftgrad und -staerke deshalb eine Stufe hoeher als sonst. */
.knopf--gold {
    background: var(--gold);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
}
.knopf--gold:hover { background: var(--gold-hell); color: var(--navy-tief); }
/* Der Linienknopf uebernimmt die Schriftfarbe seines Blocks:
   auf Navy creme, auf Creme navy. */
.knopf--linie { border-color: currentColor; color: inherit; }
.block--creme .knopf--linie { color: var(--navy); }
.knopf--linie:hover { background: var(--creme-hell); color: var(--navy); border-color: var(--creme-hell); }
.block--creme .knopf--linie:hover { background: var(--navy); color: var(--creme-hell); border-color: var(--navy); }

/* Der Goldknopf traegt auf dem Handy die kurze Beschriftung, sonst
   bricht er bei 390px auf zwei Zeilen. Der Schriftgrad bleibt bei
   17px - er kompensiert den schwachen Kontrast auf dem Gold und
   darf nicht sinken. Willi hat die kurze Fassung am 27.08.2026
   der kleineren Schrift vorgezogen.
   Es ist immer genau eine der beiden Fassungen sichtbar, deshalb
   greift der gap des Flex-Knopfes nicht. */
.knopf__kurz { display: none; }
@media (max-width: 560px) {
    .knopf__lang { display: none; }
    .knopf__kurz { display: inline; }
}

/* ---------- Hero ---------------------------------------- */

.hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.hero__text { max-width: 640px; }
.hero h1 { margin-bottom: 26px; }
/* Derselbe Vorspann wie auf allen Unterseiten (.lead): gleiche
   Groesse, gleiche Staerke. Vorher stand er hier als einziger fett. */
.hero__claim {
    font-size: 19px;
    font-weight: 400;
    color: var(--creme-hell);
    margin-bottom: 22px;
}
.hero__aktionen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* Bilder: Duotone. Vereinheitlicht beliebige Fotos zu einem
   System - ohne das sieht jedes Stockfoto nach Stockfoto aus. */
.bildrahmen {
    position: relative;
    border-radius: var(--r-gross);
    overflow: hidden;
    /* Rahmenformat immer nahe am Originalformat waehlen, sonst
       schneidet object-fit:cover die Personen an. Das Portrait
       (willi-rauch-links.jpg) ist 1920x1371, also rund 4/3. */
    aspect-ratio: 4/3;
    background: var(--navy-tief);
}
.bildrahmen img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Von Willi am 23.08.2026 selbst eingestellt (bildregler.html).
       Nicht nach Gefuehl aendern - er hat den Punkt gesucht, an dem
       das Bild gestaltet wirkt, ohne truebe zu werden. */
    filter: grayscale(0.50) contrast(1.06) brightness(1.00);
    opacity: 1;
}
.bildrahmen::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(201,168,76,.05), rgba(18,40,80,0.25));
    pointer-events: none;
}

/* ---------- Karten -------------------------------------- */

.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.karte {
    background: var(--creme-hell);
    color: var(--navy);          /* sonst erbt die Karte im dunklen
                                    Block die helle Schriftfarbe und
                                    der Text verschwindet */
    border-radius: var(--r-klein);
    padding: 36px 30px 32px;
    display: flex; flex-direction: column; gap: 14px;
}
.block--creme .karte { background: var(--creme); }
/* Die Piktogramme aus der bestehenden Seite: zwei Personen,
   Kompass, Kreislauf. Sie sagen auf einen Blick, worum es geht -
   eine Nummer sagt nur, dass es drei Stueck sind. */
.karte__icon {
    width: 52px; height: 52px;
    border-radius: var(--r-pille);
    border: 2px solid var(--navy);
    color: var(--navy);
    display: grid; place-items: center;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.karte__icon svg { width: 26px; height: 26px; }
.karte p { font-size: 17px; }
.karte__link {
    margin-top: auto;
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex; gap: 8px;
    transition: gap .2s;
}
.karte__link:hover { gap: 14px; }

/* ---------- Fakten -------------------------------------- */

.fakten { display: grid; gap: 12px; margin-top: 32px; }
.fakt {
    display: flex; gap: 14px;
    padding: 16px 20px;
    border-radius: var(--r-klein);
    background: var(--creme);
    font-size: 17px;
}
.fakt::before { content: "→"; color: var(--navy); opacity: .45; font-weight: 800; flex-shrink: 0; }
/* Im dunklen Block braucht der Faktenkasten eigene Werte, sonst
   steht Cremeschrift auf Cremegrund - dieselbe Falle wie bei .karte. */
.block--navy .fakt { background: rgba(255,255,255,.07); color: var(--creme-hell); }
.block--navy .fakt::before { color: var(--gold); opacity: .85; }

/* Das Zitat folgt der Schriftfarbe seines Blocks. */
.block--navy /* Der Definitionsabsatz. Er steht bewusst als abgesetzter Block:
   KI-Antwortmaschinen zitieren geschlossene, faktische Passagen
   lieber als Fliesstext, und fuer Menschen ist er die Stelle, an
   der die Abgrenzung zum Berater geklaert wird. */
.definition {
    border-left: 3px solid var(--gold);
    padding: 4px 0 4px 20px;
    margin: 26px 0;
}
.definition strong { display: block; margin-bottom: 6px; }

.zitat { color: var(--creme-hell); }
.zitat {
    font-family: 'Caveat', cursive;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.3;
    color: var(--navy);
    padding: 28px 0 28px 26px;
    /* Kein Goldstrich: in dieser Sektion ist die Goldzeile der
       Ueberschrift schon der eine Akzent. Das Zitat traegt sich
       ueber die Handschrift. */
    border-left: 4px solid rgba(27,58,107,.22);
    margin: 34px 0;
    max-width: 30ch;
}

.ueber { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }

/* ---------- Abschluss ----------------------------------- */

.abschluss { text-align: center; }
.abschluss h2 { margin-bottom: 22px; }
.abschluss p { margin: 0 auto; }
.abschluss .hero__aktionen { justify-content: center; }

/* ============================================================
   FUSSZEILE
   Vier Bloecke plus Schlusszeile. Sie ersetzt die einzeilige
   Fassung: bei der Uebernahme des Entwurfs waren der sichtbare
   LinkedIn-Link, die Verweise auf die Leistungsseiten, der
   Buchungslink und der Rueckverweis auf rauch.coach verloren
   gegangen (Befund 23.08.2026 im Abgleich mit der Live-Seite).
   ============================================================ */

.fuss {
    max-width: var(--max);
    margin: 48px auto var(--rand);
    padding: 0 var(--pad) 30px;
    font-size: 13px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: start;
}
.fuss__block { display: flex; flex-direction: column; gap: 8px; opacity: .72; }
.fuss__stark { font-weight: 700; opacity: 1; }
.fuss a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.fuss a:hover { border-bottom-color: currentColor; }
.fuss__zeile {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(27,58,107,.14);
    opacity: .6;
}
/* Der Hinweis, dass die Seite mit KI gebaut ist. Er steht bewusst da:
   Willi behauptet auf dieser Seite, dass er KI selbst einsetzt. Dann
   gehoert dazu, dass man es der Seite auch ansieht. */
.fuss__hinweis { text-align: center; }

@media (max-width: 900px) {
    .fuss { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 560px) {
    .fuss { grid-template-columns: 1fr; }
    .fuss__zeile { flex-direction: column; gap: 10px; }
    .fuss__hinweis { text-align: left; }
}

/* ============================================================
   BEWEGUNG
   ============================================================ */

/* Textzeilen: 25px Weg, 3 Grad Kippung - der Wert aus dem Vorbild */
/* Die Startzustaende gelten nur, wenn JS laeuft. Ohne JS bleibt
   alles sichtbar - sonst waere die Seite bei abgeschaltetem
   JavaScript leer. */
.zeile { display: block; }

.js .zeile {
    opacity: 0;
    transform: translateY(25px) rotate(3deg);
    transform-origin: left center;
    transition: opacity .5s ease, transform .5s var(--feder);
    will-change: transform, opacity;
}
.zeilen.sichtbar .zeile { opacity: 1; transform: translateY(0) rotate(0deg); }

/* Eine Zeile mit Goldkasten braucht Luft: sonst schiebt sich der
   Kasten bei der engen Plakat-Zeilenhoehe ueber die Zeile darueber. */
/* Seit Variante B (Farbe statt Kasten, Willis Wahl 23.08.2026)
   braucht diese Zeile keinen Sonderabstand mehr. Die frueher hier
   mitgefuehrte Klasse .zentriert ist am 08.09.2026 entfernt worden -
   sie stand in keiner Seite beider Websites. */
.abschluss .zeile { transform-origin: center; }

/* Ganze Module: 160px Weg (10rem im Vorbild) - deshalb wuchtig */
.js .modul {
    opacity: 0;
    transform: translateY(160px) rotate(3deg);
    transform-origin: left top;
    transition: opacity .5s ease, transform .55s var(--feder);
    will-change: transform, opacity;
}
.modul.sichtbar { opacity: 1; transform: translateY(0) rotate(0deg); }

/* Kleinere Einzelteile */
.js .leise {
    opacity: 0;
    transform: translateY(34px) rotate(1.5deg);
    transition: opacity .5s ease, transform .5s var(--feder);
}
.leise.sichtbar { opacity: 1; transform: translateY(0) rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
    .zeile, .modul, .leise {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ---------- Schmale Fenster ----------------------------- */

@media (max-width: 900px) {
    :root { --pad: 24px; --r-gross: 26px; }
    .hero, .ueber { grid-template-columns: 1fr; gap: 36px; }
    .karten { grid-template-columns: 1fr; }
    /* Klappmenue statt versteckter Navigation */
    .menue__knopf {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px; height: 44px;
        margin: -8px -8px -8px 0;
        padding: 0 10px;
        cursor: pointer;
    }
    .menue__knopf span {
        display: block;
        height: 2px;
        background: var(--creme-hell);
        border-radius: 2px;
        transition: transform .2s, opacity .2s;
    }
    .menue__schalter:not(:checked) ~ .kopf__nav { display: none; }
    .menue__schalter:checked ~ .menue__knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menue__schalter:checked ~ .menue__knopf span:nth-child(2) { opacity: 0; }
    .menue__schalter:checked ~ .menue__knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .kopf__nav {
        position: absolute;
        top: calc(100% + 10px);
        right: var(--pad);
        min-width: 220px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--navy);
        border-radius: var(--r-klein);
        padding: 8px 0;
        box-shadow: 0 14px 40px rgba(18,40,80,.35);
        z-index: 60;
    }
    .kopf__nav a { padding: 12px 20px; opacity: .85; font-size: 15px; }
    .kopf__nav a:hover { background: rgba(255,255,255,.08); }
    .bildrahmen { aspect-ratio: 4/3; }
    /* FEHLER, gefunden am 27.08.2026: Hier stand ".modul" ohne ".js".
       Die Grundregel heisst ".js .modul" und ist damit staerker - diese
       Zeile hat nie gegriffen. Am Handy lief deshalb der volle
       Desktop-Versatz von 160px. Bei 844px Bildschirmhoehe ist das ein
       Fuenftel des Bildes: Das Layout reserviert den Platz schon, der
       Inhalt steht aber noch weit darunter. Das war das Loch im Text.
       28px reichen fuer den Effekt auf kurzen Bildschirmen. */
    .js .modul { transform: translateY(28px); }

    /* ZWEITER FEHLER, gefunden am 27.08.2026 nachmittags, verursacht durch
       die Korrektur von heute Vormittag: ".js .modul" hat dieselbe
       Spezifitaet wie ".modul.sichtbar", steht aber spaeter im Stylesheet
       und gewinnt deshalb auch im eingeblendeten Zustand. Auf dem Handy
       blieb dadurch ALLES dauerhaft um 1,5 Grad gedreht und 28px
       verschoben. Auf dem Desktop nicht, weil dieser Block dort nicht
       gilt. Jede Startregel hier braucht also ihre eigene Endregel mit
       hoeherer Spezifitaet.
       Die Drehung faellt auf dem Handy ganz weg: Bei hohen, schmalen
       Bloecken sieht schon ein Grad wie eine Schieflage aus. */
    .js .modul.sichtbar { transform: none; }
    .js .zeile { transform: translateY(18px); }
    .js .zeilen.sichtbar .zeile { transform: none; }
    .js .leise { transform: translateY(20px); }
    .js .leise.sichtbar { transform: none; }
}


/* ============================================================
   LAUFBAND
   Ein schmaler Streifen mit wanderndem Text. Kostet nichts,
   bringt Bewegung in die Seite, auch wenn gerade nicht gescrollt
   wird. Zweimal derselbe Inhalt, damit der Umlauf nahtlos ist.
   ============================================================ */
.laufband {
    max-width: calc(var(--max) + 2 * var(--pad));
    margin: var(--rand) auto;
    background: transparent;
    color: var(--navy);
    border-top: 1px solid rgba(27,58,107,.16);
    border-bottom: 1px solid rgba(27,58,107,.16);
    border-radius: 0;
    overflow: hidden;
    padding: 13px 0;
    opacity: .5;
}
.laufband__spur {
    display: flex;
    width: max-content;
    animation: wandern 34s linear infinite;
}
.laufband__spur > span {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding-right: 14px;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
@keyframes wandern { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .laufband__spur { animation: none; }
}


/* Zweispaltiger Fliesstext: die Ueberschrift steht links, der Text
   rechts. Sonst bleibt die halbe Blockbreite leer und der Block
   sieht unfertig aus. */
.zweispalt { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .zweispalt { grid-template-columns: 1fr; gap: 28px; } }


/* Das Hero-Bild (bild-startseite-hero.jpg) ist 1920x1080, also 16/9.
   In einem 4/3-Rahmen wuerde es seitlich beschnitten und man saehe
   von den beiden Personen nur noch einen Ausschnitt. */
.bildrahmen--breit { aspect-ratio: 16/9; }
/* 27.08.2026: Hier stand 16/10. Alle Bilder sind 16:9, dadurch schnitt
   object-fit auf dem Handy links und rechts je fuenf Prozent ab. Genau
   dort sitzt die KI-Kennzeichnung. Mit 16/9 wird seitlich nichts mehr
   beschnitten. */
@media (max-width: 900px) { .bildrahmen--breit { aspect-ratio: 16/9; } }



/* ============================================================
   BAUSTEINE FÜR DIE UNTERSEITEN
   ============================================================ */

/* ---------- Prüfliste ("Kommt Ihnen das bekannt vor?") ------ */

.pruefliste { display: grid; gap: 10px; margin-top: 40px; text-align: left; }
.pruefliste__punkt {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 18px 22px;
    border-radius: var(--r-klein);
    background: var(--creme);
    font-size: 17px;
}
.block--navy .pruefliste__punkt { background: rgba(255,255,255,.06); }
.pruefliste__punkt::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .45;
    flex-shrink: 0;
    margin-top: 8px;
}

/* ---------- Schritte (Vorgehen) ----------------------------- */

.schritte { display: grid; gap: 4px; margin-top: 44px; counter-reset: schritt; }
.schritt {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    padding: 26px 0;
    border-top: 1px solid rgba(27,58,107,.14);
    align-items: start;
}
.block--navy .schritt { border-top-color: rgba(255,255,255,.16); }
.schritt:last-child { border-bottom: 1px solid rgba(27,58,107,.14); }
.block--navy .schritt:last-child { border-bottom-color: rgba(255,255,255,.16); }
.schritt__nr {
    counter-increment: schritt;
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 600;
    opacity: .35;
    line-height: 1;
    padding-top: 2px;
}
.schritt__nr::before { content: counter(schritt, decimal-leading-zero); }
.schritt h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 8px;
}
.schritt p { font-size: 17px; }

/* ---------- Fragen und Antworten ---------------------------- */

.fragen { display: grid; gap: 12px; margin-top: 44px; text-align: left; }
.frage {
    background: var(--creme);
    border-radius: var(--r-klein);
    padding: 24px 26px;
}
.block--navy .frage { background: rgba(255,255,255,.06); }
.frage__q {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    max-width: none;
}
.frage__a { font-size: 17px; opacity: .88; max-width: none; }

/* ---------- Kopfbereich der Unterseiten --------------------- */

.seitenkopf { max-width: 900px; }
.seitenkopf h1 { margin-bottom: 24px; }
.seitenkopf .lead { font-size: 19px; margin-bottom: 32px; }

/* ---------- Zurück-Verweis ---------------------------------- */

.zurueck {
    display: inline-flex; gap: 9px; align-items: center;
    font-size: 13px; font-weight: 700;
    text-decoration: none; color: inherit;
    opacity: .65; margin-bottom: 26px;
    transition: opacity .2s, gap .2s;
}
.zurueck:hover { opacity: 1; gap: 14px; }

@media (max-width: 900px) {
    .schritt { grid-template-columns: 48px 1fr; gap: 16px; }
}

/* Kopf der Unterseiten: keine zwei Spalten, das Bild steht weiter unten. */
.seitenkopf { max-width: 940px; }
.seitenkopf h1 { margin-bottom: 26px; }
.seitenkopf .lead { max-width: 62ch; }

/* ============================================================
   KARTEN: Verhalten beim Drüberfahren
   Kein Schatten (den gibt es auf dieser Seite nicht) — die Karte
   hebt sich an und der Rahmen wird sichtbar.
   ============================================================ */

.karte {
    transition: transform .25s var(--feder), background .25s;
    text-decoration: none;
    /* KEIN "color: inherit" hier. Diese Regel steht spaeter im
       Stylesheet als die Farbregel weiter oben und wuerde sie
       aufheben - dann ist der Kartentext creme auf creme und
       unsichtbar. Genau dieser Fehler war schon einmal behoben und
       ist durch diese Zeile zurueckgekommen (23.08.2026). */
}
.karte:hover { transform: translateY(-5px); }
.karte:hover .karte__icon { background: var(--navy); color: var(--creme-hell); }
.karte__icon { transition: background .25s, color .25s; }

/* ============================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   Eigene, ruhige Darstellung: viel Zeilenabstand, keine Effekte.
   ============================================================ */

.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h1 {
    font-size: clamp(30px, 4vw, 46px);
    margin-bottom: 10px;
}
.legal-content .subtitle {
    font-size: 15px;
    opacity: .6;
    margin-bottom: 44px;
}
.legal-block {
    padding: 26px 0;
    border-top: 1px solid rgba(27,58,107,.14);
}
.legal-block:first-of-type { border-top: 0; padding-top: 0; }
.legal-block h2 {
    font-size: clamp(19px, 2.2vw, 24px);
    margin-bottom: 14px;
}
.legal-block h3 {
    font-size: 17px;
    margin: 22px 0 10px;
}
.legal-block p, .legal-block li {
    font-size: 15px;
    line-height: 1.7;
    max-width: none;
}
.legal-block p + p { margin-top: 12px; }
.legal-block ul { margin: 10px 0 10px 22px; }
.legal-block li { margin-bottom: 6px; }
.legal-block a { color: var(--navy); }

/* ---------- Verweise im Fliesstext ---------------------- */
/* Bis zum 27.08.2026 gab es dafuer keine Regel. Auf Creme sah es
   zufaellig richtig aus, auf Navy stand Navy auf Navy und der Link
   war unsichtbar. Nach R8 setzt jetzt jede Flaeche ihren eigenen
   Wert. Kein Gold: Gold ist laut R7 der eine Akzent pro Sektion und
   der gehoert der Ueberschrift. */
.inhalt p a, .pruefliste__punkt a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(27, 58, 107, .38);
    transition: border-color .2s;
}
.inhalt p a:hover, .pruefliste__punkt a:hover { border-bottom-color: var(--navy); }

.block--navy .inhalt p a, .block--navy .pruefliste__punkt a {
    color: var(--creme-hell);
    border-bottom-color: rgba(253, 251, 246, .45);
}
.block--navy .inhalt p a:hover, .block--navy .pruefliste__punkt a:hover { border-bottom-color: var(--creme-hell); }
.legal-block ul.index { list-style: none; margin-left: 0; }
.legal-block ul.index li { margin-bottom: 4px; }

/* ============================================================
   AUS DER PRAXIS — Berichtsseiten
   ============================================================ */

.bericht { max-width: 68ch; }
.bericht p { font-size: 17px; line-height: 1.7; max-width: none; }
.bericht p + p { margin-top: 20px; }
/* Zwischenueberschriften gliedern die Langtexte. Kleiner als eine
   Sektionsueberschrift - sie ordnen innerhalb eines Textes, sie
   eroeffnen keinen neuen Abschnitt der Seite. */
.bericht h2 {
    font-size: 26px;
    margin: clamp(36px, 4.5vw, 52px) 0 16px;
}
.bericht h2:first-child { margin-top: 0; }
/* Der Merksatz: das eine, was aus dem Bericht haengen bleiben soll. */
.merksatz {
    margin: clamp(30px, 4vw, 44px) 0;
    padding: 22px 26px;
    background: var(--creme);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--r-klein) var(--r-klein) 0;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--navy);
}
.bericht .nachsatz {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(27,58,107,.16);
    font-size: 15px;
    font-style: italic;
    opacity: .72;
}
.bericht code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .92em;
    background: rgba(27,58,107,.07);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Übersicht: die drei Berichte als Karten untereinander */
.berichtliste { display: grid; gap: 16px; }
.bericht-karte {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 34px;
    row-gap: 2px;
    align-items: start;
    background: var(--creme);
    border-radius: var(--r-klein);
    padding: 32px 34px;
    text-decoration: none;
    /* R8: Bauteile mit eigenem Grund setzen ihre Schriftfarbe selbst.
       Hier stand "inherit". Das ging gut, solange die Karte nur auf
       Creme lag. Auf Navy erbte sie Creme und war unsichtbar.
       Gefunden am 27.08.2026 beim Bau von ueber-mich.html. */
    color: var(--navy);
    transition: transform .25s var(--feder), background .25s;
}
.bericht-karte:hover { transform: translateY(-4px); background: #F2ECDF; }
/* Ohne feste Zuordnung verteilt das Raster die vier Kinder
   abwechselnd auf beide Spalten. Die Kurzmarke gehoert links und
   ueber die ganze Hoehe, der Rest stapelt sich rechts. */
.bericht-karte__marke {
    grid-column: 1;
    grid-row: 1 / span 3;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .5;
    padding-top: 4px;
}
.bericht-karte h3 { grid-column: 2; grid-row: 1; margin-bottom: 12px; }
.bericht-karte p { grid-column: 2; grid-row: 2; font-size: 17px; margin-bottom: 16px; max-width: 62ch; }
.bericht-karte .karte__link { grid-column: 2; grid-row: 3; margin-top: 6px; }

/* Verweise auf die anderen Berichte */
.weiterliste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.weiter {
    display: block;
    background: var(--creme);
    border-radius: var(--r-klein);
    padding: 26px 28px;
    text-decoration: none;
    color: var(--navy);   /* R8, siehe .bericht-karte */
    transition: transform .25s var(--feder), background .25s;
}
.weiter:hover { transform: translateY(-4px); background: #F2ECDF; }
.weiter__kurz {
    display: block;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 8px;
}
.weiter__satz { display: block; font-size: 15px; opacity: .8; line-height: 1.5; }

@media (max-width: 900px) {
    .bericht-karte { grid-template-columns: 1fr; gap: 14px; }
    .bericht-karte__marke, .bericht-karte h3,
    .bericht-karte p, .bericht-karte .karte__link { grid-column: 1; grid-row: auto; }
    .weiterliste { grid-template-columns: 1fr; }
}

/* ============================================================
   DRUCK
   Beim Drucken zählt der Inhalt. Alles einblenden, was sonst auf
   den Scroll wartet, sonst kommen leere Seiten aus dem Drucker.
   ============================================================ */

@media print {
    .zeile, .modul, .leise, .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .kopf, .laufband, .hero__aktionen, .zurueck, .weiterliste { display: none; }
    body { background: #fff; color: #000; }
    .block { background: #fff !important; color: #000 !important; margin: 0; padding: 12mm 0; border-radius: 0; }
    .block--navy { color: #000 !important; }
    .marker, .auf-navy .marker { color: #000 !important; font-weight: 700; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}


/* Nach der Animation die Grafikebene wieder freigeben. Ein dauerhaft
   gesetztes will-change haelt fuer jedes Element eine eigene Ebene im
   Speicher, auch wenn sich laengst nichts mehr bewegt. */
.zeilen.sichtbar .zeile, .modul.sichtbar, .leise.sichtbar { will-change: auto; }


/* ============================================================
   LENIS — traegeres Scrollen
   Die Bibliothek liegt lokal unter js/lenis.min.js (MIT-Lizenz,
   Version 1.3.26). Bewusst keine Einbindung ueber ein fremdes
   Netz: die Seite soll auch dann laufen, wenn irgendein Anbieter
   abschaltet, und niemand soll beim Aufruf dieser Seite Daten an
   Dritte senden.

   Diese Regeln stammen aus lenis.css und muessen mit, sonst
   rechnet die Bibliothek mit falschen Hoehen.
   ============================================================ */

html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Solange Lenis das Scrollen uebernimmt, darf der Browser nicht
   zusaetzlich weich scrollen - sonst arbeiten beide gegeneinander. */
html.lenis { scroll-behavior: auto; }


/* ============================================================
   NACHTRAEGE 23.08.2026 — Vereinheitlichung
   ============================================================ */

/* Der Einordnungstext auf praxis.html sitzt jetzt im Seitenkopf,
   damit die Seite mit "warum das hier steht" beginnt und nicht
   damit endet. */
.seitenkopf__text { margin-top: 30px; max-width: 68ch; }
.seitenkopf__text p + p { margin-top: 14px; }

/* Die Weiterlesen-Liste haengt jetzt am Textblock des Berichts,
   statt eine zweite Cremesektion aufzumachen. */
.weiterblock {
    max-width: var(--max);
    margin: clamp(56px, 7vw, 88px) auto 0;
    padding-top: clamp(36px, 5vw, 56px);
    border-top: 1px solid rgba(27,58,107,.14);
}

/* Die beiden Rechtstexte hatten noch Inline-Stile mit Variablen aus
   dem alten Stylesheet (--text-mid, --border). Die gibt es nicht
   mehr; die Werte liefen ins Leere. Jetzt eigene Klassen. */
.legal-stand {
    font-size: 13px;
    opacity: .62;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(27,58,107,.14);
}

/* ---------- Tastaturbedienung --------------------------- */
/* Ergaenzt 28.08.2026. Vorher gab es keine einzige Fokusregel:
   Wer mit der Tastatur navigiert, sah nur den Browser-Standardring,
   der auf Navy praktisch verschwindet. WCAG 2.4.7 verlangt einen
   sichtbaren Fokus.

   :focus-visible statt :focus - der Ring erscheint bei Tastatur und
   bleibt bei Mausklick weg, so wie man es erwartet.

   Zwei Ringe uebereinander, damit er auf BEIDEN Flaechen traegt:
   innen Gold (traegt auf Navy), aussen ein dunkler Hof (traegt auf
   Creme). Auf Navy verschwindet der Hof und Gold bleibt, auf Creme
   ist es umgekehrt. Kein Flaechenwissen noetig - Regel R8 gilt hier
   sinngemaess auch fuer den Fokus. */
:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(18, 40, 80, .30);
    border-radius: 3px;
}

/* Auf dunklen Flaechen den Hof aufhellen statt abdunkeln. */
.block--navy :focus-visible,
.kopf :focus-visible,
.fuss :focus-visible {
    outline-color: var(--gold-hell);
    box-shadow: 0 0 0 6px rgba(247, 243, 234, .28);
}

/* Aeltere Browser ohne :focus-visible bekommen wenigstens den
   Goldring - sie zeigen ihn dann auch bei Mausklick. Besser
   sichtbar als unsichtbar. */
@supports not selector(:focus-visible) {
    a:focus, button:focus, summary:focus,
    input:focus, textarea:focus, select:focus {
        outline: 3px solid var(--gold);
        outline-offset: 2px;
    }
}

/* ---------- Fließtext aus dem Generator ------------------
   Befund 30.08.2026, von Willi beim Gegenlesen gefunden: Der Reset
   * { margin:0; padding:0 } trifft auch die Markdown-Ausgabe des
   Generators. Geregelt war dort bisher nur p + p. Folge:
   Zwischenüberschriften klebten am Text darüber und darunter,
   Listen hatten weder Abstand noch Einzug — die Aufzählungszeichen
   lagen außerhalb des Kastens und waren unsichtbar.
   Betrifft 53 Zwischenüberschriften auf 26 Seiten. */
.modul > h2, .modul > h3 { margin-top: clamp(30px, 3.4vw, 44px); margin-bottom: 12px; }
.modul > h2:first-child, .modul > h3:first-child { margin-top: 0; }
.modul ul, .modul ol { margin: 18px 0; padding-left: 1.35em; }
.modul li + li { margin-top: 8px; }
.modul ul + p, .modul ol + p { margin-top: 18px; }