/* Ersatzschriften mit angepasster Breite.
   Bis die eingebetteten Schriften dekodiert sind, setzt der Browser den Text
   in der Systemschrift. Die ist rund 10 % breiter als Familjen Grotesk — bei
   der H1 auf dem Handy reichte das für eine Zeile mehr, und wenn die echte
   Schrift dann ankam, sprang alles darunter um 40 px nach oben. Genau das
   misst Google als Layoutverschiebung. Mit size-adjust belegt der Platzhalter
   von Anfang an dieselbe Breite. */




















/* ============================================================
   D&D MUNICH — Referenz-Website
   Ein Dokument. Keine externen Requests außer den Schriften.
   ============================================================ */

/* --- 1. Paletten-Rohwerte. Standard = Graphit & Bernstein. ---
   Bis Version 21 unterschieden sich die vier Paletten praktisch nur in der
   Akzentfarbe: die Papiertöne lagen bei #f4f1ea / #f5f1ec / #f3f4f6 / #f1f3ef,
   die dunklen Gründe bei #12131a / #131018 / #0d1219 / #0c1310 — Unterschiede
   von zwei, drei Farbwerten, auf einem Handy schlicht nicht zu sehen. Damit
   war der Palettenschalter ein Schalter ohne sichtbare Wirkung.
   Jetzt trägt jede Palette ihren Farbton bis in die Flächen: Papier, Bühne
   und die drei dunklen Gründe sind spürbar eingefärbt. Graphit und Bernstein
   bleiben als Markenfarben unangetastet (#15171C / #F4F1EA / Akzent), nur ihre
   Nebentöne werden wärmer. Alle Kontraste sind nachgerechnet, nicht geschätzt. */
/* Standard ist seit 10/2026 die Hausfarbe der Marke: Tinte (#0F1D29), Patina und Kalk (#F2EFE8),
   wie auf Instagram. Patina im Hellmodus ist dunkler als im Markenpapier (#2F8574 hätte auf Kalk nur
   3,9:1), damit Text und Strahl 4,5:1 schaffen: #226B5B (5,5:1 auf Kalk). Bernstein, die alte
   Standardfarbe, bleibt als Palette erhalten. */
:root{
  --p-ink:#0f1d29; --p-paper:#f2efe8; --p-surface:#faf9f5; --p-stage:#dee4dc;
  --p-acc:#226b5b; --p-acc-lift:#4cb89c;
  --p-void:#0f1d29; --p-void-2:#172836; --p-void-3:#203342; --p-glow:#f2efe8;
}
:root[data-pal="bernstein"]{
  --p-ink:#15171c; --p-paper:#eee9dd; --p-surface:#fbfaf4; --p-stage:#e4dbc4;
  --p-acc:#8f4a06; --p-acc-lift:#e89b4c;
  --p-void:#16130a; --p-void-2:#211b12; --p-void-3:#2c241b; --p-glow:#f2ebdd;
}
:root[data-pal="burgund"]{
  --p-ink:#1e0f15; --p-paper:#f3d3da; --p-surface:#fbf1f3; --p-stage:#e8c0c9;
  --p-acc:#8e1f31; --p-acc-lift:#e08c98;
  --p-void:#170c11; --p-void-2:#24161d; --p-void-3:#32222b; --p-glow:#f6e0e5;
}
/* Moos: Grün in Grün wirkte eintönig, Messing (10/2026) sah aber aus wie Bernstein. Jetzt Farngrün:
   gelbgrün statt blaugrün (klar anders als Patina), hell und kräftig gegen den tiefen Moosgrund
   (10,6:1 dunkel), im Hellmodus #2F6A1E (5,2:1 auf dem Papier). */
:root[data-pal="moos"]{
  --p-ink:#0a1a13; --p-paper:#d6ebda; --p-surface:#effaf1; --p-stage:#c4dec7;
  --p-acc:#2f6a1e; --p-acc-lift:#9fd46b;
  --p-void:#0c1611; --p-void-2:#15211b; --p-void-3:#202f27; --p-glow:#dfeae2;
}

/* --- 2. Semantische Token. Hell ist der Ausgangszustand. --- */
:root{
  --bg:var(--p-paper);
  --bg-raised:var(--p-surface);
  --bg-sunk:var(--p-stage);
  --fg:var(--p-ink);
  --fg-2:color-mix(in srgb, var(--p-ink) 72%, var(--p-paper));
  --fg-3:color-mix(in srgb, var(--p-ink) 69%, var(--p-paper));
  --acc:var(--p-acc);
  --on-acc:#ffffff;
  --line:color-mix(in srgb, var(--p-ink) 16%, transparent);
  --line-soft:color-mix(in srgb, var(--p-ink) 8%, transparent);
  --veil:color-mix(in srgb, var(--p-ink) 4%, transparent);
  --plate:var(--p-ink);
  --on-plate:var(--p-paper);
  --danger:#b23a20;
  --shadow:0 1px 2px color-mix(in srgb, var(--p-ink) 10%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--p-ink) 55%, transparent);

  --col:1180px;
  --gut:clamp(18px, 4vw, 40px);
  --rail:clamp(0px, 0px, 0px);

  --f-display:'Familjen Grotesk', 'FG Fallback', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Manrope', 'MR Fallback', ui-sans-serif, system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--p-void);
    --bg-raised:var(--p-void-2);
    --bg-sunk:color-mix(in srgb, var(--p-acc-lift) 5%, var(--p-void-3));
    --fg:var(--p-glow);
    --fg-2:color-mix(in srgb, var(--p-glow) 74%, var(--p-void));
    --fg-3:color-mix(in srgb, var(--p-glow) 66%, var(--p-void));
    --acc:var(--p-acc-lift);
    --on-acc:var(--p-void);
    --line:color-mix(in srgb, var(--p-glow) 18%, transparent);
    --line-soft:color-mix(in srgb, var(--p-glow) 9%, transparent);
    --veil:color-mix(in srgb, var(--p-glow) 5%, transparent);
    /* Im Hellmodus ist die Platte ein schwarzes Band mitten auf der Seite — ein
       klarer Materialwechsel, den Sezer ausdrücklich behalten will. Im
       Dunkelmodus war sie in Version 21 unsichtbar und in Version 22 mit 12 %
       Akzent gewaschen — dann aber waren die beiden größten Abschnitte der
       Seite ganzflächig orange, und die Überschriften verschwammen darin.
       Jetzt eine ruhige Anhebung ohne Akzent: dunkel bleibt dunkel, nur eine
       Stufe heller als der Seitengrund. */
    --plate:var(--p-void-2);
    --on-plate:var(--p-glow);
    --danger:#ef8a6a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 46px -28px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--p-void);
  --bg-raised:var(--p-void-2);
  --bg-sunk:color-mix(in srgb, var(--p-acc-lift) 5%, var(--p-void-3));
  --fg:var(--p-glow);
  --fg-2:color-mix(in srgb, var(--p-glow) 74%, var(--p-void));
  --fg-3:color-mix(in srgb, var(--p-glow) 66%, var(--p-void));
  --acc:var(--p-acc-lift);
  --on-acc:var(--p-void);
  --line:color-mix(in srgb, var(--p-glow) 18%, transparent);
  --line-soft:color-mix(in srgb, var(--p-glow) 9%, transparent);
  --veil:color-mix(in srgb, var(--p-glow) 5%, transparent);
  --plate:var(--p-void-2);
  --on-plate:var(--p-glow);
  --danger:#ef8a6a;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 46px -28px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* --- 3. Grundlagen --- */
*,*::before,*::after{box-sizing:border-box;}
/* 106.25% statt fester 17px: wer im Browser groessere Schrift eingestellt hat,
   bekommt sie jetzt auch. */
/* Die Seite rastete auf dem Handy seitlich aus: beim Wischen schob sie sich nach
   links, rechts blieb ein leerer Streifen, und aus dem Zoom kam man nicht zurück.
   Ursache: irgendwo stand Dekoration über den rechten Rand hinaus, und
   `overflow-x:hidden` stand nur auf <body>. Ein Überlauf auf <body> wird auf das
   Sichtfenster weitergereicht, wenn <html> ihn nicht abschneidet — gemessen war
   die Seite bei 390 px Sichtbereich real 483 px breit. `clip` statt `hidden`,
   weil `hidden` aus <html> einen Scroll-Container machen würde (bricht
   position:sticky und das sanfte Scrollen); `hidden` steht davor als Rückfall
   für ältere Safari-Versionen, die `clip` noch nicht kennen. */
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:106.25%;
  overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none;
}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.022em; line-height:1.06; text-wrap:balance;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
a{color:inherit; text-decoration:none;}
button,input,select,textarea{font:inherit; color:inherit;}
img,svg{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:2px;}
::selection{background:var(--acc); color:var(--on-acc);}

.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums;}
/* Die Eyebrows sind die Wegweiser der Seite: sie sagen, wo man gerade ist.
   Deshalb tragen sie die Akzentfarbe statt Grau, mehr Gewicht und etwas
   mehr Größe — sichtbar auf einen Blick, ohne die H2 zu entmachten. */
.eyebrow{
  font-family:var(--f-mono); font-weight:700; font-size:clamp(.8rem,2.2vw,.89rem); letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--acc); flex:none;}
.lede{font-size:clamp(1.08rem,1.75vw,1.24rem); color:var(--fg-2); max-width:60ch; line-height:1.66;}

.shell{width:100%; max-width:var(--col); margin-inline:auto; padding-inline:var(--gut);}
.band{padding-block:clamp(64px,10vw,124px); position:relative;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

/* Der Übergang zwischen den Abschnitten: kein Schnitt, ein Farbwechsel. */
.tone-sunk{background:var(--bg-sunk); transition:background-color .5s var(--ease);}
.tone-plate{
  --bg:var(--plate);
  --bg-raised:color-mix(in srgb, var(--on-plate) 7%, var(--plate));
  --bg-sunk:color-mix(in srgb, var(--on-plate) 12%, var(--plate));
  --fg:var(--on-plate);
  --fg-2:color-mix(in srgb, var(--on-plate) 76%, var(--plate));
  --fg-3:color-mix(in srgb, var(--on-plate) 68%, var(--plate));
  --acc:var(--p-acc-lift);
  --on-acc:var(--p-ink);
  --line:color-mix(in srgb, var(--on-plate) 22%, transparent);
  --line-soft:color-mix(in srgb, var(--on-plate) 11%, transparent);
  --veil:color-mix(in srgb, var(--on-plate) 6%, transparent);
  --danger:#ef8a6a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -28px rgba(0,0,0,.8);
  background:var(--bg); color:var(--fg);
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
.tone-plate .mono-plate{background:var(--acc); color:var(--on-acc);}
.seam{height:clamp(40px,7vw,86px); background:linear-gradient(var(--from,var(--bg)), var(--to,var(--bg-sunk)));}
/* Vor dem Kontaktblock die doppelte Strecke: der Wechsel auf die dunkle Platte
   soll nicht als Kante kommen, sondern als Verlauf. */
.seam.soft{height:clamp(78px,13vw,164px);}

/* --- Seitentrenner (Regeln: EFFEKT-REGELN.md) ------------------------------
   Ein Trenner sitzt in der Fuge zwischen zwei Bereichen, also in der Mitte zwischen
   dem letzten Inhalt oben und der ersten Zeile unten. Abwechselnd Lichtstrahl und
   Logo; das Skript entscheidet je Palette und Helligkeit, ob der Strahl genug
   Kontrast hat (sonst Logo). Länge: so breit wie der Inhalt, also auf Querformat und
   iPad länger als auf dem Handy. */
.seam{position:relative; z-index:2;}
/* Eine Fuge mit Trenner ist höher: mehr Luft und ein längerer Farbverlauf, damit der Trenner die Seite
   sichtbar teilt und nicht gedrängt wirkt. Ohne sichtbaren Trenner bleibt die Fuge normal hoch. */
.seam:has(> .dv:not([data-kind="none"])){height:clamp(72px,11vw,140px);}
.seam.soft:has(> .dv:not([data-kind="none"])){height:clamp(96px,14vw,180px);}
.dv{
  --ink:var(--fg);
  position:absolute; left:0; right:0; top:50%; transform:translateY(calc(-50% + var(--dy, 0px)));
  display:flex; justify-content:center; pointer-events:none;
}
.dv-beam,.dv-logo{width:min(calc(100% - 2 * var(--gut)), var(--col));}
.dv[data-kind="none"]{display:none;}
.dv:not([data-kind="effect"]) .dv-beam{display:none;}
.dv[data-kind="effect"] .dv-logo{display:none;}

/* Strahl: Das Skript setzt --p (Ausdehnung 0 bis 1) und --o (Helligkeit) am .streak. Vorher und
   nachher ist nichts zu sehen. Vier Lagen: heller Kern, Akzentkern 3 px, enger und weiter Schein. */
.dv-beam{height:44px; display:flex; align-items:center;}
.dv .streak{--p:0; --o:0; position:relative; display:block; width:100%; height:3px;}
.dv .lit{
  position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); pointer-events:none;
  opacity:var(--o);
  background:
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--acc) 35%, #fff) 14%, color-mix(in srgb, var(--acc) 35%, #fff) 86%, transparent 100%) center / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0, var(--acc) 10%, var(--acc) 90%, transparent 100%) center / 100% 3px no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--acc) 75%, transparent), transparent) center / 100% 36% no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--acc) 38%, transparent), transparent) center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent calc(50% - 1.2% - var(--p) * 52% - 7%), #000 calc(50% - 1.2% - var(--p) * 52%), #000 calc(50% + 1.2% + var(--p) * 52%), transparent calc(50% + 1.2% + var(--p) * 52% + 7%));
  mask-image:linear-gradient(90deg, transparent calc(50% - 1.2% - var(--p) * 52% - 7%), #000 calc(50% - 1.2% - var(--p) * 52%), #000 calc(50% + 1.2% + var(--p) * 52%), transparent calc(50% + 1.2% + var(--p) * 52% + 7%));
}

/* Hellmodus / heller Grund: derselbe Strahl, aber „umgekehrt": dunkel statt leuchtend. Kern in der
   dunklen Akzentfarbe der Palette (Bernstein: tiefes Braun-Orange, Burgund: Weinrot, Tinte: Nachtblau,
   Moos: Tannengrün), der Schein ein weicher Schatten in derselben Farbe statt eines Lichthofs. */
.dv[data-tone="light"] .lit{
  background:
    linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--acc) 70%, #000) 14%, color-mix(in srgb, var(--acc) 70%, #000) 86%, transparent 100%) center / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0, var(--acc) 10%, var(--acc) 90%, transparent 100%) center / 100% 3px no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--acc) 40%, transparent), transparent) center / 100% 36% no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--acc) 16%, transparent), transparent) center / 100% 100% no-repeat;
}

/* Logo-Trenner: zwei Linien zur Mitte, das Zeichen dazwischen. Beim Hereinscrollen
   wachsen die Linien aus der Mitte, das Zeichen blendet ein. */
.dv-logo{display:flex; align-items:center; gap:clamp(14px,3vw,30px); color:var(--ink);}
.dv-logo .brule{flex:1 1 auto; min-width:0; height:2px; opacity:.7;}
.dv-logo .brule.l{background:linear-gradient(90deg, transparent, currentColor); transform-origin:100% 50%;}
.dv-logo .brule.r{background:linear-gradient(270deg, transparent, currentColor); transform-origin:0 50%;}
.dv-logo .bmark{flex:none; width:clamp(56px,8vw,88px); height:auto; aspect-ratio:132/100; opacity:.75;}
.js .dv-logo .brule{transform:scaleX(0);}
.js .dv-logo .bmark{opacity:0; transform:scale(.82);}
.js .dv.go .dv-logo .brule{transform:scaleX(1); transition:transform 1.6s var(--ease);}
.js .dv.go .dv-logo .bmark{opacity:.75; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease);}
@media (prefers-reduced-motion:reduce){
  .dv-beam{display:none !important;} .dv-logo{display:flex !important;}
  .js .dv-logo .brule{transform:none;} .js .dv-logo .bmark{opacity:.75; transform:none;}
}

/* --- 5. Kopfzeile --- */
.mast{
  position:fixed; top:0; left:0; right:0; z-index:90;
  /* Grund der Kopfzeile mit einem Hauch Akzentfarbe gewaschen, damit die Leiste
     beim Palettenwechsel mitgeht statt neutral stehen zu bleiben. */
  background:color-mix(in srgb, color-mix(in srgb, var(--acc) 7%, var(--bg)) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .5s var(--ease);
}
.mast.stuck{border-bottom-color:var(--line-soft);}
.mast-in{display:flex; align-items:center; gap:clamp(10px,2vw,26px); height:clamp(58px,7vw,70px);}
.brand{display:flex; align-items:center; gap:11px; flex:none;}
.brand svg{color:var(--fg); width:34px; height:26px; transition:color .5s var(--ease);}
.brand>span{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:26px;}
.brand .wm{font-family:'Sora', var(--f-display); font-weight:700; font-size:.86rem; letter-spacing:-.02em; line-height:1; white-space:nowrap;}
/* Der Ortszusatz trägt die Akzentfarbe: damit ändert sich beim Palettenwechsel
   auch etwas in der Kopfzeile, nicht nur weiter unten auf der Seite. Das Zeichen
   selbst bleibt einfarbig — Markenvorgabe, drei Fassungen, keine vierte. */
.brand .loc{display:block; font-family:var(--f-display); font-weight:500; font-size:.46rem; line-height:1; letter-spacing:.32em; color:var(--acc); margin-top:2px; transition:color .5s var(--ease);}
@media (max-width:430px){.brand .wm{font-size:.75rem;} .brand svg{width:28px;height:21px;}}

.nav{display:flex; gap:clamp(12px,1.9vw,26px); margin-left:auto; align-items:center;}
.nav a{
  font-size:.9rem; color:var(--fg-2); position:relative; padding-block:6px;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--fg);}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);}
@media (max-width:860px){.nav{display:none;}}

.tools{display:flex; align-items:center; gap:6px; margin-left:auto;}
@media (min-width:861px){.tools{margin-left:clamp(12px,2vw,24px);}}
.tbtn{
  display:grid; place-items:center; width:36px; height:36px; border-radius:7px;
  background:transparent; border:1px solid var(--line); cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.tbtn:hover{background:var(--veil); border-color:var(--acc);}
.tbtn:active{transform:scale(.94);}
.tbtn svg{width:16px; height:16px; color:var(--fg-2);}
.lang{
  display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; height:36px;
}
.lang button{
  background:transparent; border:0; cursor:pointer; padding:0 9px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:var(--fg-3);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
/* Die aktive Sprache trägt die Akzentfarbe statt Schwarz auf Weiß — zweite
   Stelle in der Kopfzeile, an der der Palettenwechsel sichtbar wird. */
.lang button[aria-pressed="true"]{background:var(--acc); color:var(--on-acc);}
.cta-top{
  background:var(--acc); color:var(--on-acc); border:0; border-radius:7px; cursor:pointer;
  font-family:var(--f-body); font-weight:600; font-size:.86rem; padding:0 15px; height:36px;
  transition:filter .2s var(--ease), transform .2s var(--ease);
}
.cta-top:hover{filter:brightness(1.1);} .cta-top:active{transform:scale(.96);}
@media (max-width:640px){.cta-top{display:none;}}

/* Menü für schmale Geräte */
.burger{display:none;}
@media (max-width:860px){.burger{display:grid;}}
.sheet{
  position:fixed; inset:0; z-index:95; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 var(--gut);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.sheet[data-open="true"]{opacity:1; visibility:visible;}
.sheet a{
  font-family:var(--f-display); font-size:clamp(1.7rem,8vw,2.6rem); font-weight:600; letter-spacing:-.03em;
  padding-block:10px; border-bottom:1px solid var(--line-soft); display:flex; align-items:baseline; gap:14px;
}
.sheet a .num{font-family:var(--f-mono); font-size:.6rem; color:var(--fg-3); letter-spacing:.14em; margin-left:auto;}
.sheet .close{position:absolute; top:calc(clamp(58px,7vw,70px)/2 - 18px); right:var(--gut);}
/* Kleine Marke oben im ausklappbaren Menü: reine Orientierung, damit man
   auch bei geöffnetem Vollbild-Menü noch weiß, wo man ist — keine Farbe,
   kein weiteres Element, nur die Wortmarke etwas kleiner als im Kopfbereich. */
.sheet .sbrand{
  position:absolute; top:calc(clamp(58px,7vw,70px)/2 - 13px); left:var(--gut);
  display:flex; align-items:center; gap:9px;
}
.sheet .sbrand svg{color:var(--fg); width:26px; height:20px;}
.sheet .sbrand span{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:20px;}
.sheet .sbrand .wm{font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:-.02em; line-height:1; white-space:nowrap; color:var(--fg);}
.sheet .sbrand .loc{display:block; font-family:var(--f-display); font-weight:500; font-size:.4rem; line-height:1; letter-spacing:.3em; color:var(--acc); margin-top:2px;}
/* Mini-Kontaktzeile ganz unten im Menü: für den Fall, dass jemand direkt
   anrufen oder schreiben will, statt sich erst zum Kontaktabschnitt
   durchzuklicken. Dezent, eine Zeile, keine eigene Fläche. */
.sheet .scontact{
  position:absolute; left:var(--gut); right:var(--gut); bottom:calc(clamp(58px,7vw,70px)/2 - 11px);
  display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--f-mono); font-size:.72rem;
  color:var(--fg-3);
}
.sheet .scontact a{
  font-family:var(--f-mono); font-size:.72rem; font-weight:400; letter-spacing:0; padding:0; border:0;
  color:var(--fg-3); display:inline; align-items:initial; gap:0;
}


/* --- 6. Hero --- */
.hero{padding-top:clamp(104px,15vw,168px); padding-bottom:clamp(52px,8vw,96px); position:relative; overflow:hidden;}
.hero::after{
  content:""; position:absolute; right:-14%; top:-24%; width:min(62vw,720px); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 66%);
  pointer-events:none; z-index:0; transition:background .5s var(--ease);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,64px); align-items:center;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr; gap:34px;}}
.hero h1{font-size:clamp(2.35rem,6.6vw,4.5rem); line-height:.99; margin-top:20px; max-width:15ch;}
.hero h1 em{font-style:normal; color:var(--acc); transition:color .5s var(--ease);}
.hero .lede{margin-top:22px;}
.hero .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center;}
.hero .facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:38px;
  border-top:1px solid var(--line); text-align:center;
}
.hero .facts div{
  padding:20px 8px 4px; border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.hero .facts div:last-child{border-right:0;}
@media (max-width:620px){
  .hero .facts{grid-template-columns:1fr 1fr; row-gap:6px;}
  .hero .facts div:nth-child(2n){border-right:0;}
  .hero .facts div:nth-child(-n+2){border-bottom:1px solid var(--line-soft); padding-bottom:16px;}
}
.hero .facts b{display:block; font-family:var(--f-display); font-size:clamp(1.7rem,3.4vw,2.15rem); font-weight:600; letter-spacing:-.025em; line-height:1; white-space:nowrap;}
.hero .facts span{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); line-height:1.55; display:block; max-width:17ch;}

.btn{
  display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer; border-radius:7px;
  font-family:var(--f-body); font-weight:600; font-size:.93rem; padding:13px 22px;
  background:var(--acc); color:var(--on-acc); position:relative; overflow:hidden;
  transition:filter .2s var(--ease), transform .18s var(--ease);
}
.btn:hover{filter:brightness(1.1);} .btn:active{transform:scale(.97);}
.btn svg{width:15px; height:15px; transition:transform .28s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-ghost{
  background:transparent; color:var(--fg); border:1px solid var(--line); padding:12px 20px;
}
.btn-ghost:hover{border-color:var(--acc); background:var(--veil); filter:none;}

/* Der lebende Beweis im Hero: eine Miniaturseite, die sich selbst umbaut. */
.proof{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raised); box-shadow:var(--shadow);
  overflow:hidden; transition:background-color .5s var(--ease), border-color .5s var(--ease);
}
.proof-bar{display:flex; align-items:center; gap:7px; padding:9px 11px; background:var(--bg-sunk); border-bottom:1px solid var(--line-soft);}
.proof-bar i{width:7px; height:7px; border-radius:50%; background:var(--line); flex:none;}
.proof-url{
  margin-left:6px; font-family:var(--f-mono); font-size:.6rem; color:var(--fg-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proof-live{
  margin-left:auto; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.12em; color:var(--acc);
  display:flex; align-items:center; gap:5px; flex:none;
}
.proof-live::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--acc); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.proof-body{padding:16px 18px 20px; min-height:242px; display:flex; flex-direction:column;}
.proof-eyebrow{font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acc);}
.proof-h{font-family:var(--f-display); font-size:1.28rem; font-weight:600; line-height:1.13; margin-top:8px; letter-spacing:-.02em;}
.proof-p{font-size:.76rem; color:var(--fg-2); margin-top:8px; line-height:1.55;}
.proof-row{display:flex; gap:7px; margin-top:14px;}
.proof-chip{font-size:.62rem; padding:5px 9px; border:1px solid var(--line); border-radius:2px; color:var(--fg-2);}
.proof-cta{margin-top:auto; display:flex; gap:8px; align-items:center; padding-top:16px;}
.proof-cta b{background:var(--acc); color:var(--on-acc); font-size:.66rem; font-weight:600; padding:7px 12px; border-radius:2px;}
.proof-cta span{font-size:.66rem; color:var(--fg-3);}
.proof-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px;}
.proof-tile{
  aspect-ratio:4/3; border-radius:2px; border:1px solid var(--line-soft);
  background:
    linear-gradient(148deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 62%),
    linear-gradient(320deg, color-mix(in srgb, var(--fg) 12%, transparent), transparent 58%),
    var(--bg-sunk);
}
.proof-tile:nth-child(2){background:
    linear-gradient(148deg, color-mix(in srgb, var(--acc) 42%, transparent), transparent 70%),
    linear-gradient(20deg, color-mix(in srgb, var(--fg) 8%, transparent), transparent 60%),
    var(--bg-sunk);}
.proof-tile:nth-child(3){background:
    linear-gradient(200deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%),
    linear-gradient(10deg, color-mix(in srgb, var(--fg) 16%, transparent), transparent 64%),
    var(--bg-sunk);}
.fade-swap{animation:fadeSwap .5s var(--ease);}
@keyframes fadeSwap{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}}

/* --- 7. Abschnittskopf --- */
.head{max-width:66ch; margin-bottom:clamp(30px,5vw,52px);}
.head h2{font-size:clamp(1.85rem,4.6vw,3.05rem); margin-top:16px;}
.head .lede{margin-top:16px;}

/* --- 8. Über uns / Ziel / Transparenz --- */
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.6vw,26px);}
@media (max-width:800px){.split{grid-template-columns:1fr;}}
.pane{
  border:1px solid var(--line); border-radius:10px; padding:clamp(20px,3vw,30px);
  display:flex; flex-direction:column; gap:12px; background:var(--bg-raised);
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
}
.pane.now{border-color:var(--acc); background:color-mix(in srgb, var(--acc) 6%, var(--bg-raised));}
.pane h3{font-size:1.42rem; font-weight:700;}
.pane p{font-size:1.02rem; color:var(--fg-2);}
.stepnote{margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft); font-size:.95rem; color:var(--fg-2);}
.stepline{display:flex; flex-direction:column; gap:0; margin-top:6px;}
.step{display:grid; grid-template-columns:34px 1fr; gap:15px; padding-block:13px; border-bottom:1px solid var(--line-soft);}
.step:last-child{border-bottom:0;}
.step .n{font-family:var(--f-display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em; color:var(--acc); padding-top:1px; font-variant-numeric:tabular-nums;}
.step b{font-weight:600; font-size:1.03rem; display:block;}
.step span{font-size:.92rem; color:var(--fg-3); display:block; margin-top:1px;}
.step[data-state="now"] b::after{
  content:attr(data-badge); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; font-weight:500;
  background:var(--acc); color:var(--on-acc); padding:3px 9px; border-radius:3px; margin-left:11px; vertical-align:2px;
}
.honest{
  margin-top:clamp(20px,3vw,30px); border-left:3px solid var(--acc); padding:20px 24px;
  background:var(--veil); border-radius:0 10px 10px 0;
}
.honest h3{font-size:1.24rem; font-weight:700; margin-bottom:10px;}
.honest ul{display:flex; flex-direction:column; gap:9px;}
.honest li{font-size:1rem; color:var(--fg-2); padding-left:22px; position:relative;}
.honest li::before{
  content:""; position:absolute; left:0; top:.62em; width:11px; height:1.5px; background:var(--acc);
}

.founders{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.6vw,26px); margin-top:clamp(20px,3vw,30px);}
/* Die Gründerkarten stehen jetzt als Spalte neben "Heute", nicht mehr als
   eigene Reihe darunter — spart auf dem Handy rund einen Bildschirm. */
.founders-col{display:flex; flex-direction:column; gap:clamp(16px,2.6vw,26px);}
.founders-col .founder{flex:1 1 auto;}
.founders-col .namenote{margin:0; font-size:.9rem; line-height:1.5; color:var(--fg-3);}
@media (max-width:640px){.founders{grid-template-columns:1fr;}}
.founder{display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--bg-raised);}
.mono-plate{
  width:66px; height:66px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:var(--plate); color:var(--on-plate);
  font-family:var(--f-display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em;
}
.founder b{display:block; font-family:var(--f-display); font-size:1.22rem; font-weight:700;}
.founder .role{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-top:3px;}
.founder p{font-size:.95rem; color:var(--fg-2); margin-top:9px;}

/* --- 9. Werkbank: das drehbare Band --- */
.stage-wrap{position:relative; margin-top:8px;}
.ribbon{
  position:relative; height:clamp(400px, 56vw, 600px); perspective:1500px; overflow:hidden;
  touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
}
.stage-wrap{margin-inline:calc(var(--gut) * -1);}
/* Auf breiten Bildschirmen blieben links und rechts der 1180px-Spalte grosse
   schwarze Flaechen stehen. Die Buehne bricht dort aus der Spalte aus und nutzt
   die Breite; Steuerung, Hinweis und CTA bleiben in der Spalte. */
/* Auf grossen Karten nimmt das Fenster nur noch gut zwei Drittel der Breite ein.
   Damit bleibt vom Motiv daneben etwas zu sehen — Rolltor, Zahnraeder, Blaetter. */
@media (min-width:1240px){
  .slat .mini[data-fk] .fk-win{width:68%;}
  .slat .mini[data-fk="physio"] .fk-win{width:76%; align-self:center;}
  .proof-shell .mini[data-fk] .fk-win{width:82%;}
  .proof-shell .mini[data-fk="physio"] .fk-win{align-self:center;}
}
@media (min-width:1240px){
  .stage-wrap{width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);}
  .stage-wrap .ribbon-ctrl,.stage-wrap .hint,.stage-wrap .acts{
    max-width:var(--col); margin-inline:auto;
  }
}
.stage-wrap .ribbon-ctrl,.stage-wrap .hint,.stage-wrap .acts{padding-inline:var(--gut);}
.ribbon:active{cursor:grabbing;}
.ribbon-track{position:absolute; inset:0; transform-style:preserve-3d;}
.slat{
  position:absolute; top:50%; left:50%; width:min(74vw, clamp(310px, 34vw, 620px));
  transform-style:preserve-3d; will-change:transform, opacity;
  transition:transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
}
.ribbon.dragging .slat{transition:none;}
.slat .mini{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow);
}
.slat[aria-hidden="true"]{pointer-events:none;}
.mini-bar{display:flex; align-items:center; gap:6px; padding:7px 9px; background:var(--bg-sunk); border-bottom:1px solid var(--line-soft);}
.mini-bar i{width:5px; height:5px; border-radius:50%; background:var(--line);}
.mini-bar span{font-family:var(--f-mono); font-size:.53rem; color:var(--fg-3); margin-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mini-nav{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--line-soft);}
.mini-nav .lg{font-family:var(--f-display); font-weight:700; font-size:.62rem; letter-spacing:-.01em;}
.mini-nav .lk{display:flex; gap:8px;}
.mini-nav .lk i{width:17px; height:3px; border-radius:2px; background:var(--line); display:block;}
.mini-nav .bt{width:34px; height:12px; border-radius:2px; background:var(--acc);}
.mini-hero{padding:14px 12px 16px; display:flex; flex-direction:column; gap:8px;}
.mini-hero .mh{font-family:var(--f-display); font-size:.94rem; font-weight:600; line-height:1.14; letter-spacing:-.02em;}
.mini-hero p{font-size:.62rem; color:var(--fg-3); line-height:1.5;}
.mini-hero .b1{align-self:flex-start; background:var(--acc); color:var(--on-acc); font-size:.56rem; font-weight:600; padding:6px 11px; border-radius:2px;}
.mini-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:0 12px 12px;}
.mini-strip div{
  aspect-ratio:1; border-radius:2px; display:grid; place-items:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--acc) 12%, transparent), transparent 64%), var(--bg-sunk);
}
.mini-strip div:nth-child(2){background:linear-gradient(150deg, color-mix(in srgb, var(--acc) 38%, transparent), transparent 72%), var(--bg-sunk);}
.mini-strip div:nth-child(3){background:linear-gradient(210deg, color-mix(in srgb, var(--fg) 14%, transparent), transparent 62%), var(--bg-sunk);}
.mini-strip span{font-family:var(--f-mono); font-size:.44rem; color:var(--fg-3); letter-spacing:.06em;}
.mini-foot{padding:9px 12px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center;}
.mini-foot span{font-family:var(--f-mono); font-size:.48rem; color:var(--fg-3);}
.slat .caption{
  margin-top:14px; display:flex; flex-direction:column; gap:3px; text-align:center;
  opacity:0; transition:opacity .4s var(--ease);
}
.slat[data-active="true"] .caption{opacity:1;}
.slat .caption b{font-family:var(--f-display); font-size:1.1rem; font-weight:600;}
.slat .caption span{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);}

.ribbon-ctrl{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px;}
.dots{display:flex; gap:0;}
/* Der sichtbare Punkt bleibt klein, die Schaltfläche darunter ist 36x44 groß.
   Vorher waren es 8x8 px — auf dem Handy praktisch nicht zu treffen. */
.dots button{
  width:36px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.dots button::before{
  content:""; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--fg-3); background:transparent;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.dots button[aria-current="true"]::before{background:var(--acc); border-color:var(--acc); transform:scale(1.3);}
.dots button:hover::before{border-color:var(--acc);}
.arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer;
  display:grid; place-items:center; transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.arrow:hover{border-color:var(--acc); background:var(--veil);}
.arrow svg{width:15px; height:15px; color:var(--fg-2);}
.hint{text-align:center; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3); margin-top:12px;}

/* --- 10. Farbwirkung --- */
.pal-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,20px);}
@media (max-width:880px){.pal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:460px){.pal-grid{grid-template-columns:1fr;}}
.pal{
  position:relative;
  text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--bg-raised); cursor:pointer;
  padding:0; display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pal .swatch{overflow:hidden; border-radius:9px 9px 0 0;}
/* Kein automatischer Farbwechsel: der reißt einem den Ton unter den Augen weg,
   während man liest, und niemand hat darum gebeten. Stattdessen zeigen die noch
   nicht gewählten Paletten selbst, dass man sie antippen kann — ein ruhiger
   Ring, versetzt durchlaufend, plus eine Marke auf einer davon. Beim ersten
   Antippen ist Schluss, und nach zwölf Sekunden hört es von allein auf. */
@keyframes palBeat{
  0%,100%{box-shadow:0 0 0 0 transparent;}
  30%{box-shadow:0 0 0 5px color-mix(in srgb, var(--acc) 30%, transparent);}
  65%{box-shadow:0 0 0 10px transparent;}
}
.pal.tapme{animation:palBeat 2.8s var(--ease) infinite;}
.pal.tapme::after{
  content:attr(data-tap); position:absolute; top:-10px; right:12px; z-index:2;
  font-family:var(--f-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--acc); color:var(--on-acc); padding:4px 9px; border-radius:2px; white-space:nowrap;
  opacity:0; transform:translateY(-4px); transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.pal.tapme.tapmark::after{opacity:1; transform:none; transition-delay:.45s;}
@media (prefers-reduced-motion:reduce){.pal.tapme{animation:none;}}
.pal:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.pal[aria-pressed="true"]{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc);}
.pal .swatch{height:64px; display:flex;}
.pal .swatch i{flex:1;}
.pal .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.pal .body b{font-family:var(--f-display); font-size:1rem; font-weight:600; display:flex; align-items:center; gap:8px;}
.pal[aria-pressed="true"] .body b::after{content:var(--activeLbl,"aktiv"); font-family:var(--f-mono); font-size:.5rem; letter-spacing:.1em; background:var(--acc); color:var(--on-acc); padding:2px 5px; border-radius:2px;}
.pal .body p{font-size:.9rem; color:var(--fg-2); line-height:1.5;}
.pal .body .who{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-top:auto; padding-top:8px;}

/* --- 11. Effekt-Werkstatt --- */
.fx-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,20px);}
@media (max-width:900px){.fx-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.fx-grid{grid-template-columns:1fr;}}
.fx{border:1px solid var(--line); border-radius:10px; background:var(--bg-raised); padding:18px; display:flex; flex-direction:column; gap:12px;}
.fx .lbl{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3);}
.fx .desc{font-size:.92rem; color:var(--fg-2); margin-top:auto;}
.fx .box{height:118px; border-radius:3px; background:var(--bg-sunk); position:relative; overflow:hidden; display:grid; place-items:center;}

/* Vorher/Nachher */
.ba{cursor:ew-resize; touch-action:none;}
.ba .layer{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:14px;}
.ba .old{background:#8f8b82; color:#efece6;}
.ba .new{background:var(--plate); color:var(--on-plate); clip-path:inset(0 0 0 var(--x,50%));}
.ba .t1{font-family:'Times New Roman',serif; font-size:.82rem; font-weight:700;}
.ba .t2{font-family:var(--f-display); font-size:.86rem; font-weight:600; letter-spacing:-.02em;}
.ba .s{font-size:.56rem; opacity:.72;}
.ba .bar{position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; background:var(--acc);}
.ba .knob{position:absolute; top:50%; left:var(--x,50%); transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; background:var(--acc); color:var(--on-acc); display:grid; place-items:center; font-size:.6rem;}

/* Aufscheinen */
.reveal-demo{display:flex; flex-direction:column; gap:5px; padding:14px; width:100%;}
.reveal-demo span{
  display:block; height:9px; border-radius:2px; background:var(--line);
  transform-origin:left; animation:sheen 3.2s var(--ease) infinite;
}
.reveal-demo span:nth-child(1){width:82%; animation-delay:0s;}
.reveal-demo span:nth-child(2){width:64%; animation-delay:.14s;}
.reveal-demo span:nth-child(3){width:73%; animation-delay:.28s;}
.reveal-demo span:nth-child(4){width:40%; background:var(--acc); animation-delay:.42s;}
@keyframes sheen{0%{opacity:.18; transform:translateY(5px);}22%,72%{opacity:1; transform:none;}100%{opacity:.18; transform:translateY(5px);}}

/* Magnet-Knopf */
.magnet{
  background:var(--acc); color:var(--on-acc); border:0; border-radius:7px; padding:12px 20px;
  font-weight:600; font-size:.84rem; cursor:pointer; will-change:transform;
  transition:transform .32s var(--ease);
}

/* Zähler */
.counter{font-family:var(--f-display); font-size:2.5rem; font-weight:600; letter-spacing:-.03em; color:var(--acc); font-variant-numeric:tabular-nums;}
.counter-sub{font-family:var(--f-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); text-align:center;}

/* Karussell-Kacheln */
.marquee{width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee ul{display:flex; gap:8px; width:max-content; animation:slide 22s linear infinite;}
.marquee li{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.06em; padding:6px 10px; border:1px solid var(--line); border-radius:2px; color:var(--fg-2); white-space:nowrap;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Formularvorschau */
.mini-form{width:100%; padding:14px; display:flex; flex-direction:column; gap:7px;}
.mini-form i{display:block; height:22px; border-radius:2px; border:1px solid var(--line); background:var(--bg-raised);}
.mini-form i.ok{border-color:var(--acc); box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 18%, transparent);}
.mini-form b{align-self:flex-start; background:var(--acc); color:var(--on-acc); font-size:.56rem; padding:5px 11px; border-radius:2px;}

/* --- 12. Stimmen --- */
.voices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2.2vw,22px);}

.voice{
  border:1px solid var(--line); border-radius:10px; padding:clamp(20px,2.8vw,26px); background:var(--bg-raised);
  display:flex; flex-direction:column; gap:16px;
}
.voice q{
  font-family:var(--f-display); font-size:clamp(1.02rem,1.7vw,1.16rem); font-weight:500; line-height:1.38;
  letter-spacing:-.015em; quotes:"\201E" "\201C"; text-wrap:pretty;
}
.voice .by{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; border-top:1px solid var(--line-soft);}
.voice .by .mono-plate{width:40px; height:40px; font-size:.86rem;}
.voice .by b{font-size:.9rem; font-weight:600; display:block;}
.voice .by span{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);}
.voice.kunde{grid-column:1/-1; position:relative; border-color:color-mix(in srgb,var(--acc) 45%,var(--line)); padding:clamp(22px,3.6vw,40px);}
.voice.kunde::before{content:"\201E"; position:absolute; top:clamp(4px,1vw,10px); right:clamp(16px,3vw,34px); font-family:var(--f-display); font-size:clamp(4.5rem,9vw,7.5rem); line-height:1; color:var(--acc); opacity:.22; pointer-events:none;}
.kunde-tag{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc);}
.voice.kunde blockquote{margin:0; display:flex; flex-direction:column; gap:.8em; max-width:62ch;
  font-family:var(--f-display); font-size:clamp(1rem,1.55vw,1.14rem); font-weight:500; line-height:1.5; letter-spacing:-.01em; text-wrap:pretty;}
.voice.kunde blockquote p:first-child{font-size:1.12em; font-weight:600; line-height:1.4;}
.voice.kunde .by{flex-wrap:wrap; padding-top:16px;}
.kunde-link{margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px;
  font-size:.86rem; font-weight:600; color:var(--fg); text-decoration:none; transition:border-color .2s, color .2s;}
.kunde-link:hover,.kunde-link:focus-visible{border-color:var(--acc); color:var(--acc);}
.voice.kunde .by > div:not(.mono-plate){flex:1 1 220px; min-width:0;}
.kunde-hinweis{margin:0; font-size:.74rem; color:var(--fg-3);}
@media (max-width:640px){.voices{grid-template-columns:1fr;} .voice.kunde .by > div:not(.mono-plate){flex-basis:0;} .kunde-link{margin-left:0; flex-basis:100%; justify-content:center;}}
.voice.open{
  border-style:dashed; border-color:var(--acc); background:transparent;
  align-items:flex-start; justify-content:center; text-align:left; gap:12px;
}
.voice.open .slot{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc);}
.voice.open p{font-size:.9rem; color:var(--fg-2);}

/* --- 13. Kontakt --- */
.contact{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,54px); align-items:start;}
@media (max-width:900px){.contact{grid-template-columns:1fr;}}
form{display:flex; flex-direction:column; gap:16px;}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media (max-width:520px){.row2{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:6px;}
.field label,.field .fieldlabel{display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);}
.field label .req{color:var(--acc);}
.field input,.field select,.field textarea{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:7px; padding:12px 14px; width:100%;
  font-size:1rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .5s var(--ease);
}
.field textarea{resize:vertical; min-height:104px; font-family:var(--f-body);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}
.field[data-bad="true"] input,.field[data-bad="true"] select,.field[data-bad="true"] textarea{border-color:var(--danger);}
.field .err{font-size:.75rem; color:var(--danger); display:none;}
.field[data-bad="true"] .err{display:block;}
.slots{border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--veil);}
.slots > .cap{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);}
.slots > p{font-size:.8rem; color:var(--fg-3);}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:var(--fg-2);}
.consent input{width:24px; height:24px; margin-top:0; flex:none; accent-color:var(--acc);}
.formnote{font-size:.84rem; color:var(--fg-3);}
.formerr{border:1px solid var(--danger); border-left-width:3px; border-radius:3px; padding:11px 14px; color:var(--danger); font-size:.9rem;}
.formerr[hidden]{display:none;}
.sent{
  border:1px solid var(--acc); border-radius:10px; padding:24px; background:color-mix(in srgb, var(--acc) 7%, transparent);
  display:none; flex-direction:column; gap:10px;
}
.sent[data-on="true"]{display:flex; animation:fadeSwap .45s var(--ease);}
.sent h3{font-size:1.26rem;}
.sent p{font-size:.97rem; color:var(--fg-2);}
.sent .recap{font-family:var(--f-mono); font-size:.82rem; color:var(--fg-2); border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; gap:4px;}

.aside{display:flex; flex-direction:column; gap:22px;}
.card{border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--bg-raised); display:flex; flex-direction:column; gap:9px;}
.card h3{font-size:1.1rem;}
.card p,.card address{font-size:.96rem; color:var(--fg-2); font-style:normal; line-height:1.62;}
.card a.line{display:inline-block; padding-block:4px; border-bottom:1px solid var(--acc); color:var(--fg); transition:color .2s var(--ease);}
.card a.line:hover{color:var(--acc);}
.socials{display:flex; flex-wrap:wrap; gap:8px;}
.socials a{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:3px;
  padding:10px 14px; font-size:.9rem; transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.socials a:hover{border-color:var(--acc); background:var(--veil);}
.socials svg{width:15px; height:15px; color:var(--acc);}
.todo{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase;
  background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--acc) 16%,transparent) 0 7px, transparent 7px 14px);
  border:1px dashed var(--acc); color:var(--acc); padding:1px 6px; border-radius:2px; white-space:nowrap;
}

/* --- 14. Fußzeile --- */
.foot{border-top:1px solid var(--line); padding-block:38px 44px;}
.foot-in{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; justify-content:space-between;}
.foot .legal{font-size:.88rem; color:var(--fg-3); max-width:46ch; line-height:1.68;}
.foot nav{display:flex; flex-wrap:wrap; gap:16px;}
.foot nav button,.foot nav a{background:none; border:0; padding:7px 0; cursor:pointer; font-size:.82rem; color:var(--fg-2); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease);}
.foot nav button:hover,.foot nav a:hover{color:var(--acc); border-bottom-color:var(--acc);}

/* --- 15. Rechtliches als Überlagerung --- */
.modal{
  position:fixed; inset:0; z-index:120; display:none; background:color-mix(in srgb, var(--p-ink) 62%, transparent);
  backdrop-filter:blur(4px); padding:0;
}
.modal[data-open="true"]{display:block; animation:fadeSwap .3s var(--ease);}
.modal .sheetbox{
  position:absolute; inset:auto 0 0 0; max-height:88vh; overflow-y:auto; background:var(--bg);
  border-top:2px solid var(--acc); border-radius:16px 16px 0 0; padding:clamp(22px,4vw,42px) 0 60px;
  animation:riseIn .38s var(--ease);
}
@keyframes riseIn{from{transform:translateY(26px); opacity:0;} to{transform:none; opacity:1;}}
.modal h2{font-size:clamp(1.4rem,3.4vw,2rem); margin-bottom:6px;}
.modal h3{font-size:1.02rem; margin-top:24px; margin-bottom:6px;}
.modal p,.modal li{font-size:.9rem; color:var(--fg-2); line-height:1.7;}
.modal ul{display:flex; flex-direction:column; gap:6px; margin-top:6px; padding-left:18px; list-style:disc;}
.modal .x{position:sticky; top:0; float:right; margin-right:var(--gut);}
.modal dl{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; font-size:.9rem; margin-top:8px;}
.modal dt{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); padding-top:5px;}
.modal dd{margin:0; color:var(--fg-2);}

/* --- 16. Bewegung: aus dem Ruhezustand heraus, nie daraus hervor --- */
.rise{opacity:1; transform:none;}
.js .rise{opacity:.001; transform:translateY(18px); transition:opacity .62s var(--ease), transform .62s var(--ease);}
.js .rise.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js .rise{opacity:1 !important; transform:none !important;}
  #intro{display:none !important;}
}

/* --- 17. Wisch-Effekt beim Moduswechsel --- */
::view-transition-old(root),::view-transition-new(root){animation:none; mix-blend-mode:normal;}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:2; animation:wipeIn .55s var(--ease-io) both;}
@keyframes wipeIn{from{clip-path:circle(0% at var(--wx,50%) var(--wy,0%));} to{clip-path:circle(150% at var(--wx,50%) var(--wy,0%));}}


/* ============================================================
   ÜBERARBEITUNG 09/26 — Auftakt, Branchenmotive, Layouts,
   neue Effekte, Terminfenster, Blickfänger
   ============================================================ */

/* --- Auftakt: Kamerafahrt durch die Öffnung des rechten D --- */
/* Solange der Auftakt läuft, darf die Seite nicht wegrutschen. Wer nicht
   weiß, was gerade passiert, wischt sonst herum und landet mitten im
   Dokument statt oben im Hero. overflow:hidden allein reicht auf iOS nicht,
   deshalb kommt im Skript noch ein touchmove-Riegel dazu. */
html.introlock{scroll-behavior:auto !important;}
html.introlock, html.introlock body{overflow:hidden !important; overscroll-behavior:none; touch-action:none;}

/* Die Regeln der zweiten Auftakt-Fassung (camPan/camPush, #camHole) standen
   hier noch als Leiche herum und zeigten auf Elemente, die es nicht mehr gibt. */

/* --- Blickfänger: einmalig pulsierende Hinweise --- */
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent);}70%{box-shadow:0 0 0 11px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.tbtn.ping,.pal.ping{animation:ping 1.9s var(--ease) 3;}
.nudge{
  position:fixed; z-index:88; right:max(14px,var(--gut)); top:calc(clamp(58px,7vw,70px) + 10px);
  background:var(--acc); color:var(--on-acc); border:0; border-radius:3px; cursor:pointer;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; padding:8px 12px;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow);
  animation:nudgeIn .5s var(--ease) both;
}
.nudge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.6s infinite;}
@keyframes nudgeIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.nudge[hidden]{display:none !important;}
@media (max-width:760px){
  /* Nicht mehr unten über die volle Breite: dort liegt beim Scrollen der Daumen,
     und ein Fehlgriff hat einen quer durch die Seite katapultiert. */
  .nudge{top:calc(clamp(58px,7vw,70px) + 8px); right:10px; left:auto; font-size:.58rem; padding:7px 10px;}
}

/* --- Wortweiser Textaufbau --- */
.words span{display:inline-block; white-space:pre;}
.js .words span{opacity:.001; transform:translateY(.5em) rotate(1.4deg); transition:opacity .5s var(--ease), transform .55s var(--ease);}
.js .words.in span{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.js .words span{opacity:1 !important; transform:none !important;}}

/* --- Branchenmotive --- */
.motif{color:currentColor; display:block;}
.motif [stroke]{vector-effect:non-scaling-stroke;}

/* --- Entwurfskarten: sechs echte Layouts --- */
.slat .mini,.proof-shell .mini{
  background:var(--mini-bg); color:var(--mini-fg);
  display:flex; flex-direction:column; overflow:hidden;
}
/* Auf grossen Bildschirmen war die Karte hart auf 320px gedeckelt und wirkte
   verloren. Jetzt waechst sie mit, der Inhalt haengt als em daran. */
.slat .mini{height:clamp(286px, 28vw, 500px);}
.slat .mini[data-fk]{font-size:clamp(1rem, 1.5vw, 1.5rem);}
/* Die Karte im Kopfbereich hatte feste Hoehe bei freier Breite und wurde dadurch
   auf dem iPad 752x348 gezogen (Verhaeltnis 2,16 statt 0,73 im Band). Jetzt feste
   Form auf jedem Geraet, begrenzte Breite, mittig. */
.proof-shell{max-width:clamp(320px, 42vw, 620px); margin-inline:auto;}
.proof-shell .mini{aspect-ratio:1/1; height:auto; min-height:0;}
.mini{
  --mini-bg:var(--bg-raised); --mini-fg:var(--fg);
  --mini-dim:color-mix(in srgb, var(--mini-fg) 58%, var(--mini-bg));
  --mini-line:color-mix(in srgb, var(--mini-fg) 18%, transparent);
  background:var(--mini-bg); color:var(--mini-fg);
}
.mini.g-ink{--mini-bg:var(--plate); --mini-fg:var(--on-plate);}
.mini.g-sunk{--mini-bg:var(--bg-sunk);}
.mini.g-tint{--mini-bg:color-mix(in srgb, var(--acc) 13%, var(--bg-raised));}
.mini.g-bold{--mini-bg:var(--acc); --mini-fg:var(--on-acc);}
.mini-bar{background:color-mix(in srgb, var(--mini-fg) 9%, var(--mini-bg)); border-bottom:1px solid var(--mini-line);}
.mini-bar i{background:color-mix(in srgb, var(--mini-fg) 25%, transparent);}
.mini-bar span{color:var(--mini-dim);}
.mini-nav{border-bottom:1px solid var(--mini-line);}
.mini-nav .lk i{background:color-mix(in srgb, var(--mini-fg) 28%, transparent);}
.mini-hero p{color:var(--mini-dim);}
.mini-foot{border-top:1px solid var(--mini-line);}
.mini-foot span{color:var(--mini-dim);}
.mini-body{position:relative; flex:1; min-height:0; display:flex; flex-direction:column;}

/* L1 Vollbild-Motiv */
.lay-fill .mini-body{padding:0; justify-content:flex-end;}
.lay-fill .bgmotif{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; color:var(--acc);}
.lay-fill .bgmotif .motif{width:108%; height:108%; opacity:.34; transform:translate(6%,3%) rotate(-8deg);}
.lay-fill .fillwrap{position:relative; padding:16px 13px 14px; display:flex; flex-direction:column; gap:7px;}
.lay-fill .mh{font-size:1.02rem;}

/* L2 Split */
.lay-split .mini-body{flex-direction:row; align-items:stretch; padding:0;}
.lay-split .half{width:42%; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--acc) 22%, var(--mini-bg)); padding:10px;}
.lay-split .half .motif{width:100%; height:auto; opacity:.9;}
.lay-split .txt{padding:14px 13px; display:flex; flex-direction:column; gap:7px; justify-content:center;}

/* L3 Ruhig, zentriert */
.lay-calm .mini-body{align-items:center; text-align:center; padding:14px 16px 12px; gap:7px; justify-content:center;}
.lay-calm .rule{width:26px; height:2px; background:var(--acc);}
.lay-calm .motif{width:48px; height:48px; opacity:.6; color:var(--acc);}
.lay-calm .mh{font-size:.9rem; max-width:22ch;}

/* L4 Liste / Tabelle */
.lay-list .mini-body{padding:13px 13px 10px; gap:8px;}
.lay-list .rows{display:flex; flex-direction:column; margin-top:4px;}
.lay-list .r{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--mini-line); font-size:.6rem;}
.lay-list .r:last-child{border-bottom:0;}
.lay-list .r b{font-weight:600;}
.lay-list .r span{color:var(--mini-dim); font-family:var(--f-mono); font-size:.53rem;}
.lay-list .corner{position:absolute; right:11px; top:11px; width:34px; height:34px; opacity:.5;}

/* L5 Band */
.lay-strip .mini-body{padding:14px 0 12px; gap:11px;}
.lay-strip .mh,.lay-strip p,.lay-strip .b1{margin-inline:13px;}
.lay-strip .b1{align-self:flex-start;}
.lay-strip .rail{display:flex; gap:7px; padding-inline:13px; overflow:hidden;}
.lay-strip .rail div{
  flex:none; width:58px; aspect-ratio:3/4; border-radius:2px; display:grid; place-items:center; padding:7px;
  background:color-mix(in srgb, var(--acc) 16%, var(--mini-bg)); border:1px solid var(--mini-line);
}
.lay-strip .rail div:nth-child(even){background:color-mix(in srgb, var(--mini-fg) 8%, var(--mini-bg));}
.lay-strip .rail .motif{width:100%; height:auto; opacity:.85;}

/* L6 Überlagerung */
.lay-over .mini-body{padding:0;}
.lay-over .top{height:100px; flex:none; display:grid; place-items:center; overflow:hidden; background:color-mix(in srgb, var(--acc) 26%, var(--mini-bg));}
.lay-over .top .motif{width:80%; height:auto; opacity:.9; transform:rotate(-6deg);}
.lay-over .cardover{
  margin:-30px 13px 0; position:relative; background:var(--mini-bg); border:1px solid var(--mini-line);
  border-radius:3px; padding:12px; display:flex; flex-direction:column; gap:7px; box-shadow:0 8px 20px -14px rgba(0,0,0,.6);
}
.lay-over .rest{padding:10px 13px 12px; display:flex; gap:6px;}
.lay-over .rest i{flex:1; height:5px; border-radius:2px; background:color-mix(in srgb, var(--mini-fg) 14%, transparent);}

.mini-hero .b1,.lay-fill .b1,.lay-split .b1,.lay-calm .b1,.lay-over .b1{
  align-self:flex-start; background:var(--acc); color:var(--on-acc);
  font-size:.56rem; font-weight:600; padding:6px 11px; border-radius:2px;
}
.mini.g-bold .b1{background:var(--mini-fg); color:var(--mini-bg);}
/* Attrappen-Überschriften sind Bilder von Überschriften, keine echten.
   Als <h4> standen sie sechsmal vor der ersten <h2> der Seite. */
.mini .mh{font-family:var(--f-display); font-weight:600; line-height:1.14; letter-spacing:-.02em; font-size:.94rem; margin:0;}
.mini p{font-size:.62rem; line-height:1.5; color:var(--mini-dim);}
.mini .kick{font-family:var(--f-mono); font-size:.5rem; letter-spacing:.13em; text-transform:uppercase; color:var(--acc);}
.mini.g-bold .kick{color:var(--mini-fg); opacity:.75;}

/* --- Live-Vorschau im Hero nutzt dieselben Layouts --- */
.proof .mini{border:0; border-radius:0;}
.proof-shell{border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:var(--bg-raised);}

/* Die Schalter standen links, waehrend die Karte darueber mittig sitzt. */
.proof-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px;
  justify-content:center; max-width:clamp(320px, 42vw, 620px); margin-inline:auto;}
.proof-tabs button{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line); background:transparent; color:var(--fg-3); border-radius:2px;
  padding:5px 9px; cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.proof-tabs button[aria-current="true"]{color:var(--on-acc); background:var(--acc); border-color:var(--acc);}

/* --- Effekte: neue Auswahl --- */
.fx .box{height:126px;}
.fx.wide .box{height:206px;}
.fx.wide{grid-column:span 2;}
@media (max-width:560px){.fx.wide{grid-column:span 1;}}
/* Sechs Kacheln fuellten im dreispaltigen Raster nur sieben von neun Plaetzen —
   unten blieben zwei Luecken. Zwei weitere Kacheln nehmen jetzt doppelte Breite,
   damit stimmt die Rechnung (3 x 2 + 3 x 1 = 9). Auf dem Handy aendert das nichts,
   dort ist das Raster ohnehin einspaltig. */
@media (min-width:901px){.fx.wide2{grid-column:span 2;}}

/* Vorher / Nachher, scrollgesteuert */
.ba2{position:relative; overflow:hidden;}
.ba2 .pane{position:absolute; inset:0; display:grid; place-items:center; padding:10px;}
.ba2 .pane .inner{width:100%; height:100%; border-radius:2px; display:flex; flex-direction:column; gap:6px; padding:14px 16px 26px; overflow:hidden;}
.ba2 .old .inner{background:#6f6b63; color:#f2f0ec;}
.ba2 .new{clip-path:inset(0 0 0 var(--p,0%));}
.ba2 .new .inner{background:var(--plate); color:var(--on-plate);}
.ba2 .rowline{display:flex; align-items:center; gap:7px;}
.ba2 .old .t{font-family:'Times New Roman',serif; font-weight:700; font-size:.86rem;}
.ba2 .new .t{font-family:var(--f-display); font-weight:600; font-size:.98rem; letter-spacing:-.02em;}
.ba2 .s{font-size:.5rem; opacity:.75; font-family:var(--f-mono);}
.ba2 .old .pic{height:52px; background:repeating-linear-gradient(45deg,#5e5a53 0 5px,#6f6b63 5px 10px); border:1px solid #514e48; margin-top:auto;}
.ba2 .new .pic{height:52px; margin-top:auto; border-radius:2px; background:linear-gradient(140deg, color-mix(in srgb,var(--acc) 55%,transparent), transparent 70%), color-mix(in srgb,var(--on-plate) 8%,transparent); display:grid; place-items:center;}
.ba2 .new .pic .motif{width:40px; height:40px; opacity:.9;}
.ba2 .edge{position:absolute; top:0; bottom:0; left:var(--p,0%); width:2px; background:var(--acc); opacity:.9;}
.ba2 .tagline{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding:4px 8px; font-family:var(--f-mono); font-size:.48rem; letter-spacing:.1em; color:var(--fg-3); background:color-mix(in srgb,var(--bg-sunk) 82%, transparent);}

/* Neigung */
.tiltwrap{perspective:600px; width:100%; height:100%; display:grid; place-items:center;}
.tilt{
  width:78%; aspect-ratio:16/10; border-radius:3px; background:var(--bg-raised); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px; padding:11px; will-change:transform;
  transition:transform .35s var(--ease); transform-style:preserve-3d;
}
.tilt i{display:block; height:5px; border-radius:2px; background:var(--line);}
.tilt i:nth-child(1){width:64%;} .tilt i:nth-child(2){width:88%;} .tilt i:nth-child(3){width:40%; background:var(--acc);}
.tilt .badge{margin-top:auto; align-self:flex-start; font-family:var(--f-mono); font-size:.5rem; letter-spacing:.1em; color:var(--acc); transform:translateZ(22px);}

/* Drehendes Objekt */
.orbit{position:relative; width:104px; height:104px;}
.orbit .ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--line);}
.orbit .ring:nth-child(2){inset:16px; border-style:dashed;}
.orbit .spin{position:absolute; inset:0; animation:spin 14s linear infinite;}
.orbit .spin.rev{animation-direction:reverse; animation-duration:9s;}
.orbit .dot{position:absolute; top:-5px; left:50%; margin-left:-5px; width:10px; height:10px; border-radius:50%; background:var(--acc);}
.orbit .dot.sm{width:6px; height:6px; margin-left:-3px; top:13px; background:var(--fg-3);}
.orbit .core{position:absolute; inset:34px; border-radius:50%; background:var(--plate); color:var(--on-plate); display:grid; place-items:center;}
.orbit .core svg{width:20px; height:15px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Scheinwerfer */
.spot{position:relative; overflow:hidden; width:100%; height:100%; display:grid; place-items:center; cursor:crosshair;}
.spot .hidden-layer{
  position:absolute; inset:0; display:grid; place-items:center; padding:14px; text-align:center;
  background:var(--plate); color:var(--on-plate);
  -webkit-mask:radial-gradient(circle 54px at var(--mx,50%) var(--my,50%), #000 0 62%, transparent 72%);
  mask:radial-gradient(circle 54px at var(--mx,50%) var(--my,50%), #000 0 62%, transparent 72%);
}
.only-touch{display:none;}
@media (hover:none){.only-hover{display:none;} .only-touch{display:inline;}}
.spot .base{position:absolute; left:0; right:0; bottom:10px; text-align:center; color:var(--fg-3); font-size:.66rem; font-family:var(--f-mono); letter-spacing:.09em;}
.spot .hidden-layer b{font-family:var(--f-display); font-size:1.02rem; font-weight:600;}
.spot .grid{position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr); opacity:.5;}
.spot .grid i{border-right:1px solid var(--line); border-bottom:1px solid var(--line);}

/* --- Terminfenster --- */
.cal{display:flex; flex-direction:column; gap:12px;}
.calhead{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.calhead .m{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);}
.days{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;}
@media (max-width:520px){.days{grid-template-columns:repeat(4,minmax(0,1fr));}}
.day{
  border:1px solid var(--line); border-radius:3px; background:transparent; cursor:pointer; padding:7px 4px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.day b{font-family:var(--f-display); font-size:.95rem; font-weight:600;}
.day span{font-family:var(--f-mono); font-size:.5rem; letter-spacing:.06em; color:var(--fg-3);}
.day .free{font-family:var(--f-mono); font-size:.48rem; color:var(--acc);}
.day:hover:not([disabled]){border-color:var(--acc);}
.day[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:var(--on-acc);}
.day[aria-pressed="true"] span,.day[aria-pressed="true"] .free{color:var(--on-acc); opacity:.85;}
.day[disabled]{opacity:.42; cursor:not-allowed;}
.day[disabled] .free{color:var(--fg-3);}
.slotrow{display:flex; flex-wrap:wrap; gap:7px;}
.slot{
  border:1px solid var(--line); border-radius:3px; background:transparent; cursor:pointer;
  padding:8px 12px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.04em;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.slot:hover:not([disabled]){border-color:var(--acc);}
.slot[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:var(--on-acc);}
.slot[disabled]{opacity:.38; cursor:not-allowed; text-decoration:line-through;}
.calnote{font-size:.86rem; color:var(--fg-3);}
.picked{font-family:var(--f-mono); font-size:.8rem; color:var(--acc);}

/* --- Zielblock --- */
.aims{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.2vw,22px); margin-top:clamp(20px,3vw,30px);}
@media (max-width:820px){.aims{grid-template-columns:1fr;}}
/* Im Band "Wohin wir wollen" stehen die drei Ziele neben dem Stufenweg,
   also untereinander statt zu dritt nebeneinander. */
.aims.aims-col{grid-template-columns:1fr; margin-top:0;}
@media (min-width:801px){.aims.aims-col{grid-auto-rows:1fr;}}
.aim{border:1px solid var(--line); border-radius:10px; padding:22px; background:var(--bg-raised); display:flex; flex-direction:column; gap:10px;}
.aim .when{font-family:var(--f-mono); font-weight:700; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--acc);}
.aim h4{font-size:1.24rem; font-weight:700;}
.aim p{font-size:.97rem; color:var(--fg-2);}

/* --- Stufe 5 hervorheben --- */
.step.goal{
  grid-template-columns:34px 1fr; margin-top:10px; border:1px solid var(--acc); border-radius:10px; padding:14px 16px;
  background:color-mix(in srgb, var(--acc) 9%, transparent); grid-template-columns:26px 1fr;
}
.step.goal b{font-size:1.02rem;}
.step.goal .n{color:var(--acc); font-size:1.28rem;}
.step.goal span{color:var(--fg-2);}


/* ============================================================
   FASSUNG 3 — Auftakt mit Ranken, Naturobjekte, Branchen-
   Farbwelten, Monatskalender
   ============================================================ */

/* --- Auftakt: das Innere des rechten D wird zum Fenster, Kamera fliegt hindurch ---
   Performance-Note 09/26, zweiter Anlauf: das verkleinerte Maskenrechteck hat
   geholfen, aber nicht gereicht — auf iPad Air und Handy blieb ein Ruckler.
   Ursache war die SVG-Maske selbst: <mask> zwingt den Browser pro Frame in
   einen Offscreen-Puffer, und scale(30) darauf heißt, diesen Puffer jedes Mal
   neu zu rastern. Maske ersatzlos raus, ersetzt durch zwei flache Formen
   (volle Fläche zum Ausblenden + Rahmen mit evenodd-Loch). Dazu ein echtes
   Halte-Fenster im Skript: schwarz stehen bleiben, bis Schriften geladen und
   zwei Frames sauber durch sind. Lieber eine halbe Sekunde länger warten als
   im ersten Drittel stolpern. */
/* Der Kasten ist oben und unten je 30vh und seitlich je 40px größer als der
   Bildschirm, die Bühne (SVG) sitzt genau auf der Bildschirmgröße in der Mitte.
   Grund: Auf manchen iPhones endet ein fixierter Kasten vor dem unteren Rand
   (Symbolleiste, Adressleiste), dort schimmerte die Seite durch. Die dunkle
   Fläche im SVG ragt über die Bühne hinaus (overflow:visible) und füllt den
   Überstand; das Logo bleibt unverändert mittig. */
#intro{position:fixed; top:-30vh; bottom:-30vh; left:-40px; right:-40px; z-index:200; pointer-events:none; overflow:hidden; contain:layout paint;}
#intro .stage{position:absolute; top:30vh; left:40px; width:calc(100% - 80px); height:calc(100% - 60vh); display:block; overflow:visible;}
#camStage{transform-box:view-box; transform-origin:376.4px 361.7px; transform:scale(1.05); will-change:transform;}
#camPlug{opacity:1; will-change:opacity;}
#camFrame{opacity:1;}
#introArt,#introWord{opacity:0; will-change:opacity;}
#intro.run #introWord{text-rendering:optimizeSpeed;}
#intro.run #camStage{animation:camFly 3.2s linear forwards;}
#intro.run #camPlug{animation:plugOut 3.2s linear forwards;}
#intro.run #introArt{animation:artFade 3.2s var(--ease-io) forwards;}
#intro.run #introWord{animation:wordFade 3.2s var(--ease-io) forwards;}
/* Zwischen 15 % und 62 % stand hier vorher ein Drift von scale(1) auf
   scale(1.012) — 1,9 Sekunden lang unsichtbare 1,2 %, für die der Browser
   aber jedes einzelne Bild neu rastern musste. Jetzt steht der Wert in dem
   Fenster exakt still: keine Bewegung, kein Neuzeichnen, und genau in dieser
   Zeit sind Logo und Schriftzug lesbar. Der Flug beginnt danach. */
@keyframes camFly{
  0%{transform:scale(1.05); animation-timing-function:cubic-bezier(.2,.72,.3,1);}
  12%{transform:scale(1); animation-timing-function:linear;}
  50%{transform:scale(1); animation-timing-function:cubic-bezier(.5,0,.8,1);}
  100%{transform:scale(30);}
}
@keyframes plugOut{
  0%,36%{opacity:1; animation-timing-function:cubic-bezier(.4,0,.3,1);}
  54%,100%{opacity:0;}
}
@keyframes artFade{0%{opacity:0;}9%{opacity:1;}82%{opacity:1;}96%{opacity:0;}100%{opacity:0;}}
@keyframes wordFade{0%{opacity:0;}14%{opacity:1;}48%{opacity:1;}62%{opacity:0;}100%{opacity:0;}}
#intro.done{display:none;}

/* --- Branchenkarten: eigene Farbwelt, eigene Schrift, eigener Schalter --- */
.mini.g-ink,.mini.g-sunk,.mini.g-tint,.mini.g-bold{--mini-bg:initial;}
.slat .mini,.proof-shell .mini{
  --mini-bg:var(--c-bg); --mini-fg:var(--c-fg);
  --mini-dim:color-mix(in srgb, var(--c-fg) 56%, var(--c-bg));
  --mini-line:color-mix(in srgb, var(--c-fg) 17%, transparent);
  --acc:var(--c-acc); --on-acc:var(--c-on);
  background:var(--mini-bg); color:var(--mini-fg);
  font-family:var(--c-font), ui-sans-serif, sans-serif;
  transition:background-color .6s var(--ease), color .6s var(--ease);
}
.slat .mini .mh,.proof-shell .mini .mh{font-family:var(--c-font), ui-sans-serif, sans-serif; font-weight:var(--c-hw,600);}
.slat .mini .kick,.proof-shell .mini .kick{font-family:var(--f-mono);}
.mini-toggle{
  margin-left:auto; flex:none; width:32px; height:18px; border-radius:10px; padding:0; cursor:pointer;
  border:1px solid var(--mini-line); background:color-mix(in srgb, var(--mini-fg) 10%, transparent); position:relative;
  touch-action:manipulation;
}
.mini-toggle::before{content:""; position:absolute; inset:-13px; border-radius:16px;}
.mini-toggle::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:11px; height:11px; border-radius:50%;
  background:var(--mini-fg); transition:transform .42s var(--ease), background-color .42s var(--ease);
}
.mini[data-mode="dark"] .mini-toggle::after{transform:translateX(14px); background:var(--acc);}
.mini-toggle.ping{animation:ping 1.7s var(--ease) infinite;}
.mini-bar span{flex:0 1 auto; min-width:0;}

/* Was nicht im Bild ist, soll auch nicht rechnen. Ein Abschnitt bekommt
   data-vis="0", sobald er den Sichtbereich verlaesst — alle Animationen darin
   halten an. Das kostete beim Scrollen messbar Bilder pro Sekunde. */
[data-vis="0"], [data-vis="0"] *{animation-play-state:paused !important;}

/* Bewegungs-Loops, nur auf der aktiven Karte */
.slat .mini [class*="loop-"]{animation-play-state:paused;}
.slat[data-active="true"] .mini [class*="loop-"]{animation-play-state:running;}
@keyframes drift{0%,100%{transform:translate(6%,3%) rotate(-8deg) scale(1);}50%{transform:translate(1%,-2%) rotate(-3deg) scale(1.07);}}
.loop-drift{animation:drift 9s ease-in-out infinite;}
@keyframes press{0%,70%,100%{transform:none; box-shadow:none;}77%{transform:scale(.92);}84%{transform:scale(1.03); box-shadow:0 0 0 7px color-mix(in srgb,var(--acc) 22%,transparent);}92%{box-shadow:0 0 0 13px transparent;}}
.loop-press{animation:press 3.6s ease-in-out infinite;}
@keyframes autoscroll{0%,14%{transform:translateY(0);}54%,68%{transform:translateY(-16px);}100%{transform:translateY(0);}}
.loop-scroll{animation:autoscroll 7.2s ease-in-out infinite;}
@keyframes scanrow{0%,100%{background:transparent;}9%{background:color-mix(in srgb,var(--acc) 20%,transparent);}26%{background:transparent;}}
.loop-scan{animation:scanrow 4.8s ease-in-out infinite;}
@keyframes railmove{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.lay-strip .rail{overflow:hidden;}
.lay-strip .railtrack{display:flex; gap:7px; width:max-content;}
.loop-rail{animation:railmove 16s linear infinite;}
@keyframes sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(4deg);}}
.loop-sway{animation:sway 6.4s ease-in-out infinite; transform-origin:50% 88%;}

/* Sanfteres Einrasten im Band */
.slat{transition:transform .62s cubic-bezier(.19,.9,.24,1), opacity .5s var(--ease), filter .5s var(--ease);}

/* ================= Branchenkarten: Funktionsfassung =================
   Jede Karte zeigt in einem kleinen Fenster die Funktion, die ihrer Branche
   Arbeit abnimmt, und wiederholt sie in Ruhe. Alle Klassen tragen das Praefix
   fk-, weil 19 der urspruenglichen Namen (card, inner, btn, bar, slot, badge,
   shell, grid ...) mit der Seite kollidierten. Die IDs der Vorlage sind zu
   Klassen geworden: jede Karte steht doppelt im DOM (Band und Vorschau).
   Farben kommen aus --c-*, gesetzt von paintCard — die Palettenwahl der
   Hauptseite wirkt damit weiterhin nicht auf die Karten. */

.mini[data-fk]{position:relative; font-size:1rem;}
/* Ein gemeinsamer Massstab: alle Groessen im Kartenblock haengen als em daran.
   Im Kopfbereich ist die Karte groesser, also waechst der Inhalt mit. */
.proof-shell .mini[data-fk]{font-size:clamp(1rem, 1.6vw, 1.5rem);}
/* Die Browserleiste muss ueber dem Kartenhintergrund liegen — sonst deckt das
   absolut gesetzte .fk-bg sie samt Hell/Dunkel-Schalter zu. */
.mini[data-fk] .mini-bar{position:relative; z-index:4;}
.mini[data-fk] .fk-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.mini[data-fk] .fk-bg svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.fk-inner{
  position:relative; z-index:3; flex:1; min-height:0;
  padding:.62em .7em .7em; display:flex; flex-direction:column; gap:.55em;
  /* "safe" verhindert, dass der Inhalt bei knapper Hoehe oben aus der Karte
     laeuft und Kicker und Ueberschrift abgeschnitten werden. */
  justify-content:flex-end;
  justify-content:safe flex-end;
}
.fk-copy{flex:none; position:relative;}
/* Diese drei Regeln waren beim Umbau versehentlich mitgeloescht worden — dadurch
   fielen die Ueberschriften auf die Seitenschrift zurueck statt die eigene
   Schrift der Karte zu nehmen (Fraunces bei Kanzlei und Baeckerei, Barlow Semi
   Condensed bei Maler und Kfz). */
.fk-copy .fk-kick{
  display:block; font-family:var(--f-mono); font-size:.46em; letter-spacing:.1em;
  color:var(--c-muted); margin:0 0 .28em; line-height:1.3;
}
.fk-copy h3{
  margin:0 0 .28em; font-size:.86em; line-height:1.12; letter-spacing:-.01em;
  font-family:var(--c-font), ui-sans-serif, sans-serif; font-weight:var(--c-hw,600);
}
.fk-copy p{margin:0; font-size:.55em; line-height:1.45; color:var(--c-muted);}
/* Der Text steht ueber einem bewegten Motiv. Statt eines Streifens hinter dem
   Text liegt ein weicher Verlauf ueber der ganzen unteren Kartenhaelfte — das
   Motiv bleibt sichtbar, der Text bleibt lesbar. */
.mini[data-fk] .fk-inner::before{
  content:""; position:absolute; inset:auto 0 0 0; height:78%; z-index:-1; pointer-events:none;
  background:linear-gradient(to top,
    var(--c-bg) 0%,
    color-mix(in srgb, var(--c-bg) 82%, transparent) 34%,
    color-mix(in srgb, var(--c-bg) 42%, transparent) 66%,
    transparent 100%);
}

/* ---- Funktionsfenster ---- */
.fk-win{
  flex:none; width:100%; align-self:flex-start; display:flex; flex-direction:column; overflow:hidden;
  background:var(--c-win); border:1px solid var(--c-edge); border-radius:4px;
  box-shadow:0 7px 20px rgba(0,0,0,.24);
  transition:background-color .6s var(--ease), border-color .6s var(--ease);
}
.fk-winbar{
  flex:none; display:flex; align-items:center; gap:6px; padding:6px 9px;
  border-bottom:1px solid var(--c-edge);
  font-family:var(--f-mono); font-size:.44em; color:var(--c-muted);
}
.fk-winbar b{width:5px; height:5px; border-radius:50%; background:var(--c-acc); opacity:.8; flex:none;}
.fk-winbody{padding:.55em .6em .6em;}
/* Im Kopfbereich ist die Karte deutlich groesser als im Band. Dort waechst der
   Inhalt in die freie Hoehe hinein, statt unten Leere stehen zu lassen. Die
   Bandkarten bleiben unberuehrt — dort ist die Hoehe knapp und geprueft. */
.fk-menu{display:flex; flex-direction:column;}
/* Der Inhalt sitzt am unteren Kartenrand, das Fenster ist nur so hoch wie sein
   Inhalt. So bleibt der bewegte Hintergrund darueber sichtbar — Rolltor, Zahnraeder,
   Figur, Blaetter. Das Strecken des Fensters auf die ganze Karte war ein Fehler,
   dadurch war vom Hintergrund nichts mehr zu sehen. Ebenso das Kuerzen von Text:
   es wird nichts mehr ausgeblendet. */
.fk-flabel{margin:0 0 5px; font-family:var(--f-mono); font-size:.46em; color:var(--c-muted);}

/* ---- Maler: Richtpreis-Rechner ---- */
.fk-readout{display:flex; align-items:baseline; justify-content:space-between; gap:6px;}
.fk-readout .fk-big{font-size:1.02em; font-weight:600; letter-spacing:-.01em;}
.fk-readout .fk-unit{font-size:.48em; color:var(--c-muted);}
.fk-slider{position:relative; height:4px; border-radius:2px; background:var(--c-edge); margin:6px 0 8px;}
.fk-slider .fk-fill{position:absolute; left:0; top:0; bottom:0; border-radius:2px; background:var(--c-acc);}
.fk-slider .fk-knob{
  position:absolute; top:50%; width:11px; height:11px; border-radius:50%; background:var(--c-acc);
  transform:translate(-50%,-50%); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-acc) 22%, transparent);
}
.fk-btn{
  display:inline-block; padding:5px 10px; border-radius:2px;
  background:var(--c-acc); color:var(--c-on); font-size:.5em; font-weight:600;
  transition:transform .12s var(--ease), filter .12s var(--ease);
}
.fk-btn.fk-press{transform:scale(.955); filter:brightness(1.12);}
.fk-result{margin-top:7px; padding-top:6px; border-top:1px dashed var(--c-edge); opacity:0;}
.fk-result .fk-price{font-size:.8em; font-weight:600; color:var(--c-acc); letter-spacing:-.01em;}
.fk-result .fk-note{font-size:.42em; color:var(--c-muted); margin-top:2px; line-height:1.35;}

/* ---- Kfz: Foto-Anfrage ---- */
.fk-upwrap{position:relative; height:3.25em;}
.fk-drop{
  position:absolute; inset:0; border:1.4px dashed var(--c-edge); border-radius:3px;
  display:grid; place-items:center; align-content:center; gap:3px; overflow:hidden;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.fk-drop svg{width:16px; height:16px;}
.fk-dzlabel{font-size:.46em; color:var(--c-muted);}
.fk-drop.fk-press{border-color:var(--c-acc); background:color-mix(in srgb, var(--c-acc) 9%, transparent);}
.fk-ripple{
  position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  background:var(--c-acc); transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
}
.fk-chip{
  position:absolute; inset:0; display:flex; align-items:center; gap:7px; padding:0 9px;
  border:1px solid var(--c-edge); border-radius:3px;
  background:var(--c-chip); opacity:0; font-size:.5em;
}
.fk-chip .fk-nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fk-chip .fk-sz{font-family:var(--f-mono); font-size:.42em; color:var(--c-muted); flex:none;}
.fk-chip .fk-fileicon{width:17px; height:14px; flex:none;}
.fk-bar{height:3px; border-radius:2px; background:var(--c-edge); margin-top:7px; overflow:hidden;}
.fk-bar i{display:block; height:100%; background:var(--c-acc); width:0;}
.fk-rowline{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:.48em;}
.fk-tick{
  width:13px; height:13px; border-radius:50%; border:1.4px solid var(--c-acc);
  display:grid; place-items:center; flex:none; opacity:0;
}
.fk-tick svg{width:7px; height:7px;}

/* ---- Physio: Terminbuchung ---- */
.fk-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.fk-cal span{
  height:1.35em; display:grid; place-items:center; font-size:.42em;
  color:var(--c-muted); border-radius:2px;
}
/* Physiokarte steht mittig — so war sie in der Vorlage angelegt. */
.mini[data-fk="physio"] .fk-copy{text-align:center;}
.mini[data-fk="physio"] .fk-copy p{margin-inline:auto; max-width:34ch;}
.fk-cal span.fk-d{color:var(--c-fg);}
.fk-cal span.fk-off{opacity:.32;}
.fk-cal span.fk-sel{background:var(--c-acc); color:var(--c-on); font-weight:600;}
.fk-slots{display:flex; gap:4px; margin-top:7px; flex-wrap:wrap;}
.fk-slot{
  padding:3px 7px; border:1px solid var(--c-edge); border-radius:2px;
  font-size:.44em; color:var(--c-muted); opacity:0;
}
.fk-slot.fk-pick{border-color:var(--c-acc); color:var(--c-acc);}
.fk-confirm{margin-top:7px; font-size:.46em; display:flex; align-items:center; gap:6px; opacity:0;}

/* ---- Kanzlei: Mandantenportal ---- */
.fk-filerow{
  display:flex; align-items:center; gap:7px; padding:4px 0;
  border-bottom:1px solid var(--c-edge); font-size:.48em; opacity:0;
}
.fk-filerow:last-child{border-bottom:none;}
.fk-filerow .fk-nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fk-badge{
  font-family:var(--f-mono); font-size:.38em; padding:1px 5px; border-radius:2px;
  border:1px solid var(--c-edge); color:var(--c-muted); flex:none;
}
.fk-badge.fk-ok{border-color:var(--c-acc); color:var(--c-acc);}
.fk-fileicon{width:11px; height:14px; flex:none; opacity:.75;}

/* ---- Baeckerei: Ofenfenster + Schalter ---- */
/* Verhaeltnis der Ofenszene (300:74). Damit skaliert das Fenster mit der
   Kartenbreite statt gestaucht oder beschnitten zu werden. */
.fk-oven{position:relative; aspect-ratio:300/74; overflow:hidden;
  background:var(--c-metal); perspective:520px; flex:none;}
.fk-oven svg{position:absolute; inset:0; width:100%; height:100%;}
.fk-ovendoor{
  position:absolute; inset:0; transform-origin:50% 100%;
  background:var(--c-metal); border-bottom:2px solid var(--c-acc);
}
.fk-ovendoor i{
  position:absolute; inset:14% 4% 20%; border-radius:3px;
  background:var(--c-oven); opacity:.5; border:1px solid var(--c-acc); display:block;
}
.fk-sw{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; font-size:.48em;}
.fk-sw .fk-tg{width:30px; height:16px; border-radius:9px; background:var(--c-edge); position:relative; flex:none;}
.fk-sw .fk-tg i{
  position:absolute; top:2.5px; left:2.5px; width:11px; height:11px; border-radius:50%;
  background:var(--c-muted); display:block;
  transition:left .32s cubic-bezier(.3,.8,.3,1), background-color .32s var(--ease);
}
.fk-sw.fk-on .fk-tg{background:color-mix(in srgb, var(--c-acc) 38%, transparent);}
.fk-sw.fk-on .fk-tg i{left:16px; background:var(--c-acc);}
.fk-menu{margin:0; padding:0;}
.fk-menu li{
  list-style:none; display:flex; justify-content:space-between; gap:8px; font-size:.48em;
  padding:3px 0; border-bottom:1px solid var(--c-edge); opacity:0;
}
.fk-menu li:last-child{border-bottom:none;}
.fk-menu li em{font-style:normal; color:var(--c-muted); font-family:var(--f-mono); font-size:.48em; white-space:nowrap;}

/* ---- Gartenbau: Stellenanzeige ---- */
.fk-job{display:flex; gap:7px; align-items:flex-start;}
.fk-job .fk-pin{
  width:22px; height:22px; border-radius:3px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c-acc) 18%, transparent); color:var(--c-acc); font-size:.6em;
}
.fk-job h4{margin:0 0 2px; font-size:.56em; font-weight:600;}
.fk-job .fk-meta{font-size:.44em; color:var(--c-muted); font-family:var(--f-mono);}
.fk-applied{
  margin-top:7px; padding-top:6px; border-top:1px solid var(--c-edge);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.fk-applied .fk-n{font-size:.82em; font-weight:600; color:var(--c-acc); line-height:1;}
.fk-applied .fk-lbl{font-size:.44em; color:var(--c-muted); margin-top:2px;}

/* ---- Hintergrund-Automatik ----
   Die Namen tragen loop-, damit sie am bestehenden Schalter haengen:
   .slat .mini [class*="loop-"] laeuft nur auf der aktiven Karte. */
@keyframes fkSway1{0%,100%{transform:rotate(-.55deg);}50%{transform:rotate(.55deg);}}
@keyframes fkSway2{0%,100%{transform:rotate(.75deg);}50%{transform:rotate(-.75deg);}}
@keyframes fkDrift{0%,100%{transform:translateX(-8px);}50%{transform:translateX(8px);}}
@keyframes fkBreathe{0%,100%{transform:scale(1); opacity:.34;}50%{transform:scale(1.055); opacity:.5;}}
@keyframes fkSpinCw{to{transform:rotate(360deg);}}
@keyframes fkSpinCcw{to{transform:rotate(-360deg);}}
@keyframes fkSteam{0%{transform:translateY(0); opacity:0;}28%{opacity:.45;}100%{transform:translateY(-26px); opacity:0;}}
.loop-fk-sway-a{transform-origin:50% 100%; animation:fkSway1 7.5s ease-in-out infinite;}
.loop-fk-sway-b{transform-origin:50% 100%; animation:fkSway2 6s ease-in-out infinite;}
.loop-fk-drift{animation:fkDrift 14s ease-in-out infinite;}
.loop-fk-gear.g26cw{animation:fkSpinCw 26s linear infinite;}
.loop-fk-gear.g17ccw{animation:fkSpinCcw 17s linear infinite;}
.loop-fk-gear.g14ccw{animation:fkSpinCcw 14s linear infinite;}
.loop-fk-breathe{transform-origin:center; animation:fkBreathe 6.4s ease-in-out infinite;}
.loop-fk-steam{animation:fkSteam 3.8s ease-out infinite; opacity:0;}
.loop-fk-steam:nth-of-type(2){animation-delay:1.3s;}
.loop-fk-steam:nth-of-type(3){animation-delay:2.5s;}

/* Die Vorschau unter „Stimmen" ist etwas hoeher — dort darf der Text atmen. */
.proof-shell .mini[data-fk] .fk-copy p{font-size:.58em;}


/* --- Monatskalender im Google-Stil --- */
.gcal{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-raised);}
.gcal-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-bottom:1px solid var(--line-soft);}
.gcal-head b{font-family:var(--f-display); font-size:1rem; font-weight:600;}
.gcal-nav{display:flex; gap:4px;}
.gcal-nav button{min-width:40px; min-height:40px; 
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer;
  display:grid; place-items:center; font-size:.8rem; line-height:1;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.gcal-nav button:hover:not([disabled]){border-color:var(--acc); background:var(--veil);}
.gcal-nav button[disabled]{opacity:.35; cursor:not-allowed;}
.gcal-wd{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:6px 6px 0;}
.gcal-wd span{text-align:center; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); padding-bottom:5px;}
.gcal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; padding:0 6px 8px;}
.gcal-cell{
  /* min-height statt nur aspect-ratio: auf schmalen Handys wurden die Zellen
     sonst rund 35 px hoch und damit zur Zielscheibe für Fehlgriffe. */
  /* min-width:0 muss dazu: sonst rechnet der Browser aus min-height plus
     aspect-ratio eine Mindestbreite und sprengt damit das 7-Spalten-Raster
     auf schmalen Handys nach rechts aus dem Bild. */
  aspect-ratio:1/.92; min-height:44px; min-width:0; border:0; background:transparent; cursor:pointer; border-radius:3px; padding:3px 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px;
  font-family:var(--f-body); transition:background-color .18s var(--ease);
}
.gcal-cell b{font-size:.92rem; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.5; width:26px; height:26px; display:grid; place-items:center; border-radius:50%;}
.gcal-cell .pip{display:flex; gap:2px; height:5px;}
.gcal-cell .pip i{width:4px; height:4px; border-radius:50%; background:var(--acc);}
.gcal-cell:hover:not([disabled]) b{background:var(--veil);}
.gcal-cell[aria-pressed="true"] b{background:var(--acc); color:var(--on-acc);}
.gcal-cell[disabled]{cursor:not-allowed;}
.gcal-cell[disabled] b{color:var(--fg-3); opacity:.45;}
.gcal-cell.out{visibility:hidden;}
.gcal-cell.today b{box-shadow:inset 0 0 0 1px var(--acc);}
.gcal-cell .busy{font-family:var(--f-mono); font-size:.44rem; letter-spacing:.04em; color:var(--fg-3);}
.gcal-foot{display:flex; flex-wrap:wrap; gap:12px; padding:9px 12px; border-top:1px solid var(--line-soft); font-family:var(--f-mono); font-size:.54rem; letter-spacing:.07em; color:var(--fg-3);}
.gcal-foot span{display:flex; align-items:center; gap:5px;}
.gcal-foot i{width:6px; height:6px; border-radius:50%; background:var(--acc); display:block;}
.gcal-foot i.off{background:var(--fg-3); opacity:.45;}
.hours{display:flex; flex-wrap:wrap; gap:6px;}
.hour{
  border:1px solid var(--line); border-radius:7px; background:transparent; cursor:pointer;
  padding:9px 13px; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.03em;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.hour:hover:not([disabled]){border-color:var(--acc);}
.hour[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:var(--on-acc);}
.hour[disabled]{opacity:.32; cursor:not-allowed; text-decoration:line-through;}
.hourhead{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);}

/* Art des Gesprächs */
.pickway{display:flex; gap:8px; flex-wrap:wrap;}
.way{
  flex:1 1 190px; border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer;
  padding:12px 14px; text-align:left; display:flex; flex-direction:column; gap:3px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.way b{font-size:1.02rem; font-weight:600;}
.way span{font-size:.85rem; color:var(--fg-3);}
.way:hover{border-color:var(--acc);}
.way[aria-pressed="true"]{border-color:var(--acc); background:color-mix(in srgb,var(--acc) 10%,transparent);}
.way[aria-pressed="true"] span{color:var(--fg-2);}

/* --- Rechtliches im Fußbereich --- */
.foot{padding-block:44px 54px;}
.legalgrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,4vw,54px);
  margin-top:clamp(30px,4vw,44px); padding-top:clamp(26px,3.4vw,36px); border-top:1px solid var(--line);
  scroll-margin-top:90px;
}
@media (max-width:720px){.legalgrid{grid-template-columns:1fr; gap:26px;}}
.legalgrid h3{font-size:clamp(1.3rem,2.6vw,1.55rem); margin:12px 0 16px;}
.legalsub{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--acc); margin:22px 0 6px;
}
.legalgrid > div > .legalsub:first-child{margin-top:0;}
.legaltext{font-style:normal; font-size:.98rem; line-height:1.74; color:var(--fg-2);}
.legaltext strong{color:var(--fg); font-weight:600;}
.legaldim{color:var(--fg-3); font-size:.88rem; line-height:1.6;}
.legalfold{margin-top:clamp(26px,3.4vw,38px); border-top:1px solid var(--line); scroll-margin-top:90px;}
.legalfold summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  padding:22px 0 20px; font-family:var(--f-display); font-size:clamp(1.1rem,2.2vw,1.28rem);
  font-weight:600; letter-spacing:-.02em;
}
.legalfold summary::-webkit-details-marker{display:none;}
/* Die Datenschutzerklaerung liegt nur auf Deutsch vor. Englische Besucher
   bekommen darum einen Hinweis statt einer halben Uebersetzung. Die frueheren
   englischen Textbausteine behaupteten, es werde nichts an Dritte uebertragen —
   das stimmt seit dem Vercel-Absatz nicht mehr und ist entfernt. */
.dsnote{display:none;}
:root[lang="en"] .dsnote{
  display:block; margin:0 0 14px; padding:10px 12px; border-radius:6px;
  border:1px solid var(--line); background:var(--bg-sunk);
  font-size:.86rem; line-height:1.55; color:var(--fg-2);
}
.legalfold summary i{
  margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; flex:none; position:relative;
  transition:border-color .2s var(--ease);
}
.legalfold summary i::before,.legalfold summary i::after{
  content:""; position:absolute; background:var(--fg-2); border-radius:1px;
  transition:transform .3s var(--ease), background-color .2s var(--ease);
}
.legalfold summary i::before{width:12px; height:1.7px;}
.legalfold summary i::after{width:1.7px; height:12px;}
.legalfold[open] summary i{border-color:var(--acc);}
.legalfold[open] summary i::after{transform:scaleY(0);}
.legalfold summary:hover i{border-color:var(--acc);}
.legalfold summary:hover i::before,.legalfold summary:hover i::after{background:var(--acc);}
.dsbody{padding-bottom:14px; max-width:80ch; animation:fadeSwap .35s var(--ease);}
.dsbody h4{font-size:1.14rem; margin:28px 0 10px; padding-top:18px; border-top:1px solid var(--line-soft);}
.dsbody h4:first-child{border-top:0; padding-top:0; margin-top:2px;}
.dsbody h5{font-size:1rem; margin:20px 0 7px; color:var(--fg);}
.dsbody p{font-size:.93rem; line-height:1.76; color:var(--fg-2); margin-bottom:11px;}
.dsbody p.caps{font-size:.87rem; color:var(--fg-3);}
.dsbody ul{list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:8px 0 13px;}
.dsbody li{font-size:.93rem; line-height:1.72; color:var(--fg-2);}
.dsbody strong{color:var(--fg); font-weight:600;}
.foot-fine{margin-top:28px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:.84rem; color:var(--fg-3);}


/* --- Sternenhimmel oben links, nur im Dunkelmodus --- */
.starfield{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .9s var(--ease);
  -webkit-mask-image:linear-gradient(131deg, #000 0%, #000 15%, rgba(0,0,0,.45) 34%, transparent 53%);
  mask-image:linear-gradient(131deg, #000 0%, #000 15%, rgba(0,0,0,.45) 34%, transparent 53%);
}
:root[data-theme="dark"] .starfield{opacity:.8;}
.starfield{overflow:hidden;}
.starfield svg{width:100%; height:100%; display:block;}
@media (max-width:760px){
  .starfield svg{transform-origin:0 0; transform:translateY(52px) scale(1.4);}
  .starfield{
    -webkit-mask-image:linear-gradient(158deg, #000 0%, #000 18%, rgba(0,0,0,.42) 33%, transparent 48%);
    mask-image:linear-gradient(158deg, #000 0%, #000 18%, rgba(0,0,0,.42) 33%, transparent 48%);
  }
}
.starfield .tw{animation:twinkle 5s ease-in-out infinite;}
.starfield .shim{transform-box:fill-box; transform-origin:50% 50%; animation:shimmer 7s ease-in-out infinite;}
@keyframes shimmer{0%,100%{opacity:.72;}45%{opacity:1;}}
@keyframes twinkle{0%,100%{opacity:.2;}50%{opacity:.95;}}

/* --- Punktraster oben links, das Pendant zum Sternenhimmel im Hellmodus ---
   Jeder Punkt hat eine eigene, leicht zufällige Reichweite (Rauschen auf dem
   Abstand vom Ursprung), damit der Rand ausfranst statt hart entlang einer
   Diagonalen abzuschneiden. Einmal beim Laden als statisches SVG gezeichnet,
   keine laufende Animation — kostet also nichts an Bildwiederholrate. Die
   Akzentpunkte greifen auf var(--acc) zu und wandern deshalb mit, wenn eine
   andere Farbpalette gewählt wird. */
.dotgrid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85;
  transition:opacity .9s var(--ease); overflow:hidden;
  -webkit-mask-image:linear-gradient(131deg, #000 0%, #000 15%, rgba(0,0,0,.45) 34%, transparent 53%);
  mask-image:linear-gradient(131deg, #000 0%, #000 15%, rgba(0,0,0,.45) 34%, transparent 53%);
}
:root[data-theme="dark"] .dotgrid{opacity:0;}
.dotgrid svg{width:100%; height:100%; display:block;}
@media (max-width:760px){
  .dotgrid svg{transform-origin:0 0; transform:translateY(52px) scale(1.4);}
  .dotgrid{
    -webkit-mask-image:linear-gradient(158deg, #000 0%, #000 18%, rgba(0,0,0,.42) 33%, transparent 48%);
    mask-image:linear-gradient(158deg, #000 0%, #000 18%, rgba(0,0,0,.42) 33%, transparent 48%);
  }
}
/* --- Eine Sternschnuppe, einmalig, quer durch den Kopfbereich --- */
/* Dritter Durchgang, diesmal an der richtigen Stelle angesetzt.

   Version 20 hat die BAHN zu einer echten Parabel gemacht — der Kopf lief
   danach sauber. Der Schweif blieb aber eine fest gezeichnete Fläche, die als
   starrer Körper mitgedreht wurde: seine Krümmung war einmal von Hand in den
   Pfad gezeichnet und hatte mit der Flugbahn nichts zu tun. Im Anstieg müsste
   er sich anders biegen als im Fall — tat er nicht. Genau das sah unnatürlich
   aus, und daran ändert kein Drehwinkel etwas.

   Jetzt wird der Schweif in jedem Bild aus der Bahn selbst gebaut. Das SVG
   deckt den Kopfbereich ab und rechnet in echten Pixeln (viewBox = Pixelmaß
   des Kastens), Geometrie ist also Geometrie:

       x(t) = W · (−0,18 + 1,36·t)                  gleichförmig
       y(t) = H · 0,32 + K · (200t² − 160t + 14)    quadratisch

   y über x ist damit eine Parabel. Für den Schweif werden 26 zurückliegende
   Punkte dieser Bahn abgetastet, jeder senkrecht zur Bahn um die halbe
   Schweifbreite nach oben und nach unten versetzt; die Breite läuft nach
   hinten auf null aus. Obere Reihe hin, untere zurück, geschlossen: zwei
   Parabeln übereinander, die am Schweifende in einem Punkt zusammenlaufen.
   Der Schweif krümmt sich damit exakt wie die Bahn, an jeder Stelle neu.

   Der Farbverlauf läuft mit — seine Endpunkte sitzen auf Schweifende und Kopf,
   also folgt auch das Ausblenden der Bahn statt einer festen Achse. Statt
   eines CSS-Weichzeichners (der bei einer Form, die sich jedes Bild ändert,
   jedes Bild neu gefiltert werden müsste) liegt eine zweite, breitere und
   sehr blasse Kopie unter dem Schweif: weiche Kante ohne Filterkosten. */
.shoot{
  position:absolute; top:0; left:0; z-index:0; pointer-events:none;
  width:100%; height:clamp(230px,44vh,520px); display:block; overflow:hidden;
}
@media (prefers-reduced-motion:reduce){.shoot{display:none;} .starfield .tw{animation:none;}}


/* --- Hinweis: Hell/Dunkel je Vorlage --- */
.modehint{
  margin:12px auto 0; max-width:50ch; font-size:.88rem; line-height:1.55;
  color:var(--fg-2); text-align:center; text-wrap:balance;
}
.mh-sw{
  display:inline-block; vertical-align:-3px; margin-right:9px;
  width:32px; height:18px; border-radius:10px; position:relative;
  border:1px solid var(--acc); background:color-mix(in srgb, var(--acc) 14%, transparent);
}
.mh-sw::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:11px; height:11px; border-radius:50%;
  background:var(--acc); animation:mhSlide 4s ease-in-out infinite;
}
@keyframes mhSlide{0%,42%{transform:translateX(0);}50%,92%{transform:translateX(14px);}100%{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.mh-sw::after{animation:none;}}




/* --- Testversion (nur mit ?test in der Adresse) ---------------------------------
   Einrasten: Der Browser hält beim Ausrollen sanft am Anfang eines Bereichs an
   (proximity = nur in der Nähe, schnelles Durchwischen bleibt möglich). */
html.testmode{scroll-snap-type:y proximity;}
html.testmode .hero, html.testmode section.band{scroll-snap-align:start; scroll-margin-top:clamp(58px,7vw,70px);}
.dv-tag{
  position:absolute; right:max(var(--gut), calc((100% - var(--col)) / 2 + var(--gut))); top:calc(50% + 14px);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-3); background:color-mix(in srgb, var(--bg) 80%, transparent); padding:2px 6px; border-radius:4px;
}
.dv-tag:empty{display:none;}
.test-badge{
  position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:95;
  width:max-content; max-width:calc(100% - 24px); text-align:center;
  font-family:var(--f-mono); font-size:.66rem; line-height:1.4; letter-spacing:.04em;
  color:var(--on-acc); background:var(--acc); padding:7px 12px; border-radius:8px;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5); pointer-events:none;
}