@import url('tokens.css');

/* Frevent. Stil D, monochrom, bewusst NUR dunkel.
   Begruendung: Der Aufmacher lebt von Bewegtbild auf dunklem Grund. Eine helle Fassung
   derselben Seite waere nicht dieselbe Seite, sie waere eine schwaechere. Deshalb hier kein
   Hell-Dunkel-Umschalter, sondern eine Entscheidung. Alle Farben sind trotzdem ausdruecklich
   gesetzt, damit nichts vom Grund des Betrachters durchschlaegt. */
:root{
  /* Zuordnung auf die Design-Tokens. Die Farbwerte selbst stehen NUR in tokens.css, das
     seinerseits mit mobile/src/theme/theme.ts uebereinstimmen muss. Wer hier einen Hexwert
     hinschreibt, hat wieder zwei Wahrheiten. */
  --bg:var(--fr-bg-base); --sunken:var(--fr-bg-sunken); --surface:var(--fr-surface-1);
  --raised:var(--fr-surface-raised);
  --line:var(--fr-line); --line-strong:var(--fr-line-strong);
  --t1:var(--fr-text-1); --t2:var(--fr-text-2); --t3:var(--fr-text-3);
  --accent:var(--fr-accent); --on-accent:var(--fr-text-on-accent);
  --ok:var(--fr-confirmed-fg); --warn:var(--fr-pending-fg); --bad:var(--fr-declined-fg);
  --sans:var(--fr-font-sans); --mono:var(--fr-font-mono); --brand:var(--fr-font-brand);
  --pad:clamp(20px,5vw,72px);
  --max:1520px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
p{margin:0 0 1.1em}p:last-child{margin-bottom:0}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--t3);margin:0 0 18px}
.lede{color:var(--t2);font-size:clamp(17px,1.4vw,19px);line-height:1.66;max-width:56ch}

/* Kopfzeile */
header{position:sticky;top:0;z-index:50;background:rgba(14,16,19,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--t1);flex:none}
.brand b{font-family:var(--brand);font-weight:400;font-size:17px;letter-spacing:.28em;
  text-transform:uppercase;padding-left:.28em}
nav{display:flex;gap:30px;font-size:14.5px;margin-left:auto}
nav a{color:var(--t2);text-decoration:none;transition:color .2s}
nav a:hover{color:var(--t1)}
@media(max-width:900px){nav{display:none}}
/* Welche Seite gerade offen ist. Ohne diese Markierung sehen die beiden Unterseiten im
   Menue aus wie die Startseite, und man weiss nicht, wo man gelandet ist. */
nav a[aria-current="page"]{color:var(--t1)}
nav a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--accent);
  margin-top:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;
  border:1px solid var(--line-strong);color:var(--t1);background:transparent;transition:.2s;
  white-space:nowrap;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#B4C6E8;border-color:#B4C6E8;color:var(--on-accent)}

/* Aufmacher */
.hero{padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1fr minmax(380px,520px);gap:clamp(32px,6vw,112px);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:44px}}
h1{font-size:clamp(42px,5.2vw,86px);line-height:1.02;letter-spacing:-.035em;
  max-width:13ch;margin-bottom:28px}
.hero .lede{margin-bottom:32px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.fineprint{color:var(--t3);font-size:13.5px;max-width:46ch;margin:0}

/* Das schmale Wartelisten-Feld im Aufmacher. Es ersetzt den Knopf, der nur ans Seitenende
   sprang. Das grosse Formular unten bleibt: Wer die ganze Seite liest, soll am Ende nicht
   wieder nach oben muessen. */
.schnell{max-width:520px}
.schnell .seg{margin-bottom:12px}
.schnell .seg .btn{padding-left:14px;padding-right:14px;font-size:14px}
/* Adresse und Stadt nebeneinander, der Knopf darunter. Drei Dinge in einer Zeile waeren
   im Kasten der Unterseiten (420px) zu eng: Die Adresse waere beim Tippen nicht mehr
   lesbar, und genau die muss stimmen. */
.schnell-zeile{display:flex;gap:9px}
.schnell-zeile input{margin-bottom:0;min-width:0}
.schnell-zeile input[type="email"]{flex:1.6}
.schnell-zeile input[name="stadt"]{flex:1}
/* Das Haekchen sitzt zwischen Feldern und Knopf und ist kompakter als im grossen
   Formular: Es kostet eine Zeile, sonst bliebe die Neuigkeiten-Liste leer, weil die
   meisten oben abschicken und nicht unten. Nicht vorbelegt, ein vorbelegtes Haekchen
   ist keine Einwilligung. */
/* Doppelte Klasse mit Absicht: Die allgemeine Regel .haken steht weiter unten und hat
   bis zum 15.09. diesen Abstand mit margin-top:-4px ueberschrieben. Das Haekchen klebte
   dadurch am Eingabefeld, auf allen fuenf Seiten. */
.haken.haken-schmal{margin:16px 0 0;font-size:13.5px;align-items:center}
.schnell-knopf{width:100%;margin-top:12px}
@media(max-width:460px){
  /* Darunter reicht auch fuer zwei Felder die Breite nicht mehr. */
  .schnell-zeile{flex-direction:column}
}
.schnell .meldung{min-height:0}
.schnell .meldung:empty{margin:0}
.schnell .fineprint{margin-top:14px;max-width:52ch}
/* Nur fuer Vorlesesoftware. Das Feld traegt einen Platzhalter, aber ein Platzhalter ist
   keine Beschriftung: Er verschwindet beim Tippen. */
.nur-vorleser{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Kopf der beiden Unterseiten. Kein zweiter Aufmacher mit Kalender: Den hat die
   Startseite, und wer hier ankommt, hat ihn gesehen. Hier steht nur, fuer wen die Seite
   ist und was sie verspricht. */
.kopf{position:relative;z-index:0;padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(40px,5vw,64px)}
.kopf > *:not(.punktfeld){position:relative;z-index:1}
.kopf h1{max-width:15ch}
.kopf .lede{margin-bottom:30px}
/* Zwei Spalten: links, worum es geht, rechts der Eintrag in die Warteliste. Untereinander
   stand die Anmeldung unter drei Absaetzen Text und war auf einem breiten Bildschirm nur
   noch Fussnote. */
.kopf-grid{display:grid;grid-template-columns:1.25fr minmax(320px,420px);
  gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:960px){.kopf-grid{grid-template-columns:1fr;gap:40px}}
.anmeldung{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,32px)}
.anmeldung h2{font-size:clamp(20px,1.8vw,25px);line-height:1.2;margin-bottom:16px;max-width:20ch}
.anmeldung .schnell{max-width:none}
.anmeldung .fineprint{max-width:none}

/* Verweis von der Startseite auf die Unterseite. Steht am Ende des jeweiligen Abschnitts,
   damit man erst liest, worum es geht, und dann weitergehen kann. */
.weiter{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;
  padding-top:28px;border-top:1px solid var(--line)}
.weiter p{color:var(--t3);font-size:14.5px;margin:0;max-width:46ch}

/* Kalender-Vorschau: das Produkt zeigen statt beschreiben */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(18px,2vw,26px);box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.demo-top strong{font-size:16px;font-weight:600}
.demo-top span{font-family:var(--mono);font-size:11px;color:var(--t3)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;padding:5px 11px;
  border-radius:999px;border:1px solid var(--line-strong);color:var(--t3)}
.chip.on{border-color:var(--accent);color:var(--accent)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 4px}
.cal .dow{font-family:var(--mono);font-size:10px;color:var(--t3);text-align:center;padding-bottom:8px}
.day{text-align:center;padding:7px 2px;border-radius:8px;border:1px solid transparent}
.day em{display:block;font-style:normal;font-size:13.5px;font-variant-numeric:tabular-nums}
.day i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--accent);margin-top:2px}
.day.sel{border-color:var(--accent);background:rgba(157,180,222,.07)}
.demo-list{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
/* Titel im nachgebauten Handy-Bild. Kein h4 mehr: Es ist ein Bild der App, keine
   Gliederung der Seite, und das h4 uebersprang eine Ebene (Lighthouse, 15.09.). */
.demo-list .demo-titel{margin:0 0 12px;font-size:14.5px;font-weight:600;color:var(--t1)}
.row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.row:last-of-type{border-bottom:0}
.row b{font-weight:400;flex:1}
.row code{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 7px;
  border-radius:5px;border:1px solid var(--line-strong);color:var(--t2)}
.row span{font-family:var(--mono);font-size:11px;color:var(--t3);width:46px;text-align:right}
.demo-note{margin-top:14px;font-size:12px;color:var(--t3);line-height:1.55}

/* Bildbaender, volle Breite. Die Regieanweisung steht drin, damit klar ist, was hier hin soll. */
.band{position:relative;margin:clamp(64px,8vw,110px) 0;background:var(--sunken);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:clamp(280px,42vw,520px);display:grid;place-items:center;text-align:center;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;background-position:center}
.band::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 0%,var(--bg) 82%);pointer-events:none}
/* Zwei Baender direkt hintereinander sollen wie eine Flaeche lesen. Ohne die zweite Zeile
   bleibt der Aussenabstand des oberen Bandes stehen, und dazwischen blitzt der Seitengrund
   durch. Uebrig bleibt genau eine Trennlinie. */
.band + .band{margin-top:0;border-top:0}
.band:has(+ .band){margin-bottom:0}
.band-in{position:relative;z-index:1;max-width:52ch;padding:40px var(--pad)}
.band-in p{color:var(--t3);font-size:14.5px;line-height:1.6}
.band-in .eyebrow{color:var(--t2)}

/* Abschnitte */
section{padding-top:clamp(64px,8vw,116px);padding-bottom:clamp(64px,8vw,116px)}
h2{font-size:clamp(30px,3.6vw,58px);line-height:1.06;letter-spacing:-.03em;max-width:17ch;
  margin-bottom:26px}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,88px);align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:32px}}
.pull{border-left:2px solid var(--accent);padding-left:22px;font-size:clamp(19px,1.9vw,25px);
  line-height:1.36;letter-spacing:-.015em;color:var(--t1);max-width:24ch}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:56px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.st{padding:22px 22px 0 0;border-top:1px solid var(--line-strong)}
.st .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em;margin-bottom:12px}
.st h3{font-size:17px;margin-bottom:8px;font-weight:600}
.st p{color:var(--t2);font-size:14.5px;line-height:1.55;margin:0}

/* Merkmalslisten */
.feat{margin-top:44px;border-top:1px solid var(--line);max-width:1180px}
.f{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(16px,4vw,56px);
  padding:26px 0;border-bottom:1px solid var(--line)}
@media(max-width:760px){.f{grid-template-columns:1fr;gap:6px}}
.f h3{font-size:17px;font-weight:600}
.f p{color:var(--t2);font-size:15.5px;margin:0;max-width:62ch}
.pill{display:inline-flex;align-items:baseline;gap:11px;padding:9px 18px;border-radius:999px;
  border:1px solid var(--line-strong);margin-bottom:26px}
.pill b{font-family:var(--mono);font-size:15px;color:var(--accent)}
.pill span{font-size:14px;color:var(--t2)}

/* Nachschlageseite: Frage links, Antwort rechts. Dieselbe Aufteilung wie die
   Merkmalslisten, nur dass links eine Frage steht und darunter das Kuerzel, unter dem das
   Gewerk in der Branche laeuft. */
.glossar .f h3{font-size:18px;line-height:1.3;max-width:22ch}
.glossar .kuerzel{margin:10px 0 0}
.glossar .kuerzel code{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  color:var(--accent);border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:4px 10px}
.glossar .f p{margin-bottom:.9em}
.glossar .f p:last-child{margin-bottom:0}

/* Gewerke */
.gew{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.g{display:inline-flex;align-items:baseline;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface)}
.g code{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--accent)}
.g span{font-size:14px;color:var(--t2)}

/* Preis */
.preis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:52px;align-items:start}
@media(max-width:900px){.preis{grid-template-columns:1fr}}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,3vw,36px)}
.zahl{font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.04em;font-weight:600;margin-bottom:4px}
.zahl small{font-size:16px;font-weight:400;color:var(--t2);letter-spacing:0}
.karte .sub{color:var(--t2);font-size:14.5px;margin-bottom:28px}
.karte .f{border-bottom:1px solid var(--line);padding:20px 0;grid-template-columns:1fr}
.karte .f:last-child{border-bottom:0;padding-bottom:0}
.gruender{margin-top:32px;border:1px solid var(--line-strong);border-radius:16px;
  padding:clamp(22px,3vw,32px);display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap}
.gruender h3{font-size:19px;margin-bottom:6px}
.gruender p{color:var(--t2);font-size:14.5px;margin:0;max-width:52ch}

/* Grenzen */
.grenzen{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,72px);margin-top:48px;max-width:1280px}
@media(max-width:820px){.grenzen{grid-template-columns:1fr}}
.gr{padding:24px 0;border-top:1px solid var(--line)}
.gr h3{font-size:16.5px;margin-bottom:6px}
.gr p{color:var(--t2);font-size:14.5px;margin:0}

/* Kennzahlen */
.fakten{border-top:1px solid var(--line)}
.fk{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.fk dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.fk dd{margin:0;font-family:var(--mono);font-size:13.5px;color:var(--t1);text-align:right}

/* Fragen */
.faq{margin-top:48px;border-top:1px solid var(--line);max-width:1000px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 0;font-size:17px;font-weight:500;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--t3);flex:none;
  transition:transform .2s}
details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
details p{color:var(--t2);font-size:15.5px;padding-bottom:24px;max-width:70ch;margin:0}

/* Formulare */
.forms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.forms{grid-template-columns:1fr}}
label{display:block;font-size:14px;color:var(--t2);margin-bottom:7px}
input,textarea{width:100%;background:var(--sunken);border:1px solid var(--line-strong);
  border-radius:10px;padding:13px 15px;color:var(--t1);font-family:inherit;font-size:15.5px;
  margin-bottom:18px}
input::placeholder,textarea::placeholder{color:var(--t3)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.seg .btn{width:100%}
.hinweis{color:var(--t3);font-size:13px;margin:0 0 18px;line-height:1.55}

/* Einwilligung fuer Neuigkeiten. Bewusst NICHT vorbelegt: Ein vorbelegtes Haekchen ist
   keine Einwilligung, und die Warteliste selbst braucht es ohnehin nicht. */
.haken{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;
  font-size:14px;color:var(--t2);line-height:1.5;cursor:pointer}
/* 22px statt 16 bis 18: Auf dem Handy war das Kaestchen kleiner als ein Finger trifft
   (Lighthouse, Tippflaeche, 15.09.). Die ganze Zeile ist ohnehin anklickbar, das Label
   umschliesst das Feld. */
.haken input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}

/* Honigtopf: fuer Menschen unsichtbar, fuer viele Bots verlockend. Nicht display:none,
   das ueberspringen manche Bots gezielt. */
.topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.meldung{margin:14px 0 0;font-size:14px;line-height:1.5;min-height:21px}
.meldung.ok{color:var(--ok)}
.meldung.fehler{color:var(--warn)}

/* Offene Stellen sichtbar machen */
.offen{border:1px dashed var(--warn);border-radius:12px;padding:18px 20px;margin-top:32px;
  color:var(--t2);font-size:14.5px;line-height:1.6;max-width:72ch}
.offen b{color:var(--warn);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-bottom:8px}
.luecke{display:inline-block;border:1px dashed var(--warn);border-radius:6px;padding:0 8px;
  color:var(--warn);font-family:var(--mono);font-size:11.5px}

footer{border-top:1px solid var(--line);padding-top:56px;padding-bottom:64px;margin-top:clamp(64px,8vw,110px)}
.foot{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,6vw,72px)}
@media(max-width:820px){.foot{grid-template-columns:1fr;gap:36px}}
.foot .brand b{font-size:15px}
.foot p{color:var(--t3);font-size:13.5px;line-height:1.65;max-width:56ch}
.foot nav{display:flex;gap:26px;margin:0;flex-wrap:wrap}
.foot nav a{color:var(--t2);font-size:14px}
address{font-style:normal;color:var(--t3);font-size:13.5px;line-height:1.75}

/* Punktfeld als Hintergrundtextur.
   Ein Jahr Verfuegbarkeit, jede Zeile ein Monat, jeder Punkt ein Tag, hell heisst
   freigegeben. Stand zuerst als eigener Abschnitt auf der Seite und wirkte dort wie ein
   Diagramm, das erklaert werden will. Als Textur sagt es dasselbe, ohne sich zu erklaeren.
   Deshalb sehr niedrige Deckkraft und ein Verlauf nach unten: Es soll auffallen, wenn man
   hinsieht, und verschwinden, wenn man liest. */
.punktfeld{position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;
  pointer-events:none;z-index:0;display:flex;flex-direction:column;gap:clamp(5px,.7vw,9px);
  /* Keine Polsterung: Bis zum 13.09.2026 standen hier 40px links und rechts, und damit
     blieb an beiden Raendern ein Streifen frei. Ein Band, das vor dem Rand aufhoert, sieht
     aus wie ein Kasten, nicht wie eine Textur. */
  padding:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 46%,transparent 88%)}
.punktfeld .m{display:grid;gap:clamp(4px,.55vw,7px);grid-auto-flow:column;grid-auto-columns:1fr}
.punktfeld i{display:block;aspect-ratio:1;border-radius:50%;background:var(--line-strong);
  opacity:.34}
.punktfeld i.frei{background:var(--accent);opacity:.2}
.punktfeld i.leer{opacity:0}
/* Im Aufmacher darf es etwas kraeftiger sein, es traegt dort die obere Seitenhaelfte. */
.hero{position:relative;z-index:0}
.hero > *:not(.punktfeld){position:relative;z-index:1}
.hero .punktfeld i{opacity:.4}
.hero .punktfeld i.frei{opacity:.26}
/* Die Gewerkeliste steht sonst auf einer leeren Flaeche: Text links, rechts nichts. Das
   Punktfeld nimmt die rechte Haelfte mit und knuepft die Liste optisch an den Aufmacher,
   wo dieselbe Textur schon einmal stand. Schwaecher als dort, hier liest man. */
#gewerke{position:relative;z-index:0}
#gewerke > *:not(.punktfeld){position:relative;z-index:1}
/* Beidseitig weich: Im Aufmacher darf das Feld oben hart ansetzen, dort ist der Seitenrand.
   Mitten im Text waere dieselbe Kante ein Balken, der wie ein eigener Abschnitt aussieht. */
#gewerke .punktfeld{top:clamp(16px,3vw,48px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,rgba(0,0,0,.5) 64%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,rgba(0,0,0,.5) 64%,transparent 100%)}
#gewerke .punktfeld i{opacity:.26}
#gewerke .punktfeld i.frei{opacity:.16}
#gewerke .punktfeld i.leer{opacity:0}

/* Im Grundsatz-Band nur noch als Ahnung, der Satz muss der Held bleiben. */
.band.satz{position:relative;overflow:hidden}
.band.satz > *:not(.punktfeld){position:relative;z-index:1}
.band.satz .punktfeld{top:auto;bottom:0;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 82%);
  mask-image:linear-gradient(to top,#000 0%,transparent 82%)}
.band.satz .punktfeld i{opacity:.2}
.band.satz .punktfeld i.frei{opacity:.13}
@media(prefers-reduced-motion:no-preference){
  .punktfeld i{opacity:0;transition:opacity .9s ease}
  .punktfeld.an i{opacity:.34}
  .punktfeld.an i.frei{opacity:.2}
  .punktfeld.an i.leer{opacity:0}
  .hero .punktfeld.an i{opacity:.4}
  .hero .punktfeld.an i.frei{opacity:.26}
  #gewerke .punktfeld.an i{opacity:.26}
  #gewerke .punktfeld.an i.frei{opacity:.16}
  #gewerke .punktfeld.an i.leer{opacity:0}
  .band.satz .punktfeld.an i{opacity:.2}
  .band.satz .punktfeld.an i.frei{opacity:.13}
}

/* Eigene Seiten fuer Impressum, Datenschutz und AGB. Auf frevent.app werden daraus echte
   Dateien, hier sind es Ansichten, damit sich die Fussnoten-Links anklicken lassen. */
.seite{display:none;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
body.rechtsseite main,body.rechtsseite>footer .foot p:first-of-type{display:none}
body.rechtsseite .seite.an{display:block}
.zurueck{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t3);text-decoration:none;margin-bottom:28px}
.zurueck:hover{color:var(--t1)}
.seite h1{font-size:clamp(30px,3.6vw,46px);max-width:20ch;margin-bottom:28px}
.seite h3{font-size:17px;margin:32px 0 10px}
/* Zweite Ebene fuer lange Rechtstexte (Datenschutz: Webseite, App, beide). */
.seite h2{font-size:clamp(22px,2.4vw,27px);margin:56px 0 4px}
.seite p,.seite li{color:var(--t2);font-size:15.5px;max-width:70ch}
.seite ul{padding-left:20px}
.seite li{margin-bottom:8px}

/* Typografisches Band statt Foto. Ein ruhiger Satz auf leerem Grund ist die billigste und
   zugleich teuerste Art, Luft zwischen zwei Kapitel zu bringen. Braucht kein Bildmaterial und
   behauptet nichts, was wir nicht sind. */
.band.satz{background-image:none;min-height:0;padding:clamp(64px,8vw,112px) 0;
  background:var(--sunken)}
.band.satz::after{display:none}
.band-in p.grosser{font-size:clamp(26px,3.9vw,50px);line-height:1.16;letter-spacing:-.03em;
  color:var(--t1);font-weight:600;max-width:none;margin:0}
/* Ein Satz unter dem Merksatz. Drei Woerter allein haengen in der Luft, und das Band
   uebergibt direkt an den Preis: Hier steht, warum der Satz kein Werbespruch ist. */
.band-in p.darunter{margin:22px auto 0;font-size:16px;line-height:1.6;color:var(--t2);
  max-width:44ch}

/* Echter Bildschirm aus der App. Kein Stimmungsbild, sondern das Produkt. Das Bild steckt als
   Datei-URI in der Seite, weil eine Artefaktseite keine Bilder von fremden Servern laden darf. */
.band.geraet{background-image:none;min-height:0;padding:clamp(56px,8vw,104px) 0;background:var(--sunken)}
.band.geraet::after{display:none}
.geraet-in{display:grid;grid-template-columns:1fr minmax(260px,320px);gap:clamp(32px,6vw,80px);
  align-items:center;max-width:var(--max);margin:0 auto;padding:0 var(--pad);text-align:left}
@media(max-width:820px){.geraet-in{grid-template-columns:1fr;gap:36px;justify-items:start}}
.geraet-in h2{margin-bottom:20px}
.geraet-in p{color:var(--t2);font-size:16px;max-width:52ch}
.rahmen{border:1px solid var(--line-strong);border-radius:30px;padding:9px;background:var(--bg);
  box-shadow:0 40px 80px -40px rgba(0,0,0,1);justify-self:center}
.rahmen img{display:block;width:100%;height:auto;border-radius:22px}
.rahmen{max-width:320px;width:100%}

/* Auf einer eigenen Datei gibt es nichts zu verstecken, das Anker-Umschalten entfaellt. */
.seite.nur{display:block}

/* Zwei Seiten nebeneinander: Problem und Ablauf je Marktseite.
   Aus Nadines Durchgang vom 12.09.: Beide Seiten sollen ihren eigenen Schmerz an eigener
   Stelle sehen, statt ihn aus einem gemeinsamen Absatz herauszulesen. */
.seiten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:44px}
@media(max-width:860px){.seiten{grid-template-columns:1fr;gap:36px}}
.marktseite h3{font-size:15px;font-family:var(--mono);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid var(--line-strong)}
.marktseite p{color:var(--t2);font-size:15.5px;line-height:1.65;margin:0 0 14px;max-width:46ch}
.marktseite p:last-child{margin-bottom:0}
/* Der Merksatz unter den beiden Spalten. Er stand frueher in der rechten Spalte des
   .two-Rasters; jetzt schliesst er den Abschnitt ab und braucht eigenen Abstand, sonst
   klebt er an der linken Spalte und laesst rechts ein Loch. */
.seiten + .pull{margin-top:clamp(32px,4vw,52px);max-width:34ch}

/* Die nummerierten Schritte je Seite. Zahl aus dem Zaehler, damit beim Umsortieren
   niemand vergisst, die Ziffern nachzuziehen. */
.schritte{list-style:none;counter-reset:s;margin:0;padding:0}
.schritte li{counter-increment:s;position:relative;padding:14px 0 14px 42px;
  border-bottom:1px solid var(--line);color:var(--t2);font-size:15.5px;line-height:1.6}
.schritte li:last-child{border-bottom:0}
.schritte li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;
  font-family:var(--mono);font-size:11.5px;color:var(--t3);letter-spacing:.06em}
.schritte b{display:block;color:var(--t1);font-weight:600;font-size:16px;margin-bottom:2px}

/* Crew. Klick. Show. als Dreiklang unter der Ueberschrift. */
.dreiklang{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px);
  margin-top:44px}
@media(max-width:760px){.dreiklang{grid-template-columns:1fr;gap:26px}}
.takt{border-top:1px solid var(--line-strong);padding-top:18px}
.takt .wort{font-family:var(--brand);font-size:clamp(26px,3.4vw,34px);line-height:1;
  letter-spacing:-.01em;color:var(--t1);margin:0 0 12px}
.takt p{color:var(--t2);font-size:15.5px;line-height:1.6;margin:0;max-width:40ch}

/* Die beiden Ablauf-Spalten sind zwei Bereiche, keine zwei Absaetze. Aus Nadines
   Durchgang: "Die Areas muessen getrennt sein." Ein Abstand allein reicht dafuer nicht,
   auf breiten Schirmen laufen zwei Spalten sonst als eine Flaeche zusammen. */
.seiten-schritte{gap:0}
.seiten-schritte .marktseite{padding:0 clamp(20px,3vw,44px)}
.seiten-schritte .marktseite:first-child{padding-left:0}
.seiten-schritte .marktseite:last-child{padding-right:0;border-left:1px solid var(--line-strong)}
@media(max-width:860px){
  .seiten-schritte .marktseite{padding:0}
  .seiten-schritte .marktseite:last-child{border-left:0;border-top:1px solid var(--line-strong);
    padding-top:32px;margin-top:8px}
}

/* Das Dreiklang-Band. Es traegt denselben gesenkten Grund wie der Leitsatz weiter unten,
   damit die Seite einen erkennbaren Rhythmus hat: heller Abschnitt, dunkles Band. */
.dreiklang-band{position:relative;overflow:hidden}
.dreiklang-band > *:not(.punktfeld){position:relative;z-index:1}
/* .band zentriert seinen Inhalt (das will der Leitsatz weiter unten so). Hier laufen
   drei Textspalten, die linksbuendig gelesen werden muessen. */
.dreiklang-band{text-align:left;place-items:stretch;min-height:0}
.dreiklang-band .band-in{max-width:var(--max);width:100%;margin:0 auto;
  padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.dreiklang-band .grosser{margin:10px 0 0}
.dreiklang-band .dreiklang{margin-top:clamp(32px,4vw,52px)}
.dreiklang-band .takt p:not(.wort){color:var(--t2)}

/* Die Gegenueberstellung auf der Startseite. Zwei Karten nebeneinander, jede mit vier
   Punkten und einem Weg nach unten. Sie ersetzt seit dem 13.09. zwei volle
   Merkmalslisten: Wer noch nicht weiss, auf welcher Seite er steht, liest keine dreizehn
   Karten, er sucht die Abzweigung. */
/* Kein align-items:start: Beide Kaesten sollen gleich hoch sein, auch wenn eine
   Ueberschrift kuerzer ist als die andere. Die Punkteliste dehnt sich (flex:1) und
   schiebt den Knopf in beiden Kaesten auf dieselbe Grundlinie. */
.seiten-karten .marktseite{background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.seiten-karten .marktseite h3{color:var(--t3);margin-bottom:14px}
/* 23ch, damit beide Ueberschriften auf zwei Zeilen kommen. Bei 16ch brach die linke auf
   drei und die rechte auf zwei, und die Kaesten sahen ungleich aus, bevor sie es waren. */
.seiten-karten p.gross{font-size:clamp(21px,2vw,27px);line-height:1.2;letter-spacing:-.02em;
  color:var(--t1);font-weight:600;max-width:23ch;text-wrap:balance;margin:0 0 26px;
  min-height:2.4em}
.punkte{list-style:none;margin:0 0 28px;padding:0;flex:1}
.punkte li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--line);
  color:var(--t2);font-size:15.5px;line-height:1.55}
.punkte li:last-child{border-bottom:0}
/* Der Ring aus dem Kalender als Aufzaehlungszeichen. Er heisst in der App "frei", und
   genau darum geht es in beiden Listen. */
.punkte li::before{content:"";position:absolute;left:2px;top:20px;width:7px;height:7px;
  border-radius:50%;border:1.5px solid var(--accent)}
.seiten-karten .btn{align-self:flex-start}

/* Der Technikerkalender spiegelt den Firmenkalender: dort Text links und Bild rechts,
   hier umgekehrt. Zwei gleich aufgebaute Streifen hintereinander wuerden sonst wie eine
   Wiederholung aussehen statt wie zwei Seiten derselben Sache. */
.geraet-tech{margin-top:0;border-top:0}
/* Gespiegelt heisst nur: Bild links, Text rechts. Die Spaltenbreiten muessen mitwandern,
   sonst steht der Text in der schmalen Bildspalte und bricht auf halber Breite um. Nur
   oberhalb von 900px, darunter dreht die naechste Regel die Reihenfolge wieder um. */
@media(min-width:901px){
  .geraet-tech .geraet-in{grid-template-columns:minmax(260px,320px) 1fr}
}
@media(max-width:900px){
  /* Auf schmalen Geraeten steht der Text zuerst, sonst beginnt der Abschnitt mit einem
     Bild ohne Ueberschrift darueber. */
  .geraet-tech .geraet-in > div:first-child{order:2}
  .geraet-tech .geraet-in > div:last-child{order:1}
}