/* ==========================================================================
   Portfolio — Stylesheet
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
     1  Marken-Kontrakt (Farben, Schrift, Masse)   — hier wird gedreht
     2  Grundlagen (Reset, Grundtypografie, a11y)
     3  Bausteine (Knopf, Karte, Rubrik, Chip …)
     4  Huelle (Kopf, Fortschritt, Fuss)
     5  Abschnitte in der Reihenfolge der Seite
     6  Bewegung
     7  Enge Bildschirme

   Grundhaltung: Die Seite ist die Vitrine, nicht die Ware. Die Arbeiten
   bringen die Farbe mit — deshalb ist die Huelle dunkel und ruhig, und
   nur zwei Abschnitte kippen ins Helle, damit die Seite atmet.
   ========================================================================== */


/* == 1  MARKEN-KONTRAKT ================================================== */

:root{
  /* --- Flaechen, hell --------------------------------------------------
     Warmes Papier statt reinem Weiss: reines #FFF unter einer Textwand
     flimmert, ein Hauch Waerme nimmt das raus und wirkt gedruckt.        */
  --grund:        #FAF8F5;  /* Seitengrund                                 */
  --grund-hoch:   #FFFFFF;  /* angehobene Flaeche: Karten, Felder          */
  --grund-hoeher: #F1ECE4;  /* Flaeche auf Flaeche: Chat-Blasen, Reiter    */
  --grund-tief:   #EFE9DF;  /* eingelassen: Fuss, Codeflaechen             */
  --rand:         #E7E1D7;  /* Haarlinie, ruhig — rein zeichnerisch        */
  --rand-hell:    #8C8274;  /* Rahmen von Bedienelementen     3.56:1       */

  /* --- Schrift auf hell -------------------------------------------------
     Die Zahlen sind der SCHLECHTESTE Fall ueber alle vier Flaechen oben,
     nachgerechnet, nicht geschaetzt.                                      */
  --text:         #14171C;  /* Fliesstext & Ueberschriften   14.88:1       */
  --text-leise:   #4A515C;  /* Zweitrangiges                  6.63:1       */
  --text-still:   #5D646F;  /* Kleinlabels                    4.94:1       */

  /* --- Kehrseite: die zwei dunklen Abschnitte ---------------------------
     Frueher waren das die hellen Inseln auf dunklem Grund. Sie drehen mit,
     damit die Seite ihren Wechsel behaelt und nicht flach wird.           */
  --kehr:         #14171C;
  --kehr-hoch:    #1F2530;
  --kehr-rand:    #2B3442;
  --kehr-text:    #F2F5F8;  /* auf --kehr                    14.05:1       */
  --kehr-leise:   #AEB7C3;  /* auf --kehr                     7.59:1       */

  /* --- Akzente ----------------------------------------------------------
     Bernstein traegt die Seite, Mint gehoert allein den interaktiven
     Stellen (Regler, Chat, Umschalter).
     WICHTIG: Auf hellem Grund taugt das helle Bernstein nur als FLAECHE
     (dunkle Schrift darauf: 8.68:1). Als Schrift braucht es den dunklen
     Ton — sonst steht Gelb auf Weiss und niemand liest es.                */
  --akzent:       #F2A43A;  /* Flaeche; Schrift darauf #14171C  8.68:1     */
  --akzent-satt:  #E08C15;  /* Flaeche, betont (Hover)                     */
  --akzent-text:  #8A5405;  /* Bernstein als SCHRIFT          5.19:1       */
  --akzent-text-satt: #6E4204;  /* Schrift beim Ueberfahren   7.12:1       */

  /* Das Zeichen als Bild (dunkle Faecherblaetter, das mittlere hell) -- fuer die
     Rueckseite der Wertekarten und fuer den Kasten bei „Ueber mich", solange dort
     kein Foto steht (14.10.2026).                                         */
  --zeichen-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 38'%3E%3Cpath d='M0.682 22.721 A40 40 0 0 1 10.949 10.316 L28.507 33.447 A11 11 0 0 0 26.288 36.336 Z' fill='%2314171C'/%3E%3Cpath d='M12.701 8.986 A40 40 0 0 1 26.339 2.684 L32.575 31.047 A11 11 0 0 0 30.259 32.117 Z' fill='%2314171C'/%3E%3Cpath d='M28.488 2.212 A40 40 0 0 1 43.512 2.212 L37.276 30.574 A11 11 0 0 0 34.724 30.574 Z' fill='%23FAF8F5'/%3E%3Cpath d='M45.661 2.684 A40 40 0 0 1 59.299 8.986 L41.741 32.117 A11 11 0 0 0 39.425 31.047 Z' fill='%2314171C'/%3E%3Cpath d='M61.051 10.316 A40 40 0 0 1 71.318 22.721 L45.712 36.336 A11 11 0 0 0 43.493 33.447 Z' fill='%2314171C'/%3E%3C/svg%3E");

  /* Der Fokusring liegt mal auf hellem Grund, mal in einem --kehr-Abschnitt.
     Ein Ring, der nur auf einer von beiden Seiten sichtbar ist, waere keiner.
     #A66405 ist der Bernsteinton, der auf BEIDEN ueber 3:1 kommt:
     3.91:1 auf hell, 3.26:1 auf dunkel — nachgerechnet, nicht gewaehlt.   */
  --fokus:        #A66405;
  --kontra:       #6FD3C2;  /* Flaeche; Schrift darauf #14171C 10.07:1     */
  --kontra-text:  #0F6C5C;  /* Mint als SCHRIFT               5.24:1       */
  --warn:         #8A5405;  /* Warnschrift auf hell           5.19:1       */
  --fehler:       #B3261E;  /* Formularfehler auf hell        5.94:1       */

  /* --- Schrift ---------------------------------------------------------- */
  --schrift-display: 'Clash Display', 'Cabinet Grotesk', system-ui, sans-serif;
  --schrift-text:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-fest:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Fliessende Groessen. Der mittlere Wert ist der Verlauf zwischen
     375px und 1440px — darum ueberall dieselbe Rechnung.                  */
  --t-riesig: clamp(2.6rem, 1.30rem + 5.55vw, 5.00rem);
  --t-gross:  clamp(2.0rem, 1.24rem + 3.24vw, 3.40rem);
  --t-mittel: clamp(1.5rem, 1.13rem + 1.57vw, 2.18rem);
  --t-klein:  clamp(1.1rem, 0.99rem + 0.46vw, 1.30rem);
  --t-lauf:   clamp(1.0rem, 0.96rem + 0.19vw, 1.08rem);
  --t-mini:   0.82rem;

  /* --- Masse ------------------------------------------------------------ */
  --breit:  1240px;   /* normale Inhaltsbreite                             */
  --eng:     720px;   /* Fliesstext — nie breiter, sonst verliert das Auge  */
  --luft:   clamp(4rem, 2.4rem + 6.8vw, 7.5rem);  /* Abstand der Abschnitte */
  --rundung:      14px;
  --rundung-gross:22px;
  --kopfhoehe:    64px;

  /* Auf hellem Grund muss ein Schatten viel zarter sein als auf dunklem:
     dieselbe Staerke saehe hier nach Schmutz aus.                         */
  --schatten:      0 1px 2px rgb(20 23 28 / .06), 0 14px 34px -16px rgb(20 23 28 / .22);
  --schatten-kehr: 0 1px 2px rgb(0 0 0 / .40), 0 12px 32px -12px rgb(0 0 0 / .55);

  --tempo: .45s;
  --kurve: cubic-bezier(.22,.68,.24,1);
}


/* == 2  GRUNDLAGEN ======================================================= */

*,*::before,*::after{ box-sizing:border-box; }

/* Was `hidden` traegt, ist weg -- auch wenn eine Regel weiter unten dem
   Element ein display gibt (Menuepunkte, Knoepfe). Damit lassen sich ganze
   Abschnitte samt ihren Verweisen ausblenden: seit dem 05.10.2026 die Preise
   (Furkans Entscheidung), zu finden ueber data-schalter="preise". */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Der klebende Kopf darf Sprungziele nicht verdecken. */
  scroll-padding-top:calc(var(--kopfhoehe) + 18px);
}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--schrift-text);
  font-size:var(--t-lauf);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: verhindert die Querleiste, ohne position:sticky
     im Inneren kaputtzumachen. */
  overflow-x:clip;
}

h1,h2,h3,h4{
  font-family:var(--schrift-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--t-riesig); }
h2{ font-size:var(--t-gross); }
h3{ font-size:var(--t-mittel); }
h4{ font-size:var(--t-klein); letter-spacing:-.01em; }

p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

/* Bernstein traegt auf hellem Grund nur noch 1.71:1 — als Schrift also
   unbrauchbar. Links bekommen deshalb den dunklen Bernstein. */
a{ color:var(--akzent-text); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--akzent-text-satt); }

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0 0 1.1em; padding-left:1.15em; }
li{ margin-bottom:.42em; }
li:last-child{ margin-bottom:0; }
b,strong{ font-weight:700; color:var(--text); }
small{ font-size:var(--t-mini); }
hr{ border:0; border-top:1px solid var(--rand); margin:2.5rem 0; }

/* Ein einziger, ueberall gleicher Fokusring — auf hellem Grund wie in den
   dunklen --kehr-Abschnitten. Siehe --fokus oben: der Ton ist so gewaehlt,
   dass er auf beiden Seiten ueber 3:1 liegt. */
:focus-visible{
  outline:2px solid var(--fokus);
  outline-offset:3px;
  border-radius:4px;
}

.nur-vorleser{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.sprung{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-160%);
  background:var(--akzent); color:#14171C; font-weight:700;
  padding:.7rem 1.1rem; border-radius:8px; text-decoration:none;
  transition:transform .2s var(--kurve);
}
.sprung:focus{ transform:translateY(0); }

.huelle{
  width:min(100% - 2.4rem, var(--breit));
  margin-inline:auto;
}
.eng{ max-width:var(--eng); }

/* Abschnittsrhythmus. scroll-margin, damit Ankersprünge unter dem Kopf
   nicht anschlagen. */
.abschnitt{
  padding-block:var(--luft);
  scroll-margin-top:calc(var(--kopfhoehe) + 8px);
  position:relative;
}
/* Die zwei dunklen Abschnitte — die Kehrseite. Sie drehen die Textfarben
   komplett um, damit im Inneren nichts einzeln umgefaerbt werden muss.
   ACHTUNG BEIM LESEN: hier gilt die Bernstein-Regel andersherum. Auf hellem
   Grund ist der HELLE Bernstein die Flaeche und der dunkle die Schrift; hier
   drinnen traegt der helle Bernstein die Schrift (9.46:1 auf --kehr), und der
   dunkle waere unlesbar. Deshalb steht unten ueberall --akzent, nicht
   --akzent-text. */
.kehr{
  background:var(--kehr);
  color:var(--kehr-text);
}
.kehr h1,.kehr h2,.kehr h3,.kehr h4,.kehr b,.kehr strong{ color:var(--kehr-text); }
.kehr a{ color:var(--akzent); }
.kehr a:hover{ color:var(--akzent-satt); }
.kehr .fuehrung{ color:var(--kehr-leise); }
.kehr .rubrik{ color:var(--akzent); }
.kehr .rubrik::before{ background:var(--akzent); }

.kopfzeile{ max-width:var(--eng); margin-bottom:clamp(2rem,1.2rem + 3.4vw,3.4rem); }
.kopfzeile.mitte{ margin-inline:auto; text-align:center; }
.kopfzeile.mitte .rubrik{ justify-content:center; }

.fuehrung{
  font-size:var(--t-klein);
  color:var(--text-leise);
  line-height:1.6;
}


/* == 3  BAUSTEINE ======================================================== */

/* --- Rubrik: das kleine Label ueber jeder Ueberschrift ------------------ */
.rubrik{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--schrift-text);
  font-size:var(--t-mini);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--akzent-text);
  margin-bottom:1rem;
}
.rubrik::before{
  content:""; width:24px; height:2px; background:var(--akzent-text); border-radius:2px;
  flex:none;
}

/* --- Knopf -------------------------------------------------------------- */
.knopf{
  --k-grund:var(--akzent);
  --k-text:#16181D;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.86rem 1.5rem;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--k-grund);
  color:var(--k-text);
  font:inherit; font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s var(--kurve), background-color .22s, border-color .22s, color .22s;
}
.knopf:hover{ background:var(--akzent-satt); color:#16181D; }
/* Die Hebung beim Ueberfahren steht NICHT mehr hier, sondern unten in 6.4.
   Grund: dort kommt der magnetische Zug des Zeigers dazu, und zwei
   transform-Regeln addieren sich nicht — die spaetere gewaenne einfach und
   haette die Hebung wieder aufgehoben. Beides muss in EINEN Wert. */
.knopf .pf{ transition:transform .22s var(--kurve); }
.knopf:hover .pf{ transform:translateX(3px); }

.knopf.leer{
  --k-grund:transparent; --k-text:var(--text);
  border-color:var(--rand-hell);
}
.knopf.leer:hover{ background:var(--grund-hoch); color:var(--text); border-color:var(--text-still); }
.kehr .knopf.leer{ --k-text:var(--kehr-text); border-color:#C9C1B4; }
.kehr .knopf.leer:hover{ background:var(--kehr-hoch); color:var(--kehr-text); }

.knopfreihe{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* --- Karte -------------------------------------------------------------- */
.karte{
  background:var(--grund-hoch);
  border:1px solid var(--rand);
  border-radius:var(--rundung);
  padding:1.5rem;
  position:relative;
  transition:border-color .25s, transform .25s var(--kurve), background-color .25s;
}
.karte h3{ margin-bottom:.4rem; }
.karte p{ color:var(--text-leise); font-size:.97rem; }
a.karte{ text-decoration:none; color:inherit; display:block; }
a.karte:hover{ border-color:var(--rand-hell); transform:translateY(-3px); background:var(--grund-hoeher); }
.kehr .karte{ background:var(--kehr-hoch); border-color:var(--kehr-rand); box-shadow:var(--schatten-kehr); }
.kehr .karte p{ color:var(--kehr-leise); }

/* --- Chip (Filter, Umschalter, Schnellantwort) -------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem;
  border:1px solid var(--rand-hell);
  border-radius:999px;
  background:var(--grund-hoch);
  color:var(--text-leise);
  font:inherit; font-size:.92rem; font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .22s, color .22s, border-color .22s, transform .18s var(--kurve);
}
.chip:hover{ color:var(--text); border-color:var(--text-still); transform:translateY(-1px); }
.chip[aria-pressed="true"],
.chip[aria-selected="true"]{
  background:var(--akzent); border-color:var(--akzent); color:#16181D;
}

/* --- Merkzettel: der Kasten fuer ehrliche Hinweise ---------------------- */
.merk{
  border:1px solid var(--rand-hell);
  border-left:3px solid var(--warn);
  border-radius:var(--rundung);
  background:linear-gradient(180deg,rgb(255 206 134 / .07),rgb(255 206 134 / .02));
  padding:1.2rem 1.4rem;
  font-size:.97rem;
}
.merk b{ color:var(--warn); }
/* In der Kehrseite liegt der Kasten auf Dunkel. Frueher stand hier ein
   cremeweisser Grund — das war richtig, solange .kehr die HELLE Insel war.
   Jetzt waere es ein weisser Fleck mit weisser Schrift darauf. */
.kehr .merk{
  border-color:var(--kehr-rand); border-left-color:var(--akzent);
  background:rgb(242 164 58 / .07);
  color:var(--kehr-text);
}
.kehr .merk b{ color:var(--akzent); }

/* --- Platzhalter-Markierung ---------------------------------------------
   Alles in eckigen Klammern ist noch zu fuellen. Statt es zu verstecken,
   markiert die Seite es sichtbar — das ist ehrlicher und man findet es. */
.pl{
  color:var(--akzent-text);
  font-weight:600;
  background:rgb(242 164 58 / .16);
  border-bottom:1px dashed rgb(138 84 5 / .5);
  padding:0 .18em;
  border-radius:3px;
}
.kehr .pl{
  color:var(--akzent);
  background:rgb(242 164 58 / .12);
  border-bottom-color:rgb(242 164 58 / .45);
}


/* == 4  HUELLE =========================================================== */

/* --- Lesefortschritt ---------------------------------------------------- */
.fortschritt{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:var(--akzent);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* --- Kopf --------------------------------------------------------------- */
.kopf{
  position:sticky; top:0; z-index:100;
  height:var(--kopfhoehe);
  display:flex; align-items:center;
  /* Milchglas, jetzt hell. Die Deckung ist nicht frei gewaehlt: unter dem Kopf
     laeuft mal ein heller Abschnitt durch, mal ein dunkler --kehr-Abschnitt.
     Bei .72 faellt der Menuetext im schlimmsten Fall auf 4.09:1 — zu wenig.
     .82 haelt auch ueber Dunkel noch 5.19:1, bleibt aber sichtbar Glas. */
  background:rgb(250 248 245 / .82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .3s;
}
.kopf[data-gescrollt="1"]{ border-bottom-color:var(--rand); background:rgb(250 248 245 / .92); }
.kopf .huelle{ display:flex; align-items:center; gap:1.2rem; }

.marke{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--schrift-display); font-weight:600; font-size:1.05rem;
  color:var(--text); text-decoration:none; letter-spacing:-.01em;
  margin-right:auto;
}
/* Das Zeichen: der Fächer aus fünf Feldern (Logo-Blatt in marke/yelpaze-atelier/,
   nicht hochgeladen). Die vier Tinte-Felder folgen der Textfarbe (currentColor),
   das mittlere ist Bernstein — so stimmt es auf hellem wie dunklem Grund. */
.marke .zeichen{
  width:auto; height:24px; flex:none; display:block;
}
.fuss .marke{ color:var(--text); }

.navi{ display:flex; align-items:center; gap:.2rem; }
/* :not(.knopf) ist hier kein Feinschliff, sondern noetig. Ohne das gewinnt
   `.navi a` gegen `.knopf` — und der Aufruf am Ende der Zeile bekaeme graue
   Schrift auf Bernstein: gemessene 1.04:1, also praktisch unlesbar. Der
   Menuepunkt ist leise, der Aufruf ist ein Knopf. Zwei Dinge, zwei Regeln. */
.navi a:not(.knopf){
  padding:.5rem .72rem; border-radius:8px;
  color:var(--text-leise); text-decoration:none;
  font-size:.93rem; font-weight:500;
  transition:color .2s, background-color .2s;
}
.navi a:not(.knopf):hover{ color:var(--text); background:var(--grund-hoch); }
.kopf .knopf{ padding:.58rem 1.1rem; font-size:.92rem; }

.burger{
  display:none;
  width:42px; height:42px; flex:none;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--rand-hell); border-radius:10px;
  color:var(--text); cursor:pointer;
}
.burger span{
  display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px;
  position:relative;
  transition:transform .28s var(--kurve), opacity .18s;
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform .28s var(--kurve);
}
.burger span::before{ top:-5.5px; }
.burger span::after{ top:5.5px; }
.burger[aria-expanded="true"] span{ transform:rotate(45deg); }
.burger[aria-expanded="true"] span::before{ transform:translateY(5.5px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after{ opacity:0; }

/* --- Fuss --------------------------------------------------------------- */
.fuss{
  background:var(--grund-tief);
  border-top:1px solid var(--rand);
  padding-block:3.2rem 2rem;
  font-size:.94rem;
  color:var(--text-leise);
}
.fuss-raster{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:2.4rem;
  margin-bottom:2.6rem;
}
.fuss h3{ color:var(--text); margin-bottom:.8rem; font-size:.95rem;
          letter-spacing:.06em; text-transform:uppercase; font-family:var(--schrift-text); }
.fuss ul{ list-style:none; padding:0; margin:0; }
.fuss li{ margin-bottom:.5rem; }
.fuss a{ color:var(--text-leise); text-decoration:none; }
.fuss a:hover{ color:var(--akzent-text-satt); }
.fuss-schluss{
  border-top:1px solid var(--rand); padding-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
  font-size:var(--t-mini); color:var(--text-still);
}


/* == 5  ABSCHNITTE ======================================================= */

/* --- 5.1  Buehne -------------------------------------------------------- */
.buehne{
  position:relative;
  padding-block:clamp(3rem,1.6rem + 6vw,6rem) var(--luft);
  overflow:hidden;
}
/* Zwei weiche Lichter im Hintergrund. Sie liegen hinter allem, sind
   dezent und folgen der Maus nur minimal (siehe skript.js). */
.licht{
  position:absolute; z-index:0; border-radius:50%;
  filter:blur(90px); opacity:.5; pointer-events:none;
  will-change:transform;
}
.licht.eins{ width:min(46vw,560px); aspect-ratio:1; top:-14%; right:-8%;
             background:radial-gradient(circle,rgb(242 164 58 / .40),transparent 68%); }
.licht.zwei{ width:min(40vw,460px); aspect-ratio:1; bottom:-22%; left:-12%;
             background:radial-gradient(circle,rgb(111 211 194 / .26),transparent 68%); }
.buehne .huelle{ position:relative; z-index:1; }

.buehne-raster{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(2.4rem,1.4rem + 4vw,4.4rem);
  align-items:center;
}
/* Der Verlauf laeuft durch die SCHRIFT — also gelten hier Schriftwerte, nicht
   Flaechenwerte. Die hellen Toene (1.71 / 2.19 / 1.48:1) waeren auf Papier
   praktisch unsichtbar, und das ist die groesste Zeile der Seite. Derselbe
   Bogen von Bernstein nach Mint, nur eine Oktave tiefer: 5.19 / 7.12 / 5.24. */
.buehne h1 .hebe{
  background:linear-gradient(96deg,var(--akzent-text) 10%,var(--akzent-text-satt) 55%,var(--kontra-text) 108%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* Fallback, falls background-clip nicht greift: dann steht da dunkler
     Bernstein statt Bernstein — auf Papier lesbar. */
  -webkit-text-fill-color:transparent;
}
.buehne .fuehrung{ font-size:clamp(1.06rem,.98rem + .34vw,1.22rem); max-width:36em; }
.buehne .knopfreihe{ margin-top:1.8rem; }

.buehne-fakten{
  display:flex; flex-wrap:wrap; gap:.55rem 1.6rem;
  margin-top:2.2rem; padding-top:1.5rem;
  border-top:1px solid var(--rand);
  font-size:.9rem; color:var(--text-still);
}
.buehne-fakten span{ display:inline-flex; align-items:center; gap:.45rem; }
.buehne-fakten svg{ color:var(--kontra-text); flex:none; }

/* --- 5.2  Der Fächer ------------------------------------------------------
   Das Schaustueck der Buehne (seit 30.09.2026; vorher ein nachgebautes
   Musterfenster mit vier Handschriften). Sechs echte Betriebe, jeder in
   seinen drei Entwuerfen, als Faecher aus drei Bildschirmfotos.
   Alles Bewegte haengt an Variablen: --x/--y/--z/--r je Karte (die Pose),
   --rx/--ry auf der Kartenebene (das Kippen mit der Maus), --fortschritt auf
   dem Faecher (der Balken unter dem aktiven Betrieb). Das Skript setzt nur
   Werte und Attribute — wie es aussieht, steht hier.
   Ohne Skript (kein html.js) steht der Faecher offen und still.            */
.faecher{ position:relative; --spreiz:40%; --neig:10deg; }
.faecher-buehne{
  position:relative;
  aspect-ratio:16/12;
  perspective:1400px;
}
.faecher-karten{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s var(--kurve);
}
.fk{
  --kb:min(64%,440px);
  position:absolute; left:50%; top:50%;
  width:var(--kb);
  translate:-50% -50%;
  display:block;
  border:1px solid var(--rand-hell);
  border-radius:14px;
  overflow:hidden;
  background:var(--grund-hoch);
  color:inherit; text-decoration:none;
  box-shadow:0 2px 4px rgb(20 23 28 / .06), 0 34px 60px -30px rgb(20 23 28 / .50);
  transform:translate3d(var(--x,0%),var(--y,0%),var(--z,0px)) rotate(var(--r,0deg)) scale(var(--s,1));
  z-index:var(--tiefe,1);
  transition:transform .95s var(--kurve), opacity .55s var(--kurve), box-shadow .35s;
  will-change:transform;
}
/* Die drei Posen. Die Prozentwerte beziehen sich auf die Kartenbreite, also
   bleibt der Faecher auf jeder Bildschirmbreite derselbe Faecher. */
.fk[data-pos="l"]{ --x:calc(-1 * var(--spreiz)); --y:9%;  --z:-80px; --r:calc(-1 * var(--neig)); --tiefe:1; }
.fk[data-pos="m"]{ --x:0%;                        --y:-6%; --z:0px;   --r:0deg;                   --tiefe:3; }
.fk[data-pos="r"]{ --x:var(--spreiz);             --y:9%;  --z:-80px; --r:var(--neig);            --tiefe:2; }
/* Zugeklappt: Start und Wechsel. Nur mit Skript — ohne Skript oeffnet
   niemand den Faecher, also darf er dann auch nie zu sein. */
.js .fk:not([data-zu="0"]){ --x:0%; --y:22%; --z:-40px; --r:0deg; --s:.92; opacity:0; transition-duration:.5s,.4s,.35s; }
.fk:hover,
.fk:focus-visible{
  --s:1.045; z-index:5;
  box-shadow:0 2px 4px rgb(20 23 28 / .08), 0 40px 70px -28px rgb(20 23 28 / .62);
  transition-duration:.45s,.55s,.35s;
}
.fk:focus-visible{ outline:3px solid var(--fokus); outline-offset:3px; }
.fk-leiste{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem;
  background:var(--grund-hoeher);
  border-bottom:1px solid var(--rand);
}
.fk-leiste i{ width:8px; height:8px; border-radius:50%; background:var(--rand-hell); flex:none; }
.fk-adresse{
  margin-left:.4rem; min-width:0;
  font-family:var(--schrift-fest); font-size:.66rem; color:var(--text-still);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fk img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }

.faecher-leiste{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.7rem 1rem; margin-top:1.1rem;
}
.faecher-name{ margin:0; display:flex; flex-direction:column; line-height:1.25; min-width:9rem; }
.faecher-name b{ font-family:var(--schrift-display); font-size:1.12rem; font-weight:600; letter-spacing:-.01em; }
.faecher-name span{ font-size:var(--t-mini); color:var(--text-still); }
.faecher-punkte{ display:flex; flex-wrap:wrap; gap:.4rem; }
.fp{
  position:relative; overflow:hidden;
  min-height:40px; padding:.4rem .85rem;
  border:1px solid var(--rand-hell); border-radius:999px;
  background:var(--grund-hoch); color:var(--text-leise);
  font:inherit; font-size:.8rem; font-weight:600;
  cursor:pointer;
  transition:color .2s, border-color .2s, background-color .2s;
}
.fp:hover{ color:var(--text); border-color:var(--text); }
.fp[aria-pressed="true"]{ color:var(--text); border-color:var(--text); background:var(--grund-hoeher); }
/* Der Balken: er zeigt, wann der naechste Betrieb kommt. Sein Stand kommt
   als --fortschritt (0 bis 1) vom Skript und laeuft mit der echten Uhr —
   deshalb bleibt er auch dann stehen, wenn die Maus den Faecher anhaelt. */
.fp[aria-pressed="true"]::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--akzent);
  transform-origin:left; transform:scaleX(var(--fortschritt,0));
}
.fp:focus-visible{ outline:3px solid var(--fokus); outline-offset:2px; }
.faecher-hinweis{
  margin-top:.9rem; font-size:var(--t-mini); color:var(--text-still);
  display:flex; align-items:flex-start; gap:.5rem;
}
.faecher-hinweis svg{ flex:none; margin-top:.15rem; color:var(--kontra-text); }
@media (max-width: 640px){
  .faecher{ --spreiz:22%; --neig:6deg; }
  .faecher-buehne{ aspect-ratio:16/13; }
  .fk{ --kb:78%; }
}

/* --- 5.3  Laufband ------------------------------------------------------ */
.band{
  border-block:1px solid var(--rand);
  background:var(--grund-tief);
  padding-block:.9rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.band-spur{ display:flex; width:max-content; animation:schieben 48s linear infinite; }
.band:hover .band-spur,
.band:focus-within .band-spur{ animation-play-state:paused; }
.band-spur ul{
  display:flex; align-items:center; gap:2.4rem;
  list-style:none; margin:0; padding:0 1.2rem;
  font-size:.9rem; color:var(--text-still); white-space:nowrap;
}
.band-spur li{ margin:0; display:inline-flex; align-items:center; gap:2.4rem; }
.band-spur li::after{ content:"·"; color:var(--rand-hell); }
@keyframes schieben{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --- 5.4  Leistungen ---------------------------------------------------- */
.leist-raster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));
  gap:1rem;
}
/* Sechs Karten: ab 900 px fest drei nebeneinander, also zwei volle Reihen.
   auto-fit allein machte auf breiten Bildschirmen vier und zwei daraus —
   Furkan, 07.10.2026: „mir gefällt es nicht, dass oben vier sind und unten
   zwei". Darunter zwei, am Handy eine. */
@media (min-width: 900px){ .leist-raster{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.leist-raster .karte{ padding:1.6rem 1.5rem 1.7rem; transition:border-color .25s, translate .3s var(--kurve), background-color .25s; }
/* Das Heben beim Zeigen laeuft ueber `translate`, nicht `transform`: `transform`
   gehoert der Einblendung, und deren Verzoegerung (bis 350 ms bei der sechsten
   Karte) wuerde sonst auch das Heben verzoegern. */
.leist-raster .karte:hover{ border-color:var(--rand-hell); translate:0 -3px; background:var(--grund-hoeher); }
.symbol{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:rgb(242 164 58 / .12);
  border:1px solid rgb(242 164 58 / .24);
  color:var(--akzent-text);
  margin-bottom:1.1rem;
  position:relative;
  transition:transform .35s var(--kurve), background-color .35s;
}
.karte:nth-child(3n+2) .symbol{
  background:rgb(111 211 194 / .11); border-color:rgb(111 211 194 / .24); color:var(--kontra-text);
}
.leist-raster ul{
  list-style:none; padding:0; margin:1rem 0 0;
  font-size:.9rem; color:var(--text-still);
}
.leist-raster ul li{
  padding-left:1.15rem; position:relative; margin-bottom:.35rem;
}
.leist-raster ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--rand-hell);
}

/* Die Bewegung der sechs Karten — der Fächer (07.10.2026). Furkan: „nur so
   standard einblenden reicht mir nicht, es soll was außergewöhnliches sein."
   Die Karten liegen zuerst als geschlossener Stapel in der Mitte, fächern
   sich auf wie das Zeichen von Yelpaze Atelier und fliegen dann an ihren
   Platz. Den Weg spielt das Skript (Block 17); hier steht nur, was davor und
   danach gilt:
     - solange der Fächer wartet, sind die Karten unsichtbar,
     - wo eine Karte landet (data-da="1"), springt ihr Symbol herein, ein
       Bernstein-Ring läuft von ihm weg, die drei Punkte laufen ein.
   Ohne Skript oder mit abbestellter Bewegung steht alles einfach da. */
.js .leist-raster[data-faecher-auf="wartet"] .karte,
.js .leist-raster[data-faecher-auf="einzeln"] .karte:not([data-da="1"]){ opacity:0; }
.leist-raster .karte:hover .symbol{ transform:translateY(-2px) rotate(-6deg) scale(1.08); background:rgb(242 164 58 / .22); }
/* Symbol und Punkte kommen als Animation mit „backwards“: Waehrend der
   Wartezeit zeigen sie ihren Anfang (unsichtbar), danach gilt wieder der
   normale Stil — so bleibt das Symbol fuer das Neigen beim Zeigen frei.
   Eine Transition mit Verzoegerung ginge nicht: Die Verzoegerung wuerde auch
   das Neigen um eine halbe Sekunde verspaeten. */
.js .leist-raster .karte .symbol{ opacity:0; }
.js .leist-raster .karte[data-da="1"] .symbol{
  opacity:1;
  animation:leist-symbol .6s cubic-bezier(.2,1.5,.4,1) calc(var(--i,0) * 70ms + .3s) backwards;
}
@keyframes leist-symbol{ from{ opacity:0; transform:scale(.55) rotate(-12deg); } to{ opacity:1; transform:none; } }
.js .leist-raster .karte .symbol::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  border:1.5px solid rgb(242 164 58 / .9); opacity:0; pointer-events:none;
}
.js .leist-raster .karte[data-da="1"] .symbol::after{ animation:leist-ring 1s var(--kurve) calc(var(--i,0) * 70ms + .55s) both; }
@keyframes leist-ring{ from{ opacity:.9; transform:scale(1); } to{ opacity:0; transform:scale(2.1); } }
.js .leist-raster .karte ul li{ opacity:0; }
.js .leist-raster .karte[data-da="1"] ul li{
  opacity:1;
  animation:leist-punkt .4s var(--kurve) calc(var(--i,0) * 70ms + .5s + var(--n,0) * 110ms) backwards;
}
.js .leist-raster .karte ul li:nth-child(2){ --n:1; }
.js .leist-raster .karte ul li:nth-child(3){ --n:2; }
@keyframes leist-punkt{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

/* --- 5.5  Arbeiten (die zwoelf Branchen) -------------------------------- */
.filter{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.6rem;
}
.arbeiten-raster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,296px),1fr));
  gap:1rem;
}
/* Die Kundenprojekt-Raster haben je genau DREI Karten, nicht zwoelf. auto-fill
   legt oben so viele Spuren an, wie hineinpassen — bei 1180px sind das vier,
   und die vierte bliebe hier als Luecke stehen, sodass die drei Karten links
   klebten. auto-fit klappt leere Spuren zusammen; dieselben drei Karten
   nehmen dann die volle Breite ein. Bei zwoelf Karten macht auto-fit keinen
   Unterschied, deshalb bleibt es oben, wie es ist.

   Ab 900px stehen sie fest in drei Spalten. Sonst haenge die Zahl der Spalten
   an der Fensterbreite, und die beiden Auftraggeber bekaemen bei manchen
   Breiten verschieden breite Karten — nebeneinander untereinander faellt das
   sofort auf. */
#kundenRaster,
#kundenRaster2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,296px),1fr)); }
@media (min-width:900px){
  #kundenRaster,
  #kundenRaster2{ grid-template-columns:repeat(3,1fr); }
}

/* Ueberschrift ueber je einem Auftraggeber-Raster. Ein h3 und keine Rubrik:
   Die Reihenfolge h2 (Abschnitt) → h3 (Auftraggeber) ist das, was ein
   Vorleseprogramm braucht, um die sechs Karten zwei Betrieben zuzuordnen.
   Ohne sie stuenden sechsmal "Entwurf 1..3" ohne erkennbaren Besitzer. */
.kunde-kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem;
  margin:1.9rem 0 .9rem; font-size:1.12rem;
}
.kunde-kopf span{
  font-size:.8rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-still);
}

/* Sissy's liefert freigestellte Produktbilder (512×512, transparenter Grund)
   statt Fotos. Die Regel oben ist auf Fotos gebaut: cover in einem
   16:9-Kasten schnitte aus dem Quadrat die mittlere Scheibe heraus, Brot oben
   und unten weg. Also contain, dazu die Grundfarbe des jeweiligen Entwurfs
   als Kachelgrund — ein freigestellter Burger auf dem Grau des Portfolios
   saehe aus wie ein Fehler. Und ohne die Abdunkelung: die ist dafuer da,
   Fotos hinter dem Text ruhig zu halten; hier gibt es keinen Text darueber,
   und ein abgedunkeltes Produktbild wirkt einfach nur alt.

   Damit war der Burger aber immer noch zu klein. Der Grund steht in den
   Dateien selbst: In den 512 Pixeln Hoehe ist unten und oben viel leerer
   Rand. Gemessen an der Alphamaske (Image.getbbox) sitzt der Burger bei

     cheeseburger        Zeile 105–431  = 64 % der Hoehe, Mitte bei 52,3 %
     chili-cheese-burger Zeile  92–407  = 62 % der Hoehe, Mitte bei 48,7 %
     patty-melt          Zeile 125–415  = 57 % der Hoehe, Mitte bei 52,7 %

   contain rechnet mit dem ganzen Quadrat, also auch mit der Leere. Von 225
   Pixeln Kachelhoehe blieben so nur 128 bis 144 Pixel Burger — daneben die
   randvollen Fotos der ATRIUM-Reihe, und die Zeile darunter sah aus wie
   vergessen. --bild-zoom holt das zurueck: Der Wert ist 0,86 geteilt durch
   den Hoehenanteil oben, der Burger fuellt danach 86 % der Kachel. Was dabei
   ueber den Rand geht, ist genau der leere Rand. --bild-hoch schiebt die
   Mitte des Burgers auf die Mitte der Kachel; die Prozente sind die
   Abweichung aus der Spalte "Mitte bei". Beide Werte stehen an der Karte im
   HTML, weil sie zum Bild gehoeren und nicht zur Kachel.

   Die Vergroesserung kostet keine Schaerfe: Aus 326 Quellzeilen werden 194
   Bildschirmzeilen, das Bild wird also immer noch verkleinert. */
.arbeit--frei .arbeit-bild{ background:var(--kachel,var(--grund-hoeher)); }
.arbeit--frei .arbeit-bild img{
  object-fit:contain; filter:none;
  transform:scale(var(--bild-zoom,1)) translateY(var(--bild-hoch,0));
}
.arbeit--frei:hover .arbeit-bild img{
  filter:none;
  transform:scale(calc(var(--bild-zoom,1) * 1.045)) translateY(var(--bild-hoch,0));
}
/* Die Farbtupfer liegen sonst auf einem Foto, deshalb die dunkle Plakette.
   Auf dem hellen Marken-Pink ist sie ein Fleck — und der schwarze Tupfer von
   Entwurf 1 verschwindet darin ganz. Hier also andersherum: helle Plakette,
   dunkler Innenring. */
.arbeit--frei .tupfer{ background:rgb(255 255 255 / .82); }
.arbeit--frei .tupfer i{ box-shadow:inset 0 0 0 1px rgb(0 0 0 / .28); }
.arbeit{
  padding:0; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .25s, transform .3s var(--kurve),
             opacity .3s, background-color .25s;
}
.arbeit[hidden]{ display:none; }
.arbeit.aus{ opacity:0; transform:scale(.97); pointer-events:none; }
.arbeit-bild{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--grund-hoeher);
  border-bottom:1px solid var(--rand);
}
.arbeit-bild img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) brightness(.88);
  transition:transform .55s var(--kurve), filter .35s;
}
.arbeit:hover .arbeit-bild img{ transform:scale(1.045); filter:saturate(1) brightness(1); }
/* Ein Tupfer je Entwurf, in der Reihenfolge v1, v2, v3. Die Werte sind aus
   den `:root`-Bloecken der Entwuerfe abgelesen, nicht geschaetzt: ein heller
   Entwurf zeigt seine Akzentfarbe, ein dunkler seinen Grund. Bei einem
   dunklen Entwurf ist gerade das Dunkel das Kennzeichen — seine Akzentfarbe
   wuerde im Daumennagel dasselbe behaupten wie die des hellen Nachbarn.
   Deshalb steht auf jedem Tupfer ein heller Innenring: sonst verschwaende ein
   Fast-Schwarz auf der dunklen Plakette darunter. */
.tupfer{
  position:absolute; left:.8rem; bottom:.8rem;
  display:flex; gap:4px; padding:4px;
  background:rgb(6 8 11 / .6); border-radius:999px;
  backdrop-filter:blur(6px);
}
.tupfer i{ width:11px; height:11px; border-radius:50%; display:block;
           box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18); }
.arbeit-zahl{
  position:absolute; right:.8rem; top:.8rem;
  background:rgb(6 8 11 / .68); backdrop-filter:blur(6px);
  border-radius:999px; padding:.2rem .6rem;
  font-size:.72rem; font-weight:700; color:var(--kehr-text);
}
.arbeit-text{ padding:1.15rem 1.25rem 1.3rem; flex:1 1 auto;
              display:flex; flex-direction:column; }
.arbeit-text h3{ font-size:1.16rem; margin-bottom:.3rem; }
.arbeit-text p{ font-size:.9rem; margin-bottom:1rem; }
.arbeit-fuss{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; font-size:.86rem; font-weight:700; color:var(--akzent-text);
}
/* Drei dieser Karten stehen in einem --kehr-Abschnitt. Dort liegt derselbe
   Text auf Dunkel und braucht den hellen Bernstein zurueck. */
.kehr .arbeit-fuss{ color:var(--akzent); }
.arbeit-marke{
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-still);
}
.kehr .arbeit-marke{ color:var(--kehr-leise); }

/* Der Streifen, der klarstellt: das sind erfundene Betriebe. */
.erfunden{
  display:flex; gap:1rem; align-items:flex-start;
  border:1px solid rgb(255 206 134 / .34);
  border-radius:var(--rundung);
  background:linear-gradient(120deg,rgb(255 206 134 / .10),rgb(255 206 134 / .03));
  padding:1.25rem 1.4rem;
  margin-bottom:1.8rem;
}
.erfunden svg{ flex:none; color:var(--warn); margin-top:.15rem; }
.erfunden h3{ color:var(--warn); margin-bottom:.3rem; font-family:var(--schrift-text);
              font-size:1rem; letter-spacing:0; }
.erfunden p{ font-size:.94rem; color:var(--text-leise); margin:0; }

/* --- 5.6  Echte Referenzen (heller Abschnitt) --------------------------- */
.ref-raster{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:1rem;
}
.ref{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
/* Diese Karten stehen in einem --kehr-Abschnitt. Die Schraffur war die helle
   Insel-Variante; auf Dunkel waere sie ein weisser Fleck. */
.ref-bild{
  aspect-ratio:16/10; background:
    repeating-linear-gradient(135deg,#232A36 0 12px,#1C222C 12px 24px);
  display:grid; place-items:center; text-align:center;
  color:var(--kehr-leise); font-size:.84rem; padding:1rem;
  border-bottom:1px solid var(--kehr-rand);
}
.ref-text{ padding:1.2rem 1.3rem 1.4rem; flex:1 1 auto; display:flex; flex-direction:column; }
.ref-text h3{ font-size:1.12rem; margin-bottom:.25rem; }
.ref-liste{ list-style:none; padding:0; margin:.9rem 0 1.1rem; font-size:.9rem; }
.ref-liste li{ padding-left:1.3rem; position:relative; color:var(--kehr-leise); }
.ref-liste li::before{
  content:""; position:absolute; left:0; top:.52em; width:8px; height:8px;
  border-left:1.8px solid var(--kontra); border-bottom:1.8px solid var(--kontra);
  transform:rotate(-45deg);
}
.ref-text .arbeit-fuss{ color:var(--akzent); }

/* --- 5.7  Bilder: Herkunft und Bearbeitung ------------------------------ */
.reiter{
  display:flex; gap:.4rem; flex-wrap:wrap;
  border-bottom:1px solid var(--rand);
  padding-bottom:1rem; margin-bottom:1.8rem;
}
.tafel[hidden]{ display:none; }
.tafel-raster{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,1rem + 2.6vw,3rem); align-items:center;
}
.tafel h3{ font-size:var(--t-mittel); }
.tafel-liste{ list-style:none; padding:0; margin:1.2rem 0 0; }
.tafel-liste li{
  padding-left:1.7rem; position:relative;
  color:var(--text-leise); font-size:.95rem; margin-bottom:.6rem;
}
.tafel-liste li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:10px; height:10px; border-radius:3px;
  border:1.6px solid var(--kontra-text);
}
.tafel-notiz{
  margin-top:1.4rem; font-size:.9rem; color:var(--text-still);
  border-left:2px solid var(--rand-hell); padding-left:1rem;
}

/* Der Vorher/Nachher-Regler.
   Aufbau: beide Bilder exakt uebereinander, das obere wird per clip-path
   beschnitten. Der Griff ist ein echtes input[type=range] — damit
   funktionieren Tastatur, Touch und Vorleser ohne eine Zeile Extra-Code. */
.regler{
  position:relative; border-radius:var(--rundung); overflow:hidden;
  border:1px solid var(--rand); background:var(--grund-hoch);
  touch-action:pan-y;
  isolation:isolate;
}
.regler img{ display:block; width:100%; height:auto; }
/* Das obere Bild ist das NACHHER. Es zeigt sich rechts von der Naht, denn die
   Marken sagen: links „Vorher", rechts „Nachher". Bis zum 07.10.2026 war die
   Maske seitenverkehrt — rechts stand das Vorher unter der Marke „Nach
   Bearbeitung", und das Aufgehellte wirkte dunkler, das Nachgeschaerfte unscharf
   (Furkan hat es gesehen). */
.regler .oben{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  clip-path:inset(0 0 0 var(--pos,50%));
}
.regler .naht{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:2px; margin-left:-1px; background:var(--text);
  box-shadow:0 0 0 1px rgb(0 0 0 / .35);
  pointer-events:none;
}
.regler .naht::after{
  content:""; position:absolute; top:50%; left:50%;
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; background:var(--text);
  box-shadow:0 2px 10px rgb(0 0 0 / .45);
}
.regler .naht::before{
  content:"‹ ›";
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1; color:#14171C; font-size:.9rem; font-weight:700; letter-spacing:.05em;
}
.regler input[type="range"]{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; margin:0; padding:0;
  background:transparent; border:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none;
}
/* Der Schieber selbst ist durchsichtig (opacity:0) — sein eigener Fokusring
   waere es damit auch. Der Ring muss deshalb auf den Rahmen wandern. */
.regler input[type="range"]:focus-visible{ outline:none; }
.regler:has(input:focus-visible){ outline:2px solid var(--fokus); outline-offset:3px; }
/* Ohne :has() bliebe hier gar kein Ring uebrig, und wer mit der Tastatur
   arbeitet, saehe nicht mehr, wo er ist. :focus-within kann dasselbe und ist
   aelter; es unterscheidet nur nicht zwischen Maus und Tastatur. Deshalb
   springt es ausschliesslich dort ein, wo :has() fehlt. */
@supports not selector(:has(*)){
  .regler:focus-within{ outline:2px solid var(--fokus); outline-offset:3px; }
}
.marke-vn{
  position:absolute; top:.7rem; z-index:1;
  background:rgb(6 8 11 / .72); backdrop-filter:blur(6px);
  color:var(--kehr-text); border-radius:999px;
  padding:.24rem .7rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  pointer-events:none;
}
.marke-vn.links{ left:.7rem; }
.marke-vn.rechts{ right:.7rem; }

/* Drei Bilder nebeneinander fuer das Komposit-Beispiel. */
.dreier{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
/* „gross": das erste Bild ueber die ganze Breite, die beiden anderen darunter
   nebeneinander -- fuer die KI-Bilder, die Furkan groesser sehen wollte (07.10.2026). */
.dreier.gross{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.dreier.gross figure:first-child{ grid-column:1 / -1; }
.dreier.gross figure:not(:first-child) img{ aspect-ratio:3/2; object-fit:cover; }   /* gleich hoch, egal wie das Motiv geschnitten ist */
.dreier figure{ margin:0; }
.dreier img{ width:100%; border-radius:var(--rundung); border:1px solid var(--rand); }
.dreier figcaption{
  margin-top:.55rem; font-size:.8rem; color:var(--text-still); text-align:center;
}
.dreier figure:first-child figcaption{ color:var(--kontra-text); font-weight:600; }
.platzbild{
  aspect-ratio:4/5; border-radius:var(--rundung);
  border:1px dashed var(--rand-hell); background:var(--grund-hoch);
  display:grid; place-items:center; text-align:center; padding:1rem;
  color:var(--text-still); font-size:.8rem;
}

/* --- 5.8  Chatbot ------------------------------------------------------- */
.bot-raster{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(2rem,1.2rem + 3.4vw,3.6rem); align-items:start;
}
.chat{
  border:1px solid var(--rand-hell);
  border-radius:var(--rundung-gross);
  background:var(--grund-hoch);
  box-shadow:var(--schatten);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.chat-kopf{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem;
  background:var(--grund-hoeher);
  border-bottom:1px solid var(--rand);
}
.chat-kopf .kringel{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--kontra),#3EA090);
  color:#06231E;
}
.chat-kopf b{ display:block; font-size:.94rem; line-height:1.25; }
.chat-kopf small{ color:var(--text-still); font-size:.76rem; }
.chat-kopf .puls{
  margin-left:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; color:var(--kontra-text);
}
.chat-kopf .puls i{
  width:7px; height:7px; border-radius:50%; background:var(--kontra-text);
  animation:pochen 2.2s ease-in-out infinite;
}
@keyframes pochen{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.chat-lauf{
  height:clamp(280px,42vh,360px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:1.1rem 1rem;
  display:flex; flex-direction:column; gap:.65rem;
  scrollbar-width:thin;
}
.blase{
  max-width:84%; padding:.62rem .9rem;
  border-radius:16px; font-size:.92rem; line-height:1.5;
  animation:auftauchen .32s var(--kurve) both;
}
.blase.bot{
  align-self:flex-start;
  background:var(--grund-hoeher); border:1px solid var(--rand);
  border-bottom-left-radius:5px; color:var(--text);
}
.blase.ich{
  align-self:flex-end;
  background:var(--akzent); color:#16181D; font-weight:500;
  border-bottom-right-radius:5px;
}
.blase p{ margin:0 0 .5em; }
.blase p:last-child{ margin:0; }
.blase b{ color:inherit; }
.blase.ich b{ color:#16181D; }
@keyframes auftauchen{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

.tippt{ display:flex; gap:4px; align-items:center; padding:.72rem .95rem; }
.tippt i{
  width:6px; height:6px; border-radius:50%; background:var(--text-still);
  animation:huepfen 1.25s ease-in-out infinite;
}
.tippt i:nth-child(2){ animation-delay:.16s; }
.tippt i:nth-child(3){ animation-delay:.32s; }
@keyframes huepfen{ 0%,60%,100%{ transform:translateY(0); opacity:.45; }
                    30%{ transform:translateY(-4px); opacity:1; } }

.chat-schnell{
  display:flex; gap:.4rem; flex-wrap:wrap;
  padding:.7rem 1rem 0;
  border-top:1px solid var(--rand);
}
.chat-schnell .chip{ font-size:.8rem; padding:.35rem .78rem; }
.chat-eingabe{
  display:flex; gap:.5rem; align-items:center;
  padding:.8rem 1rem 1rem;
}
.chat-eingabe input{
  flex:1 1 auto; min-width:0;
  background:var(--grund); border:1px solid var(--rand-hell);
  border-radius:999px; padding:.62rem 1rem;
  color:var(--text); font:inherit; font-size:.92rem;
}
.chat-eingabe input::placeholder{ color:var(--text-still); }
.chat-eingabe input:focus{ outline:none; border-color:var(--kontra-text); }
.chat-eingabe button{
  width:40px; height:40px; flex:none; border:0; border-radius:50%;
  background:var(--kontra); color:#06231E; cursor:pointer;
  display:grid; place-items:center;
  transition:transform .2s var(--kurve), background-color .2s;
}
.chat-eingabe button:hover{ transform:scale(1.06); }
.chat-fuss{
  padding:0 1rem 1rem; font-size:.74rem; color:var(--text-still);
  display:flex; align-items:flex-start; gap:.45rem;
}
.chat-fuss svg{ flex:none; margin-top:.12rem; }

/* --- 5.9  Preise -------------------------------------------------------- */
.preis-raster{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr));
  gap:1rem; align-items:start;
}
.preis{ display:flex; flex-direction:column; padding:1.7rem 1.5rem 1.8rem; }
.preis.hervor{
  border-color:rgb(242 164 58 / .45);
  background:linear-gradient(180deg,rgb(242 164 58 / .07),var(--grund-hoch) 55%);
}
.preis-fahne{
  position:absolute; top:-1px; right:1.3rem;
  background:var(--akzent); color:#16181D;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.24rem .7rem; border-radius:0 0 8px 8px;
}
.preis h3{ font-size:1.24rem; margin-bottom:.3rem; }
.preis .wofuer{ font-size:.88rem; color:var(--text-still); margin-bottom:1.2rem; }
.betrag{
  display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap;
  padding-bottom:1.2rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--rand);
}
.betrag .zahl{
  font-family:var(--schrift-display); font-size:2.1rem; font-weight:600;
  letter-spacing:-.02em; line-height:1;
}
.betrag .dazu{ font-size:.84rem; color:var(--text-still); }
.preis ul{ list-style:none; padding:0; margin:0 0 1.5rem; font-size:.92rem; }
.preis ul li{ padding-left:1.5rem; position:relative; color:var(--text-leise); }
.preis ul li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:5px; border-left:1.8px solid var(--kontra-text);
  border-bottom:1.8px solid var(--kontra-text); transform:rotate(-45deg);
}
.preis ul li.ohne{ color:var(--text-still); }
.preis ul li.ohne::before{
  border:0; content:"—"; top:0; color:var(--rand-hell); transform:none;
  width:auto; height:auto;
}
.preis .knopf{ margin-top:auto; width:100%; }

.zusatz{
  margin-top:1.4rem;
  border:1px solid var(--rand); border-radius:var(--rundung);
  overflow:hidden;
}
.zusatz-zeile{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1rem; align-items:baseline;
  padding:.85rem 1.2rem;
  border-bottom:1px solid var(--rand);
  font-size:.94rem;
}
.zusatz-zeile:last-child{ border-bottom:0; }
.zusatz-zeile:nth-child(odd){ background:rgb(255 255 255 / .015); }
.zusatz-zeile span:last-child{ font-weight:700; color:var(--akzent-text); white-space:nowrap; }
.zusatz-zeile small{ display:block; color:var(--text-still); font-weight:400; }

/* --- 5.10  Ablauf ------------------------------------------------------- */
.ablauf{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem; position:relative;
}
/* Der Strahl (07.10.2026, Furkan: „diesen strahl da eye catchend animiert").
   Eine graue Spur liegt hinter den Schritten; darauf laeuft beim Scrollen ein
   Strahl aus Bernstein mit leuchtendem Kopf, durch den Licht fliesst. Wo er
   einen Kreis erreicht, leuchtet der auf und schickt einen Ring aus. Am Ende
   ist die ganze Linie orange — auch das Stueck nach der 5, das vorher grau
   blieb. Wie weit er steht, rechnet das Skript (--fuellung, in Pixeln). */
.ablauf::before{
  content:""; position:absolute; left:0; right:0; top:21px; height:2px;
  background:var(--rand);
}
.ablauf::after{
  content:""; position:absolute; left:0; top:20px; height:4px; border-radius:2px;
  width:var(--fuellung,0px);
  background:repeating-linear-gradient(90deg, var(--akzent) 0 150px, #FFE7BF 182px, var(--akzent) 214px);
  background-size:214px 100%;
  box-shadow:0 0 12px rgb(242 164 58 / .55);
  animation:strahl-fluss 1.5s linear infinite;
  transition:width .3s var(--kurve);
}
@keyframes strahl-fluss{ from{ background-position:0 0; } to{ background-position:214px 0; } }
@keyframes strahl-fluss-senkrecht{ from{ background-position:0 0; } to{ background-position:0 214px; } }
.strahl-kopf{
  position:absolute; z-index:0; left:var(--fuellung,0px); top:22px;   /* hinter den Kreisen: laeuft durch sie hindurch */
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:#FFF4DE; pointer-events:none;
  box-shadow:0 0 0 4px rgb(242 164 58 / .35), 0 0 22px 7px rgb(242 164 58 / .7);
  transition:left .3s var(--kurve), top .3s var(--kurve), opacity .3s;
  opacity:0;
}
.ablauf[data-strahl="laeuft"] .strahl-kopf,
.ablauf[data-strahl="voll"] .strahl-kopf{ opacity:1; }
/* Am Ende pulsiert der Kopf wie eine Live-Anzeige: Die Seite ist online. */
.ablauf[data-strahl="voll"] .strahl-kopf{ animation:kopf-puls 1.8s var(--kurve) infinite; }
@keyframes kopf-puls{
  0%  { box-shadow:0 0 0 4px rgb(242 164 58 / .35), 0 0 22px 7px rgb(242 164 58 / .7); }
  50% { box-shadow:0 0 0 12px rgb(242 164 58 / 0),  0 0 30px 10px rgb(242 164 58 / .85); }
  100%{ box-shadow:0 0 0 4px rgb(242 164 58 / .35), 0 0 22px 7px rgb(242 164 58 / .7); }
}
.schritt{ position:relative; z-index:1; }
.schritt .nr{
  position:relative;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:1rem;
  background:var(--grund); border:2px solid var(--rand);
  font-family:var(--schrift-display); font-weight:600; font-size:1rem;
  color:var(--text-still);
  transition:border-color .35s, color .35s, background-color .35s, box-shadow .35s, transform .5s cubic-bezier(.3,1.6,.5,1);
}
.schritt[data-da="1"] .nr{ border-color:var(--akzent-text); color:var(--akzent-text); }
.schritt[data-an="1"] .nr{
  background:var(--akzent); border-color:var(--akzent); color:#14171C;
  transform:scale(1.1);
  box-shadow:0 0 0 6px rgb(242 164 58 / .16), 0 0 24px rgb(242 164 58 / .5);
}
.schritt .nr::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--akzent); opacity:0; pointer-events:none;
}
.schritt[data-an="1"] .nr::after{ animation:nr-ring 1s var(--kurve); }
@keyframes nr-ring{ from{ opacity:.95; transform:scale(1); } to{ opacity:0; transform:scale(2.2); } }
/* Die Schrittueberschrift ist eine h3, weil darueber eine h2 steht — sie darf
   keine Stufe ueberspringen. Die Groesse haengt an --t-klein und nicht an der
   Stufe: optisch soll sie klein bleiben, im Vorleser aber richtig einsortiert
   sein. Genau dafuer sind Stufe und Groesse getrennt. */
.schritt h3{ margin-bottom:.35rem; font-size:var(--t-klein); letter-spacing:-.01em; }
.schritt p{ font-size:.9rem; color:var(--text-leise); }

/* --- 5.11  Ueber mich (heller Abschnitt) -------------------------------- */
.ueber-raster{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(2rem,1.2rem + 3.4vw,3.6rem); align-items:start;
}
.portraet{
  aspect-ratio:4/5; border-radius:var(--rundung-gross);
  border:1px dashed #3A4352; background:
    repeating-linear-gradient(135deg,#232A36 0 14px,#1E2530 14px 28px);
  display:grid; place-items:center; text-align:center; padding:1.4rem;
  color:var(--kehr-leise); font-size:.86rem;
}
/* Das echte Foto (seit 07.10.2026 traegt es das Cockpit beim Bauen ein, statt des Platzhalters). */
.portraet.portraet-foto{ padding:0; border:1px solid var(--kehr-rand); background:none; overflow:hidden; }
.portraet.portraet-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Ohne Foto (Livegang 14.10.2026, Furkan reicht es nach): das Zeichen auf Bernstein,
   wie die Rueckseite der Wertekarten. Den Kasten setzt der Bau ein (bau.ts, setzeUeberMich). */
.portraet.portraet-zeichen{
  border:0; padding:0;
  background:var(--akzent) var(--zeichen-bild) center / 46% auto no-repeat;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08);
}
.ueber-zitat{
  font-family:var(--schrift-display); font-weight:500;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);
  line-height:1.32; letter-spacing:-.015em;
  border-left:3px solid var(--akzent);
  padding-left:1.3rem; margin:0 0 1.6rem;
}
/* Fuenf Werte in einer Reihe, unter dem ganzen Raster (07.10.2026). Mit
   Flexbox und Mitte, damit jede Aufteilung symmetrisch bleibt: am Rechner
   fuenf nebeneinander, darunter drei und zwei, dann zwei, zwei und eins —
   die kurze Reihe steht immer in der Mitte. */
.werte{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem; margin-top:clamp(2.2rem,1.6rem + 2vw,3.4rem);
}
.wert{
  flex:1 1 0; min-width:0;
  position:relative;
  background:var(--kehr-hoch); border:1px solid var(--kehr-rand);
  border-radius:var(--rundung); padding:1.2rem 1.25rem 1.3rem;
  transform:perspective(700px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg));
  transition:transform .35s var(--kurve), border-color .35s, box-shadow .35s;
}
.wert:hover{ border-color:rgb(242 164 58 / .55); box-shadow:0 14px 34px rgb(0 0 0 / .35), 0 0 0 1px rgb(242 164 58 / .18); }
/* Die Rueckseite beim Umdrehen: Bernstein mit dem Zeichen. Das Skript legt
   sie fuer die Dauer der Drehung in die Karte und nimmt sie danach weg. Das
   Zeichen ist spiegelgleich — von hinten gesehen stimmt es trotzdem. */
.wert-ruecken{
  position:absolute; inset:-1px; z-index:2; border-radius:inherit; pointer-events:none;
  background:var(--akzent) var(--zeichen-bild) center / 42% auto no-repeat;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08);
}
.js .werte[data-umdrehen="an"] .wert:not([data-gedreht]){ opacity:0; }
@media (max-width:1020px){ .wert{ flex:0 1 calc((100% - 2rem) / 3); } }
@media (max-width:700px){  .wert{ flex:0 1 calc((100% - 1rem) / 2); } }
@media (max-width:440px){  .wert{ flex:1 1 100%; } }
.wert b{ display:block; margin-bottom:.25rem; font-size:.96rem; }
.wert span{ font-size:.88rem; color:var(--kehr-leise); }

/* --- 5.12  Kontakt ------------------------------------------------------ */
.kontakt-raster{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,1.2rem + 3.4vw,3.6rem); align-items:start;
}
.kontakt-wege{ list-style:none; padding:0; margin:1.6rem 0 0; }
.kontakt-wege li{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.9rem 0; border-top:1px solid var(--rand);
}
.kontakt-wege li:last-child{ border-bottom:1px solid var(--rand); }
.kontakt-wege svg{ flex:none; margin-top:.2rem; color:var(--akzent-text); }
.kontakt-wege b{ display:block; font-size:.94rem; }
.kontakt-wege span{ font-size:.9rem; color:var(--text-leise); }

.formular{
  background:var(--grund-hoch); border:1px solid var(--rand);
  border-radius:var(--rundung-gross); padding:1.6rem;
}
.feldpaar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1rem; }
.feld{ margin-bottom:1rem; }
.feld label{
  display:block; margin-bottom:.4rem;
  font-size:.86rem; font-weight:600; color:var(--text-leise);
}
.feld input,.feld textarea,.feld select{
  width:100%; background:var(--grund); color:var(--text);
  border:1px solid var(--rand-hell); border-radius:10px;
  padding:.72rem .9rem; font:inherit; font-size:.95rem;
  transition:border-color .2s;
}
.feld textarea{ min-height:120px; resize:vertical; }
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none; border-color:var(--akzent-text);
}
.feld input::placeholder,.feld textarea::placeholder{ color:var(--text-still); }
.zustimmung{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.86rem; color:var(--text-leise); margin:1.2rem 0;
}
.zustimmung input{ margin-top:.28rem; flex:none; width:16px; height:16px; accent-color:var(--akzent-text); }
.formular .knopf{ width:100%; }
.form-notiz{
  margin-top:1rem; font-size:.8rem; color:var(--text-still);
  display:flex; gap:.45rem; align-items:flex-start;
}
.form-notiz svg{ flex:none; margin-top:.12rem; }
.form-erfolg{
  margin-top:1rem; padding:.9rem 1.1rem;
  border:1px solid rgb(111 211 194 / .4); border-radius:10px;
  background:rgb(111 211 194 / .08); color:var(--kontra-text);
  font-size:.9rem;
}
.form-erfolg a{ color:inherit; }
/* „Nachricht kopieren" -- fuer alle, bei denen sich kein E-Mail-Programm oeffnet. */
.form-kopieren{
  display:inline-block; margin-top:.55rem;
  font:inherit; font-size:.84rem; font-weight:600; color:inherit; cursor:pointer;
  background:none; border:1px solid currentColor; border-radius:999px;
  padding:.32rem .9rem;
}
.form-kopieren:hover{ background:rgb(111 211 194 / .14); }

/* Fehlermeldungen im Formular. Die Farbe allein darf die Aussage nicht
   tragen — deshalb steht unter jedem beanstandeten Feld ein Satz, der
   erklaert, was fehlt, und das Feld traegt aria-invalid. */
.feld[data-fehler="1"] input,
.feld[data-fehler="1"] textarea,
.feld[data-fehler="1"] select{
  border-color:var(--fehler);
  background:rgb(255 158 143 / .05);
}
.feld[data-fehler="1"] label{ color:var(--fehler); }
.zustimmung[data-fehler="1"]{ color:var(--fehler); }
.zustimmung[data-fehler="1"] input{ outline:2px solid var(--fehler); outline-offset:2px; }
.fehler{
  display:block; margin-top:.38rem;
  font-size:.82rem; color:var(--fehler);
}
/* Beim Haken steht der Satz unter dem Kasten, nicht darin — sonst zerreisst
   er die Zeile aus Kaestchen und Text. */
.zustimmung + .fehler{ margin-top:-.7rem; margin-bottom:1rem; }


/* --- 5.13  Rechtstexte (Impressum, Datenschutz) -------------------------
   Zwei ruhige Leseseiten. Sie teilen sich diese Datei mit der Startseite,
   damit Kopf, Fuss und Farben nicht auseinanderlaufen; alles Eigene steht
   hier und faengt mit .rechts- an.                                         */
.rechts-kopf{ padding:calc(var(--kopfhoehe) + 3.4rem) 0 1.6rem; }
/* „Datenschutzerklaerung" ist ein Wort aus zwanzig Zeichen. Am Handy passt es
   in keine Zeile und lief vorher 112 Pixel ueber den rechten Rand hinaus —
   unsichtbar in jeder Messung, die nur Kastenbreiten vergleicht, weil der
   Kasten stimmte und nur der Text zu breit war. `hyphens:auto` trennt es
   sauber nach deutschen Regeln (das `lang="de"` im HTML ist die Bedingung
   dafuer); `overflow-wrap` faengt die Browser ab, die kein deutsches
   Trennwoerterbuch mitbringen. */
.rechts-kopf h1{
  margin:.5rem 0 .8rem;
  hyphens:auto; -webkit-hyphens:auto;
  overflow-wrap:break-word;
}
.rechts-kopf .fuehrung{ max-width:52ch; }

/* Die Breite steckt in den Kindern, nicht in der Huelle. Stuende hier
   `max-width:74ch`, wuerde `.huelle` mit seinem `margin:0 auto` die schmale
   Spalte mittig setzen — die Ueberschrift oben bliebe am linken Seitenrand,
   der Text darunter ruecke gut zweihundert Pixel nach rechts. Genau so sah es
   aus. Jetzt behaelt die Huelle ihre volle Breite, und jeder Block hoert nach
   74 Zeichen auf: gleiche Kante oben wie unten, trotzdem keine Zeile, deren
   Anfang man beim Zurueckspringen sucht. */
.rechtstext{ padding-bottom:5rem; }
.rechtstext > *{ max-width:74ch; }
.rechtstext section{ margin-bottom:2.6rem; }
.rechtstext h2{
  font-size:clamp(1.24rem,1.1rem + .5vw,1.5rem);
  margin-bottom:.8rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--rand);
}
.rechtstext h3{ font-size:1.03rem; margin:1.5rem 0 .5rem; }
.rechtstext p,.rechtstext li{ color:var(--text-leise); margin-bottom:.85rem; }
.rechtstext address{ font-style:normal; color:var(--text); line-height:1.75; }
.rechtstext ul{ padding-left:1.2rem; margin-bottom:.85rem; }
.rechtstext dl{ margin-bottom:1rem; }
.rechtstext dt{ font-weight:600; color:var(--text); margin-top:.7rem; }
.rechtstext dd{ margin:0 0 .2rem; color:var(--text-leise); }
.rechtstext a{ color:var(--akzent-text); }
.rechtstext li{ margin-bottom:.4rem; }
.rechtstext li:last-child{ margin-bottom:0; }
/* Fliesstext steht gedaempft, damit die Ueberschriften fuehren. Eine
   Hervorhebung muss dann heller sein als ihre Umgebung, sonst ist sie keine. */
.rechtstext b{ color:var(--text); }
/* Serveradressen wie fonts.gstatic.com. Sie stehen in der Datenschutz-
   erklaerung Zeichen fuer Zeichen richtig da, deshalb eine Schrift mit
   gleichen Breiten — und `overflow-wrap`, damit eine lange Adresse am Handy
   umbricht statt die Seite breiter zu machen. */
.rechtstext code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; color:var(--text);
  background:var(--grund-hoch); border:1px solid var(--rand);
  border-radius:5px; padding:.08em .34em;
  overflow-wrap:anywhere;
}

/* Der Kasten mit dem, was vor dem Livegang noch zu tun ist. Er ist bewusst
   auffaellig: er soll beim Ueberfliegen stoeren, damit er nicht stehen
   bleibt. Bernstein statt Rot, weil es kein Fehler ist, sondern eine
   offene Aufgabe. */
.rechts-todo{
  border:1px solid var(--akzent-text); border-left-width:4px; border-radius:12px;
  background:var(--grund-hoch); padding:1.2rem 1.3rem; margin-bottom:2.6rem;
}
/* Nur das direkte Kind, nicht jedes b im Kasten. Vorher stand hier
   `.rechts-todo b` — damit wurde jede Hervorhebung mitten in einem
   Aufzaehlungspunkt zur eigenen Zeile in Bernstein, und aus „Die
   **Schriftarten** von Fontshare" wurden drei Zeilen. */
.rechts-todo > b{ color:var(--akzent-satt); display:block; margin-bottom:.5rem; }
.rechts-todo p:last-child,.rechtstext p:last-child{ margin-bottom:0; }

.rechts-zurueck{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  color:var(--text-leise); text-decoration:none; font-weight:500;
}
.rechts-zurueck:hover{ color:var(--akzent-text-satt); }

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

/* Einblenden beim Scrollen. Ohne JavaScript bleibt alles sichtbar —
   deshalb haengt der Startzustand an html.js. */
.js .zeig{
  opacity:0; transform:translateY(18px);
  transition:opacity .62s var(--kurve), transform .62s var(--kurve);
  transition-delay:calc(var(--i,0) * 70ms);
}

/* --- 6.1  Zusatzformen ---------------------------------------------------
   Bis hierher machten alle 83 eingeblendeten Elemente exakt dasselbe. Ueber
   acht Abschnitte hinweg wird daraus ein Tick: man sieht nicht mehr den
   Inhalt, sondern das Muster.

   Bewegung wirkt dann souveraen, wenn sie zum Element PASST — eine Bildkarte
   waechst heran, eine Randspalte kommt von der Seite, an der sie steht, ein
   kleines Label schiebt sich unter seinem Strich hervor. Dauer, Kurve und die
   Staffelung ueber --i bleiben fuer alle gleich. Dadurch sind es Varianten
   EINER Handschrift und nicht vier verschiedene Effekte.                    */
.js .zeig[data-zeig="links"] { transform:translate3d(-24px,0,0); }
.js .zeig[data-zeig="rechts"]{ transform:translate3d(24px,0,0); }
.js .zeig[data-zeig="skala"] { transform:scale(.955); }

/* Hier stand kurzzeitig eine vierte Form: ein Aufdeck-Wisch ueber clip-path.
   Sie ist wieder raus, weil es auf dieser Seite keine Flaeche gibt, der sie
   gutgetan haette. Die Bildkarten haben runde Ecken und einen Schlagschatten
   — ein rechteckiger Beschnitt haette waehrend des Wischs beides abgesaebelt.
   Eine Form, die nirgends passt, ist kein Vorrat, sondern eine Falle fuer
   den, der sie spaeter arglos benutzt.                                      */

/* Und HIER, nach allen Formen, das Ziel: eingeblendet liegt alles in Ruhe.
   Die Reihenfolge ist nicht Geschmack, sie ist der ganze Punkt.

   `.js .zeig[data-da="1"]` und `.js .zeig[data-zeig="links"]` haben beide
   dieselbe Spezifitaet — zwei Klassen und ein Attribut, (0,3,0). Bei
   Gleichstand entscheidet die Reihenfolge im Dokument. Stuende diese Zeile
   wie urspruenglich WEITER OBEN, gewaenne jede Zusatzform gegen sie: die
   Rubriken blieben fuer immer 24 Pixel nach links versetzt und die Karten auf
   95,5 Prozent stehen. Ausgerechnet der eingeblendete Endzustand — der, den
   man am laengsten sieht — waere kaputt.

   Gemessen, nicht vermutet: mit der Zeile oben lieferte
   getComputedStyle(.rubrik).transform nach dem Einblenden
   matrix(1,0,0,1,-24,0) statt none.                                         */
.js .zeig[data-da="1"]{ opacity:1; transform:none; }

/* --- 6.2  Die Kopfzeile -------------------------------------------------
   Der eine grosse Auftritt der Seite: die Zeilen der Hauptueberschrift
   steigen nacheinander aus einer Blende. Genau EINMAL auf der ganzen Seite —
   ein zweites Mal waere Zirkus.

   Die Ueberschrift blendet dabei nicht zusaetzlich selbst ein, sonst laege
   Bewegung auf Bewegung und beides wuerde unscharf.                         */
.js .zeig[data-zeig="zeilen"]{ opacity:1; transform:none; }

.zeile{
  display:block;
  overflow:hidden;
  /* Platz fuer die Unterlaengen. Ohne diese zwei Zeilen schneidet die Blende
     das „g" in „wirklich" unten ab. Der negative Rand nimmt den Platz im
     Layout gleich wieder heraus, damit die Zeilen nicht auseinanderrutschen. */
  padding-bottom:.16em;
  margin-bottom:-.16em;
}
/* Nur mit Skript: ohne `html.js` laeuft nie ein Beobachter, und eine Zeile,
   die dann unten in der Blende stehen bliebe, waere schlicht weg.           */
.js .zeile > span{
  display:block;
  transform:translateY(104%);
  transition:transform .85s var(--kurve);
  transition-delay:calc(var(--z,0) * 115ms + 90ms);
}
.js .zeig[data-da="1"] .zeile > span{ transform:none; }

/* --- 6.3  Der Zeiger im Bild --------------------------------------------
   Ein weicher Schein folgt der Maus ueber die Bildkarten. --mx/--my setzt das
   Skript; ohne Maus oder ohne Skript bleibt er in der Mitte stehen und faellt
   nicht auf, weil er ueberhaupt erst beim Ueberfahren sichtbar wird.

   Er liegt UEBER dem Foto, aber UNTER dem Text: ein warmer Wisch quer ueber
   eine Ueberschrift saehe nach Verschmutzung aus, nicht nach Licht. Die drei
   z-index-Zeilen sind deshalb keine Kosmetik — sie ordnen die Ebenen.
   `isolation` haelt diese Ordnung in der Karte, damit sie nicht mit dem
   Schlagschatten des Rasters darunter ins Gehege kommt.                     */
.arbeit{ position:relative; isolation:isolate; }
.arbeit::after{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:0;
  transition:opacity .35s var(--kurve);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgb(242 164 58 / .16), transparent 62%);
}
.arbeit:hover::after,
.arbeit:focus-within::after{ opacity:1; }
/* Dasselbe Licht auf den Leistungskarten. Hier als ::before mit z-index:-1 in
   einer isolierten Karte: so liegt es ueber dem Kartengrund und unter Symbol,
   Ueberschrift und Text, ohne dass jedes Kind eine eigene Ebene braucht. */
.leist-raster .karte{ isolation:isolate; }
.leist-raster .karte::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  pointer-events:none; opacity:0;
  transition:opacity .35s var(--kurve);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
             rgb(242 164 58 / .14), transparent 64%);
}
.leist-raster .karte:hover::before{ opacity:1; }
/* Und ein Rand aus Licht, der der Maus folgt: ein Verlauf, den eine Maske auf
   den 1-Pixel-Rand beschneidet. */
.leist-raster .karte::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  pointer-events:none; opacity:0; transition:opacity .3s var(--kurve);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgb(242 164 58 / .95), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.leist-raster .karte:hover::after{ opacity:1; }
.arbeit-bild{ z-index:0; }
.arbeit-text{ position:relative; z-index:1; }

/* --- 6.4  Magnetische Knoepfe -------------------------------------------
   Die Knoepfe neigen sich ein paar Pixel zum Zeiger. Fuenf Pixel Ausschlag,
   nicht mehr: der Knopf soll sich bemerkbar machen und nicht davonlaufen.
   Die --zug-Werte kommen aus dem Skript.

   Der Hebe-Effekt beim Ueberfahren war vorher ein eigener translateY. Zwei
   transform-Regeln koennen sich aber nicht addieren — die spaetere gewaenne
   einfach, und der Magnet haette den Sprung nach oben aufgehoben. Deshalb
   steht die Hebung jetzt als calc() in derselben Regel.                     */
.knopf{ transform:translate3d(var(--zug-x,0px),var(--zug-y,0px),0); }
.knopf:hover{ transform:translate3d(var(--zug-x,0px),calc(var(--zug-y,0px) - 2px),0); }
.knopf:active{ transform:translate3d(var(--zug-x,0px),var(--zug-y,0px),0); }

/* --- 6.5  Wo man gerade ist ---------------------------------------------
   Der Menuepunkt des Abschnitts, den man gerade liest, bekommt einen Strich.
   `aria-current` traegt dieselbe Auskunft fuer Vorleseprogramme: die Farbe
   allein waere fuer sie gar nicht vorhanden.                                */
.navi a:not(.knopf){ position:relative; }
.navi a:not(.knopf)::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.3rem;
  height:2px; border-radius:2px; background:var(--akzent-text);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .32s var(--kurve);
}
.navi a[aria-current="true"]{ color:var(--text); }
.navi a[aria-current="true"]::after{ transform:scaleX(1); }

/* --- 6.6  Die Buehne beim Wegscrollen -----------------------------------
   Sie zieht langsamer weg als der Rest und wird dabei blasser. Das ist kein
   Effekt um seiner selbst willen: der Uebergang zum naechsten Abschnitt wird
   weich, statt dass eine volle Bildschirmhoehe hart nach oben durchschiebt.
   Den Wert setzt das Skript; hier steht nur, dass er ueberhaupt wirken darf. */
.buehne{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .zeig{ opacity:1; transform:none; }
  /* Jede der neuen Formen braucht hier ihren Gegenpart. Das ist der Teil, den
     man beim Nachruesten vergisst — dann bleibt eine Zeile in ihrer Blende
     stehen oder eine Flaeche zugeschnitten, und zwar ausgerechnet bei den
     Leuten, die Bewegung abbestellt haben.                                  */
  .js .zeile > span{ transform:none; }
  .arbeit::after,.leist-raster .karte::before,.leist-raster .karte::after{ display:none; }
  .js .leist-raster[data-faecher-auf] .karte{ opacity:1 !important; }
  .ablauf::after{ animation:none; }
  .strahl-kopf{ display:none; }
  .schritt[data-an="1"] .nr{ transform:none; }
  .schritt[data-an="1"] .nr::after{ animation:none; }
  .js .werte[data-umdrehen] .wert{ opacity:1 !important; }
  .wert{ transform:none !important; }
  .wert-ruecken{ display:none; }
  .knopf,.knopf:hover,.knopf:active{ transform:none; }
  .navi a:not(.knopf)::after{ transition:none; }
  .buehne{ transform:none !important; opacity:1 !important; will-change:auto; }
  .band-spur{ animation:none; }
  .licht{ display:none; }
  .js .fk:not([data-zu="0"]){ opacity:1; }
  .faecher-karten{ transform:none !important; }
  /* die drei Takte der Leistungskarten */
  .js .leist-raster .karte .symbol,.js .leist-raster .karte ul li{ opacity:1; animation:none; }
  .js .leist-raster .karte .symbol::after{ animation:none; }
  .leist-raster .karte:hover{ translate:none; }
  .leist-raster .karte:hover .symbol{ transform:none; }
}



/* == 7  ENGE BILDSCHIRME ================================================= */

@media (max-width: 1020px){
  .buehne-raster{ grid-template-columns:minmax(0,1fr); }
  .faecher{ order:-1; }               /* Das Schaustueck zuerst zeigen. */
  .tafel-raster,
  .bot-raster,
  .ueber-raster,
  .kontakt-raster{ grid-template-columns:minmax(0,1fr); }
  .ueber-raster .portraet{ max-width:320px; }
  .ablauf{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 1rem; }
  .ablauf::before,.ablauf::after{ display:none; }
  .fuss-raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px){
  :root{ --kopfhoehe:58px; }

  /* Menue: aus der Zeile wird eine eingeblendete Tafel. */
  .burger{ display:inline-flex; }
  .kopf .knopf{ display:none; }
  .navi{
    position:fixed; inset:var(--kopfhoehe) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    /* Deckend, nicht fast deckend. Vorher standen hier 97 % plus Unschaerfe:
       die drei Prozent Durchsicht sieht niemand, aber sie haengen die
       Lesbarkeit des Menues an eine Ebenenberechnung, die schon im Test
       danebenlag — die Buehne schien mitten durch die Menuepunkte. Hinter
       einer deckenden Flaeche waere die Unschaerfe ohnehin unsichtbar,
       also faellt sie weg; das spart auf dem Handy zusaetzlich Rechenzeit. */
    background:var(--grund);
    border-bottom:1px solid var(--rand);
    padding:.6rem 1.2rem 1.2rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    /* visibility statt nur opacity: sonst bleiben die sieben Menuepunkte im
       geschlossenen Zustand mit der Tabulatortaste erreichbar, und der Fokus
       verschwindet fuer sieben Anschlaege hinter einer unsichtbaren Tafel.
       Der Uebergang wartet die Einblendung ab, damit nichts abrupt wegspringt. */
    visibility:hidden;
    transition:opacity .22s, transform .22s var(--kurve), visibility 0s linear .22s;
    max-height:calc(100dvh - var(--kopfhoehe)); overflow-y:auto;
  }
  .navi[data-offen="1"]{
    transform:none; opacity:1; pointer-events:auto; visibility:visible;
    transition:opacity .22s, transform .22s var(--kurve), visibility 0s;
  }
  /* Die Trennlinie unter dem letzten Menuepunkt bleibt stehen — sie ist
     zugleich die Kante ueber dem Aufruf und spart eine eigene Regel. */
  .navi a:not(.knopf){ padding:.85rem .6rem; border-bottom:1px solid var(--rand); font-size:1rem; }
  .navi .knopf{
    display:inline-flex; margin-top:1.1rem; justify-content:center;
    padding:.85rem 1.4rem; font-size:1rem;
  }

  .dreier{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .dreier figure:first-child{ grid-column:1; }
  .erfunden{ flex-direction:column; gap:.7rem; }
  .zusatz-zeile{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .zusatz-zeile span:last-child{ color:var(--akzent-text); }
}

@media (max-width: 560px){
  .huelle{ width:min(100% - 1.8rem, var(--breit)); }
  .ablauf{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  /* Am Handy laeuft der Strahl senkrecht an den Kreisen entlang. Dafuer stehen
     Kreis und Text nebeneinander statt untereinander. */
  .schritt{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:1rem; }
  .schritt .nr{ grid-row:span 2; margin-bottom:0; }
  .ablauf::before{ display:block; left:21px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .ablauf::after{
    display:block; left:20px; top:0; width:4px; height:var(--fuellung,0px);
    background:repeating-linear-gradient(180deg, var(--akzent) 0 150px, #FFE7BF 182px, var(--akzent) 214px);
    background-size:100% 214px; animation-name:strahl-fluss-senkrecht;
    transition:height .3s var(--kurve);
  }
  .strahl-kopf{ left:22px; top:var(--fuellung,0px); }
  .fuss-raster{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .mini-karten{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
  .mini-karten div{ padding:.45rem .4rem; font-size:.6rem; }
  .blase{ max-width:92%; }
  .filter,.reiter{
    /* Viele Chips auf schmalem Schirm: lieber waagerecht wischen als
       vier Zeilen Umbruch. Der Ueberlauf ist hier gewollt und lokal. */
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:.6rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;

    /* Der Rollbalken ist weg — ohne Ersatz sieht niemand, dass rechts noch
       Knoepfe stehen. Die Kante blendet deshalb weich aus. Der Vorgabewert
       gilt auch ohne JavaScript und stimmt beim Laden immer: auf dieser
       Breite laufen beide Reihen sicher ueber. Das Skript ersetzt ihn
       danach durch die Seite, auf der wirklich noch etwas liegt. */
    --wisch:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
    -webkit-mask-image:var(--wisch); mask-image:var(--wisch);
  }
  .filter[data-rand="rechts"],.reiter[data-rand="rechts"]{
    --wisch:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
  }
  .filter[data-rand="links"],.reiter[data-rand="links"]{
    --wisch:linear-gradient(90deg,transparent,#000 2.2rem);
  }
  .filter[data-rand="beides"],.reiter[data-rand="beides"]{
    --wisch:linear-gradient(90deg,transparent,#000 2.2rem,
                                  #000 calc(100% - 2.2rem),transparent);
  }
  /* „nein" heisst: nichts mehr zu holen, oder die Tastatur ist im Spiel —
     dann darf kein Fokusring hinter einem Verlauf verschwinden. */
  .filter[data-rand="nein"],.reiter[data-rand="nein"]{ --wisch:none; }
  .filter::-webkit-scrollbar,.reiter::-webkit-scrollbar{ display:none; }
  .betrag .zahl{ font-size:1.85rem; }
}

@media print{
  .kopf,.fortschritt,.band,.chat,.faecher-punkte,.filter,.reiter{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ── Kundenprojekte als Reiter (30.09.2026) ─────────────────────────────
   Je Betrieb genau drei Entwuerfe. auto-fill legte auf breiten Schirmen eine
   vierte, leere Spalte an; auto-fit mit drei festen Spalten ab 960 px zeigt
   die drei nebeneinander, darunter faellt es wie gewohnt um. Die Bilder
   sind Bildschirmfotos der Seiten und bleiben deshalb ungedimmt: die
   Gestaltung ist hier das, was gezeigt werden soll. */
#kundenprojekte .arbeiten-raster{ grid-template-columns:repeat(auto-fit,minmax(min(100%,296px),1fr)); }
@media (min-width:960px){
  #kundenprojekte .arbeiten-raster{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
#kundenprojekte .arbeit-bild img{ filter:none; object-position:top; }
#kundenprojekte .tafel{ padding-top:1.4rem; }
/* Ein Betrieb mit vier Entwuerfen (LAB, seit 01.10.2026): vier nebeneinander
   statt drei plus einer verwaisten Karte in der zweiten Reihe. Darunter
   faellt es ueber die Grundregel auf zwei mal zwei. */
@media (min-width:960px){
  #kundenprojekte .arbeiten-raster.vier{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}