/* Google Sans und Google Sans Text, selbst gehostet (bau/schriften.py). */
@font-face{font-family:'Google Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/schriften/google-sans-400-italic-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:'Google Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/schriften/google-sans-400-italic-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}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/google-sans-400-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:'Google Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/google-sans-400-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}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/schriften/google-sans-500-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:'Google Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/schriften/google-sans-500-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}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/schriften/google-sans-700-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:'Google Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/schriften/google-sans-700-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}
@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/google-sans-text-400-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:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/google-sans-text-400-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}
@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(/schriften/google-sans-text-500-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:'Google Sans Text';font-style:normal;font-weight:500;font-display:swap;src:url(/schriften/google-sans-text-500-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}

/* ---- Aus entwurf_v4.html (Startseite) — dort ändern, hier neu bauen. ---- */
/* ============================================================
   FÜNF JUNGS — Startseite, Entwurf v4
   Aufbau, Typografie und Bewegung aus „Signal", Kopfbereich und
   Zeigerpunkt aus „Kante". Farbe nach dem Feedback vom 01.09.2026:

   Schwarz und Weiß wechseln sich streng ab — daher kommt die Ruhe,
   die in „Signal" gefehlt hat. Gelb erscheint genau zweimal: dort,
   wo der Leser etwas tun soll (05 Markencheck, 10 Abschluss). Es ist
   damit keine Dekoration, sondern eine Bedeutung. Violett bleibt nur
   noch im Zeigerpunkt — die Hausfarbe ist da, ohne die Seite zu färben.
   Türkis entfällt.

   Bewusst einthemig: ein Website-Entwurf muss beim Kunden in
   jeder Systemeinstellung identisch aussehen. Alle Farben
   deshalb explizit gesetzt, keine prefers-color-scheme-Blöcke.
   ============================================================ */

:root{
  --gelb:#F0FD9C;
  --violett:#4700DB;
  --violett-hell:#7B47FF;   /* aufgehellt für den Zeiger auf schwarzem Grund */
  --schwarz:#111014;
  --weiss:#FFFFFF;
  /* laufende Bühnenfarben, per JS gewechselt */
  --bg:#111014;
  --fg:#FFFFFF;
  --akzent:#F0FD9C;
  --linie:rgba(255,255,255,.11);
  --rahmen:rgba(255,255,255,.22);

  /* ---------- Typografische Stufen (03.09.2026) ----------
     Vorher trug fast jede Stelle ihren eigenen Wert: fünf Größen für die
     zweite Überschriftenebene, zehn für erklärenden Text, zwölf Abstufungen
     der Deckkraft. Jetzt sind es sechs Stufen, die überall dieselben sind.
     Alle skalieren mit der Fensterbreite — vorher standen einige fest und
     wurden auf dem Telefon größer als die Zeilen, die sie begleiten. */
  --h-gross:clamp(2.45rem,5.6vw,5.4rem);      /* Abschnittsüberschrift   ~81/39 px */
  --h-zwischen:clamp(1.4rem,2.5vw,2.25rem);   /* Leistungen · Modell · Folgerung · Testfrage · Belegzahl */
  --h-karte:clamp(1.05rem,1.6vw,1.5rem);      /* Titel in schmalen Karten */
  --t-gross:clamp(1.05rem,1rem + .42vw,1.42rem);  /* Einstiegstext */
  --t-normal:clamp(.95rem,.9rem + .3vw,1.1rem);   /* Beschreibungen, Antworten */
  --t-klein:clamp(.85rem,.82rem + .2vw,.92rem);   /* Hinweise, Rezensionen, Fuß */
  --t-aus:clamp(.68rem,.64rem + .14vw,.76rem);    /* Versalauszeichnungen */
  --zaehler:var(--t-normal);                      /* zählende Ziffern (seit 21.09. keine eigene Stufe) */
  /* Drei Stufen, die am 21.09. (achtzehnte Runde) acht Sondergrößen ersetzt
     haben — Stand der Analyse: 17 Größen am Schreibtisch, jetzt elf. */
  --h-mittel:clamp(1.6rem,3.2vw,3.1rem);          /* Haltung, Text der Rezensions-Schicht */
  --zitat:clamp(1.2rem,1.05rem + .9vw,1.75rem);   /* Problem-Sätze, Rezensionssätze, O-Ton */
  --anf:clamp(4.5rem,7vw,7.5rem);                 /* alle großen Anführungszeichen */
  --sperr:.1em;                                   /* eine Sperrung für alles, was in Versalien steht */
  --deck-neben:.78;                               /* Nebentext */
  --deck-bei:.55;                                 /* Beiwerk */

  /* Abstände zwischen den Abschnitten (neunzehnte Runde 21.09.): zwei
     Stufen statt zehn Werte. --sek für alles Normale, --sek-halb für
     schmale Bänder (Logos, Werteband, Voriges/Nächstes, Fuß unten),
     --kopf-oben unter der festen Kopfzeile, --innen unter Nummernzeile
     und Brotkrume. Auf dem Telefon werden sie weiter unten kleiner. */
  --sek:clamp(5rem,11vh,10rem);
  --sek-halb:clamp(2.5rem,6vh,4rem);
  --kopf-oben:clamp(6rem,12vh,8.5rem);
  --innen:clamp(2rem,5vh,3.6rem);
  --sp:clamp(1.5rem,4.5vw,5rem);
  --rand:clamp(1.25rem,5vw,6.5rem);
  --max:1560px;
  /* linke Satzkante, auch wenn das Fenster breiter als --max ist */
  --kante:calc(var(--rand) + max(0px,(100vw - 2 * var(--rand) - var(--max)) / 2));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Google Sans Text","Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-normal);
  line-height:1.55;
  overflow-x:hidden;
  transition:background-color .7s cubic-bezier(.4,0,.2,1),color .7s cubic-bezier(.4,0,.2,1);
}

img{max-width:100%;display:block}
a{color:inherit}

/* Markierung: Gelb mit schwarzem Text (Feedback 02.09.). Violett bleibt
   damit ausschließlich dem Zeigerpunkt vorbehalten. */
::selection{background:var(--gelb);color:var(--schwarz)}

:focus-visible{outline:3px solid var(--akzent);outline-offset:4px;border-radius:2px}

/* ---------- Typografie ---------- */
.gross{
  font-family:"Google Sans","Google Sans Text",sans-serif;
  font-weight:700;
  /* Gemischtschreibweise (Feedback 02.09.). Versalien bleiben den kleinen
     Auszeichnungen vorbehalten — Kicker, Schaltflächen, Zwischenzeilen.
     Dadurch wird die Schrift leiser und die Seite leichter zu lesen. */
  text-transform:none;
  letter-spacing:-.035em;
  /* Etwas mehr Zeilenabstand als bei Versalsatz: Gemischtschreibweise
     hat Unterlängen, die sonst in die Folgezeile stoßen. */
  line-height:1.05;
  margin:0;
  text-wrap:balance;
}
/* Eine Größe für alle großen Überschriften (Wunsch 03.09.) — h1 und h2
   sind nicht mehr zu unterscheiden, egal in welchem Abschnitt sie stehen. */
h1.gross,h2.gross{font-size:var(--h-gross)}
/* Seit 03.09. auch die dritte Ebene in Gemischtschreibweise — damit
   steht auf der ganzen Seite keine große Zeile mehr in Versalien. */
h3.gross{font-size:var(--h-zwischen);line-height:1.05;letter-spacing:0}

.kicker{
  font-family:"Google Sans",sans-serif;
  font-weight:500;
  font-size:var(--t-aus);
  text-transform:uppercase;
  letter-spacing:var(--sperr);
  line-height:1.5;
  margin:0;
}
.lauf{max-width:34em;font-size:var(--t-gross);line-height:1.5}
.klein{font-size:var(--t-klein);line-height:1.5}

/* ---------- Grundgerüst ---------- */
.sek{
  position:relative;
  padding-block:var(--sek);
  padding-inline:var(--rand);
}
.innen{max-width:var(--max);margin-inline:auto;width:100%}

.nr{
  display:flex;align-items:baseline;gap:.9rem;
  margin:0 0 var(--innen);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--linie);
}
/* Alles, was eine Linie trägt, blendet ihre Farbe im selben Takt um wie
   die Bühne. Ohne das springt sie hart und blitzt beim Wechsel auf. */
.nr,.beleg,.leist,.leist a,.stimme,.werte li,.foerder,.stapel,.ebene,
.buehne,.wahl button,.check-fragen,.check-fragen li,.fuss,.fuss-unten,.bilanz div,.hebel{
  transition:border-color .7s cubic-bezier(.4,0,.2,1);
}
.nr b{font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--t-aus);letter-spacing:0;font-variant-numeric:tabular-nums}
.nr span{font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;opacity:var(--deck-bei)}

/* ---------- Zeigerpunkt (aus „Kante" übernommen) ----------
   Der einzige runde und der einzige frei bewegte Gegenstand auf der
   Seite — und die Stelle, an der die Hausfarbe sichtbar bleibt. */
/* Seit 04.09. trägt der Punkt keine eigene Farbe mehr, sondern kehrt um,
   was unter ihm liegt: Weiß im Differenz-Modus zieht jeden Farbwert von
   Weiß ab — Schwarz wird weiß, Weiß wird schwarz, Gelb wird blau. Damit
   ist er auf jedem Grund sichtbar und braucht keine Umschaltung mehr. */
.spur{
  position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  width:15px;height:15px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;
  transform:translate3d(-200px,-200px,0);
  transition:width .32s cubic-bezier(.16,1,.3,1),height .32s cubic-bezier(.16,1,.3,1),
             opacity .3s ease;
  will-change:transform;
}
.spur.gross{width:74px;height:74px}
.spur.aus{opacity:0}
@media (hover:none),(pointer:coarse){.spur{display:none}}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(.9rem,1.8vh,1.5rem) var(--rand);
  color:var(--fg);
  /* Deckend in der laufenden Bühnenfarbe (Wunsch 21.09., sechste Runde):
     beim Hochscrollen legt sich kein Text mehr über das Logo. */
  background:var(--bg);
  transition:color .7s cubic-bezier(.4,0,.2,1),background-color .7s cubic-bezier(.4,0,.2,1),transform .45s ease;
  mix-blend-mode:normal;
}
.kopf.weg{transform:translateY(-115%)}
/* Der Absender steht seit 04.09. als Originallogo im Kopf und im Fuß —
   Wortmarke und „Claudia Jung · Markenberatung" in einer Datei
   (SVG/logo-claudia-jung-markenberatung.svg), statt wie zuvor aus
   Wortmarke und gesetztem Text zusammengebaut. Die Schriftlage des
   Absenders ist damit die der Logodatei, nicht die der Website.
   Das Logo liegt einfarbig vor und nimmt über currentColor die
   Bühnenfarbe an: Weiß auf Schwarz, Schwarz auf Weiß und auf Gelb.
   Der Wechsel läuft im selben Takt wie der der Schrift — siehe
   .kopf → transition:color. */
.marke{display:flex;align-items:center;text-decoration:none;min-width:0}
.marke svg{width:clamp(215px,23vw,300px);max-width:100%;height:auto;display:block}
.marke svg path{fill:currentColor}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.4rem)}
.nav a{
  font-family:"Google Sans",sans-serif;font-weight:500;
  font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;
  text-decoration:none;position:relative;padding-block:.3rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:currentColor;transition:right .34s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
@media (max-width:940px){.nav .verbergen{display:none}}
/* Unternavigation „Leistungen“ (21.09., vierte Runde): Liste unter dem
   Menüpunkt, in der laufenden Bühnenfarbe. Öffnet beim Überfahren, per
   Tastatur (focus-within) und über den Pfeilknopf (Berührung). */
.nav-gruppe{position:relative;display:flex;align-items:center;gap:.25rem}
.nav-auf{
  appearance:none;background:none;border:0;padding:.3rem .15rem;margin:0;cursor:pointer;color:inherit;
  display:inline-flex;transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-auf svg{width:.62rem;height:auto;display:block}
.nav-gruppe:hover .nav-auf,.nav-gruppe:focus-within .nav-auf,.nav-gruppe.offen .nav-auf{transform:rotate(180deg)}
.nav-unter{
  position:absolute;top:100%;left:-1.1rem;margin:.55rem 0 0;padding:.45rem 0;list-style:none;min-width:15rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--rahmen);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s,
             background-color .7s cubic-bezier(.4,0,.2,1),color .7s cubic-bezier(.4,0,.2,1);
}
.nav-unter::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem} /* Brücke, damit der Zeiger nicht ins Leere fällt */
.nav-gruppe:hover .nav-unter,.nav-gruppe:focus-within .nav-unter,.nav-gruppe.offen .nav-unter{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .nav-unter a{
  display:flex;gap:.8rem;align-items:baseline;padding:.6rem 1.1rem;
  text-transform:none;letter-spacing:0;font-size:var(--t-normal);font-weight:500;
  transition:background-color .2s ease,color .2s ease;
}
.nav .nav-unter a::after{display:none}
.nav .nav-unter a:hover,.nav .nav-unter a:focus-visible{background:var(--fg);color:var(--bg)}
.nav-unter .z{font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--t-aus);opacity:var(--deck-bei);font-variant-numeric:tabular-nums}
.nav .aktiv > a::after,.nav a.aktiv::after{right:0;opacity:.55}

/* ---------- Mobilmenü ---------- */
.burger{
  display:none;appearance:none;background:none;border:0;padding:.4rem;margin:-.4rem -.4rem -.4rem 0;
  width:2.6rem;height:2.6rem;cursor:pointer;color:inherit;
  flex-direction:column;justify-content:center;gap:6px;
}
.burger span{display:block;width:100%;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
/* Unter 940 px bleibt in der Kopfzeile nur Logo und Burger — der
   Markencheck-Link passte daneben nicht mehr (Wunsch 21.09.), er steht
   im Mobilmenü. */
@media (max-width:940px){.burger{display:flex}.nav > a,.nav > .nav-gruppe{display:none}}
.menue{
  position:fixed;inset:0;z-index:55;background:#111014;color:#FFFFFF;
  display:flex;align-items:center;padding:6rem var(--rand) 3rem;
  opacity:0;transition:opacity .35s ease;
}
.menue[hidden]{display:none}
.menue.an{opacity:1}
.menue nav{display:flex;flex-direction:column;gap:clamp(.9rem,3vh,1.6rem);width:100%}
.menue a{
  font-family:"Google Sans",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:var(--h-gross);line-height:1.05;text-decoration:none;color:inherit;
}
.menue a.hervor{color:#F0FD9C}
/* Die drei Leistungen als eingerückte Gruppe unter „Leistungen“, mit gelber
   Kante und Nummern (21.09., vierte Runde). */
.menue-unter{
  list-style:none;margin:-.2rem 0 .3rem;padding:.1rem 0 .1rem 1.1rem;border-left:2px solid #F0FD9C;
  display:flex;flex-direction:column;gap:.5rem;
}
.menue .menue-unter a{
  font-size:var(--h-zwischen);font-weight:500;letter-spacing:-.01em;line-height:1.2;
  display:flex;gap:.7rem;align-items:baseline;opacity:.92;
}
.menue-unter .z{font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--t-aus);color:#F0FD9C;font-variant-numeric:tabular-nums}
/* Einträge kommen nacheinander, nicht als Block. */
.menue nav > *{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.menue.an nav > *{opacity:1;transform:none}
.menue.an nav > :nth-child(2){transition-delay:.05s}
.menue.an nav > :nth-child(3){transition-delay:.1s}
.menue.an nav > :nth-child(4){transition-delay:.15s}
.menue.an nav > :nth-child(5){transition-delay:.2s}
.menue.an nav > :nth-child(6){transition-delay:.25s}
.menue.an nav > :nth-child(7){transition-delay:.3s}
/* Der Bran(d)ialog ist im Menü die Hauptschaltfläche: gelb, schwarz
   beschriftet (Wunsch 21.09.) — fest gesetzt, unabhängig von der Bühne. */
.menue .menue-taste{
  margin-top:clamp(1rem,4vh,2rem);align-self:flex-start;
  --tf:#111014;color:#111014;background:#F0FD9C;border-color:#F0FD9C;
  font-weight:500;font-size:var(--t-klein);letter-spacing:var(--sperr);line-height:normal;
}
.menue .menue-taste::before{background:#FFFFFF}
.menue .menue-taste:hover,.menue .menue-taste:focus-visible{color:#111014;border-color:#FFFFFF}
body.menue-offen{overflow:hidden}
.kopf.menue-offen{color:#FFFFFF;background:#111014;transform:none} /* Hintergrund wie das Menü — auf gelber Bühne war das Logo weiß auf Gelb (Screen 21.09.) */
/* Unter 430 px passt „Kostenlosen Bran(d)ialog vereinbaren“ nicht in eine
   Zeile: engeres Polster, der Text darf umbrechen, der Pfeil bleibt rechts. */
@media (max-width:430px){
  .taste{padding:1em 1.4em;letter-spacing:.07em;text-align:left;max-width:100%;box-sizing:border-box}
  .taste .pf{flex:none}
}
@media (max-width:560px){
  /* Auf dem Telefon müssen Absender und Markencheck nebeneinander passen.
     Das Logo steht dort in einer Zeile statt als Stapel — es braucht
     mehr Breite als die frühere Wortmarke, bleibt aber flacher. */
  .kopf{gap:.8rem}
  .marke svg{width:176px} /* 21.09.: von 158 auf 176 px — „etwas größer“ */
  .nav a{font-size:.7rem;letter-spacing:var(--sperr)}
}

/* ---------- Schaltflächen ---------- */
.taste{
  --tf:var(--bg);
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:"Google Sans",sans-serif;font-weight:500;
  font-size:var(--t-klein);
  letter-spacing:var(--sperr);text-transform:uppercase;
  text-decoration:none;color:var(--tf);
  background:var(--akzent);
  padding:1.05em 1.9em;border:1.5px solid var(--akzent);border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .34s ease,background-color .34s ease,border-color .34s ease;
}
/* Der Pfeil in der Schaltfläche wandert dauerhaft ein Stück nach rechts
   und zurück — gerade genug, um die Richtung anzudeuten (Wunsch 04.09.).
   Beim Überfahren tritt er deutlicher heraus. */
@keyframes pfeil-deutet{
  0%,72%,100%{transform:translateX(0)}
  40%{transform:translateX(4px)}
}
.taste .pf{
  display:inline-flex;
  animation:pfeil-deutet 3.4s cubic-bezier(.4,0,.2,1) infinite;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.taste:hover .pf,.taste:focus-visible .pf{animation:none}
/* Gezeichnete Pfeile statt der Textglyphe (Vorlagen 04.09.). Sie nehmen
   die Textfarbe an und sitzen eng an der Zeile — der Kasten drumherum
   ist so knapp wie die Zeichnung selbst. */
.pf-svg{display:block;width:1.35em;height:auto;overflow:visible}
.pf-gross{width:2.2em}
.taste::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.taste:hover,.taste:focus-visible{color:var(--bg);border-color:var(--fg)}
.taste:hover::before,.taste:focus-visible::before{transform:translateY(0)}
.taste:hover .pf,.taste:focus-visible .pf{transform:translateX(6px)}
.taste.leer{background:transparent;color:var(--fg);border-color:currentColor}
.taste.leer::before{background:var(--fg)}
.taste.leer:hover,.taste.leer:focus-visible{color:var(--bg)}

/* Auf den hellen Flächen ist die Schaltfläche selbst schon schwarz —
   dort kann die einlaufende Füllung nicht auch schwarz sein. Sie dreht
   deshalb auf Umriss statt auf Füllung. Die Umriss-Schaltfläche (.leer)
   behält ihr normales Verhalten. */
.hell .taste:not(.leer)::before{background:transparent}
.hell .taste:not(.leer):hover,
.hell .taste:not(.leer):focus-visible{color:var(--fg);background:transparent}

/* ---------- Zeilenweiser Aufbau ----------
   Die Maske braucht Luft für Ober- und Unterlängen, sonst schneidet
   overflow:hidden die Glyphen an. Das Plus an Höhe holt die Folgezeile
   per negativem Rand wieder herein — optisch bleibt der enge Satz. */
.gross{margin-top:-.16em}
.zeile{display:block;overflow:hidden;padding-block:.16em}
.zeile+.zeile{margin-top:-.34em}
.zeile>i{
  display:block;font-style:inherit;
  transform:translateY(122%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.an .zeile>i{transform:translateY(0)}
.an .zeile:nth-child(2)>i{transition-delay:.09s}
.an .zeile:nth-child(3)>i{transition-delay:.18s}
.an .zeile:nth-child(4)>i{transition-delay:.27s}

.auf{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
/* Wie .auf, aber der Auslöser sitzt tiefer: Das Element muss ein gutes
   Stück im Bild stehen, bevor es kommt. Für Aufrufe, die sich nicht mit
   dem Satz darüber zusammen zeigen sollen. */
.spaeter{opacity:0;transform:translateY(44px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.spaeter.an{opacity:1;transform:none}
.an .auf,.auf.an{opacity:1;transform:none}
.auf.v2{transition-delay:.12s}
.auf.v3{transition-delay:.24s}
.auf.v4{transition-delay:.36s}

/* ============ 01 EINSTIEG ============ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(7rem,15vh,11rem);padding-bottom:clamp(1.5rem,4vh,3rem);
  padding-inline:var(--rand);position:relative;
}
/* Kopfbereich aus „Kante" (Wunsch 01.09.): Die Überschrift läuft über
   die volle Breite, erst darunter teilt sich die Fläche in Text und Bild.
   Die Zeile bekommt dadurch ihren vollen Auftritt, und das Bild wird
   größer als in „Signal", wo es neben der Überschrift stand. */
.hero-innen{max-width:var(--max);margin-inline:auto;width:100%}
.hero .kicker{max-width:none;margin-bottom:clamp(1rem,2.6vh,1.8rem)}
/* Halbe/halbe Aufteilung (Feedback 02.09.): der ganze Text links,
   das Bild rechts — und über die volle Höhe der Textspalte, damit es
   den Platz bekommt, den es vorher unter der Überschrift verloren hat. */
/* Die Zeile „Unternehmensmarken" ist 11,63 em breit (gemessen) und damit
   das Maß aller Dinge: Bei 7,3 vw bleibt sie von 320 px an bis zur vollen
   Satzbreite innerhalb des Randes — ohne Mindestwert, der sie auf dem
   Telefon wieder hinausschiebt. */
/* Seit 03.09. trägt der Kopfbereich dieselbe Größe wie alle anderen
   Überschriften. Damit die Zeile in der halben Spalte bleibt, ist der
   Umbruch gewandert: „starke Marken" (6,4 em) steht jetzt allein in
   Zeile zwei — und trägt dort die gelbe Fläche. */
.hero h1.gross{margin-bottom:clamp(1.2rem,3vh,2rem)}
/* Die Auszeichnung wie in 02: gelbe Fläche, schwarze Schrift — fest
   gesetzt, damit sie beim Bühnenwechsel nicht mitwandert. */
/* Die gelbe Auszeichnung — eine Regel für alle Stellen, die sie tragen.
   Die Fläche wird als Verlauf gezeichnet statt als Hintergrund des
   Inline-Kastens: Der reicht bei dieser Schrift weit über Ober- und
   Unterlängen hinaus. Höhe und Lage so gewählt, dass oben und unten
   gleich viel Luft bleibt (nachgemessen 04.09.). */
.gross em,.folgerung em{
  font-style:normal;color:var(--schwarz);
  background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 .09em/100% 1.04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0 .1em;
}
/* Am Zeilenanfang zieht die Fläche nach links auf die Satzkante. */
.zeile em:first-child{margin-left:-.1em}
.hero-fuss{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4.5rem);align-items:stretch;
}
.hero-spalte{display:flex;flex-direction:column;justify-content:center;gap:clamp(.9rem,2.2vh,1.5rem)}
.hero-spalte .lauf{margin:0}
.hero-spalte .hero-unten{margin-top:clamp(1.4rem,3.5vh,2.4rem)}
.hero-unten{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.8rem,2vw,1.4rem);
}
.hero-hinweis{font-size:.86rem;opacity:.72;letter-spacing:.01em;margin:0}

/* Bildfenster mit Wechsel — in v4 größer als in „Signal" (Wunsch 01.09.:
   „Das Bild müßte wohl etwas größer sein … mit etwas Bewegung"). */
.fenster{
  position:relative;overflow:hidden;border-radius:2px;
  background:rgba(255,255,255,.07);
  /* Das Bild füllt die Höhe der Textspalte. Der Mindestwert sorgt dafür,
     dass es auch bei kurzem Text eine Fläche bleibt und keine Leiste. */
  height:100%;min-height:clamp(300px,52vh,560px);
}
.fenster img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease,transform 5.5s ease;
}
.fenster img.sichtbar{opacity:1;transform:scale(1)}
.fenster-nr{
  position:absolute;left:.8rem;bottom:.7rem;z-index:2;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);color:#fff;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;
}
@media (max-width:860px){
  .hero-fuss{grid-template-columns:1fr;align-items:start}
  /* height muss hier zurückgenommen werden — sonst leitet aspect-ratio
     die Breite aus der festen Höhe ab und das Bild läuft seitlich hinaus. */
  .fenster{height:auto;min-height:0;aspect-ratio:16/11}
}

/* Beleg-Zeile */
.beleg{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4.5rem);
  border-top:1px solid var(--linie);
  max-width:var(--max);margin:clamp(2rem,5vh,3.5rem) auto 0;
  padding-top:clamp(1.1rem,2.5vh,1.7rem);width:100%;
}
.beleg div{display:flex;align-items:baseline;gap:.6rem}
.beleg b{
  display:inline-block; /* start.js reserviert die Endbreite, damit beim Zählen nichts hüpft */
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--h-zwischen);letter-spacing:0;
  font-variant-numeric:tabular-nums;line-height:1;
}
.beleg span{font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;opacity:var(--deck-bei)}

/* ============ 02 PROBLEM ============
   Drei Stimmen, drei Marken: jedes Zitat trägt sein eigenes
   Anführungszeichen, groß und deckend, und alle schweben dauerhaft —
   versetzt, damit die Reihe nicht im Gleichtakt wippt.
   Größenverhältnis bewusst gespreizt (Frage ~80px, Stimmen ~26px):
   die Zitate sollen leiser sein als die Frage, die sie einleitet. */
.problem{position:relative;overflow:hidden}
/* Näher an die Frage gerückt (04.09.) — vorher lagen bis zu elf
   Zeilenhöhen dazwischen. */
.problem-kopf{margin-bottom:clamp(3rem,8vh,6rem)}
/* Zart auf und ab, ohne Drehung (Wunsch 21.09., sechste Runde). */
@keyframes schweben{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

/* Die drei Stimmen stehen nebeneinander — gleiches Gewicht, kein Register */
.saetze{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3.5vw,3.2rem);
}
.satz{display:flex;flex-direction:column;gap:clamp(1.4rem,3vh,2.2rem);margin:0}
/* Jede Stimme trägt ihre eigene Marke — alle schweben, aber
   versetzt, damit die Reihe nicht im Gleichtakt wippt. */
/* Auf weißem Grund ist der Akzent jetzt Schwarz — deckend wären die
   drei Zeichen erschlagend. Sie stehen deshalb als graue Marke da und
   lassen dem Zitat den Vortritt. */
/* Schwarz statt Gelb (Wunsch 03.09.) — auf Weiß trägt die Textfarbe
   deutlich weiter als die Hausfarbe. Größer als zuvor und mit mehr
   Luft zum Zitat; um die linke Seitenlage der Glyphe nach außen
   gerückt, damit sie mit dem Zitat auf einer Kante steht. */
.satz .marke{
  font-family:"Google Sans","Google Sans Text",sans-serif;font-weight:700;
  font-size:var(--anf);line-height:.72;
  color:var(--fg);opacity:1;display:block;user-select:none;
  margin-left:-.07em;
  animation:schweben 6.2s ease-in-out infinite;
  transform-origin:60% 40%;
}
.satz:nth-child(2) .marke{animation-duration:7.6s;animation-delay:-2.1s}
.satz:nth-child(3) .marke{animation-duration:6.8s;animation-delay:-4.3s}
/* Eigene, deutlich längere Staffelung als die allgemeine (.v2/.v3):
   die drei Sätze sollen einzeln ankommen, nicht als Block (04.09.). */
.satz.v2{transition-delay:.42s}
.satz.v3{transition-delay:.84s}
.satz p{
  margin:0;font-family:"Google Sans",sans-serif;font-weight:500;letter-spacing:-.015em;
  font-size:var(--zitat);
  line-height:1.32;letter-spacing:0; /* kein text-wrap:pretty — es zog Wörter in eine neue Zeile, die noch Platz hatten */
}
@media (max-width:820px){
  .saetze{grid-template-columns:1fr;gap:2rem}
  .satz{gap:1rem}
  .satz .marke{font-size:var(--anf)}
  /* Nur mobil: kein Wort allein in der letzten Zeile. Am Schreibtisch
     bleibt der Umbruch frei — ein geschütztes Leerzeichen zog dort
     „eigentlich“ mit in die dritte Zeile (Screen 21.09.). */
  .satz p{text-wrap:pretty}
}
.schluss-zeile{
  margin-top:clamp(7rem,17vh,13rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
}
@media (max-width:820px){.schluss-zeile{align-items:flex-start;flex-direction:column}}
.folgerung{
  margin:0;
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--h-zwischen);letter-spacing:0;line-height:1.1;
}
/* Auf weißem Grund kann das Akzentwort nicht farbig sein — Schwarz ist
   schon die Textfarbe. Es bekommt deshalb die gelbe Fläche hinter sich.
   So kommt Gelb auch in die hellen Abschnitte, ohne sie einzufärben. */
/* Farbe fest gesetzt (Wunsch 03.09.): Die Auszeichnung bleibt schwarz
   auf Gelb, auch während die Bühne ihre Farbe wechselt. */


/* ============ 03 MODELL ============ */
.modell{padding-inline:0;padding-block:0}
.modell-bahn{height:360vh;position:relative}
.modell-halt{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(2.5rem,6vh,4.5rem);
  padding:clamp(4rem,8.5vh,7rem) var(--rand) clamp(1.4rem,4vh,3.5rem);
  overflow:hidden;
}
/* Die Abstände kommen jetzt aus dem gap des Halts (2 rem, Wunsch 04.09.) —
   eigene Ränder wären doppelt. */
.modell-kopf{max-width:var(--max);margin-inline:auto;width:100%}
/* Dieselbe Größe wie „Kennen Sie einen dieser Sätze?“ (zwölfte Runde 21.09.). */
.modell-kopf h2{line-height:1.05}
/* Reihenfolge gedreht (Wunsch 01.09.): Die Ebenen stehen jetzt in
   Leserichtung — 01 Unternehmen oben, 04 Marketing unten. Der Aufbau
   läuft entsprechend von oben nach unten. */
/* Seit 03.09. ohne Kästen (Wunsch): vier Bänder, die nur eine Linie
   trennt, und links eine gelbe Spur, die beim Scrollen von oben nach
   unten mitwächst — der Effekt aus Stil 3 „Kante", hier in
   Leserichtung gedreht. Die Spur ist die Zeitachse des Aufbaus:
   01 Unternehmen zuerst, 04 Marketing zuletzt. */
.stapel{
  max-width:var(--max);margin-inline:auto;width:100%;
  display:flex;flex-direction:column;
}
.ebene{
  display:grid;grid-template-columns:clamp(2.6rem,5vw,4.2rem) minmax(0,1fr);
  gap:clamp(.9rem,2.5vw,2rem);align-items:baseline;
  padding-block:clamp(.5rem,1.8vh,1.7rem);
  padding-inline:clamp(1rem,2.5vw,2rem);
  position:relative;
  opacity:.32;
  transition:opacity .6s ease,padding-inline .6s cubic-bezier(.16,1,.3,1);
}
/* Das Stück Zeitachse, das zu dieser Ebene gehört. Die vier Stücke
   stoßen über die Randlinie hinweg aneinander (top/bottom −1px) und
   ergeben zusammen eine durchgehende Spur. */
.ebene::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;
  background:var(--gelb);transform:scaleY(0);transform-origin:top;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
/* Zählende Ziffer — dieselbe Stufe wie bei den Leistungen (03.09.). */
.ebene .stufe{
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--zaehler);letter-spacing:0;
  font-variant-numeric:tabular-nums;line-height:1;
}
.ebene .titel{
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--h-zwischen);letter-spacing:0;line-height:1.05;
  margin:0 0 .28em;
}
.ebene .stich{font-size:var(--t-klein);opacity:var(--deck-neben);margin:0;line-height:1.4}
/* Am Schreibtisch stehen Titel und Stichworte je Ebene in einer Zeile
   (Wunsch 21.09., siebte Runde) — das Modell wird flacher. */
/* Titel in fester Spalte, damit die Stichworte aller vier Ebenen bündig
   untereinander stehen (zwölfte Runde 21.09.). Keine Linien mehr
   zwischen den Ebenen — nur die gelbe Spur links. */
@media (min-width:861px){
  .ebene{grid-template-columns:clamp(2.6rem,5vw,4.2rem) 17em minmax(0,1fr)}
  .ebene > div{display:contents}
  .ebene .titel{margin:0}
}
.ebene.aktiv{opacity:1}
.ebene.aktiv::before{transform:scaleY(1)}
.ebene.aktiv .stufe{color:var(--gelb)}
/* Die letzte Ebene ist das Ziel des Aufbaus — sie bekommt statt der
   früheren gelben Vollfläche nur ihren Titel in Gelb. Eine Fläche
   würde die Spur erschlagen, um die es hier geht. */
.ebene.aktiv.top .titel{color:var(--gelb)}
.ebene .stufe,.ebene .titel{transition:color .55s ease}
.modell-fuss{
  max-width:var(--max);margin-inline:auto;width:100%;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
}
.modell-fuss p{margin:0;max-width:42em;font-size:var(--t-normal);opacity:var(--deck-neben)}

/* Flache Fenster in zwei Stufen: Der Halt ist genau einen Bildschirm hoch,
   und was nicht hineinpasst, würde unten abgeschnitten — zuerst der
   Schlusssatz unter den Bändern. (Der Knopf „Das Modell im Detail" ist
   seit 21.09. weg: Die Wissensseiten kommen vorerst nicht.) Deshalb
   rücken bei niedrigen Fenstern erst die
   Bänder zusammen, und erst darunter wird auch die Überschrift kleiner.
   Die übrigen Überschriften sind an dieser Stelle nicht im Bild, der
   Größenunterschied fällt also nicht auf. */
@media (max-height:820px){
  /* Seit die Ebenen einzeilig und ohne Linien sind, bleibt auch hier Luft. */
  .modell-halt{gap:clamp(1.5rem,4.5vh,3rem);padding-bottom:clamp(1rem,2.5vh,2.5rem)}
  /* Auf flachen Bildschirmen braucht der Kopfbereich weniger Polster,
     sonst reicht er über den Schirm hinaus. Die Höhe kommt dort von der
     Textspalte, nicht vom Bild — gespart wird deshalb am Rand und an der
     Belegzeile, nicht am Bild. */
  .hero{padding-top:clamp(5.5rem,12vh,8rem);padding-bottom:clamp(.8rem,2vh,1.6rem)}
  .fenster{min-height:clamp(240px,42vh,440px)}
  .beleg{margin-top:clamp(1.4rem,3vh,2.4rem);padding-top:clamp(.9rem,2vh,1.4rem)}
  /* Der Abstand vor den Schaltflächen bleibt — enger rücken nur die
     Textzeilen darüber. */
  .hero-spalte{gap:clamp(.6rem,1.4vh,1.2rem)}
}
@media (max-height:760px){
  .modell-halt{gap:1rem}
  .ebene{padding-block:clamp(.4rem,1.5vh,1.2rem)}
  .ebene .titel{font-size:clamp(1.15rem,2vw,1.75rem)}
}
@media (max-height:700px){
  .modell-halt{gap:1rem;padding-top:clamp(3.4rem,7vh,5rem)}
  .modell-kopf h2{font-size:clamp(1.6rem,4.4vw,3.6rem)}
  .ebene .stich{font-size:clamp(.72rem,.7rem + .18vw,.85rem)}
}
@media (max-height:700px){
  .modell-fuss p{font-size:clamp(.8rem,.78rem + .18vw,.9rem);max-width:38em}
}
/* Unter 640 px Fensterhöhe passt der Abschnitt auch gestrafft nicht mehr
   auf einen Bildschirm. Dann fällt die Scroll-Choreografie weg und das
   Modell steht als gewöhnliche Liste da — vollständig lesbar, mit der
   gelben Spur durchgezogen. Gleiche Rückfallebene wie bei abgeschalteter
   Bewegung. */
@media (max-height:640px){
  .modell-bahn{height:auto}
  .modell-halt{position:static;height:auto;overflow:visible;padding-block:clamp(3rem,8vh,5rem)}
  .ebene{opacity:1}
  .ebene::before{transform:scaleY(1)}
}
/* Auf dem Telefon (Wunsch 21.09.) gar keine Scroll-Choreografie: Das Modell
   steht fertig aufgebaut da, mit denselben Abständen wie die übrigen
   Abschnitte; die gelbe Spur ist durchgezogen, Ziffern und Zielzeile gelb. */
@media (max-width:860px){
  .modell{padding-block:var(--sek)}
  .modell-bahn{height:auto !important}
  .modell-halt{position:static;height:auto;overflow:visible;padding-block:0;gap:clamp(2rem,5vh,3.6rem)}
  .modell-kopf .nr{margin-bottom:var(--innen) !important}
  /* Die Verkleinerungen für flache Fenster (max-height oben) dienen der
     Scroll-Choreografie — die ist hier aus, also Grundmaße wie überall
     (Hinweis 21.09.: Überschrift und Schlusssatz waren mobil zu klein). */
  .modell-kopf h2{font-size:var(--h-gross)}
  .modell-fuss p{font-size:var(--t-gross);line-height:1.5;max-width:34em} /* wie .lauf, der Fließtext unter den Überschriften */
  .ebene .titel{font-size:var(--h-zwischen)}
  .ebene .stich{font-size:var(--t-klein)}
  .ebene{opacity:1;padding-block:clamp(.9rem,2.2vh,1.5rem)}
  .ebene::before{transform:scaleY(1)}
  .ebene .stufe{color:var(--gelb)}
  .ebene.top .titel{color:var(--gelb)}
}


/* ============ 04 LEISTUNGEN ============ */
.leist{border-top:1px solid var(--linie)}
.leist a{
  display:grid;grid-template-columns:clamp(2.5rem,6vw,5rem) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  border-bottom:1px solid var(--linie);
  padding-block:clamp(1.5rem,3.6vh,2.6rem);
  text-decoration:none;position:relative;isolation:isolate;
  --pad:clamp(.6rem,2vw,1.6rem);
  /* Versatz per transform statt Polster (21.09.): die Textbreite bleibt,
     nichts bricht beim Überfahren um. */
  transition:transform .4s cubic-bezier(.16,1,.3,1),color .4s ease;
}
.leist a::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--pad));right:var(--pad);z-index:-1;background:var(--akzent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.leist a:hover,.leist a:focus-visible{transform:translateX(var(--pad));color:var(--bg)}
.leist a:hover::before,.leist a:focus-visible::before{transform:scaleY(1)}
/* Zählende Ziffer — dieselbe Stufe und dasselbe Gewicht wie im Modell. */
.leist .z{font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--zaehler);opacity:var(--deck-bei);font-variant-numeric:tabular-nums;line-height:1}
.leist a:hover .z{opacity:.85}
.leist h3{margin:0 0 .35em}
/* Ohne Satzbreitenbegrenzung: die Beschreibung soll auf dem Schreibtisch
   in einer Zeile stehen (Wunsch 03.09.), auf schmalen Fenstern bricht
   sie von selbst um. */
.leist p{margin:0;max-width:none;font-size:var(--t-normal);opacity:var(--deck-neben);text-wrap:pretty}
.leist .pf{display:inline-flex;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.leist a:hover .pf{transform:translateX(8px)}
@media (max-width:720px){
  .leist a{grid-template-columns:1fr auto;gap:.8rem}
  .leist .z{display:none}
}

/* ============ 05 MARKENCHECK ============ */
.check{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.check-fragen{display:flex;flex-direction:column;counter-reset:f}
.check-fragen li{
  list-style:none;counter-increment:f;
  display:grid;grid-template-columns:2.3rem 1fr;gap:1rem;align-items:baseline;
  padding-block:clamp(.7rem,1.8vh,1.1rem);
  border-bottom:1px solid var(--linie);
  font-size:var(--t-normal);line-height:1.35;
}
.check-fragen li::before{
  content:counter(f,decimal-leading-zero);
  font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--t-aus);
  opacity:var(--deck-bei);font-variant-numeric:tabular-nums;
}
.check-fragen{margin:0;padding:0;border-top:1px solid var(--linie)}
.check-quelle{margin-top:1.1rem;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;opacity:var(--deck-bei)}

/* ============ 05 MARKENCHECK — läuft direkt auf der Seite ============
   Ablauf nach Wireframe P3: fünf Fragen, drei Antwortstufen,
   fünfzehn Punkte, Ergebnis ohne vorheriges Formular. */
.test{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
@media (max-width:900px){.test{grid-template-columns:1fr}}
.test-kopf .kicker{margin-bottom:1rem}
.test-kopf .lauf{margin:clamp(1rem,2.5vh,1.5rem) 0 1rem}

/* die Bühne trägt entweder eine Frage oder das Ergebnis */
/* Der Kasten um den Test steht deckend in der Schriftfarbe (Wunsch 04.09.);
   die Antwortknöpfe darin behalten ihre leise Linie. */
.buehne{
  border:1px solid var(--fg);border-radius:0;
  padding:clamp(1.5rem,3.5vw,2.8rem);
  min-height:clamp(330px,44vh,430px);
  display:flex;flex-direction:column;
}
.fortschritt{
  display:flex;align-items:center;gap:1rem;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;
  margin-bottom:clamp(1.2rem,3vh,1.8rem);
}
/* Die Testfrage ist die letzte große Zeile, die noch in Versalien stand —
   sie zieht mit den übrigen Überschriften mit (03.09.). */
.frage-text{
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--h-zwischen);letter-spacing:0;line-height:1.08;
  margin:0 0 .7rem;text-wrap:balance;
}
.frage-hinweis{margin:0 0 clamp(1.2rem,3vh,1.8rem);font-size:var(--t-klein);opacity:var(--deck-neben);max-width:34em}
.wahl{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}
.wahl button{
  display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  font-family:"Google Sans Text",sans-serif;font-size:var(--t-normal);line-height:1.4;
  color:var(--fg);background:transparent;
  border:1px solid var(--rahmen);border-radius:0;
  padding:.95em 1.2em;cursor:pointer;
  transition:background-color .28s ease,color .28s ease,border-color .28s ease;
}
.wahl button .taste-nr{
  font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--t-aus);
  opacity:var(--deck-bei);font-variant-numeric:tabular-nums;flex:none;
}
.wahl button:hover,.wahl button:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wahl button:hover .taste-nr,.wahl button:focus-visible .taste-nr{opacity:.7}
.zurueck{
  margin-top:1.1rem;display:flex;align-items:center;gap:.5rem;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font-family:"Google Sans",sans-serif;font-size:var(--t-aus);letter-spacing:var(--sperr);
  text-transform:uppercase;opacity:var(--deck-bei);transition:opacity .3s ease;
}
.zurueck:hover{opacity:1}
.zurueck[hidden]{display:none}

/* Ergebnis */
.punkte{
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--h-zwischen);letter-spacing:0;line-height:1;
  font-variant-numeric:tabular-nums;margin:0 0 .5rem;
}
.punkte span{font-size:.4em;letter-spacing:0;opacity:.55}
.ergebnis-satz{
  font-family:"Google Sans",sans-serif;font-weight:500;
  font-size:var(--t-gross);line-height:1.25;letter-spacing:0;
  margin:0 0 clamp(1.2rem,3vh,1.8rem);text-wrap:balance;
}
.bilanz{list-style:none;margin:0 0 clamp(1.2rem,3vh,1.8rem);padding:0;border-top:1px solid var(--linie)}
.bilanz li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.6rem;border-bottom:1px solid var(--linie);font-size:var(--t-normal);
}
.bilanz b{
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;white-space:nowrap;flex:none;
}
.bilanz .stark b{color:var(--akzent)}
.bilanz .teils b{opacity:.6}
.bilanz .schwach b{background:var(--fg);color:var(--bg);padding:.25em .6em}
.hebel{border-top:1.5px solid var(--fg);padding-top:1rem;margin-bottom:clamp(1.2rem,3vh,1.8rem)}
.hebel h4{
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;margin:0 0 .5rem;opacity:var(--deck-bei);
}
.hebel p{margin:0;font-size:var(--t-normal);line-height:1.5}
.ergebnis-tasten{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:auto}
.test-fuss{margin-top:1rem;font-size:var(--t-klein);opacity:var(--deck-bei)}
.check h2{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
.check .lauf{margin-block:0 clamp(1.6rem,4vh,2.4rem)}
@media (max-width:860px){.check{grid-template-columns:1fr}}

/* ============ 06 PROJEKTE ============ */
.proj{padding-inline:0}
.proj-bahn{position:relative}
.proj-halt{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.proj-kopf{
  max-width:calc(var(--max) + 2 * var(--rand));
  padding-inline:var(--rand);margin:0 auto clamp(1.4rem,3.5vh,2.4rem);
  width:100%;
}
.schiene{position:relative;display:flex;gap:clamp(1rem,2.2vw,2rem);padding-left:var(--kante);padding-right:var(--rand);will-change:transform}
.karte{
  flex:0 0 clamp(240px,26vw,380px);
  display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,1.8rem);text-decoration:none;
}
.karte-bild{
  aspect-ratio:1/1;display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem);
  border:0;border-radius:2px;
  background:rgba(255,255,255,.045);position:relative;overflow:hidden;
  transition:background-color .45s ease;
}
.karte-bild img{
  width:min(78%,240px);height:auto;opacity:.92;
  filter:var(--logo-dreh,none);
  transition:transform .55s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.4,0,.2,1);
}
.karte:hover .karte-bild img{transform:scale(1.06)}
/* Seit 03.09. trägt jede Karte ein Projektfoto statt eines Kundenlogos.
   Das Bild füllt die Kachel randlos; Logos und Platzhalter sind damit
   aus diesem Abschnitt verschwunden — die Kundenlogos stehen weiterhin
   im Band darunter. */
.karte-bild.foto{padding:0;background:rgba(255,255,255,.04)}
.karte-bild.foto img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;opacity:.9;
  /* Schwarzweiß im Ruhezustand, Farbe erst beim Überfahren (Wunsch 03.09.).
     Das grayscale ersetzt zugleich das geerbte --logo-dreh: Fotos dürfen
     die Umkehr der weißen Logos nicht mitmachen. */
  filter:grayscale(1);
  transition:transform .7s cubic-bezier(.16,1,.3,1),
             filter .55s cubic-bezier(.4,0,.2,1),opacity .5s ease;
}
.karte:hover .karte-bild.foto img,
.karte:focus-visible .karte-bild.foto img{transform:scale(1.05);filter:grayscale(0);opacity:1}
.karte .fach{font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;opacity:var(--deck-bei);margin:0}
/* Eigene, kleinere Stufe: die Karte ist höchstens 380 px breit — die
   Zwischenüberschrift der übrigen Abschnitte wäre hier unlesbar. */
.karte h3{margin:.6rem 0 0;font-size:var(--h-karte);line-height:1.1}
.karte .unter{margin:.6rem 0 0;font-size:var(--t-klein);opacity:var(--deck-neben);line-height:1.45}
/* Unter 860 px hält der Abschnitt nicht mehr einen Bildschirm lang an —
   die Schiene ist dann selbst wischbar (siehe .punkte weiter unten). */
@media (max-width:860px){
  .proj-bahn{height:auto !important}
  .proj-halt{position:static;height:auto;overflow:visible;padding-block:clamp(3rem,6.5vh,4.5rem)}
  .schiene{
    transform:none !important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:.25rem;
    /* Auslauf rechts, damit auch die letzte Karte an der linken Kante
       einrasten kann (Screen 21.09.: sie blieb um eine Karte versetzt). */
    padding-right:calc(100vw - min(78vw,340px) - var(--rand));
  }
  .schiene::-webkit-scrollbar{display:none}
  .karte{flex:0 0 min(78vw,340px);scroll-snap-align:start}
  .proj .tupfen{padding-inline:var(--rand)}
}

/* ============ 07 VERTRAUEN ============ */
.stimmen{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.4rem);align-items:stretch}
@media (max-width:1100px){.stimmen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stimme{
  margin:0;padding:0;border:0;
  display:flex;flex-direction:column;min-width:0;
}
/* Das Anführungszeichen als Gestaltungselement — groß, schwarz, angeschnitten
   wie in Abschnitt 02, nicht als Icon. */
.stimme .anf{
  font-family:"Google Sans",sans-serif;font-weight:700;
  font-size:var(--anf);line-height:1;height:1em;
  margin:-.3em 0 .15rem -.06em;display:block;
  animation:schweben 6.2s ease-in-out infinite;
}
.stimme.v2 .anf{animation-duration:7.6s;animation-delay:-2.1s}
.stimme.v3 .anf{animation-duration:6.8s;animation-delay:-4.3s}
/* Der eine Satz, groß. Die Markierung läuft ein wie ein Textmarker. */
.satz-gross{
  font-family:"Google Sans",sans-serif;font-weight:500;letter-spacing:-.015em;
  font-size:var(--zitat);line-height:1.28;
  margin:0 0 clamp(1.4rem,3vh,2rem);text-wrap:pretty;
}
.stimme mark{
  color:var(--schwarz);font-weight:inherit;
  background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 .09em/0% 1.04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0 .1em;margin:0 -.1em;
  transition:background-size 1.2s cubic-bezier(.4,0,.2,1) .45s;
}
.stimme.an mark{background-size:100% 1.04em}
.stimme.v2 mark{transition-delay:.65s}
.stimme.v3 mark{transition-delay:.85s}
/* Person (21.09., siebte Runde): links ein rundes Plus, daneben Name in
   Versalien und Unternehmen darunter. Kein Foto-Platzhalter. */
.stimme-kopf{flex:1;display:flex;flex-direction:column}
.stimme .wer{
  display:flex;align-items:center;gap:1rem;margin:auto 0 0;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;line-height:1.5;
}
.stimme .wer small{font-size:1em;font-weight:400;opacity:var(--deck-bei)}
.mehr{
  flex:none;appearance:none;background:none;border:1px solid currentColor;border-radius:50%;
  width:2.4rem;height:2.4rem;padding:0;cursor:pointer;color:inherit;
  display:inline-grid;place-items:center;
  font-family:"Google Sans",sans-serif;font-weight:400;font-size:1.6rem;line-height:1;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s ease,color .25s ease;
}
.mehr span[aria-hidden]{display:block;transform:translateY(-.05em)}
.mehr:hover,.mehr:focus-visible,.mehr[aria-expanded="true"]{background:var(--fg);color:var(--bg);transform:rotate(90deg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ganz{display:none} /* nur Datenhalter für die Schicht */

/* ---------- Die Rezensions-Schicht ----------
   Das Plus öffnet die ganze Rezension als gelbe Fläche über dem gesamten
   Fenster: schwarze Schrift auf Gelb, groß gesetzt, der Kernsatz schwarz
   hinterlegt mit gelber Schrift, der von links einläuft. Die Fläche wischt
   von unten herauf, der Text kommt gestaffelt nach; Pfeile blättern zu den
   beiden anderen Stimmen. Farben fest, unabhängig von der Bühne. */
.rez-layer{
  position:fixed;inset:0;z-index:80;background:#F0FD9C;color:#111014;
  overflow:auto;overscroll-behavior:contain;
  clip-path:inset(100% 0 0 0);
  transition:clip-path .65s cubic-bezier(.76,0,.24,1);
}
.rez-layer[hidden]{display:none}
.rez-layer.an{clip-path:inset(0 0 0 0)}
.rez-innen{
  min-height:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(5.5rem,10vh,7.5rem) var(--rand) clamp(3rem,6vh,4.5rem);
  display:flex;flex-direction:column;gap:clamp(1.4rem,3vh,2.2rem);
}
.rez-kopf{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:clamp(.9rem,1.8vh,1.5rem) var(--rand);color:#111014}
.rez-kopf .kicker{margin:0}
.rez-zaehler{opacity:.55;margin-left:.6em;font-variant-numeric:tabular-nums}
.rez-zu{
  appearance:none;background:none;border:1px solid currentColor;border-radius:50%;width:2.6rem;height:2.6rem;padding:0;
  cursor:pointer;color:inherit;display:inline-grid;place-items:center;
  font-family:"Google Sans",sans-serif;font-size:1.5rem;line-height:1;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s,color .25s;
}
.rez-zu:hover,.rez-zu:focus-visible{background:#111014;color:#F0FD9C;transform:rotate(90deg)}
.rez-inhalt{display:flex;flex-direction:column;gap:clamp(1.2rem,2.5vh,1.8rem);margin:auto 0;max-width:min(100%,64em)}
.rez-anf .anf{
  font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--anf);line-height:1;height:.9em;
  margin:0 0 0 -.06em;display:block;
  animation:schweben 6.2s ease-in-out infinite;
}
.rez-text{
  font-family:"Google Sans",sans-serif;font-weight:500;letter-spacing:-.018em;
  font-size:var(--h-mittel);line-height:1.28;text-wrap:pretty;
}
.rez-text p{margin:0}
.rez-text p+p{margin-top:.75em}
.rez-text mark{
  color:#111014;
  background:linear-gradient(#111014,#111014) no-repeat 0 .06em/0% 1.06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0 .12em;margin:0 -.12em;
}
.rez-wer{
  margin:.4rem 0 0;font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;line-height:1.5;
}
.rez-wer small{font-size:1em;font-weight:400;opacity:.6}
.rez-nav{display:flex;gap:.8rem;margin-top:clamp(1rem,3vh,2rem)}
.rez-nav button{
  appearance:none;cursor:pointer;background:none;color:inherit;border:1px solid currentColor;border-radius:999px;
  display:inline-flex;align-items:center;gap:.6rem;padding:.8em 1.4em;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;
  transition:background-color .25s,color .25s;
}
.rez-nav button:hover,.rez-nav button:focus-visible{background:#111014;color:#F0FD9C}
.rez-nav .pf{display:inline-flex}
.rez-nav .pf-zurueck{transform:rotate(180deg)}
/* Auftritt: erst die Fläche, dann der Text — und beim Blättern derselbe Takt
   noch einmal, ausgelöst über die Klasse .wechsel. */
@keyframes rez-auf{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rez-mark{to{background-size:100% 1.06em;color:#F0FD9C}}
.rez-inhalt > *{opacity:0}
.rez-layer.an .rez-inhalt > *{animation:rez-auf .8s cubic-bezier(.16,1,.3,1) both}
.rez-layer.an .rez-inhalt > :nth-child(1){animation-delay:.45s}
.rez-layer.an .rez-inhalt > :nth-child(2){animation-delay:.55s}
.rez-layer.an .rez-inhalt > :nth-child(3){animation-delay:.7s}
.rez-layer.an .rez-inhalt > :nth-child(4){animation-delay:.8s}
.rez-layer.an .rez-text mark{animation:rez-mark 1.1s cubic-bezier(.4,0,.2,1) 1.15s both}
.rez-layer.an .rez-kopf{animation:rez-auf .6s ease .5s both}
body.layer-offen{overflow:hidden}
body.layer-offen .kopf{transform:translateY(-115%)}
@media (prefers-reduced-motion:reduce){
  .rez-layer{transition:none}
  .rez-inhalt > *,.rez-layer.an .rez-inhalt > *{opacity:1;animation:none}
  .rez-layer.an .rez-text mark{animation:none;background-size:100% 1.06em;color:#F0FD9C}
}

/* Schieber (seit 21.09.): Unter 860 px werden Rezensionen und Projekte
   zu einer Spur, die man seitwärts wischt — eine Karte je Bild, die
   nächste lugt am Rand hervor. Darunter zeigt eine Punktreihe, wo man
   ist; die Punkte sind anklickbar. Der Browser rastet die Karten selbst
   ein (scroll-snap), das Skript zählt nur mit. */
.tupfen{display:none;justify-content:center;gap:.8rem;margin-top:clamp(1.8rem,4.5vh,2.6rem)}
/* color:inherit ist Pflicht — iOS Safari gibt Knöpfen sonst Systemblau,
   und die Punkte zeichnen sich aus currentColor (Hinweis 21.09.). */
.tupfen button{
  appearance:none;border:0;padding:0;cursor:pointer;width:8px;height:8px;border-radius:50%;color:inherit;
  background:currentColor;opacity:.28;transition:opacity .3s ease,transform .3s ease;
}
.tupfen button.an{opacity:1;transform:scale(1.25)}
.tupfen button:focus-visible{outline:1.5px solid currentColor;outline-offset:3px}
@media (max-width:860px){
  .tupfen{display:flex}
  .stimmen{
    display:flex;align-items:stretch;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand);scroll-padding-inline:var(--rand);
  }
  /* Auslauf als echtes Flex-Kind — ein Polster rechts zählt der Browser im
     Rollbereich nicht mit; ohne Auslauf rastete die letzte Karte 1,5 rem zu
     weit rechts ein (Screen 21.09.). */
  .stimmen::after{content:"";flex:0 0 1.5rem}
  .stimmen::-webkit-scrollbar{display:none}
  .stimme{flex:0 0 calc(100% - 1.5rem);scroll-snap-align:start}
  /* Die Karten rechts liegen außerhalb des Fensters und würden erst beim
     Wischen einblenden — deshalb hier ohne Aufbau. */
  .stimme.auf{opacity:1;transform:none}
}

/* ============ 08 LOGOS — laufende Leiste ============
   Läuft von allein weiter und bekommt beim Scrollen Schub. Mehrere
   gleiche Züge hintereinander, verschoben wird um genau eine Zugbreite —
   dadurch bleibt der Umschlag unsichtbar. Die Maske an den Rändern
   verhindert, dass Logos an der Kante abgeschnitten wirken. */
.leiste{
  display:flex;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.zug{
  display:flex;flex-shrink:0;align-items:center;
  gap:clamp(2.6rem,6.5vw,6rem);padding-right:clamp(2.6rem,6.5vw,6rem);
  will-change:transform;
  /* Jeder Zug wandert um genau seine eigene Breite nach links. Weil alle
     Züge gleich sind und im Gleichtakt laufen, ist der Umschlag unsichtbar.
     Die Dauer setzt das Skript aus der gemessenen Breite — so bleibt das
     Tempo gleich, egal wie breit der Zug auf dem jeweiligen Gerät ist. */
  animation:leiste-laeuft var(--zug-dauer,42s) linear infinite;
}
@keyframes leiste-laeuft{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-100%,0,0)}
}
/* Auf gleiche Höhe gebracht, nicht auf gleiche Breite — sonst wirken
   breite Logos groß und quadratische verloren. */
/* Größer gesetzt (Feedback 02.09., nachgeschärft 03.09.): die Marken
   sollen lesbar sein, nicht nur als Reihe erkennbar.
   Die Logos liegen weiß auf durchsichtigem Grund. Sobald die Bühne
   hell wird — auch während der Übergang läuft — kehrt --logo-dreh sie
   um, sonst verschwänden sie in der weißen Fläche. Die Umkehr läuft
   im selben Takt wie der Farbwechsel. */
.zug img{
  height:clamp(52px,6.4vw,96px);width:auto;max-width:330px;object-fit:contain;
  flex-shrink:0;opacity:.82;
  filter:var(--logo-dreh,none);
  transition:opacity .4s ease,filter .7s cubic-bezier(.4,0,.2,1);
}
.zug img:hover{opacity:1}
/* Ohne Bewegung: die Leiste lässt sich von Hand schieben, statt zu laufen. */
@media (prefers-reduced-motion:reduce){
  .zug{animation:none}
  .leiste{
    overflow-x:auto;mask-image:none;-webkit-mask-image:none;
    padding-inline:var(--kante);
  }
}

/* ============ 09 PERSON ============ */
/* Die Werte stehen unter der Schaltfläche und schließen unten bündig
   mit dem Bild ab (Feedback 02.09.) — dafür wird die Textspalte auf
   volle Höhe gezogen und die Werteliste nach unten gedrückt.
   Seit 03.09. keine Pillen mehr, sondern Schlagworte mit Raute: das
   liest sich als Haltung statt als Etikettenreihe. */
.person{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:stretch}
.person-spalte{display:flex;flex-direction:column}
.person-bild{position:relative;overflow:hidden;border-radius:2px}
/* Drei Aufnahmen, die sich abwechseln — wie im Bildfenster oben. Das erste
   Bild bleibt im Fluss und gibt der Kachel ihre Höhe, die beiden anderen
   liegen darüber. */
.person-bild img{
  width:100%;height:100%;min-height:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 32%;
  /* derselbe langsame Zug wie im Kopfbereich (04.09.) */
  opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease,transform 5.5s ease;
}
.person-bild img.sichtbar{transform:scale(1)}
/* Der Zähler steht wie oben in der unteren Ecke. */
.person-bild .fenster-nr{left:.9rem;bottom:.8rem}
.person-bild img + img{position:absolute;inset:0;min-height:0}
.person-bild img.sichtbar{opacity:1}
.person .taste{align-self:flex-start;margin-top:clamp(2.2rem,5vh,3.4rem)}
.werte{
  display:flex;flex-wrap:wrap;gap:.5em clamp(1.1rem,2.6vw,1.9rem);
  margin:auto 0 0;padding:clamp(1.6rem,4vh,2.6rem) 0 0;list-style:none;
}
.werte li{
  font-family:"Google Sans",sans-serif;font-weight:500;
  font-size:var(--t-gross);
  letter-spacing:0;line-height:1.2;
  border:0;border-radius:0;padding:0;
}
.werte li::before{content:"#";opacity:1;margin-right:.12em}
.person .lauf{margin-block:0}
.person .lauf + .lauf{margin-top:1em}
@media (max-width:860px){
  .person{grid-template-columns:1fr}
  .person-bild img{height:auto;min-height:0}
  .werte{margin-top:0;padding-top:clamp(1.4rem,3vh,2rem)}
}

/* ============ 10 ABSCHLUSS ============ */
.schluss{min-height:88svh;display:flex;flex-direction:column;justify-content:center}
.schluss h2{margin-bottom:clamp(1.2rem,3vh,2rem)}
.schluss .lauf{margin-block:0}
.schluss .lauf + .lauf{margin-top:1em}
.schluss .hero-unten{margin-top:clamp(2.2rem,5vh,3.4rem)}
.foerder{
  margin-top:clamp(2.5rem,6vh,4rem);max-width:none;
  font-size:var(--t-klein);opacity:var(--deck-neben);
}

/* ============ FUSS ============ */
.fuss{padding:var(--sek) var(--rand) var(--sek-halb)}
.fuss-raster{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3.5vw,3rem);
}
.fuss h4{
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;opacity:var(--deck-bei);margin:0 0 1rem;
}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
/* Adresse, Telefon und Mail stehen in derselben Größe (Wunsch 04.09.) —
   vorher war die Adresse als reiner Text größer als die beiden Verweise.
   Im Fuß steht seither alles voll deckend: gedämpfte Stufen wirken dort
   wie ein Versehen, weil kein Haupttext daneben steht, von dem sie sich
   absetzen könnten. */
.fuss li,.fuss a{font-size:var(--t-normal);opacity:1}
.fuss h4 a{font-size:inherit} /* der Verweis in der Spaltenüberschrift „Leistungen“ bleibt in Überschriftsgröße */
.fuss h4,.fuss-unten{opacity:1}
.fuss a{text-decoration:none;transition:opacity .3s ease}
.fuss a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* Anschrift, Telefon und Mail als ein Block — vorher standen die drei
   Angaben mit demselben Abstand untereinander wie eigene Listenpunkte
   und zerfielen dadurch (Hinweis 04.09.). */
.anschrift{line-height:1.75}
.anschrift a{display:inline-block}
/* Die beiden Netzwerke ohne Wort, als Scheiben in der Hausfarbe. Gelb
   trägt den Kreis, das Zeichen darin nimmt die Bühnenfarbe an — auf dem
   schwarzen Fuß also Gelb außen, Schwarz innen. */
.netz{display:flex;flex-wrap:wrap;gap:.7rem}
.netz a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--akzent);color:var(--bg);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .3s ease;
}
.netz a:hover,.netz a:focus-visible{transform:translateY(-3px)}
.netz svg{width:1.25rem;height:1.25rem;flex:none}
/* Unterzeile (21.09., vierte Runde): links © und die Rechtslinks in einer
   Größe, rechts das BNI-Mitgliedslogo. Das Logo ist eine lokale Datei
   (bilder/bni.svg) und wird als Maske gezeichnet — so nimmt es die
   Fußfarbe an, ob Schwarz, Weiß oder Gelb. */
.fuss-unten{
  max-width:var(--max);margin:clamp(2.5rem,6vh,4rem) auto 0;
  padding-top:1.3rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:1rem 2rem;
  font-size:var(--t-klein);
}
@media (max-width:860px){.fuss-unten{flex-wrap:wrap}}
.fuss-recht{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.3rem}
.fuss-unten a,.fuss-recht span{font-size:inherit;opacity:var(--deck-neben)}
.fuss-unten a:hover{opacity:1}
/* Rechts in der Unterzeile: BNI-Logo, daneben LinkedIn und Instagram
   (fünfte Runde 21.09.). */
.fuss-zeichen{display:flex;align-items:center;gap:clamp(1.2rem,2.5vw,2rem);margin-left:auto;flex:none}
/* BNI-Logo und die beiden Netzwerk-Scheiben sind gleich hoch: 32 px
   (achte Runde 21.09.). Die Scheiben tragen die Akzentfarbe, das Zeichen
   darin die Bühnenfarbe — auf dem gelben Fuß also Schwarz mit Gelb. */
.fuss-bni{
  display:block;height:2rem;aspect-ratio:306/33;
  background:currentColor;
  -webkit-mask:url(/bilder/bni.svg) no-repeat center/contain;
          mask:url(/bilder/bni.svg) no-repeat center/contain;
}
/* Scheiben 40 px, voll deckend — die gedämpfte Stufe der Rechtslinks
   (.fuss-unten a) gilt hier nicht, sonst wirken sie grau. BNI bleibt 32 px. */
.fuss-zeichen .netz{gap:.7rem}
.fuss-zeichen .netz a{width:2.5rem;height:2.5rem;opacity:1}
.fuss-zeichen .netz a:hover{opacity:1}
.fuss-zeichen .netz svg{width:1.2rem;height:1.2rem}
/* Mobil (Wunsch 21.09.): das Logo in einer eigenen Zeile, darunter
   „Leistungen“ und „Mehr“ nebeneinander, „Kontakt“ wieder über die volle
   Breite. Die Links rücken enger zusammen. */
@media (max-width:860px){
  .fuss-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,5vh,2.6rem) 1.5rem}
  .fuss-raster > div:first-child,.fuss-raster > div:last-child{grid-column:1 / -1}
  .fuss h4{margin-bottom:.6rem}
  .fuss ul{gap:.3rem}
  .fuss .marke svg{width:min(100%,270px)} /* im Fuß darf das Logo größer stehen als in der Kopfzeile */
}
/* BNI kleiner, sonst passen LinkedIn und Instagram nicht mehr daneben
   (Hinweis 21.09.): 32 px hoch wäre das Logo fast 300 px breit. */
@media (max-width:640px){
  /* © · Impressum · Datenschutz · AGB in einer Zeile, engere Abstände;
     BNI links, LinkedIn und Instagram rechts (Wunsch 21.09.). */
  .fuss-recht{flex-wrap:nowrap;gap:.85rem;white-space:nowrap}
  .fuss-zeichen{width:100%;margin-left:0;justify-content:space-between;gap:1rem}
  .fuss-bni{height:1.3rem}
  .fuss-zeichen .netz a{width:2.25rem;height:2.25rem}
  .fuss-zeichen .netz svg{width:1.05rem;height:1.05rem}
}
/* Auf ganz schmalen Telefonen (360 px) reicht die Zeile nur eine Stufe kleiner. */
@media (max-width:400px){.fuss-unten{font-size:.78rem}}

/* ---------- Scroll-Hinweis ---------- */
.hinweis{
  position:fixed;right:var(--rand);bottom:1.6rem;z-index:50;
  display:flex;align-items:center;gap:.6rem;
  font-family:"Google Sans",sans-serif;font-weight:500;
  font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;
  color:var(--fg);transition:opacity .5s ease,color .7s ease;
}
.hinweis .pfeil{animation:tick 1.9s ease-in-out infinite}
@keyframes tick{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hinweis.aus{opacity:0;pointer-events:none}
@media (max-width:720px){.hinweis{display:none}}

/* ---------- Telefon ----------
   Die Abschnittsabstände hängen an vh und werden auf hohen, schmalen
   Bildschirmen zu groß: 11 vh sind dort fast 100 px oben und unten,
   also rund 200 px zwischen zwei Abschnitten. Hier rücken sie
   zusammen (Wunsch 03.09.). */
/* Unter 380 px reicht die Breite für die neue Größe nicht mehr: Zeilen
   wie „und Kunden sagen" brächen dann innerhalb ihrer Maske um. Dort
   gilt weiter der frühere Anschlag. */
@media (max-width:380px){
  :root{--h-gross:clamp(2rem,5.6vw,5.4rem)}
}

@media (max-width:640px){
  :root{--sek:clamp(3rem,6.5vh,4.5rem);--sek-halb:2rem;--innen:clamp(1.6rem,4vh,2.5rem)}
  .hero{padding-top:clamp(6rem,12vh,8rem);padding-bottom:clamp(1rem,3vh,2rem)}
  .problem-kopf{margin-bottom:clamp(2.5rem,7vh,4.5rem)}
  .folgerung{margin-top:clamp(3rem,8vh,5rem)}
  .folgerung br{display:none} /* mobil natürlich umbrechen — mit festem Umbruch stand „Kampagne,“ allein (Screen 21.09.) */
  .beleg{margin-top:clamp(1.4rem,3.5vh,2.4rem);padding-top:clamp(.9rem,2vh,1.4rem)}
  /* Alle drei Zahlen in einer Zeile (Hinweis 21.09.): kein Umbruch, die
     Luft dazwischen verteilt sich, innen enger. */
  .beleg{flex-wrap:nowrap;justify-content:space-between;gap:.4rem}
  .beleg div{gap:.3rem;flex:none}
  .beleg b{font-size:1.2rem} /* eine Stufe kleiner, sonst reicht die Zeile bei 375 px nicht */
  .schluss{min-height:0}
  /* Mit der einheitlichen Zwischenüberschrift (03.09.) brauchen die vier
     Bänder etwas weniger Luft, sonst läuft der Abschnitt über die
     Bildschirmhöhe hinaus. */
  .ebene{padding-block:clamp(.4rem,1.3vh,1.2rem)}
  .modell-halt{gap:1.15rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .satz .marke{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .zeile>i{transform:none}
  .auf{opacity:1;transform:none}
  .spaeter{opacity:1;transform:none}
  .ebene{opacity:1;transform:none}
  .ebene::before{transform:scaleY(1)}
}


/* ============================================================
   UNTERSEITEN — Module (seit 21.09.2026)
   Alles davor stammt wörtlich aus entwurf_v4.html und wird beim Bau
   (bau/bau.py) von dort übernommen. Ab hier stehen nur die Module,
   die die Unterseiten zusätzlich brauchen.
   ============================================================ */

.seite main{min-height:60vh}
/* Ein Raster für alle Unterseiten (21.09., Wunsch Ina: „Bündigkeit der
   zweiten Spalten“): zwei gleich breite Spalten mit demselben Spalt — Bild
   im Seitenkopf, „Für wen“, Ausgangslage, Angebote, Ergebnisbox, Ablauf und
   Projekthinweis beginnen ihre zweite Spalte auf derselben Kante. */
.seite{--spalt:clamp(1.6rem,4vw,4rem)}

/* Aufruf-Reihe wie im Kopfbereich der Startseite */
.hero-unten{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:clamp(1.6rem,4vh,2.6rem)}

/* ---------- Brotkrume ----------
   Weiß, oben im Seitenkopf auf der Oberkante des Bildes (21.09.). */
.brot{
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:.6em;margin:0 0 var(--innen);
}
.brot a{text-decoration:none}
.brot a:hover{text-decoration:underline;text-underline-offset:4px}
.brot span[aria-hidden]{opacity:var(--deck-bei)}

/* ---------- Seitenkopf ---------- */
/* Oben nur so viel, dass die Kopfzeile frei bleibt (wie der Kopfbereich der
   Startseite); unten mehr Luft — austariert 21.09. */
/* Unten weniger als --sek: bei 820 px Höhe rund 65 statt 90 px (22.09., Ina:
   „fast ein bisschen zu groß“). Der Platzhalter des Bildes rechnet mit
   demselben Wert, damit der Seitenkopf weiter genau im ersten Bildschirm endet. */
.seitenkopf{--kopf-unten:clamp(3.5rem,8vh,6rem);padding-top:var(--kopf-oben);padding-bottom:var(--kopf-unten)}
.seitenkopf .kicker{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
.seitenkopf .lauf{margin:clamp(1.4rem,3.5vh,2.2rem) 0 0}
/* Projektseiten: Einleitung und der Satz „Claudia Jung …“ ohne Abstand,
   kompakter (Ina, 22.09.). */
.projekt .seitenkopf .lauf+.lauf{margin-top:0}
.seitenkopf-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.seitenkopf.mit-bild .seitenkopf-innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spalt);align-items:stretch}
/* Mit Bild: Brotkrume oben auf der Bildkante, Überschrift unten auf der Bildunterkante. */
.seitenkopf-text{display:flex;flex-direction:column}
.seitenkopf.mit-bild .seitenkopf-unten{margin-top:auto}
/* Die Bildhöhe kommt von einem Platzhalter (::before): 4:5 zur Spaltenbreite,
   aber nie höher als der erste Bildschirm minus Kopf- und Fußluft — sonst
   rutscht die Überschrift, die auf der Bildunterkante sitzt, unter den Falz
   (22.09., Ina: „unten kein Abstand, Text verschwindet“). Ist die Textspalte
   höher (Projektseiten), wächst die Figur mit ihr; das Bild liegt absolut
   darin und object-fit schneidet zu. Kein aspect-ratio auf der Figur selbst:
   die Begrenzung würde sonst auf die Breite übertragen und die Spalte schmaler. */
.seitenkopf-bild{margin:0;position:relative;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.04)}
.seitenkopf-bild::before{content:"";display:block;aspect-ratio:4/5;
  max-height:max(calc(100svh - var(--kopf-oben) - var(--kopf-unten)),22rem)}
.seitenkopf-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.9;
  transition:filter .9s cubic-bezier(.4,0,.2,1),opacity .6s ease}
/* Das Projektbild kommt in Schwarzweiß und färbt sich, sobald es steht —
   dieselbe Regel wie bei den Karten der Startseite, nur ohne Überfahren. */
.seitenkopf-bild.an img{filter:grayscale(0);opacity:1;transition-delay:.7s}
.seitenkopf-bild figcaption{
  position:absolute;left:.9rem;bottom:.8rem;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;opacity:.7;
}
@media (max-width:860px){
  .seitenkopf.mit-bild .seitenkopf-innen{grid-template-columns:1fr}
  .seitenkopf-bild::before{aspect-ratio:16/11;max-height:52vh}
}

/* ---------- Textblöcke (Projektseite) ---------- */
.bloecke .innen{display:flex;flex-direction:column;gap:clamp(2.6rem,6vh,4.5rem)}
.block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.2rem,3vw,3rem);align-items:start}
.block .nr{margin:0;padding-bottom:.9rem;border-bottom:0}
.block .nr span{opacity:1;font-weight:700}
.block-text{max-width:38em;font-size:var(--t-normal);line-height:1.6}
.block-text p{margin:0}
.block-text p+p{margin-top:1em}
@media (max-width:720px){.block{grid-template-columns:1fr;gap:1rem}}

/* ---------- Aufruf (gelb) ---------- */
.aufruf{min-height:0}
.aufruf-innen{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.aufruf .kicker{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
/* Eine Stufe unter der Seitenüberschrift (Check 21.09.): „Ihre Marke
   sprechen.“ brach in der 1,4fr-Spalte ab 1440 px auf eine dritte Zeile. */
.aufruf h2.gross{font-size:clamp(2.45rem,4.7vw,4.4rem)}
.aufruf .lauf{margin:clamp(1.2rem,3vh,2rem) 0 0}
.aufruf .beiwerk{font-size:var(--t-klein);line-height:1.6;opacity:var(--deck-neben);justify-self:end;text-align:right}
.aufruf .beiwerk a{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){
  .aufruf-innen{grid-template-columns:1fr}
  .aufruf .beiwerk{justify-self:start;text-align:left}
}

/* ---------- ← → · Alle Projekte ----------
   Seit 21.09. (Wunsch) ohne die Wörter „Voriges/Nächstes Projekt“: links
   die beiden Pfeile, rechts „Alle Projekte“ — dezenter. Die Richtung
   steht für Vorleser im aria-label. */
.weiter{padding-block:var(--sek-halb)}
.weiter .weiter-innen{border-top:1px solid var(--linie);padding-top:clamp(2rem,5vh,3rem)}
.weiter-innen{display:flex;justify-content:space-between;align-items:center;gap:clamp(1.2rem,3vw,3rem)}
.weiter-pfeile{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.2rem)}
.weiter-link{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;
}
.weiter-link .pf{display:inline-flex;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.weiter-link .pf-zurueck{transform:rotate(180deg)}
.weiter-link:hover .pf{transform:translateX(6px)}
.weiter-link:hover .pf-zurueck{transform:rotate(180deg) translateX(6px)}
/* Die Pfeile allein bekommen eine größere Trefffläche (Berührung). */
.weiter-pfeile .weiter-link{padding:.5rem;margin:-.5rem}
.weiter-link.mitte{opacity:var(--deck-bei)}
.weiter-link.mitte:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* ---------- Projektübersicht ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,5vh,3.4rem)}
.filter button{
  appearance:none;cursor:pointer;background:transparent;color:inherit;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;
  border:1px solid var(--rahmen);border-radius:999px;padding:.7em 1.3em;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.filter button:hover{border-color:currentColor}
.filter button.an{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2.4rem) clamp(1rem,2vw,2rem)}
.kachel{display:flex;flex-direction:column;gap:1rem;text-decoration:none;min-width:0}
.kachel[hidden]{display:none}
.kachel-bild{aspect-ratio:1/1;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.04)}
.kachel-bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.92;
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.4,0,.2,1),opacity .5s ease}
.kachel:hover .kachel-bild img,.kachel:focus-visible .kachel-bild img{transform:scale(1.05);filter:grayscale(0);opacity:1}
.kachel .kicker{opacity:var(--deck-bei)}
.kachel h3{margin:.35rem 0 0;font-size:var(--h-karte);line-height:1.1}
.kachel .unter{margin:.35rem 0 0;font-size:var(--t-klein);opacity:var(--deck-neben);line-height:1.45}
@media (max-width:1000px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.kacheln{grid-template-columns:1fr}}

/* ---------- Lesetext (Impressum, Datenschutz) ---------- */
.prosa{max-width:44em;font-size:var(--t-normal);line-height:1.6}
.prosa h2{font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--h-karte);line-height:1.1;letter-spacing:-.02em;margin:clamp(2.4rem,5vh,3.4rem) 0 .8rem;text-wrap:pretty}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;margin:2rem 0 .6rem}
.prosa p{margin:0 0 1em}
.prosa ul{padding-left:1.2em;margin:0 0 1em}
.prosa li{margin-bottom:.4em}
.prosa a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(17,16,20,.35)}
.prosa a:hover{text-decoration-color:currentColor}
.prosa address{font-style:normal;line-height:1.75;margin:0 0 1.4em}
.prosa .hinweis-kasten{border:1px solid var(--rahmen);border-radius:3px;padding:1rem 1.2rem;font-size:var(--t-klein);opacity:var(--deck-neben);margin:0 0 2rem}
.prosa .inhalt{columns:2;column-gap:2rem;padding:0;list-style:none;margin:0 0 2rem}
.prosa .inhalt li{break-inside:avoid;margin-bottom:.35em}
.prosa .inhalt a{text-decoration:none}
.prosa .inhalt a:hover{text-decoration:underline}
@media (max-width:600px){.prosa .inhalt{columns:1}}
.prosa .quelle{font-size:var(--t-klein);opacity:var(--deck-bei);margin-top:3rem}

/* ---------- Digitale Visitenkarte ----------
   Eigener Präfix (21.09.): „karte-bild“ gehört den Projektkarten der Startseite —
   mit dem gemeinsamen Stylesheet färbten die Regeln von hier dort ab. */
.visitenkarte-sek{padding-top:var(--kopf-oben);padding-bottom:var(--sek);min-height:100svh;display:flex;align-items:center}
.visitenkarte-innen{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.visitenkarte-text .kicker{margin-top:0;line-height:1}
/* Bild rechts, Text links (21.09.) — im Markup bleibt das Bild vorn. */
.visitenkarte-bild{order:2;justify-self:end;width:100%}
@media (max-width:860px){.visitenkarte-bild{order:0}}
.visitenkarte-bild{margin:0;overflow:hidden;border-radius:2px;aspect-ratio:2/3;max-height:70vh;background:rgba(255,255,255,.04)}
.visitenkarte-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.visitenkarte-text .kicker{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
.visitenkarte-text .lauf{margin:clamp(1.2rem,3vh,2rem) 0 0}
.wege{list-style:none;margin:clamp(1.8rem,4vh,2.6rem) 0 0;padding:0;border-top:1px solid var(--linie)}
.wege li{border-bottom:1px solid var(--linie)}
.wege a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1.5rem;padding:1rem 0;text-decoration:none}
.wege .kicker{opacity:var(--deck-bei)}
.wege-wert{font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-gross);letter-spacing:-.01em}
.wege a:hover .wege-wert{text-decoration:underline;text-underline-offset:5px}
.visitenkarte-text .klein{margin:1.2rem 0 0;opacity:var(--deck-bei);max-width:38em}
@media (max-width:860px){
  .visitenkarte-innen{grid-template-columns:1fr}
  .visitenkarte-bild{aspect-ratio:4/5;max-height:52vh}
  .visitenkarte-sek{min-height:0}
}

/* ---------- Leistungsseite ---------- */
.anlaesse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt)}
.anlass h3{margin:0 0 .6em}
.anlass p{margin:0;max-width:34em;font-size:var(--t-normal);line-height:1.55;color:color-mix(in srgb,var(--fg) 82%,transparent)}
.wo{border-top:1px solid var(--linie);padding-top:clamp(1.6rem,3.5vh,2.4rem)}
.wo h3{margin:0 0 1.2em}
.wo-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.4rem)}
.wo-liste li{display:flex;flex-direction:column;gap:.6rem}
.wo-liste q{quotes:"„" "“";font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-gross);line-height:1.3;letter-spacing:-.01em}
.wo-liste .ziel{font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;opacity:var(--deck-bei);text-decoration:none}
a.ziel:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.wo-liste .ziel.hier{opacity:1;color:var(--schwarz);background:var(--gelb);padding:.15em .5em;align-self:flex-start}
@media (max-width:860px){.anlaesse,.wo-liste{grid-template-columns:1fr}}

/* ---------- Ausgangslage (Umbau 21.09.) ----------
   Leitsatz · Lauftext neben dem Zitat · Angebote · Ergebnisbox.
   Eine Hierarchie statt sechs gleich lauter Blöcke; Gelb genau einmal,
   bei der Ergebnisbox. */
.ausgang{margin-bottom:clamp(3rem,7vh,5rem)}
.leitsatz{
  margin:0 0 clamp(2.2rem,5vh,3.4rem);max-width:22em;
  font-family:"Google Sans",sans-serif;font-weight:500;letter-spacing:-.015em;
  font-size:var(--h-zwischen);line-height:1.25;text-wrap:pretty;
}
.ausgang-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spalt);align-items:start}
.ausgang-raster.allein{grid-template-columns:minmax(0,1fr)} /* Markenidentität hat kein Zitat */
.ausgang-text .lauf{margin:0;max-width:34em}
.ausgang-text .lauf+.lauf{margin-top:1em}
/* Zitat: großes Anführungszeichen wie in Abschnitt 02 der Startseite, darunter der Absender. */
.ausgang-zitat{
  margin:-1.25rem 0 0; /* etwas höher als die Textkante (Ina 21.09.) */
  padding-left:clamp(2rem,7vw,7rem); /* deutlich eingerückt (Ina 21.09.: „ruhig noch weiter nach rechts“) */
  display:flex;flex-direction:column;gap:clamp(1rem,2.5vh,1.6rem);
}
.ausgang-zitat .marke{
  font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--anf);line-height:.72;
  display:block;margin-left:-.07em;user-select:none;animation:schweben 6.2s ease-in-out infinite;transform-origin:60% 40%;
}
.ausgang-zitat p{
  margin:0;max-width:15em; /* am Absatz, nicht am Rahmen — dort maß das em die Grundschrift und ließ nur 320 px zu */
  font-family:"Google Sans",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:var(--h-zwischen);line-height:1.15;text-wrap:pretty;
}
.ausgang-zitat footer{margin:0;opacity:var(--deck-bei)}
/* Angebote als Kacheln: Linie oben, Titel, Text. */
.angebote-block{margin-bottom:clamp(3rem,7vh,5rem)}
.angebote-block > .kicker{margin:0 0 1.2rem;opacity:var(--deck-bei)}
.angebote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spalt)}
.angebot{border-top:1px solid var(--fg);padding-top:1.2rem}
.angebot h3{margin:0 0 .5em;font-size:var(--h-karte)}
.angebot h3 em{font-style:normal;color:var(--schwarz);background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 .09em/100% 1.04em;padding:0 .1em}
.angebot p{margin:0;font-size:var(--t-normal);color:color-mix(in srgb,var(--fg) 80%,transparent);line-height:1.55;max-width:34em}
/* Ergebnisbox: die eine Gelbfläche des Abschnitts. */
.danach-block{
  margin:0 0 clamp(3.5rem,8vh,6rem);max-width:none;
  background:var(--gelb);color:var(--schwarz);border-radius:3px;
  padding:clamp(1.6rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spalt);align-items:start;
}
.danach-block .zwischen{margin:0;font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--h-zwischen);line-height:1.1;letter-spacing:-.02em}
.danach{list-style:none;margin:0;padding:0;font-size:var(--t-normal);line-height:1.5}
.danach li{position:relative;padding-left:1.7em;margin:0 0 .6em}
/* Derselbe Pfeil wie bei den Verweisen auf die Leistungen, 45° nach rechts oben gedreht (Ina 21.09.). */
.danach .pf{position:absolute;left:0;top:.3em;display:inline-flex} /* etwas tiefer, auf die Mitte der ersten Zeile (Ina 21.09.) */
.danach .pf-svg{width:1.05em;height:auto}
.danach .pf-schraeg{transform:rotate(-45deg);transform-origin:50% 50%}
.foerder p{margin:0;max-width:34em;font-size:var(--t-normal);line-height:1.55}
@media (max-width:860px){
  .ausgang-raster,.danach-block,.angebote{grid-template-columns:1fr}
  .ausgang-zitat{padding-left:0}
  .ausgang-zitat{margin-top:clamp(1.5rem,4vh,2.5rem)}
}

.ablauf-nr{margin-top:0}
.schritte{list-style:none;margin:0;padding:0;counter-reset:schritt}
.schritte li{
  /* Ziffer + Titel füllen genau die erste Spalte des Rasters, der Text beginnt auf der zweiten Kante. */
  display:grid;grid-template-columns:4.5rem calc(50% - 4.5rem - 1.5 * var(--spalt)) minmax(0,1fr);gap:var(--spalt);align-items:baseline;
  padding-block:clamp(1.2rem,2.5vh,1.8rem);border-bottom:1px solid var(--linie);
}
/* keine obere Linie — die Nummernzeile darüber hat schon eine */
.schritte .z{font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--zaehler);opacity:var(--deck-bei);font-variant-numeric:tabular-nums}
.schritte h3{margin:0;font-size:var(--h-karte);line-height:1.15}
.schritte p{margin:0;font-size:var(--t-normal);color:color-mix(in srgb,var(--fg) 78%,transparent);line-height:1.5}
@media (max-width:720px){.schritte li{grid-template-columns:3rem minmax(0,1fr)}.schritte p{grid-column:2}}

.projekt-hinweis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spalt);align-items:center;text-decoration:none}
.projekt-hinweis-bild{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.04);max-height:60vh}
.projekt-hinweis-bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.9;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.4,0,.2,1),opacity .5s ease}
.projekt-hinweis:hover .projekt-hinweis-bild img{transform:scale(1.04);filter:grayscale(0);opacity:1}
.projekt-hinweis .kicker{opacity:var(--deck-bei);margin-bottom:1rem}
.projekt-hinweis h3.gross{font-size:var(--h-zwischen);margin:0 0 .8em}
.projekt-hinweis .lauf{margin:0 0 1.6rem;font-size:var(--t-normal)}
@media (max-width:720px){.projekt-hinweis{grid-template-columns:1fr}.projekt-hinweis-bild{aspect-ratio:16/11}}

.fragen{border-top:0} /* die Nummernzeile darüber trägt schon eine Linie */
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding-block:clamp(1rem,2.5vh,1.5rem);
  font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--h-karte);line-height:1.2;letter-spacing:-.01em;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";flex:none;font-weight:400;font-size:1.4em;line-height:1;transition:transform .3s ease}
/* Mit Skript (basis.js, Abschnitt 9) klappt die Antwort weich auf; das
   Plus dreht dann über .offen, weil [open] beim Zuklappen erst nach der
   Bewegung fällt. Ohne Skript gilt weiter [open]. */
.frage[open]:not(.js) summary::after,.frage.offen summary::after{transform:rotate(45deg)}
.frage.js{overflow:hidden}
.frage .antwort{padding:0 0 clamp(1.2rem,3vh,1.8rem);max-width:38em;font-size:var(--t-normal);line-height:1.55;color:color-mix(in srgb,var(--fg) 82%,transparent)}
.frage .antwort p{margin:0}
.frage .antwort p+p{margin-top:.8em}
.aufruf .nebenweg{margin:1.2rem 0 0;font-size:var(--t-klein);opacity:var(--deck-neben)}
.aufruf .nebenweg a{text-decoration:underline;text-underline-offset:4px}

/* ---------- Über mich ---------- */
/* Seit der neunzehnten Runde im Grundmaß wie alle Seiten. */
/* Die Haltung: groß, fett, über gut drei Viertel der Breite. */
/* Etwas kleiner als die großen Überschriften (Wunsch 21.09., vierte Runde). */
.haltung{
  margin:clamp(1.5rem,4vh,3rem) 0 0;max-width:75%;
  font-family:"Google Sans",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:var(--h-mittel);line-height:1.22;text-wrap:balance;
}
@media (max-width:860px){.haltung{max-width:none}}
.haltung em{font-style:normal;color:var(--schwarz);background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 .09em/100% 1.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .1em}
.herkunft .lauf{margin:0}
.herkunft .lauf+.lauf{margin-top:1em}
/* Werte-Band: die fünf Werte als große gelbe Worte mit Raute, laufen auf
   Schwarz von rechts nach links. Kein Bild dahinter (21.09.). Hält nur an,
   wenn der Zeiger direkt auf einem Wort steht — nicht auf der Fläche. */
.band{position:relative;overflow:hidden;padding-block:var(--sek-halb);display:flex;align-items:center}
.band-spur{position:relative;display:flex;width:max-content;animation:band-lauf 38s linear infinite;will-change:transform}
.band-zug{display:flex;flex:none;gap:.55em;padding-right:.55em;white-space:nowrap;color:var(--gelb);
  font-family:"Google Sans",sans-serif;font-weight:700;letter-spacing:-.035em;font-size:clamp(2.6rem,7vw,7rem);line-height:1.1}
.band-zug span{cursor:default}
@keyframes band-lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.band-spur{animation:none}}
.band-spur:has(span:hover){animation-play-state:paused}

.name{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.name h2{margin-bottom:clamp(1.4rem,3.5vh,2.2rem)}
.name .lauf{margin:0}
.name .lauf+.lauf{margin-top:1em}
.nebenbei{
  margin:clamp(1.8rem,4vh,2.6rem) 0 0;
  font-family:"Google Sans",sans-serif;font-weight:700;letter-spacing:-.025em;
  font-size:var(--h-zwischen);line-height:1.15;
}
.nebenbei em{font-style:normal;color:var(--schwarz);background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 .09em/100% 1.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .1em}
.bruecke{margin-top:clamp(1.2rem,3vh,1.8rem) !important;opacity:var(--deck-neben)}
.bruecke a{text-decoration:underline;text-underline-offset:4px}
.name-bild{margin:0;overflow:hidden;border-radius:2px;aspect-ratio:2/3;background:rgba(255,255,255,.04)}
.name-bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.9;transition:filter .9s cubic-bezier(.4,0,.2,1),opacity .6s ease}
.name-bild.an img{filter:grayscale(0);opacity:1;transition-delay:.5s}
@media (max-width:860px){.name{grid-template-columns:1fr}.name-bild{aspect-ratio:4/5;max-height:52vh}}
.team h2{margin-bottom:clamp(1.4rem,3.5vh,2.2rem)}
.team .lauf{margin:0}

/* ---------- Leistungsübersicht ----------
   Die drei Zeilen sind seit 21.09. (neunte Runde) eins zu eins die Zeilen
   aus Abschnitt 04 der Startseite (.leist a): gleiche Größen, Abstände,
   Füllung beim Überfahren, gleitender Pfeil. Das Einblenden läuft über
   eigene Übergänge für Deckkraft und Lage — vorher überschrieb der
   Hover-Übergang der Zeile den von .auf, und die Zeilen sprangen herein. */
.uebersicht{border-top:0} /* die Nummernzeile darüber trägt schon eine Linie */
.ue-zeile{
  --d:0s;--pad:clamp(.6rem,2vw,1.6rem);
  display:grid;grid-template-columns:clamp(2.5rem,6vw,5rem) minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"z kopf text pf";
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  border-bottom:1px solid var(--linie);padding-block:clamp(1.5rem,3.6vh,2.6rem);
  text-decoration:none;position:relative;isolation:isolate;
  transition:opacity 1s ease var(--d),transform .4s cubic-bezier(.16,1,.3,1),color .4s ease;
}
/* Beim Überfahren rückt die Zeile als Ganzes nach rechts (transform) statt
   innen Polster zu bekommen — so bleibt die Textbreite gleich und nichts
   bricht um (Wunsch 21.09., elfte Runde). Die Füllung beginnt links um das
   Maß außerhalb und endet rechts um dasselbe Maß früher, damit sie nach
   dem Versatz genau die Spalte deckt. */
.ue-zeile.auf{transform:translateY(26px)}
.ue-zeile.auf.an{transform:none;transition:opacity 1s ease var(--d),transform 1s cubic-bezier(.16,1,.3,1) var(--d),color .4s ease}
.ue-zeile.v2{--d:.18s}
.ue-zeile.v3{--d:.36s}
.ue-zeile::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--pad));right:var(--pad);z-index:-1;background:var(--akzent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.ue-zeile.an:hover,.ue-zeile.an:focus-visible{transform:translateX(var(--pad));transition:opacity 1s ease,transform .4s cubic-bezier(.16,1,.3,1),color .4s ease;color:var(--bg)}
.ue-zeile:hover::before,.ue-zeile:focus-visible::before{transform:scaleY(1)}
.ue-zeile .z{grid-area:z;font-family:"Google Sans",sans-serif;font-weight:700;font-size:var(--zaehler);opacity:var(--deck-bei);font-variant-numeric:tabular-nums;line-height:1}
.ue-zeile:hover .z{opacity:.85}
.ue-zeile > div{grid-area:kopf}
.ue-zeile h2.gross{font-size:var(--h-zwischen);line-height:1.05;letter-spacing:0;margin:0 0 .35em}
.ue-zeile .ue-frage{margin:0;max-width:none;font-size:var(--t-normal);line-height:1.55;opacity:var(--deck-neben);text-wrap:pretty}
.ue-zeile .ue-text{grid-area:text;margin:0;max-width:none;font-size:var(--t-normal);line-height:1.55;opacity:var(--deck-neben);text-wrap:pretty}
.ue-zeile .pf{grid-area:pf;display:inline-flex;align-self:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ue-zeile:hover .pf,.ue-zeile:focus-visible .pf{transform:translateX(8px)}
@media (max-width:900px){
  .ue-zeile{grid-template-columns:2.6rem minmax(0,1fr) auto;grid-template-areas:"z kopf pf" "z text pf";gap:.6rem clamp(.8rem,3vw,2rem)}
}
@media (max-width:720px){
  .ue-zeile{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kopf pf" "text pf"}
  .ue-zeile .z{display:none}
}
/* Die drei Sätze der Übersicht: Aufbau und Schweben aus Abschnitt 02 der
   Startseite (.saetze/.satz), darunter der Verweis auf die passende Seite. */
.saetze-ue{margin-bottom:clamp(3.5rem,8vh,6rem)}
.saetze-ue .satz{gap:clamp(1rem,2.2vh,1.5rem)}
.saetze-ue .satz p{flex:1}
.saetze-ue .ziel{font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);letter-spacing:var(--sperr);text-transform:uppercase;text-decoration:none;align-self:flex-start}
.saetze-ue .ziel:hover{text-decoration:underline;text-underline-offset:4px}
.aufruf .nebenweg{margin:1.2rem 0 0;text-align:right;justify-self:end}
@media (max-width:860px){.aufruf .nebenweg{text-align:left;justify-self:start}}

/* ---------- O-Ton auf der Projektseite ----------
   Sechster Block im Raster der fünf davor. Halbfett und größer als der
   Lesetext, mit den gelben Hervorhebungen der Startseite, die einlaufen. */
.oton .block-text{max-width:30em}
.oton-text{font-family:"Google Sans",sans-serif;font-weight:500;letter-spacing:-.015em;font-size:var(--zitat);line-height:1.32;text-wrap:pretty}
.oton mark{
  color:var(--schwarz);font-weight:inherit;
  background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 .09em/0% 1.04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0 .1em;margin:0 -.1em;
  transition:background-size 1.2s cubic-bezier(.4,0,.2,1) .45s;
}
.oton.an mark{background-size:100% 1.04em}
.oton-wer{
  display:flex;align-items:center;gap:.9rem;margin:clamp(1.6rem,3.5vh,2.4rem) 0 0 !important;
  font-family:"Google Sans",sans-serif;font-weight:500;font-size:var(--t-aus);
  letter-spacing:var(--sperr);text-transform:uppercase;line-height:1.5;
}
.oton-wer small{font-size:1em;font-weight:400;opacity:var(--deck-bei)}

/* ---------- Markencheck-Seite ---------- */
/* Brotkrume auf derselben Höhe wie im Seitenkopf der anderen Seiten (kein
   vertikales Zentrieren mehr), darunter direkt der Test. */
.markencheck-seite{padding-top:var(--kopf-oben);padding-bottom:var(--sek);min-height:100svh}