/* Landing 1 — Werte aus WERTELISTE.md, gemessen an `Email images/Landing 2.png`
   (1672 × 941, ohne Rahmen). Seitenkoordinaten: 0,0 = oben links des Fensters
   bei 1672 Breite; die Inhaltsspalte ist 1404 breit und steht mittig (x 134).
   Groessen fest in px (CLAUDE.md Regel 9). */

/* Wortmarke: Archivo 800, Breite 112 % — dieselbe wie in der Seitenleiste des Produkts. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-stretch:112%;font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2')}
/* Schrift: DM Sans — an den Buchstabenformen bestimmt (rundes e, offenes g). */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dmsans-400-latin.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dmsans-500-latin.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dmsans-700-latin.woff2) format('woff2')}


:root{
  --grund:#FFFFFF;
  --tinte:#010102;
  --text:#110F15;
  --nav:#262827;
  --marke:#020307;
  --violett:#B356FF;
  --plakette:#FFFFFF;
  --plakette-text:#090A03;
  --hell:#FFFFFF;
  --rand:#000000;
  --hell-text:#0B0B0C;
  --dunkel:#363C42;
  --koralle:#000000;
  --platzhalter:#D6D1CB;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--grund)}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

.seite{position:relative;width:100%;min-height:calc(1001px + 336.9px * (var(--s) - 1))}

/* Kopf: Spalte 1404, mittig. Bei 1672 steht sie auf x 134. */
.kopf{position:absolute;left:0;right:0;top:0;height:90px;width:min(100% - 48px,1404px);margin:0 auto;z-index:3}
/* Die Wortmarke wie in public/seitenleiste.js (27 px, Balken 6,5 x 19,5, Abstand 8),
   x 0,9 auf die 201 px, die das Bild ihr gibt. Farbe dunkel statt weiss: heller Grund. */
.marke{position:absolute;left:0;top:26px;height:38px;display:flex;align-items:center;gap:7.2px}
.marke b{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:112%;font-size:24.3px;letter-spacing:.006em;line-height:1;color:var(--marke)}
.marke i{display:block;flex:0 0 auto;width:5.85px;height:17.55px;border-radius:2.93px;background:var(--violett)}
.nav{position:absolute;left:474px;top:25.5px;height:40px;display:flex;align-items:center;gap:32px;
  font-weight:400;font-size:16.5px;line-height:1;color:var(--nav)}
.zugang{position:absolute;right:-1px;top:23.5px;height:40px;display:flex;gap:14px}
.pille{display:flex;align-items:center;justify-content:center;height:40px;border-radius:20px;font-weight:700;font-size:17.2px;line-height:1}
.pille-hell{width:89px;background:var(--hell);color:var(--hell-text);box-shadow:inset 0 0 0 1px var(--rand)}
.pille-dunkel{width:106px;background:var(--dunkel);color:#fff}

/* Mitte: alles an der Seitenmitte ausgerichtet */
.held{position:absolute;left:0;right:0;top:0;height:calc(1001px + 336.9px * (var(--s) - 1));text-align:center;pointer-events:none;z-index:2}
.held a{pointer-events:auto}
.plakette{position:absolute;left:50%;top:100px;transform:translateX(-50%);height:38px;width:366px;padding:0 2px 0 0;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:19px;background:var(--plakette);box-shadow:inset 0 0 0 1px var(--rand);
  color:var(--plakette-text);font-weight:500;font-size:18px;line-height:1}
/* Grundlinien 233,5 / 319,5: Zeilenkasten 86, Grundlinie 73,0 unter der Oberkante */
.titel{position:absolute;left:0;right:0;top:159.5px;font-weight:700;font-size:85.7px;line-height:86px;
  letter-spacing:-4px;color:var(--tinte);white-space:nowrap}
/* Je Zeile an Wortbreiten und Wortluecken (16-18) des Bildes angepasst */
.titel .z1{letter-spacing:-2.9px;word-spacing:-5px}
.titel .z2{letter-spacing:-4.5px;word-spacing:-6px}
/* Grundlinien 375,5 / 408,5 / 441,5: Zeilenkasten 33, Grundlinie 24,7 darunter */
/* +12 px Abstand zur Ueberschrift (Wirt, 22.09.2026) */
.unter{position:absolute;left:0;right:0;top:400.2px;font-weight:400;font-size:23.6px;line-height:33px;color:var(--text);white-space:nowrap}
.unter .u1{position:relative;left:-3px}
/* 35 px unter der Mittelkarte — rueckt mit, wenn die Karten wachsen */
.knopf{position:absolute;left:calc(50% - 132.5px);top:calc(903px + 336.9px * (var(--s) - 1));width:266px;height:58px;border-radius:29px;background:var(--koralle);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:19.8px;line-height:1}

/* Buehne: der Kartenstreifen geht immer bis zum Fensterrand und zeigt immer
   dieselben Karten wie das Mockup. Dafuer waechst er wie ein Bild mit der
   Fensterbreite: --s = Fensterbreite / 1672 (gesetzt in karussell.js).
   AUSNAHME von CLAUDE.md Regel 9, vom Wirt am 22.09.2026 so entschieden —
   sie gilt NUR fuer diesen Streifen; Schrift, Knoepfe und Kopf bleiben fest.
   Die Oberkante der Mittelkarte bleibt auf y 533 (Mockup 473, +60 Luft), der Streifen waechst nach unten. */
.seite{--s:1}
.buehne{position:absolute;left:0;right:0;top:calc(533px - 171.55px * var(--s));height:calc(680px * var(--s));overflow:hidden;z-index:1;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.buehne.zieht{cursor:grabbing}
.ring{position:absolute;inset:0;perspective:var(--p,1300px);perspective-origin:calc(50% + var(--achse,0px)) calc(340px * var(--s))}
.karte{position:absolute;left:calc(50% + var(--achse,0px) - var(--kb,115px));top:calc(340px * var(--s) - var(--kh,168px));width:calc(2 * var(--kb,115px));height:calc(2 * var(--kh,168px));border-radius:calc(16px * var(--s));
  background:var(--platzhalter);backface-visibility:hidden;will-change:transform}

/* Schmaler: die Aufteilung gibt nach, nicht die Schrift. */
/* Der Kopf kommt aus kopf.js (eine Quelle für alle Seiten, 23.09.2026).
   Die aktuelle Seite trägt einen violetten Strich darunter. */
.nav a{position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:1px;background:var(--violett)}
.nav a:hover{opacity:.7}
/* Unter 1240 px liefe die Leiste zu nah an Login/Demo — dort öffnet „Menü" dieselben Einträge */
.kopf-menue{display:none;cursor:pointer;font-family:inherit;border:0}
.kopf-liste{position:absolute;right:0;top:74px;z-index:10;min-width:220px;padding:8px;border-radius:14px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 16px 40px rgba(0,0,0,.16);display:flex;flex-direction:column}
.kopf-liste[hidden]{display:none}
.kopf-liste a{padding:12px 14px;border-radius:9px;font-weight:400;font-size:17px;line-height:1;color:var(--nav)}
.kopf-liste a:hover{background:rgba(0,0,0,.05)}
.kopf-liste a[aria-current="page"]{font-weight:500;box-shadow:inset 3px 0 0 var(--violett)}
body.dunkel .kopf-liste{background:#1A1A1E;box-shadow:0 0 0 1px #2B2D32,0 16px 40px rgba(0,0,0,.5)}
body.dunkel .kopf-liste a{color:#ECEEEE}
body.dunkel .kopf-liste a:hover{background:rgba(255,255,255,.06)}
/* 1240 statt 1180: bei 1181 lagen zwischen Leiste und Login nur 9 px (gemessen, .schau-kopf.html).
   1300 seit „Platzwahl" (24.09.2026): die Leiste wurde 110 px länger, bei 1250 stieß „Kontakt" an „Login". */
/* 1390 seit „Planung" (26.09.2026) — noch ein Eintrag, die Leiste wieder ~90 px länger */
/* 1480 seit „Preise" (15.10.2026) — noch ein Eintrag, ~85 px länger */
@media (max-width:1480px){ .nav{display:none} .kopf-menue{display:flex} }
/* HANDY (15.10.2026, Wirt: „mobil überschneidet es sich im Header"): Wortmarke 24,3 → 20 px, Menü und Demo schmaler,
   Login zieht ins Menü (unten in der Liste). Gemessen: bei 390 bleiben 19 px zwischen Marke und Menü, bei 360 dank 18 px. */
.kopf-liste-login{display:none}
@media (max-width:759px){
  .marke b{font-size:20px} .marke i{width:4.8px;height:14.5px}
  .zugang{gap:8px} .pille{font-size:16px} .pille-hell{width:70px} .pille-dunkel{width:80px}
  .kopf-login{display:none}
  .kopf-liste .kopf-liste-login{display:block;margin-top:4px;border-top:1px solid rgba(0,0,0,.08);padding-top:14px}
}
@media (max-width:380px){ .marke b{font-size:18px} .marke i{height:13px} .pille{font-size:15px} .pille-hell{width:64px} .pille-dunkel{width:72px} }
@media (max-width:1000px){
  .titel,.unter{white-space:normal;padding:0 24px}
  .titel br,.unter br{display:none}
}

/* ============================================================
   DER ABSCHLUSS — gemessen aus `Email images/landing 3.png`
   (Bild 1577 breit, unsere Seite 1672 → alle Werte x 1,0602).
   Spalte bleibt 1404 wie im Kopf, damit die Kanten fluchten.
   Verläufe sind hier erlaubt (Wirt, 22.09.2026: „die Regeln sind
   für das Dashboard optimiert") — im Produkt bleiben sie verboten.
   ============================================================ */
.schluss{position:relative;background:#101013;overflow:hidden;padding-top:127px}
.schluss .sp{position:relative;z-index:2;width:min(100% - 48px,1404px);margin:0 auto;color:#FDFDFD}

.augenbraue{text-align:center;font-weight:500;font-size:15.1px;line-height:1;letter-spacing:.237em;
  text-transform:uppercase;color:#A561EA}
/* Versal 53, Grundlinie 40 px unter der Augenbraue */
.sti{margin:27px 0 0;text-align:center;font-weight:700;font-size:75.7px;line-height:1;letter-spacing:-.054em;color:#FDFDFD}
.stu{margin:14px 0 0;text-align:center;font-weight:400;font-size:24.8px;line-height:1.35;color:#DEE5F4}
.stk{margin:32px 0 0;display:flex;justify-content:center;gap:21px}
.kn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:67px;border-radius:34px;
  font-weight:500;font-size:19px;line-height:1}
.kn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kn-voll{width:250px;background:#AD68FD;color:#12071d;
  box-shadow:0 0 30px 2px rgba(173,104,253,.33)}
.kn-hohl{width:245px;border:1px solid #9B999B;color:#fff}

.strich{border:0;height:1px;background:#2B2D32;margin:58px 0 0}
/* ohne den Aufruf (15.10.2026, alle Seiten): oben nur Luft bis zur Wortmarke */
.schluss.ohne-aufruf{padding-top:30px}
.schluss.ohne-aufruf .fuss{margin-top:56px}

.fuss{margin:87px 0 0}
.marke-fuss{position:static;height:auto;top:auto;left:auto}
/* Nach der Versalhoehe des Bildes (24 x 1,06 = 25,4) — die echte Wortmarke
   ist dabei 291 statt 250 breit, weil im Bild eine andere Schrift steht. */
.marke-fuss b{font-size:36.9px;color:#fff}
.marke-fuss i{width:5.3px;height:25.4px;border-radius:2.65px;background:#B268FE;margin:0 13px}
.fuss-satz{margin:18px 0 0;font-weight:400;font-size:18.1px;line-height:29.7px;color:#BEBFD0}
.fuss + .strich{margin-top:131px}

.leiste{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0 0;min-height:36px}
.leiste-links{font-weight:400;font-size:16.6px;line-height:1;color:#BFC2C6}
.leiste-links span{padding:0 6px;color:#6a6c72}
.leiste-links a:hover{color:#fff}
.leiste-rechts{display:flex;align-items:center;gap:15px}
.sozial{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1px solid #3A3A40;color:#D7D8DC}
.sozial svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sozial:hover{border-color:#B268FE;color:#fff}
.leiste-teiler{width:1px;height:28px;background:#2B2D32;margin:0 9px}
.sprache{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:400;font-size:17px;line-height:1;color:#D7D8DC}
.sprache svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Der große Schriftzug: Kontur, von unten violett angeleuchtet.
   Er wird vom unteren Seitenrand angeschnitten, wie im Bild. */
.riesen{position:relative;z-index:1;margin-top:81px;height:162px;overflow:hidden}
.riesen::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-140px;height:320px;
  background:radial-gradient(60% 100% at 50% 100%, #A855F7 0%, rgba(168,85,247,.45) 42%, rgba(16,16,19,0) 72%)}
.riesen span{position:relative;display:block;text-align:center;white-space:nowrap;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:112%;font-size:246px;line-height:.86;
  letter-spacing:.01em;color:transparent;-webkit-text-stroke:1.5px rgba(198,150,255,.55)}

@media (max-width:1000px){
  .sti{font-size:48px}
  .stu{font-size:20px}
  .stk{flex-wrap:wrap}
  .leiste{flex-direction:column;align-items:flex-start;gap:18px}
  .riesen span{font-size:120px}
  .riesen{height:84px}
}

/* ============================================================
   ABSCHNITT 5 — DIE VIER EINBAUARTEN, als Ziehharmonika.
   Bauform, Maße und Zeiten gemessen aus `vorlage/calendly.mp4`
   (Video 1920 breit: Karte offen 434, zu 280, Lücke 26, Höhe 588,
   Ecke 30, Übergang 410–450 ms). Auf unsere Spalte 1404 gebracht
   (Faktor 1404/1351 = 1,039): offen 451, zu 291, Lücke 27, Höhe 611.
   Inhalt sind GRAUE PLATZHALTER, bis der Wirt Texte und Bilder liefert.
   ============================================================ */
.arten{background:#fff;padding:120px 0 140px}
.arten-reihe{display:flex;gap:27px;width:min(100% - 48px,1404px);margin:0 auto;align-items:stretch}
.art{position:relative;flex:0 0 291px;height:611px;border-radius:31px;background:#F4F2EF;overflow:hidden;
  cursor:pointer;outline:none;
  transition:flex-basis 450ms cubic-bezier(.34,.14,.54,.72),background 450ms cubic-bezier(.34,.14,.54,.72)}
.art.offen{flex-basis:451px;background:#EFECE8}
.art:focus-visible{box-shadow:inset 0 0 0 2px #000}
.art h3{position:absolute;left:38px;top:40px;font-weight:700;font-size:38px;line-height:1;color:#111115;white-space:nowrap}
/* Der Inhalt behält die Breite der OFFENEN Karte; die geschlossene schneidet
   ihn ab, wie im Video — nichts blendet aus, nichts bricht um. */
.art-inhalt{position:absolute;left:38px;top:104px;width:375px;display:flex;flex-direction:column;gap:14px}
.ph{display:block;border-radius:8px;background:#DCD8D3}
.ph-t{height:15px}
.ph-p{height:13px;background:#E3DFDA}
.ph.kurz{width:62%}
.ph-bild{margin-top:22px;height:300px;border-radius:20px;background:#D6D1CB}

@media (max-width:1000px){
  .arten{padding:72px 0 88px}
  .arten-reihe{flex-direction:column;gap:18px}
  .art,.art.offen{flex:0 0 auto;height:auto;min-height:230px;padding-bottom:32px}
  .art-inhalt{position:static;margin:76px 0 0 38px;width:auto;padding-right:38px}
  .ph-bild{height:200px}
}

/* ============================================================
   DIE ANGEBOTSSEITE (angebote.html)
   Gemessen aus `Email images/landing 4.png` (Bild 1836 breit → unsere Werte
   x 0,9107; die Inhaltsspalte des Bildes ergibt damit genau unsere 1404).
   Die Strich-Bauform stammt aus vorlage/deepjudge-striche.md.
   Bedeutung (Wirt): dünn = wenig bekannt, dick = viel, violett = Angebot.
   ============================================================ */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-400-latin.woff2) format('woff2')}

html:has(body.creme){background:#F5F1EC}
body.creme{background:#F5F1EC}
body.creme .pille-hell{box-shadow:inset 0 0 0 1px #000}
/* Der Kopf steht absolut über den ersten 90 px — die Linie beginnt darunter. */
.seite-angebote{background:#F5F1EC;min-height:780px;padding:90px 0 40px}
.ang-linie{border:0;height:1px;background:#E1DEDB;width:min(100% - 48px,1418px);margin:0 auto}
.ang-linie-oben{margin-top:0}
.ang-linie-unten{margin-top:38px}

.ang{position:relative;z-index:2;width:min(100% - 48px,1404px);margin:0 auto;padding-top:38px;text-align:center}
/* Augenbraue: Versalien, weit gesperrt */
.ang-augenbraue{font-weight:400;font-size:16.8px;line-height:1;letter-spacing:.146em;
  text-transform:uppercase;color:#646565}
/* Überschrift: hochkontrastige Serife. Das Bild zeigt eine Schrift, die wir
   nicht haben; Playfair Display ist die nächste in unserem Bestand, die
   Laufweite ist an den gemessenen Zeilenbreiten (611 / 891) angepasst. */
.ang-titel{margin:26px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:61.6px;line-height:61px;letter-spacing:-2.2px;color:#050405}
.ang-unter{margin:25px 0 0;font-weight:400;font-size:19px;line-height:22.8px;color:#484542}

/* Der Teppich: zwei Reihen über die ganze Spalte, 43 bzw. 44 Striche. */
.ang-feld{position:relative;margin:48px auto 0;display:flex;flex-direction:column;gap:18px}
.ang-reihe{display:flex;align-items:center;height:122px}
/* Das FELD ist die Trefferfläche, nicht der Strich — sonst muss man einen
   1-px-Strich genau treffen (Wirt, 23.09.2026). */
.ang-feldchen{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:100%;cursor:default}
.ang-strich{flex:0 0 auto;height:122px;background:#1E1E1E;opacity:0;pointer-events:none}
.ang-feld.da .ang-strich{opacity:1}
.ang-feld.da .ang-strich.versteckt{opacity:0;transition:opacity .12s linear}
/* Dicken 1–14 px (Bild 2–14 x 0,9107, aufgerundet) */
.ang-strich.is--1{width:1px}.ang-strich.is--2{width:2px}.ang-strich.is--3{width:3px}.ang-strich.is--4{width:4px}.ang-strich.is--5{width:5px}.ang-strich.is--6{width:6px}.ang-strich.is--7{width:7px}.ang-strich.is--8{width:8px}.ang-strich.is--9{width:9px}.ang-strich.is--10{width:10px}.ang-strich.is--11{width:11px}.ang-strich.is--12{width:12px}.ang-strich.is--13{width:13px}.ang-strich.is--14{width:14px}
.ang-strich.is--angebot{background:var(--violett)}

/* Die Fläche: der violette Strich klappt AUS SICH SELBST auf. */
.ang-flaeche{position:absolute;z-index:6;overflow:hidden;background:var(--violett);
  transition:width .42s cubic-bezier(.382,.009,.214,.998),
             height .42s cubic-bezier(.382,.009,.214,.998),
             left .42s cubic-bezier(.382,.009,.214,.998),
             top .42s cubic-bezier(.382,.009,.214,.998)}
.af-inhalt{width:264px;padding:18px 20px;color:#fff;text-align:left}
.af-kopf{display:flex;align-items:center;gap:10px}
.af-kreis{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.02em}
.af-rolle{font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.af-titel{margin:13px 0 0;font-weight:700;font-size:17.5px;line-height:1.22;color:#fff}
.af-liste{margin:12px 0 0;list-style:none;display:flex;flex-direction:column;gap:6px}
.af-liste li{position:relative;padding-left:22px;font-weight:400;font-size:14px;line-height:1.3;color:rgba(255,255,255,.92)}
.af-liste li::before{content:"";position:absolute;left:3px;top:5px;width:8px;height:4px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
/* Der Inhalt erscheint erst, wenn die Fläche offen ist — Zeile für Zeile. */
.ang-flaeche .af-kopf,.ang-flaeche .af-titel,.ang-flaeche .af-liste li{
  opacity:0;transform:translateY(6px);transition:opacity .28s linear,transform .28s cubic-bezier(.382,.009,.214,.998)}
.ang-flaeche.auf .af-kopf{opacity:1;transform:none;transition-delay:.20s}
.ang-flaeche.auf .af-titel{opacity:1;transform:none;transition-delay:.28s}
.ang-flaeche.auf .af-liste li:nth-child(1){opacity:1;transform:none;transition-delay:.36s}
.ang-flaeche.auf .af-liste li:nth-child(2){opacity:1;transform:none;transition-delay:.42s}
.ang-flaeche.auf .af-liste li:nth-child(3){opacity:1;transform:none;transition-delay:.48s}

/* Die kleine Marke am schwarzen Strich */
.ang-marke{position:absolute;z-index:5;padding:7px 12px;border-radius:9px;white-space:nowrap;
  background:#1E1E1E;color:#fff;font-weight:500;font-size:13.5px;line-height:1}

.ang-legende{margin:64px 0 0;display:flex;justify-content:center;align-items:center;gap:26px;
  font-weight:400;font-size:15px;color:#343646}
.ang-legende span{display:inline-flex;align-items:center;gap:10px}
.ang-legende em{font-style:normal;color:#8A8A86}
.lg{display:block;height:27px;background:#1E1E1E}
.lg-duenn{width:2px}
.lg-dick{width:8px}
.lg-lila{width:8px;background:var(--violett)}

@media (max-width:1000px){
  .ang{padding-top:24px}
  .ang-titel{font-size:34px;line-height:36px;letter-spacing:-1px}
  .ang-unter{font-size:17px;line-height:23px}
  .ang-unter br,.ang-titel br{display:none}
  .ang-reihe{height:96px}
  .ang-strich{height:96px}
  .ang-legende{flex-wrap:wrap;gap:14px;margin-top:40px}
}


/* ============================================================
   DIE CRM-SEITE (crm.html) — nach `Email images/landing 5.png`.
   Bild 1024 breit, seine Inhaltsspalte 923 → alle Werte × 1,5211 (= 1404/923).
   Senkrecht: Bildwert × 1,5211 + 12 (unser Kopf ist 90 hoch, der des Bildes
   endet bei 51 → 77,6). Werteliste: WERTELISTE.md › „Die CRM-Seite".
   Schrift: DM Sans wie die Widget-Seite (Wirt, 23.09.2026) — das Bild zeigt
   eine kursive Serife für Liste und Akzent, die gibt es hier bewusst nicht.
   Grund: das Schwarz des Abschlusses, damit Seite und Abschluss eine Fläche sind.
   Farben des Bildes (blaugrüner Grund) auf Schwarz übertragen: Weiß bleibt
   Weiß, Grautöne und Linien behalten ihren KONTRAST zum Grund.
   ============================================================ */
:root{
  --crm-grund:#101013;     /* = .schluss */
  --crm-linie:#2B2D32;     /* = .strich im Abschluss; Bild #233A42, Kontrast 1,32 */
  --crm-text:#F6F7F7;      /* Bild #F6F8F8 */
  --crm-grau:#888888;      /* Liste, Bild #849AA2, Kontrast 5,4 */
  --crm-label:#CBCBCB;     /* Bild #D5DFE2 */
  --crm-leise:#A5A5A5;     /* „+78", Bild #A6B9C0 */
  --crm-feld:#151518;      /* Betreff, Bild #132A33 = Grund + 3 */
  --crm-feld2:#17171A;     /* Nachricht, Bild #162D37 = Grund + 6 */
  --crm-violett-rand:#B356FF; /* Bild: 1-px-Linie über zwei Pixel verschmiert (#453B94 + #694DAD),
                                zusammen ≈ #A063FF — volles Violett, also das Markenviolett */
}

/* Der Kopf auf dunklem Grund — Farben aus dem Kopf des Bildes */
body.dunkel .marke b{color:#fff}
body.dunkel .nav{color:#ECEEEE}
body.dunkel .pille-hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--crm-linie)}
body.dunkel .pille-dunkel{background:var(--violett);color:#fff}

/* Seit dem Einstieg (24.09.2026) ist die Seite hell; schwarz ist nur der Abschnitt
   „Jeder Gast verdient …" (.crm-dunkel) — der Abschluss darunter ist ebenfalls schwarz. */
.seite-crm{min-height:0;padding:90px 0 0;background:#fff}
.crm-dunkel{background:var(--crm-grund);color:var(--crm-text)}
.crm{width:min(100% - 48px,1404px);margin:0 auto}

/* Überschrift: Versalhöhe 39 × 1,5211 = 59,3 → DM Sans 84,8 px, Zeilenabstand
   55 → 83,7, Grundlinie 1 auf 255,4. Laufweite so, dass Zeile 1 die 701 px
   des Bildes trifft (die Widget-Seite setzt ihren Titel ebenso eng, −4 px). */
.crm-titel{margin:0;padding-top:128px;text-align:center;font-weight:500;font-size:84.8px;line-height:83.7px;
  letter-spacing:-4.75px;color:var(--crm-text)}
/* Untertitel: Versalhöhe 12,5 → 19 → 27,2 px, Zeilenabstand 25 → 38.
   Laufweite normal wie der Untertitel der Widget-Seite. */
.crm-unter{margin:26.4px 0 0;text-align:center;font-weight:400;font-size:27.2px;line-height:38px;color:var(--crm-text)}

/* ---- Der Block ---- */
/* Er steht NICHT fest: das Rad wählt die Eigenschaft nur, solange die Maus
   über ihm ist, daneben scrollt die Seite normal (Wirt, 23.09.2026, crm.js). */
.crm-bahn{position:relative;margin-top:51.2px}
/* Linie oben bis Linie unten = 541,5 × 1,5211 = 823,7. Die linke Spalte
   braucht mindestens 630 für die gewählte Zeile; die rechte gibt nach. */
.crm-block{position:relative;min-height:823.7px;outline:none;
  display:grid;grid-template-columns:minmax(630px,48.97%) 1fr;
  border-top:1px solid var(--crm-linie);border-bottom:1px solid var(--crm-linie)}

/* Labels: Versalhöhe 8 → 12,2 → 17,4 px; Sperrung so, dass die Breite des
   Bildes stimmt (GÄSTE-EIGENSCHAFT 128 → 194,7) */
.crm-label{margin:0;font-weight:500;font-size:17.4px;line-height:17.4px;letter-spacing:.052em;text-transform:uppercase;color:var(--crm-label)}

/* ---- links: die Eigenschaften ---- */
.crm-links{position:relative;border-right:1px solid var(--crm-linie)}
.crm-links .crm-label{position:absolute;left:56.3px;top:56.6px}
/* Zeilen im festen Raster 38 → 57,8; erste Grundlinie 128,5 unter der Linie */
.crm-liste{list-style:none;position:absolute;left:0;right:0;top:86.7px;margin:0;padding:0}
.crm-liste li{height:57.8px}
.crm-liste button{all:unset;box-sizing:border-box;display:block;width:max-content;height:57.8px;padding-left:76.1px;cursor:pointer;
  font-family:inherit;font-weight:400;font-size:34.8px;line-height:57.8px;white-space:nowrap;color:var(--crm-grau);
  transform-origin:76.1px 70%;transition:color .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.crm-liste button:hover{color:#B8B8B8}
.crm-liste button:focus-visible{outline:2px solid var(--violett);outline-offset:2px;border-radius:4px}
/* die gewählte: weiß und 1,125-mal so groß (Versalhöhe 18 statt 16), gleiche Grundlinie */
.crm-liste li.an button{color:var(--crm-text);transform:scale(1.125)}
/* der violette Strich: 33 × 4 → 50,2 × 6; gleitet zur gewählten Zeile */
.crm-strich{position:absolute;left:-3px;top:0;width:50.2px;height:6px;border-radius:3px;background:var(--violett);
  transition:transform .45s cubic-bezier(.22,1,.36,1)}

/* ---- rechts: Empfänger, Betreff, Nachricht — im Fluss, Abstände aus dem Bild ---- */
/* rechts 6,9: die Knopfreihe des Bildes (546–970 → 645) muss in einer Zeile stehen */
.crm-rechts{position:relative;padding:56.6px 6.9px 60.9px 64.5px}
.crm-empfaenger{margin-top:21.1px;height:73px;display:flex;align-items:center}
.crm-kreis{appearance:none;border:0;padding:0;font-family:inherit;cursor:default;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:73px;height:73px;margin-right:1.5px;border-radius:50%;
  font-weight:500;font-size:26.1px;line-height:1;color:var(--crm-grund)}
.crm-kreis.mehr{margin:0 0 0 7.6px;background:transparent;box-shadow:inset 0 0 0 1px var(--crm-linie);color:var(--crm-leise)}
/* Erscheinen: nacheinander, aus der Tiefe, mit leichtem Nachschwingen */
.crm-kreis{opacity:1;transform:none;transition:opacity .42s ease-out,transform .5s cubic-bezier(.22,1.25,.36,1)}
.crm-kreis.kommt{opacity:0;transform:translateY(10px) scale(.6)}
.crm-kreis.geht{opacity:0;transform:scale(.85);transition:opacity .16s linear,transform .16s linear}

.crm-trenner{display:block;margin:0;border:0;height:1px;background:var(--crm-linie)}
.crm-trenner-1{margin-top:41.1px}
.crm-label-betreff{margin-top:33px}
.crm-trenner-2{margin-top:28.8px}
.crm-label-nachricht{margin-top:33.1px}

.crm-feld{margin-top:17px;height:62.4px;padding:0 22.8px;border:1px solid var(--crm-linie);border-radius:11px;
  background:var(--crm-feld);font-weight:400;font-size:23.9px;line-height:60.4px;white-space:nowrap;overflow:hidden;color:var(--crm-text)}
.crm-nachricht{margin-top:14px;min-height:252.5px;padding:20.5px 22.8px 22px;border:1px solid var(--crm-linie);border-radius:11px;
  background:var(--crm-feld2);font-weight:400;font-size:28.3px;line-height:39.5px;color:var(--crm-text)}
.crm-nachricht p{margin:0}
.crm-nachricht p + p{margin-top:38.1px}
/* Datenfeld im Text: Kasten 30 × 1,5211 = 45,6 hoch, Rand violett, Grundlinie mit dem Text */
/* Rand 1,5 px (Bild ≈ 1,2 px × 1,5211) als innerer Schatten — ein 1,5-px-border wird auf 1 abgerundet */
.crm-daten{display:inline-block;margin:-1.8px 4px -2.8px;padding:7.4px 17.5px 8.4px;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--crm-violett-rand);
  line-height:28.3px;color:var(--violett)}
.crm-daten.neu{animation:crm-pop .22s cubic-bezier(.22,1.25,.36,1)}
@keyframes crm-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
/* ---- Vorschau für einen Gast (Wirt, 23.09.2026) ----
   Ist ein Baustein an, fährt der Kreis des Gastes, für den die Nachricht gerade
   gilt, oben rechts an das Nachrichtenfeld — und das [Datenfeld] wird zu seinem
   Wert (Tobias, Wintergarten, Hochzeitstag). Ein Klick auf einen anderen Kreis
   tauscht ihn aus. */
.crm-empfaenger.waehlbar .crm-kreis:not(.mehr):not(.leer){cursor:pointer}
.crm-empfaenger.waehlbar .crm-kreis:not(.mehr):not(.leer):hover{transform:translateY(-4px)}
.crm-kreis:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* der leere Platz, solange sein Gast unten ist */
.crm-kreis.leer{background:transparent !important;box-shadow:inset 0 0 0 1.5px #3A3C42;color:transparent}
/* der fliegende / angedockte Kreis: Ursprung oben links, damit Verschieben und Verkleinern zusammenpassen */
.crm-flieger{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;width:73px;height:73px;border-radius:50%;
  transform-origin:0 0;pointer-events:none;font-weight:500;font-size:26.1px;line-height:1;color:var(--crm-grund);
  box-shadow:0 10px 24px rgba(0,0,0,.4)}
.crm-fuer{position:absolute;z-index:6;margin:0;white-space:nowrap;font-weight:400;font-size:15px;line-height:17.4px;color:var(--crm-leise);
  opacity:0;transform:translateX(6px);transition:opacity .3s ease,transform .3s ease}
.crm-fuer.da{opacity:1;transform:none}
.crm-fuer b{font-weight:500;color:var(--crm-text)}
/* das Datenfeld verwandelt sich: alter Text weg, Breite gleitet, neuer Wert taucht auf.
   clip-path statt overflow:hidden — overflow verschöbe die Grundlinie des Kastens. */
.crm-daten{white-space:nowrap;vertical-align:baseline;clip-path:inset(0 round 9px);
  transition:width .35s cubic-bezier(.22,1,.36,1),color .16s linear,background-color .4s ease}
.crm-daten.weg{color:transparent}
.crm-daten.gefuellt{background:rgba(179,86,255,.16)}
.crm-wert{display:inline-block;animation:crm-wert .42s cubic-bezier(.22,1,.36,1)}
@keyframes crm-wert{from{opacity:0;transform:translateY(40%);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.crm-daten.glanz{animation:crm-glanz .7s ease-out}
@keyframes crm-glanz{from{background:rgba(179,86,255,.5)}to{background:rgba(179,86,255,.16)}}

/* die Schreibmarke während des Tippens */
.crm-marke{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--crm-text);animation:crm-blink 1s steps(1) infinite}
@keyframes crm-blink{50%{opacity:0}}

/* Chips: Höhe 34 → 51,7, Abstand 7 → 10,6 (Bild); Breiten füllen die Reihe.
   Der Knopf „Nachricht erstellen" ist weg — bei ihm passierte nichts (Wirt). */
.crm-chips{margin-top:24.3px;display:flex;flex-wrap:wrap;gap:10.6px;align-items:center}
/* Die Chips sind Schalter: höchstens einer an. An = violett gefüllt, das + dreht zum × (herausnehmen). */
.crm-chip{appearance:none;border:0;margin:0;background:transparent;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;height:51.7px;padding:0;border-radius:26px;box-shadow:inset 0 0 0 1.5px var(--crm-violett-rand);
  font-weight:400;font-size:19.6px;line-height:1;white-space:nowrap;color:var(--crm-text);
  transition:background-color .2s ease,color .2s ease}
.crm-chip:hover{background:rgba(179,86,255,.14)}
.crm-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.crm-chip.an{background:var(--violett);color:#fff}
.crm-plus{display:inline-block;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.crm-chip.an .crm-plus{transform:rotate(45deg)}
/* Vier Chips (Wirt, 23.09.2026): sie füllen die Reihe bis zur Kante des Nachrichtenfelds —
   jeder so breit wie sein Text, der übrige Raum gleich verteilt. */
.crm-chip{flex:1 1 auto;padding:0 12px}

.crm-nurleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Die Seite darf nicht stumm scheitern (CLAUDE.md § 10) */
.crm-fehler{position:fixed;left:0;right:0;top:0;z-index:99;padding:12px 18px;background:#C0392B;color:#fff;font:15px/1.4 system-ui,sans-serif}

/* Bewegung reduziert: kein Tippen, kein Nachschwingen (crm.js liest dasselbe) */
@media (prefers-reduced-motion:reduce){
  .crm-kreis,.crm-strich,.crm-liste button,.crm-chip,.crm-plus{transition:none}
  .crm-daten.neu,.crm-wert,.crm-daten.glanz{animation:none}
  .crm-daten,.crm-fuer{transition:none}
}

/* Schmal (unter 1000): die Spalten liegen untereinander, gewählt wird durch
   Tippen, das Rad bleibt bei der Seite. Wie auf der Angebotsseite wird die
   große Schrift hier kleiner — sonst passt die gewählte Zeile nicht aufs Telefon. */
@media (max-width:1000px){
  .crm-titel{padding-top:48px;font-size:44px;line-height:46px;letter-spacing:-1.5px}
  .crm-unter{font-size:18px;line-height:26px}
  .crm-titel br,.crm-unter br{display:none}
  .crm-bahn{height:auto !important;margin-top:36px}
  .crm-block{min-height:0;display:block}
  .crm-links{border-right:0;border-bottom:1px solid var(--crm-linie);height:640px}
  .crm-links .crm-label{left:0;top:32px}
  .crm-liste{top:60px}
  .crm-liste li,.crm-liste button{height:44px;line-height:44px}
  /* 19 px: die gewählte Zeile (× 1,125) muss auf 375 passen — gemessen */
  .crm-liste button{padding-left:40px;font-size:19px;transform-origin:40px 70%}
  .crm-strich{left:0;width:28px}
  .crm-rechts{padding:32px 0 40px}
  .crm-kreis,.crm-flieger{width:44px;height:44px;font-size:16px}
  .crm-empfaenger{height:44px}
  .crm-nachricht{font-size:20px;line-height:30px}
  .crm-daten{line-height:20px}
  .crm-feld{font-size:18px}
}

/* ============================================================
   DER EINSTIEG DER CRM-SEITE — Raster, fünf Leisten, Dashboard (Präfix bk-, 25.09.2026)
   Die Überschrift wie überall (.crm-titel), dunkel auf Weiß. Ablauf: einstieg.js.
   ============================================================ */
.bk{position:relative;background:#fff}
.bk .crm-titel{position:relative;z-index:1;padding:0;color:#0E0E11}
/* Das Raster: Felder 96 × 96 (fest), Linien 1 px, mittig ausgerichtet; zur Mitte
   hin am deutlichsten, zu den Rändern ausgeblendet (Maske — auf der Landingpage
   erlaubt, siehe DER ABSCHLUSS). Einzelne Felder leuchten leise auf. */
.bk-raster{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,#E9E6F0 1px,transparent 1px),linear-gradient(to bottom,#E9E6F0 1px,transparent 1px);
  background-size:96px 96px;background-position:calc(50% - 48px) 0;
  -webkit-mask-image:radial-gradient(ellipse 64% 70% at 50% 45%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 64% 70% at 50% 45%,#000 40%,transparent 100%)}
.bk-feld{position:absolute;width:95px;height:95px;background:#F1EAFE;opacity:0;animation:bk-leuchten 7s ease-in-out infinite}
@keyframes bk-leuchten{0%,100%{opacity:0}45%,55%{opacity:1}}
/* Das Dashboard: feste Breite (höchstens so hoch, dass es ins Fenster passt) —
   wird nur verschoben, nie skaliert */
.bk-dash{position:relative;z-index:2;width:min(100vw - 160px,1292px,(100vh - 140px) * 1.7633);border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:0 0 0 1px #E7E5EE,0 30px 80px rgba(20,16,40,.12)}
.bk-dash img{display:block;width:100%;height:auto}
.bk-dash .bk-voll{position:absolute;left:0;top:0;opacity:0}
/* Eine Leiste: außen die Fläche, die aus dem Feld aufgeht; innen der Ausschnitt
   des echten Fotos; darüber das Lila des Feldes, das verblasst */
.bk-leisten{position:absolute;inset:0;z-index:3;pointer-events:none}
.bk-leiste{position:absolute;left:0;top:0;overflow:hidden;width:95px;height:95px}
.bk-zeile{position:absolute;left:0;top:0;background:#fff url(bilder/gaesteliste.png) no-repeat}
.bk-lila{position:absolute;inset:0;background:#F1EAFE}

/* Lebt: die Bühne steht fest, 1800 px Scrollweg gehören dem Ablauf (eine Höhe des Layouts) */
.bk-lebt{height:calc(100vh + 1800px)}
.bk-lebt .bk-halt{position:sticky;top:0;height:100vh;overflow:hidden}
.bk-lebt .bk-titel{position:absolute;left:0;right:0;top:0}
.bk-lebt .bk-dash{position:absolute;left:0;top:0;transform:translateY(120vh)}

/* Still (unter 1000 px, „Bewegung reduzieren"): Überschrift, darunter das volle Dashboard */
.bk-still .bk-halt{position:relative;padding:88px 24px 96px}
.bk-still .bk-dash{margin:56px auto 0;width:min(100%,1292px)}
.bk-still .bk-voll{opacity:1}
.bk-still .bk-leisten{display:none}
@media (prefers-reduced-motion:reduce){ .bk-feld{animation:none;opacity:.7} }

/* ============================================================
   DIE PLATZWAHL-SEITE (platzwahl.html, Präfix pw-, 24.09.2026)
   Nach „Email images/landing 6.png": das Schaubild spannt dort 1605 px,
   hier die Spalte 1404 wie Kopf und Abschluss → alle Werte × 0,875.
   DM Sans statt der Schreibmaschinenschrift des Bildes (Wirt). Grün und
   Rot zeigen den Zustand IM Produkt (Farben aus BRAND.md), Violett keinen.
   Werteliste: WERTELISTE.md › „Die Platzwahl-Seite".
   ============================================================ */
/* Seit dem Einstieg (24.09.2026) ist die Seite oben weiß wie die CRM-Seite;
   schwarz ist der Teil mit dem Schaubild (.pw-dunkel), der Abschluss darunter auch. */
.seite-platz{min-height:0;padding:90px 0 0;background:#fff}
.pw-held{padding:150px 0 160px;background:#fff}
.pw-held{position:relative;overflow:hidden}
.pw-held .crm-titel{position:relative;z-index:1;padding-top:0;color:#0E0E11}
/* Die Gästekreise des Dashboards (public/gaesteliste.html › .ga-ini: rund, Initialen
   700, sechs Farbpaare) — hier gestreut. Lage im Layout (Anteil der Spalte), Größe fest. */
.pw-kreise{position:absolute;top:0;bottom:0;left:50%;width:min(100% - 48px,1404px);transform:translateX(-50%);pointer-events:none}
.pw-kr{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin-left:calc(var(--d) / -2);
  border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:calc(var(--d) * .318);letter-spacing:.01em;
  animation:pw-schweben 7s ease-in-out infinite;animation-delay:var(--v)}
.pw-kr.p0{background:#e8defd;color:#1b1454} .pw-kr.p1{background:#deeef2;color:#0e2a3c} .pw-kr.p2{background:#fde8e6;color:#7a1d12}
.pw-kr.p3{background:#e7e5f7;color:#14113f} .pw-kr.p4{background:#feeed6;color:#6b2b06} .pw-kr.p5{background:#d8e7fd;color:#0f1f5a}
@keyframes pw-schweben{50%{transform:translateY(-8px)}}
@media (max-width:1100px){ .pw-kreise{display:none} }
@media (prefers-reduced-motion:reduce){ .pw-kr{animation:none} }
@media (max-width:1000px){ .pw-held{padding:72px 0 80px} }
.pw-dunkel{background:var(--crm-grund);color:var(--crm-text)}
.pw{width:min(100% - 48px,1404px);margin:0 auto;padding:0 0 24px}
/* Überschrift und Unterzeile: die der CRM-Seite (.crm-titel · .crm-unter), mit deren Abstand nach oben */

/* Das Schaubild: 322 · 190 · 326 · 162 · 404 = 1404. Das Widget ist seit dem größeren
   Haus (Wirt, 24.09.2026: „hier kannst du es etwas größer machen") 404 statt 324 breit —
   derselbe Maßstab des Plans, mehr Fläche. Schmaler geben die Strecken nach. */
.pw-schema{position:relative;margin:84px 0 0;display:grid;justify-content:space-between;align-items:center;
  grid-template-columns:322px minmax(0,1.17fr) 326px minmax(0,1fr) 404px}
.pw-links{grid-column:1;grid-row:1}
.pw-mitte{grid-column:3;grid-row:1}
.pw-rechts{grid-column:5;grid-row:1}
.pw-spalte{position:relative;z-index:1}
.pw-label{margin:0 0 12px;font-weight:500;font-size:15px;line-height:15px;letter-spacing:.08em;text-transform:uppercase;color:#CBCBCB}
.pw-linien{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.pw-linien path{fill:none;stroke:#ACB1B9;stroke-width:1.5}
.pw-linien rect{fill:#ACB1B9}
.pw-strecke{position:absolute;left:0;top:0;margin:0;z-index:1;white-space:nowrap;text-align:center;font-weight:500;font-size:13.5px;line-height:19px;
  letter-spacing:.07em;text-transform:uppercase;color:#CBCBCB}
.pw-flug{position:absolute;inset:0;pointer-events:none;z-index:3}
.pw-reise{position:absolute;left:0;top:0;width:12px;height:12px;background:#ACAEB8;will-change:transform;transition:background .25s,opacity .35s}
.pw-reise.gruen{background:#22C55E}
.pw-reise.rot{background:#D6533F}

/* Links: die Anfragen — Karte 322 × 85, Abstand 111,5 */
.pw-anfragen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26.5px}
.pw-karte{position:relative;height:85px;display:grid;grid-template-columns:83px minmax(0,1fr);align-items:center;
  border:1px solid #54585A;background:var(--crm-grund);transition:border-color .3s}
.pw-karte.dran{border-color:#E8EAEE}
.pw-symbol svg{display:block;width:30px;height:30px;margin:0 0 0 23px;fill:none;stroke:#EDEFF2;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pw-name{margin:0;font-weight:500;font-size:20px;line-height:24px;color:#fff}
.pw-angabe{margin:1px 0 0;font-size:16px;line-height:20px;color:#CBCBCB;font-variant-numeric:tabular-nums}
.pw-stand{margin:1px 0 0;font-size:14px;line-height:18px;color:#7F838A;transition:color .3s}
.pw-stand.gruen{color:#22C55E}
.pw-stand.rot{color:#E0654F}
.pw-stand.jetzt{color:#E8EAEE}
/* Anschluss: Quadrat 12 mittig auf der rechten Kante */
.pw-port{position:absolute;right:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#ACAEB8}

/* Mitte: der Tag. Rand heller als die anderen — hier wird entschieden */
.pw-kasten{border:1px solid #ACB1B9;padding:24px 24px 20px;background:var(--crm-grund)}
.pw-zwei{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:34px}
.pw-klein{margin:0;font-weight:500;font-size:13.5px;line-height:14px;letter-spacing:.07em;text-transform:uppercase;color:#B5B8BE}
.pw-wert{margin:8px 0 0;font-weight:500;font-size:22.5px;line-height:28px;color:#fff;transition:color .4s}
.pw-wert.setzt{color:#22C55E}
.pw-trenner{display:block;border:0;height:1px;background:#3A3D42;margin:20px 0}
.pw-eigen{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.pw-eigen > div{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-content:start}
.pw-eigen svg{grid-row:1 / 3;width:22px;height:22px;margin-top:2px;fill:none;stroke:#EDEFF2;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pw-eigen dt{font-size:13.5px;line-height:17px;color:#9CA0A7}
.pw-eigen dd{margin:1px 0 0;font-size:15px;line-height:19px;color:#fff}
.pw-eigen dd span{display:block;white-space:nowrap;font-size:13px;line-height:17px;color:#9CA0A7}
.pw-pruef-kopf{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-pruefung{list-style:none;margin:12px 0 0;padding:0}
.pw-pruefung li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:11px;height:40px;align-content:start}
.pw-haken{grid-row:1 / 3;width:14px;height:14px;margin-top:3px;box-shadow:inset 0 0 0 1.5px #4A4D52;transition:background .2s,box-shadow .2s}
.pw-haken svg{display:block;width:14px;height:14px;fill:none;stroke:#0E1A12;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pw-pruefung li.ok .pw-haken{background:#22C55E;box-shadow:none}
.pw-pruefung li.nein .pw-haken{background:#D6533F;box-shadow:none}
.pw-pruefung li.ok .pw-haken svg,.pw-pruefung li.nein .pw-haken svg{opacity:1}
.pw-pruefung .t{font-size:15px;line-height:20px;color:#6D7178;white-space:nowrap;transition:color .2s}
.pw-pruefung .n{font-size:13px;line-height:17px;color:#9CA0A7;white-space:nowrap;opacity:0;transition:opacity .25s}
.pw-pruefung li.ok .t,.pw-pruefung li.nein .t{color:#fff}
.pw-pruefung li.ok .n,.pw-pruefung li.nein .n{opacity:1}
.pw-pruefung li.nein .n{color:#E0654F}
/* zwei Zeilen Platz: „2 Plätze passen · Fenstertafel und Mitteltafel" — feste Höhe, damit der Kasten nicht springt */
.pw-ergebnis{margin:6px 0 0;height:48px;font-weight:500;font-size:16px;line-height:24px;color:#fff}
.pw-ergebnis.gruen{color:#22C55E}
.pw-ergebnis.rot{color:#E0654F}

/* Rechts: das Widget — 324 breit, innen 19 */
.pw-widget{border:1px solid #505252;padding:19px;background:var(--crm-grund)}
.pw-datum{margin:0;font-weight:500;font-size:17.5px;line-height:22px;color:#fff}
.pw-wunsch{margin:4px 0 0;font-size:15px;line-height:20px;color:#CBCBCB;font-variant-numeric:tabular-nums;transition:opacity .25s}
.pw-widget .pw-trenner{margin:14px 0 12px}
.pw-waehlen{margin:0 0 10px;font-weight:500;font-size:19px;line-height:24px;color:#fff}
.pw-plan{position:relative}
.pw-plan svg{display:block;width:100%;height:auto;transition:opacity .35s}
.pw-plan.gedimmt svg{opacity:.22}
.pw-meldung{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:0 30px;
  text-align:center;font-size:16px;line-height:22px;color:#fff}
.pw-meldung[hidden]{display:none}
/* Unter dem Widget: warum der Plan so aussieht. Absolut, damit die Spalte
   ihre Mitte behält — die Linie läuft durch die Mitte des Widgets. */
.pw-warum{position:absolute;left:0;right:0;top:calc(100% + 22px)}
.pw-warum-text{margin:8px 0 0;min-height:66px;font-size:15px;line-height:22px;color:#CBCBCB}

/* Der Plan (viewBox 327 × 261, wie im Bild) */
.pw-raum{fill:none;stroke:#5E6268;stroke-width:1.2}
.pw-raumname{fill:#8B8F96;font-family:'DM Sans',system-ui,sans-serif;font-size:12px;font-weight:500}
.pw-t{pointer-events:all;transition:transform .9s cubic-bezier(.6,0,.2,1),opacity .35s}
.pw-t .k{fill:rgba(0,0,0,0);stroke:#8B8F96;stroke-width:1.4;transition:fill .35s,stroke .35s}
.pw-t .s{fill:none;stroke:#8B8F96;stroke-width:1.3;transition:stroke .35s,opacity .35s}
.pw-t .naht{stroke:#8B8F96;stroke-width:1;stroke-dasharray:3 3;transition:stroke .35s}
.pw-t text{fill:#C8CBD0;font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:500;text-anchor:middle;dominant-baseline:central;transition:fill .35s}
.pw-t .klein{font-size:11.5px}
.pw-t.frei{cursor:pointer}
.pw-t.frei .k{stroke:#fff;animation:pw-atmen 1.6s ease-in-out infinite}
.pw-t.frei .s,.pw-t.frei .naht{stroke:#fff}
.pw-t.frei text{fill:#fff}
.pw-t.zu .k{fill:#212226;stroke:#45484D}
.pw-t.zu .s,.pw-t.zu .naht{stroke:#45484D}
.pw-t.zu text{fill:#6D7178}
.pw-t.gewaehlt .k{fill:#22C55E;stroke:#22C55E}
.pw-t.gewaehlt .s{stroke:#22C55E}
.pw-t.gewaehlt .naht{stroke:#0E1A12}
.pw-t.gewaehlt text{fill:#0E1A12}
.pw-t.weg{opacity:0}
@keyframes pw-atmen{50%{stroke-opacity:.45}}

/* Legende und Anhalten — 74 unter dem Schaubild */
.pw-legende{margin:74px 0 0;display:flex;justify-content:center;align-items:center;gap:34px;font-size:15px;line-height:1;color:#CBCBCB}
.pw-legende span{display:inline-flex;align-items:center}
.pw-q{display:inline-block;width:11px;height:11px;margin-right:9px}
.pw-q-gruen{background:#22C55E}
.pw-q-rot{background:#D6533F}
.pw-q-frei{box-shadow:inset 0 0 0 1.5px #fff}
.pw-halt{height:34px;padding:0 16px;border:1px solid #54585A;border-radius:17px;background:transparent;color:#fff;
  font-family:inherit;font-weight:500;font-size:14.5px;line-height:1;cursor:pointer}
.pw-halt:hover{border-color:#9B999B}
.pw-halt:focus-visible{outline:2px solid var(--violett);outline-offset:3px}
.pw-nurleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pw-fehler{position:fixed;left:0;right:0;top:0;z-index:99;padding:12px 18px;background:#C0392B;color:#fff;font:15px/1.4 system-ui,sans-serif}

/* Schmaler als 1420: die Strecken reichen nicht mehr für ihre Beschriftung —
   die drei Kästen stehen untereinander, die Größen bleiben. */
@media (max-width:1419px){
  .pw-schema{grid-template-columns:minmax(0,560px);justify-content:center;row-gap:64px}
  .pw-links,.pw-mitte,.pw-rechts{grid-column:1;grid-row:auto}
  .pw-linien,.pw-strecke,.pw-flug,.pw-port{display:none}
  .pw-warum{position:static;margin-top:20px}
  .pw-mitte::before,.pw-rechts::before{content:"";position:absolute;left:50%;top:-52px;height:40px;border-left:1.5px solid #ACB1B9}
}
@media (max-width:700px){
  .pw-legende{flex-wrap:wrap;gap:14px 24px}
}
@media (prefers-reduced-motion:reduce){
  .pw-t,.pw-t .k,.pw-t .s,.pw-karte{transition:none}
  .pw-t.frei .k{animation:none}
}
/* nur für Bildschirmfotos (platzwahl.js ?takt): ohne Frames liefen Übergänge nicht weiter */
.pw-takt .pw *,.pw-takt .pw *::before{transition:none!important;animation:none!important}

/* ============================================================
   DIE PLANUNG (planung.html, Präfix pl-, 26.09.2026)
   Der Abend an vier Tischen, aus einem Muster gezeichnet. Farben des
   Produkts (BRAND.md „Die Balkenlogik"), Ablauf in planung.js.
   ============================================================ */
html:has(body.dunkel),body.dunkel{background:var(--crm-grund)}
.seite-planung{min-height:0;padding:90px 0 0;background:var(--crm-grund);color:var(--crm-text)}
.pl-kopfteil{width:min(100% - 48px,1404px);margin:0 auto}
.pl-kopfteil .crm-titel{padding-top:110px}
.pl{position:relative}
.pl-halt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-color:var(--crm-grund);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='146' height='194' fill='none' stroke='%23292A2F' stroke-width='1'%3E%3Crect x='6.5' y='2.5' width='60' height='170' rx='14'/%3E%3Crect x='42.5' y='26.5' width='84' height='146' rx='14'/%3E%3Cpath d='M66.5 98.5H126.5M0 98.5H6.5M126.5 26.5H146M20.5 172.5V194M104.5 172.5V194'/%3E%3C/svg%3E");background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
/* Lebt: die Bühne steht fest, 2400 px Scrollweg gehören dem Ablauf (eine Höhe des Layouts) */
.pl-lebt{height:calc(100vh + 2400px)}
.pl-lebt .pl-halt{position:sticky;top:0;height:100vh}
.pl-still .pl-halt{padding:72px 0 96px}
.pl-buehne{position:relative;width:min(100% - 48px,1404px)}
.pl-svg{display:block;overflow:visible}
.pl-svg text{font-family:'DM Sans',system-ui,sans-serif}
.pl-achse text{fill:#8B8F96;font-size:13px;font-weight:500}
.pl-stunde{stroke:#26272C;stroke-width:1}
.pl-umriss{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.pl-tischflaeche{fill:transparent}
.pl-ruest{fill:#d96a12}
.pl-halten{fill:#e8a20e}
.pl-tischname{fill:#fff;font-size:16px;font-weight:500}
/* Der Grundriss (nach dem Bild des Wirts, 26.09.2026) */
.pl-raum{fill:#17171A;stroke:#D2D2D6;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pl-zone{stroke:#5A5C62;stroke-width:1.2;stroke-dasharray:4 5}
.pl-zonenname{fill:#8B8F96;font-size:14px;font-weight:500}
.pl-tisch{stroke-width:2.2}
.pl-stuhl rect{fill:#17171A;stroke:#EDEDED;stroke-width:1.6}
.pl-nummer rect{fill:#121214;stroke:#EDEDED;stroke-width:1.4}
.pl-nummer text{fill:#fff;font-size:15px;font-weight:700}
.pl-punkt{fill:#B356FF;opacity:0}
.pl-tafelname text{fill:#fff;font-size:13px;font-weight:600}
.pl-tafelname .klein{font-size:12px;font-weight:500;fill:#CBCBCB}
.pl-schiebtext{fill:#fff;font-size:13.5px;font-weight:500}
.pl-plaetze{fill:#9CA0A7;font-size:13.5px}
.pl-leistentext{fill:#fff;font-size:14px;font-weight:500}
.pl-jetzt line{stroke:#fff;stroke-width:1.5}
.pl-jetzt rect{fill:#fff}
.pl-jetzt text{fill:#101013;font-size:12.5px;font-weight:700}
.pl-griff rect{fill:#B356FF}
.pl-griff text{fill:#fff;font-size:13.5px;font-weight:500}
.pl-kreis text{font-size:14px;font-weight:700}
.pl-notiz{position:absolute;right:0;bottom:-54px;margin:0;padding:9px 16px;border-radius:19px;background:#fff;color:#101013;
  font-size:14.5px;line-height:20px;opacity:0}
.pl-legende{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:92px;font-size:14px;color:#CBCBCB}
.pl-legende span{display:inline-flex;align-items:center}
.pl-legende i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:9px}
@media (max-width:1000px){ .pl-kopfteil .crm-titel{padding-top:56px} .pl-notiz{position:static;display:inline-block;margin-top:24px} }

/* DER KOPF FÜGT SICH IN DIE SEITE (Wirt, 14.10.2026) — kopf.js setzt .auf-dunkel / .auf-hell, je nachdem, was
   gerade unter dem Kopf liegt. Auf Dunkel: helle Schrift wie auf den dunklen Seiten (body.dunkel) und ein
   dunkles Band; auf Hell: dunkle Schrift und ein helles Band — auch auf einer dunklen Seite. Das Band gibt es
   nur, wo der Kopf mitläuft (Startseite, CRM). */
.kopf .marke b,.kopf .nav,.kopf .pille,.kopf::before{transition:color .3s ease,background-color .3s ease,box-shadow .3s ease}
.kopf.auf-dunkel .marke b{color:#fff}
.kopf.auf-dunkel .nav{color:#ECEEEE}
.kopf.auf-dunkel .pille-hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--crm-linie)}
.kopf.auf-dunkel .pille-dunkel{background:var(--violett);color:#fff}
.kopf.auf-dunkel .kopf-liste{background:#1A1A1E;box-shadow:0 0 0 1px #2B2D32,0 16px 40px rgba(0,0,0,.5)}
.kopf.auf-dunkel .kopf-liste a{color:#ECEEEE}
body .kopf.auf-hell .marke b{color:var(--marke)}
body .kopf.auf-hell .nav{color:var(--nav)}
body .kopf.auf-hell .pille-hell{background:var(--hell);color:var(--hell-text);box-shadow:inset 0 0 0 1px var(--rand)}
body .kopf.auf-hell .pille-dunkel{background:var(--dunkel);color:#fff}
body .kopf.auf-hell .kopf-liste{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 16px 40px rgba(0,0,0,.16)}
body .kopf.auf-hell .kopf-liste a{color:var(--nav)}
.seite-start .kopf.auf-dunkel::before,.seite-pf .kopf.auf-dunkel::before{background:rgba(16,16,19,.94)}
.seite-start .kopf.auf-hell::before,.seite-pf .kopf.auf-hell::before{background:rgba(255,255,255,.94)}
/* KONTAKT UND PREISE (Wirt, 22.10.2026: „der Header gleich wie auf dem Rest der Landing"). Diese Seiten haben kein Titelbild und
   bekamen deshalb nie den Kopf, den man auf jeder anderen Seite zuerst sieht (held.css › .im-held): über die ganze Breite (Rand 43),
   die Seiten rechts vor „Login" als Text und „Demo". Dieselbe Aufteilung hier — und wie überall bleibt er beim Scrollen stehen, auf
   einem Band (punktfeld.css › .seite-pf). Die Farben folgen weiter dem Grund darunter (kopf.js › auf-hell · auf-dunkel). */
.seite-kontakt .kopf,.seite-preise .kopf{position:fixed;left:0;right:0;top:0;z-index:20;width:calc(100% - 86px)}
.seite-kontakt .kopf::before,.seite-preise .kopf::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:rgba(255,255,255,.94);z-index:-1}
.seite-kontakt .kopf.auf-dunkel::before,.seite-preise .kopf.auf-dunkel::before{background:rgba(16,16,19,.94)}
body .seite-kontakt .kopf .nav,body .seite-preise .kopf .nav{left:auto;right:206px;top:23.5px;gap:32px}
body .seite-kontakt .kopf .zugang,body .seite-preise .kopf .zugang{gap:28px;right:0}
body .seite-kontakt .kopf .pille-hell,body .seite-preise .kopf .pille-hell{width:auto;padding:0;background:transparent;box-shadow:none;font-weight:400;font-size:16.5px}
body .seite-kontakt .kopf .pille-hell:hover,body .seite-preise .kopf .pille-hell:hover{opacity:.7}
@media (max-width:759px){
  .seite-kontakt .kopf,.seite-preise .kopf{width:calc(100% - 48px)}
  body .seite-kontakt .kopf .zugang,body .seite-preise .kopf .zugang{gap:18px}
}