/* Schriften liegen lokal, nicht bei Google: sonst geht die IP jedes Besuchers dorthin, bevor er zustimmen kann (LG Muenchen I, 3 O 17493/20). Damit braucht diese Seite auch keinen Einwilligungskasten. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/archivo-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/archivo-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/archivo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/archivo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../schriften/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../schriften/barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../schriften/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/barlow-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../schriften/barlow-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ═══════════════════════════════════════════════════════════════════════ ANFRAGE-STRECKE · eigene Seite, gleiche Tokens wie der Referenz-Frame Eine Frage je Bildschirm. Der erste Schritt ist auf der Startseite passiert — hier geht es ohne Wiederholung weiter, deshalb startet der Balken nicht bei 0. ═══════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ css/tokens.css · ELEKTRO PI - EINZIGE WERTEQUELLE Woertlich uebernommen aus Schritt 1. ════════════════════════════════════════════════════════════════ */ :root{ /* --- Marke und Akzent --------------------------------------- EIN Markenton. #CB0001 ist das gemessene Logo-Rot und nicht das hellere Website-Rot #E11B14: das Logo ist das Zeichen, und es traegt Weiss mit 5,93:1 statt 4,81:1. Tiefrot ist ausschliesslich Hover — kein zweiter Markenton fuer Schrift oder Flaechen. */ --brand:#CB0001; --brand-dark:#A80603; --brand-2:var(--brand); /* Links/Haken/Nav-Unterstrich — bewusst DERSELBE Ton */ --brand-soft:#FBEBEB; /* nur Fokus-Ring/State, nie Flaeche */ --accent:var(--brand); --accent-soft:#FBEBEB; --accent-fg:#FFFFFF; --accent-bgh:var(--brand-dark); --accent-ink:var(--accent); /* Rot ist dunkel genug fuer Schrift auf Hell: 5,93:1 */ --eyebrow-color:var(--accent-ink); --eyebrow-dash-color:var(--eyebrow-color); --marker-bg:var(--accent); /* Volumen-Marke: Marker wird GEFUELLT, nicht gezeichnet */ --marker-fg:#FFFFFF; --marker-line:transparent; --rule-color:var(--accent); /* --- Flaechen und Zonen (immer genau diese vier) ------------- 1 Reinweiss · 2 Werkstattgrau · 3 Elektro-Rot · 4 Graphit */ --bg:#FFFFFF; --bg-alt:#F4F5F6; --surface:var(--bg); /* Card = WEISS mit Linie (bewusste Entscheidung) */ --bg-accent:#CB0001; /* Kontrastflaeche traegt den Markenton, nicht Schwarz */ --bg-dark:#2B2F33; /* Footer — eigener Ton, nie gleich der Kontrastflaeche */ --fill:#F8F9FA; /* Card-Grau, HELLER als --bg-alt */ --hero-bg:var(--bg); --veil:rgba(255,255,255,.14); --veil-strong:rgba(255,255,255,.26); --bg-brand:var(--bg-accent); --cta-band-bg:var(--accent); /* --- Text --------------------------------------------------- Kein Schwarz. Neutrale, minimal kuehle Graustufen. */ --text:#3C4248; /* 10,17:1 auf Weiss */ --text-secondary:#5A6268; /* 6,21:1 auf Weiss · 5,69:1 auf Werkstattgrau */ --text-muted:#656D73; /* 5,27:1 auf Weiss · 4,82:1 auf Werkstattgrau */ --heading:#32373C; /* 12,02:1 auf Weiss */ --on-accent:#FFFFFF; /* 5,93:1 auf Elektro-Rot */ --on-accent-soft:rgba(255,255,255,.95); /* 5,40:1 — auf mitteltonigem Rot hoch angesetzt */ --on-dark:#FFFFFF; /* 13,49:1 auf Graphit */ --on-dark-soft:rgba(255,255,255,.80); /* 9,20:1 — Footer hat eigene Rollen */ /* --- Linien und Rahmen -------------------------------------- EINE Linienstaerke fuer die ganze Marke. Deutlichkeit kommt aus dem Ton (--control-line), nicht aus mehr Dicke. */ --border:#E3E6E8; --border-strong:#C6CBCF; --control-line:#858C92; /* 3,41:1 auf Weiss — Bedienelemente */ --border-w:1px; /* Karten, Panels, Felder, Trenner */ --border-w-2:2px; /* nur Zeichen: Marker, Fortschritt, Auswahlkachel */ /* Einmal im :root aufgeloest und danach als fertiger Wert vererbt: der Linienton fuer Bedienelemente, die AUF WEISS stehen - auch innerhalb einer dunklen Zone (Feld im Formular-Panel). */ --ctl-hell:var(--control-line); --border-hell:var(--border-strong); /* --- Die Haarlinie aus dem Logo (eigene Rolle) --------------- Im Logo trennt eine duenne, gedeckte Senkrechte das Pi vom Wort. Sie wird im System der Trenner zwischen gleichrangigen Dingen: Logo|Nav, Meta-Zeilen, Footer-Spalten. Als currentColor mit geringer Deckkraft, damit sie in jeder Zone mitkippt. */ --hairline-w:1px; --hairline-h:1.5em; --hairline-op:.28; /* --- Schrift ------------------------------------------------ Archivo = blockhafte Grotesk mit flachen Abschluessen, trifft die Wortmarke, bleibt bei 700 statt Black (Seite weicher als Logo). Barlow = Schrift aus der Beschilderung, schmal laufend; haelt lange deutsche Komposita wie "Pruefmanagement" in einer Zeile. */ --font-display:"Archivo","Helvetica Neue",Arial,sans-serif; --font-sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-btn:var(--font-sans); --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:700; /* H1 */ --fw-heading:700; /* H2 */ --fw-h2:700; --fw-h3:600; /* Kette: 700 >= 700 >= 600 — nie ansteigend */ --fw-btn:600; --heading-style:normal; --btn-style:normal; --eyebrow-style:normal; --fs-display:var(--h1-mobil); --fs-h2:clamp(28px,3.6vw,34px); --fs-h3:clamp(19px,2.2vw,22px); --fs-lead:clamp(18px,2.3vw,21px); --fs-body:17px; --fs-small:14.5px; --fs-eyebrow:13px; --fs-btn:16px; --fs-btn-mobil:clamp(16px,4.2vw,18px); /* Laufweite: Ueberschriften eng wie die gesperrte Wortmarke, Eyebrow weit wie eine Klemmen-Beschriftung am Verteiler. */ --ls-heading:-.018em; --ls-eyebrow:.16em; --ls-klein:.08em; --lh-tight:1.1; --lh-heading:1.16; --lh-lead:1.55; --lh-body:1.65; /* --- Form und Radius ---------------------------------------- Gerade Kante zwischen Sektionen: die Marke ist durchweg rechtwinklig (Haarlinie, flache Abschluesse, Schaltschrank). 3 px Radius ueberall — macht das Signalrot solide statt scharf. */ --slant-h:0px; --radius:3px; --radius-pill:999px; --radius-btn:var(--radius); --radius-icon:var(--radius); --radius-card:var(--radius); --radius-sm:var(--radius); --btn-pad:15px 28px; /* --- Icons und Illustration --------------------------------- Bildsprache VOLUMEN (gefuellte Koerper) — Handwerk, 700er Schrift, gefuellter Marker. Icon-Leiter neutral grau, Rot nur als Blickfang. */ --ico-ton:#2B2F33; --ico-grund:var(--bg); --ico-1:color-mix(in srgb,var(--ico-ton) 6%,var(--ico-grund)); --ico-2:color-mix(in srgb,var(--ico-ton) 13%,var(--ico-grund)); --ico-3:color-mix(in srgb,var(--ico-ton) 22%,var(--ico-grund)); --ico-4:color-mix(in srgb,var(--ico-ton) 33%,var(--ico-grund)); --ico-5:color-mix(in srgb,var(--ico-ton) 46%,var(--ico-grund)); --ico-6:color-mix(in srgb,var(--ico-ton) 61%,var(--ico-grund)); --ico-7:color-mix(in srgb,var(--ico-ton) 78%,var(--ico-grund)); --ico-akzent:var(--accent); --icon-stroke:2; --illu-1:var(--fill); --illu-2:var(--border); --illu-3:var(--border-strong); --illu-4:var(--accent); /* --- Abstand und Raster -------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:88px; --space-10:120px; --container:1200px; --measure:62ch; --gutter:24px; --grid-gap:clamp(24px,3vw,40px); --section-y:clamp(64px,8vw,104px); --section-y-sm:clamp(40px,5vw,64px); --gap-card:clamp(16px,2vw,28px); --gap-split:clamp(32px,4.5vw,64px); --header-h:88px; /* --- Schatten und Bewegung ----------------------------------- Weich: grosser Blur, niedrige Deckkraft. Der Wisch ist LICHT — auf Farbe/Dunkel weiss, auf Weiss ein neutrales Hellgrau. */ --shine:rgba(255,255,255,.34); --shine-hell:rgba(0,0,0,.055); --shine-loop:6.5s; --shadow-none:none; --shadow-sm:0 1px 2px rgba(43,47,51,.06); --shadow-md:0 18px 40px -24px rgba(43,47,51,.30); --ease:cubic-bezier(.22,.61,.36,1); --dur:.2s; --dur-slow:.42s; /* --- Formular ----------------------------------------------- Der Anfrage-Block steht auf GRAPHIT, nicht auf Rot: die Anfrage soll verlaesslich wirken, und der weisse Absende-Knopf mit rotem Label ist auf Graphit das hellste Element der Seite. */ --focus:var(--accent); --form-bg:var(--bg-dark); --form-fg:var(--on-dark); --form-fg-soft:var(--on-dark-soft); --form-heading:var(--on-dark); --form-line:var(--veil); --form-line-strong:var(--veil-strong); --form-fill:var(--fill); --form-sel-bg:var(--bg); --form-sel-soft:var(--accent-soft); --form-illu-line:var(--illu-3); --form-illu-fein:var(--illu-1); --form-illu-flaeche:var(--illu-2); --form-cta-bg:var(--on-dark); --form-cta-fg:var(--btn-on-accent-fg); --form-cta-bgh:#FFFFFF; --form-positive:var(--positive-on-dark); --form-tile-fg:var(--ink-h); --form-tile-line-w:var(--border-w); --form-heading-weight:var(--fw-heading); --form-frage:var(--form-heading); /* --- Kopf und Fuss ------------------------------------------ Der Header ist WEISS: die Wortmarke ist rot: Rot auf Rot gibt es nie. */ --header-bg:var(--bg); --header-fg:var(--heading); --header-fg-soft:var(--text-secondary); --header-line:var(--border); --header-line-rest:transparent; --header-top-bg:transparent; --header-cta-bg:var(--accent); --header-cta-fg:var(--accent-fg); --header-ph-line:var(--border-strong); --logo-w:210px; --logo-h:30px; --logo-h-lg:34px; /* --- Zier: genau EINE, nicht zwei --------------------------- Die Designrichtung setzt einen kurzen roten Strich an jede Ueberschrift. Er wird zum Strich VOR dem Eyebrow. Der Strich UNTER der Ueberschrift bleibt darum auf 0. */ --eyebrow-dash-w:0px; /* 07.10.2026 Pascal: kein Strich vor der Vorzeile */ --eyebrow-dash-h:3px; --header-top-h:0px; --rule-w:0px; --rule-len:0px; --rule-inset:0px; --rule-gap:0px; /* --- Weitere -------------------------------------------------- */ --hk-accent-fg:#FFFFFF; --hk-accent-ink:var(--accent-ink); --hk-text-muted:var(--text-muted); --positive:#2F8550; --ink:var(--text); --ink-2:var(--text-secondary); --ink-3:var(--text-muted); --ink-h:var(--heading); --positive-on-dark:#5FD08D; --positive-chip:var(--positive); --hero-marker-fg:var(--marker-fg); --hero-marker-line:var(--marker-line); --hero-cta-bg:var(--accent); --hero-cta-fg:var(--accent-fg); --hero-cta-bd:var(--accent); --hero-cta-bgh:var(--brand-dark); --h1-320:28px; --h1-mobil:clamp(30px,8.4vw,38px); --h1-768:36px; --h1-900:38px; --h1-1200:44px; --head-mb:clamp(18px,2.4vw,34px); --hero-fg:var(--text); --hero-heading:var(--heading); --hero-fg-soft:var(--text-secondary); --btn-ghost-fg:var(--brand); --btn-on-accent-fg:var(--brand); --cta-band-fg:var(--accent-fg); /* --- Nachgetragen in Schritt 2 (siehe design-system.md, Nachtrag) ------- --line-hell: der Kartenton --border, EINMAL im :root aufgeloest und danach als fertiger Wert vererbt. Eine weisse Karte auf einer dunklen Zone braucht ihre Linie gegen die KARTE, nicht gegen die Seite - der Zonen-Reset zieht --border aber auf den Schleier. Gleicher Mechanismus wie --ctl-hell/--border-hell, nur fuer die Kartenkante. --negativ: der Frame kennt eine eigene Fehler-Rolle. Diese Marke hat EINEN Rotton; der Fehler traegt ihn, kein zweites Rot. */ --line-hell:var(--border); --negativ:var(--accent); /* Die Auswahlkachel ist ein ZEICHEN, nicht ein Eingabefeld: der Styleguide zeichnet sie mit --border-w-2. Der Token-Vertrag stand auf --border-w und widersprach damit dem gezeigten Bauteil. */ --form-tile-line-w:var(--border-w-2); } /* ════════════════════════════════════════════════════════════════════════ GEOMETRIE · aus wireframe-anfrage.html, NICHT aus dem Design-System. Die Strecke ist luftiger gesetzt als die Startseite; das ist ihr Rhythmus und bleibt es. ════════════════════════════════════════════════════════════════════════ */ :root{ --section-y:clamp(40px,5.5vw,76px); --section-y-sm:clamp(24px,3.2vw,44px); --head-mb:clamp(22px,3.4vw,48px); --fs-display:clamp(32px,5vw,46px); --fs-h2:clamp(28px,3.6vw,33px); --fs-h3:clamp(19px,2.2vw,23px); --lh-tight:1.12; --lh-heading:1.18; } /* ════════════════════════════════════════════════════════════════════════ HAUT-ROLLEN aus der Komposition des Wireframes: dunkler Kopf, graue Grundflaeche, weisse Karten darauf. ════════════════════════════════════════════════════════════════════════ */ :root{ --logo-w:210px; --logo-h:30px; /* Die Illustrations-Skala der Strecke: enges Band MIT Spannweite, damit das Motiv auf der weissen Kachel nicht in sich zusammenfaellt. Toene der Marke, nicht erfundene. */ --illu-1:var(--bg-alt); --illu-2:var(--border-strong); --illu-3:var(--control-line); --illu-4:var(--accent); /* Die Spur des Fortschrittsbalkens muss auf der grauen Flaeche sichtbar bleiben. */ --fn-bar-track:var(--border-strong); } *{box-sizing:border-box;min-width:0} html{scroll-behavior:smooth;scroll-padding-top:100px} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans); font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased} img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{margin:0} h1,h2,h3{margin:0;font-family:var(--font-display);color:var(--heading)} h1{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-tight)} h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading)} h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-heading)} .lead{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:62ch} .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .skip{position:absolute;left:-9999px} .ph{background:var(--fill);border:var(--border-w-2) dashed var(--border-strong);border-radius:var(--radius); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);width:100%} .ph svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5} .ph span{font-size:12.5px;text-align:center;padding-inline:8px} /* Ein befuellter Slot: Rahmen und Beschriftung weg, das Bild fuellt den Platz. Diese drei Regeln fehlten hier — die Startseite hatte sie, die Anfrage-Strecke nicht. Folge: ein eingesetztes Logo behielt den gestrichelten Rahmen UND hatte keine Hoehenbegrenzung (ein quadratisches Logo lief aus dem Kopfbalken heraus). */ .ph{position:relative;overflow:hidden} .ph--img{background:transparent;border:0} .ph--img>svg,.ph--img>span{display:none} .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Logos und Siegel werden EINGEPASST, nie beschnitten. */ .ph--contain>img{object-fit:contain} .btn{--_bg:var(--brand);--_fg:var(--on-accent);--_bd:var(--brand);--_bgh:var(--brand-dark); display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3); font-family:var(--font-display);font-size:var(--fs-btn);font-weight:var(--fw-semibold);line-height:1.15; max-width:100%;text-align:center;hyphens:none;padding:14px 26px;border-radius:var(--radius-btn); cursor:pointer;background:var(--_bg);color:var(--_fg);border:var(--border-w-2) solid var(--_bd); position:relative;overflow:hidden;isolation:isolate; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)} /* Glanz-Streifen (1:1 aus dem Design-System uebernommen), damit sich die Anfrage-Strecke genauso anfuehlt wie die Seite. */ .btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%; background:linear-gradient(120deg,transparent,var(--shine),transparent); transform:skewX(-20deg);pointer-events:none; animation:btnShineLoop var(--shine-loop) ease-in-out 1.5s infinite} .btn:hover::after{animation:btnShine 1.1s ease} @keyframes btnShine{to{left:130%}} @keyframes btnShineLoop{0%{left:-130%}20%{left:130%}100%{left:130%}} @media(prefers-reduced-motion:reduce){.btn::after{display:none;animation:none}} .btn:hover{background:var(--_bgh);border-color:var(--_bgh);transform:translateY(-1px)} .btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .btn--ghost{--_bg:transparent;--_fg:var(--brand);--_bd:var(--border-strong);--_bgh:var(--fill)} .btn--accent{--_bg:var(--accent);--_fg:var(--accent-fg);--_bd:var(--accent);--_bgh:var(--brand)} .btn--block{width:100%} body{background:var(--bg-alt);min-height:100vh;display:flex;flex-direction:column} /* Kopf bewusst ohne Navigation: wer in der Strecke ist, soll nicht abspringen */ .fn-head{background:var(--bg-accent);padding:var(--space-5) var(--gutter);text-align:center} .fn-head .ph{width:var(--logo-w,150px);height:var(--logo-h,44px);aspect-ratio:auto;margin-inline:auto;background:transparent; border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7)} .fn-main{flex:1;width:100%;max-width:640px;margin-inline:auto; padding:clamp(24px,5vw,44px) var(--gutter) 84px} /* Frage als Sprechblase neben einem Gesicht: eine Person fragt, kein Formular */ .ask{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)} .ask-who{flex:0 0 auto;width:96px;text-align:center} .ask-ava{width:76px;height:76px;margin-inline:auto;border-radius:50%;overflow:hidden;background:var(--fill)} .ask-ava .ph{height:100%;aspect-ratio:auto;border-radius:50%;border:0} .ask-ava .ph span{display:none} .ask-name{margin-top:var(--space-2);font-size:11.5px;font-weight:var(--fw-bold);color:var(--heading);line-height:1.25} .ask-role{font-size:11px;color:var(--text-muted);line-height:1.25} .bubble{position:relative;flex:1;background:var(--bg);border:var(--border-w) solid var(--border); border-radius:var(--radius);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm); font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3); color:var(--heading);line-height:1.3} .bubble::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%); width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent; border-right:9px solid var(--border)} .bubble::after{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%); width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent; border-right:8px solid var(--bg)} /* Antwortkarten: gleich groß, damit keine Option wichtiger wirkt als die andere */ .fn-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gap-card)} /* Enger Innenabstand, aber eine MINDESTHOEHE (Nutzer-Vorgabe 2026-08-27): Grosszuegiges Polster laesst die Kachel wachsen, sobald die Beschriftung umbricht - aus einer Reihe gleich hoher Karten werden dann unterschiedlich hohe. Umgekehrt fallen Kacheln mit einzeiliger Beschriftung ohne Polster in sich zusammen. Deshalb: knapper Abstand zwischen Zeichnung und Text, knappes Polster - und eine Mindesthoehe, die den einzeiligen Fall auf dasselbe Mass hebt wie den zweizeiligen. Die Hoehe kommt damit aus EINER Angabe statt aus dem zufaelligen Textumbruch. */ .fn-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2); background:var(--bg);border:var(--border-w-2) solid var(--border);border-radius:var(--radius); padding:var(--space-3);min-height:140px;cursor:pointer;font:inherit;color:var(--heading); font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body); text-align:center;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)} .fn-opt:hover{border-color:var(--brand);transform:translateY(-2px)} .fn-opt:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .fn-opt .tile-svg{width:64px;height:64px} /* Die Auswahl-Motive sind Illustrationen, keine Linienzeichnungen: sie holen ihre Toene aus der Illustrations-Skala (--illu-*), nicht aus --fill/--border. Aus Linien-Token gebaut fielen sie auf der Kachel auf 1,0:1 zusammen — die hellste Flaeche war exakt die Kachelfarbe. Ein Design-System setzt --illu-1…4 in apply_tokens.py; ohne Angabe greifen die Voreinstellungen aus :root. */ .tile-svg .l{fill:var(--illu-1)} .tile-svg .m{fill:var(--illu-2)} .tile-svg .d{fill:var(--illu-3)} .tile-svg .sh{fill:var(--illu-2)} .tile-svg .ac{fill:var(--illu-4)} /* Am Telefon sind die Kacheln schmaler, die Beschriftung bricht haeufiger um - die Mindesthoehe darf dort niedriger liegen, sonst wird die Auswahl unnoetig lang. */ @media (max-width:520px){.fn-opt{min-height:126px}} @media (max-width:380px){.fn-opts{grid-template-columns:minmax(0,1fr)}} /* Felder-Schritt: gleiche Bauweise wie im Frame (Beschriftung im Feld) */ .fn-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)} .fn-fields>.field--wide,.fn-fields>.btn,.fn-fields>.consent,.fn-fields>.form-trust{grid-column:1/-1} @media (max-width:420px){.fn-fields{grid-template-columns:minmax(0,1fr)}} .field{position:relative} .field input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg); border:var(--border-w-2) solid var(--border-strong);border-radius:var(--radius);padding:19px 12px 6px} .field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)} .field label{position:absolute;left:14px;top:14px;font-size:16px;color:var(--text-muted); pointer-events:none;transition:top .15s var(--ease),font-size .15s var(--ease)} .field input:focus~label,.field input:not(:placeholder-shown)~label{top:6px;font-size:11.5px;color:var(--text-secondary)} /* Ein Freitextfeld gehoert nicht in jede Strecke, aber wo eines steht, muss es aussehen wie die Zeilen darueber. Ohne diese drei Regeln faellt ein