/* ════════════════════════════════════════════════════════════════════════
adflow. Nacht und Bernstein.
WAS HIER DRIN STEHT UND WAS NICHT
Farben, Schrift, Radius, Abstand, Material, Bewegung. Nur hier. Eine
Seite bestimmt ihre Anordnung, nie ihr Material. Ein rohes #hex fuer eine
Flaeche in einer Seitendatei ist ein Fehler, kein Sonderfall.
WARUM DUNKEL
Die Marke ist dunkel geboren: das Original liegt als Creme auf Schwarz
vor (brand-source/logo-schwarz-mit-glow.png). Und das Produkt ist eine
dunkle Glaskapsel an der Bildschirmkante. Auf Papier war das Glas nur an
seiner Kante zu sehen; auf Nacht sieht man es brechen.
EIN TON
Bernstein #FF9F0A, weil er im Abzeichen und im Knopf der App steckt. Auf
diesem Grund misst er 9,7:1 und darf deshalb auch Schrift sein, was er
auf Papier nie durfte. Sonst: neutrale Graustufen mit einem Hauch Waerme
im Weiss, damit die Creme des Logos nicht gegen kaltes Weiss steht.
KONTRAST, GERECHNET (gegen --bg #09090A, in Klammern gegen eine
Glasflaeche, die hoechstens #18181B erreicht)
--ink #F3F1EC 18,4:1 (16,0)
--ink-2 #BDBAB3 10,4:1 (9,0)
--ink-3 #97948E 6,6:1 (5,7)
--amber #D8C29C 11,5:1 (10,2) Champagner, siehe unten
Schrift auf Bernstein: --on-amber #1A1204, 8,7:1
FORM, EINE REGEL
Was man anklickt, ist rund wie eine Kapsel (Knoepfe, Umschalter,
Marken). Flaechen haben 26px, Eingabefelder und alles Eingelassene 14px.
Mehr Radien gibt es nicht.
GLAS, EHRLICH EINGEORDNET
.glass und die Knoepfe sind eine ANNAEHERUNG an Apples Liquid Glass mit
backdrop-filter. Ein offizielles Liquid Glass fuers Web gibt es nicht. In
Chromium bricht zusaetzlich ein SVG-Filter (#refract, aus inc/bar.php)
den Grund an der Kante; ueberall sonst bleibt es bei Unschaerfe,
Lichtsaum und Tiefe.
════════════════════════════════════════════════════════════════════════ */
:root{
color-scheme:dark;
/* ─── Grund ──────────────────────────────────────────────────────────── */
--bg:#09090A;
--bg-2:#0F0F11; /* abgesetztes Band, Fussbereich */
--bg-3:#151517; /* eingelassene Flaeche ohne Glas */
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.06);
--line-3:rgba(255,255,255,.18);
/* ─── Schrift ────────────────────────────────────────────────────────── */
--ink:#F3F1EC;
--ink-2:#BDBAB3;
--ink-3:#97948E;
--ink-4:#6C6A65; /* nur Zierde und abgeschaltete Dinge */
/* ─── Der eine Akzent ────────────────────────────────────────────────── */
/* Champagner statt Bernstein. Der gesaettigte Bernstein des Produkts
war als Seitenakzent zu laut; dieser Ton kommt aus Creme und Sand des
Logos und traegt, ohne zu rufen. Die Namen bleiben --amber*, damit
jede Seite, die sie benutzt, ohne Aenderung mitgeht. Das Bernstein der
App bleibt, wo es Inhalt ist: im Beispiel-Spot, in den Farbfeldern. */
--amber:#D8C29C; /* 11,5:1 */
--amber-rgb:216,194,156;
--amber-hi:#EADCC2;
--amber-lo:#BFA57A;
--amber-ink:#E4D1AE; /* Links, 13,3:1 */
--on-amber:#15120C; /* 10,8:1 auf Champagner */
--amber-soft:rgba(216,194,156,.10);
/* Der Hauptknopf: Elfenbein, nicht Farbe. */
--ivory:#F4EFE6;
--ivory-lo:#E4DCCE;
--on-ivory:#16140F; /* 16:1 */
/* Bedeutung, nicht Zierde. Nie allein: daneben steht immer ein Wort. */
--ok:#5FD68A; /* 11,2:1 */
--bad:#FF7B6E; /* 7,6:1 */
--warn:var(--amber);
/* Die alten Namen zeigen auf die neuen Werte. Seiten, die sie noch
benutzen, bleiben damit in der Palette. */
--paper:var(--bg);
--sheet:var(--bg-3);
--sand:var(--amber);
--sand-rgb:var(--amber-rgb);
--sand-ink:var(--amber-ink);
--sand-soft:var(--amber-soft);
/* ─── Form ───────────────────────────────────────────────────────────── */
--r-lg:26px;
--r:14px;
--r-sm:10px;
--r-pill:999px;
/* ─── Bewegung ───────────────────────────────────────────────────────
Aussen steil, innen weich. Eine Feder fuer das, was man anfasst, eine
lange ausrollende Kurve fuer das, was ins Bild kommt. */
--kurve:cubic-bezier(.16,1,.3,1);
--feder:cubic-bezier(.34,1.36,.64,1);
--takt:.18s;
--takt-2:.32s;
--takt-3:.9s;
/* ─── Schrift ────────────────────────────────────────────────────────── */
--sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--wide:'Archivo',var(--sans);
/* Schriftstufen unterhalb von h2 (h2 selbst: clamp 1.8 bis 3rem). */
--fs-panel:clamp(1.3rem,2vw,1.6rem); /* .h-panel: Kopf einer Flaeche oder Gruppe */
--fs-h3:1.2rem; /* h3: Unterpunkt */
/* ─── Mass ───────────────────────────────────────────────────────────── */
--gap:clamp(88px,12vw,168px);
--col:min(1240px,100% - 48px);
--rail-h:44px;
/* ─── Ebenen ─────────────────────────────────────────────────────────── */
--z-scene:-1;
--z-head:40;
--z-rail:60;
--z-over:80;
/* ─── Tiefe ──────────────────────────────────────────────────────────── */
--lift-1:0 1px 1px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
--lift-2:0 2px 2px rgba(0,0,0,.35), 0 24px 60px -24px rgba(0,0,0,.85);
--lift-3:0 40px 120px -40px rgba(0,0,0,.9);
--contact:0 1px 0 rgba(0,0,0,.5);
--rim:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04);
/* Die Oberflaeche der Leiste, fuer Nachbauten (Spot-Baukasten, Simulator). */
--spot-top:rgba(20,20,22,.72);
--spot-bot:rgba(10,10,11,.86);
/* Eingelassene Flaeche: Felder, Schluessel, Code, Vorschau-Buehnen. */
--well:rgba(0,0,0,.30);
--sink:inset 0 1px 3px rgba(0,0,0,.45);
--bad-rgb:255,123,110;
/* Alte Namen, von admin.php und app/index.php noch benutzt. */
--bevel:var(--rim);
--kante:0 0 0 1px var(--line);
}
@media (max-width:560px){ :root{ --col:min(1240px,100% - 32px) } }
*,*::before,*::after{box-sizing:border-box}
/* html bekommt KEINEN eigenen Hintergrund. Nur dann wandert der des body
auf die Wurzel und liegt unter der Szene (z-index -1). Mit einem
Hintergrund auf html wuerde body als Block ueber die Leinwand malen. */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* Der Grund hat eine Richtung: ein sehr schwaches Licht von oben, sonst
nichts. Farbflecken waeren Dekoration; das Licht ist, was das Glas
braucht, um etwas zu brechen. */
body{
margin:0; min-height:100dvh; color:var(--ink); background:var(--bg);
background-image:
radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.055), transparent 60%),
radial-gradient(60% 40% at 88% 8%, rgba(var(--amber-rgb),.035), transparent 70%);
background-repeat:no-repeat; background-attachment:fixed;
font:400 17px/1.65 var(--sans);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
padding-top:var(--rail-h);
}
::selection{background:rgba(var(--amber-rgb),.28); color:var(--ink)}
.col{width:var(--col); margin-inline:auto}
.col-narrow{width:min(760px,100% - 48px); margin-inline:auto}
@media (max-width:560px){ .col-narrow{width:min(760px,100% - 32px)} }
.sec{padding-block:var(--gap); position:relative}
.sec + .sec{border-top:0}
/* Sprung zum Inhalt. Unsichtbar, bis jemand mit der Tastatur kommt. */
.skip{position:fixed; left:16px; top:calc(var(--rail-h) + 10px); z-index:var(--z-over);
padding:12px 18px; border-radius:var(--r-pill); background:var(--ivory); color:var(--on-ivory);
font:600 .9rem/1 var(--sans); text-decoration:none;
transform:translateY(calc(-100% - var(--rail-h) - 30px))}
.skip:focus{transform:none}
/* ─── Schrift ─────────────────────────────────────────────────────────────
Archivo breit gestellt fuer alles, was eine Ueberschrift ist: die
Breitachse gibt ihr die Ruhe einer Zeile auf einem Geraet, nicht das
Gedraengel einer Plakatschrift. Hierarchie aus Groesse UND Gewicht. */
h1,h2,h3,h4{font-family:var(--wide); font-stretch:112%; margin:0; text-wrap:balance;
letter-spacing:-.025em; line-height:1.06; font-weight:600; color:var(--ink)}
h1{font-size:clamp(2.5rem,5.4vw,4.9rem); letter-spacing:-.042em; line-height:1.0; font-weight:620}
h2{font-size:clamp(1.8rem,3.4vw,3rem); letter-spacing:-.034em; line-height:1.04}
h3{font-size:var(--fs-h3); letter-spacing:-.012em; line-height:1.3; font-stretch:106%}
/* Die Stufe zwischen h2 und h3: Ueberschrift einer Flaeche oder Gruppe
(Formularblock, Kasten, Seitenleiste), egal ob sie als h2 oder h3 im
Dokument steht. Seiten setzen dafuer keine eigenen Groessen mehr. */
.h-panel{font-size:var(--fs-panel); line-height:1.2; letter-spacing:-.02em; font-stretch:110%}
h4{font-size:1rem; letter-spacing:-.005em; line-height:1.35; font-stretch:100%}
.display{font-size:clamp(2.9rem,6.6vw,6.2rem); letter-spacing:-.048em; line-height:.98; font-weight:640}
p{margin:0 0 1.05em; max-width:64ch}
a{color:var(--amber-ink); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
strong,b{font-weight:600; color:var(--ink)}
em{font-style:normal; font-weight:inherit; color:var(--amber)}
code,kbd,samp{font-family:var(--mono); font-size:.88em}
hr{border:0; border-top:1px solid var(--line); margin:36px 0}
.lede{font-size:clamp(1.06rem,1.35vw,1.22rem); color:var(--ink-2); max-width:54ch; line-height:1.6}
/* Derselbe Abstand unter jeder Abschnittsueberschrift, auch ausserhalb von
.sechead (etwa in .half). .sechead und Seiten, die .lede selbst setzen,
gewinnen mit hoeherer Spezifitaet. */
h2 + .lede{margin-top:18px}
.small{font-size:.92rem; color:var(--ink-2); line-height:1.6}
.tiny{font-size:.82rem; color:var(--ink-3); line-height:1.55}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
/* Kleine Marke ueber einer Ueberschrift. Hoechstens eine auf drei
Abschnitte. Sie nennt das Thema, sie zaehlt es nicht. */
.label{font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-3); display:inline-flex; align-items:center; gap:10px; margin:0 0 18px}
.label::before{content:""; width:18px; height:1px; background:currentColor; opacity:.7}
/* Ein Abschnittskopf: Ueberschrift, darunter ein Satz. Nie nebeneinander. */
.sechead{max-width:760px; margin-bottom:clamp(36px,5vw,64px)}
.sechead h2{margin-bottom:18px}
.sechead .lede{margin:0}
/* ─── Flaechen ────────────────────────────────────────────────────────────
.glass schwebt und bricht, was dahinter liegt
.sheet eingelassen, ohne Glas; fuer Formularbereiche und Tabellen
.float alte Bezeichnung fuer .glass */
.glass,.float{
position:relative; isolation:isolate;
border-radius:var(--r-lg);
background:
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 38%, rgba(255,255,255,.03));
backdrop-filter:blur(26px) saturate(165%);
-webkit-backdrop-filter:blur(26px) saturate(165%);
box-shadow:var(--rim), 0 0 0 1px rgba(255,255,255,.055), var(--lift-2);
}
/* Der Lichtsaum. Eine Kante aus Glas faengt Licht oben links und wirft
einen Rest unten rechts zurueck; dazwischen ist sie fast unsichtbar.
Als Maske auf einem Pseudo-Element, damit er genau 1px breit bleibt. */
.glass::before,.float::before{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.07) 28%,
rgba(255,255,255,0) 52%, rgba(255,255,255,.06) 78%, rgba(255,255,255,.24));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none; z-index:1;
}
/* Der Glanz folgt dem Zeiger (motion.js setzt --mx/--my). Ohne Skript
steht er oben links, wo das Licht herkommt. */
.glass::after,.float::after{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
background:radial-gradient(520px circle at var(--mx,18%) var(--my,-10%), rgba(255,255,255,.075), transparent 58%);
}
.glass > *,.float > *{position:relative; z-index:2}
.glass > .on-glass{position:relative; z-index:2}
@supports (backdrop-filter: url(#refract)){
.glass.lens{backdrop-filter:blur(18px) url(#refract) saturate(170%)}
}
.sheet{background:rgba(255,255,255,.028); border:1px solid var(--line-2); border-radius:var(--r-lg)}
/* Rauchglas: dichter, fuer Formulare und lange Flaechen, hinter denen die
Kapsel vorbeiziehen kann. Dort soll sie nur noch als Licht durchscheinen. */
.glass.smoke{background:linear-gradient(180deg, rgba(26,26,29,.74), rgba(14,14,16,.86));
backdrop-filter:blur(34px) saturate(140%); -webkit-backdrop-filter:blur(34px) saturate(140%)}
.pad{padding:clamp(22px,3vw,40px)}
/* Wer Transparenz abgeschaltet hat, bekommt feste Flaechen. */
@media (prefers-reduced-transparency:reduce){
.glass,.float,.btn,.chip,.pin,.tgl,.ospick,.pick,.head .nav,.spot,
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=search],input[type=tel],textarea,select{
background:var(--bg-3) !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.btn-1{background:var(--ivory) !important}
}
/* ─── Knoepfe ─────────────────────────────────────────────────────────────
Zwei Stufen. Der laute ist Bernstein und fuehrt, der leise ist Glas und
folgt. Beide sind Kapseln und federn beim Druecken. */
.btn{
--b-bg:rgba(255,255,255,.06);
position:relative; isolation:isolate;
display:inline-flex; align-items:center; justify-content:center; gap:9px;
min-height:44px; padding:12px 22px; border-radius:var(--r-pill);
border:0; color:var(--ink); background:var(--b-bg);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05),
0 0 0 1px rgba(255,255,255,.14), var(--lift-1);
font:600 .95rem/1 var(--sans); letter-spacing:-.005em;
text-decoration:none; white-space:nowrap; cursor:pointer;
transition:transform var(--takt-2) var(--feder), background var(--takt) var(--kurve),
box-shadow var(--takt) var(--kurve), color var(--takt) var(--kurve);
-webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
@supports (backdrop-filter: url(#refract-k)){
.btn{backdrop-filter:blur(3px) url(#refract-k) saturate(1.5)}
}
.btn:hover{--b-bg:rgba(255,255,255,.1); transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(255,255,255,.22), var(--lift-2)}
.btn:active{transform:translateY(0) scale(.97); transition-duration:.08s}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45; cursor:not-allowed; transform:none}
.btn .a{transition:transform var(--takt-2) var(--feder)}
.btn:hover .a{transform:translateX(3px)}
/* Der laute Knopf ist hell, nicht bunt: eine Kapsel aus Elfenbein mit
einem Lichtsaum oben und einem Schatten, der sie vom Grund hebt. Kein
farbiges Gluehen. Der Rang kommt aus Helligkeit und Hoehe. */
.btn-1{
color:var(--on-ivory);
background:linear-gradient(180deg, #FFFDF8, var(--ivory) 46%, var(--ivory-lo));
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.10),
0 0 0 1px rgba(255,255,255,.32), 0 1px 2px rgba(0,0,0,.5),
0 12px 32px -14px rgba(0,0,0,.9);
padding:14px 26px; font-size:1rem; letter-spacing:-.01em;
}
@supports (backdrop-filter: url(#refract-k)){ .btn-1{backdrop-filter:none} }
.btn-1:hover{background:linear-gradient(180deg, #FFFFFF, #FAF6EF 46%, #EAE3D7);
box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08),
0 0 0 1px rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.45),
0 18px 40px -16px rgba(0,0,0,.95)}
.btn-1:focus-visible{outline-color:var(--ivory)}
.btn-1[disabled],.btn-1[aria-disabled=true]{opacity:1; color:rgba(22,20,15,.45);
background:linear-gradient(180deg, #8E8A83, #75716B); box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* Was etwas loescht oder stoppt. Nie neben dem Hauptknopf ohne Abstand. */
.btn-bad{color:var(--bad); --b-bg:rgba(var(--bad-rgb),.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(var(--bad-rgb),.45), var(--lift-1)}
.btn-bad:hover{--b-bg:rgba(var(--bad-rgb),.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(var(--bad-rgb),.65), var(--lift-2)}
.btn-bad:focus-visible{outline-color:var(--bad)}
.btn-quiet{background:transparent; box-shadow:none; color:var(--ink-2); backdrop-filter:none; -webkit-backdrop-filter:none;
padding-inline:12px}
.btn-quiet:hover{color:var(--ink); background:rgba(255,255,255,.05); box-shadow:none}
.btn-s{min-height:36px; padding:9px 16px; font-size:.88rem}
@media (pointer:coarse){ .btn-s{min-height:44px} }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
outline:2px solid var(--amber); outline-offset:3px; border-radius:6px}
.btn:focus-visible,.nav a:focus-visible{border-radius:var(--r-pill)}
/* Pfeil-Link: fuer Wege, die keine Knoepfe sein muessen. */
.go-link{display:inline-flex; align-items:center; gap:8px; font:600 .95rem/1.3 var(--sans);
color:var(--amber-ink); text-decoration:none; min-height:44px; padding:6px 0}
.go-link:hover{text-decoration:underline; text-underline-offset:5px}
.go-link .a{transition:transform var(--takt-2) var(--feder)}
.go-link:hover .a{transform:translateX(4px)}
/* ─── Kopf ────────────────────────────────────────────────────────────────
Das Zeichen links, rechts eine Glaskapsel mit den Wegen. Er steht unter
der Leiste im Fluss und scrollt mit: oben an der Kante haengt schon die
Leiste, zwei feste Dinge dort waeren eines zu viel. */
.head{display:flex; align-items:center; justify-content:space-between; gap:20px;
padding:26px 0 10px; position:relative; z-index:var(--z-head)}
.brand{display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); border-radius:10px}
.brand img{height:30px; width:auto; display:block}
.head .nav{display:flex; align-items:center; gap:2px; padding:5px; border-radius:var(--r-pill);
/* Dunkler Grund unter dem hellen Hauch: laeuft die Kapsel hinter
der Navigation durch, bleibt --ink-2 trotzdem ueber 4,5:1. */
background:linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)), rgba(9,9,10,.55);
backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08), var(--lift-1)}
.nav a{display:inline-flex; align-items:center; min-height:36px; padding:0 15px; border-radius:var(--r-pill);
color:var(--ink-2); text-decoration:none; font:500 .9rem/1 var(--sans);
transition:color var(--takt) var(--kurve), background var(--takt) var(--kurve)}
.nav a:hover{color:var(--ink); background:rgba(255,255,255,.06)}
@media (pointer:coarse){ .nav a{min-height:44px} }
.nav a[aria-current=page]{color:var(--ink); background:rgba(255,255,255,.1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.nav .nav-cta{color:var(--on-ivory); background:var(--ivory); font-weight:600; margin-left:4px}
.nav .nav-cta:hover{color:var(--on-ivory); background:#FFFFFF}
@media (max-width:640px){
.head{padding-top:18px}
.brand img{height:26px}
.head .nav a:not(.nav-cta){padding:0 11px; font-size:.86rem}
}
@media (max-width:460px){
.head{flex-wrap:wrap; gap:14px}
.head .nav{width:100%; justify-content:space-between}
}
/* ─── Fuss ────────────────────────────────────────────────────────────── */
.foot{margin-top:var(--gap); padding:56px 0 48px; position:relative}
.foot::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
background:linear-gradient(90deg, transparent, var(--line-3) 20%, var(--line-3) 80%, transparent)}
.foot-row{display:flex; justify-content:space-between; align-items:flex-start; gap:28px 48px; flex-wrap:wrap}
.foot .brand img{height:28px}
.foot-by{display:block; margin-top:14px; font:500 .72rem/1 var(--mono); letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-3)}
/* Keine feste Hoechstbreite: ab etwa 1280px passt die ganze Reihe in eine
Zeile. Darunter bricht sie um und steht rechtsbuendig unter sich, solange
das Zeichen daneben steht. */
.foot-links{display:flex; flex-wrap:wrap; gap:10px 28px}
@media (min-width:900px){ .foot-links{justify-content:flex-end} }
.foot a{color:var(--ink-2); text-decoration:none; font-size:.93rem}
.foot a:hover{color:var(--ink); text-decoration:underline}
.foot-mail{margin:36px 0 0; font-size:.88rem; color:var(--ink-3); max-width:none}
.foot-mail a{color:var(--ink-2)}
/* Touch-Ziele mindestens 44px. Das Zeichen wird 44px hoch, gibt die
zusaetzliche Hoehe aber ueber negative Raender wieder ab (30, 28 und auf
dem Telefon 26px Bildhoehe): nichts im Kopf oder Fuss verschiebt sich.
Die Fusslinks werden selbst 44px hoch; der Zeilenabstand faellt dafuer weg. */
@media (pointer:coarse){
.brand{min-height:44px; margin-block:-7px}
.foot .brand{margin-block:-8px}
.foot-links{row-gap:0}
.foot-links a{display:inline-flex; align-items:center; min-height:44px}
}
@media (pointer:coarse) and (max-width:640px){ .head .brand{margin-block:-9px} }
/* ─── Zustandsmarken ──────────────────────────────────────────────────── */
.pin{display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
padding:4px 11px; font:500 .76rem/1.3 var(--mono); letter-spacing:.03em;
background:rgba(255,255,255,.06); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line)}
.pin-ok,.pin.paid,.pin.live,.pin.done{background:rgba(95,214,138,.1); color:var(--ok); box-shadow:inset 0 0 0 1px rgba(95,214,138,.3)}
.pin-warn,.pin.exported,.pin.wait,.pin.new{background:var(--amber-soft); color:var(--amber-ink); box-shadow:inset 0 0 0 1px rgba(var(--amber-rgb),.35)}
.pin-bad,.pin.failed,.pin.off,.pin.stopped{background:rgba(255,123,110,.1); color:var(--bad); box-shadow:inset 0 0 0 1px rgba(255,123,110,.32)}
/* ─── Formulare ──────────────────────────────────────────────────────────
Beschriftung ueber dem Feld, Hilfe darunter klein, Fehler direkt unter
dem Feld. Das Feld ist eingelassen: dunkler als die Flaeche, auf der es
sitzt, mit einem Lichtsaum unten statt oben. */
.f{display:block; margin:0 0 22px}
.f > span{display:block; font:600 .88rem/1.4 var(--sans); color:var(--ink); margin-bottom:8px}
.f > span small{display:block; font:400 .82rem/1.45 var(--sans); color:var(--ink-3); margin-top:3px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=search],input[type=tel],textarea,select{
width:100%; min-height:48px; padding:12px 15px; border-radius:var(--r);
border:1px solid var(--line); color:var(--ink); background:rgba(0,0,0,.28);
box-shadow:inset 0 1px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05);
font:400 1rem/1.45 var(--sans);
transition:border-color var(--takt) var(--kurve), box-shadow var(--takt) var(--kurve), background var(--takt) var(--kurve);
}
select{appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
background-position:calc(100% - 20px) 52%, calc(100% - 15px) 52%;
background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
select option{background:var(--bg-3); color:var(--ink)}
input:hover,textarea:hover,select:hover{border-color:var(--line-3)}
.mono-in{font-family:var(--mono); letter-spacing:.05em}
textarea{resize:vertical; min-height:96px}
input::placeholder,textarea::placeholder{color:var(--ink-3); opacity:1}
/* Nur Textfelder tauschen den Umriss gegen Rand und Ring. Haken, Knoepfe,
Farbfeld und Regler behalten den Bernstein-Umriss darunter: ihr Rand
laesst sich nicht einfaerben, und ein Ring allein misst auf dem dunklen
Grund nur 1,4:1. */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):focus,
textarea:focus,select:focus{
/* Durchsichtiger Umriss statt outline:none: unsichtbar, solange Rand und
Ring zeigen, wo der Fokus ist. Im Kontrastmodus (forced-colors) faellt
der Ring weg, der Rand wird umgefaerbt, und dieser Umriss wird in der
Systemfarbe gezeichnet. */
outline:2px solid transparent; outline-offset:1px;
border-color:rgba(var(--amber-rgb),.75); background:rgba(0,0,0,.36);
box-shadow:inset 0 1px 3px rgba(0,0,0,.45), 0 0 0 4px rgba(var(--amber-rgb),.18)}
@media (forced-colors:active){
input:focus,textarea:focus,select:focus{outline:2px solid Highlight; outline-offset:1px}
}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,input[type=color]:focus-visible,
input[type=file]:focus-visible{
outline:2px solid var(--amber); outline-offset:3px}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:rgba(255,123,110,.7)}
input[type=checkbox],input[type=radio]{accent-color:var(--amber)}
/* ─── Regler ──────────────────────────────────────────────────────────
Eine Haarlinie als Bahn, links davon gefuellt (--f, von motion.js
gesetzt), und ein Griff wie eine kleine Perle aus Elfenbein. Beim
Anfassen waechst er und wird zu Glas. 44px hoch fuer die Touch-Regel,
sichtbar sind nur 3px Bahn und 20px Griff. */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0;
background:transparent; cursor:pointer; --f:50%}
input[type=range]::-webkit-slider-runnable-track{height:3px; border-radius:3px;
background:linear-gradient(to right, rgba(var(--amber-rgb),.9) 0, var(--ivory) var(--f), rgba(255,255,255,.14) var(--f), rgba(255,255,255,.14) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; margin-top:-8.5px;
border-radius:50%; border:0; background:radial-gradient(circle at 50% 30%, #FFFFFF, var(--ivory) 55%, var(--ivory-lo));
box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.55), 0 8px 18px -6px rgba(0,0,0,.7);
transition:transform var(--takt-2) var(--feder), box-shadow var(--takt) var(--kurve), background var(--takt) var(--kurve)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.28);
background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,.18) 60%, rgba(255,255,255,.08));
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25),
0 0 0 1px rgba(255,255,255,.6), 0 10px 22px -8px rgba(0,0,0,.8)}
input[type=range]:focus-visible{outline:0}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px 0 #fff, 0 0 0 2px var(--bg), 0 0 0 4px var(--amber), 0 2px 5px rgba(0,0,0,.55)}
input[type=range]::-moz-range-track{height:3px; border-radius:3px; background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-progress{height:3px; border-radius:3px; background:linear-gradient(90deg, rgba(var(--amber-rgb),.9), var(--ivory))}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; border:0;
background:radial-gradient(circle at 50% 30%, #FFFFFF, var(--ivory) 55%, var(--ivory-lo));
box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.55), 0 8px 18px -6px rgba(0,0,0,.7);
transition:transform var(--takt-2) var(--feder)}
input[type=range]:hover::-moz-range-thumb{transform:scale(1.1)}
input[type=range]:active::-moz-range-thumb{transform:scale(1.28)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--amber)}
.f-err{display:block; margin-top:8px; font-size:.86rem; color:var(--bad)}
.check,.bookcheck{display:flex; gap:12px; align-items:flex-start; margin:0 0 22px}
.bookcheck{margin-top:18px}
.check input,.bookcheck input{margin:3px 0 0; width:18px; height:18px; flex:none}
.check span,.bookcheck span{font-size:.9rem; color:var(--ink-2); line-height:1.55}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{padding:0; font:600 .88rem/1.4 var(--sans); color:var(--ink); margin-bottom:10px}
/* ─── Meldungen ──────────────────────────────────────────────────────── */
.msg{border-radius:var(--r); padding:15px 18px; font-size:.93rem; margin:0 0 22px;
border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink-2)}
.msg b{display:block; margin-bottom:4px; color:inherit}
.msg-err {border-color:rgba(255,123,110,.35); background:rgba(255,123,110,.08); color:#FFB3AA}
.msg-ok {border-color:rgba(95,214,138,.32); background:rgba(95,214,138,.08); color:#A8EEC0}
.msg-warn{border-color:rgba(var(--amber-rgb),.38); background:var(--amber-soft); color:#EFE3CC}
.msg a{color:inherit}
/* ─── Schluessel, Kennungen, Einmal-Anzeigen ─────────────────────────── */
.key{display:grid; gap:6px; padding:16px 18px; border-radius:var(--r);
background:rgba(0,0,0,.3); border:1px solid var(--line)}
.key b{font:500 .72rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.key .v{font:500 1.12rem/1.35 var(--mono); letter-spacing:.06em; word-break:break-all; color:var(--ink)}
/* ─── Zahlen ──────────────────────────────────────────────────────────────
Eine Reihe aus Kennzahlen. Die Zahl traegt, die Beschriftung darueber ist
klein; getrennt durch Haarlinien, nicht durch Kaesten. */
.figs{display:grid; gap:0; margin:0}
/* Die Spalten stehen in :where() (Spezifitaet 0): legt eine Seite ihre
eigenen Spalten fest, gewinnt sie immer. Ohne das bricht auto-fit eine
Reihe aus vier Zahlen zwischen 641 und 847px in 3 + 1 um, und die vierte
steht eingerueckt mit einer Haarlinie ins Leere.
Vier Zahlen: vier nebeneinander, 2 + 2 oder untereinander. Drei:
nebeneinander oder untereinander. Gemessen an der Breite der Reihe
selbst (100 %), nicht am Fenster: (800px - 100%) * 999 ist unter 800px
Reihenbreite gross und positiv, darueber negativ. */
:where(.figs){grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
:where(.figs:has(> :nth-child(4):last-child)){
grid-template-columns:repeat(auto-fit,minmax(max(24.9%, min(34%, (800px - 100%) * 999), min(100%, (400px - 100%) * 999)),1fr))}
:where(.figs:has(> :nth-child(3):last-child)){
grid-template-columns:repeat(auto-fit,minmax(max(33%, min(100%, (592px - 100%) * 999)),1fr))}
.figs > div{padding:26px 26px 28px 0; border-top:1px solid var(--line)}
.figs > div + div{padding-left:26px; box-shadow:-1px 0 0 var(--line-2)}
/* 2 + 2: die dritte beginnt eine Zeile, also ohne Linie und Einzug. Die
Fensterbreiten entsprechen einer Reihe ueber die volle Spalte (--col). */
@media (min-width:641px) and (max-width:847px){
:where(.figs:has(> :nth-child(4):last-child)) > div + div:nth-child(3){padding-left:0; box-shadow:none}
}
.figs dt{font:500 .72rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.figs dd{margin:14px 0 0; font:600 clamp(1.9rem,3vw,2.6rem)/1 var(--wide); font-stretch:108%;
letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums}
.figs dd small{display:block; margin-top:12px; font:400 .88rem/1.5 var(--sans); color:var(--ink-2); letter-spacing:0}
@media (max-width:640px){
.figs > div + div{padding-left:0; box-shadow:none}
}
.prog{height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin:14px 0 8px}
.prog i{display:block; width:0; height:100%; border-radius:inherit;
background:linear-gradient(90deg, var(--amber-lo), var(--ivory))}
.prog.is-ok i{background:var(--ok)}
.prog.is-off i{background:var(--ink-4)}
/* ─── Tabellen ────────────────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:.93rem}
th{text-align:left; padding:0 14px 10px; color:var(--ink-3);
font:500 .72rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
border-bottom:1px solid var(--line)}
td{padding:13px 14px; color:var(--ink-2); border-bottom:1px solid var(--line-2); vertical-align:top}
td:first-child,th:first-child{padding-left:0}
td:first-child{color:var(--ink)}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* ─── Code ────────────────────────────────────────────────────────────── */
pre{margin:0; overflow-x:auto; padding:18px 20px; border-radius:var(--r);
background:rgba(0,0,0,.4); border:1px solid var(--line); color:var(--ink-2);
font:400 .86rem/1.7 var(--mono)}
pre .c{color:var(--ink-3)}
pre .k{color:var(--amber-ink)}
pre .s{color:var(--ok)}
:not(pre) > code{background:rgba(255,255,255,.07); border:1px solid var(--line-2);
padding:1px 6px; border-radius:6px; color:var(--ink)}
/* ─── Nummerierte Schritte ────────────────────────────────────────────── */
.steps{list-style:none; margin:28px 0 0; padding:0; counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:32px 1fr;
gap:0 16px; padding:18px 0; border-bottom:1px solid var(--line-2)}
.steps li::before{content:counter(s); grid-row:span 2; width:30px; height:30px;
border-radius:50%; display:grid; place-items:center; color:var(--ink);
font:500 .78rem/1 var(--mono);
background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px var(--line)}
.steps > li > b{display:block; font:600 1rem/1.4 var(--sans); margin-bottom:4px}
.steps p{margin:0; color:var(--ink-2); font-size:.94rem; max-width:58ch}
.steps p b{font-weight:600; color:var(--ink)}
/* ─── Aufklappbares ───────────────────────────────────────────────────── */
details.more{margin:32px 0 0; border-top:1px solid var(--line)}
details.more > summary{
list-style:none; cursor:pointer; padding:18px 0 17px;
display:flex; align-items:center; gap:12px;
font:600 .95rem/1 var(--sans); color:var(--ink-2);
}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{
content:""; width:7px; height:7px; flex:none;
border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
transform:rotate(-45deg); transition:transform var(--takt-2) var(--feder);
}
details.more[open] > summary::before{transform:rotate(45deg)}
details.more > summary:hover,details.more[open] > summary{color:var(--ink)}
.more-in{padding:4px 0 28px}
/* ─── Neben der Kapsel ─────────────────────────────────────────────────
Steht die Kapsel rechts, nimmt der Text die linke Haelfte (.half), steht
sie links, die rechte (.half.half-r). Auf dem Telefon ganze Breite. */
.half{max-width:min(600px,52%)}
.half-r{margin-left:auto}
@media (max-width:820px){ .half{max-width:none} .half-r{margin-left:0} }
/* ─── Die Leiste als Nachbau ──────────────────────────────────────────────
Wo eine Seite die Leiste zeigt (Vorschau, Erklaerung), dieselben Klassen
wie oben an der Kante, nur ohne Schleife und in eigener Groesse. */
.spot.spot-demo{position:relative; z-index:3; height:30px; font-size:.8rem; gap:10px;
padding:0 14px; border-radius:0 0 16px 16px; cursor:default}
.spot.spot-demo .b{width:18px; height:18px; font-size:.62rem}
.spot.spot-demo .n{font-size:.8rem}
.spot.spot-demo.is-float{border-radius:var(--r-pill)}
/* ─── Kleine Beschriftung ueber einer einzelnen grossen Zahl ─────────── */
.cap{display:block; font:500 .72rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
/* ─── Testmodus-Hinweis beim Buchen ───────────────────────────────────── */
.todo{border-radius:var(--r); padding:15px 18px; font-size:.93rem; margin:0 0 22px;
border:1px solid rgba(var(--amber-rgb),.38); background:var(--amber-soft); color:#EFE3CC}
/* ─── Farbfeld ────────────────────────────────────────────────────────── */
input[type=color]{-webkit-appearance:none; appearance:none; width:48px; height:48px; padding:0;
border-radius:var(--r-pill); border:0; background:none; cursor:pointer;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.5)}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0; border-radius:var(--r-pill)}
input[type=color]::-moz-color-swatch{border:0; border-radius:var(--r-pill)}
/* ─── Tiefe beim Hereinkommen ─────────────────────────────────────────────
Ein Wrapper mit data-progress und .stand richtet seinen Inhalt auf, waehrend
er von unten ins Bild kommt. Auf dem Wrapper, nicht auf dem Element: dessen
transform gehoert dem Einblenden. */
.stand{transform-origin:50% 100%;
transform:perspective(1600px) rotateX(calc(max(0, .3 - var(--p,.5)) * 30deg))}
@media (prefers-reduced-motion:reduce){ .stand{transform:none} }
/* ─── Was private/lib selbst ausgibt ─────────────────────────────────────
founder_banner() (booking.php) und day_limit_banner() (app.php) schreiben
festes Markup. Es bekommt hier sein Material, damit es auf jeder Seite
gleich aussieht, egal wo es eingebunden wird. */
.founder,.daycap{position:relative; padding:20px 24px; border-radius:var(--r-lg);
background:linear-gradient(180deg, rgba(var(--amber-rgb),.10), rgba(var(--amber-rgb),.04));
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(var(--amber-rgb),.28)}
.daycap{background:rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px var(--line)}
.fk,.dk{margin:0 0 8px; font:500 .74rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--amber-ink)}
.dk{color:var(--ink-3)}
.fs,.ds{margin:0; font-size:.93rem; color:var(--ink-2)}
.founder h2,.daycap h2{font-size:var(--fs-panel); margin:0 0 8px}
.founder-line{font-size:.92rem; color:var(--ink-2)}
.founder-line b{color:var(--amber-ink)}
/* ─── Die grossen Aufrufe (.cta) ──────────────────────────────────────────
Nur fuer die zwei, drei Wege, um die es einer Seite geht (Kopf und
Schluss). Keine Kapsel wie die uebrigen Knoepfe, sondern eine Taste:
abgerundetes Rechteck mit einer Unterkante, die beim Druecken
verschwindet, und rechts ein eigener Knauf, in dem der Pfeil sitzt.
Get the app→
.cta-1 ist Elfenbein mit dunklem Knauf, .cta-2 Glas mit hellem Knauf. */
.cta{position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:20px;
min-height:58px; padding:7px 7px 7px 24px; border-radius:18px;
font:600 1rem/1 var(--sans); letter-spacing:-.012em; text-decoration:none; white-space:nowrap; cursor:pointer;
transition:transform var(--takt-2) var(--feder), box-shadow var(--takt) var(--kurve), background var(--takt) var(--kurve);
-webkit-tap-highlight-color:transparent; touch-action:manipulation}
.cta-k{flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
font:500 1.1rem/1 var(--sans);
transition:transform var(--takt-2) var(--feder), background var(--takt) var(--kurve)}
.cta:hover{transform:translateY(-2px)}
.cta:hover .cta-k{transform:translateX(3px)}
.cta:active{transform:translateY(1px) scale(.985); transition-duration:.08s}
.cta:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:18px}
.cta-1{color:var(--on-ivory);
background:linear-gradient(180deg, #FFFDF8, var(--ivory) 48%, var(--ivory-lo));
box-shadow:inset 0 1px 0 #fff, inset 0 -3px 0 rgba(22,20,15,.16),
0 0 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5), 0 16px 36px -16px rgba(0,0,0,.95)}
.cta-1 .cta-k{color:var(--ivory); background:linear-gradient(180deg, #2A2722, var(--on-ivory));
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.35)}
.cta-1:hover{background:linear-gradient(180deg, #FFFFFF, #FAF6EF 48%, #EAE3D7);
box-shadow:inset 0 1px 0 #fff, inset 0 -3px 0 rgba(22,20,15,.14),
0 0 0 1px rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.45), 0 22px 44px -18px rgba(0,0,0,.95)}
.cta-1:active{box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(22,20,15,.16), 0 0 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5)}
.cta-2{color:var(--ink); background:rgba(255,255,255,.045);
backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.14), 0 14px 32px -18px rgba(0,0,0,.9)}
.cta-2 .cta-k{color:var(--on-ivory); background:linear-gradient(180deg, #FFFDF8, var(--ivory-lo));
box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.4)}
.cta-2:hover{background:rgba(255,255,255,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.22), 0 20px 40px -18px rgba(0,0,0,.95)}
.cta-2:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.14)}
@media (max-width:420px){ .cta{gap:14px; padding-left:18px; min-height:54px} .cta-k{width:40px; height:40px} }
@media (prefers-reduced-transparency:reduce){ .cta-2{background:var(--bg-3) !important; backdrop-filter:none !important} }
/* ─── Hilfsklassen fuer Abstaende ─────────────────────────────────────── */
.u-mt15{margin-top:15px}
.u-mt20{margin-top:20px}
.u-mt40{margin-top:40px}
.acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
/* Fuer Bildschirmleser da, fuer das Auge nicht. */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0}
[hidden]{display:none !important}
/* ════════════════════════════════════════════════════════════════════════
RAUM UND BEWEGUNG
Drei Werkzeuge, alle aus assets/motion.js, alle abgeschaltet bei
prefers-reduced-motion:
.in / [data-reveal] kommt ins Bild: aus der Tiefe, unscharf nach scharf
[data-tilt] neigt sich zum Zeiger, mit Glanz
[data-progress] bekommt --p von 0 bis 1, waehrend es durchs Bild laeuft;
Seiten bauen daraus eigene Tiefenbewegungen
════════════════════════════════════════════════════════════════════════ */
.in,[data-reveal]{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
.js .in,.js [data-reveal]{opacity:0; transform:translate3d(0,26px,0) scale(.985); filter:blur(6px);
transition:opacity var(--takt-3) var(--kurve), transform var(--takt-3) var(--kurve), filter var(--takt-3) var(--kurve);
transition-delay:var(--d,0s)}
.js .in.seen,.js [data-reveal].seen{opacity:1; transform:none; filter:none}
/* Sicherung: ist motion.js nicht gelaufen (Klasse motion fehlt), kommt
alles nach drei Sekunden trotzdem herein. */
.js:not(.motion) .in,.js:not(.motion) [data-reveal]{animation:reveal-safety .6s var(--kurve) 3s forwards}
@keyframes reveal-safety{ to{opacity:1; transform:none; filter:none} }
}
.stage3d{perspective:1400px; perspective-origin:50% 30%}
[data-tilt]{transform-style:preserve-3d; will-change:transform;
transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform .6s var(--kurve)}
[data-tilt].is-tilting{transition:transform .12s linear}
/* Ein Element, das einblendet UND sich neigt: nach dem Einblenden gehoert
transform wieder der Neigung. Ohne diese Regel gewinnt .seen{transform:none}
(hoehere Spezifitaet), und die Flaeche neigt sich nie. */
.js [data-tilt].seen{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform .6s var(--kurve), opacity var(--takt-3) var(--kurve), filter var(--takt-3) var(--kurve)}
.js [data-tilt].seen.is-tilting{transition:transform .12s linear, opacity var(--takt-3) var(--kurve), filter var(--takt-3) var(--kurve)}
.solid{transform-style:preserve-3d; box-shadow:var(--contact), var(--lift-1)}
/* Korn, sehr schwach, nur auf festen Flaechen. */
.grain::after{
content:""; position:absolute; inset:0; pointer-events:none;
border-radius:inherit; opacity:.05; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.enter{animation:enter-in linear both; animation-timeline:view(); animation-range:entry 6% cover 28%}
@keyframes enter-in{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
*{animation-timeline:none !important}
[data-tilt]{transform:none !important}
}
/* ─── Die Szene ─────────────────────────────────────────────────────────
Die Leinwand aus assets/glass.js. Sie liegt hinter allem und faengt
keine Klicks. Ohne Bewegung scrollt sie mit dem Kopfbereich weg, statt
stehen zu bleiben, waehrend der Text unter ihr durchlaeuft. */
#scene{position:fixed; inset:0; z-index:var(--z-scene); pointer-events:none; overflow:hidden}
#scene canvas{display:block; width:100%; height:100%;
opacity:0; transition:opacity 1.2s var(--kurve)}
.has-scene #scene canvas{opacity:1}
.scene-still #scene{position:absolute; height:100vh}
/* Drucken, vor allem Impressum, Datenschutz und Bedingungen: schwarz auf
Weiss, ohne Leiste, Szene, Kopf und Fuss, ohne Glas und Schatten. */
@media print{
#scene,.rail,.head,.foot,.skip,.filterdefs,nav{display:none !important}
body{padding-top:0; background:#fff !important; color:#000}
*{color:#000 !important; background:transparent !important; box-shadow:none !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
text-shadow:none !important; opacity:1 !important; transform:none !important; filter:none !important}
/* * trifft ::before/::after nicht. Schrittnummern, Markierungen und das
"No"/"Yes" der Datenschutz-Liste kommen aus Pseudo-Elementen und
stuenden sonst hell auf weissem Papier. */
*::before,*::after{color:#000 !important; text-shadow:none !important; box-shadow:none !important}
.steps li::before{box-shadow:0 0 0 1px #000 !important}
a{text-decoration:underline}
.glass::before,.glass::after,.float::before,.float::after{display:none}
.sec{padding-block:18pt}
}
/* ════════════════════════════════════════════════════════════════════════
DIE LEISTE
Das Produkt selbst, an der oberen Kante des Fensters: eine dunkle Kapsel
aus Glas, die nur in die Breite waechst. Markup und Schleife stehen in
inc/bar.php.
════════════════════════════════════════════════════════════════════════ */
.filterdefs{position:absolute; width:0; height:0; overflow:hidden}
.rail{position:fixed; top:0; left:0; right:0; height:var(--rail-h); z-index:var(--z-rail);
display:flex; align-items:center; justify-content:center;
pointer-events:none; perspective:900px; perspective-origin:50% 0%}
.spot{
pointer-events:auto; cursor:pointer;
display:inline-flex; align-items:center; gap:11px; height:var(--rail-h);
max-width:min(94vw, 760px); padding:0 18px; white-space:nowrap;
font-size:.86rem; color:var(--ink-2);
border-radius:0 0 20px 20px;
background:linear-gradient(180deg, var(--spot-top), var(--spot-bot));
backdrop-filter:blur(18px) saturate(170%);
-webkit-backdrop-filter:blur(18px) saturate(170%);
overflow:hidden;
box-shadow:
inset 0 -1px 0 rgba(255,255,255,.14),
inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(255,255,255,.05),
0 0 0 1px rgba(255,255,255,.06),
0 18px 40px -18px rgba(0,0,0,.9);
/* KEINE Breiten-Transition. Die Breite treibt die Schleife in
inc/bar.php mit denselben Konstanten wie main.swift. */
transition:opacity .4s ease;
}
@supports (backdrop-filter: url(#refract)){
.spot{background:linear-gradient(180deg, rgba(20,20,22,.55), rgba(10,10,11,.74));
backdrop-filter:blur(2px) url(#refract) saturate(1.4)}
}
.spot > *{position:relative; z-index:1}
.spot.out{opacity:0}
.spot .b{width:20px; height:20px; flex:none; border-radius:50%;
display:grid; place-items:center; color:var(--on-amber);
font:800 .68rem/1 var(--wide); background:var(--amber)}
.spot .n{font:700 .85rem/1 var(--wide); font-stretch:108%; letter-spacing:-.005em; color:var(--ink)}
.spot .t{color:var(--ink-2)}
.spot .go{font:600 .75rem/1 var(--sans); color:var(--on-amber);
padding:6px 12px; border-radius:var(--r-pill); background:var(--amber)}
@media (max-width:820px){ .spot .t{display:none} }
.spot .eq{display:inline-flex; align-items:flex-end; gap:2.5px; height:13px}
.spot .eq i{width:3px; border-radius:2px; background:var(--amber)}
.spot .eq i:nth-child(1){height:5px} .spot .eq i:nth-child(2){height:12px}
.spot .eq i:nth-child(3){height:8px} .spot .eq i:nth-child(4){height:13px}
@media (prefers-reduced-motion:no-preference){
.spot .eq i{animation:eq 1.1s ease-in-out infinite alternate; transform-origin:bottom}
.spot .eq i:nth-child(2){animation-delay:-.3s} .spot .eq i:nth-child(3){animation-delay:-.6s}
.spot .eq i:nth-child(4){animation-delay:-.9s}
@keyframes eq{ from{transform:scaleY(.45)} to{transform:scaleY(1)} }
}
.spot .sep{color:var(--ink-4)}
.spot .body{color:var(--ink-2)}
.spot .x{color:var(--ink-3); font-size:.95rem; line-height:1}
.spot .body,.spot .go,.spot .x{display:none}
.spot.js-bar .body,.spot.js-bar .go,.spot.js-bar .x{display:inline-flex}
/* Auf dem Telefon faellt der Satz weg: aufgeklappt bleiben Zeichen, Marke,
Knopf und x, und das passt in die Kapsel. MUSS nach der Regel darueber
stehen (gleiche Spezifitaet, die spaetere gewinnt) und gilt fuer die
Messkopie mit, sonst misst inc/bar.php die breite Fassung mit Satz. */
@media (max-width:560px){ .spot .body,.spot.js-bar .body,.spot-ghost.js-bar .body{display:none} }
.spot-ghost{position:fixed; top:0; left:0; visibility:hidden; pointer-events:none;
white-space:nowrap; z-index:-1}
/* Die Leiste ist ein