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

/* ============================================================
   1OAK v6 — Tokens.
   Raster, Spacing, Sektionsrhythmus, Typo-Skala und Motion-Defaults
   nach craft-v6.md. Alle Fluid-Werte sind auf 1440 gerechnet:
   der vw-Anteil trifft dort exakt den Sollwert, der px-Boden faengt
   Mobil ab (rund ein Drittel), die Obergrenze deckelt Grossbilder.
   ============================================================ */
:root{
  color-scheme:light;
  /* v15 — Papier und Tinte. Creme-Grund in zwei Stufen, Tinte als Schrift
     und Linie. Gelb #FFE600 ist NUR Akzent (Whitelist, siehe Kommentar vor
     .colophon) und nie Text oder Haarlinie auf Papier (1,14:1). */
  --paper:#F6F3EC;          /* literal: Papier (Objekte, Schrift auf Nacht) */
  --paper-2:#ECE8DF;
  --ink:#14130F;            /* literal: Tinte (Schrift auf Gelb, Objekte)   */
  --ink-muted:rgba(20,19,15,.62);
  /* v17 — „Nacht": der Kunde will alles dunkel, Gelb nur als Akzent (Croud-
     Modell). Der Grund ist warmes Schwarz in zwei Stufen, die Schrift Papier.
     --ground/--fore sind die Rollen; --paper/--ink bleiben literale Farben. */
  --ground:#14130F;
  --ground-2:#1C1B16;
  --fore:#F6F3EC;
  --fore-muted:rgba(246,243,236,.62);
  --bg:var(--ground);
  --bg2:var(--ground-2);
  --fg:var(--fore);
  --muted:var(--fore-muted);
  --line:rgba(246,243,236,.16);
  --accent:#FFE600;
  --on-accent:#14130F;
  --accent-raw:#FFE600;
  --on-accent-raw:#14130F;
  --sun:#FFE600;            /* Alias, nur Akzent */
  /* Akzent als Text- oder Linienfarbe gibt es nicht mehr: das ist immer
     Tinte. Fuellungen bleiben --accent. */
  --accent-ink:var(--fore);

  /* Raster: 12 Spalten, Gutter 24, Rand 40 */
  --m:40px;
  --gutter:24px;

  /* v15 — Hero-Geometrie: die Leiste beginnt 32 px unter der Pille
     (16 + 50 + 32 = 98) und ist 56 px hoch; der Film liegt darunter
     full-bleed, die H1 steht am Fuss. */
  --stage-top:98px;
  --bar-h:56px;

  /* Spacing-Tokens — xs 12 · sm 16 · md 24 · lg 32 · xl 48 · 2xl 64 · hero 110 */
  --sp-xs:clamp(10px,.833vw,14px);
  --sp-sm:clamp(12px,1.111vw,18px);
  --sp-md:clamp(16px,1.667vw,27px);
  --sp-lg:clamp(20px,2.222vw,36px);
  --sp-xl:clamp(28px,3.333vw,54px);
  --sp-2xl:clamp(34px,4.444vw,72px);
  --sp-hero:clamp(56px,7.639vw,124px);

  /* Sektions-Tokens — xs 60 · sm 80 · md 120 · lg 160 · xl 200 · 2xl 220 · 3xl 240 · 4xl 320 */
  --sec-xs:clamp(30px,4.167vw,68px);
  --sec-sm:clamp(38px,5.556vw,90px);
  --sec-md:clamp(52px,8.333vw,135px);
  --sec-lg:clamp(66px,11.111vw,180px);
  --sec-xl:clamp(80px,13.889vw,225px);
  --sec-2xl:clamp(88px,15.278vw,248px);
  --sec-3xl:clamp(96px,16.667vw,270px);
  --sec-4xl:clamp(112px,22.222vw,360px);

  /* v10 — Sektionsrhythmus.
     Der Abstand zwischen zwei Sektionen ist die Summe aus dem Fuss der
     einen und dem Kopf der naechsten. Bei 1440 sind das 80 + 100 = 180 px
     (Sollfenster 160–200). Vorher stapelten sich 160 + 320 = 480 px, und
     genau die hat der Kunde als „riesige leere Abstaende" gesehen.
       --sec-top  Kopf einer Sektion   100 px bei 1440
       --sec-bot  Fuss einer Sektion    80 px bei 1440
       --sec-seam Naht Hero -> erste Sektion (der Hero hat keinen Fuss)
       --sec-band Akzentpanel, oben wie unten
     Innen gilt: Label -> Headline 24, Headline -> Inhalt 48–64,
     Zeilenlisten ohne Extra-Abstand. Mobil ist alles halbiert. */
  --sec-top:clamp(56px,6.944vw,100px);
  --sec-bot:clamp(44px,5.556vw,80px);
  --sec-seam:clamp(88px,11.111vw,160px);
  --sec-band:clamp(52px,6.389vw,92px);
  --sec-head-gap:clamp(34px,3.889vw,56px);   /* Headline -> Inhalt */
  --sec-rule-gap:clamp(28px,3.333vw,48px);   /* Trennlinie -> Label */

  /* Motion-Defaults: UI 150 ms, Reveals expo.out, Mono power3.inOut, Menue power4.inOut */
  --ui:150ms;
  --ui-e:cubic-bezier(.4,0,.2,1);
  --ease:cubic-bezier(.16,1,.3,1);
  --expo:cubic-bezier(.19,1,.22,1);
  --mono-e:cubic-bezier(.645,.045,.355,1);
  --menu-e:cubic-bezier(.77,0,.175,1);
  --elastic:cubic-bezier(.22,1.61,.36,1);
  --tween:1.4s;

  --sans:"Archivo","Archivo Expanded","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* v37 — Keine Mono-Schrift mehr. Labels laufen jetzt in
     der Hausschrift, leicht schmal, 13 px (mobil 12), in Versalien mit
     etwas Sperrung. Der Name --mono bleibt, damit jede Stelle, die ihn
     benutzt, automatisch mitzieht. */
  --mono:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --lab-fs:13px;
  --lab-ls:.045em;
  --lab-vs:'wght' 560,'wdth' 92;
  --btn-fs:15px;

  /* Produkt-UI der Beweis-Karten (bewusst nicht themengebunden) */
  --card-paper:#FFFFFF;
  --card-ink:#121512;
  --card-soft:#4A514C;
  --card-edge:#C9CFC6;
  --card-hair:#E2E6E1;
  --card-pos:#0B6B3A;
  --warn:#FF8A73;
  --card-dark:#232219;
  --card-dark-fg:#F3F0E8;
}

/* Bild-Assets einmal als data-URI, danach ueberall per var() ------------- */
:root{
  --i-founder:url("/assets/img/founder.jpg");
  --i-janina:url("/assets/img/p-janina.jpg");
  --i-tomris:url("/assets/img/p-tomris.jpg");
  --i-luc:url("/assets/img/p-luc.jpg");
  --i-hofbauer:url("/assets/img/p-hofbauer.jpg");
  --i-team:url("/assets/img/team.jpg");

  /* Wortmarke als Maske — traegt im Wortmarken-Moment das Korn. */
  --wm-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjUwIDEzMSA5MDAuMDcgNjU0Ljk5IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pZCBtZWV0IiBmaWxsPSIjMDAwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwMDApIHNjYWxlKDAuMSwtMC4xKSI+PHBhdGggZD0iTTc2MDUgODY4MCBjLTEwMyAtNiAtOTcgLTEzIDI4IC0yOSA0OCAtNyAxMzQgLTI3IDE5MSAtNDUgMzY5IC0xMjEgNjMxIC0zNzQgNzg4IC03NjEgbDI5IC03MCAtNiAzMjUgYy0zIDE3OSAtNSAzODUgLTUgNDU4IGwwIDEzMiAtNDY3IC0yIGMtMjU4IC0xIC01MDggLTQgLTU1OCAtOHoiLz48cGF0aCBkPSJNNjE3OCA4NjYxIGMtNDc3IC05IC04NjkgLTE5IC04NzMgLTIyIC0zIC00IDE1IC0xMCA0MCAtMTMgNzQgLTEyIDIxNyAtOTAgMjkyIC0xNTkgMTA2IC05OSAxNjggLTIwOSAxOTcgLTM1MSBsMTIgLTU5IDMzIDg5IGM3NyAyMDcgMTkzIDM4NSAyODcgNDQwIDI1IDE1IDY3IDI5IDkzIDMyIDQwIDMgNTMgLTEgOTUgLTMwIDI3IC0xOCA2NCAtNTUgODIgLTgxIGwzMyAtNDggLTUgLTE0MzIgYy02IC0xNTY5IC0zIC0xNDg5IC02NiAtMTU4MyAtMzkgLTU3IC05MyAtOTcgLTE2NyAtMTIzIC00NiAtMTYgLTU5IC0xNyAtMTAwIC02IC0xMDAgMjYgLTE4NiA4NyAtMjI0IDE1OSAtMjEgNDAgLTIyIDU0IC0yNyA0MjEgLTMgMjA5IC03IDM3MiAtOCAzNjMgLTMgLTI2IC04MyAtMTA1IC0xMTUgLTExMyAtMzggLTEwIC03MiAxIC0xMDcgMzMgLTI2IDIzIC04NyAxODkgLTQ1NiAxMjIyIC0yMzQgNjU3IC00MzAgMTIwNyAtNDM2IDEyMjIgbC05IDI2IC0zNDIgLTQgYy0xODggLTIgLTQ2MCAtNyAtNjA1IC0xMCBsLTI2MyAtNiA2MyAtMjIgYzExNiAtNDEgMjA4IC0xMTkgMjI4IC0xOTYgNSAtMTkgMTMgLTE5NyAxNyAtMzk1IGw4IC0zNjAgMjMgNDIgYzI1IDQ4IDQyIDYwIDk5IDY5IDM1IDUgNDQgMiA3NyAtMjYgNTAgLTQ1IDc4IC05NSAxMjQgLTIzMCAyMiAtNjMgMjE0IC01ODUgNDI3IC0xMTYwIDIxNCAtNTc1IDM5MCAtMTA1MiAzOTIgLTEwNjEgMyAtMTEgLTQ0NCAtMTI0OCAtNTMyIC0xNDcwIC01IC0xNCAyIC0xMyA0MSA3IDY5IDM1IDE0MCAyMSAxNjggLTM0IDggLTE1IDEyMSAtMzEzIDI1MSAtNjYyIDE3NSAtNDY2IDIzOSAtNjUwIDI0MyAtNjkxIDkgLTExNCAtNDcgLTIyMSAtMTM4IC0yNjcgbC0zOSAtMTkgNDA2IC02IGM2MzUgLTExIDIxODEgLTggMjE2MyAzIC04IDUgLTIzIDEwIC0zMiAxMCAtNjkgMCAtMTk5IDg1IC0yMjUgMTQ3IC0yMCA1MCAxMCAyNzAzIDMyIDI3NzggMjAgNjkgODAgMTQzIDEzOCAxNzMgbDQ4IDI1IDM5MiA1IGMzODIgNCAzOTMgNCA0NDggLTE3IDg0IC0zMiAxMzcgLTc1IDE2MSAtMTI5IDMyIC03MSAzMSAtMjQyIC0xIC0zMzUgLTEyIC0zOCAtMjEgLTcxIC0xOCAtNzQgMyAtMyA0MSAyNiA4NCA2NCAzMTYgMjc3IDY1MCA0NzEgODc2IDUwOCA4MiAxMyAyOCAyMCAtMTQwIDE4IC05OCAtMiAtMzAzIC00IC00NTUgLTYgbC0yNzggLTIgLTIgNDM1IGMtMiAyNjMgLTYgNDI3IC0xMiA0MTUgLTUgLTExIC0yMiAtNTQgLTM4IC05NSAtNDYgLTExNyAtMTQxIC0yNTEgLTI2MCAtMzY2IC0xMjQgLTExOSAtMjQ2IC0yMDMgLTQxNiAtMjg2IGwtMTIzIC02MSAtMjA1IC01IC0yMDQgLTUgMCAxMTQgYzAgNjMgOSA3MjggMjAgMTQ3OSAxMSA3NTEgMjAgMTQ0OSAyMCAxNTUzIGwwIDE4NyAtMTYyIC0yIGMtOTAgMCAtNTUzIC04IC0xMDMwIC0xN3ogbTE0MCAtMzQxMCBjNjUgLTMzIDExMCAtNzMgMTE4IC0xMDggNCAtMTMgMiAtNjM0IC00IC0xMzgxIC0xMCAtMTMzNCAtMTEgLTEzNTggLTMxIC0xNDE2IC0yMiAtNjMgLTY5IC0xNDIgLTEwMCAtMTcwIC0xOCAtMTYgLTIxIC0xNCAtODIgNTIgLTM1IDM4IC03NCA4OSAtODYgMTEzIC0yOCA1NyAtMTEyNSAyOTMxIC0xMTIwIDI5MzUgOCA4IDExNzQgMTkgMTIxMCAxMSAyMSAtNCA2NCAtMjAgOTUgLTM2eiIvPjxwYXRoIGQ9Ik0xNjk1IDg1NDUgYy0yNjQgLTc0IC00NjIgLTE3NiAtNjUwIC0zMzYgLTIzNCAtMTk3IC00MDQgLTQ4NSAtNDkwIC04MjkgLTQwIC0xNTkgLTU1IC0yOTMgLTU1IC00OTIgMCAtMTY5IDIgLTE5MyAyOSAtMzAzIDgxIC0zMzEgMjIxIC01ODYgNDQ1IC04MTEgMjIwIC0yMTkgNDc2IC0zNjMgNzg5IC00NDQgMTQyIC0zNiAxNjggLTM3IDEwNSAtNSAtMjMwIDEyMCAtMzg4IDU0MCAtNDYzIDEyMzAgLTIyIDIwMiAtMzIgNzc4IC0xNiA5NjggNDYgNTYxIDE5MCA5MjEgNDE2IDEwNDAgNDMgMjMgMjUgMjAgLTExMCAtMTh6Ii8+PHBhdGggZD0iTTIyMDAgODU1NiBjMjQzIC0xMjggNDA2IC01MzAgNDQ5IC0xMTA2IDkxIC0xMjE3IC0zMyAtMTkzOSAtMzY0IC0yMTI0IGwtMzAgLTE3IDM1IDcgYzc3IDEzIDI4MiA4OCAzOTUgMTQzIDUwMSAyNDYgODMxIDY4MSA5NDUgMTI0NiAyMSAxMDMgMjIgMTE5IDExIDI0NSAtMjcgMzA4IC0xMTUgNTk4IC0yNTQgODMyIC0xODMgMzA4IC00NjMgNTQyIC04MTcgNjgyIC0xMDMgNDEgLTI4NyA5NCAtMzgwIDEwOSBsLTM1IDYgNDUgLTIzeiIvPjxwYXRoIGQ9Ik04MTQzIDc1NjAgYy0xNCAtNTUgLTk4IC0yMDUgLTE1MiAtMjczIC02NiAtODMgLTE1NCAtMTUzIC0yNTUgLTIwNCAtNzMgLTM3IC0xOTcgLTczIC0yNTUgLTc0IC00NSAtMSAtODMgLTE0IC02MSAtMjIgOCAtMyA2MCAtMTkgMTE1IC0zNyAyMjkgLTc0IDQwOCAtMTk3IDUxNCAtMzU1IDQ4IC03MiA4OSAtMTYzIDkzIC0yMDggMSAtMTIgNSAyNTAgOCA1ODMgMyAzMzMgNCA2MDcgMiA2MTAgLTEgMiAtNiAtNyAtOSAtMjB6Ii8+PHBhdGggZD0iTTM4NzAgNTc0OSBjLTU4IC0xOTUgLTE5NSAtMzQ2IC0zODkgLTQzMSBsLTY2IC0yOSAxMTUgNSBjNjMgMyAyNTIgOCA0MjAgMTEgMTY4IDMgMzI1IDggMzUwIDExIGw0NSA2IC00NiAxNyBjLTEzMSA1MCAtMjYxIDE5MyAtMzY0IDM5OSBsLTQyIDg1IC0yMyAtNzR6Ii8+PHBhdGggZD0iTTIzMzAgNTI1NSBjMjE0IC0xMjQgMzU5IC00NTkgNDE1IC05NjAgMzIgLTI5NSA0NiAtOTM0IDI1IC0xMTgwIC0zNiAtNDE5IC0xMjggLTcwNiAtMjcyIC04NDYgLTQ0IC00MiAtMTI1IC04OSAtMTU0IC04OSAtMTAgMCAtMTUgLTMgLTExIC02IDEwIC0xMSAyMjYgMzYgMzI5IDcyIDQ4NSAxNjggODEzIDU0MyA5NDQgMTA3OSAzNSAxNDUgNDQgMjUyIDMzIDQwNyAtMTEgMTU0IC0yMiAyMjYgLTU1IDM1OSAtMTUwIDYwNSAtNTQ3IDEwMDYgLTExNDIgMTE1MyAtMTY0IDQwIC0xNjMgNDAgLTExMiAxMXoiLz48cGF0aCBkPSJNMTg2MCA1MjUwIGMtNjQzIC0xNjcgLTEwNDQgLTU1MSAtMTE4OSAtMTE0MCAtNDEgLTE2OCAtNTMgLTI2OCAtNTQgLTQ0MCAtMSAtMTI3IDMgLTE1OSAyNyAtMjU0IDEyOSAtNTA4IDQ0MiAtODc4IDkyNCAtMTA5NSAxMDMgLTQ2IDI1NCAtOTUgMzcyIC0xMjIgMTE1IC0yNSAxMzQgLTI0IDc0IDYgLTIzOCAxMTggLTM5MiA0OTggLTQ3MCAxMTU1IC0yMSAxODIgLTMwIDc0MyAtMTUgOTIxIDQ0IDQ5OCAxNzggODI2IDM5MSA5NjAgNTMgMzMgNDIgMzUgLTYwIDl6Ii8+PHBhdGggZD0iTTc4NTAgNDA4OCBjLTY5IC02MSAtMTU5IC0xNDMgLTIwMCAtMTgyIC03OSAtNzMgLTE4NiAtMTQ4IC0yNTggLTE4MCAtMjMgLTEwIC00MiAtMjQgLTQyIC0zMCAwIC02IDE5IC0yMiA0MSAtMzYgOTQgLTU3IDIzMiAtMjU5IDM2OCAtNTM1IDQ5IC05OSAxMDggLTIzMiAxMzEgLTI5NSA4NiAtMjM2IDIxOCAtNDc1IDMzNSAtNjA3IGw0NyAtNTMgNTQ0IDAgYzM2MSAwIDU0MyAzIDUzOSAxMCAtMyA2IC0xNSAxMCAtMjYgMTAgLTM4IDAgLTExNCA0OSAtMTc1IDExMiAtMTE4IDEyMyAtMTkxIDI0OCAtMzIzIDU1NiAtMTM3IDMxOCAtMzY4IDgyOCAtNDA4IDkwMiAtMTE0IDIwNyAtMzAwIDM5NSAtNDI4IDQzNCAtMTcgNSAtNDcgLTE4IC0xNDUgLTEwNnoiLz48cGF0aCBkPSJNMzk4MCAyNTc2IGMtMzYgLTU5IC04OCAtMTI0IC0xNTEgLTE4NyAtNzggLTc5IC0xMTAgLTEwNCAtMTgwIC0xMzggLTQ2IC0yMyAtMTEyIC00NyAtMTQ3IC01MyAtMzQgLTYgLTU5IC0xNSAtNTUgLTE5IDkgLTggMTAzOSAtMTcgMTA0NyAtOCAzIDMgLTIyIDE0IC01NiAyMyAtOTcgMjcgLTE3MiA3MiAtMjQxIDE0NSAtNzQgODAgLTEwOCAxMzkgLTEzOSAyNDcgbC0yMyA4MCAtNTUgLTkweiIvPjwvZz48L3N2Zz4=");

  /* Filmkorn — Hero und Wortmarken-Maske. */
  --grain-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   v8 — Section-Themes.
   JEDE Sektion malt ihren eigenen Grund und ihre eigene Textfarbe.
   Der Body-Tween ist nur noch Kulisse fuer den Ueberzug beim
   Gummiband-Scroll; die Lesbarkeit haengt nicht mehr an ihm.
   Vollstaendiger Tokensatz je Thema: bg, bg2, fg, muted, line,
   card, accent-ink.
   ============================================================ */
section[data-theme],footer[data-theme]{
  background-color:var(--bg);
  color:var(--fg);
}
/* v15 — „Papier": Creme-Grund, Tinte, weisse Karten. Kein --accent-Override:
   Gelb ist ueberall dieselbe Fuellung. */
section[data-theme="paper"],footer[data-theme="paper"]{
  --bg:var(--ground); --bg2:var(--ground-2); --fg:var(--fore);
  --muted:var(--fore-muted); --line:rgba(246,243,236,.16);
  --card:#FFFFFF;
  --accent-ink:var(--fore);
}
/* v15 — „Hell" ist Papier-2, eine Stufe tiefer als der Grund. Muted mit
   .68 Deckung ergibt 5,9:1 auf #ECE8DF. */
section[data-theme="light"],footer[data-theme="light"]{
  --bg:var(--ground-2); --bg2:#26241D; --fg:var(--fore);
  --muted:rgba(246,243,236,.68); --line:rgba(246,243,236,.18);
  --card:#FFFFFF;
  --accent-ink:var(--fore);
}
/* Das Akzentpanel: Gelb als Flaeche, Tinte als Schrift. Die gedaempfte
   Schrift kommt aus dem Boot-Skript (--muted-accent, 4,55:1 gegen Gelb),
   der feste Wert ist der Rueckfall ohne Skript. */
section[data-theme="accent"],footer[data-theme="accent"]{
  --bg:var(--accent); --fg:var(--on-accent);
  --muted:var(--muted-accent, rgba(20,19,15,.66));
  --line:rgba(20,19,15,.22);
  --bg2:color-mix(in srgb, var(--ink) 12%, var(--accent));
  --card:color-mix(in srgb, var(--ink) 10%, var(--accent));
  --accent-ink:var(--ink);
}
/* Zugabe, nicht Voraussetzung: eine 1px-Verlaufskante an der Naht
   zwischen zwei Sektionen. Faellt sie aus, aendert sich nichts. */
section[data-theme]:not(#hero)::before,footer[data-theme]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:7;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--fg) 16%,transparent) 18%,
    color-mix(in srgb,var(--fg) 16%,transparent) 82%,
    transparent 100%);
}

/* ============================================================
   Basis
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--ground);
  color:var(--fore);
  font-family:var(--sans);
  font-size:clamp(16px,calc(13.7px + .16vw),18px);
  line-height:1.4;
  /* craft-v6: letter-spacing -0.02em auf allem, auch Fliesstext. */
  letter-spacing:-.02em;
  font-variation-settings:'wght' 400,'wdth' 100;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--tween) ease,color var(--tween) ease;
}
/* Der Body traegt nur noch den Grund HINTER den Sektionen — sichtbar
   beim Gummiband-Scroll. Farbe von Text und Sektionsgrund kommt aus
   [data-theme], nicht von hier. */
body.t-paper{background-color:var(--ground)}
body.t-light{background-color:var(--ground-2)}
body.t-accent{background-color:var(--accent)}

section,footer{position:relative}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;letter-spacing:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
/* Ein gelber Fokusring waere auf Papier unsichtbar (1,14:1) — also Tinte. */
:focus-visible{outline:2px solid var(--fore);outline-offset:3px}

/* Flat-Modus: nur fuer Vollseiten-Screenshots (?flat=1). */
html.flat section,html.flat footer{background-color:var(--bg)}
html.flat #hero{min-height:0;height:900px}
html.flat .sticky-card,html.flat #pre,html.flat #dsv{display:none!important}

/* ============================================================
   Typo-Skala — exakt die clamp()-Werte aus craft-v6.md.
   Bold-Versalien gibt es nur dreimal: Hero (display-sm),
   Ergebnisse + Akzentpanel (heading-1), Footer (display-rg).
   Alle uebrigen Sektions-Headlines sind heading-2: Regular,
   Gross-Kleinschreibung, lh 0,9. Die Breite kommt ueber wdth,
   damit keine Zeile bricht.
   ============================================================ */
.display-sm{
  font-size:clamp(72px,calc(36px + 2.5vw),108px);
  line-height:.8;letter-spacing:-.02em;text-transform:uppercase;
  font-weight:700;font-variation-settings:'wght' 700,'wdth' 100;
}
.display-rg{
  font-size:clamp(80px,calc(37px + 3vw),123px);
  line-height:.8;letter-spacing:-.02em;text-transform:uppercase;
  font-weight:700;font-variation-settings:'wght' 700,'wdth' 112;
}
.heading-1{
  font-size:clamp(60px,calc(30px + 2.08vw),90px);
  line-height:.8;letter-spacing:-.02em;text-transform:uppercase;
  font-weight:700;font-variation-settings:'wght' 700,'wdth' 108;
}
.heading-2{
  font-size:clamp(48px,calc(24px + 1.67vw),72px);
  line-height:.9;letter-spacing:-.02em;text-transform:none;
  font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
}
/* Zeilenkoepfe in Listen (Leistungen, GEO). Zwischen heading-2 und
   heading-6 — sonst schreit jede Zeile so laut wie die Sektion. */
.heading-3{
  font-size:clamp(28px,calc(14px + 1.53vw),44px);
  line-height:.95;letter-spacing:-.02em;text-transform:none;
  font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
}
.heading-6{
  font-size:clamp(20px,calc(18px + .15vw),22px);
  line-height:1.2;letter-spacing:-.02em;
  font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
}
.body-md{
  font-size:clamp(20px,calc(15px + .35vw),25px);
  line-height:1.2;letter-spacing:-.02em;
  font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
}
.body-rg{
  font-size:clamp(16px,calc(13.7px + .16vw),18px);
  line-height:1.4;letter-spacing:-.02em;
  font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
}
.mono{
  font-family:var(--mono);
  font-size:var(--lab-fs);line-height:1.8;font-weight:500;
  letter-spacing:var(--lab-ls);text-transform:uppercase;
  font-variant-numeric:tabular-nums;font-variation-settings:var(--lab-vs)
}
.dim{color:var(--muted)}

/* Optische Randlinie: Versalien tragen eine linke Vorbreite von rund
   0,028 em. Ohne Ausgleich steht jede Display-Zeile 2–6 px rechts der
   40-px-Randlinie, waehrend Label und Mono exakt darauf sitzen. */
.hero-h1,.talk,.res-say,
.head-l > h2,.head-l-wide > h2,.ovl-in > h2{margin-left:-.02em}
/* Das S im Akzentpanel steht bei 150 px am weitesten innen. */
.claim{margin-left:-.035em}

/* ============================================================
   Raster & Rhythmus
   ============================================================ */
.wrap{padding-inline:var(--m)}
.grid,.sgrid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
}
/* v10 — Hauptsektionen: Kopf 100, Fuss 80. Zwischen zwei Sektionen liegen
   damit 180 px bei 1440 statt 480. */
.sec{padding-block:var(--sec-top) var(--sec-bot)}
/* Der Hero hat keinen Fuss — die erste Sektion traegt die Naht allein. */
#hero + .sec{padding-top:var(--sec-seam)}
/* Unterbloecke haengen enger an ihrer Sektion. */
.sec-sub{padding-block:var(--sec-bot) var(--sec-bot)}

/* Kopf einer Sektion: Label + Headline links (1–7), Absatz rechts (10–12). */
/* Kopf: Label + Headline links, Absatz rechts — auf EINER Grundlinie.
   align-items:last baseline hilft hier nicht: die Zeilenmasken sind
   overflow:hidden und liefern dem Raster darum eine synthetische Grundlinie.
   Also von Hand, aber gemessen statt geschaetzt:
     .195em  holt das negative Aussenmass der Maske zurueck,
     der Rest ist die Differenz der Unterlaengen zwischen
     heading-2 (lh .9) bzw. heading-1 (lh .8) und body-md (lh 1.2).
   Rest-Abweichung bei 1440: unter 0,5 px. */
.sec-head{align-items:end}
.sec-head .head-l > .heading-2,.sec-head .head-l-wide > .heading-2{margin-bottom:.274em}
.sec-head .head-l > .heading-1,.sec-head .head-l-wide > .heading-1{margin-bottom:.355em}
.sec-head .head-r{padding-bottom:5px}
/* Sektionen, deren Kopf nur aus dem Label besteht, haben nichts auszurichten. */
.sec-head.top{align-items:start}
.sec-head.top .head-r{padding-bottom:0}
.head-l{grid-column:1 / 7}
.head-l-wide{grid-column:1 / 9}
.head-r{grid-column:10 / 13;align-self:end}
/* Headline -> Inhalt: 56 px bei 1440 (Sollfenster 48–64). */
.sec-body{margin-top:var(--sec-head-gap)}
/* Sektionen, deren Kopf nur aus dem Label besteht, ruecken enger. */
.sec-head.top{align-items:start}
.sec-body.tight{margin-top:calc(var(--sec-head-gap) * .72)}

/* Sektions-Label: Mono in Klammern, 24 px Abstand zur Headline. */
.chapter{display:block;margin-bottom:24px}
.chapter .mono{color:var(--muted)}
/* Haarlinie an der Sektionsoberkante, zeichnet sich von links. */
.rule{
  display:block;height:1px;background:var(--line);
  transform-origin:left center;
  transition:background-color var(--tween) ease;
}
.sec-rule{margin-bottom:var(--sec-rule-gap)}
html.js .rv .rule{transform:scaleX(0)}
html.js .rv.revealed .rule,html.show-all .rv .rule{
  transform:scaleX(1);
  transition:transform 1.1s var(--ease) .1s;
}

/* ============================================================
   Reveals — Ruhezustand ist SICHTBAR.
   ============================================================ */
.ln{display:block;overflow:hidden;padding-bottom:.045em}
/* Bei lh 0,8 liegt der Zeilenkasten unter den Umlautpunkten — die Maske
   bekommt oben Luft, das Negativ-Margin haelt den Satzspiegel. */
.display-sm .ln,.display-rg .ln,.heading-1 .ln{padding-top:.3em;margin-bottom:-.3em}
.heading-2 .ln,.heading-3 .ln{padding-top:.24em;margin-bottom:-.24em}
.ln-i{display:block;will-change:transform}
html.js .rv .ln-i{transform:translateY(110%)}
html.js .rv.revealed .ln-i,html.show-all .rv .ln-i{
  transform:none;
  transition:transform .9s var(--ease) calc(var(--i,0) * 90ms);
}
html.js .rv-f{opacity:0;transform:translateY(26px)}
html.js .rv-f.revealed,html.show-all .rv-f{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease) calc(var(--i,0) * 90ms),transform .9s var(--ease) calc(var(--i,0) * 90ms);
}
html.js .rv-hero.revealed .ln-i,html.show-all .rv-hero .ln-i{
  transition:transform 1.1s var(--ease) calc(var(--i,0) * 110ms);
}

/* ============================================================
   v10 — Sektionsweise Choreografie.
   Sobald GSAP steht, uebernimmt das Skript den Auftritt JEDER Sektion:
   eine eigene Timeline je Sektion, ausgeloest beim ersten Eintritt.
   Damit sich CSS und Skript nicht in die Quere kommen, schaltet
   html.choreo den alten Reveal ab — der CSS-Ruhezustand ist dann bereits
   der Endzustand, und die Anfangswerte setzt GSAP inline (die schlagen
   jede Klassenregel, auch die Notbremse .show-all).
   Der Hero behaelt seinen v9-Auftritt: .rv-keep bleibt beim CSS.
   Ohne GSAP, ohne JS und bei reduzierter Bewegung aendert sich nichts.
   ============================================================ */
html.choreo .rv:not(.rv-keep) .ln-i,
html.choreo .rv-f:not(.rv-keep){transform:none;opacity:1;transition:none}
html.choreo .rv:not(.rv-keep) .rule{transform:scaleX(1);transition:none}
html.choreo .imgrv{clip-path:none}
html.choreo .claim-block .claim{transform:none}
/* Verbindungslinie der drei Schritte. Sie gehoert zur Choreografie und
   ist ohne sie nicht vorhanden — der Ruhezustand bleibt unveraendert. */
.steps-line{display:none}
html.choreo .steps-line{
  display:block;position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  pointer-events:none;z-index:1;
}
@media (max-width:1000px){html.choreo .steps-line{display:none}}

/* ============================================================
   Button — 50 px, Radius 4, Rahmen fg 20 %, Mono 10, Pfeil 7x8.
   Hover: Backdrop in fg faehrt in 0,4 s hoch, Text flippt,
   der Pfeil dreht 45 Grad um seine rechte obere Ecke.
   Akzentfuellung gibt es genau einmal je Sektion.
   ============================================================ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sp-lg);
  height:50px;min-height:50px;padding:0 16px;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;white-space:nowrap;
  color:var(--fg);cursor:pointer;
  --fill:var(--accent);--fill-ink:var(--on-accent);
  transition:color var(--ui) var(--ui-e),border-color var(--ui) var(--ui-e);font-variation-settings:var(--lab-vs)
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--fill);
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .4s var(--expo);
  pointer-events:none;
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--fill-ink)}
.arw{
  flex:0 0 auto;display:block;width:7px;height:8px;overflow:visible;
  transform-origin:top right;
  transition:transform var(--ui) var(--ui-e);
}
.btn:hover .arw,.btn:focus-visible .arw{transform:rotate(45deg)}
.btn-accent{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  --fill:var(--fore);--fill-ink:var(--on-accent);
}
/* Magnetisch: JS setzt --gx/--gy, CSS bewegt nur per transform. */
.mag{transform:translate3d(var(--gx,0px),var(--gy,0px),0);transition:transform .6s var(--elastic)}
.mag.is-mag{transition:transform .1s linear}

/* Chips und Tags: Mono in eckigen Klammern, kein Rahmen, kein Grund. */
.chips,.tags{display:flex;flex-wrap:wrap;gap:8px}
.chip,.tag{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-variation-settings:var(--lab-vs)
}
.chips .chip{padding-block:13px}
a.chip{transition:color var(--ui) var(--ui-e);isolation:isolate}
/* v15.4 — Chip-Hover ist eine der Gelb-Stellen, aber die Flaeche sitzt am
   Text (eine Zeile plus 2 px), nicht am 44-px-Treffer: sonst wird aus der
   Marke ein Kasten. */
a.chip::before{content:"";position:absolute;z-index:-1;left:-6px;right:-6px;top:50%;height:calc(1.8em + 2px);
  transform:translateY(-50%);border-radius:2px;background:var(--accent);opacity:0;transition:opacity var(--ui) var(--ui-e)}
a.chip:hover::before,a.chip:focus-visible::before{opacity:1}
a.chip:hover,a.chip:focus-visible{color:var(--on-accent)}

/* Textlinks */
.ul{position:relative}
.ul::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease);
}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1)}
/* v29 — Links mitten im Text: 44 px Trefferflaeche, ohne den Satzspiegel
   zu sprengen. Das Polster wird vom Aussenabstand wieder abgezogen. */
.head-r .ul,.body-md .ul,.body-rg .ul,.hero-cta .ul,.claim-alt .ul{display:inline-block;padding-block:13px;margin-block:-13px}
/* v30 — Die leise zweite Tuer unter dem Aufruf. Auf dem Akzentpanel
   liegt der gelbe Unterstrich auf Gelb und waere unsichtbar. */
.claim-alt{margin-top:calc(var(--sp-lg) * -.4)}
.claim-alt .ul{color:var(--on-accent)}
#claim .ul::after{background:var(--on-accent)}

/* ============================================================
   v33 — Textlayout fuer lange Fliesstexte: die 23 Artikel des
   GEO-Reports, Impressum und Datenschutz. Beim dritten Gebrauch steht
   es hier statt dreimal in den Seiten.
   .art-body ist die Spalte, .art-prose der Fliesstext darin. Die
   Trennung ist noetig: die Textgrade von .art-prose duerfen nicht in
   den Aufruf darunter greifen (.mono, .btn-accent).
   ============================================================ */
/* Der Textkoerper: Spalten 2–8, damit die Zeile lesbar kurz bleibt. */
.art-body{grid-column:2 / 9;max-width:68ch}
/* Der Fliesstext hat seine eigene Huelle: seine Grade und Linkfarben
   duerfen nicht in den Aufruf darunter greifen (.mono, .btn-accent). */
.art-prose > *{margin-top:var(--sp-md)}
.art-prose > *:first-child{margin-top:0}
.art-prose h2{
  margin-top:var(--sp-2xl);font-size:clamp(23px,1.95vw,29px);line-height:1.16;
  letter-spacing:-.02em;font-weight:400;
}
.art-prose h3{
  margin-top:var(--sp-xl);font-size:clamp(18px,1.3vw,20px);line-height:1.26;
  letter-spacing:-.015em;font-weight:400;
}
.art-prose h3 strong{font-weight:400}
.art-prose h4{margin-top:var(--sp-lg);font-size:17px;font-weight:400;color:var(--muted)}
.art-prose p{font-size:clamp(16px,1.15vw,18px);line-height:1.62;letter-spacing:-.01em}
.art-prose strong{font-weight:500;color:var(--fg)}
.art-prose em{font-style:italic}
.art-prose ul,.art-prose ol{padding-left:1.15em}
.art-prose li{margin-top:9px;font-size:clamp(16px,1.15vw,18px);line-height:1.6}
.art-prose li::marker{color:var(--muted)}
.art-prose li > p{margin:0}
.art-prose li > p + p{margin-top:6px}
.art-prose li ul,.art-prose li ol{margin-top:6px}
.art-prose a{
  color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);transition:text-decoration-color .3s var(--ease);
}
.art-prose a:hover{text-decoration-color:var(--accent)}
.art-prose blockquote{
  margin:var(--sp-xl) 0;padding-left:var(--sp-lg);
  border-left:2px solid var(--accent);font-size:clamp(18px,1.4vw,22px);line-height:1.45;
}
.art-prose blockquote p{font-size:inherit;line-height:inherit}
.art-prose hr{margin:var(--sp-xl) 0;border:0;border-top:1px solid var(--line)}
/* Die Bilder aus WordPress sind 300-px-Vorschauen. Auf 520 px gezogen
   wurden sie unscharf; sie stehen in ihrer echten Groesse, bis die
   Originale da sind. */
.art-prose img{
  display:block;width:auto;max-width:min(100%,520px);height:auto;border-radius:4px;
  margin:var(--sp-xl) 0;
}
.art-prose figure{margin:var(--sp-xl) 0}
.art-prose figcaption{margin-top:10px;font-family:var(--mono);font-size:var(--lab-fs);
  letter-spacing:-.005em;color:var(--muted);font-variation-settings:var(--lab-vs)
}
.art-prose code{
  font-family:var(--mono);font-size:12.5px;line-height:1.85;
  display:block;padding:14px 16px;border:1px solid var(--line);border-radius:4px;
  background:rgba(246,243,236,.04);overflow-x:auto;white-space:pre-wrap;
  word-break:break-word;font-variation-settings:'wght' 440,'wdth' 100
}

/* Tabellen: auf dem Handy seitlich scrollbar statt gequetscht. */
.art-table{margin:var(--sp-xl) 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.art-prose table{width:100%;border-collapse:collapse;min-width:520px}
.art-prose th,.art-prose td{
  padding:12px 14px;border-top:1px solid var(--line);text-align:left;
  vertical-align:top;font-size:15px;line-height:1.45;
}
.art-prose th{
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;letter-spacing:var(--lab-ls);
  text-transform:uppercase;color:var(--muted);border-top:0;font-variation-settings:var(--lab-vs)
}
.art-prose tbody tr:hover{background:rgba(246,243,236,.03)}

/* v34 — Die Bruecke im Artikeltext: der leise Weg zum kostenlosen Check,
   mitten im Lesen statt erst am Ende. Kein Kasten mit Flaeche — eine
   gelbe Kante links, wie beim Zitat, damit sie den Lesefluss nicht
   zerschneidet. */
.art-bridge{
  margin:var(--sp-xl) 0;padding:var(--sp-md) 0 var(--sp-md) var(--sp-lg);
  border-left:2px solid var(--accent);
}
.art-bridge b{display:block;font-weight:400}
.art-bridge p{margin-top:8px;color:var(--muted)}
.art-bridge .ul{display:inline-block;padding-block:13px;margin-block:-13px;color:var(--fg)}

/* Fragen im Artikel: dieselbe Form, aus der KI-Systeme zitieren. */
.art-faq{margin-top:var(--sp-lg);border-top:1px solid var(--line)}
.art-faq .art-q{padding:var(--sp-md) 0;border-bottom:1px solid var(--line)}
.art-faq .art-q h3{margin-top:0;font-size:clamp(17px,1.2vw,19px)}
.art-faq .art-q p{margin-top:8px;color:var(--muted)}

.art-cta{margin-top:var(--sp-2xl);padding-top:var(--sp-xl);border-top:1px solid var(--line)}
.art-cta p{max-width:52ch;margin-bottom:var(--sp-lg)}
.art-cta .claim-alt{margin-top:var(--sp-md)}
.art-cta .claim-alt .ul{color:var(--muted)}
/* v37: Erstgespraech und „Mehr zu …" stehen nebeneinander, beide als Knopf. */
.art-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-md)}
.art-cta > *:not(.btn):not(.claim-alt){flex:0 0 100%}
.art-cta > p:not(.claim-alt){margin-bottom:calc(var(--sp-lg) - var(--sp-md))}
.art-cta .claim-alt{margin:0}

@media (max-width:760px){
  .art-body{grid-column:1 / 13}
  .art-prose h2{margin-top:var(--sp-xl)}
  .art-prose blockquote{margin:var(--sp-lg) 0}
  .art-prose img,.art-prose figure,.art-table{margin:var(--sp-lg) 0}
  .art-cta{margin-top:var(--sp-xl)}
}

/* ============================================================
   v34 — Fragen: <details> auf dem Raster, Mono-Nummer, ( + ) dreht,
   gelbe Linie oben. Stand vorher fuenfmal identisch in den Seiten.
   Auf- und Zuklappen animiert das Skript (weiche Hoehe, Antwort
   blendet mit). Ohne JS oder bei reduzierter Bewegung klappt <details>
   wie gewohnt — nichts ist dahinter versteckt.
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{position:relative;border-bottom:1px solid var(--line)}
.faq details::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--ease);
}
.faq details[open]::before,.faq details:hover::before{transform:scaleX(1)}
.faq summary{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:baseline;padding:var(--sp-lg) 0;cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq .q-no{grid-column:1 / 2;color:var(--muted)}
.faq .q{grid-column:2 / 11;margin:0}
.faq .q-plus{grid-column:11 / 13;justify-self:end;color:var(--muted)}
.faq .plus{transition:transform .5s var(--ease)}
.faq details[open] .plus{transform:rotate(45deg)}
.faq .a-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.faq .a{grid-column:2 / 9;padding:0 0 var(--sp-xl);max-width:60ch;color:var(--fg)}
.faq .a .ul{display:inline-block;padding-block:14px;margin-block:-14px}
/* Beim Zuklappen gehen Kreuz und Linie gleich mit, nicht erst, wenn die
   Antwort schon verschwunden ist. */
.faq details.is-closing .plus{transform:none}
.faq details.is-closing:not(:hover)::before{transform:scaleX(0)}
@media (max-width:760px){
  .faq summary{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;padding:var(--sp-md) 0}
  .faq .q-no{grid-column:1}.faq .q{grid-column:2}.faq .q-plus{grid-column:3}
  .faq .a-wrap{display:block}
  .faq .a{padding:0 0 var(--sp-lg)}
}

/* v33 — Im Artifact-Prototyp sind drei der 23 Artikel veroeffentlicht.
   Die uebrigen Zeilen fuehren dort zurueck auf den GEO-Report. Damit das
   kein Klick ins Nichts ist, sagen sie es. Auf der echten Seite steht
   dieses Attribut nirgends — dort fuehrt jede Zeile auf ihren Artikel. */
.post[data-proto="aus"]{opacity:.5}
.post[data-proto="aus"] .post-arrow{display:none}
.post[data-proto="aus"] .post-meta::after{content:" \00b7  nicht im Prototyp"}
.post[data-proto="aus"]:hover{opacity:.72}

/* Text-Flip: zwei Ebenen in overflow:hidden. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fx{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.fx > span{display:block;white-space:nowrap;transition:transform .5s var(--mono-e)}
.fx > .fx-b{position:absolute;left:0;top:0;width:100%;transform:translateY(100%)}
.fx-host:hover .fx:not(.stag) > .fx-a,.fx-host:focus-visible .fx:not(.stag) > .fx-a{transform:translateY(-100%)}
.fx-host:hover .fx:not(.stag) > .fx-b,.fx-host:focus-visible .fx:not(.stag) > .fx-b{transform:translateY(0)}
/* Mono-Reveal: 0,5 s power3.inOut, 12 ms je Zeichen.
   Im Stagger-Modus tragen die Zeichen den Versatz, die Ebene selbst
   liegt bei 0 — sonst stuende Ebene B doppelt tief und kaeme nie ins Bild. */
.fx.stag > span{transition:none}
.fx.stag > .fx-b{transform:none}
.fx-ch{display:inline-block;white-space:pre;transition:transform .5s var(--mono-e);transition-delay:calc(var(--c,0) * 12ms)}
.fx.stag > .fx-b .fx-ch{transform:translateY(100%)}
.fx-host:hover .fx.stag > .fx-a .fx-ch,.fx-host:focus-visible .fx.stag > .fx-a .fx-ch{transform:translateY(-100%)}
.fx-host:hover .fx.stag > .fx-b .fx-ch,.fx-host:focus-visible .fx.stag > .fx-b .fx-ch{transform:translateY(0)}
/* Vom Skript geschalteter Flip (Header-Spruch), unabhaengig vom Hover. */
.fx.go.stag > .fx-a .fx-ch{transform:translateY(-100%)}
.fx.go.stag > .fx-b .fx-ch{transform:translateY(0)}
.fx.no-t > span,.fx.no-t .fx-ch{transition:none!important}

/* ( + ) dreht 45 Grad zu ( x ) */
.plus{display:inline-block;transition:transform .35s var(--ease)}
[aria-expanded="true"] .plus,.is-open .plus{transform:rotate(45deg)}

/* ============================================================
   Cursor — 8-px-Punkt, difference.
   ============================================================ */
.cur{display:none}
html.js-cur .cur{
  display:block;position:fixed;left:0;top:0;z-index:9600;
  width:0;height:0;pointer-events:none;
  transform:translate3d(var(--cx,-200px),var(--cy,-200px),0);
}
.cur > *{position:absolute;left:0;top:0;transition:transform .3s var(--ease),opacity .3s var(--ease)}
/* v15.1 — der Cursor ist gelb; der 1-px-Tinte-Ring haelt ihn auch auf dem gelben Panel sichtbar. */
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 1px rgba(246,243,236,.5);transform:scale(1)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:999px;border:1.5px solid var(--accent);box-shadow:0 0 0 1px rgba(246,243,236,.2);transform:scale(.2);opacity:0}
.cur-pill{
  display:block;margin:-16px 0 0 -52px;padding:0 16px;height:32px;line-height:32px;
  border-radius:4px;background:var(--accent);color:var(--on-accent);white-space:nowrap;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;letter-spacing:var(--lab-ls);text-transform:uppercase;
  transform:scale(.5);opacity:0;transform-origin:center;font-variation-settings:var(--lab-vs)
}
.cur.is-link .cur-dot{transform:scale(0)}
.cur.is-link .cur-ring{transform:scale(1);opacity:1}
.cur.is-case .cur-dot{transform:scale(0)}
.cur.is-case .cur-pill{transform:scale(1);opacity:1}

/* ============================================================
   Zeilen — Hover hebt die Zeile, die Nachbarn dimmen.
   ============================================================ */
.row-hl{position:relative;z-index:0;transition:opacity .5s var(--ease)}
.row-hl::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(var(--m) * -1);right:calc(var(--m) * -1);top:0;bottom:0;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.rowset:hover > .row-hl{opacity:.4}
.rowset:hover > .row-hl:hover{opacity:1}
.row-hl:hover::before{opacity:1}
.row-num{display:inline-block;transform-origin:left center;transition:transform .4s var(--ease)}
.row-hl:hover .row-num{transform:scale(1.03)}
.row-arrow{display:inline-block;transition:transform .5s var(--ease)}
.row-hl:hover .row-arrow{transform:translateX(6px)}

/* ============================================================
   Bild-Reveal — clip-path von unten, gleichzeitig scale 1,15 -> 1.
   ============================================================ */
.imgrv{position:relative;overflow:hidden;--sc:1;--py:0%}
.imgrv::before{
  content:"";position:absolute;inset:-6% 0;display:block;
  background:inherit;
  transform:translate3d(0,var(--py,0%),0) scale(var(--sc,1));
}
html.js .imgrv{clip-path:inset(100% 0 0 0)}
html.show-all .imgrv{clip-path:none}
html.js .ovl .imgrv{clip-path:inset(100% 0 0 0)}
html.js .ovl .imgrv::before{transform:scale(1.15)}
html.js .ovl.on .imgrv{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--expo) .1s}
html.js .ovl.on .imgrv::before{transform:scale(1);transition:transform 1.1s var(--expo) .1s}

/* ============================================================
   Preloader
   ============================================================ */
#pre{
  position:fixed;inset:0;z-index:9500;
  /* v15 — Tinte mit Papier-Schrift. Der Hero darunter ist Papier; der
     Sprung von Tinte zu Papier macht den Pixel-Dissolve sichtbar. Gelb
     kommt hier nicht vor — es ist Akzent, kein Auftritt. */
  background-color:#F6F3EC;
  color:#14130F;
  pointer-events:none;
  animation:preKill .24s linear .62s forwards;
}
#pre[hidden]{display:none!important}
@keyframes preKill{to{opacity:0;visibility:hidden}}
.pre-wm{
  position:absolute;left:50%;top:50%;width:190px;
  transform:translate(-50%,-50%);
  color:#14130F;opacity:1;transition:opacity .22s ease;
}
.pre-num,.pre-tag{
  position:absolute;bottom:clamp(24px,4vh,40px);
  color:rgba(20,19,15,.9);transition:opacity .22s ease;
}
.pre-num{left:var(--m)}
.pre-tag{right:var(--m);color:rgba(20,19,15,.58)}
#pre.out .pre-wm,#pre.out .pre-num,#pre.out .pre-tag{opacity:0}

#dsv{
  position:fixed;inset:0;z-index:9400;display:none;pointer-events:none;
  animation:dsvKill .2s linear 1.15s forwards;
}
#dsv.on{display:block}
@keyframes dsvKill{to{opacity:0;visibility:hidden}}

/* ============================================================
   Header — eine fixierte Pille, keine Vollbreiten-Leiste.
   438 x 50, Radius 4, backdrop-blur, Grund bgSecondary 60 %.
   Links Wortmarke (100 px), Mitte der Sektions-Spruch (Mono-Flip),
   rechts der Burger. Der Klick klappt das Menue IN der Pille auf.
   ============================================================ */
/* v7 — halb und halb: die Pille ist immer ein dunkles Objekt. Auf hellen
   Sektionen tauschen Grund und Vordergrund, damit sie lesbar bleibt; darum
   erbt sie NICHT die Sektionstokens, sondern setzt ihren eigenen Satz. */
.hdr{
  position:fixed;top:16px;left:0;right:0;z-index:800;
  display:flex;justify-content:center;
  padding-inline:16px;pointer-events:none;
  color:#14130F;
}
/* v8: Die Pille traegt IMMER denselben dunklen Grund. Sie haengt damit
   an keiner Sektion und an keinem Body-Tween — auf paper, light und accent
   ist der Kontrast derselbe (gemessen > 11:1). */
.pill{
  --bg:#F6F3EC;--bg2:#ECE8DF;--fg:#14130F;
  --muted:rgba(20,19,15,.66);--line:rgba(20,19,15,.20);
  color:#14130F;
  pointer-events:auto;
  width:100%;max-width:438px;
  height:50px;overflow:hidden;
  border-radius:4px;
  /* v15 — Tinte bei 92 %: ueber Papier, Creme und Gelb bleibt sie ein
     dunkles Objekt, das Glas bleibt. */
  background:rgba(246,243,236,.94);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(20,19,15,.12),0 18px 40px -24px rgba(0,0,0,.7);
  transition:height .5s var(--menu-e);
  will-change:height;
}
.pill-bar{
  display:flex;align-items:center;gap:12px;
  height:50px;padding:0 16px;
}
.pill-wm{display:flex;align-items:center;flex:0 0 100px;width:100px;color:currentColor}
.wm-svg{display:block;width:100%;height:auto}
.pill-msg{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);overflow:hidden;
}
/* Der Spruch wechselt die Laenge — beide Ebenen brauchen die volle Breite,
   sonst schneidet der laengere Satz ab. */
.pill-msg .fx{display:block;width:100%;text-align:center}
.pill-msg .fx > span{width:100%;text-align:center}
.pill-burger{
  flex:0 0 16px;width:16px;height:32px;padding:0;margin:0;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:none;border:0;cursor:pointer;
}
.pill-burger i{
  display:block;width:16px;height:2px;background:currentColor;
  transform-origin:center;
  transition:transform .4s var(--menu-e),opacity var(--ui) var(--ui-e);
}
.pill-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.pill-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.pill-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.pill-menu{border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.menu-a{
  position:relative;display:flex;align-items:center;
  height:50px;padding:0 16px;font-size:16px;line-height:1;letter-spacing:-.02em;
  transition:color var(--ui) var(--ui-e);
}
.menu-a + .menu-a{border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.menu-a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--accent);
  opacity:0;transition:opacity var(--ui) var(--ui-e);
}
.menu-a{isolation:isolate}
.menu-a:hover::before,.menu-a:focus-visible::before{opacity:1}
.menu-a:hover,.menu-a:focus-visible{color:var(--on-accent)}
.pill-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:12px 16px 16px;
  border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent);
}
.pill-foot .btn{flex:0 0 auto}

/* Ohne JS haengt das Menue offen unter der Pille — bedienbar bleibt es so oder so. */
html:not(.js) .pill{height:auto;overflow:visible}

/* ============================================================
   Hero
   ============================================================ */
#hero{
  position:relative;
  min-height:100svh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:var(--stage-top);
  overflow:hidden;isolation:isolate;
  /* v15 — Papier. Der Grund traegt sich selbst; Bewegung kommt aus den
     Ebenen darueber (Suchanfragen-Strom, Film), nicht aus der Farbe. */
  background-color:var(--ground);
  background-image:none;
}
/* v9 — Wortmarken-Moment. Die Wortmarke steht riesig ueber Spalte 1 bis 12
   auf der dunklen Buehne und fliegt danach per FLIP in die Kopf-Pille.
   Sie liegt bewusst NICHT im Hero: der Hero isoliert seinen Stapel, die
   Pille (z 800) laege sonst beim Landen darueber. Das Korn bringt sie
   deshalb selbst mit — dieselbe Textur wie im Hero, per multiply.
   Ruhezustand ohne JS: nicht vorhanden. Erst .js + .wm-on zeigen sie. */
.hero-wm{
  position:fixed;z-index:810;
  left:var(--m);right:var(--m);top:var(--stage-top);
  /* v15 — Tinte auf Papier. Hell wird sie erst kurz vor der Landung in
     der dunklen Pille (siehe .wm-fly weiter unten). */
  color:var(--fore);pointer-events:none;
  display:none;
  transform-origin:0 0;
  will-change:transform,clip-path;
}
/* Das Korn liegt NUR auf den Buchstaben: die Maske sind dieselben Pfade.
   Ohne sie waere es ein sichtbares graues Rechteck ueber der Buehne. */
.hero-wm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain-src);background-size:220px 220px;
  -webkit-mask-image:var(--wm-mask);mask-image:var(--wm-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:.28;mix-blend-mode:screen;
}
html.js.wm-on .hero-wm{display:block;clip-path:inset(0 100% 0 0)}
/* Der Farbwechsel liegt bei 0,55 s des 0,8-s-Fluges: dort ist die Marke
   rechnerisch zu 96 % in der Pille, die helle Schrift erscheint also nie
   auf dem Papier. */
html.js.wm-on.wm-fly .hero-wm{transition:none}
/* Bis die Wortmarke gelandet ist, ist die Pillen-Wortmarke unsichtbar. */
html.js.wm-on .pill-wm{opacity:0}
html.js.wm-on.wm-done .pill-wm{opacity:1}
/* Waehrend des Moments ist die Buehne leer: Karten und Copy kommen erst,
   wenn die Wortmarke abfliegt. */
html.js.wm-on .qstream,html.js.wm-on .hero-stage,html.js.wm-on .hero-scrim,html.js.wm-on .film-bar,html.js.wm-on .hero-inner{opacity:0}
html.js.wm-on.wm-done .qstream,html.js.wm-on.wm-done .hero-stage,html.js.wm-on.wm-done .hero-scrim,html.js.wm-on.wm-done .film-bar,
html.js.wm-on.wm-done .hero-inner{
  opacity:1;transition:opacity .5s var(--ease);
}

.grain{
  position:absolute;inset:-26%;z-index:3;pointer-events:none;opacity:.08;
  background-image:var(--grain-src);background-size:220px 220px;
  animation:grainshift 1.5s steps(1) infinite;
}
/* v15 — Korn auf Papier: als Multiplikation und sehr leise, damit die
   Flaeche Textur bekommt, aber Creme bleibt. */
#hero .grain{opacity:.07;mix-blend-mode:screen}
@keyframes grainshift{
  0%{transform:translate(0,0)}
  12.5%{transform:translate(-3%,2%)}
  25%{transform:translate(2%,-3%)}
  37.5%{transform:translate(-2%,-2%)}
  50%{transform:translate(3%,1%)}
  62.5%{transform:translate(-1%,3%)}
  75%{transform:translate(2%,2%)}
  87.5%{transform:translate(-3%,-1%)}
}
.hero-inner{
  position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:end;
  padding-inline:var(--m);
  /* Am Fuss bleibt Luft fuer die Karte unten rechts; die letzte H1-Zeile
     endet darueber. */
  padding-bottom:clamp(64px,7vw,96px);
}
.hero-copy{grid-column:1 / 9;grid-row:1}
.hero-eyebrow{display:block;color:var(--muted);margin-bottom:var(--sp-lg)}
/* Drei Zeilen, jede einzeilig. Die Breite kommt ueber wdth, nicht ueber den Grad. */
/* v15 — Tinte auf Papier, ohne Schatten. */
.hero-h1{
  margin-top:-.3em;
  color:var(--fg);
}
.hero-h1 .ln{padding-top:.3em;margin-bottom:-.3em}
/* H1 links, Chips rechts, eine Grundlinie. */
.hero-h1{margin-bottom:.195em}
/* v15 — H1-Marker: gelber Strich (.14 em) unter dem letzten Wort, faehrt
   nach dem Zeilen-Reveal von links auf. Ohne JS und bei Reduce steht er. */
em.hl{font-style:normal;position:relative;display:inline-block}
/* v17.1 — der Strich liegt knapp UNTER der Grundlinie, nicht hinter den
   Buchstaben: auf Nacht sahen Papier-Lettern ueber Gelb ausgefranst aus. */
em.hl::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.02em;height:.09em;border-radius:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--expo) 1.2s}
html.js .rv.revealed em.hl::after,html.show-all em.hl::after,html:not(.js) em.hl::after{transform:scaleX(1)}
.hero-side{grid-column:10 / 13;grid-row:1;align-self:end}
.hero-sub{color:var(--fore)}
.hero-chips{margin-top:var(--sp-md);gap:10px}
/* v15 — in Ruhe reine Mono-Marken, Hover Gelb (Whitelist, siehe a.chip). */
.hero-chips .chip{color:var(--muted)}

/* Sticky-Karte „Das sind wir“ — v10: sie ist IMMER sichtbar und scrollt mit.
   Kein Auf- und Abtauchen mehr, keine Scroll-Bedingung, in jeder Sektion da.
   In Ruhe eine 50-px-Karte unten rechts: Avatar 28 px rund plus Mono-Zeile.
   Bei Hover klappt sie auf 200 px Breite auf und zeigt das Foto-Reel.
   Wie die Pille ist sie ein dunkles Objekt und traegt ihre Farben selbst,
   damit sie auch ueber hellen Sektionen lesbar bleibt. 16 px vom Rand,
   damit sie nicht auf der Randlinie des Satzspiegels sitzt. */
.sticky-card{
  position:fixed;z-index:790;
  right:16px;bottom:16px;
  width:186px;
  border:1px solid rgba(20,19,15,.22);
  border-radius:4px;
  background:rgba(246,243,236,.94);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
  /* In Ruhe ist nur die 50-px-Leiste zu sehen, damit die Karte nichts
     zudeckt. Bei Hover klappt das Foto-Reel nach oben auf. clip-path
     schneidet auch die Trefferflaeche mit: geklickt wird nur die Leiste. */
  clip-path:inset(calc(100% - 50px) 0 0 0 round 4px);
  transition:clip-path .5s var(--ease),width .5s var(--ease);
  color:#14130F;
}
.sticky-card:hover,.sticky-card:focus-within{
  width:200px;
  clip-path:inset(0 0 0 0 round 4px);
  border-color:var(--accent);
}
.mini{position:relative;aspect-ratio:4/5;background:#ECE8DF}
.mini i{position:absolute;inset:0;display:block;background-size:cover;background-position:center 22%;opacity:0;transition:opacity .5s ease}
.mini i.is-on{opacity:1}
.mini i.p1{background-image:var(--i-founder)}
.mini i.p2{background-image:var(--i-janina)}
.mini i.p3{background-image:var(--i-tomris)}
.mini i.p4{background-image:var(--i-luc)}
.mini i.p5{background-image:var(--i-hofbauer)}
.sticky-card .cap{
  display:flex;align-items:center;gap:9px;width:100%;
  height:50px;padding:0 12px 0 10px;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;white-space:nowrap;
  background:transparent;border:0;cursor:pointer;text-align:left;
  transition:background-color var(--ui) var(--ui-e);font-variation-settings:var(--lab-vs)
}
.sticky-card .cap > .sc-t{flex:1 1 auto;min-width:0;overflow:hidden}
.sc-av{
  flex:0 0 28px;width:28px;height:28px;border-radius:999px;
  background:var(--i-founder) center 14%/cover no-repeat;
  box-shadow:0 0 0 1px rgba(20,19,15,.24);
}
.sticky-card .cap:hover{background:rgba(20,19,15,.08)}

/* v19 — Der Aufruf im Hero: Knopf plus Mono-Zeile, die sagt, was er kostet. */
.hero-cta{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--sp-md);margin-top:var(--sp-lg);
}
.hero-cta-note{color:var(--muted)}

/* ============================================================
   v19 — Buchungs-Pille und Anruf-Knopf.
   Die Pille liegt links neben der Karte „Das sind wir" und traegt dieselbe
   Hoehe. Sie ist gelb gefuellt: der einzige Handlungsaufruf, der immer im
   Bild bleibt. Auf Mobil tritt an ihre Stelle der Anruf-Knopf.
   ============================================================ */
.book-pill{
  position:fixed;z-index:790;
  right:calc(16px + 186px + 10px);bottom:16px;
  display:inline-flex;align-items:center;gap:12px;
  height:50px;padding:0 16px;border-radius:4px;
  background:var(--accent);color:var(--ink);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.book-pill:hover,.book-pill:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 28px 64px -26px rgba(0,0,0,.8);
}
/* Solange der Hero im Bild ist, traegt er den Aufruf selbst — zwei gleiche
   Knoepfe nebeneinander waeren einer zu viel. Ohne JS bleibt die Pille da. */
html.js .book-pill,html.js .call-pill{
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
html.js.hero-out .book-pill,html.js.hero-out .call-pill{
  opacity:1;pointer-events:auto;transform:none;
}
.bp-arw{display:inline-block;transition:transform .4s var(--ease)}
.book-pill:hover .bp-arw{transform:translateX(4px)}
.call-pill{display:none}

/* ============================================================
   Hero-Film „Die Arbeit als Film“ — drei Produkt-Karten, in Code gebaut.
   Ruhezustand des CSS ist das ENDBILD (Collage). GSAP setzt daraus den
   Anfangszustand von Beat 1 und spielt die Sequenz. Faellt GSAP aus,
   fehlt JS ganz oder ist Bewegung reduziert, steht die Collage sofort.
   ============================================================ */
/* ============================================================
   v15 — Suchanfragen-Strom. Fuenf Bahnen echter Anfragen hinter dem
   Film: Mono 10 px, Tinte bei 22 %, je Bahn eigenes Tempo (data-v in
   px/s, Vorzeichen = Richtung), an die Scroll-Geschwindigkeit gekoppelt.
   Die Marker-Pille ist eine der wenigen Gelb-Stellen. Der Strom liegt
   zwischen 20 und 60 % der Hero-Hoehe, also hinter dem Film und in der
   Luft darunter — nicht hinter der H1.
   ============================================================ */
.qstream{
  position:absolute;left:0;right:0;top:0;bottom:calc(var(--ih,40vh) + 16px);z-index:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-block:20vh 0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.qs-row{overflow:hidden;white-space:nowrap}
.qs-track{display:inline-flex;will-change:transform}
.qs-set{display:inline-flex;align-items:center;gap:28px;padding-right:28px}
.qs-set i{font-style:normal;color:var(--fore);opacity:.22}
.qs-q{
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  text-transform:uppercase;letter-spacing:var(--lab-ls);color:var(--fore);opacity:.22;
  transition:opacity .3s var(--ease),background-color .3s var(--ease);font-variation-settings:var(--lab-vs)
}
.qs-q.is-hot{opacity:1;background:var(--accent);color:var(--on-accent);padding:0 .5em;border-radius:2px}
/* Die feste Mono-Beschriftung der Leiste flippt auf die markierte Anfrage. */
.bar-head{overflow:hidden;min-width:45ch}
.bh-t{display:block;will-change:transform;white-space:nowrap}

/* v15 — Full-bleed: die Buehne liegt hinter allem ueber dem ganzen Hero.
   Der Film wird auf min(92 vw, 1400 px) skaliert und per fit() in das Band
   zwischen Leiste und H1 gesetzt, 2 vw nach rechts geschoben. */
.hero-stage{
  position:absolute;inset:0;z-index:1;
  display:block;padding:0;margin:0;min-height:0;
}
/* Papier-Scrim: haelt H1, Absatz und Chips lesbar, wenn Film und Text sich
   in niedrigen Fenstern beruehren. Oben bleibt der Film unverschleiert. */
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--ground) 0 var(--ih,30%),transparent calc(var(--ih,30%) + 40px));
}
.film{position:absolute;inset:0;min-height:0}
/* Die Zeichnung ist 1360 x 289. --fy (vom Skript) ist die Mitte des Bandes
   zwischen Leiste und H1; ohne Skript liegt sie bei 42 % der Hero-Hoehe. */
.film-fit{
  position:absolute;left:calc(50% + 2vw);top:var(--fy,42%);
  width:1360px;height:289px;
  transform:translate(-50%,-50%) scale(var(--ffit,1));
  transform-origin:50% 50%;
}
/* Ohne JS greifen nur diese Stufen: min(92 vw, 1400 px) / 1360. */
@media (max-width:1521px){.film-fit{--ffit:.97}}
@media (max-width:1360px){.film-fit{--ffit:.90}}
@media (max-width:1280px){.film-fit{--ffit:.87}}
@media (max-width:1180px){.film-fit{--ffit:.80}}
@media (max-width:1080px){.film-fit{--ffit:.73}}
@media (max-width:1000px){.film-fit{--ffit:.68}}
@media (max-width:900px){.film-fit{--ffit:.61}}
@media (min-width:761px) and (max-height:780px){.film-fit{--ffit:.74}}

/* ---- Leiste, oben links unter der Pille --------------------------- */
/* v15 — die Leiste sitzt oben, direkt unter der Pille: 56 px hoch, 1 px
   Linie oben und unten bei 16 %, Inhalt in EINER Zeile. Links das
   Mono-Label, in der Mitte die Aussage, rechts Fortschritt und „Nochmal".
   Der Film laeuft darunter full-bleed, die H1 steht am Fuss. Der Wechsel
   bleibt der Mono-Flip aus v11: alte Zeile nach oben raus, neue von unten
   rein, 0,5 s, nur transform und opacity. */
.film-bar{
  position:relative;z-index:6;
  flex:0 0 auto;
  box-sizing:border-box;
  height:var(--bar-h);
  margin-inline:var(--m);
  display:flex;align-items:center;gap:var(--sp-md);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.bar-head{
  flex:0 0 auto;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-variation-settings:var(--lab-vs)
}
/* Der Rahmen der Aussage. Genau eine Zeile hoch — die abgehende Zeile
   liegt absolut darueber, die ankommende steht im Fluss. 1,44 em, damit
   die Akzentflaeche des ersten Wortes (Zeile plus .06 em Fuss) nicht am
   Rand des Rahmens abgeschnitten wird. */
.log-flip{
  position:relative;overflow:hidden;
  flex:1 1 auto;min-width:0;
  text-align:center;
  font-size:clamp(20px,calc(18px + .15vw),22px);
  height:1.44em;
}
.log-line{
  margin:0;
  font-family:var(--sans);font-size:1em;line-height:1.44;letter-spacing:-.02em;
  font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
  color:var(--fg);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.log-line.is-out{position:absolute;left:0;right:0;top:0}
/* Das erste Wort der Aussage ist eine Tinte-Flaeche mit Papier-Schrift. */
.log-key{
  display:inline-block;
  margin-right:.16em;padding:0 .3em .06em;border-radius:2px;
  background:var(--accent);color:var(--on-accent);
  font-weight:500;font-variation-settings:'wght' 500,'wdth' 100;
}

/* Rechtes Ende der Leiste: drei Striche (aktiver Beat gefuellt) und der
   Mono-Link. Beides ist die Bedienung des Films, nicht Teil der Aussage. */
.film-prog{display:flex;align-items:center;gap:6px}
.film-prog i{
  position:relative;display:block;width:24px;height:2px;overflow:hidden;
  background:rgba(246,243,236,.22);
}
.film-prog i::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.film-prog i.on::after{transform:scaleX(1)}
.film-right{flex:0 0 auto;display:flex;align-items:center;gap:14px}
/* „Nochmal" — Rahmen-Knopf in Tinte, Hover invertiert. */
.film-again{
  background:transparent;border:0;padding:6px 10px;margin:0;cursor:pointer;
  border-radius:2px;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;white-space:nowrap;
  color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color var(--ui) var(--ui-e),color var(--ui) var(--ui-e);font-variation-settings:var(--lab-vs)
}
.film-again:hover,.film-again:focus-visible{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* Parallax-Ebene: nur sie traegt die Maus-Verschiebung, damit sie sich mit
   den GSAP-Transformationen der Karte nicht in die Quere kommt. */
.fk-par{
  position:absolute;inset:0;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
}
#parSerp{z-index:1}
#parAds{z-index:2}
#parChat{z-index:3}

/* v12: Die Karten liegen im Koordinatensystem der 1360 x 289 grossen Buehne.
   left/top/width ist die Lage waehrend des eigenen Beats, --cx/--cy/--cr/--cs
   der Versatz ins Endbild. Radius 4, Rahmen 1 px bei 8 %, weicher Schatten. */
.fk{
  position:absolute;left:var(--fl,0px);top:var(--ft,0px);width:var(--fw,760px);
  font-family:var(--sans);font-size:17px;line-height:1.45;letter-spacing:-.01em;
  text-align:left;border-radius:4px;
  /* v15 — warmer Schatten auf Papier: rgba(40,32,10,.18) mit 40 px
     Weichheit, dazu ein knapper Fuss, damit die weisse Karte eine Kante behaelt. */
  box-shadow:0 18px 40px rgba(10,6,0,.6),0 4px 12px rgba(10,6,0,.4);
  transform:translate(var(--cx,0px),var(--cy,0px)) rotate(var(--cr,0deg)) scale(var(--cs,1));
  transform-origin:50% 50%;
}
.fk-light{background:#FFFFFF;color:#121512;border:1px solid rgba(18,21,18,.08);padding:16px 20px 14px}
.fk-dark{background:var(--card-dark);color:#F3F0E8;border:1px solid rgba(243,240,232,.16);padding:18px 20px 16px}
/* Die ChatGPT-Karte ist die einzige dunkle Flaeche im Hero; das Gelb
   darauf ist dasselbe wie ueberall. */
.film .c-mono{font-size:11px}

/* v12 — Die Buehne ist 1360 x 289 gross; die Karten sind entsprechend
   groesser und jeder Beat nutzt die Breite: Suche links, Chat rechts,
   Anzeigen mittig-links. Ruhelage des CSS = Endbild, drei Ebenen mit den
   Skalierungen 0,88 / 0,93 / 1,00 und einem Gefaelle von links oben nach
   rechts unten. --fl/--ft/--fw ist die Lage waehrend des eigenen Beats,
   --cx/--cy/--cr/--cs der Versatz in die Collage. Die genauen Rechtecke
   misst export/... nach; hier steht die Absicht:
   Suche    hinten, 0,88, -1,0 Grad, oben links
   Anzeigen Mitte,  0,93, +1,4 Grad, unten mittig-links
   Chat     vorne,  1,00, -1,6 Grad, rechts */
/* v13 — Die Suchkarte ist 1000 statt 760 px breit: in Beat 1 ist sie die
   einzige Karte auf der 1360 px breiten Buehne, und bei 760 blieb rechts
   ein Loch. Im Endbild rueckt sie dafuer weiter nach links (--cx). */
#fkSerp{--fl:0px;  --ft:20px;--fw:1000px;--cx:-60px;--cy:-29px;--cr:-1deg;  --cs:.88}
#fkAds{ --fl:250px;--ft:16px;--fw:700px; --cx:48px; --cy:12px; --cr:1.4deg; --cs:.93}
#fkChat{--fl:640px;--ft:58px;--fw:720px; --cx:-3px; --cy:32px; --cr:-1.6deg;--cs:1}

/* Cursor-Punkt in Beat 1 --------------------------------------------- */
.fk-cur{
  position:absolute;left:0;top:0;z-index:9;width:13px;height:13px;
  margin:-6px 0 0 -6px;border-radius:999px;
  background:#F6F3EC;box-shadow:0 0 0 1px rgba(20,19,15,.35),0 6px 16px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
}
.fk-cur b{
  position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:999px;border:1.5px solid var(--accent);
  opacity:0;transform:scale(.3);display:block;
}
/* Streaming-Cursor in Beat 2 ----------------------------------------- */
.fk-ans{position:relative}
.fk-tcur{
  position:absolute;left:0;top:0;width:2px;height:1.05em;
  background:var(--accent);opacity:0;pointer-events:none;
  transform:translate(0,0);
}
.fk-tcur.on{animation:fkblink 1s steps(1) infinite}
/* Kampagnenbalken in Beat 3 ------------------------------------------ */
.fk-tab td:first-child{position:relative}
.fk-bar{
  position:absolute;left:0;bottom:-1px;width:600px;height:2px;
  background:var(--accent);opacity:1;
  transform:scaleX(var(--w,0));transform-origin:left center;
}

/* --- Karte 1: Suche ---------------------------------------------- */
.fk-search{
  display:flex;align-items:center;gap:13px;
  height:48px;padding:0 18px;border-radius:999px;
  background:#F4F6F2;border:1px solid #D6DBD3;
  font-size:17px;color:#121512;
}
.fk-search svg{flex:0 0 auto}
.fk-q{flex:1 1 auto;white-space:nowrap;overflow:hidden;min-width:0}
.fk-caret{
  flex:0 0 auto;display:inline-block;width:2px;height:20px;background:#121512;
  animation:fkblink 1s steps(1) infinite;
}
@keyframes fkblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.fk-rows{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:14px}
/* Der Grund ist wichtig: beim FLIP kreuzen sich Zeilen unterschiedlicher
   Hoehe. Ohne deckenden Grund liefen die Texte waehrend der Kreuzung
   ineinander — die aufsteigende Zeile schiebt sich jetzt sauber darueber. */
.fk-row{position:relative;display:flex;flex-direction:column;gap:3px;background:#FFFFFF}
.fk-row .u{font-family:var(--mono);font-size:11px;line-height:1.5;color:#4A514C;font-variation-settings:'wght' 440,'wdth' 100}
.fk-row b{font-size:17px;font-weight:500;line-height:1.25;color:#1A4D8F}
.fk-row p{margin:0;font-size:13.5px;line-height:1.4;color:#4A514C}
/* v9: Die Buehne ist breit und flach. Nur der Treffer traegt einen
   Beschreibungstext, die Wettbewerber bleiben zweizeilig. */
.fk-row.dim p{display:none}
.fk-row.dim .u,.fk-row.dim p{color:#8B928C}
.fk-row.dim b{color:#6B87AE}
/* v15 — „Position 14 → 1" ist die Rank-1-Pille: Gelb mit Tinte (Whitelist). */
.fk-tag{
  position:absolute;right:0;top:0;text-align:right;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:-.02em;
  text-transform:uppercase;color:#121512;
  background:var(--accent);padding:2px 8px;border-radius:2px;font-variation-settings:'wght' 440,'wdth' 100
}
.fk-tag i{display:block;height:2px;margin-top:5px;background:#121512;
  transform:scaleX(1);transform-origin:left center}
/* v15 — der Zaehler endet bei 36 € und die Zelle wird zur gelben Marke. */
#fkEur{display:inline-block;padding:2px 6px;margin:-2px -6px;border-radius:2px;transition:background-color .3s var(--ease)}
#fkEur.is-hot{background:var(--accent);color:#121512;font-weight:500}

/* --- Karte 2: KI-Antwort ------------------------------------------ */
.fk-cq{display:flex;gap:10px;font-family:var(--mono);font-size:12px;line-height:1.6;color:rgba(243,240,232,.62);font-variation-settings:'wght' 440,'wdth' 100}
.fk-cq i{font-style:normal;color:var(--accent)}
.fk-ans{margin-top:14px;font-size:17px;line-height:1.5;min-height:3em}
.fk-mark{position:relative;display:inline-block;padding:0 4px;margin:0 -2px;background:none;color:inherit}
.fk-mark .b{
  position:absolute;left:0;top:0;right:0;bottom:0;padding:0 4px;
  background:var(--accent);color:var(--on-accent);
  clip-path:inset(0 0 0 0);
}
.fk-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(243,240,232,.14);
}
.fk-cite{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(243,240,232,.28);border-radius:4px;padding:6px 11px;
  font-family:var(--mono);font-size:11px;color:#F3F0E8;font-variation-settings:'wght' 440,'wdth' 100
}
.fk-count{font-family:var(--mono);font-size:11px;color:rgba(243,240,232,.62);white-space:nowrap;font-variation-settings:'wght' 440,'wdth' 100}

/* --- Karte 3: Anzeigen -------------------------------------------- */
.fk-ah{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.fk-ah b{font-size:17px;font-weight:500}
.fk-tab{width:100%;border-collapse:collapse;margin-top:12px}
.fk-tab th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:-.02em;
  color:#4A514C;text-align:right;padding-bottom:7px;font-variation-settings:'wght' 440,'wdth' 100
}
.fk-tab th:first-child{text-align:left}
.fk-tab td{padding:10px 0;border-top:1px solid #E2E6E1;text-align:right;
  font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;font-variation-settings:'wght' 440,'wdth' 100
}
.fk-tab th + th,.fk-tab td + td{padding-left:14px}
.fk-tab td:first-child{text-align:left;font-family:var(--sans);font-size:15px}
.fk-pos{color:#0B6B3A}
.fk-live{
  display:flex;align-items:center;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px solid #121512;
  font-family:var(--mono);font-size:11px;color:#4A514C;font-variation-settings:'wght' 440,'wdth' 100
}
.fk-dot{flex:0 0 auto;width:7px;height:7px;border-radius:999px;background:#0B6B3A}

/* ============================================================
   Beweis-Karten (Produkt-UI)
   ============================================================ */
.card{
  font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:-.01em;
  /* v15 — auf Papier traegt ein warmer, knapper Schatten. */
  box-shadow:0 24px 46px -34px rgba(0,0,0,.65);text-align:left;
}
.card-light{
  width:100%;max-width:440px;
  background:var(--card-paper);color:var(--card-ink);
  border:1px solid var(--card-edge);padding:18px 20px 16px;
}
.card-dark{
  width:100%;max-width:420px;
  background:var(--card-dark);color:var(--card-dark-fg);
  border:1px solid #2A302B;padding:20px 22px 16px;
}
.c-mono{font-family:var(--mono);font-size:var(--lab-fs);letter-spacing:-.005em;font-weight:500;line-height:1.8;font-variation-settings:var(--lab-vs)}
.c-soft{color:var(--card-soft)}
.c-foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--card-hair)}
.card-dark .c-foot{border-top-color:rgba(243,240,232,.14);color:rgba(243,240,232,.6)}
.c-pos{color:var(--card-pos)}
.serp-q{display:flex;align-items:center;gap:10px;border:1px solid #D6DBD3;border-radius:4px;padding:9px 14px;font-size:14px;color:var(--card-soft)}
.serp-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.serp-item{display:flex;flex-direction:column;gap:3px}
.serp-item b{font-size:16px;font-weight:500;color:#1a4d8f}
.serp-item span{font-size:13px;line-height:1.4;color:var(--card-soft)}
.serp-item.d2{opacity:.42}
.serp-item.d3{opacity:.28}
/* v7: Die Beweiskarte der KI-Sichtbarkeit ist jetzt hell wie die anderen —
   „Karten und Bilder hell“. Die dunkle Variante lebt nur noch im Hero-Film. */
.ki-q{display:flex;gap:10px;align-items:flex-start;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--card-soft);font-variation-settings:'wght' 440,'wdth' 100}
.ki-q i{font-style:normal;color:var(--card-ink)}
.card-dark .ki-q{color:rgba(243,240,232,.6)}
.card-dark .ki-q i{color:var(--accent)}
.ki-a{margin-top:14px;font-size:15px;line-height:1.55}
.ki-a mark{background:var(--accent);color:var(--card-ink);padding:0 3px}
.ki-cite{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--card-edge);border-radius:4px;padding:4px 10px;color:var(--card-ink)}
.card-dark .ki-cite{border-color:rgba(243,240,232,.25);color:#F3F0E8}
.ads-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ads-head b{font-size:15px;font-weight:500}
.ads{width:100%;border-collapse:collapse;margin-top:12px}
.ads th{font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;color:var(--card-soft);text-align:right;padding-bottom:6px;letter-spacing:-.005em;font-variation-settings:var(--lab-vs)}
.ads th:first-child{text-align:left}
.ads td{padding:10px 0;border-top:1px solid var(--card-hair);text-align:right;font-family:var(--mono);font-size:13px;font-variation-settings:'wght' 440,'wdth' 100}
.ads th + th,.ads td + td{padding-left:12px}
.ads td:first-child{text-align:left;font-family:var(--sans);font-size:14px}
.ads-foot{border-top-color:var(--card-ink)}

/* v15.1 — Beweiskarten als Fenster: Kopfleiste mit drei Punkten und
   Adresse, 10 px Radius, zwei Schatten; Google-Treffer mit Favicon und
   gelbem Rang-Balken, Anzeigen mit Kampagnenbalken und gelber Zelle,
   KI-Antwort als Chat mit Nennungsrate. */
.card-light.win{padding:0;border-radius:10px;overflow:hidden;border-color:#DDD9CE;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 28px 50px -30px rgba(0,0,0,.65)}
.win-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#F3F1EA;border-bottom:1px solid var(--card-hair)}
/* v15.3 — Mac-Ampeln: grau wie ein Fenster ohne Fokus; liegt der Cursor auf
   der Sektion (oder im Hero), bekommt das Fenster Fokus: rot, gelb, gruen. */
.win-bar i{display:block;width:11px;height:11px;border-radius:50%;background:#D8D4C9;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14);transition:background-color .4s var(--ease)}
.svc-item:hover .win-bar i:nth-child(1),#hero:hover .win-bar i:nth-child(1){background:#FF5F57}
.svc-item:hover .win-bar i:nth-child(2),#hero:hover .win-bar i:nth-child(2){background:#FEBC2E}
.svc-item:hover .win-bar i:nth-child(3),#hero:hover .win-bar i:nth-child(3){background:#28C840}
.win-url{flex:1 1 auto;margin-left:8px;height:20px;line-height:20px;text-align:center;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;letter-spacing:-.005em;color:var(--card-soft);
  background:#FFFFFF;border:1px solid var(--card-hair);border-radius:4px;font-variation-settings:var(--lab-vs)
}
.win-url::before{content:"";display:inline-block;width:8px;height:9px;margin:0 6px -1px 0;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9'%3E%3Cpath d='M2 4V2.6a2 2 0 0 1 4 0V4' fill='none' stroke='%234A514C' stroke-width='1.1'/%3E%3Crect x='1' y='4' width='6' height='4.5' rx='1' fill='%234A514C'/%3E%3C/svg%3E") no-repeat center/contain}
.win-body{padding:18px 20px 16px}
/* Dieselbe Leiste auf den Film-Karten im Hero. */
.fk.win{padding:0;border-radius:8px}
.fk-body{padding:16px 20px 14px}
.fk-dark .fk-body{padding:18px 20px 16px}
.win-dark .win-bar{background:#2C2A23;border-bottom-color:rgba(243,240,232,.12)}
.win-dark .win-bar i{background:#3A382F;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08)}
.win-dark .win-url{background:#37342B;border-color:rgba(243,240,232,.14);color:rgba(243,240,232,.62)}
.win-dark .win-url::before{filter:invert(.85)}
.kpi{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:2px;background:var(--accent);color:var(--card-ink);font-weight:500}
.serp-site{display:flex;align-items:center;gap:8px}
.fav{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--card-ink);color:#FFFFFF;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:18px;text-align:center;font-style:normal;font-variation-settings:var(--lab-vs)
}
.serp-item.d2 .fav,.serp-item.d3 .fav{background:#C9CFC6;color:#4A514C}
.serp-item.hit{position:relative;padding-left:14px}
.serp-item.hit::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:var(--accent)}
.ads td:first-child{position:relative}
.ads-bar{position:absolute;left:0;bottom:-1px;height:2px;width:72%;background:var(--accent);transform:scaleX(var(--w,0));transform-origin:left center}
/* Die Marke sitzt am Text, nicht am Zellenkasten. */
.ads td.hot span{display:inline-block;padding:2px 6px;margin:-2px -6px;border-radius:2px;background:var(--accent);color:var(--card-ink);font-weight:500}
.chat-u{display:flex;justify-content:flex-end}
.chat-u span{max-width:82%;background:#EFEDE6;border-radius:12px 12px 2px 12px;padding:8px 12px;font-size:13px;line-height:1.45;color:var(--card-ink)}
.chat-a{display:flex;align-items:flex-start;gap:10px;margin-top:12px}
.chat-av{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--card-ink);position:relative}
.chat-av::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.chat-a .ki-a{margin-top:0}
.ki-rate{display:inline-flex;align-items:center;gap:8px}
.ki-rate i{position:relative;display:block;width:64px;height:4px;border-radius:2px;background:var(--card-hair);overflow:hidden}
.ki-rate i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left center}

/* ============================================================
   Was wir machen — vier Zeilen, 1px Linien bei 20 %
   ============================================================ */
.svc-list{border-top:1px solid var(--line)}
.svc-item{
  position:relative;scroll-margin-top:110px;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  padding-block:var(--sp-xl);
  border-bottom:1px solid var(--line);
  align-items:start;
}
.svc-item::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--ease);
}
.svc-item:hover::after{transform:scaleX(1)}
.svc-no{grid-column:1 / 2;color:var(--muted);padding-top:.5em}
.svc-body{grid-column:2 / 8}
.svc-say{margin-top:var(--sp-md);max-width:46ch;color:var(--fg)}
.svc-get{margin-top:var(--sp-lg)}
.svc-get > .mono{display:block;color:var(--muted);margin-bottom:var(--sp-xs)}
.svc-get ul{display:flex;flex-wrap:wrap;gap:0}
.svc-get li{
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--fg);
  padding-right:12px;margin-right:12px;border-right:1px solid var(--line);font-variation-settings:var(--lab-vs)
}
.svc-get li:last-child{border-right:0;margin-right:0;padding-right:0}
.svc-metric{
  margin-top:var(--sp-lg);display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--muted);font-variation-settings:var(--lab-vs)
}
.svc-metric b{color:var(--accent-ink);font-weight:500}
.svc-proof{grid-column:8 / 13;justify-self:end;width:100%;max-width:440px}
.svc-proof .card{transform:rotate(-1.1deg);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.svc-item:nth-child(even) .svc-proof .card{transform:rotate(1.2deg)}
.svc-item:hover .svc-proof .card{transform:rotate(0) translateY(-6px);box-shadow:0 40px 66px -40px rgba(0,0,0,.75)}
.svc-proof .card{max-width:none;font-size:clamp(14px,1vw,16px)}
/* Zeile 04 hat keine Beweiskarte, sondern einen Mono-Satz. */
/* v23 — Verweis in die Leistungsseite, direkt unter der Messgroesse.
   44 px Trefferflaeche, damit er auf dem Handy bedienbar ist. */
.svc-link{margin-top:var(--sp-sm)}
.svc-link .ul{display:inline-flex;align-items:center;min-height:44px;color:var(--fg)}

.svc-mono{
  grid-column:10 / 13;justify-self:end;text-align:right;
  color:var(--muted);max-width:30ch;
}
/* v20 — der Verweis auf den Angebots-Rechner ist ein Knopf, kein Beiwerk:
   44 px Trefferflaeche, auch wenn die Schrift 10 px ist. */
.svc-mono .ul{display:inline-flex;align-items:center;min-height:44px;color:var(--fg)}

/* ============================================================
   Fuer wen + So arbeiten wir
   ============================================================ */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.step{border-top:1px solid var(--line);padding-top:var(--sp-md);transition:border-color .5s ease}
.step:hover{border-top-color:var(--accent)}
.step .mono{color:var(--muted)}
.step b{display:block;margin-top:var(--sp-sm);font-weight:400}
.step p{margin-top:var(--sp-sm);color:var(--muted)}
.step .out{margin-top:var(--sp-md);padding-top:var(--sp-sm);border-top:1px solid var(--line);color:var(--fg)}

/* ============================================================
   Eine Zahl pro Kanal — Text-Tabs je Kanal, Zahlen, keine Screenshots.
   v18: Die Tabs sind die drei Kanaele, nicht mehr drei Kundenlogos — die
   Beispielzahlen haengen an einer Beispielmarke, nicht an echten Kunden.
   ============================================================ */
.res-tabs{
  display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-2xl);
}
.res-tab{
  position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:16px 12px;background:none;border:0;cursor:pointer;
  border-right:1px solid var(--line);
}
.res-tab:last-child{border-right:0}
.res-tab{min-height:78px}
.tab-t{
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;text-align:center;
  color:var(--muted);transition:color .45s ease;font-variation-settings:var(--lab-vs)
}
.res-tab:hover .tab-t{color:var(--fg)}
.res-tab[aria-selected="true"] .tab-t{color:var(--fg)}
.res-tab::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb,var(--fg) 4%,transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.res-tab:hover::before,.res-tab:focus-visible::before{opacity:1}
.res-tab .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left center}
.res-tab[aria-selected="true"] .bar{--p:1}
html.js .res-tab[aria-selected="true"] .bar{--p:var(--tp,0)}

.res-panel{display:none}
.res-panel.is-on{display:block}
.res-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
/* Die Beispielmarke steht als gelbe Marke am Text — damit niemand die
   Beispielzahlen fuer einen echten Kunden haelt. */
.res-mark{
  display:inline-block;padding:2px 8px;border-radius:2px;
  background:var(--accent);color:var(--ink);
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;white-space:nowrap;font-variation-settings:var(--lab-vs)
}
.res-say{margin-top:var(--sp-2xl);max-width:30ch}
.res-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--sp-2xl)}
/* v17.1 — Ergebniszahlen reagieren nicht wie Link-Zeilen: kein Dimmen der
   Nachbarn, kein Band, kein Zoom. */
.res-nums.rowset:hover > .row-hl{opacity:1}
.res-num.row-hl::before{display:none}
.res-num:hover .row-num{transform:none}
.res-num{border-top:1px solid var(--line);padding-top:var(--sp-md)}
.res-num b{
  display:block;
  font-size:clamp(44px,calc(22px + 2.64vw),82px);
  line-height:.85;letter-spacing:-.03em;
  font-weight:700;font-variation-settings:'wght' 700,'wdth' 104;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.res-num b .to{opacity:.45;padding:0 .1em;font-size:.58em;vertical-align:.14em}
.res-num b .un{
  display:inline-block;vertical-align:top;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:-.005em;margin-left:.6em;opacity:.75;font-variation-settings:var(--lab-vs)
}
.res-num > span{display:block;margin-top:var(--sp-sm);font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--muted);font-variation-settings:var(--lab-vs)}
.res-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:var(--sp-2xl);padding-top:var(--sp-md);border-top:1px solid var(--line);
}
.res-src{font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--muted);font-variation-settings:var(--lab-vs)}

/* ============================================================
   Kundenstimmen
   ============================================================ */
/* v8: Die Zitate liegen auf demselben 12-Spalten-Raster wie alles andere —
   die rechte Spalte beginnt damit auf Spaltenkante 7, nicht auf einem
   willkuerlichen Innenabstand. Der Trenner sitzt in der Rinne. */
.quotes{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.quote{
  position:relative;grid-column:span 6;
  padding:var(--sp-2xl) 0 var(--sp-xl);
}
.quote:nth-child(1),.quote:nth-child(2){border-bottom:1px solid var(--line)}
.quote:nth-child(odd)::before{
  content:"";position:absolute;top:0;bottom:0;
  right:calc(var(--gutter) * -.5);width:1px;background:var(--line);
}
/* v30 — Eine einzelne Stimme. Das Raster ist fuer vier gebaut: ohne
   diese Ausnahme zoege das erste Zitat eine zweite Haarlinie unter die
   des Rahmens, und der Trenner stuende mitten in der Seite, ohne
   rechten Nachbarn. */
.quotes.one .quote{grid-column:1 / 9}
.quotes.one .quote:nth-child(1){border-bottom:0}
.quotes.one .quote:nth-child(odd)::before{display:none}
.quote blockquote{margin:0}
.quote .who{
  margin-top:var(--sp-lg);display:flex;flex-wrap:wrap;gap:6px 10px;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;
  letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--muted);font-variation-settings:var(--lab-vs)
}
.quote .who b{color:var(--fg);font-weight:500}
.quote::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease);
}
.quote:hover::after{transform:scaleX(1)}

/* ============================================================
   Akzentpanel
   ============================================================ */
#claim{padding-block:var(--sec-band);overflow:hidden;background-color:var(--bg);transition:background-color var(--tween) ease}
.claim-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end}
.claim-block{grid-column:1 / 8}
.claim{margin-bottom:.195em}
html.js .claim-block .claim{transform:scale(.96);transform-origin:left center}
html.js .rv.revealed .claim{transform:scale(1);transition:transform 1.2s var(--expo)}
.claim-kick{display:block;margin-bottom:var(--sp-md);color:var(--muted)}
.claim.heading-1{font-size:clamp(100px,10.4vw,200px);line-height:.8;letter-spacing:-.03em}
.claim-block{grid-column:1 / 10}
.claim-foot{grid-column:10 / 13}
@media (max-width:999px){.claim.heading-1{font-size:clamp(64px,17vw,120px)}}
.claim-foot{grid-column:10 / 13;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-lg)}
#claim .btn-accent{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent);--fill:var(--accent);--fill-ink:var(--on-accent)}
#claim .btn-accent:hover,#claim .btn-accent:focus-visible{color:var(--fill-ink)}

/* ============================================================
   v20 — Die drei Einstiege.
   Drei Tueren nebeneinander, gestaffelt nach Verbindlichkeit: Gespraech,
   Strategievorschlag, Angebot. Jede traegt Mono-Zeile, Titel, einen Satz
   und ihren eigenen Knopf. Aufbau wie .steps, damit die Sektion sich in
   den Rhythmus der Seite einfuegt.
   ============================================================ */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.door{
  display:flex;flex-direction:column;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:var(--sp-md);
  transition:border-color .5s ease;
}
.door:hover{border-top-color:var(--accent)}
.door > .mono{color:var(--muted)}
.door b{display:block;margin-top:var(--sp-sm);font-weight:400}
.door p{margin-top:var(--sp-sm);color:var(--muted);flex:1 1 auto}
.door .btn{margin-top:var(--sp-lg)}
/* Die erste Tuer ist die Hauptsache: gelber Knopf, die anderen mit Rahmen. */
.door-1 b{color:var(--fg)}

/* ============================================================
   v26 — Formulare. Erste Formularschicht des Projekts.
   Aufbau wie alles andere: Mono-Label, ruhiger Rahmen, Gelb erst am
   Conversion-Punkt (Fokus, ausgewaehlte Antwort, Absende-Knopf).
   Jede Trefferflaeche misst mindestens 44 px, auch die Kaestchen.
   ============================================================ */
.form{display:flex;flex-direction:column;gap:var(--sp-lg)}
.field{display:flex;flex-direction:column;gap:8px}
.field > .lab{
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;letter-spacing:-.005em;
  line-height:1.8;color:var(--muted);font-variation-settings:var(--lab-vs)
}
.field input,.field textarea{
  -webkit-appearance:none;appearance:none;width:100%;min-height:52px;
  padding:14px 16px;background:transparent;color:var(--fg);
  border:1px solid var(--line);border-radius:4px;
  font-family:var(--sans);font-size:16px;line-height:1.4;letter-spacing:-.01em;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);
}
.field .hint{font-family:var(--mono);font-size:var(--lab-fs);line-height:1.8;color:var(--muted);font-variation-settings:var(--lab-vs)}
.field.err input,.field.err textarea{border-color:var(--warn)}
.field.err .hint{color:var(--warn)}

/* Antwortmoeglichkeiten als Chips: das unsichtbare Feld liegt ueber dem
   Chip, damit die Trefferflaeche so gross ist wie das, was man sieht. */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:4px;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;letter-spacing:-.005em;
  color:var(--fg);transition:background-color .3s var(--ease),
                             border-color .3s var(--ease),color .3s var(--ease);font-variation-settings:var(--lab-vs)
}
.opt input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.opt input:focus-visible + span{border-color:var(--accent)}
.opt:hover span{border-color:var(--fg)}

/* Einwilligung: Kaestchen 22 px, Trefferflaeche 44 px, Text klickbar. */
.consent{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.consent input{position:absolute;left:0;top:0;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.consent .box{
  flex:0 0 22px;width:22px;height:22px;margin:11px 0;border-radius:3px;
  border:1px solid var(--line);position:relative;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.consent .box::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .25s var(--ease);
}
.consent input:checked ~ .box{background:var(--accent);border-color:var(--accent)}
.consent input:checked ~ .box::after{transform:rotate(45deg) scale(1)}
.consent input:focus-visible ~ .box{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.consent.err .box{border-color:var(--warn)}
.consent.err .txt{color:var(--warn)}
.consent .txt{padding-top:12px;color:var(--muted);max-width:52ch}

/* Schrittstrecke: eine Frage pro Bild, gelbe Fortschrittslinie. */
.wiz{position:relative}
.wiz-bar{position:relative;height:1px;background:var(--line);margin-bottom:var(--sp-lg)}
.wiz-bar i{
  position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--accent);
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .6s var(--expo);
}
.wiz-count{
  display:block;font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;
  letter-spacing:-.005em;line-height:1.8;color:var(--muted);margin-bottom:var(--sp-sm);font-variation-settings:var(--lab-vs)
}
.wiz-step{display:none}
.wiz-step.is-on{display:block}
html:not(.js) .wiz-step{display:block}
html:not(.js) .wiz-bar{display:none}
.wiz-q{margin-bottom:var(--sp-md)}
.wiz-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--sp-lg)}
.wiz-back{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;letter-spacing:-.005em;
  color:var(--muted);background:none;border:0;cursor:pointer;padding:0;font-variation-settings:var(--lab-vs)
}
.wiz-back:hover{color:var(--fg)}

/* Danke-Flaeche: ersetzt das Formular an Ort und Stelle. */
.thanks{display:none}
.is-done .thanks{display:block}
.is-done .form,.is-done .wiz{display:none}
.thanks b{display:block;margin-bottom:var(--sp-sm)}
.thanks p{color:var(--muted);max-width:46ch}
.thanks .mono{display:block;margin-top:var(--sp-lg);color:var(--muted)}

@media (max-width:760px){
  .opt span{padding:0 12px}
  .consent .txt{padding-top:11px}
}

/* ============================================================
   Kunden-Marquee
   ============================================================ */
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 52s linear infinite}
html.js-mq .mq-track{animation:none}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-set{display:flex;align-items:center}
/* v8 — gleiche Kappenhoehe.
   Alle sechs Dateien sind 500 x 110 px, die Zeichnung darin ist aber
   unterschiedlich gross: LUMEUS fuellt 95 % der Hoehe, HASENKOPF nur
   38 %. Mit background-size:contain haetten sie damit sechs verschiedene
   Schriftgrade. Darum bekommt jede Datei ihre eigene Bildhoehe (--ih),
   so dass die Wortmarken auf 18 px Versalhoehe stehen und die beiden
   Bild-Wort-Marken auf 36 px. --iw haelt die Abstaende gleich. */
.mq-set i{
  display:block;width:var(--iw,190px);height:56px;margin:0 26px;
  background-repeat:no-repeat;background-position:center;
  background-size:auto var(--ih,46px);
  filter:brightness(0) invert(1);opacity:.42;transition:opacity .5s ease;
}
.mq-set i:hover{opacity:1}
/* v18 — Kunden ohne Logodatei stehen als Zeile unter der Bahn. */
.mq-more{margin-top:var(--sp-lg);color:var(--muted)}



/* ============================================================
   Aus München
   ============================================================ */
.team-photo{
  width:auto;aspect-ratio:1440/520;
  margin-inline:calc(var(--m) * -1);
  background:var(--i-team) center 38%/cover no-repeat;
  margin-bottom:var(--sp-2xl);
}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-bottom:var(--sp-2xl)}
.fig{padding-bottom:var(--sp-md);border-bottom:1px solid var(--line);transition:border-color .45s ease}
.fig:hover{border-bottom-color:var(--accent)}
.fig b{
  display:block;
  font-size:clamp(38px,calc(19px + 2.01vw),58px);
  line-height:1;letter-spacing:-.02em;font-weight:400;
  font-variation-settings:'wght' 400,'wdth' 100;
  font-variant-numeric:tabular-nums;
}
.fig > span{display:block;margin-top:var(--sp-xs);font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--muted);font-variation-settings:var(--lab-vs)}
.people{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter)}
/* v7: Farbe ist der Ruhezustand. Die Graustufe bis Hover ist damit hinfaellig;
   der Hover hebt die Kachel nur noch an. */
.person i{
  display:block;width:100%;aspect-ratio:420/480;
  background-size:cover;background-position:center 18%;
  transition:transform .6s var(--ease);
}
.person:hover i{transform:translateY(-4px)}
.person b{display:block;margin-top:var(--sp-sm);font-weight:400}
.person > span:not(.ptile){display:block;margin-top:4px;font-family:var(--mono);font-size:var(--lab-fs);font-weight:500;line-height:1.8;letter-spacing:var(--lab-ls);text-transform:uppercase;color:var(--muted);font-variation-settings:var(--lab-vs)}
/* Sechster Platz: Textkachel ohne Foto. */
.ptile{
  display:flex;align-items:flex-end;width:100%;aspect-ratio:420/480;
  padding:12px;border:1px solid var(--line);
  color:var(--muted);
  transition:border-color .45s ease,color .45s ease;
}
.person:hover .ptile{border-color:var(--accent);color:var(--fg)}
.pf{background-image:var(--i-founder)}
.pj{background-image:var(--i-janina)}
.pt{background-image:var(--i-tomris)}
.pl{background-image:var(--i-luc)}
.ph{background-image:var(--i-hofbauer)}

/* ============================================================
   Overlay „Das sind wir“
   ============================================================ */
.ovl{
  position:fixed;inset:0;z-index:9200;display:none;
  /* v15 — Tinte bei 96 %, Papier-Schrift; kein Raumlicht mehr. */
  background-color:rgba(246,243,236,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  overflow:auto;-webkit-overflow-scrolling:touch;color:#14130F;
}
.ovl.on{display:block}
.ovl-in{padding:clamp(72px,9vh,120px) var(--m) clamp(56px,7vh,96px);max-width:1240px;margin:0 auto}
.ovl-x{
  position:fixed;right:var(--m);top:clamp(20px,3vh,34px);z-index:2;
  width:50px;height:50px;border-radius:4px;border:1px solid rgba(20,19,15,.3);
  background:rgba(246,243,236,.6);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;color:#14130F;
  transition:background-color var(--ui) var(--ui-e),transform .5s var(--ease);font-variation-settings:'wght' 440,'wdth' 100
}
.ovl-x:hover{background:#14130F;color:#F6F3EC;transform:rotate(90deg)}
.ovl-photo{width:100%;aspect-ratio:1440/560;background:var(--i-team) center 38%/cover no-repeat;margin-bottom:var(--sp-2xl)}
.ovl-say{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--sp-xl)}
.ovl-say p{border-top:1px solid rgba(20,19,15,.2);padding-top:16px;color:rgba(20,19,15,.82)}
.ovl .people{margin-top:var(--sp-2xl)}
.ovl .person > span{color:rgba(20,19,15,.6)}
.ovl .ptile{border-color:rgba(20,19,15,.2);color:rgba(20,19,15,.6)}

/* ============================================================
   GEO-Report
   ============================================================ */
.posts{border-top:1px solid var(--line)}
/* v8: auf dem Raster statt auf Flex-Restbreiten — die Titel stehen damit
   auf derselben Spaltenkante 2 wie die Texte in „Was wir machen“. */
.post{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:baseline;
  padding:var(--sp-xl) 0;border-bottom:1px solid var(--line);
  transition:color var(--ui) var(--ui-e),opacity .5s var(--ease);
}
.post-no{grid-column:1 / 2;color:var(--muted);transition:color .35s ease}
.post:hover .post-no,.post:hover .post-arrow{color:var(--accent-ink)}
.post h3{grid-column:2 / 10;max-width:44ch}
.post-meta{grid-column:10 / 13;justify-self:end;display:flex;align-items:baseline;gap:18px;white-space:nowrap;color:var(--muted)}
.post-arrow{display:inline-block;transition:transform .5s var(--ease)}

/* ============================================================
   Footer
   ============================================================ */
/* Der zusaetzliche Sockel haelt das Kolophon bei ganz unten stehendem
   Fenster ueber der fixierten Karte. */
#kontakt{padding-block:var(--sec-top) calc(var(--sec-bot) + 30px);border-top:1px solid var(--line)}
.talk{margin-bottom:var(--sp-2xl)}
.foot-grid{align-items:end}
.contact{grid-column:1 / 5}
/* Gleichmaessiger Zeilenabstand: die Trefferflaeche der Links waechst
   ueber Innenabstand, nicht ueber Mindesthoehe — sonst reissen genau
   die beiden Linkzeilen groessere Luecken als die Textzeilen. */
.contact-card{display:flex;flex-direction:column;gap:var(--sp-xs);padding:var(--sp-lg) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-card b{font-weight:400}
.contact-card a,.contact-card p{color:var(--muted)}
.contact-card a{display:inline-flex;align-items:center;width:fit-content;padding-block:12px;margin-block:-12px;transition:color var(--ui) var(--ui-e)}
.contact-card a:hover{color:var(--fg)}
/* Foto auf Spaltenkante 5, Unterkante auf einer Linie mit der Kontaktkarte. */
.founder-win{
  grid-column:5 / 7;justify-self:start;align-self:end;
  display:block;width:100%;max-width:none;aspect-ratio:700/800;border-radius:4px;
  background:var(--i-founder) center 12%/cover no-repeat;
  transform:translateY(0);transition:transform .6s var(--ease);
}
.foot-grid:hover .founder-win{transform:translateY(-6px)}
.foot-cta{grid-column:9 / 13;display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-lg)}
.foot-cta p{color:var(--muted);max-width:none}
.foot-cta .btn{align-self:flex-start}

/* Kontakt-Karte: 50-px-Pille, Avatar 28 px, Nummer faehrt bei Hover ein. */
.cc{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  height:50px;padding:0 16px 0 11px;border-radius:4px;
  background:var(--bg2);width:100%;
  transition:background-color var(--ui) var(--ui-e);
}
.cc-av{flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:var(--i-founder) center 14%/cover no-repeat}
.cc-name{color:var(--fg)}
.cc-tel{
  position:absolute;right:16px;top:0;height:50px;display:flex;align-items:center;
  color:var(--fg);
  transform:translateX(calc(100% + 16px));opacity:0;
  transition:transform .4s var(--expo),opacity var(--ui) var(--ui-e);
}
.cc:hover .cc-tel,.cc:focus-visible .cc-tel,.cc:focus-within .cc-tel{transform:none;opacity:1}
.cc-name{transition:opacity var(--ui) var(--ui-e)}

.colophon{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin-top:var(--sp-2xl);padding-top:var(--sp-md);border-top:1px solid var(--line);
  color:var(--muted);
}
.colophon span:first-child{color:var(--fg)}
/* v33 — Impressum und Datenschutz sind jetzt echte Seiten. Der Link
   bekommt die 44-px-Trefferflaeche, die das Polster aussen wieder
   abzieht: die Kolophon-Zeile bleibt so hoch wie vorher. */
.colophon a{color:inherit;display:inline-block;padding-block:13px;margin-block:-13px}
.colophon a:hover,.colophon a:focus-visible{color:var(--fg)}

#errlog{position:absolute;left:-9999px;top:0;white-space:pre-wrap}

/* ============================================================
   Responsive — Mobil (<1000px): 6 Spalten, Gutter 10, Rand 16
   ============================================================ */
@media (max-width:1180px){
  .svc-body{grid-column:2 / 7}
  .svc-proof{grid-column:7 / 13}
  .svc-mono{grid-column:8 / 13}
  .head-l{grid-column:1 / 8}
  .head-r{grid-column:9 / 13}
  .res-say{max-width:24ch}
}
/* v10 — eigene H1-Stufe fuer Fenster unter 1440 px Breite.
   Zwei Dinge in einem Schritt:
     1. Bei 1024 x 700 muss der Hero in EIN Fenster passen.
     2. Zwischen 1180 und 1440 brach die dritte Zeile bisher um — die
        Spalten 1 bis 9 sind dort schmaler als der Satz bei 72 px.
   Der Grad folgt jetzt der Spaltenbreite: eine Display-Zeile misst rund
   das 12,5-fache des Grades, die Spalten 1–9 messen 0,667 * Fensterbreite
   minus 61 px. Daraus: 5,2 vw minus 5 px, gedeckelt bei 68. Bei 1440
   greift nichts davon — dort bleibt der Hero exakt wie in v9.
   Unter 761 px hat der Mobil-Pass seine eigene Stufe. */
@media (min-width:761px) and (max-width:1439px){
  .hero-h1.display-sm{
    font-size:clamp(42px,calc(5.2vw - 5px),68px);
    font-variation-settings:'wght' 700,'wdth' 96;
  }
}
/* Niedrige Fenster: die Buehne gibt weiter nach, damit Kopfzeile, Film,
   H1 und Chips zusammen unter 700 px bleiben. Die 96 px Fussraum der
   Copy bleiben unangetastet — darunter sitzt der Akzent-Picker. */
@media (min-width:761px) and (max-height:780px){
  .hero-eyebrow{margin-bottom:var(--sp-md)}
  .hero-inner{padding-bottom:48px}
}
@media (max-width:1080px){
  .hero-copy{grid-column:1 / 13;grid-row:1}
  .hero-side{grid-column:1 / 11;grid-row:2;align-self:start;margin-top:var(--sp-xl);margin-bottom:0}
  .hero-inner{align-items:start}
  .claim-foot p{grid-column:1 / 9}
  .claim-foot .btn-wrap{grid-column:1 / 13;justify-self:start;margin-top:var(--sp-lg)}
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  :root{--m:16px;--gutter:10px}
  .grid,.sgrid,.hero-inner,.hero-stage,.svc-item,.claim-foot{grid-template-columns:repeat(6,minmax(0,1fr))}
  .head-l,.head-l-wide,.head-r{grid-column:1 / 7}
  .head-r{margin-top:var(--sp-lg)}
  .sec-head{align-items:start}
  .hero-copy,.hero-side{grid-column:1 / 7}
  .claim-foot p,.claim-foot .btn-wrap{grid-column:1 / 7}
  .hdr{padding-inline:16px}
  .pill{max-width:none}
  /* Sechs Spalten: die Buehne nimmt weiter alle, die Zeichnung bleibt
     dieselbe, JS misst den Massstab nach. */
  .film{grid-column:1 / 7;grid-row:1}
  .film-fit{--ffit:.68}
  /* Schmaler Satzspiegel: die Aussage steht kleiner, bleibt aber
     einzeilig — die Leiste ist eine Zeile, keine Spalte. */
  .film-bar{gap:var(--sp-sm)}
  .log-flip{font-size:18px}
  .bar-head{font-size:11px}
  .svc-item{grid-template-columns:repeat(6,minmax(0,1fr))}
  .svc-no{grid-column:1 / 7;padding-top:0}
  .svc-body{grid-column:1 / 7;margin-top:var(--sp-xs)}
  .svc-proof,.svc-mono{grid-column:1 / 7;justify-self:start;text-align:left;margin-top:var(--sp-lg);max-width:520px}
  .svc-proof .card,.svc-item:nth-child(even) .svc-proof .card{transform:none}
  .steps{grid-template-columns:1fr;gap:var(--sp-xl)}
  .doors{grid-template-columns:1fr;gap:var(--sp-xl)}
  .res-nums{grid-template-columns:1fr;gap:var(--sp-lg)}
  .quotes{grid-template-columns:1fr}
  .quote{padding:var(--sp-xl) 0}
  .quote:nth-child(odd){border-right:0}
  .quote:nth-child(even){padding-left:0}
  .figs{grid-template-columns:1fr}
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ovl-say{grid-template-columns:1fr;gap:var(--sp-lg)}
  .contact,.foot-cta{grid-column:1 / 7}
  .founder-win{grid-column:1 / 7;justify-self:start;max-width:150px;margin-top:var(--sp-lg)}
  .foot-cta{margin-top:var(--sp-xl)}
  .foot-grid{align-items:start}
  .post{flex-direction:column;gap:var(--sp-sm);align-items:flex-start}
  .post h3{max-width:100%}
  .post-meta{margin-left:0}
}
@media (max-width:640px){
  .display-sm{font-size:clamp(24px,7.5vw,40px);font-variation-settings:'wght' 700,'wdth' 85}
  .display-rg{font-size:clamp(44px,13.4vw,72px);font-variation-settings:'wght' 700,'wdth' 100}
  .heading-1{font-size:clamp(34px,10vw,54px);font-variation-settings:'wght' 700,'wdth' 100}
  .heading-2{font-size:clamp(28px,7.6vw,40px)}
  .heading-3{font-size:clamp(24px,6.6vw,34px)}
  .body-md{font-size:18px}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mq-set i{width:150px;height:33px;margin:0 18px}
  .res-num b{font-size:clamp(34px,11vw,52px)}
  .card-light,.card-dark{max-width:100%}
  .ads th{font-size:11px}
  .ads td{font-size:12px}
  .ads td:first-child{font-size:13px;max-width:42%}
  .team-photo{aspect-ratio:4/3}
  .ovl-photo{aspect-ratio:4/3}
  .pre-wm{width:130px}
  .cc{width:100%}
}


/* ============================================================
   MOBIL — eigener Layoutpass fuer 390 und 430 px.
   Nichts hier ist eine verkleinerte Desktopansicht: der Rhythmus
   ist halbiert, jede Sektion ist einspaltig, der Film hat eine
   eigene Fassung ohne Collage. Alles was angefasst wird, wird
   neu gesetzt — nicht skaliert.
   ============================================================ */
@media (max-width:760px){
  :root{
    --m:16px;--gutter:10px;
    /* Sektions-Tokens halbiert (60/80/120/160/200/220/240/320 -> die Haelfte) */
    --sec-xs:30px;--sec-sm:40px;--sec-md:60px;--sec-lg:80px;
    --sec-xl:100px;--sec-2xl:110px;--sec-3xl:120px;--sec-4xl:160px;
    --sp-hero:40px;
    /* v10: der Sektionsrhythmus mobil ist die Haelfte des Desktopmasses —
       40 + 50 = 90 px zwischen zwei Sektionen. */
    --sec-top:50px;--sec-bot:40px;--sec-seam:80px;--sec-band:46px;
    --sec-head-gap:28px;--sec-rule-gap:24px;
  }

  /* --- Header: volle Breite minus 32 px, 50 px hoch ---------------- */
  .hdr{top:12px;padding-inline:16px}
  .pill{max-width:none;width:100%}
  .pill-bar{gap:10px;padding:0 6px 0 16px}
  .pill-burger{flex:0 0 44px;width:44px;height:44px;align-items:flex-end;padding-right:14px}
  .pill-wm{height:44px}
  .film-again{padding:13px 10px}
  .pill-menu .btn{width:100%;justify-content:space-between}

  /* --- Hero: H1, Absatz, Chips, DANN der Film --------------------- */
  #hero{
    min-height:0;display:flex;flex-direction:column;justify-content:flex-start;
    padding-top:86px;padding-bottom:var(--sec-sm);
  }
  /* v15.1 — mobil wie v14: H1, Absatz, Chips, dann die Leiste, dann der
     Film im Fluss (Suchkarte, darunter die Chat-Karte). Strom und Scrim
     sind aus — auf 390 px waeren sie nur Rauschen. */
  .hero-inner{order:1;display:block;padding-inline:var(--m);padding-bottom:0}
  .film-bar{order:2;margin:var(--sp-xl) var(--m) 0}
  .hero-stage{order:3;position:relative;inset:auto;display:block;height:auto;overflow:visible;margin:14px 0 0;padding:0 var(--m) 44px;min-height:0}
  .hero-scrim,.qstream{display:none}
  /* Wortmarken-Moment: volle Breite minus 32 px, im oberen Drittel. */
  .hero-wm{left:16px;right:16px;top:26vh}
  /* v12 — Die Leiste ist mobil zweizeilig: Label oben klein, darunter
     links die Aussage, rechts Striche und „Nochmal". Dieselben Linien
     oben und unten, dieselbe Reihenfolge, nur umgebrochen. */
  .film-bar{
    height:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;row-gap:2px;column-gap:12px;
    padding-block:8px;
  }
  .bar-head{grid-column:1 / -1;grid-row:1;white-space:normal;min-width:0}
  /* 200 px tragen „Empfohlen: 19 von 30 ChatGPT-Antworten" nicht in einer
     Zeile. Statt sie abzuschneiden, darf die Aussage hier zweizeilig
     werden; der Rahmen ist fest zwei Zeilen hoch und oben buendig, damit
     der Flip nichts springen laesst. */
  .log-flip{grid-column:1;grid-row:2;font-size:15px;height:2.8em;text-align:left}
  .log-line{font-size:15px;line-height:1.4;white-space:normal;text-overflow:clip}
  .film-right{grid-column:2;grid-row:2;justify-self:end}
  .hero-eyebrow{margin-bottom:var(--sp-md)}
  .hero-h1{
    font-size:clamp(34px,9.6vw,44px);line-height:.92;
    font-variation-settings:'wght' 700,'wdth' var(--h1w,72);
    margin-left:-.03em;margin-top:0;
  }
  .hero-h1 .ln{white-space:nowrap;padding-top:.14em;margin-bottom:-.14em}
  .hero-side{margin-top:var(--sp-lg)}
  .hero-sub{font-size:17px;line-height:1.3}
  .hero-chips{margin-top:var(--sp-sm);flex-wrap:wrap;gap:8px}

  /* --- Film: Ein-Karten-Fassung, volle Breite, keine Collage ------- */
  /* Film: Ein-Karten-Fassung im Fluss, volle Breite, keine Collage. */
  .film{position:static;inset:auto}
  /* v15.2 — kein reservierter Leerraum: die Chat-Karte legt sich in Beat 2
     ueber den Fuss der Suchkarte (Overlay), die Buehne ist so hoch wie die
     Suchkarte plus 44 px Ueberhang. */
  .film-fit{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;transform:none;display:block}
  .fk-par{position:relative;inset:auto;transform:none}
  #parChat{position:absolute;left:0;right:0;top:auto;bottom:-44px;z-index:3}
  #parAds{display:none}
  .fk{
    position:relative;left:auto;right:auto;top:auto;width:100%;
    transform:none;font-size:15px;
    box-shadow:0 14px 32px rgba(10,6,0,.55);
    --cx:0px;--cy:0px;--cr:0deg;--cs:1;
  }
  .fk-light{padding:14px 14px 12px}
  .fk-body,.fk-dark .fk-body{padding:14px 14px 12px}
  .fk-dark{padding:14px 14px 12px}
  .fk-search{height:46px;padding:0 14px;gap:10px;font-size:15px}
  .fk-search svg{width:16px;height:16px}
  .fk-caret{height:19px}
  .fk-rows{gap:12px;margin-top:14px}
  .fk-row .u{font-size:11px}
  .fk-row b{font-size:16px}
  .fk-row p{font-size:14px}
  /* Nur der Treffer traegt einen Beschreibungstext — sonst waere die
     Karte auf 390 px hoeher als der halbe Bildschirm. */
  .fk-row.dim p{display:none}
  .fk-tag{position:static;display:inline-block;align-self:flex-start;text-align:left;font-size:11px;margin-top:10px}
  .fk-cq{font-size:12px}
  .fk-ans{font-size:15px;line-height:1.5;margin-top:12px;min-height:0}
  .fk-foot{margin-top:12px;padding-top:10px;gap:10px}
  .fk-cite,.fk-count{font-size:11px}
  .film-prog i:nth-child(3){display:none}

  /* --- Sektionen: einspaltig, Label -> Headline -> Absatz ---------- */
  .grid,.sgrid,.claim-grid,.foot-grid{
    display:block;
  }
  .head-l,.head-l-wide,.head-r,.contact,.foot-cta,.claim-block,.claim-foot{
    grid-column:auto;width:auto;
  }
  .sec-head .head-r{margin-top:var(--sp-lg);padding-bottom:0}
  .chapter{margin-bottom:12px}
  .heading-2{font-size:clamp(28px,7.6vw,34px);line-height:.98}
  .heading-3{font-size:clamp(24px,6.6vw,30px)}
  .body-md{font-size:17px;line-height:1.3}

  /* --- Was wir machen: Nummer + Titel oben, dann Text, Liste, Karte - */
  /* display:contents loest den Zwischenkasten auf: Nummer und Titel teilen
     sich Zeile 1, alles darunter startet auf derselben linken Kante. */
  .svc-item{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:12px;row-gap:0;padding-block:var(--sec-xs);
  }
  .svc-body{display:contents}
  .svc-no{grid-column:1;grid-row:1;padding-top:.44em;align-self:start}
  .svc-name{grid-column:2;grid-row:1;align-self:start}
  .svc-say{grid-column:1 / -1;grid-row:2;margin-top:var(--sp-md);max-width:none}
  .svc-get{grid-column:1 / -1;grid-row:3;margin-top:var(--sp-md)}
  .svc-metric{grid-column:1 / -1;grid-row:4}
  .svc-get ul{display:flex;flex-wrap:wrap;row-gap:4px}
  .svc-get li{flex:0 0 auto;border-right:1px solid var(--line);margin:0 10px 0 0;padding:0 10px 0 0}
  .svc-get li:last-child{border-right:0;margin-right:0;padding-right:0}
  .svc-metric{margin-top:var(--sp-md);align-items:baseline;flex-wrap:wrap;gap:6px}
  .svc-proof,.svc-mono{
    grid-column:1 / -1;grid-row:5;
    justify-self:stretch;text-align:left;
    width:100%;max-width:none;margin-top:var(--sp-lg);
  }
  .svc-proof .card,.svc-item:nth-child(even) .svc-proof .card{transform:none;max-width:none}
  .card-light,.card-dark{max-width:none;padding:14px 14px 12px}
  .card-light.win{padding:0}
  .win-body{padding:14px 14px 12px}

  /* --- Fuer wen / So arbeiten wir ---------------------------------- */
  .steps{grid-template-columns:1fr;gap:var(--sp-lg)}
  .doors{grid-template-columns:1fr;gap:var(--sp-lg)}
  .door .btn{width:100%;justify-content:space-between}

  /* --- Ergebnisse: Logo-Tabs als Scroll-Leiste, Zahlen untereinander */
  .res-tabs{
    display:flex;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-bottom:var(--sec-xs);
  }
  .res-tabs::-webkit-scrollbar{display:none}
  /* v18 — drei Text-Tabs nebeneinander, Beschriftung darf umbrechen. */
  .res-tab{flex:1 1 0;min-width:0;min-height:56px;padding:12px 6px;border-right:1px solid var(--line)}
  .tab-t{white-space:normal}
  /* v15.1 — Fuer-wen-Headline: die fuenf Desktop-Zeilen fliessen mobil als
     ein Absatz, statt fuenf harte Umbrueche zu erzwingen. */
  #fuerwen .heading-2 .ln{display:inline;padding:0;margin:0;overflow:visible}
  #fuerwen .heading-2 .ln-i{display:inline;transform:none!important}
  .res-top{gap:14px}
  .res-say{margin-top:var(--sp-lg);max-width:none}
  .res-nums{
    display:block;margin-top:var(--sp-xl);
    border-bottom:1px solid var(--line);
  }
  .res-num{
    border-top:1px solid var(--line);
    padding-block:var(--sp-md);
  }
  .res-num b{font-size:clamp(34px,11vw,46px)}
  .res-foot{margin-top:var(--sp-lg);gap:14px}

  /* --- Kundenstimmen: einspaltig ----------------------------------- */
  .quotes{display:block;border-bottom:0}
  .quote{grid-column:auto;padding:var(--sp-lg) 0;border-bottom:1px solid var(--line)}
  .quote:nth-child(odd)::before{display:none}

  /* --- Marquee bleibt ---------------------------------------------- */
  .mq-set i{height:40px;margin:0 16px;width:calc(var(--iw,190px) * .62);background-size:auto calc(var(--ih,46px) * .62)}

  /* --- Akzentpanel -------------------------------------------------- */
  #claim{padding-block:var(--sec-band)}
  .claim.heading-1{font-size:clamp(52px,15vw,68px)}
  .claim-foot{margin-top:var(--sp-xl);padding-bottom:0;align-items:flex-start}

  /* --- Team: Portraits zweispaltig --------------------------------- */
  .team-photo{aspect-ratio:4/3;margin-bottom:var(--sec-sm)}
  /* v15.2 — drei Kennzahlen in einer Reihe statt drei Zeilen. */
  .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-bottom:var(--sec-sm)}
  .fig{padding-block:0 var(--sp-sm);border-bottom:1px solid var(--line)}
  .fig b{font-size:clamp(26px,7.4vw,34px);white-space:nowrap}
  #fuerwen .chips{gap:4px 8px}
  #fuerwen .chips .chip{padding-block:5px}
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-md) var(--gutter)}

  /* --- GEO: einspaltig --------------------------------------------- */
  .post{
    display:block;padding:var(--sp-lg) 0;
  }
  .post-no{display:block;margin-bottom:6px}
  .post h3{max-width:none;margin-bottom:8px}
  .post-meta{justify-self:auto;display:flex;gap:12px}

  /* --- Footer: Headline, Absatz, Kontakt-Pille, Button ------------- */
  #kontakt{padding-block:var(--sec-top) calc(var(--sec-bot) + 16px)}
  .talk{margin-bottom:var(--sec-sm)}
  .foot-grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-xl)}
  .foot-cta{order:1;margin-top:0;gap:var(--sp-md)}
  .contact{order:2}
  .founder-win{order:3;width:150px;max-width:150px;align-self:flex-start}
  .cc{width:100%}
  .foot-cta .btn,.contact-card a{min-height:44px}
  .colophon{margin-top:var(--sec-xs);gap:6px 16px}

  /* --- Overlay ------------------------------------------------------ */
  .ovl-in{padding:76px var(--m) 48px}
  .ovl-x{right:var(--m);top:12px;width:44px;height:44px}
  .ovl-photo{aspect-ratio:4/3}
  .ovl-say{grid-template-columns:1fr;gap:var(--sp-md)}

  /* v34 — Mobil hatte der Aufruf keinen Knopf mehr: die Buchungs-Pille war
     ausgeblendet, uebrig blieben zwei unbeschriftete Quadrate, von denen
     eines sofort waehlt. Auf dem Geraet, auf dem die meisten ankommen,
     stand damit keine beschriftete Handlung zur Verfuegung.
     Jetzt fuellt die Pille die Breite links neben den beiden Quadraten. */
  .book-pill{
    left:var(--m);right:calc(var(--m) + 44px + 8px + 44px + 8px);
    bottom:16px;height:50px;padding:0 14px;
    justify-content:space-between;gap:8px;
  }
  .call-pill{
    display:inline-flex;align-items:center;justify-content:center;
    position:fixed;z-index:790;right:calc(16px + 44px + 8px);bottom:16px;
    width:44px;height:44px;border-radius:4px;
    background:var(--accent);color:var(--ink);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  }

  /* --- Sticky-Karte mobil: 44-px-Pille unten rechts ---------------- */
  .sticky-card{
    width:44px;height:44px;right:16px;bottom:16px;
    clip-path:none;overflow:hidden;
  }
  .sticky-card:hover,.sticky-card:focus-within{width:44px;clip-path:none}
  .sticky-card .mini{display:none}
  .sticky-card .cap{height:44px;padding:0;justify-content:center;gap:0}
  /* Beschriftung bleibt im Baum, nur nicht im Bild — 44 px tragen sie nicht. */
  .sticky-card .cap > .sc-t,.sticky-card .cap > .plus{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .sc-av{flex:0 0 26px;width:26px;height:26px}
}

/* 430 hat 40 px mehr Luft als 390 — die bekommt der Satzspiegel. */
@media (min-width:400px) and (max-width:760px){
  :root{--m:20px}
  .hero-h1{--h1w:73}
}

/* ============================================================
   Reduzierte Bewegung
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js .rv .ln-i,html.js .rv-f,html.js .rv .rule{transform:none;opacity:1}
  .mq-track,.grain,.fk-caret{animation:none}
  body,section,footer,.rule{transition:none}
  #pre,#dsv{display:none!important}
  .person i,.post,.sticky-card,.hdr,.mag,.svc-item{transition:none}

  .cur{display:none!important}
  .book-pill,.bp-arw{transition:none}
  /* Ohne Bewegung gibt es nichts zu wiederholen — und keinen Auftritt
     der Wortmarke: die Pille traegt sie sofort. */
  .film-again{display:none}
  em.hl::after{transition:none;transform:none}
  .hero-wm{display:none!important}
  .pill-wm{opacity:1!important}
  .hero-stage,.hero-scrim,.film-bar,.hero-inner,.qstream{opacity:1!important}
  .qs-track{transform:none!important}
  html.js .claim-block .claim{transform:none}
  html.js .rv.revealed .claim{transition:none}
  html.js .imgrv{clip-path:none}
  .imgrv::before{transform:none}
  .fx > span,.fx-ch,.row-hl,.row-hl::before,.row-num,.row-arrow,
  .btn,.btn::before,.arw,.chip,.menu-a,.menu-a::before,.pill,.pill-burger i,
  .ul::after,.quote::after,.svc-item::after,
  .plus,.res-tab i,.mq-track,.mag,.cc,.cc-tel,.cc-name{transition:none}
  .fx > .fx-b,.fx.stag > .fx-b .fx-ch{display:none}
  .rowset:hover > .row-hl{opacity:1}
  .row-hl:hover::before{opacity:1}
  .btn:hover::before{transform:scaleY(1)}
  .res-tab[aria-selected="true"] .bar,html.js .res-tab[aria-selected="true"] .bar{--p:1;--tp:1}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ============================================================
   v35 — Ergebnisse: die neun Kundenlogos als dunkles 3x3-Raster, nur
   die Logos, in Farbe. Keine hellen Felder, Haarlinien wie ueberall.
   Fuenf der neun Logos sind schwarz und waeren auf Nacht unsichtbar;
   „dreh" kehrt Hell und Dunkel um und laesst den Farbton stehen —
   Schwarz wird Weiss, das Violett von Lumeus und das Blau von Donau Gym
   bleiben. Naber ist auf Dunkel schon lesbar und bleibt „original".
   Die gewaehlte Zelle traegt den gelben Fortschrittsbalken.
   ============================================================ */
.res-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-bottom:var(--sp-2xl);
}
.res-tab{
  min-height:150px;padding:28px 36px;background:none;border:0;border-radius:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;transition:background-color .45s var(--ease);
}
.res-tab:last-child{border-right:1px solid var(--line)}
.res-tab::before{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.res-tab[aria-selected="true"]{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.res-tab .bar{bottom:0;height:2px}
.tab-logo{
  display:block;width:100%;max-width:230px;height:74px;margin:0 auto;object-fit:contain;
  filter:invert(1) hue-rotate(180deg);opacity:.88;
  transition:opacity .45s var(--ease),transform .6s var(--ease);
}
.res-tab[data-ton="original"] .tab-logo{filter:none}
.res-tab:hover .tab-logo,.res-tab:focus-visible .tab-logo,
.res-tab[aria-selected="true"] .tab-logo{opacity:1}
.res-tab:hover .tab-logo{transform:scale(1.04)}
.res-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.res-logo{cursor:default}
.hp{display:none}
.form-fehler{margin:0 0 20px;padding:12px 16px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.res-wall{margin-bottom:0}
.res-name{color:var(--muted)}
@media (max-width:760px){
  .res-tabs{margin-bottom:var(--sp-lg)}
  .res-tab{min-height:78px;padding:12px 10px;min-width:0;flex:none}
  .tab-logo{height:40px}
}
@media (prefers-reduced-motion:reduce){
  .tab-logo,.res-tab{transition:none}
}

/* ============================================================
   v36 — Audit 23.09.2026: Korrekturen aus dem Design-Durchgang
   ============================================================ */
/* Versalzeilen bei lh .8 liessen Umlautpunkte in die Zeile darueber und
   Kommas in die Zeile darunter stossen („DAFÜR" traf „SUCHEN"). */
.display-sm,.display-rg{line-height:.9}
.claim.heading-1{line-height:.88}
/* Unterseiten: Die letzte Zeile gibt ihren Ausgleich (-.3em) zurueck, sonst
   klebt der Einleitungssatz 10–14 px unter der H1 statt mit Luft darunter. */
.hs-copy .hero-h1 .ln:last-child{margin-bottom:0}
/* Akzentpanel: jede Zeile bleibt eine Zeile. Wie gross sie sein darf,
   rechnet das Skript „Claim einpassen" aus; ohne JS gilt der Grad aus CSS. */
#claim .claim .ln{white-space:nowrap}
/* Danke-Seiten: .out ist dort ein <span>. Inline rutschten Linie und
   Abstand in die Zeile darueber und sahen aus wie durchgestrichen. */
.step .out{display:block}
/* Schritte: die Linie ueber „Ergebnis" steht in allen Spalten gleich hoch. */
.steps > .step{display:flex;flex-direction:column}
.steps > .step > .out{margin-top:auto}
.steps > .step > p:has(+ .out){margin-bottom:var(--sp-md)}
/* Einheit neben der grossen Zahl: sichtbar, nicht 10 px Mono. */
.res-num b .un{
  font-family:inherit;font-size:.36em;font-weight:700;line-height:1;
  letter-spacing:-.01em;margin-left:.14em;padding-top:.1em;opacity:.8;
}
/* Kachel ohne Foto: Initialen statt leerer Rahmen. */
.ptile{align-items:center;justify-content:center;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.ptile .ini{
  font-size:clamp(28px,3.4vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variation-settings:'wght' 700,'wdth' 90;color:var(--muted);
}
.crew-pic .ptile{display:flex}
.crew-pic .ptile .ini{font-size:clamp(18px,1.8vw,26px)}
/* Artikel und Rechtstexte: Zwischenueberschriften heben sich ab, Listen
   haben Zeichen, lange Adressen brechen statt aus dem Rand zu laufen. */
.art-prose h3{font-size:clamp(19px,1.5vw,22px);font-weight:500;font-variation-settings:'wght' 520;margin-top:var(--sp-xl)}
.art-prose ul{list-style:disc}
.art-prose ol{list-style:decimal}
.art-prose a{overflow-wrap:anywhere}
.tab-logo{opacity:.94}
@media (max-width:760px){
  .hero-h1{line-height:.98}
  /* Leistungszeilen: feste Nummernspalte. Mit auto zog die Karte darunter
     die Spalte auf, die Titel sprangen zwischen 39 und 179 px. */
  .svc-item{grid-template-columns:28px minmax(0,1fr)}
  /* Feste Leiste unten: Am Seitenende lag sie ueber Impressum und
     Datenschutz, dazwischen schien Text durch. Platz am Ende und eine
     Flaeche in Grundfarbe unter den drei Knoepfen. */
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  html.js .bar-veil{
    position:fixed;left:0;right:0;bottom:0;z-index:780;pointer-events:none;
    height:calc(82px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,var(--bg) 62%,color-mix(in srgb,var(--bg) 0%,transparent));
    opacity:0;transition:opacity .45s var(--ease);
  }
  html.js.hero-out .bar-veil{opacity:1}
  /* Die Team-Karte erscheint mit der Leiste, nicht schon ueber dem Formular
     im ersten Bild. */
  html.js .sticky-card{opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  html.js.hero-out .sticky-card{opacity:1;pointer-events:auto}
  /* Tippt jemand in ein Formular, gehen die festen Knoepfe aus dem Weg. */
  /* Nach einem Fehlversuch springt der Fokus ins erste rote Feld; sein
     Label soll dabei nicht unter der Kopfleiste liegen. */
  .field input,.field textarea{scroll-margin-top:120px}
  html:has(input:focus,textarea:focus,select:focus) .book-pill,
  html:has(input:focus,textarea:focus,select:focus) .call-pill,
  html:has(input:focus,textarea:focus,select:focus) .sticky-card,
  html:has(input:focus,textarea:focus,select:focus) .bar-veil{opacity:0!important;pointer-events:none!important}
}
@media (min-width:761px){.bar-veil{display:none}}
/* ============================================================
   v38 — Ohne eckige Klammern. Kennzeilen ueber den Ueberschriften sind
   sichtbar (15 px, hell, gelber Marker), Tags haben einen Rahmen, die
   Einstiege sind Karten mit eigenem Titel und einer Handlung.
   ============================================================ */
:root{--kick-fs:16px}
.chapter .mono,.hero-eyebrow,.claim-kick{
  font-size:var(--kick-fs);text-transform:none;letter-spacing:-.005em;
  font-variation-settings:'wght' 600,'wdth' 100;color:var(--fg);
}
.chapter .mono::before,.hero-eyebrow::before,.claim-kick::before{
  content:"";display:inline-block;width:.5em;height:.5em;margin-right:.6em;
  background:var(--accent);vertical-align:.08em;
}
#claim .claim-kick{color:var(--on-accent)}
#claim .claim-kick::before{background:var(--on-accent)}
/* Tags und Chips: ohne Klammern brauchen sie einen Rahmen. */
.chip,.tag{
  padding:5px 10px;line-height:1.3;border-radius:3px;
  border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
}
.chips .chip{padding:7px 10px}
.hero-chips{gap:6px}
a.chip::before{left:0;right:0;top:0;height:100%;transform:none;border-radius:2px}
a.chip:hover,a.chip:focus-visible{border-color:var(--accent)}
/* Einstiege */
.door{
  padding:var(--sp-lg);border:1px solid var(--line);border-radius:4px;
  background:color-mix(in srgb,var(--fg) 3%,transparent);
  transition:border-color .5s ease,background-color .5s ease;
}
.door:hover{border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.door-1,.door-1:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.door-top{display:flex;align-items:baseline;gap:12px}
.door-no{font-size:var(--kick-fs);font-variant-numeric:tabular-nums;color:var(--fg);font-variation-settings:'wght' 600,'wdth' 100}
.door-kick{color:var(--muted)}
.door-t{
  margin-top:var(--sp-md);font-size:clamp(26px,calc(18px + .9vw),36px);line-height:1.1;
  letter-spacing:-.02em;font-weight:400;font-variation-settings:'wght' 400,'wdth' 100;
}
.door .btn{width:100%}
@media (max-width:760px){
  :root{--kick-fs:15px}
  /* Mobil bleiben verlinkte Chips 44 px hoch (Trefferflaeche). */
  .chips a.chip{padding:13px 10px}
  .chips span.chip{padding:5px 10px}
}
/* ============================================================
   v37 — Weiterfuehrende Links sind Knoepfe, einzeilig. Als 13-px-Label
   in einer schmalen Spalte brach „Zur SEO-Seite" Wort fuer Wort um und
   ging auf dem Desktop unter.
   ============================================================ */
.svc-link{margin-top:var(--sp-md)}
.svc-btns{display:flex;flex-wrap:wrap;gap:12px}
.svc-mono .svc-btns{display:inline-flex;flex-direction:column;align-items:stretch}
@media (max-width:1080px){.svc-mono .svc-btns{justify-content:flex-start}}
/* Akzentpanel unter 1080 px: Claim oben, Text und Knoepfe darunter in voller
   Breite. In der schmalen rechten Spalte passte der Knopf nicht mehr. */
@media (min-width:761px) and (max-width:1080px){
  .claim-block,.claim-foot{grid-column:1 / -1}
  .claim-foot{margin-top:var(--sp-xl);flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-md) var(--sp-lg)}
  .claim-foot > p:not(.claim-alt){flex:0 0 min(56ch,100%);margin-right:calc(100% - min(56ch,100%))}
}
@media (max-width:760px){
  /* Mobil loest sich .svc-body auf; ohne Platz landete der Link in der
     28-px-Nummernspalte und brach Wort fuer Wort um. */
  .svc-link{grid-column:1 / -1;grid-row:6}
}
.head-btn{margin-top:var(--sp-md)}
.hero-cta-br{flex-basis:100%;height:0;margin-top:calc(var(--sp-md) * -1)}
.claim-alt{margin-top:0}
#claim .claim-alt .btn,.claim-foot .claim-alt .btn{
  color:var(--on-accent);border-color:color-mix(in srgb,var(--on-accent) 35%,transparent);
  --fill:var(--on-accent);--fill-ink:var(--accent);
}
.art-bridge .btn{margin-top:var(--sp-sm)}
.danke-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.door:hover .btn,.door:focus-visible .btn{border-color:var(--accent)}
@media (max-width:760px){
  .svc-link .btn,.head-btn .btn,.claim-alt .btn,.danke-cta .btn{max-width:100%}
}
/* ============================================================
   v37 — Das Logo des Kunden: „ONE" ueber „OAK". Es ist fast quadratisch
   (900 x 655) statt breit; die Groessen haengen jetzt an der Hoehe.
   ============================================================ */
.pill-wm{flex:0 0 auto;width:auto}
.pill-wm .wm-svg{width:auto;height:32px}
/* Der Logo-Moment steht mitten im Fenster (vorher oben links an der
   Buehnenkante, bei niedrigen Fenstern oben abgeschnitten). Feste Groesse
   aus der Hoehe, Seitenverhaeltnis der Marke 900 : 655 = 1,3742. Die
   Landung in der Pille misst beide Rechtecke, sie haengt nicht an der Lage. */
.hero-wm{
  inset:0;margin:auto;
  --wmh:min(42vh,460px);
  height:var(--wmh);width:calc(var(--wmh) * 1.3742);
}
.hero-wm .wm-svg{width:100%;height:100%}
.pre-wm{width:170px}
@media (max-width:760px){
  .hero-wm{inset:0;--wmh:calc(min(64vw,280px) / 1.3742)}
  .pre-wm{width:130px}
}
@media (max-width:359px){.pill-msg{visibility:hidden}}

/* ============================================================
   v37 — Labels und Knoepfe in der Hausschrift
   ============================================================ */
/* Knoepfe: normale Schreibung, 15 px, halbfett — lesbar als Handlung,
   nicht als Etikett. */
.btn{
  font-family:var(--sans);font-size:var(--btn-fs);line-height:1.2;
  letter-spacing:-.005em;text-transform:none;
  font-variation-settings:'wght' 560,'wdth' 100;
}
.bp-t{
  font-family:var(--sans);font-size:var(--btn-fs);line-height:1.2;
  letter-spacing:-.005em;text-transform:none;
  font-variation-settings:'wght' 560,'wdth' 100;
}
/* Der Erstgespraech-Knopf im Hero war dem Kunden zu versteckt: groesser,
   mehr Flaeche, die Zeile daneben in Labelgroesse. */
.hero-cta .btn-accent{height:60px;min-height:60px;padding:0 24px;font-size:17px;gap:var(--sp-xl)}
/* Pfeil im Knopf waechst mit der Schrift. */
.btn .arw{width:.62em;height:auto}
/* Der Strom der Suchbegriffe hinter dem Hero ist Kulisse: kleiner und
   leiser als die Labels davor. */
.qs-q{font-size:11px;opacity:.16}
@media (max-width:760px){
  :root{--lab-fs:12px}
  .hero-cta .btn-accent{height:56px;min-height:56px;font-size:16px;padding:0 20px}
  /* Kopfleiste: der Spruch muss neben Logo und Burger passen. */
  /* Unter 360 px bleibt neben Logo und Burger kein Platz fuer einen Satz. */
  .pill-msg{font-size:11px;letter-spacing:.03em;font-variation-settings:'wght' 560,'wdth' 84}
}
/* Handy quer: Das Menue ist hoeher als der Bildschirm. Es scrollt in sich,
   statt unten abgeschnitten zu sein. */
.pill-menu{max-height:calc(100dvh - 50px - 40px);overflow-y:auto;overscroll-behavior:contain}