/* skimi3d grid — public site
   Recreated from Claude Design handoff (design_handoff_grid_website).
   Self-hosted only: no CDNs, no external fonts, no third-party requests. */

@font-face{
  font-family:Outfit;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/outfit-web.woff2") format("woff2"),
      url("/assets/Outfit-Variable.ttf") format("truetype");
}

:root{
  /* neutrals / surfaces */
  --canvas:#FAFAFB;
  --surface:#FFFFFF;
  --ink:#23232B;
  --text-2:#5C5C67;
  --text-3:#9A9AA6;
  --divider:#EAE8EE;
  --dark:#191524;
  --on-dark:#C7C2D6;
  --on-dark-muted:#A8A2B8;
  --on-dark-faint:#6E6880;
  /* primary */
  --primary:#6E4BFF;
  --primary-deep:#5B34EF;
  --on-primary:#FFFFFF;
  --primary-on-dark:#8B6BFF;
  /* spectrum */
  --coral:#FB5A6A;
  --orange:#FF8A3D;
  --yellow:#FFC53D;
  --green:#24C48A;
  --blue:#3B9BFF;
  --cyan:#22C3D6;
  --magenta:#E85AC4;
  --pink:#FF6FA5;
  --violet:#6E4BFF;
  /* fonts */
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.25,0.1,0.25,1.0);
  /* card shadows */
  --shadow-card:0 1px 3px rgba(26,43,60,0.06),0 4px 12px rgba(26,43,60,0.04);
  --shadow-raised:0 8px 32px rgba(26,43,60,0.10),0 2px 8px rgba(26,43,60,0.06);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--primary-deep);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--primary);}
::selection{background:rgba(110,75,255,0.22);}
img{max-width:100%;display:block;}

/* ---------- layout ---------- */
/* 1280 · die eine Breite der Anlage. Begruendung und Pflegeliste stehen in
   header.css bei .sh__inner, der einzigen Datei, die jede Huelle laedt. */
.container{max-width:1280px;margin:0 auto;padding:0 32px;}
.reading{max-width:760px;margin:0 auto;padding:72px 32px 96px;}

/* ---------- shared type utilities ---------- */
/* PAGE-EYEBROW · die Rolle ueber einer H1 (LIBRARY, RECHTLICHES).
   Die Landing Page war immer die Wahrheit; hier steht sie jetzt einmal
   fuer alle hellen Seiten. Laufweite in em, damit der Charakter bei
   jeder Groesse gleich bleibt · 2px bei 12px sind .167em, dieselbe Zahl
   bei 10px waere .2em und wirkt sofort weiter. Genau daran ist die
   Drift entstanden. */
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--primary);}
/* SECTION-LABEL · dieselbe Rolle eine Ebene tiefer (WHAT IT DOES,
   BEFORE YOU START, Gruppen-Ueberschriften). Unterscheidet sich vom
   Page-Eyebrow NUR in Groesse und Farbe · trennte man auch Gewicht und
   Laufweite, laesen sich die beiden wie zwei Schriften. */
.label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:0.5px;color:var(--text-3);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;padding:15px 24px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;
  transition:all .2s var(--ease);
  font-family:var(--sans);line-height:1;
}
.btn .arrow{font-size:13px;}
.btn--primary{background:var(--primary);color:var(--on-primary);}
.btn--primary:hover{background:var(--primary-deep);color:var(--on-primary);}
.btn--primary:active{transform:scale(0.97);}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--divider);}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary-deep);}
.btn--sm{font-size:14px;font-weight:600;padding:10px 18px;border-radius:12px;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,251,0.82);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--divider);
}
/* ABGELOEST UND UNBENUTZT · die Kopfzeile von vor dem sh__-Umbau. Keine
   einzige View setzt noch class="nav" (geprueft ueber resources/views am
   17.08.). Der Block steht nur noch da, weil ich fremden Code nicht
   ungefragt loesche · er ist ein Stolperstein beim Nachlesen, denn seine
   Werte (1200px, rgba(250,250,251,0.82)) weichen von der lebenden Regel in
   header.css ab. Wer hier aufraeumt, kann ihn ersatzlos streichen. */
.nav__inner{
  max-width:1200px;margin:0 auto;padding:0 32px;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav__brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);}
.nav__brand:hover{color:var(--ink);}
.wordmark{font-size:20px;font-weight:700;letter-spacing:-0.4px;}
.wordmark span{color:var(--primary);}
.chip{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--divider);border-radius:6px;padding:3px 7px;
}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__link{
  position:relative;font-size:15px;font-weight:500;color:var(--ink);padding:23px 0;
}
.nav__link:hover{color:var(--primary);}
.nav__link.is-active{color:var(--ink);}
.nav__link.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--primary);border-radius:2px;
}
.nav__cta{padding:10px 18px;border-radius:12px;}
.nav__shadow{
  position:absolute;left:0;right:0;bottom:-14px;height:14px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(25,21,36,0.07),rgba(25,21,36,0));
  opacity:0;transition:opacity .2s ease;
}
.nav.is-scrolled .nav__shadow{opacity:1;}

/* logo mark (svg cells sized in markup) */
.logo{display:block;}

/* ---------- home: hero ---------- */
.hero{padding:80px 0 56px;}
.hero__center{max-width:880px;margin:0 auto;text-align:center;}
.hero h1{
  margin:22px 0 0;font-size:clamp(42px,6.2vw,74px);font-weight:700;
  letter-spacing:-1.8px;line-height:1.04;color:var(--ink);text-wrap:balance;
}
.hero__sub{
  margin:26px auto 0;max-width:620px;font-size:20px;line-height:1.6;
  color:var(--text-2);text-wrap:pretty;
}
.hero__cta{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
.hero__shot{margin-top:64px;}
.hero__caption{
  display:flex;justify-content:center;gap:9px;margin-top:16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.5px;color:var(--text-3);
}
.hero__caption .sep{color:#C7D2DC;}

/* image placeholder (replaces the prototype drop-slots; swap for <img> later) */
.shot{
  width:100%;overflow:hidden;position:relative;background:#F1EFF5;
  display:flex;align-items:center;justify-content:center;
}
.shot--hero{aspect-ratio:16/9;border-radius:22px;border:1px solid var(--divider);
  box-shadow:0 8px 32px rgba(26,43,60,0.10),0 2px 8px rgba(26,43,60,0.06);}
.shot--portrait{aspect-ratio:3/4;border-radius:16px;background:var(--surface);
  border:1px solid var(--divider);box-shadow:0 1px 3px rgba(26,43,60,0.06);}
.shot__label{
  font-family:var(--mono);font-size:12px;letter-spacing:0.5px;color:var(--text-3);
  padding:0 20px;text-align:center;
}
.shot--portrait .shot__label{font-size:11px;}

/* ---------- home: sections ---------- */
.section{padding:88px 0;}
.section h2{
  margin:16px 0 0;font-size:clamp(30px,4vw,44px);font-weight:600;
  letter-spacing:-0.8px;line-height:1.1;color:var(--ink);max-width:620px;text-wrap:balance;
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:48px;}
.card{background:var(--surface);border-radius:16px;padding:30px;box-shadow:var(--shadow-card);}
.tile{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;color:#fff;font-family:var(--mono);font-size:13px;font-weight:700;
}
.card h3{margin:18px 0 0;font-size:20px;font-weight:600;letter-spacing:-0.3px;color:var(--ink);}
.card p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-2);}

/* gallery band */
.band-gallery{background:#F4F1FE;padding:88px 0;}
.band-gallery__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.band-gallery__head h2{margin:16px 0 0;max-width:560px;}
.band-gallery__head p{margin:14px 0 0;max-width:520px;font-size:17px;line-height:1.6;color:var(--text-2);}
.pill{
  font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--primary-deep);background:rgba(110,75,255,0.10);
  border:1px solid rgba(110,75,255,0.22);border-radius:999px;padding:7px 14px;white-space:nowrap;
}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:44px;}
.gallery figcaption{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:10px;min-height:14px;}
.gallery figure{margin:0;}
/* real inworld photos (filled by site.js from photos/manifest.json) */
.gphoto{margin:0;}
.gphoto__img{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--divider);box-shadow:0 1px 3px rgba(26,43,60,0.06);}
.gphoto__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease);}
.gphoto:hover .gphoto__img img{transform:scale(1.03);}
.gphoto__cap{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink);}
.gphoto__by{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--text-3);}

/* scripts teaser */
.teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center;}
.teaser h2{max-width:none;}
.teaser p{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--text-2);max-width:440px;}
.teaser__link{display:inline-flex;align-items:center;gap:7px;margin-top:24px;font-weight:600;font-size:16px;}
.codecard{
  background:var(--dark);border-radius:16px;padding:22px 24px;
  box-shadow:0 8px 32px rgba(26,43,60,0.14);border:1px solid rgba(255,255,255,0.06);
}
.codecard__bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.codecard__dots{display:flex;gap:6px;}
.codecard__dots span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,0.14);}
.codecard__name{font-family:var(--mono);font-size:11.5px;color:#5E7185;margin-left:4px;}
.codecard pre{
  margin:0;font-family:var(--mono);font-size:13.5px;line-height:1.75;
  white-space:pre;overflow-x:auto;color:var(--on-dark);
}
.codecard .c-comment{color:#37DFA0;}

/* visit band */
.band-visit{background:var(--dark);color:var(--canvas);padding:104px 0;scroll-margin-top:80px;}
.band-visit__center{max-width:720px;margin:0 auto;text-align:center;}
.band-visit .eyebrow{color:var(--yellow);}
.band-visit h2{
  margin:18px 0 0;font-size:clamp(32px,4.5vw,52px);font-weight:700;letter-spacing:-1px;
  line-height:1.08;color:#fff;text-wrap:balance;max-width:none;
}
.band-visit__sub{margin:18px auto 0;max-width:520px;font-size:18px;line-height:1.6;color:var(--text-3);}
.addr-box{
  display:inline-flex;align-items:center;gap:16px;margin-top:34px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:14px 14px 14px 22px;flex-wrap:wrap;justify-content:center;
}
.addr{font-family:var(--mono);font-size:clamp(16px,2.2vw,21px);font-weight:500;color:#37DFA0;letter-spacing:0.5px;}
.addr-box button{
  font-family:var(--mono);font-size:14px;font-weight:600;color:#fff;background:var(--primary);
  border:none;border-radius:10px;padding:11px 18px;cursor:pointer;transition:all .18s ease;
}
.addr-box button:hover{background:var(--primary-deep);}
.addr-box button:active{transform:scale(0.97);}
.status{display:flex;align-items:center;justify-content:center;margin-top:22px;}
.status__dot-wrap{display:inline-flex;align-items:center;gap:9px;}
.status__dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(36,196,138,0.16);}
.status__label{font-family:var(--mono);font-size:12.5px;letter-spacing:0.5px;color:var(--text-3);}


/* ---------- scripts page ----------
   ACHTUNG: .lib wird weiter unten im Block der neuen Skript-Bibliothek noch
   einmal gesetzt und gewinnt. Die Regel stand hier doppelt, und die spaetere
   hatte padding-bottom:0 · deshalb sass die Seite auf der Fusszeile. Die
   Grundmasse leben jetzt nur noch unten. */
.lib h1{margin:16px 0 0;font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-1.2px;line-height:1.05;color:var(--ink);}
.lib__intro{margin:18px 0 0;max-width:620px;font-size:19px;line-height:1.6;color:var(--text-2);text-wrap:pretty;}
.lib__live{margin:14px 0 0;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.5px;color:var(--text-3);}
.lib__live .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.howto{
  margin-top:28px;display:inline-flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--divider);border-radius:12px;padding:13px 18px;
  box-shadow:0 1px 3px rgba(26,43,60,0.05);flex-wrap:wrap;
}
.howto__tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1px;color:var(--primary);}
.howto__text{font-size:14.5px;color:var(--text-2);}
.state{
  margin-top:44px;padding:22px;border:1px solid var(--divider);background:var(--surface);
  border-radius:14px;color:var(--text-2);font-size:15px;line-height:1.6;
}
.state code{font-family:var(--mono);font-size:13px;color:var(--text-3);}
.state--loading{border:none;background:none;padding:0;font-family:var(--mono);color:var(--text-3);font-size:14px;}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px;margin-top:36px;align-items:start;}
.script{background:var(--surface);border-radius:16px;padding:24px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;}
.script__top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.badge{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;border-radius:6px;padding:4px 9px;}
.badge--lsl{color:var(--primary-deep);background:rgba(110,75,255,0.10);}
.badge--note{color:#1E9E73;background:rgba(36,196,138,0.12);}
.script__date{font-family:var(--mono);font-size:11.5px;color:var(--text-3);}
.script h3{margin:16px 0 0;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);word-break:break-word;}
.script__author{margin:6px 0 0;font-family:var(--mono);font-size:12px;color:var(--text-3);}
.script__actions{display:flex;align-items:center;gap:14px;margin-top:18px;}
.script__toggle{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--canvas);border:1px solid var(--divider);border-radius:10px;padding:9px 15px;
  cursor:pointer;transition:all .18s ease;font-family:var(--sans);
}
.script__toggle:hover{border-color:var(--primary);color:var(--primary-deep);}
.script__raw{font-family:var(--mono);font-size:12.5px;color:var(--primary-deep);}
.script__body{margin-top:16px;}
.script__codewrap{background:var(--dark);border-radius:12px;padding:16px;}
.script__code{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--on-dark);white-space:pre;overflow:auto;max-height:340px;margin:0;}
.script__copyrow{display:flex;justify-content:flex-end;margin-top:12px;}
.script__copy{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;font-weight:600;
  color:#fff;background:var(--primary);border:none;border-radius:10px;padding:9px 16px;
  cursor:pointer;transition:all .18s ease;
}
.script__copy:hover{background:var(--primary-deep);}
.script__copy:active{transform:scale(0.97);}
.script__hint{font-family:var(--mono);font-size:13px;padding:8px 0;}
.script__hint--load{color:var(--text-3);}
.script__hint--err{color:#B4553C;}

/* ---------- legal pages ---------- */
.legal h1{margin:14px 0 0;font-size:clamp(34px,5vw,48px);font-weight:700;letter-spacing:-1px;line-height:1.05;color:var(--ink);}
.legal__sub{margin:12px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:0.5px;color:var(--text-3);}
.notice{
  margin-top:26px;background:#F4F3F6;border:1px solid var(--divider);color:var(--text-2);
  border-radius:12px;padding:14px 18px;font-size:14px;line-height:1.6;
}
.legal h2{margin:44px 0 0;font-size:20px;font-weight:600;letter-spacing:-0.2px;color:var(--ink);}
.legal h3{margin:24px 0 0;font-size:16px;font-weight:600;color:var(--ink);}
.legal p{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--text-2);}
.legal p.tight{line-height:1.8;}
.legal strong{color:var(--ink);font-weight:600;}
.toc{
  margin-top:28px;background:var(--surface);border:1px solid var(--divider);border-radius:16px;
  padding:20px 24px;box-shadow:0 1px 3px rgba(26,43,60,0.05);
}
.toc__h{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.toc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 24px;}
.toc a{display:flex;gap:12px;align-items:baseline;font-size:14.5px;color:var(--text-2);padding:6px 0;}
.toc a:hover{color:var(--primary);}
.toc a .n{font-family:var(--mono);font-size:12px;color:var(--primary);}
.legal section{scroll-margin-top:88px;}
.legal section h2{display:flex;align-items:baseline;gap:12px;font-size:22px;letter-spacing:-0.3px;}
.legal section h2 .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--primary);flex:none;}
.legal__foot{margin:56px 0 0;padding-top:24px;border-top:1px solid var(--divider);font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text-3);}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .container,.nav__inner{padding:0 20px;}
  .reading,.lib{padding-left:20px;padding-right:20px;}
  .nav__links{gap:16px;}
  .chip{display:none;}
  .section,.band-gallery{padding:64px 0;}
  .band-visit{padding:80px 0;}
}

/* ---------- auth + admin ---------- */
.auth{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:64px 20px;}
.auth__card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--divider);border-radius:16px;padding:36px;box-shadow:var(--shadow-card);}
.auth__h{margin:10px 0 0;font-size:28px;font-weight:700;letter-spacing:-0.6px;color:var(--ink);}
.form{margin-top:24px;display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--text-2);}
.field input[type="email"],.field input[type="password"],.field input[type="text"]{font-family:var(--sans);font-size:15px;padding:11px 14px;border:1px solid var(--divider);border-radius:12px;background:var(--canvas);color:var(--ink);transition:border-color .15s ease;width:100%;}
.field input:focus{outline:none;border-color:var(--primary);}
.field input[type="file"]{font-family:var(--sans);font-size:14px;padding:11px 14px;border:1px dashed var(--divider);border-radius:12px;background:var(--canvas);color:var(--text-2);width:100%;cursor:pointer;}
.field input[type="file"]::file-selector-button{font-family:var(--sans);font-size:13px;font-weight:600;margin-right:12px;padding:7px 14px;border:1px solid var(--divider);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;}
.form__err{font-size:13.5px;color:#B4553C;}
.form__ok{font-size:13.5px;color:#1E9E73;}
.form__remember{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);}
.btn--block{width:100%;justify-content:center;}
.admin__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.admin__head h1{margin:12px 0 0;font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-0.8px;color:var(--ink);}
.admin__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:40px;align-items:start;}
.admin .card h3{margin:0 0 0;font-size:19px;font-weight:600;color:var(--ink);}
.admin .card p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--text-2);}
.admin .hint{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:8px;}
.konto__tier{margin:14px 0 0;font-size:14px;color:var(--text-2);}
.konto__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* Die Stufe · Form aus der Vorlage (Wallet.dc.html): ein kleiner abgerundeter
   Kasten in Mono-Kapitaelchen, keine Pille. Farbe je Stufe, Bau immer gleich.

   Hier stand vorher eine ZWEITE `.badge`-Regel, die die weiter oben stehende
   ueberschrieb · dadurch erschienen auch `.badge--lsl` und `.badge--note` als
   fette Pillen statt als schmale Mono-Chips. Eine Klasse, zwei Wahrheiten. */
.tierchip{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;border-radius:5px;padding:3px 8px;
  white-space:nowrap;vertical-align:baseline;
  /* Zwei Dinge, die zusammengehoeren:

     line-height:1 · sonst erbt der Chip die Zeilenhoehe des Absatzes (1.6),
     sein Kasten waere fast doppelt so hoch wie seine Schrift.

     vertical-align:baseline · `middle` zentriert ihn auf der x-Hoehe des
     Absatzes. Ein Chip aus Grossbuchstaben landet dadurch in der unteren
     Haelfte des umgebenden Schriftbands und liest sich als durchhaengend,
     obwohl er geometrisch zentriert ist. An der Grundlinie ausgerichtet stehen
     seine Buchstaben auf derselben Linie wie die daneben · das ist die Lage,
     die das Auge erwartet.

     In der Seitenleiste ist beides egal, dort steht er allein in seiner
     Zeile. Auffaellig wird es nur mitten im Satz. */
  line-height:1;}
.tierchip--free{color:#5C5C67;background:rgba(35,35,43,.07);}
.tierchip--premium{color:#5B34EF;background:rgba(110,75,255,.14);}
.tierchip--platin{color:#4A5568;background:rgba(120,130,150,.18);}
/* Apex traegt Magenta · der Chip ist 9,5px, also der Textton #A63A66
   und nicht der Anzeigeton #E85AC4. Siehe die Spektrum-Regel. */
.tierchip--apex{color:#A63A66;background:rgba(232,90,196,.13);}
/* Die Farbe der Vorlage · sie gehoert zu Family und bleibt, wie sie ist. */
.tierchip--family{color:#8A5A0B;background:rgba(255,197,61,.2);}
/* Abmelden sieht aus wie ein Link, ist aber ein Formular · POST,
   damit ein Vorschau-Abruf niemanden hinauswirft. */
.nav__logout{display:inline-flex;margin:0;padding:0;}
.nav__linkbtn{background:none;border:0;cursor:pointer;font-family:inherit;line-height:inherit;}

/* ---- Script library: list ---- */
.lib__empty{margin-top:32px;font-size:16px;color:var(--text-2);}
.sfilter{margin-top:34px;display:flex;flex-direction:column;gap:16px;}
.sfilter__search{font-family:var(--sans);font-size:15px;padding:12px 16px;border:1px solid var(--divider);border-radius:12px;background:var(--canvas);color:var(--ink);max-width:420px;width:100%;}
.sfilter__search:focus{outline:none;border-color:var(--primary);}
.sfilter__cats{display:flex;flex-wrap:wrap;gap:10px;}
.chipbtn{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--divider);background:var(--surface);color:var(--text-2);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.chipbtn:hover{border-color:var(--primary);color:var(--primary-deep);}
.chipbtn.is-active{background:var(--primary);border-color:var(--primary);color:#fff;}
.sfilter__none{margin-top:28px;color:var(--text-2);}
.scards{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.scard{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--divider);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card);transition:transform .15s ease,border-color .15s ease;}
.scard:hover{transform:translateY(-2px);border-color:var(--primary);}
.scard__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px;}
.scard__cat{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:var(--primary-deep);}
.scard__badge{font-size:11px;font-weight:700;color:#c9761f;}
.scard__title{margin:0;font-size:19px;font-weight:600;letter-spacing:-0.3px;color:var(--ink);}
.scard__sum{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2);flex:1;}
.scard__open{font-size:14px;font-weight:600;color:var(--primary-deep);}

/* ---- Script library: detail ---- */
.sdetail{max-width:760px;margin:0 auto;padding:40px 24px 96px;}
.sdetail__back{display:inline-block;font-size:14px;font-weight:600;color:var(--text-2);}
.sdetail__back:hover{color:var(--primary);}
.sdetail__head{margin-top:22px;}
.sdetail__meta{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.sdetail__head h1{margin:0;font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-0.9px;color:var(--ink);text-wrap:balance;}
.sdetail__sum{margin:14px 0 0;font-size:18px;line-height:1.5;color:var(--text-2);}
.sdetail__body{margin-top:36px;display:flex;flex-direction:column;gap:28px;}
.sdetail__sec h2{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--text-3);}
.sdetail__sec p{margin:0;font-size:16px;line-height:1.65;color:var(--ink);}
.sdetail__settings{margin:0;display:flex;flex-direction:column;gap:10px;}
.sdetail__settings > div{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:14px;align-items:baseline;}
.sdetail__settings dt{margin:0;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--primary-deep);}
.sdetail__settings dd{margin:0;font-size:15px;line-height:1.5;color:var(--text-2);}
.sdetail__pending{margin-top:32px;font-size:15px;color:var(--text-2);font-style:italic;}
.sdetail__code{margin-top:40px;border:1px solid var(--divider);border-radius:14px;overflow:hidden;background:var(--canvas);}
.sdetail__codehead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--divider);background:var(--surface);}
.sdetail__codeh{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:var(--text-3);}
.sdetail__codebtns{display:flex;gap:8px;}
.sdetail__pre{margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);}
.sdetail__pre code{font-family:inherit;white-space:pre;}
.sdetail__foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;color:var(--text-3);}
.sdetail__tags{display:flex;flex-wrap:wrap;gap:6px;}
.tagchip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:6px;background:var(--surface);border:1px solid var(--divider);color:var(--text-2);}

/* ---- Form controls: select + textarea (Editor) ---- */
.field select,.field textarea{font-family:var(--sans);font-size:15px;padding:11px 14px;border:1px solid var(--divider);border-radius:12px;background:var(--canvas);color:var(--ink);width:100%;}
.field textarea{line-height:1.55;resize:vertical;}
.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);}
.frow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;}
.frow > .field{flex:1;min-width:180px;}

/* ---- Admin table (script curation) ---- */
.atable-wrap{margin-top:32px;overflow-x:auto;border:1px solid var(--divider);border-radius:14px;}
.atable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px;}
.atable th{text-align:left;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:var(--text-3);padding:14px 16px;border-bottom:1px solid var(--divider);background:var(--surface);}
.atable td{padding:14px 16px;border-bottom:1px solid var(--divider);vertical-align:middle;color:var(--ink);}
.atable tr:last-child td{border-bottom:0;}
.atable__title{font-weight:600;}
.atable__slug{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:2px;}
.atable__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.qform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.qform select{font-family:var(--sans);font-size:13.5px;padding:8px 12px;border:1px solid var(--divider);border-radius:10px;background:var(--canvas);color:var(--ink);}
.qform__check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);white-space:nowrap;}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--divider);}
.pill--ok{background:rgba(30,158,115,0.14);color:#1E9E73;border-color:rgba(30,158,115,0.35);}
.pill--wait{background:var(--surface);color:var(--text-3);}
.pill--edit{background:rgba(78,140,255,0.14);color:#3f7ae0;border-color:rgba(78,140,255,0.35);margin-left:6px;}

/* ---- Terrain generator ---- */
.tgrid{margin-top:32px;display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start;}
@media(max-width:840px){.tgrid{grid-template-columns:1fr;}}
.tgen{gap:16px;}
.slider label{display:flex;justify-content:space-between;align-items:baseline;}
.slider__v{font-family:var(--mono);font-size:13px;color:var(--primary-deep);}
.field input[type="range"]{width:100%;accent-color:var(--primary);cursor:pointer;height:26px;}
.seedrow{display:flex;gap:8px;align-items:center;}
.seedrow input{flex:1;}
.tprev h3{margin:0;font-size:18px;font-weight:600;color:var(--ink);}
.tprev__img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--divider);margin-top:14px;display:block;background:#0c0e15;}
.tprev__stats{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;}
.tprev__stats div{margin:0;}
.tprev__stats dt{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);}
.tprev__stats dd{margin:2px 0 0;font-size:15px;font-weight:600;color:var(--ink);}
.tprev form{margin-top:18px;}
.tprev__empty{margin-top:16px;color:var(--text-2);font-size:15px;line-height:1.6;}

/* ==========================================================================
   Konto-Bereich und SK$-Kontoauszug
   Hell, wie der ganze Konto- und Marketing-Teil. Nocturne bleibt dem Handel
   und dem Admin vorbehalten · ein Klick auf den Kontostand darf die Anwendung
   nicht mitten im Vorgang von dunkel auf hell kippen.
   ========================================================================== */

:root{
  --divider-soft:#F1EFF5;   /* Zeilenlinien in der Tabelle */
  --placeholder:#B7B7C2;    /* "soon", Platzhalter, Abgeschaltetes */
  --tint:#F4F1FE;           /* aktiver Menuepunkt, aktives Plaettchen */
  --in:#1E9E73;            /* Geld herein · dunkle Stufe des Spektrum-Gruens */
}

/* ---------------------------------------------------------------- Huelle -- */

.acct{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:40px;
  padding:40px 32px 96px;
  align-items:start;
}
.acct__side{position:sticky;top:100px;}
.acct__me{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--divider);}
.acct__avatar{
  position:relative;width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--primary),var(--magenta));
  color:#fff;font-family:var(--sans);font-size:16px;font-weight:600;
}
.acct__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.acct__meText{min-width:0;}
.acct__meText strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Kein eigenes Aussehen · Farbe, Form UND Groesse kommen aus .badge /
   .badge--{stufe}. Die Stufe soll ueberall identisch aussehen, nicht nur
   aehnlich. Hier steht nur, dass die Pille nicht auf Spaltenbreite zieht. */
.acct__tier{margin-top:5px;}
.acct__menu{display:flex;flex-direction:column;gap:1px;margin-top:22px;}
.acct__group{padding:0 10px;margin-top:22px;margin-bottom:9px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.acct__group:first-child{margin-top:0;}
.acct__item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:all .16s ease;}
.acct__item:hover{background:var(--divider-soft);color:var(--ink);}
.acct__item.is-active{background:var(--tint);color:var(--primary-deep);font-weight:600;}
.acct__item.is-soon,.acct__item.is-soon:hover{color:var(--placeholder);cursor:default;background:none;}
.acct__soon{flex:none;margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--placeholder);border:1px solid var(--divider);border-radius:4px;padding:1px 5px;}
.acct__out{flex:none;margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--placeholder);}
.acct__main{min-width:0;}

/* ------------------------------------------------------------------ Kopf -- */

.wal__head{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;margin-bottom:24px;}
.wal__balance{
  margin-top:12px;font-size:clamp(36px,4.2vw,50px);font-weight:700;letter-spacing:-1.4px;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
/* Hier stand eine eigene Augenbraue fuer das Statement (11px/600/1.8px).
   Genau so entsteht Drift: dieselbe Rolle, drei Auslegungen, und die Schrift
   liest sich wie eine fremde. Es gilt der Page-Eyebrow, sonst nichts. */
.wal__asof{margin:12px 0 0;font-size:13.5px;color:var(--text-3);}
.wal__periods{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end;}
.wal__period{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;list-style:none;
  border:1px solid var(--divider);background:var(--surface);transition:all .18s ease;
}
.wal__period::-webkit-details-marker{display:none;}
.wal__period:hover{border-color:var(--primary);color:var(--ink);}
.wal__period.is-active{border-color:var(--primary);background:var(--tint);color:var(--primary-deep);}
.wal__custom{position:relative;}
.wal__customBody{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:14px;border-radius:12px;background:var(--surface);
  border:1px solid var(--divider);box-shadow:0 1px 3px rgba(26,43,60,.05);
}
.wal__customBody label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-3);
  font-family:var(--mono);letter-spacing:1.1px;text-transform:uppercase;}
.wal__customBody input{padding:7px 9px;border:1px solid var(--divider);border-radius:9px;
  font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--surface);}

/* -------------------------------------------------------------- Rechnung -- */

.wal__sum{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-end;
  margin-top:32px;padding:24px 26px;border-radius:16px;}
.wal__equation{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;}
.wal__cell{display:flex;flex-direction:column;min-width:124px;}
.wal__cellLabel{font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);}
.wal__cellNum{margin-top:7px;font-size:23px;font-weight:600;letter-spacing:-.4px;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.wal__cellNum.is-in{color:var(--in);}
.wal__cellNum.is-strong{color:var(--ink);}
.wal__op{font-size:19px;color:#C7C4D0;align-self:flex-end;padding-bottom:3px;}
.wal__sumMeta{display:flex;flex-direction:column;gap:3px;text-align:right;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);}

.wal__notice{
  margin:0 0 18px;padding:12px 16px;border-radius:12px;
  background:var(--tint);color:var(--primary-deep);font-size:13px;
}

/* --------------------------------------------------------------- Filter --- */

.wal__filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 12px;}
.wal__search{display:flex;align-items:center;gap:8px;flex:1 1 280px;min-width:0;
  padding:8px 12px;border:1px solid var(--divider);border-radius:11px;background:var(--surface);color:var(--text-3);}
.wal__search input{flex:1;border:0;background:none;font-family:var(--sans);font-size:13.5px;color:var(--ink);outline:none;min-width:0;}
.wal__seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--divider-soft);gap:2px;}
.wal__seg button,.wal__seg a{
  padding:6px 12px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;color:var(--text-2);
}
.wal__seg button.is-active,.wal__seg a.is-active{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.wal__reset{font-size:12.5px;color:var(--primary-deep);}
.wal__export{margin-left:auto;display:inline-flex;align-items:center;gap:7px;}

.wal__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.wal__chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--divider);font-size:12.5px;color:var(--text-2);background:var(--surface);
}
.wal__chip span{font-family:var(--mono);font-size:10.5px;color:var(--text-3);
  padding:1px 5px;border-radius:999px;background:var(--divider-soft);}
.wal__chip:hover{border-color:var(--placeholder);color:var(--ink);}
.wal__chip.is-active{background:var(--tint);border-color:transparent;color:var(--primary-deep);font-weight:600;}
.wal__chip.is-active span{background:rgba(110,75,255,.16);color:var(--primary-deep);}

.wal__mode{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding:11px 16px;border-radius:12px;background:var(--tint);}
.wal__mode p{margin:0;font-size:12.5px;color:var(--primary-deep);max-width:64ch;}

/* -------------------------------------------------------------- Tabelle --- */

.wal__table{padding:0;overflow:hidden;}
.wal__row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 158px 172px 100px 106px;
  gap:16px;align-items:baseline;
  padding:15px 20px;border-top:1px solid var(--divider-soft);
  font-size:14.5px;color:var(--text-2);
}
.wal__row:last-child{border-bottom:0;}
.wal__row--head{
  background:var(--canvas);color:var(--text-3);border-top:0;border-bottom:1px solid var(--divider);
  padding:12px 20px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:1.1px;text-transform:uppercase;
}
.wal__row--head .is-broken{text-decoration:line-through;}
.wal__row [data-cell="time"]{font-family:var(--mono);font-size:12.5px;color:var(--text-3);}
.wal__row [data-cell="booking"]{color:var(--ink);min-width:0;}
.wal__desc{display:block;margin-top:2px;font-size:12.5px;color:var(--text-3);overflow-wrap:anywhere;}
.wal__num{text-align:right;font-variant-numeric:tabular-nums;}
.wal__row [data-cell="amount"]{font-weight:600;color:var(--ink);}
.wal__row [data-cell="amount"].is-in{color:var(--in);}
.wal__bal{color:var(--text-2);}
.wal__row.is-dim{opacity:.38;}

.wal__party{display:flex;flex-direction:column;gap:2px;min-width:0;}
.wal__partyName{display:flex;align-items:center;gap:5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);}
.wal__partyName svg{flex:none;color:var(--text-3);}
/* Von LINKS kuerzen, damit das aussagekraeftige Ende der fremden Adresse
   stehen bleibt: "…ern-reaches.example.org" statt "hyperica-northern-…". */
.wal__partyGrid{
  font-size:11.5px;color:var(--text-3);
  direction:rtl;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wal__place{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Monat und Tag sind ECHTE Ueberschriften, keine Tabellen-Zwischenkoepfe.
   Vorher standen beide als 10,5px Mono-Kapitaelchen da und die lange Liste
   lief gleichfoermig durch · jetzt zerfaellt sie sichtbar in Abschnitte. */
.wal__day,.wal__month{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;
  border-top:1px solid var(--divider);
}
.wal__month{padding:22px 20px 10px;background:var(--canvas);font-size:17px;font-weight:600;
  letter-spacing:-.3px;color:var(--ink);}
.wal__day{padding:16px 20px 7px;font-size:13px;font-weight:600;color:var(--text-2);}
.wal__day span:last-child,.wal__month span:last-child{
  font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:0;
  color:var(--text-3);font-variant-numeric:tabular-nums;}
.wal__day span:last-child,.wal__month span:last-child{font-variant-numeric:tabular-nums;}

.wal__groupWrap{display:block;}
.wal__groupWrap summary{cursor:pointer;list-style:none;}
.wal__groupWrap summary::-webkit-details-marker{display:none;}
.wal__caret{flex:none;color:var(--text-3);transition:transform .18s var(--ease);vertical-align:-1px;margin-right:4px;}
.wal__groupWrap[open] .wal__caret{transform:rotate(90deg);}
.wal__row--child{background:var(--canvas);padding-top:9px;padding-bottom:9px;}
.wal__row--child [data-cell="booking"]{color:var(--text-2);}

.wal__fresh{margin:0 0 14px;font-size:13.5px;color:var(--text-2);}
.wal__empty{padding:44px 20px;text-align:center;color:var(--text-2);}
.wal__empty p{margin:0 0 6px;font-size:13.5px;}
.wal__empty strong{color:var(--ink);font-size:15px;}

/* --------------------------------------------------------------- Seiten --- */

.wal__pager{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:18px;}
.wal__pageBtn{
  display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 9px;
  border-radius:9px;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums;
}
.wal__pageBtn:hover{background:var(--divider-soft);color:var(--ink);}
.wal__pageBtn.is-active{background:var(--tint);color:var(--primary-deep);font-weight:600;}
.wal__pageBtn.is-off{color:var(--placeholder);pointer-events:none;}
.wal__gap{color:var(--text-3);padding:0 2px;}
.wal__pageInfo{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--text-3);}

/* -------------------------------------------------------------- Fussnoten -- */

.wal__notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--divider);}
.wal__notes h3{margin:0 0 5px;font-size:13.5px;font-weight:600;color:var(--ink);}
.wal__notes p{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.55;}

/* ---------------------------------------------------------------- Schmal -- */

@media (max-width:1040px){
  .acct{grid-template-columns:minmax(0,1fr);gap:26px;}
  .acct__side{position:static;}
  .acct__menu{flex-direction:row;flex-wrap:wrap;gap:4px;}
  .acct__group{width:100%;margin:12px 0 2px;}
}

/* Zeilen werden Karten. Der laufende Saldo bleibt sichtbar · er ist die
   Substanz, nicht die Zierde. Die Beschriftung kommt aus [data-cell], deshalb
   duerfen leere Zellen gar nicht erst ausgegeben werden (siehe die Partials). */
@media (max-width:860px){
  .wal__row{grid-template-columns:minmax(0,1fr);gap:5px;padding:14px 16px;}
  .wal__row--head{display:none;}
  .wal__row [data-cell]::before{
    content:attr(data-label);display:block;
    font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;
    color:var(--text-3);margin-bottom:1px;
  }
  .wal__num{text-align:left;}
  .wal__party{gap:1px;}
  .wal__equation{gap:10px;}
  .wal__cellNum{font-size:19px;}
}

@media (prefers-reduced-motion:reduce){
  .wal__caret{transition:none;}
}

/* Kontostand in der hellen Kopfzeile · Avatar und Betrag in EINER Pille, wie
   im Entwurf. Sie ist die eine Tuer in den Konto-Bereich und die eine Zahl,
   die auf jeder angemeldeten Seite steht. */
.nav__wallet{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 12px 5px 6px;border-radius:999px;
  background:var(--tint);border:1px solid rgba(110,75,255,.22);
  transition:border-color .18s var(--ease);
}
.nav__wallet:hover{border-color:rgba(110,75,255,.45);}
.nav__wallet.is-here{cursor:default;border-color:rgba(110,75,255,.45);}
.nav__walletAvatar{
  position:relative;width:24px;height:24px;flex:none;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(140deg,#8B6BFF,#5B34EF);
  color:#FFFFFF;font-size:11px;font-weight:600;
}
.nav__walletAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.nav__walletSum{
  font-size:14px;font-weight:600;color:var(--primary-deep);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){ .nav__wallet{transition:none;} }

/* Konto-Uebersicht auf der Shell · Kopf, Kennzahlen, Karten. */

.acct__head{margin-bottom:26px;}
.acct__head h1{margin:6px 0 0;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.8px;color:var(--ink);}
.acct__head p{margin:10px 0 0;max-width:64ch;font-size:14.5px;color:var(--text-2);line-height:1.6;}

.acct__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px;}
.acct__stat{display:flex;flex-direction:column;gap:5px;padding:18px 20px;}
.acct__stat:hover{border-color:rgba(110,75,255,.3);}
.acct__statLabel{font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);}
.acct__statNum{font-size:26px;font-weight:700;letter-spacing:-.7px;color:var(--ink);font-variant-numeric:tabular-nums;}
.acct__statHint{font-size:12.5px;color:var(--primary-deep);}

.acct__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.acct__cards .card{padding:20px 22px;}
.acct__cards h3{margin:0 0 7px;font-size:15px;font-weight:600;color:var(--ink);}
.acct__cards p{margin:0 0 8px;font-size:13.5px;color:var(--text-2);line-height:1.6;}
.acct__cards p:last-child{margin-bottom:0;}
.acct__cards code{font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--divider-soft);padding:2px 6px;border-radius:6px;}
.acct__hop{display:inline-block;overflow-wrap:anywhere;}

.acct__form{padding:22px 24px;max-width:460px;}

/* Abzeichen am Admin-Eingang der hellen Kopfzeile · dieselbe Zahl wie in der
   dunklen Seitenleiste, damit man nicht erst hinter die Tuer schauen muss. */
.nav__admin { display: inline-flex; align-items: center; gap: 6px; }
.nav__badge {
  min-width: 17px; padding: 1px 6px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.5; text-align: center;
}

/* ==========================================================================
   Skript-Bibliothek · oeffentlich (04.08.2026, nach der echten Vorlage)

   Werte aus "Scripts v2.dc.html" uebernommen, nicht aus der Beschreibung
   geschaetzt. Der erste Anlauf hatte die richtige Struktur und die falsche
   Gestalt: Kits sind ZWEISPALTIGE Karten, und die Einzelliste hat weder Rahmen
   noch Kopfzeile · die vier Spalten stehen fuer sich.
   ========================================================================== */

.lib{max-width:1280px;margin:0 auto;padding:56px 32px 96px;}
.lib__lede{max-width:62ch;}
.lib__eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--primary);}
.lib__h1{margin:14px 0 0;font-size:clamp(36px,4.6vw,52px);font-weight:700;letter-spacing:-1.3px;
  line-height:1.03;color:var(--ink);}
.lib__intro{margin:16px 0 0;font-size:18.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty;}

.lib__bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;}
.lib__search{position:relative;display:flex;align-items:center;flex:1;min-width:260px;max-width:440px;
  color:var(--text-3);}
.lib__search svg{position:absolute;left:14px;pointer-events:none;}
.lib__search input{width:100%;font:inherit;font-size:16px;padding:14px 15px 14px 40px;
  border:1px solid var(--divider);border-radius:12px;background:#fff;color:var(--ink);}
.lib__search input:focus{outline:2px solid var(--primary);outline-offset:2px;}
.lib__count{font-size:12px;color:var(--text-2);}

.lib__tasks{margin-top:52px;}
.lib__tasksH{margin:0;font-size:15px;font-weight:600;letter-spacing:-.1px;color:var(--ink);}
.lib__taskGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-top:16px;}
.lib__task{display:block;padding:15px 16px;border:1px solid var(--divider);border-radius:12px;
  background:#fff;text-decoration:none;transition:border-color .16s ease,transform .16s ease;}
.lib__task:hover{border-color:var(--primary);transform:translateY(-1px);}
.lib__taskLabel{display:block;font-size:15px;font-weight:600;color:var(--ink);}
.lib__taskHint{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--text-2);}

.lib__section{margin-top:56px;}
.lib__sectionHead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--divider);}
.lib__sectionHead h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.3px;color:var(--ink);}
.lib__sectionHead span{font-size:14px;color:var(--text-2);}

.lib__kits{display:flex;flex-direction:column;gap:20px;margin-top:24px;}
.lib__kit{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:32px;
  background:#fff;border:1px solid var(--divider);border-radius:16px;padding:26px;
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.lib__kitLeft{min-width:0;}
.lib__kitChips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lib__parts{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--primary-2,#5B34EF);background:#F4F1FE;border-radius:5px;padding:3px 8px;}
.lib__kitName{margin:14px 0 0;font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1.15;color:var(--ink);}
.lib__kitTag{margin:9px 0 0;font-size:15px;line-height:1.55;color:var(--text-2);}
.lib__kitNeeds{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--text-2);}

/* Die senkrechte Linie trennt Beschreibung und Ablauf · sie ist der Grund,
   warum man auf einen Blick sieht, dass rechts eine REIHENFOLGE steht. */
.lib__kitSteps{min-width:0;border-left:1px solid #F1EFF5;padding-left:32px;
  display:flex;flex-direction:column;gap:2px;}
.lib__step{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;margin:0 -12px;
  border-radius:10px;text-decoration:none;transition:background .16s ease;}
.lib__step:hover{background:#FAFAFB;}
.lib__stepN{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;display:grid;
  place-items:center;background:#F4F1FE;color:var(--primary-2,#5B34EF);font-size:11px;font-weight:600;}
.lib__stepBody{min-width:0;}
.lib__stepName{display:block;font-size:15px;font-weight:600;color:var(--ink);}
.lib__stepWhat{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--text-2);}

.lib__group{margin-top:38px;}
.lib__groupHead{display:flex;align-items:center;gap:14px;}
.lib__groupHead h3{margin:0;flex:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.lib__rule{flex:1;height:1px;background:var(--divider);}
.lib__groupN{flex:none;font-size:11px;color:var(--text-3);}

/* Kein Rahmen, keine Kopfzeile · die Spalten stehen fuer sich. */
.lib__rows{margin-top:6px;}
.lib__row{display:grid;grid-template-columns:minmax(0,224px) minmax(0,1fr) 132px 92px;gap:20px;
  align-items:baseline;padding:14px 12px;margin:0 -12px;border-bottom:1px solid #F1EFF5;
  text-decoration:none;transition:background .16s ease;}
.lib__row:hover{background:#fff;}
.lib__cName{min-width:0;font-size:15px;font-weight:600;color:var(--ink);}
.lib__cWhat{min-width:0;font-size:14px;line-height:1.45;color:var(--text-2);}
.lib__cGoes{min-width:0;font-size:11.5px;color:var(--text-2);}
.lib__cSetup{min-width:0;font-size:12.5px;color:var(--text-2);}
.lib__cSetup.is-free{color:#1E9E73;}

.lib__empty,.lib__none{margin-top:44px;padding:40px;border-radius:16px;text-align:center;}
.lib__empty{background:#fff;border:1px solid var(--divider);}
.lib__none{background:#F7F5FF;border:1px dashed #D8CFFB;}
.lib__emptyH{font-size:18px;font-weight:600;color:var(--ink);}
.lib__empty p,.lib__none p{margin:10px auto 0;max-width:50ch;font-size:15px;line-height:1.6;color:var(--text-2);}
.lib__noneActs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.lib__cta{display:inline-flex;align-items:center;margin-top:20px;background:var(--primary);color:#fff;
  font:inherit;font-size:15px;font-weight:600;padding:12px 20px;border:0;border-radius:11px;
  cursor:pointer;text-decoration:none;}
.lib__cta:hover{background:var(--primary-2,#5B34EF);color:#fff;}
.lib__noneActs .lib__cta{margin-top:0;}

.lib__locked{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:56px;padding:26px;
  border-radius:16px;border:1px dashed #D8CFFB;background:#F7F5FF;}
.lib__lockIcon{flex:none;width:34px;height:34px;border-radius:10px;background:#EBE5FE;
  color:var(--primary-2,#5B34EF);display:grid;place-items:center;}
.lib__lockedBody{min-width:0;flex:1;}
.lib__lockedH{font-size:15.5px;font-weight:600;color:var(--ink);}
.lib__lockedBody p{margin:7px 0 0;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--text-2);}
.lib__lockedNames{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.lib__lockedNames span{font-size:11.5px;color:var(--text-2);background:#fff;
  border:1px solid var(--divider);border-radius:6px;padding:4px 9px;}

.lib__foot{margin:44px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);max-width:66ch;}

@media (max-width:900px){
  .lib__kit{grid-template-columns:1fr;gap:22px;}
  .lib__kitSteps{border-left:0;padding-left:0;border-top:1px solid #F1EFF5;padding-top:18px;}
}
@media (max-width:820px){
  .lib__row{grid-template-columns:1fr;gap:5px;}
  .lib__cGoes::before,.lib__cSetup::before{content:attr(data-l) ' · ';color:var(--text-3);}
}

/* ==========================================================================
   Skript-Detail (04.08.2026, nach der echten Vorlage "Script v2.dc.html")

   Der erste Anlauf war aus der README gebaut. Die groesste Abweichung:
   Abschnitts-Ueberschriften sind MONO-KAPITAELCHEN in 10,5px, keine
   20px-Ueberschriften · dadurch ist der Fliesstext das Lauteste auf der Seite
   und nicht die Gliederung.
   ========================================================================== */

.sd{max-width:1280px;margin:0 auto;padding:32px 32px 96px;}
.sd__back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text-2);}
.sd__back:hover{color:var(--primary);}

.sd__two{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:52px;margin-top:26px;align-items:start;}
.sd__main{min-width:0;}

.sd__eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--primary);}
.sd__h1{margin:14px 0 0;font-size:clamp(32px,4.2vw,46px);font-weight:700;letter-spacing:-1.2px;
  line-height:1.04;color:var(--ink);}
.sd__sum{margin:16px 0 0;max-width:60ch;font-size:18px;line-height:1.6;color:var(--text-2);text-wrap:pretty;}

/* Die Haarlinien kommen aus gap:1px auf grauem Grund · so sitzen sie auch
   dann sauber, wenn eine Zelle umbricht. */
.sd__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:32px;
  background:var(--divider);border:1px solid var(--divider);border-radius:12px;overflow:hidden;}
.sd__facts > div{background:#fff;padding:14px 16px;}
.sd__facts .mono{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);}
.sd__facts b{display:block;margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink);}
.sd__facts b.is-free{color:#1E9E73;}

.sd__sec{margin-top:36px;}
.sd__sec:first-of-type{margin-top:44px;}
.sd__sec h2{margin:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.sd__prose{margin:12px 0 0;max-width:68ch;font-size:16.5px;line-height:1.65;color:var(--ink);
  white-space:pre-line;}

.sd__steps{display:flex;flex-direction:column;gap:2px;margin-top:14px;}
.sd__step{display:flex;gap:14px;align-items:flex-start;padding:9px 0;}
.sd__step span:last-child{min-width:0;max-width:62ch;font-size:16px;line-height:1.55;color:var(--ink);}
.sd__stepN{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;display:grid;
  place-items:center;background:#F4F1FE;color:var(--primary-2,#5B34EF);font-size:11px;font-weight:600;}

.sd__setHead{display:flex;align-items:center;gap:14px;}
.sd__setHead h2{flex:none;}
.sd__rule{flex:1;height:1px;background:var(--divider);}
.sd__setN{flex:none;font-size:11px;color:var(--text-3);}
.sd__lede{margin:12px 0 0;max-width:64ch;font-size:14.5px;line-height:1.55;color:var(--text-2);}
.sd__sets{margin-top:16px;border-top:1px solid #F1EFF5;}
.sd__set{display:grid;grid-template-columns:minmax(0,142px) minmax(0,1fr) 116px;gap:20px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid #F1EFF5;}
.sd__setName{min-width:0;font-size:12.5px;font-weight:600;color:var(--primary-2,#5B34EF);word-break:break-word;}
.sd__setWhat{min-width:0;font-size:14.5px;line-height:1.5;color:var(--text-2);}
.sd__setDef{min-width:0;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums;}

.sd__codeBox{border-radius:14px;overflow:hidden;border:1px solid var(--divider);
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.sd__codeBar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;
  background:#fff;border-bottom:1px solid var(--divider);}
.sd__codeKicker{flex:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.sd__codeMeta{flex:none;font-size:11.5px;color:var(--text-2);}
.sd__spacer{flex:1;}
.sd__copy{flex:none;font:inherit;font-size:13.5px;font-weight:600;padding:8px 14px;border:0;
  border-radius:9px;background:var(--primary);color:#fff;cursor:pointer;transition:all .16s ease;}
.sd__copy:hover{background:var(--primary-2,#5B34EF);}
.sd__copy.is-done{background:#24C48A;}
.sd__dl{flex:none;font-size:13.5px;font-weight:600;color:var(--text-2);border:1px solid var(--divider);
  background:#fff;border-radius:9px;padding:8px 14px;}
.sd__dl:hover{border-color:var(--primary);color:var(--primary-2,#5B34EF);}
.sd__codeWrap{background:#191524;padding:18px;}
.sd__code{margin:0;font-size:12.5px;line-height:1.7;color:#C7C2D6;white-space:pre;
  overflow-x:auto;max-height:340px;tab-size:4;}
.sd__after{margin:14px 0 0;max-width:64ch;font-size:14px;line-height:1.6;color:var(--text-2);}

.sd__aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:24px;}
.sd__card{background:#fff;border:1px solid var(--divider);border-radius:14px;padding:20px;
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.sd__kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.sd__kitName{margin-top:9px;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--ink);}
.sd__kitTag{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-2);}
.sd__kitSteps{display:flex;flex-direction:column;gap:1px;margin-top:16px;}
.sd__kitStep{display:flex;gap:10px;align-items:center;padding:7px 9px;margin:0 -9px;border-radius:8px;
  font-size:13.5px;line-height:1.4;color:var(--text-2);transition:background .16s ease;}
.sd__kitStep:hover{background:#FAFAFB;color:var(--ink);}
.sd__kitStep.is-here{color:var(--ink);font-weight:600;}
.sd__badge{flex:none;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;background:#F1EFF5;color:var(--text-2);}
.sd__kitStep.is-here .sd__badge{background:#F4F1FE;color:var(--primary-2,#5B34EF);}

.sd__block--ruled{padding-top:22px;border-top:1px solid var(--divider);}
.sd__dots{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.sd__dot{display:flex;gap:11px;align-items:flex-start;}
.sd__dot span:last-child{min-width:0;font-size:14px;line-height:1.55;color:var(--text-2);}
.sd__dotMark{flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:#D8CFFB;}
.sd__dotMark--grey{background:#C9C4D4;}
.sd__prov{margin:11px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2);}
.sd__stale{display:block;margin-top:6px;color:#B4553C;font-weight:600;}
.sd__editLink{display:inline-block;margin-top:11px;font-size:13.5px;font-weight:600;}

@media (max-width:980px){
  .sd__two{grid-template-columns:1fr;gap:32px;}
  .sd__aside{position:static;}
  .sd__facts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .sd__set{grid-template-columns:1fr;gap:5px;}
  .sd__setWhat::before,.sd__setDef::before{content:attr(data-l) ' · ';color:var(--text-3);}
}

/* Absicht-Karten sind FILTER · 1,5px Rand wie in der Vorlage, aktiv violett. */
.lib__task{border-width:1.5px;}
.lib__task.is-on{border-color:var(--primary);background:#F7F5FF;}
.lib__task.is-on:hover{transform:none;}
.lib__filterbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;
  padding:14px 18px;border-radius:12px;background:#F4F1FE;font-size:14.5px;color:var(--ink);}
.lib__filterbar a{font-size:14px;font-weight:600;color:var(--primary-2,#5B34EF);}

/* Der Stufen-Chip auf oeffentlichen Flaechen · eigene Farbfolge, nicht die der
   Konto-Stufe: dort steht, WER man ist, hier steht, WAS ein Skript verlangt. */
.lib__tierchip{display:inline-flex;align-items:center;font-size:9.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;border-radius:5px;padding:3px 8px;line-height:1;}
.lib__tierchip--anyone{color:#1E9E73;background:rgba(36,196,138,.12);}
.lib__tierchip--paid{color:#5B34EF;background:#F4F1FE;}
.lib__tierchip--house{color:#8A5A0B;background:rgba(255,197,61,.2);}
.lib__tierchip--plain{color:#5C5C67;background:#F1EFF5;}

/* `.mono` · die eine Regel, auf die sich jedes class="mono" im Markup verlaesst.
   Sie fehlte hier von Anfang an, wodurch die Klasse wirkungslos war und
   Monospace-Text in der Textschrift erschien. Die Vorlagen setzen sie einmal
   oben im Blatt; genau das passiert jetzt auch hier. */
.mono{font-family:var(--mono);}


/* ---------- Places · das Parzellen-Verzeichnis ---------- */
/* 1280 wie ueberall · siehe header.css bei .sh__inner. */
.pl{max-width:1280px;margin:0 auto;padding:56px 32px 96px;}
.pl__head{max-width:60ch;}
.pl h1{margin:14px 0 0;font-size:clamp(36px,4.6vw,52px);font-weight:700;letter-spacing:-1.3px;line-height:1.03;color:var(--ink);}
.pl__intro{margin:16px 0 0;font-size:18.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty;}
.pl__live{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:var(--ink);}
.pl__dot{flex:none;width:9px;height:9px;border-radius:50%;background:#24C48A;}

/* Die Suche ist ein echtes Formular · teilbar, mit Zurueck-Knopf, ohne Skript. */
.pl__find{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;}
.pl__search{position:relative;display:flex;align-items:center;flex:1;min-width:280px;max-width:480px;}
.pl__search svg{position:absolute;left:14px;pointer-events:none;color:#9A9AA6;}
.pl__search input{width:100%;font-size:16px;padding:14px 15px 14px 40px;border:1px solid #EAE8EE;border-radius:12px;background:#fff;color:var(--ink);}
.pl__go{display:inline-flex;align-items:center;gap:9px;background:var(--primary);color:#fff;font-size:15px;font-weight:600;padding:13px 19px;border:0;border-radius:12px;cursor:pointer;}
.pl__go:hover{background:#5B34EF;color:#fff;}
.pl__go--ghost{background:#fff;color:var(--ink);border:1px solid #EAE8EE;}
.pl__go--ghost:hover{background:#fff;border-color:var(--primary);color:#5B34EF;}

/* Eine Zeile statt eines Bandes · oben soll die Seite einladen, nicht
   verwalten. Das Argument, warum hier nichts gerankt wird, steht jetzt in der
   rechten Spalte bei den anderen Erklaerkarten. */
.pl__summary{margin-top:20px;font-size:14.5px;color:var(--text-2);}
.pl__summary span{font-size:14.5px;}

/* Die Aufteilung beginnt direkt unter der Suche, damit die Karte rechts von
   oben an klebt · sonst liegt die Antwort auf einen Klick ausserhalb des
   Schirms. */
.pl__main{min-width:0;}

/* ZWEI ACHSEN: erst was der Ort IST (die Auskunft seines Eigentuemers aus
   About Land), dann leiser, was wir ueber ihn wissen. */





.pl__kat{display:inline-flex;align-items:center;font-size:12.5px;color:var(--text-2);
  border:1px solid #EAE8EE;border-radius:999px;padding:2px 10px;}

/* ---- Dinge ---- */
.pl__things{margin-top:28px;}
.pl__secHead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #EAE8EE;}
.pl__secHead h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.3px;}
.pl__secHead span{font-size:14px;color:var(--text-2);}
.pl__thing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 128px;gap:20px;align-items:baseline;
  padding:14px 12px;margin:0 -12px;border-bottom:1px solid #F1EFF5;}
/* Der genaue Treffer muss man SEHEN. #F7F5FF war so blass, dass er
   verschwand · jetzt derselbe violette Grund wie die Zusammenfassung, mit
   einer Kante links und dem Namen im Akzent. */
.pl__thing.is-exact{background:#F4F1FE;box-shadow:inset 3px 0 0 var(--primary);}
.pl__thing.is-exact .pl__thingName{color:#5B34EF;}
/* Die Zeile IST ein Link · also traegt der Name auch die Farbe eines Links.
   Ohne das sass ein Treffer als schwarzer Text auf Weiss und sah aus wie
   Beiwerk. Der genaue Treffer bekommt zusaetzlich den violetten Grund. */
.pl__thingName{font-size:15px;font-weight:600;color:#5B34EF;}
.pl__thingWhere{font-size:14px;color:var(--text-2);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.pl__thingOwner{font-size:11.5px;color:var(--text-2);}
/* Wo etwas zweitrangig ist, sagt es die STRUKTUR · nicht die Blaesse. Der Ort
   einer Zeile ist ihre Aussage und darf nicht mit Lesbarkeit dafuer zahlen. */
.pl__tag{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;
  color:var(--text-2);border:1px solid #EAE8EE;border-radius:5px;padding:2px 7px;}
.pl__note{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--text-2);max-width:66ch;}
.pl__note--small{margin-top:9px;font-size:13.5px;}

/* ---- Linsen · keine Rangliste ---- */
.pl__lenses{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;}





.pl__total{font-size:12px;color:var(--text-2);}
.pl__lensNote{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);max-width:70ch;}

/* ---- Liste und Karte ---- */
.pl__split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:40px;margin-top:8px;align-items:start;}
.pl__list{min-width:0;display:flex;flex-direction:column;gap:18px;}


.pl__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pl__noPhoto{font-size:10px;letter-spacing:.167em;text-transform:uppercase;color:#B7B7C2;}

.pl__titleRow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.pl__titleRow h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.3px;}
/* Nur POSITIVE Abzeichen · es gibt kein Gegenstueck, und das Fehlen eines
   Abzeichens sagt nichts. Genau das verhindert den Pranger. */
.pl__badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.167em;text-transform:uppercase;border-radius:5px;padding:3px 8px;}
.pl__badge--built{color:#5B34EF;background:#F4F1FE;}
.pl__badge--sale{color:#146A4D;background:rgba(36,196,138,.16);}
.pl__where{margin-top:6px;font-size:11.5px;color:var(--text-2);}
.pl__blurb{margin:11px 0 0;font-size:15px;line-height:1.55;color:var(--text-2);}
.pl__facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;}
.pl__facts > span{min-width:0;}
.pl__facts .label{display:block;font-size:10px;}
.pl__facts .label + span{display:block;margin-top:4px;font-size:14px;color:var(--ink);}
.pl__event{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:16px;padding:10px 13px;border-radius:10px;background:#F4F1FE;}
.pl__event .mono{flex:none;font-size:10.5px;font-weight:500;letter-spacing:.167em;text-transform:uppercase;color:#5B34EF;}
.pl__event span + span{font-size:14px;line-height:1.4;}
.pl__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;}
.pl__tp{display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;padding:10px 16px;border-radius:10px;}
.pl__tp:hover{background:#5B34EF;color:#fff;}
.pl__copy{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--text-2);font-size:14px;font-weight:600;
  padding:10px 15px;border:1px solid #EAE8EE;border-radius:10px;cursor:pointer;font-family:inherit;}
.pl__copy:hover{border-color:var(--primary);color:#5B34EF;}
.pl__by{font-size:13.5px;color:var(--text-2);}

.pl__empty{padding:40px;background:#fff;border:1px solid #EAE8EE;border-radius:16px;text-align:center;}
.pl__emptyTitle{font-size:18px;font-weight:600;}
.pl__empty p{margin:10px auto 0;max-width:46ch;font-size:15px;line-height:1.6;color:var(--text-2);}
.pl__empty .pl__go{margin-top:20px;}

.pl__aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;}
.pl__panel{background:#fff;border:1px solid #EAE8EE;border-radius:16px;padding:20px;}
/* Die Karte zeigt EINE Region · das Bild ist ihre echte Kachel, der Umriss
   liegt als SVG darueber. Beide sind 256 m im Quadrat, also deckungsgleich.
   Ein Rahmen ueber das ganze Grid waere bei 136 Regionen unlesbar gewesen. */
.pl__map{position:relative;margin:14px 0 0;aspect-ratio:1;background:#F1EFF5;border-radius:10px;overflow:hidden;}
.pl__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pl__map svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* Die Karten sind anklickbar · sie fuehren die Karte rechts. */
.pl__card{cursor:pointer;transition:border-color .16s ease;}
.pl__card.is-shown{border-color:var(--primary);}
.pl__card:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.pl__thing{color:inherit;text-decoration:none;transition:background .16s ease;}
.pl__thing:hover{background:#FAFAFB;color:inherit;}
.pl__panelNote{margin:11px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2);}
.pl__panelNote strong{color:var(--ink);font-weight:600;}
.pl__panelLink{display:inline-block;margin-top:11px;font-size:14px;font-weight:600;}

/* Die Karte ist bei eingeklappter Aufteilung gedeckelt · sie traegt
   aspect-ratio 1, und eine ungedeckelte Spalte in voller Breite ergibt ein
   riesiges Quadrat, das alles darunter vom Schirm schiebt. */
@media (max-width:1120px){
  .pl__split{grid-template-columns:1fr;}
  .pl__aside{position:static;max-width:420px;}
}
@media (max-width:760px){
  .pl__thing{grid-template-columns:1fr;gap:4px;}
}
@media (max-width:620px){
  .pl__card{grid-template-columns:1fr;}
  .pl__photo{min-height:190px;}
  .pl{padding-left:20px;padding-right:20px;}
}


/* ---------- die vier oeffentlichen Seiten (Mesh, Residents, Viewer, FAQ) ---------- */
/* 1280 wie ueberall · siehe header.css bei .sh__inner. */
.pg{max-width:1280px;margin:0 auto;padding:0 32px;}
.pg__hero{padding-top:56px;}
.pg h1{margin:16px 0 0;max-width:22ch;font-size:clamp(34px,4.6vw,54px);font-weight:700;
  letter-spacing:-1.4px;line-height:1.04;color:var(--ink);text-wrap:balance;}
.pg__lead{margin:20px 0 0;max-width:56ch;font-size:19px;line-height:1.6;color:var(--text-2);text-wrap:pretty;}
.pg__lead--narrow{max-width:54ch;font-size:17px;}
.pg p{font-size:16.5px;line-height:1.65;color:var(--text-2);}
.pg__sec{padding-top:80px;}
.pg__h1b{margin:16px 0 0;max-width:26ch;font-size:clamp(28px,3.4vw,40px);font-weight:600;
  letter-spacing:-0.9px;line-height:1.1;color:var(--ink);text-wrap:balance;}
.pg__h1b--small{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.7px;}
.pg__h2{margin:0;font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.15;color:var(--ink);}
.pg__h3{margin:26px 0 0;font-size:19px;font-weight:600;letter-spacing:-.3px;color:var(--ink);}
.pg__h3:first-child{margin-top:0;}
.pg__two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-top:64px;}
.pg__two--tight{gap:48px;padding-top:26px;}
.pg__two--top{align-items:start;margin-top:36px;padding-top:0;}
.pg__split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:56px;align-items:start;}
.pg__strong{color:var(--ink);}
.pg__small{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);}
.pg__closing{margin:28px 0 0;max-width:52ch;font-size:17px;line-height:1.6;color:var(--ink);}

/* Das dunkle Band · der Grund, aus dem die Seite existiert. */
.pg__band{margin-top:72px;background:#191524;color:#C7C2D6;}
.pg__bandInner{max-width:1280px;margin:0 auto;padding:64px 32px;}
.pg__band p{color:#C7C2D6;}
.pg__bandH{margin:18px 0 0;max-width:26ch;font-size:clamp(26px,3.2vw,38px);font-weight:600;
  letter-spacing:-.8px;line-height:1.12;color:#fff;text-wrap:balance;}
.pg__bright{color:#fff;}
.eyebrow--onDark{color:#FFC53D;}
.eyebrow--amber{color:#8A5A0B;}
.eyebrow--green{color:#146A4D;}

/* Die drei Fallen · wer nur die Ueberschriften liest, hat alle drei. */
.pg__traps{display:flex;flex-direction:column;margin-top:40px;}
.pg__trap{display:grid;grid-template-columns:214px minmax(0,1fr);gap:40px;padding:32px 0;
  border-top:1px solid #EAE8EE;}
.pg__trap--last{border-bottom:1px solid #EAE8EE;}
.pg__trap h3{margin:0;max-width:34ch;font-size:21px;font-weight:600;letter-spacing:-.4px;
  line-height:1.25;color:var(--ink);}
.pg__trap p{margin:12px 0 0;max-width:62ch;}
/* Eine Ziffer, die etwas bedeutet, bekommt eine getoente Kachel · kein
   helleres Grau. Genau daran ist der erste Entwurf viermal gescheitert. */
.pg__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:rgba(255,197,61,.22);color:#8A5A0B;font-family:var(--mono);
  font-size:14px;font-weight:600;}
.pg__trap .label{margin-top:12px;}
.pg__chip{display:inline-flex;margin-top:10px;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.167em;text-transform:uppercase;color:#8A5A0B;background:rgba(255,197,61,.2);
  border-radius:5px;padding:3px 8px;}
.pg__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;max-width:600px;}
.pg__card{padding:16px 18px;border-radius:12px;background:#fff;border:1px solid #EAE8EE;}
.pg__cardH{margin-top:7px;font-size:16px;font-weight:600;color:var(--ink);}

/* Die Gebuehrentabelle bleibt klein · sonst liest sich die Seite als Verkauf. */
.pg__fees{border:1px solid #EAE8EE;border-radius:14px;background:#fff;overflow:hidden;}
.pg__feeHead{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.167em;
  text-transform:uppercase;color:var(--text-2);background:#FAFAFB;border-bottom:1px solid #EAE8EE;
  padding:11px 18px;display:flex;justify-content:space-between;gap:16px;}
.pg__feeRow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 18px;font-size:15px;}
.pg__feeRow + .pg__feeRow{border-top:1px solid #F1EFF5;}
.pg__feeRow > span:first-child{font-weight:600;color:var(--ink);}
.pg__feeRow > span:last-child{color:var(--text-2);}
.pg__free{color:#146A4D !important;}

/* Ein Objekt, drei Entfernungen · keine erfundenen Zahlen, die Balken sind
   nur relativ zueinander. Der violette wird kuerzer, der bernsteinfarbene nie. */
.pg__lodBox{padding:28px;border-radius:16px;background:#fff;border:1px solid #EAE8EE;}
.pg__lod{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:22px;}
.pg__lodShape{width:100%;height:62px;display:block;}
.pg__lodName{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink);}
.pg__bar{margin-top:6px;height:8px;border-radius:4px;}
.pg__bar:first-of-type{margin-top:10px;}
.pg__bar--violet{background:var(--primary);}
.pg__bar--amber{background:#FFC53D;}
.pg__legend{display:flex;flex-direction:column;gap:9px;margin-top:24px;padding-top:20px;
  border-top:1px solid #F1EFF5;font-size:13.5px;color:var(--text-2);}
.pg__legend > span{display:flex;align-items:center;gap:10px;}
.pg__key{flex:none;width:20px;height:8px;border-radius:4px;}
.pg__key--violet{background:var(--primary);}
.pg__key--amber{background:#FFC53D;}

.pg__tint{padding:36px 40px;border-radius:16px;background:#F4F1FE;}
/* Die letzte Zeile braucht Luft, sonst knallt sie an die Fusszeile · die
   folgt unmittelbar und ist dunkel. */
.pg__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:36px;
  padding-top:22px;padding-bottom:96px;border-top:1px solid #EAE8EE;font-size:15px;color:var(--text-2);}
.pg__foot strong{color:var(--ink);font-weight:600;}
.pg__foot a{font-weight:600;}

@media (max-width:920px){
  .pg__trap{grid-template-columns:1fr;row-gap:10px;}
  .pg__two,.pg__split{grid-template-columns:1fr;gap:40px;}
  .pg__pair{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .pg__lod{grid-template-columns:1fr;row-gap:26px;}
}
@media (max-width:560px){
  .pg{padding-left:20px;padding-right:20px;}
  .pg__bandInner{padding-left:20px;padding-right:20px;}
  .pg__tint{padding:24px 22px;}
}


/* ---------- AI Residents ---------- */
.pg__h1--narrow{max-width:20ch;}
/* Die Haltungszeile · zweitgroesster Satz der Seite. */
.pg__stance{margin:20px 0 0;max-width:34ch;font-size:clamp(20px,2.2vw,26px);font-weight:500;
  line-height:1.32;letter-spacing:-.4px;color:var(--ink);text-wrap:balance;}
.pg__sec--tight{padding-top:64px;}
.pg__quote{margin:36px 0 0;padding:0 0 0 22px;border-left:2px solid var(--primary);max-width:44ch;}
.pg__quote p{margin:0;font-size:clamp(20px,2.3vw,27px);font-weight:500;line-height:1.36;
  letter-spacing:-.4px;color:var(--ink);text-wrap:pretty;}

/* Die sechs Zusagen. Links allein muss als ganze Zusage lesbar sein · wer
   ueberfliegt, bekommt sechs Versprechen, wer bleibt, erfaehrt den Preis. */
.pg__ledger{margin-top:36px;}
.pg__row{display:grid;grid-template-columns:340px minmax(0,1fr);gap:40px;padding:26px 0;
  border-top:1px solid #EAE8EE;align-items:start;}
.pg__row:last-child{border-bottom:1px solid #EAE8EE;}
.pg__claim{display:flex;gap:14px;align-items:baseline;}
.pg__claim h3{margin:0;max-width:22ch;font-size:19px;font-weight:600;letter-spacing:-.35px;
  line-height:1.3;color:var(--ink);}
.pg__n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:26px;
  height:22px;border-radius:7px;background:rgba(110,75,255,.12);color:#5B34EF;font-size:11.5px;
  font-weight:600;font-variant-numeric:tabular-nums;}
.pg__row p{margin:0;max-width:62ch;}

.pg__split--wide{grid-template-columns:minmax(0,1fr) 400px;}
.pg__box{border:1px solid #EAE8EE;border-radius:16px;background:#fff;overflow:hidden;}
.pg__boxHead{background:#FAFAFB;border-bottom:1px solid #EAE8EE;padding:11px 20px;}
.pg__tick{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;font-size:15.5px;
  line-height:1.55;color:var(--ink);}
.pg__tick + .pg__tick{border-top:1px solid #F1EFF5;}
.pg__tickMark{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:rgba(36,196,138,.16);color:#146A4D;display:grid;place-items:center;}
.pg__cardP{margin:9px 0 0;font-size:14.5px;line-height:1.55;}

/* Clydes Satz. Das Mass ist 1080px, ABSICHTLICH in Pixeln · Outfits Ziffer
   ist viel schmaler als seine Buchstaben, ein ch-Wert loeste sich zu rund
   880px auf und knotete das Zitat in einem breiten Band zu fuenf kurzen
   Zeilen. Und `balance` waere hier falsch: es gleicht Zeilenlaengen an und
   zieht das Zitat schmal. `pretty` ist richtig. */
.pg__band--wide{margin-top:88px;}
.pg__band--wide .pg__bandInner{padding:72px 32px;}
.pg__bandLead{margin:20px 0 0;max-width:56ch;color:#A8A2B8 !important;}
.pg__bigQuote{margin:32px 0 0;padding:0;max-width:1080px;}
.pg__bigQuote p{margin:0;font-size:clamp(28px,3.9vw,48px);font-weight:500;line-height:1.22;
  letter-spacing:-1.1px;color:#fff !important;text-wrap:pretty;}
.pg__by{display:flex;align-items:center;gap:12px;margin-top:30px;}
.pg__avatar{width:32px;height:32px;flex:none;border-radius:50%;
  background:linear-gradient(140deg,#8B6BFF,#5B34EF);display:grid;place-items:center;
  font-size:13px;font-weight:600;color:#fff;}
.pg__byName{font-size:15px;color:#fff;}
.pg__bySince{font-size:11.5px;letter-spacing:.05em;color:#9A93AD;}

@media (max-width:920px){
  .pg__row{grid-template-columns:1fr;row-gap:12px;}
  .pg__split--wide{grid-template-columns:1fr;}
}


/* ---------- Get a viewer ---------- */
.pg__em{font-style:normal;color:#8A5A0B;}
.pg__small--wide{max-width:62ch;font-size:15px;}
.pg__viewers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;align-items:start;}
.pg__vCard{padding:24px;border-radius:16px;background:#fff;border:1px solid #EAE8EE;
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.pg__vCard.is-pick{border-color:#D8CFFB;}
.pg__vHead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pg__vHead h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--ink);}
.pg__vCard p{margin:11px 0 0;font-size:15.5px;line-height:1.6;}
.pg__chip--violet{color:#5B34EF;background:rgba(110,75,255,.12);}
.pg__vFoot{margin-top:16px;padding-top:14px;border-top:1px solid #F1EFF5;}
/* Jede Karte sagt ihre Ausgaben-Lage selbst · das haelt die Warnung genau,
   statt sie zu "die meisten Viewer" zu verallgemeinern. */
.pg__vBuilds{font-size:13.5px;font-weight:600;}
.pg__vBuilds.is-warn{color:#8A5A0B;}
.pg__vBuilds.is-fine{color:#146A4D;}
.pg__vPlat{margin-top:7px;font-size:11.5px;letter-spacing:.04em;color:var(--text-2);}
.pg__vCard > a{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14.5px;font-weight:600;}

/* Das dunkle Band ist die Belohnung: die Adresse gross und kopierbar. */
.pg__addr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;padding:18px 22px;
  border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);max-width:640px;}
.pg__addr .mono{min-width:0;font-size:clamp(16px,2vw,22px);color:#fff;word-break:break-all;}
.pg__copy{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:#241704;background:#FFC53D;border:0;border-radius:10px;padding:9px 15px;cursor:pointer;font-family:inherit;}
.pg__copy:hover{background:#FFD46B;}
.pg__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px;}
.pg__stepN{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;
  border-radius:7px;background:rgba(255,197,61,.16);color:#FFC53D;font-size:12px;font-weight:600;}
.pg__steps h3{margin:14px 0 0;font-size:18px;font-weight:600;letter-spacing:-.3px;color:#fff;}
.pg__steps p{margin:9px 0 0;font-size:15.5px;line-height:1.6;color:#A8A2B8 !important;}

.pg__split--wider{grid-template-columns:minmax(0,1fr) 420px;}
.pg__note{padding:16px 20px;}
.pg__note + .pg__note{border-top:1px solid #F1EFF5;}
.pg__noteH{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);}
.pg__note p{margin:6px 0 0;font-size:14.5px;line-height:1.55;}
.pg__onward{display:flex;flex-direction:column;gap:12px;font-size:16px;font-weight:600;}

@media (max-width:920px){
  .pg__viewers,.pg__steps{grid-template-columns:1fr;}
  .pg__split--wider{grid-template-columns:1fr;}
}


/* ---------- Help & FAQ ---------- */
.fq{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;margin-top:56px;align-items:start;}

/* ⚠ Die Leiste MUSS gedeckelt sein und ihren eigenen Ueberlauf scrollen. Die
   Liste ist ueber 700px hoch, und ein klebendes Element kann seinen Ueberlauf
   NIE ins Bild scrollen · es heftet sich wieder an `top`. Ohne die Deckelung
   ist die letzte Gruppe (Privacy) auf einem normalen Laptop unerreichbar. */
.fq__rail{position:sticky;top:100px;max-height:calc(100vh - 124px);overflow-y:auto;
  padding-right:8px;}
.fq__railGroup + .fq__railGroup{margin-top:22px;}
.fq__railGroup .label{margin-bottom:8px;}
.fq__rail a{display:block;font-size:14.5px;line-height:1.4;color:var(--text-2);padding:5px 0;}
.fq__rail a:hover{color:#5B34EF;}

.fq__main{min-width:0;}
.fq__group{margin:0 0 4px;font-size:11px;font-family:var(--mono);font-weight:500;
  letter-spacing:.167em;text-transform:uppercase;color:var(--text-2);}
.fq__group + .fq__a{border-top:0;padding-top:8px;}
.fq__a{padding:28px 0;border-top:1px solid #EAE8EE;scroll-margin-top:96px;}
.fq__a:first-of-type{border-top:0;}
.fq__a h3{margin:0;max-width:34ch;font-size:23px;font-weight:600;letter-spacing:-.5px;
  line-height:1.25;color:var(--ink);}
.fq__a p{margin:12px 0 0;max-width:68ch;}
.fq__more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:15px;font-weight:600;}
.fq__group:not(:first-child){margin-top:44px;}

/* Die zwei Tueren · dieselbe Verwechslung kommt im Quelltext dreimal vor,
   deshalb steht sie zweimal als Kartenpaar und nicht als Satz. */
.fq__doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
.fq__door{padding:18px 20px;border-radius:12px;background:#fff;border:1px solid #EAE8EE;}
.fq__door.is-pick{border-color:#D8CFFB;background:#FCFBFF;}
.fq__doorH{margin-top:8px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);}
.fq__door p{margin:9px 0 0;font-size:14.5px;line-height:1.55;max-width:none;}
.fq__door .fq__more{font-size:14px;margin-top:11px;}

.fq__aside{margin-top:18px;padding:16px 20px;border-radius:12px;background:#F4F1FE;}
.fq__asideH{font-size:15px;font-weight:600;color:var(--ink);}
.fq__aside p{margin:7px 0 0;font-size:15px;max-width:none;}

.fq__fees{margin-top:18px;max-width:420px;}

.fq__cookies{margin-top:18px;border:1px solid #EAE8EE;border-radius:12px;background:#fff;overflow:hidden;}
.fq__cookie{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:14px 18px;
  font-size:14.5px;line-height:1.55;color:var(--text-2);}
.fq__cookie + .fq__cookie{border-top:1px solid #F1EFF5;}
.fq__cookie .mono{font-size:13px;color:var(--ink);word-break:break-all;}

/* Der staerkste Satz der Seite bekommt eine eigene Karte statt eines
   Nebensatzes: eine Datenzusage, die nicht still veralten kann. */
.fq__checks{margin-top:20px;padding:18px 22px;border-radius:12px;
  background:rgba(36,196,138,.09);border:1px solid rgba(36,196,138,.28);}
.fq__checksH{font-size:16px;font-weight:600;color:#146A4D;}
.fq__checks p{margin:8px 0 0;font-size:15px;max-width:none;}

/* Gestapelt setzt die Leiste beide Eigenschaften zurueck · sonst behaelt sie
   ihre Deckelung, wo sie gar nicht mehr klebt. */
@media (max-width:1000px){
  .fq{grid-template-columns:1fr;gap:32px;}
  .fq__rail{position:static;max-height:none;overflow-y:visible;
    padding:20px;border:1px solid #EAE8EE;border-radius:14px;background:#fff;}
  .fq__doors{grid-template-columns:1fr;}
  .fq__cookie{grid-template-columns:1fr;gap:4px;}
}


/* ---------- Places v2 ---------- */
.pl--v2{padding-top:32px;}
/* Das Feld steht unter dem Hero. Im Antwort-Modus verschwinden Hero und
   Kacheln, also ist es dann von selbst das erste Element · und die Treffer
   liegen zwangslaeufig darunter. Keine zweite Stelle, an der eine
   Reihenfolge gepflegt werden muesste. */



.pl__count{font-size:14.5px;color:var(--text-2);}
.pl__clear{background:none;border:0;font-family:inherit;font-size:14.5px;font-weight:600;
  color:#5B34EF;cursor:pointer;padding:0;}

/* Der Hero · die vollste Darstellung der Seite. Er arbeitet zweimal:
   Einladung beim Stoebern, Antwort wenn jemand einen Ort waehlt. */


.pl__heroPhoto img{width:100%;height:100%;object-fit:cover;display:block;}
.pl__heroBody h1{margin:12px 0 0;font-size:clamp(28px,3.4vw,42px);font-weight:700;
  letter-spacing:-1.1px;line-height:1.06;color:var(--ink);}
.pl__heroWhere{margin-top:8px;font-size:12px;color:var(--text-2);}
.pl__heroBody .pl__kat{margin-top:12px;}
.pl__heroBody p{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--text-2);max-width:52ch;}
.pl__heroActions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;}

/* Kategorien zuerst · die Auskunft des Eigentuemers, nicht unsere Ableitung. */
.pl__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;}

.pl__tile:hover{border-color:var(--primary);color:var(--ink);}
.pl__tile.is-on{border-color:var(--primary);}
.pl__tileName{font-weight:600;}
.pl__tileN{font-size:12px;color:var(--text-2);}

.pl__wall{display:flex;flex-direction:column;gap:18px;margin-top:28px;}
.pl__secHead{margin-top:28px;}

/* Das Kartenfenster · das einzige bewegliche Stueck der Seite. */
.pl__mapSec{margin-top:56px;}
.pl__mapHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:18px;}
.pl__mapHead h2{margin:14px 0 0;font-size:clamp(24px,2.8vw,32px);font-weight:600;
  letter-spacing:-.7px;line-height:1.15;color:var(--ink);}
.pl__mapHead p{margin:12px 0 0;max-width:54ch;font-size:16px;line-height:1.6;color:var(--text-2);}
.pl__frame{position:relative;height:358px;border-radius:18px;overflow:hidden;
  background:#EDE9F8;border:1px solid #DDD6EE;cursor:grab;touch-action:none;}
.pl__frame:active{cursor:grabbing;}
.pl__plane{position:absolute;inset:0;transform-origin:0 0;will-change:transform;}
.pl__wash{position:absolute;inset:0;
  background-image:radial-gradient(70% 90% at 30% 25%, rgba(110,75,255,.13) 0%, rgba(110,75,255,0) 60%),
                   radial-gradient(60% 80% at 74% 68%, rgba(36,196,138,.13) 0%, rgba(36,196,138,0) 60%);}
.pl__grid{position:absolute;inset:0;
  background-image:linear-gradient(to right, rgba(35,35,43,.07) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(35,35,43,.07) 1px, transparent 1px);
  background-size:6.25% 6.25%;}
.pl__pin{position:absolute;border-radius:50%;background:var(--primary);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(26,43,60,.3);}
.pl__parcel{position:absolute;border:1.5px solid #5B34EF;background:rgba(110,75,255,.28);
  border-radius:2px;transform:translate(-50%,-50%);}
/* Ein Ding auf ungelistetem Land bekommt einen orangen Punkt · genau die
   Unterscheidung, die die Zeile schon macht. */
.pl__spot{position:absolute;border-radius:50%;background:#FF8A3D;border:1.5px solid #fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(26,43,60,.35);}
.pl__zooms{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;}
.pl__zooms button{padding:6px 12px;border-radius:8px;font-family:inherit;font-size:12px;
  font-weight:600;cursor:pointer;border:1px solid #DDD6EE;background:rgba(255,255,255,.92);
  color:var(--text-2);transition:all .16s ease;}
.pl__zooms button.is-on{border-color:var(--primary);background:var(--primary);color:#fff;}
.pl__focus{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:9px;
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid #DDD6EE;
  font-size:12.5px;font-weight:600;color:var(--ink);}
.pl__focusDot{width:8px;height:8px;flex:none;border-radius:2px;background:var(--primary);}
.pl__focus button{background:none;border:0;padding:0 0 0 3px;font-family:inherit;font-size:12px;
  font-weight:600;color:#5B34EF;cursor:pointer;}
/* #5C5C67, nicht ein frisch erfundener Zwischenton · der Hinweis wird
   GELESEN, also gilt fuer ihn die Lesefarbe. */
.pl__hint{position:absolute;left:14px;bottom:12px;font-size:10.5px;letter-spacing:.05em;
  color:var(--text-2);pointer-events:none;}

.pl__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:56px;}

/* Im Antwort-Modus stehen Feld und Treffer zusammen im ersten Bild · kein
   Scrollen, kein Zurueckscrollen. Und kein bezahltes Band: Werbung ueber der
   Antwort auf eine konkrete Frage ist das, was Verzeichnisse unglaubwuerdig
   macht. */
.pl--v2.is-answer .pl__mapSec{margin-top:36px;}
.pl--v2.is-answer .pl__wall{margin-top:20px;}

@media (max-width:900px){
  /* KEIN eigenes Polster mehr · das kam aus Places v1, die Vorlage kennt
     es nicht. .pl--v2 setzt Raster und Abstand, nannte das Polster aber
     nicht und konnte es deshalb nicht ueberschreiben. */
  .pl__hero{grid-template-columns:1fr;gap:24px;}
  .pl__frame{height:280px;}
}


/* ---------- die Grid-Karte (x-grid-map) ---------- */
.gm__frame{border-radius:18px;overflow:hidden;background:#EDE9F8;border:1px solid #DDD6EE;}
.gm__frame .leaflet-container{background:#EDE9F8;font:12px/1.4 var(--sans, system-ui), sans-serif;}

/* #5C5C67, kein frisch erfundener Zwischenton · der Hinweis wird GELESEN. */



/* ===================================================== Places v3 ========
   Nach "Places v2.dc.html" aus design_handoff_places_v3. Die Masse stehen
   dort inline; hier sind sie einmal benannt, damit sie an einer Stelle
   gepflegt werden. Der Rahmen ist seit dem v6-Audit 1280px, wie ueberall ·
   siehe header.css bei .sh__inner. */

/* Der Antwort-Balken · nur sichtbar, wenn etwas getippt ist. */
.pl__answerbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid #EAE8EE;margin-bottom:32px;}
/* Bis zum Clear-Knopf durch. Die alte .pl__search deckelt bei 480px ·
   eine neue Regel gewinnt nur fuer das, was sie auch nennt. */
.pl__search--wide{flex:1;min-width:260px;max-width:none;}
.pl__search--wide input{width:100%;font-size:17px;padding:14px 16px 14px 40px;
  border:1px solid #D8CFFB;border-radius:12px;background:#fff;color:#23232B;}
.pl__search--wide svg{left:14px;width:17px;height:17px;color:#5C5C67;}
.pl__summary{font-size:15px;color:#5C5C67;}

/* Kopfzeile der Kategorien · Frage links, Abkuerzung rechts. */
.pl__catHead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:48px;}
.pl__catHead h2{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;
  letter-spacing:-.6px;line-height:1.15;}
.pl__catHead p{margin:8px 0 0;max-width:52ch;font-size:15.5px;line-height:1.6;color:#5C5C67;}
.pl__catHead .pl__find{margin:0;}
.pl__catHead .pl__search{position:relative;display:flex;align-items:center;}
.pl__catHead .pl__search svg{position:absolute;left:12px;width:15px;height:15px;
  color:#9A9AA6;pointer-events:none;}
.pl__catHead .pl__search input{width:320px;max-width:100%;font-size:15px;
  padding:12px 15px 12px 34px;border:1px solid #EAE8EE;border-radius:12px;
  background:#fff;color:#23232B;}

/* Die Kacheln · Symbol im farbigen Quadrat, Name, Zahl. Waagerecht
   scrollbar, damit eine wachsende Zahl von Kategorien die Zeile nicht
   umbricht und die Reihenfolge zerlegt. */
.pl__tiles{display:flex;gap:12px;overflow-x:auto;padding:22px 2px 6px;margin:0 -2px;}
.pl__tile{flex:none;width:132px;text-align:left;padding:16px;border-radius:14px;
  background:#fff;border:1px solid #EAE8EE;box-shadow:0 1px 3px rgba(26,43,60,.05);
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .18s ease;}
.pl__tile:hover{transform:translateY(-2px);border-color:#DDD6EE;}
.pl__tile.is-on{border-color:#6E4BFF;box-shadow:0 4px 14px rgba(110,75,255,.14);}
.pl__tileIcon{display:grid;place-items:center;width:36px;height:36px;
  margin-bottom:12px;border-radius:10px;background:#F1EFF5;color:#5C5C67;}
/* Der Name darf umbrechen · 132px halten kein Symbol UND "Newcomer
   friendly" nebeneinander. Vorher stand hier nowrap, und genau davon lief
   der Text aus der Kachel und die Zahl daneben ins Nichts. */
.pl__tileName{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.25;}
.pl__tileN{display:block;margin-top:4px;font-size:12px;color:#5C5C67;}

/* Die Farbtoene der Vorlage. Kein neuer Ton fuer ein neues Element · das
   README nennt genau diesen Fehler. */
.pl__tileIcon[data-tone="all"]        {background:rgba(110,75,255,.12);color:#5B34EF;}
.pl__tileIcon[data-tone="Park"]       {background:rgba(36,196,138,.14);color:#146A4D;}
.pl__tileIcon[data-tone="Arts"]       {background:rgba(251,90,106,.13);color:#9E2B36;}
.pl__tileIcon[data-tone="Residential"]{background:rgba(59,155,255,.13);color:#1B5C9E;}
.pl__tileIcon[data-tone="Hangout"]    {background:rgba(232,90,196,.13);color:#8E2374;}
.pl__tileIcon[data-tone="Gaming"]     {background:rgba(255,138,61,.16);color:#8A4A0B;}
.pl__tileIcon[data-tone="Educational"]{background:rgba(34,195,214,.14);color:#0F5D68;}
.pl__tileIcon[data-tone="Shopping"]   {background:rgba(255,197,61,.2);color:#8A5A0B;}
.pl__tileIcon[data-tone="Newcomer"]   {background:rgba(255,111,165,.14);color:#96305A;}
.pl__tileIcon[data-tone="Adult"]      {background:rgba(92,92,103,.12);color:#42424D;}

/* Wand-Ueberschrift mit den Linsen in derselben Zeile. */
.pl__wallHead{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:44px;padding-bottom:14px;border-bottom:1px solid #EAE8EE;}
.pl__wallHead h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.4px;}
/* Der obere Rand der ALTEN Regel (site.css, Places v1) zaehlt bei
   align-items:baseline im .pl__wallHead mit und schob die Ueberschrift
   um rund 26px auseinander. Hier ausdruecklich zurueckgesetzt · eine
   neue Regel gewinnt nur fuer das, was sie auch nennt. */
.pl__lenses{margin-top:0;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;}
.pl__lens{font-size:14.5px;font-weight:400;color:#5C5C67;text-decoration:none;
  padding-bottom:2px;border-bottom:2px solid transparent;}
.pl__lens:hover{color:#5B34EF;}
.pl__lens.is-on{color:#6E4BFF;border-bottom-color:#6E4BFF;font-weight:600;}
/* Die Zahl ist die Auskunft, wegen der man die Linse ueberhaupt anklickt ·
   sie wird GELESEN und traegt deshalb den Lesetext-Ton (#5C5C67), nicht
   den fuer beilaeufiges Beiwerk. */
.pl__lens .mono{margin-left:6px;font-size:11px;color:#5C5C67;font-weight:500;}
.pl__lens.is-on .mono{color:#6E4BFF;}
.pl__lensNote{margin:14px 0 0;max-width:70ch;font-size:14.5px;line-height:1.6;color:#5C5C67;}

/* Die Dinge · ein violetter Kasten NACH den Linsen, weil sie die Wand
   darunter einschraenken und nicht ueber ihr stehen. */
.pl--v2 .pl__things{margin-top:24px;padding:20px 24px;border-radius:16px;background:#F4F1FE;border:0;}

/* Die Karte im Hero · fuellt die linke Haelfte ganz aus. Kein eigener
   Radius und kein eigener Rahmen: die Hero-Karte hat beides schon, und
   eine zweite runde Kante darin liest sich als Versehen. */
/* DIESELBE RASTERZELLE wie das Foto · nicht position:absolute. Absolut
   ohne positionierten Elternteil sucht sich das Fenster, und die Karte lag
   ueber der ganzen Seite. Sichtbar ist immer nur eines von beiden. */
.pl__heroMap{grid-column:1;grid-row:1;position:relative;overflow:hidden;background:#EDE9F8;min-height:412px;}
.pl__heroMap .gm{height:100%;}
.pl__heroMap .gm__frame{height:100% !important;border-radius:0;border:0;}

/* Das zurueckgestufte Foto · 16:9 ueber dem Text. */
.pl__heroStrip{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;
  overflow:hidden;background:#F1EFF5;border:1px solid #EAE8EE;margin-bottom:22px;
  display:grid;place-items:center;}
.pl__heroStrip img{width:100%;height:100%;object-fit:cover;}

/* ============================ Bau-Spiegel v3 ==========================
   Literale Werte aus dem nachgereichten README. Wo hier nichts steht,
   gilt weiter, was die Geschwisterseiten (Mesh, FAQ, Viewer, Residents)
   tragen · sie teilen denselben Satz. */

/* Der Hero · 1.45 zu 1, damit das Bild fuehrt und der Text nicht quetscht. */
.pl--v2 .pl__hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:0;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #EAE8EE;
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.pl--v2 .pl__heroPhoto{position:relative;min-height:412px;background:#F1EFF5;}
.pl--v2 .pl__heroBody{padding:40px;display:flex;flex-direction:column;justify-content:center;}
.pl--v2 .pl__hero h1{font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-1px;line-height:1.06;}

/* Die Wand · drei Spalten, und eine Karte bleibt eine Karte. Eine einzelne
   Parzelle wird NICHT zur vollbreiten Zeile; sie behaelt ihre Spalte und die
   Reihe ist eben kurz. */
.pl--v2 .pl__wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;margin-top:28px;align-items:start;}
.pl--v2 .pl__card{border-radius:16px;border:1px solid #EAE8EE;background:#fff;
  box-shadow:0 1px 3px rgba(26,43,60,.05);overflow:hidden;}
.pl--v2 .pl__photo{aspect-ratio:4/3;background:#F1EFF5;overflow:hidden;}
.pl--v2 .pl__photo img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.25,1);}
.pl--v2 .pl__card:hover .pl__photo img{transform:scale(1.04);}
.pl--v2 .pl__body{padding:18px;}
.pl--v2 .pl__card h3{font-size:17px;font-weight:600;}

/* Das Kartenfenster · 360px FEST. Eine Karte, die den Schirm fuellt, ist
   keine Tafel auf einer Seite mehr, sondern die Seite. */
.pl__mapSec{background:#F4F1FE;}


/* Die Erklaer-Karten. */
.pl--v2 .pl__why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.pl--v2 .pl__why > *{padding:24px;border-radius:16px;background:#fff;border:1px solid #EAE8EE;}

/* Das bezahlte Band · warmes Papier, damit es sich sichtbar vom Rest
   abhebt. Wer bezahlt hat, soll erkennbar sein, nicht getarnt. */
.pl__paid{margin-top:36px;padding:22px 24px;border-radius:16px;
  background:#FFFBF0;border:1px solid #F0E6C8;}
.pl__paidHead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pl__paidHead .label{font-size:10.5px;font-weight:500;letter-spacing:.167em;
  text-transform:uppercase;color:#8A5A0B;}
.pl__paidHead span{font-size:13px;color:#8A5A0B;}
.pl__paidSide{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

/* Der Ausloeser fuer das Erklaerfeld · sitzt neben dem Satz, den er
   erklaert, nicht irgendwo darunter. */
.pl__howBtn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:999px;font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .18s ease;border:1px solid #F0E6C8;
  background:#fff;color:#8A5A0B;}
.pl__howBtn[aria-expanded="true"]{border-color:#E0C88A;background:#FFF6E0;}
.pl__howBtn svg{flex:none;transition:transform .2s ease;}
.pl__howBtn[aria-expanded="true"] svg{transform:rotate(180deg);}

/* Das Erklaerfeld. Links die Warteschlange, die es wirklich gibt, rechts
   der Rechner. */
.pl__how{margin-top:18px;padding:20px 22px;border-radius:14px;background:#fff;
  border:1px solid #F0E6C8;animation:pl-in .26s cubic-bezier(.2,.8,.25,1) both;}
.pl__howIn{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;}
.pl__howLeft{min-width:0;}
.pl__howH{font-size:16px;font-weight:600;letter-spacing:-.2px;}
.pl__howP{margin:9px 0 0;font-size:14px;line-height:1.6;color:#5C5C67;}
.pl__howNote{margin:11px 0 0;font-size:12.5px;line-height:1.55;color:#5C5C67;}
.pl__ladderWrap{margin-top:18px;}
.pl__ladderH{font-size:9.5px;font-weight:600;letter-spacing:.167em;
  text-transform:uppercase;color:#8A6A2E;}
.pl__ladder{display:flex;flex-direction:column;gap:3px;margin-top:10px;}
.pl__rung{display:flex;align-items:center;gap:11px;padding:6px 0;}
.pl__rungNo{flex:none;width:20px;font-size:11px;color:#8A6A2E;}
.pl__rungName{flex:1;min-width:0;font-size:13.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:#23232B;}
/* "another place" ist die einzige Kennzeichnung der Zeile · sie traegt
   deshalb den LESE-Ton und sagt ihren Unterschied ueber die Schriftlage,
   nicht ueber Blaesse. #9A9AA6 misst hier 2,78:1 und faellt durch. */
.pl__rungName.is-other{color:#5C5C67;font-style:italic;}
.pl__rungBar{flex:none;width:88px;height:5px;border-radius:3px;background:#F1EFF5;overflow:hidden;}
.pl__rungBar span{display:block;height:100%;border-radius:3px;}
.pl__rungAmt{flex:none;font-size:12px;color:#5C5C67;}

.pl__calc{padding:18px;border-radius:12px;background:#FFFBF0;border:1px solid #F0E6C8;}
.pl__calc .label{font-size:9.5px;font-weight:600;letter-spacing:.167em;
  text-transform:uppercase;color:#8A6A2E;}
.pl__calcIn{display:flex;align-items:center;gap:9px;margin-top:12px;}
.pl__calcCur{flex:none;font-size:13px;color:#5C5C67;}
.pl__calcIn input{width:100%;font-size:16px;padding:10px 12px;border:1px solid #EAE8EE;
  border-radius:10px;background:#fff;color:#23232B;font-family:inherit;}
.pl__calcWk{flex:none;font-size:11.5px;color:#8A6A2E;}
.pl__calcRank{margin-top:16px;font-size:24px;font-weight:600;letter-spacing:-.5px;color:#9A9AA6;}
.pl__calcRank.is-in{color:#23232B;}
.pl__calcRank.is-top{color:#8A5A0B;}
.pl__calcNote{margin-top:5px;font-size:13.5px;line-height:1.55;color:#5C5C67;}
.pl__calcShare{margin-top:16px;padding-top:14px;border-top:1px solid #F1EFF5;}
.pl__calcShareH{font-size:11px;color:#8A6A2E;}
.pl__calcBar{margin-top:6px;height:7px;border-radius:4px;background:#F1EFF5;overflow:hidden;}
.pl__calcBar span{display:block;height:100%;border-radius:4px;background:#C79A3A;
  transition:width .18s ease;}
.pl__calcSharePct{margin-top:6px;font-size:12px;color:#5C5C67;}
.pl__calcHow{margin-top:14px;font-size:12.5px;}
.pl__calcHow strong{color:#23232B;font-weight:600;}

/* DIE SPUR FOLGT DER UEBERLEBENDEN ANZAHL. Drei reservierte Spalten fuer
   eine Anzeige lassen zwei Drittel eines gefuellten, gerahmten Kastens
   leer · das war der sichtbarste Fehler der Seite. */
.pl__ads{display:grid;grid-template-columns:repeat(var(--spuren,3),minmax(0,1fr));
  gap:16px;margin-top:18px;}
.pl__ad{display:flex;flex-direction:column;text-align:left;border-radius:12px;
  border:1px solid #F0E6C8;background:#fff;text-decoration:none;color:inherit;
  overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.pl__ad:hover{border-color:#E0C88A;box-shadow:0 6px 18px rgba(138,90,11,.10);
  transform:translateY(-2px);}
.pl__adShot{position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:#F6EFDC;overflow:hidden;}
.pl__adShot img{display:block;width:100%;height:100%;object-fit:cover;}
.pl__adNoShot{position:absolute;inset:0;display:grid;place-items:center;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#B08B2E;}
/* Das Plaettchen sitzt AUF dem Bild · die Karte muss sagen, wofuer bezahlt
   wurde, sonst ist bezahlte Werbung von einer Empfehlung nicht zu
   unterscheiden. */
.pl__adKat{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.93);
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#8A5A0B;}
.pl__adBody{display:block;padding:14px 16px 16px;}
.pl__adName{display:block;font-size:16px;font-weight:600;letter-spacing:-.2px;}
.pl__adWhere{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;color:#8A6A2E;}
/* Der Werbetext ist der EIGENE Text des Werbenden und wird hart auf zwei
   Zeilen geklemmt. Ohne Klemmung zieht eine lange Beschreibung ihre Karte
   beliebig lang und reisst die Reihe auf. */
.pl__adLine{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:7px;font-size:13.5px;line-height:1.5;color:#5C5C67;}

/* EINE EINZELNE ANZEIGE IST EINE WAAGERECHTE KARTE · sie spannt das Band,
   statt als Kaestchen links darin zu sitzen. */
.pl__ads.is-single .pl__ad{flex-direction:row;align-items:stretch;}
.pl__ads.is-single .pl__adShot{flex:none;width:38%;aspect-ratio:auto;min-height:150px;}
.pl__ads.is-single .pl__adBody{display:flex;flex-direction:column;justify-content:center;
  flex:1;padding:20px 24px;}

@media (max-width:900px){
  .pl__howIn{grid-template-columns:1fr;gap:20px;}
  .pl__ads{grid-template-columns:repeat(min(var(--spuren,3),2),minmax(0,1fr));}
}
@media (max-width:820px){ .pl__howIn{grid-template-columns:1fr;} }
@media (max-width:560px){
  .pl__ads{grid-template-columns:1fr;}
  .pl__ads.is-single .pl__ad{flex-direction:column;}
  .pl__ads.is-single .pl__adShot{width:100%;aspect-ratio:16/9;min-height:0;}
}

/* Die Anwesenheit. Gruen wie "gebaut", aber eigener Ton: es ist keine
   Bauspur, sondern etwas, das JETZT gilt. */
.pl__badge--live{color:#146A4D;background:rgba(36,196,138,.16);}
.pl__livePill{position:absolute;left:20px;bottom:20px;z-index:2;
  display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;
  background:rgba(250,250,251,.94);border:1px solid #EAE8EE;
  box-shadow:0 1px 3px rgba(26,43,60,.08);font-size:11.5px;color:#23232B;}

/* Eine Linse mit null Treffern bleibt stehen und sieht abgeschaltet aus ·
   dass dort nichts ist, IST eine Auskunft. */
.pl__lens.is-empty{color:#B7B7C2;pointer-events:none;}
.pl__lens.is-empty .mono{color:#B7B7C2;}

/* Die Umbrueche, alle. */
@media (max-width:1000px){
  .pl--v2 .pl__hero{grid-template-columns:1fr;}
  .pl--v2 .pl__heroBody{padding:28px;}
  .pl--v2 .pl__heroPhoto{min-height:280px;}
}
@media (max-width:900px){ .pl--v2 .pl__wall{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .pl--v2 .pl__wall{grid-template-columns:1fr;} }

/* Foto und Karte teilen sich die linke Zelle · sichtbar ist immer nur eines. */
.pl--v2 .pl__heroPhoto{grid-column:1;grid-row:1;position:relative;min-height:412px;
  background:#F1EFF5;aspect-ratio:auto;border-radius:0;overflow:hidden;}
.pl--v2 .pl__heroPhoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pl--v2 .pl__heroBody{grid-column:2;grid-row:1;}

/* Ein Abzeichen ist so breit wie sein Wort. In einer Spalte aus flex
   dehnen sich Kinder sonst auf die volle Breite · daher der Balken quer
   durch den Hero, wo "Parks & nature" stehen sollte. */
.pl--v2 .pl__heroBody .pl__kat,
.pl--v2 .pl__heroBody .eyebrow{align-self:flex-start;}

/* Die Wandkarte · Foto OBEN, Text darunter. Die alte Regel legte beides
   nebeneinander und liess in einer Drittelspalte keinen Platz. */
.pl--v2 .pl__card{display:block;}
.pl--v2 .pl__photo{display:block;position:relative;min-height:0;}
.pl--v2 .pl__photo img{width:100%;height:100%;object-fit:cover;}
.pl--v2 .pl__noPhoto{position:absolute;inset:0;display:grid;place-items:center;}
.pl--v2 .pl__titleRow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.pl--v2 .pl__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

/* Eine Klasse mit display:flex schlaegt die eingebaute Regel fuer das
   hidden-Attribut · dann bliebe sichtbar, was verschwinden soll. Hier
   einmal festgenagelt, damit das Umschalten nicht davon abhaengt, welche
   Regel eine Flaeche zufaellig traegt. */
.pl [hidden], .pl[hidden]{display:none !important;}

/* --------------------------------------------- Skimis vier Punkte -------- */

/* 1 · Der Text neben dem Suchfeld sprang, weil die alte .pl__summary ein
   margin-top:20px traegt und meine neue margin nicht nannte. Zum dritten
   Mal dieselbe Falle · deshalb steht hier jetzt der Rueckbau ausdruecklich
   dabei, statt sich darauf zu verlassen, spaeter im Blatt zu stehen. */
.pl__answerbar .pl__summary{margin:0;align-self:center;}
.pl__answerbar .pl__clear{margin:0;align-self:center;padding:0;line-height:1.4;}
.pl__answerbar .pl__search{align-self:center;}

/* 2 · Das violette Band stoesst durch · es steht jetzt hinter <main>, also
   traegt es die Seitenbreite nicht mehr und braucht eine eigene Innenhuelle. */
.pl__mapSec{background:#F4F1FE;margin-top:72px;padding:56px 0;}
.pl__mapInner{max-width:1280px;margin:0 auto;padding:0 32px;}
.pl__tail{margin-top:56px;}

/* 4 · Die Fussleiste liegt auf ECHTEN Kacheln, und die sind dunkel. Die
   Vorlage rechnet mit ihrem hellen Platzhaltergrund (#EDE9F8), auf dem
   grauer Text und ein lila Link noch gehen. Hier tragen beide ein helles
   Kissen · dieselbe Loesung, die die Vorlage fuer ihre Zoom-Knoepfe waehlt. */

/* ======================= Die Karte und ihre Bedienelemente ==============
   EIGENE STAPELEBENE. Leaflet legt seine Ebenen bis z-index 800, unsere
   Kopfzeile liegt auf 50 · ohne eigenen Kontext gewinnt die Karte und
   schiebt sich beim Hochscrollen davor. z-index:0 hier macht daraus einen
   eigenen Raum: innen darf Leaflet zaehlen wie es will. Das ist besser,
   als der Kopfzeile eine groessere Zahl zu geben · sonst muesste jede
   kuenftige Flaeche denselben Wettlauf neu gewinnen. */
.gm{position:relative;z-index:0;}
.gm__frame{border-radius:18px;overflow:hidden;background:#EDE9F8;border:1px solid #DDD6EE;}

.gm__zooms{position:absolute;left:14px;top:14px;z-index:600;display:flex;gap:8px;}
/* Buttons, keine Pillen · Skimis Ansage, und die v4-Vorlage zeichnet sie
   genauso (Radius 8, aktiv gefuellt). */
.gm__zoom{font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;
  border-radius:8px;border:1px solid #DDD6EE;background:rgba(255,255,255,.92);
  color:#5C5C67;cursor:pointer;transition:all .16s ease;}
.gm__zoom:hover{border-color:#6E4BFF;color:#5B34EF;}
.gm__zoom.is-on{background:#6E4BFF;border-color:#6E4BFF;color:#fff;}
.gm__zoom:hover{border-color:#6E4BFF;}

.gm__focus{position:absolute;right:14px;top:14px;z-index:600;display:flex;
  align-items:center;gap:9px;padding:7px 12px;border-radius:10px;
  background:rgba(255,255,255,.94);border:1px solid #DDD6EE;}
.gm__swatch{width:8px;height:8px;flex:none;border-radius:2px;background:#6E4BFF;}
.gm__focusName{font-size:12.5px;font-weight:600;color:#23232B;}
.gm__back{background:none;border:0;padding:0 0 0 3px;font-family:inherit;
  font-size:12px;font-weight:600;color:#5B34EF;cursor:pointer;}
.gm__back:hover{color:#6E4BFF;}

/* Der Hinweis traegt KEINE Pille · so wollte es die Vorlage. Damit er auf
   echten Kacheln trotzdem lesbar bleibt (die sind dunkel, anders als der
   helle Platzhaltergrund der Vorlage), steht er weiss mit einem Schatten:
   das traegt ueber Wasser wie ueber Wiese. */
.gm__hint{position:absolute;left:14px;bottom:12px;z-index:600;font-size:10.5px;
  letter-spacing:.05em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75);
  pointer-events:none;}

/* Weiss umrandet, lila Kern, pulsend. */
.gm-dot{background:none;border:0;}
.gm-dot span{display:block;width:20px;height:20px;border-radius:50%;
  background:#FF8A3D;border:3px solid #fff;box-shadow:0 0 0 0 rgba(255,138,61,.6);
  animation:gm-puls 2s cubic-bezier(.2,.8,.25,1) infinite;}
@keyframes gm-puls{
  0%  {box-shadow:0 0 0 0 rgba(255,138,61,.6);}
  70% {box-shadow:0 0 0 16px rgba(255,138,61,0);}
  100%{box-shadow:0 0 0 0 rgba(255,138,61,0);}
}
@media (prefers-reduced-motion:reduce){ .gm-dot span{animation:none;} }

/* Im Hero fuellt die Karte die Zelle · Rahmen und Radius hat die Hero-Karte
   schon, eine zweite runde Kante darin liest sich als Versehen. */
.pl__heroMap .gm{height:100%;}
.pl__heroMap .gm__frame{height:100% !important;border-radius:0;border:0;}

/* ===================================================== Places v4: Land ===
   "Somewhere to live" · Land ist ein MODUS, keine Linse. Masse aus dem
   Bau-Spiegel; der Rahmen ist 1280px wie auf der ganzen oeffentlichen Ebene. */

/* Der Umschalter · zwei Absichten, eine Seite. */
.pl__modes{display:flex;gap:4px;padding:4px;margin-bottom:26px;border-radius:14px;
  background:#F1EFF5;width:max-content;max-width:100%;}
.pl__mode{display:flex;flex-direction:column;gap:2px;padding:11px 20px;border-radius:11px;
  font-size:15.5px;font-weight:600;color:#5C5C67;text-decoration:none;
  transition:background .18s ease,color .18s ease;}
.pl__mode .mono{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#9A9AA6;}
.pl__mode.is-on{background:#fff;color:#23232B;box-shadow:0 1px 3px rgba(26,43,60,.08);}
.pl__mode.is-on .mono{color:#5B34EF;}

/* Das Band fuer Neuankoemmlinge · die Antwort auf "ich bin gerade da". */
.pl__starter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  padding:30px 34px;border-radius:20px;background:#F4F1FE;border:1px solid #D8CFFB;}
.pl__starter h2{margin:10px 0 0;font-size:clamp(22px,2.6vw,28px);font-weight:600;
  letter-spacing:-.6px;line-height:1.15;}
.pl__starter p{margin:9px 0 0;max-width:58ch;font-size:15.5px;line-height:1.6;color:#5C5C67;}
.pl__starter .label{color:#5B34EF;}
@media (max-width:720px){ .pl__starter{grid-template-columns:1fr;} }

/* Die Filterzeile · Textknoepfe wie die Linsen, keine Chips. */
.pl__tenureHead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:48px;}
.pl__tenureHead h2{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;
  letter-spacing:-.6px;line-height:1.15;}
.pl__tenureHead p{margin:8px 0 0;max-width:52ch;font-size:15.5px;line-height:1.6;color:#5C5C67;}
.pl__tenures{display:flex;gap:18px;flex-wrap:wrap;}
.pl__tenure{padding:6px 0;font-size:15px;font-weight:500;color:#5C5C67;text-decoration:none;}
.pl__tenure:hover{color:#5B34EF;}
.pl__tenure.is-on{font-weight:600;color:#23232B;box-shadow:inset 0 -2px 0 #6E4BFF;}
.pl__tenure.is-empty{color:#B7B7C2;}
.pl__tenure .mono{margin-left:7px;font-size:11.5px;color:#5C5C67;}
.pl__tenure.is-empty .mono{color:#B7B7C2;}

/* Karte links (klebt), Liste rechts · mit Land ist die Lage die halbe
   Antwort, darum tauschen Karte und Liste hier das Gewicht. */
.pl__landSplit{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:32px;margin-top:28px;align-items:start;}
.pl__landMapCol{position:sticky;top:92px;}
.pl__landMap .gm__frame{height:420px !important;}
.pl__landKey{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;}
.pl__landKey > span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#5C5C67;}
.pl__landKeyNote{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:#5C5C67;}
@media (max-width:1000px){
  .pl__landSplit{grid-template-columns:1fr;}
  .pl__landMapCol{position:static;}
}

/* Die Quadrate · Grundstuecke, keine Orte, darum eckig. Grau heisst: aus
   der Liste gefiltert, aber es gibt mich. */
.pl__plot{background:none;border:0;}
.pl__plot span, .pl__plotSwatch{display:block;width:14px;height:14px;border-radius:3px;
  border:2px solid #fff;box-shadow:0 0 0 1px #DDD6EE;}
.pl__plotSwatch{width:11px;height:11px;flex:none;}
.pl__plot span[data-art="starter"], .pl__plotSwatch[data-art="starter"]{background:#146A4D;}
.pl__plot span[data-art="grid"],     .pl__plotSwatch[data-art="grid"]{background:#5B34EF;}
.pl__plot span[data-art="resident"], .pl__plotSwatch[data-art="resident"]{background:#5C5C67;}
.pl__plot span[data-art="rent"],     .pl__plotSwatch[data-art="rent"]{background:#1F5F9E;}
.pl__plot.is-out span{background:#B7B7C2;}
.pl__plot.is-hot span{box-shadow:0 0 0 5px rgba(110,75,255,.24);}

/* Die Angebotskarte. */
.pl__landCard{padding:24px;border-radius:16px;background:#fff;border:1px solid #EAE8EE;
  box-shadow:0 1px 3px rgba(26,43,60,.05);margin-bottom:14px;
  transition:border-color .18s ease,box-shadow .18s ease;}
.pl__landCard:hover{border-color:#6E4BFF;box-shadow:0 4px 16px rgba(110,75,255,.12);}
.pl__landTitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pl__landTitle h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px;}
.pl__plotTag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;
  font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.pl__plotTag[data-art="starter"]{background:rgba(36,196,138,.16);color:#146A4D;}
.pl__plotTag[data-art="grid"]{background:rgba(110,75,255,.12);color:#5B34EF;}
.pl__plotTag[data-art="resident"]{background:#F1EFF5;color:#5C5C67;}
.pl__plotTag[data-art="rent"]{background:rgba(59,155,255,.14);color:#1F5F9E;}
.pl__fresh{font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#5B34EF;background:rgba(110,75,255,.1);border-radius:5px;padding:3px 7px;}
.pl__landWhere{margin-top:5px;font-size:12px;color:#5C5C67;}
.pl__landNote{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:#5C5C67;}
.pl__landFacts{display:flex;gap:28px;flex-wrap:wrap;margin-top:16px;}
.pl__landFacts > span > .label{display:block;font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#5C5C67;}
.pl__landFacts > span > span:last-child{display:block;margin-top:3px;font-size:15px;
  font-weight:600;color:#23232B;}
.pl__landActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;}
.pl__findmap{background:#fff;color:#23232B;font-size:14.5px;font-weight:600;
  padding:11px 18px;border:1px solid #EAE8EE;border-radius:11px;cursor:pointer;font-family:inherit;}
.pl__findmap:hover{border-color:#6E4BFF;color:#5B34EF;}

.pl__landEmpty{padding:30px;border-radius:16px;background:#fff;border:1px solid #EAE8EE;}
.pl__landEmptyTitle{font-size:17px;font-weight:600;}
.pl__landEmpty p{margin:9px 0 0;max-width:46ch;font-size:15px;line-height:1.6;color:#5C5C67;}
.pl__landEmpty .pl__tp{margin-top:18px;display:inline-flex;}

.pl__landExplain{margin-top:14px;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid #EAE8EE;}
.pl__landExplain:first-of-type{margin-top:22px;}
.pl__landExplain p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#5C5C67;}
.pl__landExplain strong{color:#23232B;font-weight:600;}

/* ================================================= Public Works · hell ====
   Die oeffentliche Tafel. Nach design_handoff_public_works, abgelesen von
   PublicWorks.dc.html · nicht aus dem README abgeleitet.

   BREITE: 1280 wie ueberall · siehe header.css bei .sh__inner.

   ZWEI DINGE, DIE DIE VORLAGE ANDERS MACHT als der Rohtext, und beide sind
   der Grund, warum die Seite auf einem jungen Grid funktioniert:

   Die Nullen sind die Einladung. "0 being built" liest sich nackt wie ein
   totes Projekt. Darunter steht deshalb, was die Null bedeutet ("Nobody has
   started yet, so every project on the board is still free"). Eine Null ohne
   Erklaerung ist eine Absage; eine Null mit Erklaerung ist eine offene Tuer.

   Die Tafel ist die Seite, nicht das Formular. Wer sich bewirbt, entscheidet
   sich an den Projekten · also bekommen sie Karten mit Art, Ort, Lohn und
   einem Satz, der einordnet. Das Formular kommt danach.
   ======================================================================== */

.pw{padding-top:52px;padding-bottom:96px;}

.pw__hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;}
.pw__h1{margin:14px 0 0;font-size:clamp(34px,4.6vw,54px);font-weight:700;letter-spacing:-1.4px;
  line-height:1.04;color:var(--ink);text-wrap:balance;}
.pw__lead{margin:20px 0 0;max-width:58ch;font-size:18px;line-height:1.6;color:var(--text-2);text-wrap:pretty;}
.pw__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

/* Die Beaver-Karte · violett getoent, weil sie die Einladung traegt und nicht
   eine Auskunft. */
.pw__beavers{padding:28px;border-radius:20px;background:var(--tint);border:1px solid #D8CFFB;}
.pw__bHead{display:flex;align-items:center;gap:11px;}
.pw__bIcon{width:38px;height:38px;flex:none;border-radius:11px;background:var(--surface);
  border:1px solid #D8CFFB;display:grid;place-items:center;color:var(--primary-deep);}
.pw__bKick{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--primary-deep);}
.pw__bName{font-size:19px;font-weight:600;letter-spacing:-.3px;margin-top:2px;color:var(--ink);}
.pw__bText{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);}
.pw__perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.pw__perk{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--surface);border:1px solid #D8CFFB;font-size:12.5px;color:var(--text-2);}

.pw__stats{display:flex;flex-wrap:wrap;gap:44px;margin-top:52px;padding:24px 0;
  border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);}
.pw__statN{font-size:38px;font-weight:600;letter-spacing:-1px;line-height:1;color:var(--ink);}
.pw__statN.is-zero{color:var(--placeholder);}
.pw__statL{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2);margin-top:6px;}
.pw__statNote{font-size:12.5px;line-height:1.45;color:var(--text-3);margin-top:5px;max-width:22ch;}

.pw__sec{margin-top:56px;scroll-margin-top:88px;}
.pw__sec--wide{margin-top:64px;}
.pw__sec--form{margin-top:72px;}
.pw__h2{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.6px;
  line-height:1.15;color:var(--ink);}
.pw__secLead{margin:10px 0 0;max-width:52ch;font-size:15.5px;line-height:1.6;color:var(--text-2);}

.pw__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:22px;margin-top:28px;}
.pw__step{display:flex;gap:16px;align-items:flex-start;}
.pw__stepN{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--tint);color:var(--primary-deep);font-family:var(--mono);font-size:13px;font-weight:600;}
.pw__stepT{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.2px;color:var(--ink);}
.pw__stepB{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--text-2);}

/* ------------------------------------------------------------- die Tafel -- */

.pw__boardHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.pw__filters{display:flex;flex-wrap:wrap;gap:8px;}
.pw__filter{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-family:var(--sans);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .18s ease;
  border:1px solid var(--divider);background:var(--surface);color:var(--text-2);}
.pw__filter:hover{border-color:var(--primary);}
.pw__filter.is-on{border-color:var(--primary);background:var(--tint);color:var(--ink);}
.pw__filterN{font-family:var(--mono);font-size:11px;color:var(--text-2);}

.pw__board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px;align-items:start;}
.pw__card{padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--divider);
  box-shadow:0 1px 3px rgba(26,43,60,.05);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.8,.25,1);
  animation:pw-in .4s cubic-bezier(.2,.8,.25,1) both;}
.pw__card:hover{border-color:#D8CFFB;box-shadow:var(--shadow-card);}
.pw__cardTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pw__kind{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 11px;}
.pw__kind--road{color:#1F5F9E;background:rgba(59,155,255,.14);}
.pw__kind--village{color:#8A5A0B;background:rgba(255,197,61,.2);}
.pw__kind--kit{color:#5B34EF;background:rgba(110,75,255,.12);}
.pw__kind--junction{color:#146A4D;background:rgba(36,196,138,.16);}
.pw__kind--bridge{color:#7A3E8F;background:rgba(232,90,196,.13);}
.pw__reward{margin-left:auto;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--ink);}
.pw__cardH{margin:14px 0 0;font-size:19px;font-weight:600;letter-spacing:-.35px;line-height:1.2;color:var(--ink);}
.pw__place{display:flex;align-items:center;gap:7px;margin-top:8px;}
.pw__placeT{font-family:var(--mono);font-size:11.5px;color:var(--text-2);}
.pw__brief{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);}
.pw__bundle{display:flex;align-items:center;gap:9px;margin-top:16px;padding:10px 13px;
  border-radius:10px;background:var(--tint);}
.pw__bundleT{font-family:var(--mono);font-size:11.5px;color:var(--text-2);min-width:0;}
.pw__cardFoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;}
.pw__aside{font-size:13px;color:var(--text-3);}
.pw__empty{padding:36px 40px;border-radius:16px;background:var(--surface);border:1px solid var(--divider);
  margin-top:28px;}
.pw__empty p{margin:10px 0 0;max-width:56ch;}

/* ---------------------------------------------------------- das Formular -- */

.pw__form{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;}
.pw__field{margin-top:26px;}
.pw__field--first{margin-top:30px;}
.pw__lab{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink);}
.pw__labOpt{font-weight:400;color:var(--text-3);}
.pw__in{width:100%;max-width:420px;font-size:16px;padding:13px 15px;border:1px solid var(--divider);
  border-radius:11px;background:var(--surface);color:var(--ink);}
.pw__in--small{max-width:420px;margin-top:12px;font-size:15px;padding:11px 14px;}
.pw__ta{width:100%;min-height:132px;resize:vertical;font-size:16px;line-height:1.55;padding:13px 15px;
  border:1px solid var(--divider);border-radius:11px;background:var(--surface);color:var(--ink);}
.pw__hint{margin-top:7px;font-size:13px;color:var(--text-3);}
.pw__underTa{display:flex;justify-content:space-between;gap:16px;margin-top:7px;}
.pw__count{font-family:var(--mono);font-size:12px;color:var(--placeholder);}
.pw__err{margin-top:7px;font-size:13px;color:#B3261E;}
.pw__craftLead{font-size:13px;color:var(--text-3);margin-bottom:12px;}
.pw__crafts{display:flex;flex-wrap:wrap;gap:8px;}
/* Das Plaettchen ist ein Etikett um ein verstecktes Kaestchen · so bleibt es
   ohne JavaScript bedienbar und die Tastatur kommt hin. */
.pw__craft{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;cursor:pointer;transition:all .18s ease;
  border:1px solid var(--divider);background:var(--surface);color:var(--text-2);}
.pw__craft input{position:absolute;opacity:0;width:0;height:0;}
.pw__craft:has(input:checked),
.pw__craft.is-on{border-color:var(--primary);background:var(--tint);color:var(--ink);}
.pw__craft:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px;}
.pw__sendRow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:26px;
  border-top:1px solid var(--divider-soft);}
.pw__sendBtn{display:inline-flex;align-items:center;font-family:var(--sans);font-size:16px;font-weight:600;
  padding:14px 26px;border:0;border-radius:12px;transition:all .18s var(--ease);
  background:var(--primary);color:var(--on-primary);cursor:pointer;}
.pw__sendBtn:hover{background:var(--primary-deep);}
.pw__sendBtn:disabled{background:#F1EFF5;color:var(--placeholder);cursor:not-allowed;}
.pw__sendHint{font-size:13.5px;color:var(--text-3);}
.pw__notes{display:flex;flex-direction:column;gap:16px;}
.pw__note{padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--divider);
  box-shadow:0 1px 3px rgba(26,43,60,.05);}
.pw__noteK{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-2);}
.pw__noteV{margin:11px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);}

.pw__done{max-width:620px;animation:pw-in .35s cubic-bezier(.2,.8,.25,1) both;}
.pw__tick{width:56px;height:56px;border-radius:50%;background:rgba(36,196,138,.12);color:#146A4D;
  display:grid;place-items:center;animation:pw-pop .4s ease-out;}
.pw__doneH{margin:26px 0 0;font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1;color:var(--ink);}
.pw__doneP{margin:14px 0 0;font-size:17.5px;line-height:1.6;color:var(--text-2);}
.pw__doneP--small{font-size:15.5px;}
.pw__doneBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

@keyframes pw-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pw-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

@media (max-width:1000px){
  .pw__hero,.pw__form{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:900px){
  .pw__board{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .pw{padding-top:40px;}
  .pw__stats{gap:28px;}
  .pw__beavers{padding:24px 22px;}
  .pw__card{padding:22px;}
}
@media (prefers-reduced-motion:reduce){
  .pw__card,.pw__done,.pw__tick{animation:none;}
}

/* ---------- Groundwork · die Reihe ----------
   Nach design_handoff_groundwork, abgelesen von Groundwork.dc.html.
   Ein geschriebenes Stueck bekommt eine Fotografie, ein ungeschriebenes einen
   gezeichneten Stumpf · und der Stumpf erbt NIE die Geometrie einer
   Fotografie. Beide Zweige teilten in der Vorlage einmal aspect-ratio:4/3,
   das ergab unter 960px einen 845x634 grossen leeren Kasten je Stueck. */
.gw{padding-bottom:92px;}

.gw__lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;
  align-items:end;padding:56px 0 0;}
.gw__h1{margin:18px 0 0;font-size:clamp(38px,5.4vw,68px);font-weight:700;letter-spacing:-2px;
  line-height:1.02;text-wrap:balance;}
.gw__lede{margin:24px 0 0;max-width:50ch;font-size:19px;line-height:1.6;color:var(--text-2);
  text-wrap:pretty;}
.gw__lede + .gw__lede{margin-top:18px;}

.gw__quoteWrap{padding-bottom:6px;}
.gw__quote{padding:26px;border-radius:20px;background:#F4F1FE;border:1px solid #D8CFFB;}
.gw__quoteKicker{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary-deep);}
.gw__quoteText{margin:14px 0 0;font-size:17px;line-height:1.5;font-weight:600;
  letter-spacing:-.2px;color:var(--ink);text-wrap:pretty;}
.gw__quoteFoot{margin-top:16px;padding-top:14px;border-top:1px solid #D8CFFB;
  font-size:13.5px;line-height:1.6;color:var(--text-2);}

.gw__piecesHead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--divider);}
.gw__piecesHead h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.4px;}
.gw__count{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-2);}
.gw__pieces{padding:66px 0 0;}
.gw__list{display:flex;flex-direction:column;}

.gw__row{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px;
  align-items:center;padding:38px 0;}
.gw__row + .gw__row{border-top:1px solid var(--divider);}

.gw__shot{width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#F1EFF5;
  border:1px solid var(--divider);
  box-shadow:0 1px 3px rgba(26,43,60,.05),0 10px 28px rgba(26,43,60,.05);}
.gw__shot img{display:block;width:100%;height:100%;object-fit:cover;}
/* Kein Bild hinterlegt: der Kasten traegt nur eine Beschriftung, also bekommt
   er die Hoehe einer Beschriftung · nicht die einer Fotografie. */
.gw__shot--empty{width:100%;max-width:340px;height:150px;aspect-ratio:auto;
  border-radius:18px;border:1px dashed #DDDAE4;background:#F4F3F6;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--text-2);}
.gw__shotWord{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;}

.gw__no{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary-deep);}
.gw__no.is-pending{color:var(--text-2);}
.gw__tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;color:var(--primary-deep);background:rgba(110,75,255,.12);}
.gw__tag.is-next{color:#146A4D;background:rgba(36,196,138,.16);}
.gw__tag.is-later{color:var(--text-2);background:none;border:1px solid var(--divider);}
.gw__rowHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gw__rowBody{min-width:0;padding:6px 0;}
.gw__rowTitle{margin:12px 0 0;font-size:clamp(24px,2.8vw,32px);font-weight:600;
  letter-spacing:-.7px;line-height:1.12;text-wrap:balance;}
.gw__rowTitle.is-pending{color:var(--text-2);}
.gw__rowP{margin:12px 0 0;max-width:56ch;font-size:16.5px;line-height:1.6;color:var(--text-2);
  text-wrap:pretty;}
.gw__rowP2{margin:12px 0 0;max-width:56ch;font-size:15px;line-height:1.6;color:var(--text-2);
  text-wrap:pretty;}
.gw__rowAct{margin-top:20px;}
.gw__wait{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;color:var(--text-2);padding:10px 0;}
.gw__waitDot{width:7px;height:7px;flex:none;border-radius:50%;background:#B7B7C2;}
.gw__waitDot.is-next{background:#24C48A;}

.gw__band{margin-top:78px;padding:40px;border-radius:24px;background:var(--dark);color:#C7C2D6;}
.gw__bandIn{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap;}
.gw__bandKicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.167em;
  text-transform:uppercase;color:#8B6BFF;}
.gw__bandH{margin:16px 0 0;max-width:22ch;font-size:clamp(24px,3vw,34px);font-weight:600;
  letter-spacing:-.8px;line-height:1.14;color:#fff;text-wrap:balance;}
.gw__bandP{margin:16px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:#A8A2B8;
  text-wrap:pretty;}
.gw__bandActs{display:flex;gap:12px;flex-wrap:wrap;}
.gw__bandGhost{display:inline-flex;align-items:center;gap:9px;background:transparent;
  color:#C7C2D6;font-size:15.5px;font-weight:600;padding:14px 22px;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;white-space:nowrap;
  transition:all .2s ease;}
.gw__bandGhost:hover{border-color:rgba(255,255,255,.42);color:#fff;}

@media (max-width:960px){
  .gw__lead{grid-template-columns:1fr;}
  .gw__row{grid-template-columns:1fr;}
  .gw__rowImg{order:-1;}
}

/* ---------- Planting · Stueck eins ----------
   Nach design_handoff_groundwork, abgelesen von Planting.dc.html · und zwar
   aus der FASSUNG IM BUENDEL design_handoff_admin_plants. Die Fassung im
   Groundwork-Buendel traegt noch den Animationsfehler: pl-grow endete auf
   transform:none, und eine laufende Animation schlaegt inline styles. Damit
   loeschte die Einblendung die Drehung jedes Exemplars · in genau dem
   Schaubild, das die Streuung zeigen soll. Deshalb hier ZWEI Elemente: der
   Rahmen blendet ein (nur opacity), das innere Feld traegt die Drehung. */
.pt{padding-bottom:92px;}

.pt__crumbs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:34px;}
.pt__back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;font-weight:600;letter-spacing:.167em;text-transform:uppercase;
  color:var(--primary-deep);}
.pt__crumbSep{color:#D8CFFB;}
.pt__here{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.167em;
  text-transform:uppercase;color:var(--text-3);}

.pt__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;
  align-items:center;padding:44px 0 8px;}
.pt__h1{margin:0;font-size:clamp(36px,5vw,62px);font-weight:700;letter-spacing:-1.8px;
  line-height:1.03;text-wrap:balance;}
.pt__lede{margin:22px 0 0;max-width:46ch;font-size:19px;line-height:1.6;color:var(--text-2);
  text-wrap:pretty;}
.pt__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.pt__shot{width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#F1EFF5;
  border:1px solid var(--divider);
  box-shadow:0 1px 3px rgba(26,43,60,.05),0 12px 32px rgba(26,43,60,.05);}
.pt__shot img{display:block;width:100%;height:100%;object-fit:cover;}
.pt__shot--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--text-2);border-style:dashed;border-color:#DDDAE4;background:#F4F3F6;
  box-shadow:none;}
.pt__shotWord{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;}
.pt__shotCap{margin-top:11px;font-family:var(--mono);font-size:11.5px;color:var(--text-2);}

.pt__sec{padding:72px 0 0;}
.pt__kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.167em;
  text-transform:uppercase;color:#146A4D;}
.pt__h2{margin:16px 0 0;max-width:22ch;font-size:clamp(28px,3.6vw,42px);font-weight:600;
  letter-spacing:-.9px;line-height:1.1;text-wrap:balance;}
.pt__p{margin:0;font-size:17px;line-height:1.65;color:var(--text-2);text-wrap:pretty;}
.pt__p + .pt__p{margin-top:18px;}

.pt__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px;
  margin-top:34px;align-items:start;}
.pt__split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:0;}

.pt__rolls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;}
.pt__roll{padding:15px 17px;border-radius:13px;background:var(--surface);
  border:1px solid var(--divider);}
.pt__rollK{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#146A4D;}
.pt__rollV{margin-top:6px;font-size:14px;line-height:1.5;color:var(--text-2);}

.pt__demo{padding:24px;border-radius:20px;background:var(--surface);
  border:1px solid var(--divider);box-shadow:var(--shadow-card);}
.pt__demoHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;}
.pt__demoKicker{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);}
.pt__demoLine{margin-top:5px;font-size:15px;font-weight:600;}
.pt__demoBtns{display:flex;gap:8px;flex-wrap:wrap;}
.pt__btn{display:inline-flex;align-items:center;padding:9px 15px;border-radius:10px;
  font-size:13.5px;font-weight:600;cursor:pointer;background:var(--primary);color:#fff;
  border:0;transition:all .16s ease;font-family:inherit;}
.pt__btn:hover{background:var(--primary-deep);}
.pt__btn--plain{background:var(--surface);color:var(--ink);border:1px solid var(--divider);}
.pt__btn--plain:hover{background:var(--surface);border-color:var(--primary);
  color:var(--primary-deep);}
.pt__btn--quiet{padding:9px 13px;font-weight:500;background:transparent;color:var(--text-2);
  border:1px solid var(--divider);}
.pt__btn--quiet:hover{background:transparent;color:var(--ink);}
.pt__btn--quiet[disabled]{color:#B7B7C2;cursor:not-allowed;}

.pt__stage{position:relative;margin-top:20px;height:238px;border-radius:14px;
  background:linear-gradient(to bottom,#F7F5FF 0%,#F1EFF5 78%);overflow:hidden;}
.pt__ground{position:absolute;left:0;right:0;bottom:34px;height:1px;
  background:linear-gradient(to right,rgba(35,35,43,0),rgba(35,35,43,.14) 12%,
    rgba(35,35,43,.14) 88%,rgba(35,35,43,0));}
.pt__stand{position:absolute;left:14px;right:14px;bottom:35px;display:flex;
  align-items:flex-end;justify-content:center;gap:2px;}
/* Der Rahmen blendet ein, das innere Feld dreht. Nie beides am selben Element. */
.pt__enter{display:block;flex:none;animation:pt-grow .34s cubic-bezier(.2,.8,.25,1) both;}
.pt__slot{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;transform-origin:50% 100%;}
.pt__empty{position:absolute;left:0;right:0;bottom:52px;text-align:center;font-size:14px;
  color:var(--text-3);}
.pt__note{position:absolute;left:16px;bottom:12px;font-family:var(--mono);font-size:10.5px;
  color:var(--text-2);}
.pt__demoFoot{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2);}
@keyframes pt-grow{from{opacity:0}to{opacity:1}}
@keyframes pt-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.pt__cap{padding:26px;border-radius:20px;background:var(--surface);
  border:1px solid var(--divider);box-shadow:var(--shadow-card);}
.pt__capKicker{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);}
.pt__capRow{margin-top:22px;}
.pt__capRow + .pt__capRow{margin-top:24px;}
.pt__capHead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.pt__capName{font-size:15px;font-weight:600;}
.pt__capMeta{font-family:var(--mono);font-size:12.5px;color:var(--text-2);}
.pt__capMeta.is-ours{color:#146A4D;}
.pt__bars{display:flex;margin-top:10px;height:34px;}
.pt__bars--bought{gap:3px;}
.pt__bars--ours{gap:1px;}
.pt__bar{flex:1;border-radius:5px;background:rgba(110,75,255,.20);
  border:1px solid rgba(110,75,255,.34);}
.pt__hair{flex:1;min-width:1px;border-radius:1px;background:rgba(36,196,138,.42);}
.pt__hair.is-solid{background:rgba(36,196,138,.72);}
.pt__capFoot{margin-top:20px;padding-top:16px;border-top:1px solid #F1EFF5;font-size:13.5px;
  line-height:1.6;color:var(--text-2);}

.pt__quote{margin:44px 0 0;padding:36px 40px;border-radius:20px;background:#F4F1FE;
  border:1px solid #D8CFFB;}
.pt__quote blockquote{margin:0;max-width:44ch;font-size:clamp(21px,2.5vw,29px);font-weight:600;
  letter-spacing:-.6px;line-height:1.28;color:var(--ink);text-wrap:balance;}
.pt__quote figcaption{margin-top:18px;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primary-deep);}

.pt__libHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;}
.pt__libIntro{margin:14px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:var(--text-2);}
.pt__chips{display:flex;gap:8px;flex-wrap:wrap;}
.pt__chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;cursor:pointer;transition:all .18s ease;
  border:1px solid var(--divider);background:var(--surface);color:var(--text-2);
  font-family:inherit;}
.pt__chipN{font-family:var(--mono);font-size:11px;color:var(--text-3);}
.pt__chip.is-on{border-color:currentColor;}
.pt__chip[data-kind="all"].is-on{color:var(--primary-deep);background:rgba(110,75,255,.12);}
.pt__chip[data-kind="tree"].is-on{color:#146A4D;background:rgba(36,196,138,.16);}
.pt__chip[data-kind="grass"].is-on{color:#12707C;background:rgba(34,195,214,.16);}
.pt__chip[data-kind="flower"].is-on{color:#A63A66;background:rgba(255,111,165,.16);}
.pt__chip.is-on .pt__chipN{color:inherit;}

.pt__lib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;
  align-items:start;}
.pt__card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--surface);border:1px solid var(--divider);box-shadow:var(--shadow-card);
  animation:pt-in .38s cubic-bezier(.2,.8,.25,1) both;}
.pt__cardShot{width:100%;aspect-ratio:4/3;background:#F1EFF5;}
.pt__cardShot img{display:block;width:100%;height:100%;object-fit:cover;}
.pt__cardBody{padding:20px;display:flex;flex-direction:column;}
.pt__cardHead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.pt__cardName{margin:0;font-size:17px;font-weight:600;letter-spacing:-.2px;}
.pt__cardText{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);
  text-wrap:pretty;}
.pt__notFor{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding-top:13px;
  border-top:1px solid #F1EFF5;}
.pt__notForK{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding-top:2px;}
.pt__notForV{min-width:0;font-size:13.5px;line-height:1.5;color:var(--text-2);}
.pt__kindChip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;}
.pt__kindChip[data-kind="tree"]{color:#146A4D;background:rgba(36,196,138,.16);}
.pt__kindChip[data-kind="grass"]{color:#12707C;background:rgba(34,195,214,.16);}
.pt__kindChip[data-kind="flower"]{color:#A63A66;background:rgba(255,111,165,.16);}
.pt__soon{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:200px;
  padding:26px;border-radius:16px;background:var(--surface);border:1px dashed #D8CFFB;}
.pt__soonK{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary-deep);}
.pt__soonT{font-size:15.5px;font-weight:600;}
.pt__soonP{margin:0;font-size:14px;line-height:1.6;color:var(--text-2);}
.pt__none{grid-column:1 / -1;padding:26px;border-radius:16px;background:var(--surface);
  border:1px solid var(--divider);font-size:14.5px;color:var(--text-2);}

.pt__limits{display:flex;flex-direction:column;gap:14px;}
.pt__limit{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:16px;
  background:var(--surface);border:1px solid var(--divider);}
.pt__limitIcon{flex:none;width:34px;height:34px;border-radius:11px;display:grid;
  place-items:center;background:rgba(36,196,138,.14);color:#146A4D;}
.pt__limitT{display:block;font-size:16px;font-weight:600;}
.pt__limitB{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--text-2);}

.pt__begin{padding:44px;border-radius:24px;background:var(--dark);color:#C7C2D6;}
.pt__beginKicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.167em;
  text-transform:uppercase;color:#8B6BFF;}
.pt__beginH{margin:16px 0 0;max-width:20ch;font-size:clamp(26px,3.2vw,38px);font-weight:600;
  letter-spacing:-.8px;line-height:1.12;color:#fff;text-wrap:balance;}
.pt__beginP{margin:18px 0 0;max-width:48ch;font-size:16.5px;line-height:1.6;color:#A8A2B8;
  text-wrap:pretty;}
.pt__beginActs{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.pt__beginGhost{display:inline-flex;align-items:center;gap:9px;background:transparent;
  color:#C7C2D6;font-size:15.5px;font-weight:600;padding:14px 22px;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;transition:all .2s ease;}
.pt__beginGhost:hover{border-color:rgba(255,255,255,.42);color:#fff;}
.pt__aside{padding:24px;border-radius:16px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);}
.pt__asideK{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#8F8AA3;}
.pt__asideP{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:#A8A2B8;}
.pt__asideP .mono{font-size:13px;color:#C7C2D6;}

.pt__seriesHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--divider);}
.pt__seriesH{margin:14px 0 0;max-width:26ch;font-size:clamp(24px,2.9vw,34px);font-weight:600;
  letter-spacing:-.7px;line-height:1.12;text-wrap:balance;}
.pt__seriesP{max-width:44ch;font-size:15px;line-height:1.6;color:var(--text-2);}
.pt__series{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px;
  margin-top:26px;}
.pt__sCard{padding:22px;border-radius:16px;background:var(--surface);
  border:1px solid var(--divider);}
.pt__sCard.is-here{border-color:#D8CFFB;box-shadow:0 1px 3px rgba(110,75,255,.10);}
.pt__sHead{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pt__sNo{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);}
.pt__sCard.is-here .pt__sNo{color:var(--primary-deep);}
.pt__sT{margin-top:14px;font-size:17px;font-weight:600;letter-spacing:-.2px;}
.pt__sB{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text-2);}

@media (max-width:1000px){
  .pt__hero{grid-template-columns:1fr;}
  .pt__split,.pt__split--even{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .pt__lib{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .pt__lib{grid-template-columns:1fr;}
  .pt__rolls{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .pt__enter,.pt__card{animation:none;}
}

/* ==========================================================================
   Email & alerts · /account/alerts
   Gebaut nach design_handoff_land_post_pay · LandAndPost.dc.html, Reiter
   "Email & alerts". Abgelesen, nicht aus dem README erraten.
   ========================================================================== */

.al__head h1{margin:12px 0 0;font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-1px;line-height:1.05;}
.al__lead{margin:14px 0 0;max-width:62ch;font-size:16px;line-height:1.6;color:var(--text-2);}

.al__sec{
  margin-top:20px;padding:28px;border-radius:16px;
  background:var(--surface);border:1px solid var(--divider);
  box-shadow:0 1px 3px rgba(26,43,60,.05);
}
.al__sec--first{margin-top:36px;}
.al__sec--quiet{padding:24px 28px;}
.al__secHead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;}
.al__secHead h2{margin:0;font-size:19px;font-weight:600;}
.al__num{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--primary-deep);}
.al__aside{font-size:13.5px;color:var(--text-2);}

/* ---- 01 · die Adresse ---------------------------------------------------- */
/* Drei Zustaende, drei Toene. Der dritte ist der wichtige: geaendert, aber
   noch nicht bestaetigt · dort stehen BEIDE Adressen, sonst sperrt ein
   Tippfehler jemanden aus seiner eigenen Post aus. */
.al__box{margin-top:18px;padding:20px 22px;border-radius:14px;display:flex;align-items:flex-start;gap:13px;}
.al__box--ok{background:var(--canvas);border:1px solid var(--divider);}
.al__box--warn{background:rgba(255,197,61,.1);border:1px solid rgba(255,197,61,.45);}
.al__box--pending{background:var(--tint);border:1px solid #D8CFFB;}
.al__dot{width:10px;height:10px;flex:none;margin-top:7px;border-radius:50%;}
.al__box--ok .al__dot{background:var(--green);}
.al__box--warn .al__dot{background:#F5A623;}
.al__box--pending .al__dot{background:var(--primary);}
.al__boxBody{min-width:0;flex:1;}
.al__addrLine{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.al__addr{font-family:var(--mono);font-size:15px;color:var(--ink);word-break:break-all;}
.al__tag{
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;border-radius:4px;padding:2px 7px;
}
.al__tag--ok{color:var(--in);background:rgba(36,196,138,.14);}
.al__tag--warn{color:#8A5A0B;background:rgba(255,197,61,.22);}
.al__tag--pending{color:var(--primary-deep);background:#EBE5FE;}
.al__note{margin:9px 0 0;max-width:56ch;font-size:14.5px;line-height:1.6;color:var(--text-2);}
.al__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center;}
.al__sent{margin-top:11px;font-family:var(--mono);font-size:12px;color:var(--in);}

/* ---- 02 · die Schalter --------------------------------------------------- */
/* Der Hinweis auf den Inhalt steht UEBER den Schaltern, nicht darunter: er
   gehoert zur Entscheidung, nicht zur Fussnote. Sachlich, nicht warnend. */
.al__content{margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--tint);border:1px solid #D8CFFB;}
.al__content p{margin:0;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--ink);}

.al__switches{margin-top:18px;display:flex;flex-direction:column;}
.al__row{display:flex;align-items:center;gap:20px;padding:15px 0;border-bottom:1px solid var(--divider-soft);}
.al__row:last-child{border-bottom:0;}
.al__row.is-locked{opacity:.6;}
.al__rowText{flex:1;min-width:0;}
.al__rowTitle{display:block;font-size:15.5px;font-weight:600;color:var(--ink);}
.al__row.is-locked .al__rowTitle{color:var(--text-3);}
.al__rowBody{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--text-2);}

/* Der Schalter ist ein Formular-Knopf, kein Skript · er tut, was er anbietet,
   auch wenn JavaScript aus ist. */
.al__track{
  position:relative;flex:none;width:46px;height:26px;border-radius:999px;
  padding:0;cursor:pointer;transition:all .18s ease;
  border:1px solid #DDD9E4;background:var(--divider-soft);
}
.al__track.is-on{border-color:var(--primary);background:var(--primary);}
.al__track[disabled]{cursor:not-allowed;}
.al__knob{
  position:absolute;top:50%;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--placeholder);transform:translate(0,-50%);
  transition:transform .2s cubic-bezier(.2,.8,.25,1);
}
.al__track.is-on .al__knob{background:var(--surface);transform:translate(20px,-50%);}

.al__locked{
  margin:16px 0 0;font-size:13.5px;line-height:1.6;color:#8A5A0B;
  background:rgba(255,197,61,.14);border-radius:10px;padding:12px 15px;
}

/* ---- 03 · was immer kommt ------------------------------------------------ */
/* Ausdruecklich KEIN vierter, grauer Schalter · man soll nicht vergeblich
   danach greifen. */
.al__alwaysLabel{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);}
.al__always{margin:11px 0 0;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--text-2);}

.al__foot{margin:22px 0 0;font-size:13.5px;color:var(--text-2);}

/* Der Aufklapper fuer "Adresse aendern" traegt einen Knopf als Griff · Safari
   zeigt sonst zusaetzlich sein eigenes Dreieck davor. */
.al__actions details > summary{list-style:none;cursor:pointer;display:inline-flex;}
.al__actions details > summary::-webkit-details-marker{display:none;}

/* ==========================================================================
   Veranstaltungs-Karte · geteilt zwischen /events und /account/events
   Lag bis 21.08. als <style>-Block IN events.blade.php. Sobald die Karte an
   zwei Stellen gebraucht wird, gehoert sie an eine · zwei Kopien derselben
   Karte laufen auseinander, und man merkt es an der zweiten Stelle zuerst.
   Aus dem Block uebernommen wie er war, nur die Reduced-Motion-Regel ist von
   `*` auf die eigenen Klassen eingeengt: global gehoerte sie nie hierher.
   ========================================================================== */
@keyframes ev-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ev-pulse{0%{box-shadow:0 0 0 0 rgba(36,196,138,.5)}70%{box-shadow:0 0 0 6px rgba(36,196,138,0)}100%{box-shadow:0 0 0 0 rgba(36,196,138,0)}}
@keyframes ev-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.ev-card{display:flex;background:#FFFFFF;border-radius:16px;overflow:hidden;border:1px solid #EAE8EE;
  box-shadow:0 1px 3px rgba(26,43,60,.05);animation:ev-rise .45s cubic-bezier(.2,.8,.25,1) both;
  transition:box-shadow .2s ease,transform .2s cubic-bezier(.2,.8,.25,1);}
.ev-card:hover{box-shadow:0 6px 20px rgba(26,43,60,.08);transform:translateY(-2px);}
.ev-card.live{border-color:rgba(36,196,138,.45);}
.ev-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .18s ease;
  border:1px solid #EAE8EE;background:#FFFFFF;color:#5C5C67;}
.ev-pill:hover{border-color:#6E4BFF;color:#5B34EF;}
.ev-copy{display:inline-flex;align-items:center;gap:7px;background:#FFFFFF;color:#5C5C67;font-size:14px;
  font-weight:500;padding:10px 15px;border:1px solid #EAE8EE;border-radius:10px;cursor:pointer;
  transition:all .18s ease;font-family:inherit;}
.ev-copy:hover{border-color:#6E4BFF;color:#5B34EF;}
.ev-copy.done{color:#1E9E73;border-color:rgba(36,196,138,.45);}
.ev-tp{display:inline-flex;align-items:center;gap:8px;background:#6E4BFF;color:#FFFFFF;font-size:14px;
  font-weight:600;padding:10px 16px;border-radius:10px;text-decoration:none;transition:all .18s cubic-bezier(.25,.1,.25,1);}
.ev-tp:hover{background:#5B34EF;}
.ev-tp:active{transform:scale(.97);}
@media (max-width:720px){ .ev-card{flex-direction:column} .ev-date{width:100% !important;flex-direction:row !important;gap:10px;border-right:0 !important;border-bottom:1px solid #EAE8EE;} }
@media (prefers-reduced-motion:reduce){ .ev-card,.ev-pill,.ev-copy,.ev-tp{animation:none !important;transition:none !important;} }

/* ==========================================================================
   Your land · /account/land
   Nach design_handoff_land_post_pay · LandAndPost.dc.html, Reiter "Your land".
   ========================================================================== */

.la__sec{margin-top:20px;padding:28px;border-radius:16px;background:var(--surface);border:1px solid var(--divider);box-shadow:0 1px 3px rgba(26,43,60,.05);}
.la__sec--first{margin-top:32px;}
.la__kicker{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);}
.la__big{margin:12px 0 0;font-size:22px;font-weight:600;letter-spacing:-.4px;}
.la__p{margin:12px 0 0;max-width:60ch;font-size:15.5px;line-height:1.6;color:var(--text-2);}

/* Der Anfang: noch kein Land. Einladung, kein Mangel. */
.la__start{margin-top:32px;padding:32px;border-radius:16px;background:var(--tint);border:1px solid #D8CFFB;}
.la__start h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.4px;}

.la__split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;}
@media (max-width:900px){ .la__split{grid-template-columns:1fr;} }

/* Drei Groessen in EINEM Balken: gehalten als Fuellung, an Gruppen verliehen
   als Schraffur (verliehen, nicht verloren), das Freikontingent als Marke ·
   die liest sich als "das bleibt, was auch passiert". */
.la__bar{position:relative;height:34px;margin-top:20px;border-radius:8px;background:var(--divider-soft);overflow:hidden;}
.la__barHeld{position:absolute;left:0;top:0;bottom:0;background:var(--primary);}
.la__barGiven{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(115deg,#B9A8FF 0 4px,rgba(185,168,255,.25) 4px 9px);}
.la__barMark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);}
.la__legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:11px;}
.la__legend span{font-size:12.5px;color:var(--text-2);}
.la__key{display:inline-flex;align-items:center;gap:7px;}
.la__swatch{width:12px;height:12px;flex:none;border-radius:3px;}

/* Fuehrt mit dem Spielraum, nicht mit der Warnung · eine Seite, die staendig
   warnt, wird ueberblaettert, und die freundliche Haelfte sagt dasselbe. */
.la__room{margin-top:20px;padding:18px 20px;border-radius:12px;background:var(--tint);border:1px solid #D8CFFB;}
.la__room--tight{background:rgba(255,197,61,.1);border-color:rgba(255,197,61,.4);}
.la__roomTitle{display:block;font-size:16px;font-weight:600;color:var(--ink);}
.la__room--tight .la__roomTitle{color:#8A5A0B;}
.la__roomBody{display:block;margin-top:6px;max-width:58ch;font-size:14.5px;line-height:1.6;color:var(--text-2);}

.la__sum{padding:20px 22px;border-radius:14px;background:var(--canvas);border:1px solid var(--divider);}
.la__sumRow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.la__sumRow span:first-child{min-width:0;font-size:14px;color:var(--text-2);}
.la__sumRow span:last-child{flex:none;font-family:var(--mono);font-size:14px;color:var(--text-2);}
.la__sumRow--total{padding-top:9px;border-top:1px solid var(--divider);font-weight:600;}
.la__sumRow--total span{color:var(--ink) !important;}

/* Die Leiter · jede Sprosse kostet je tausend weniger als die darunter. */
.la__ladder{margin-top:18px;display:flex;flex-direction:column;}
.la__lrow{display:grid;grid-template-columns:minmax(0,1.2fr) 100px 110px;gap:14px;align-items:baseline;padding:10px 12px;border-radius:8px;}
.la__lrow.is-here{background:var(--tint);}
.la__lhead{padding:0 12px 9px;border-bottom:1px solid var(--divider);}
.la__lhead span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);}
.la__lrow span{font-family:var(--mono);font-size:14px;}
.la__lrow.is-here span{color:var(--primary-deep);font-weight:600;}
.la__lnum{text-align:right;}
.la__lper{text-align:right;font-size:13px !important;color:var(--text-2) !important;font-weight:400 !important;}
.la__here{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--primary-deep);background:var(--tint);border-radius:4px;padding:2px 7px;}

/* Die Parzellen · der gezeichnete Plan ist die Regel, das Foto die Ausnahme. */
.la__parcels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;align-items:start;}
@media (max-width:760px){ .la__parcels{grid-template-columns:1fr;} }
.la__card{background:var(--surface);border:1px solid var(--divider);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(26,43,60,.05);}
.la__plan{position:relative;width:100%;aspect-ratio:4/3;background:#EDE9F8;overflow:hidden;}
.la__plan svg,.la__plan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.la__planNote{position:absolute;left:10px;bottom:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);background:rgba(255,255,255,.9);border-radius:5px;padding:3px 8px;}
.la__body{padding:20px;}
.la__name{font-size:16.5px;font-weight:600;}
.la__name--empty{color:var(--placeholder);font-style:italic;}
.la__where{margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--text-2);}
.la__desc{margin:11px 0 0;font-size:14px;line-height:1.6;color:var(--text-2);}
.la__desc--empty{color:var(--placeholder);}
.la__lent{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#8A5A0B;background:rgba(255,197,61,.2);border-radius:4px;padding:2px 7px;}
.la__flags{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:13px;border-top:1px solid var(--divider-soft);}
.la__flags span{font-size:13px;line-height:1.5;color:var(--text-2);}
.la__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center;}

/* ---------- Places: Einstufung ----------
   Nur Moderate traegt ein Plaettchen. 140 Plaettchen, die "gewoehnlich" sagen,
   waeren Rauschen · die Abwesenheit wird in der Filterzeile erklaert, dort wo
   der Buchstabe ueberhaupt erst zur Frage wird. Das Fragezeichen ist der
   Anzeigen-Fall: eine Anzeige kann ihre Region ueberleben, ein Ort nicht.
   Die Toene sind Information, nie Warnung · kein Rot, kein Dreieck. */
.pl__rating{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:5px;
  font-family:var(--mono);font-size:11px;font-weight:700;
}
.pl__rating--m{background:rgba(59,155,255,.14);color:#1F5F9E;box-shadow:inset 0 0 0 1px rgba(31,95,158,.32);}
.pl__rating--g{background:rgba(36,196,138,.14);color:#146A4D;box-shadow:inset 0 0 0 1px rgba(20,106,77,.28);}

/* Zweite Reihe unter den Linsen · eigene Zeile, volle Breite, damit sie im
   flex-wrap des Kopfes nicht neben die Linsen rutscht. */
.pl__ratingRow{flex-basis:100%;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-top:14px;}
.pl__ratingOpt{font-size:14px;white-space:nowrap;color:#5C5C67;text-decoration:none;transition:color .16s ease;}
.pl__ratingOpt:hover{color:#5B34EF;}
.pl__ratingOpt.is-on{color:#5B34EF;font-weight:600;
  text-decoration:underline;text-decoration-color:#6E4BFF;
  text-underline-offset:5px;text-decoration-thickness:2px;}
.pl__ratingOpt .mono{margin-left:6px;font-size:11px;color:#5C5C67;}
.pl__ratingNote{flex-basis:100%;margin:11px 0 0;max-width:70ch;
  font-size:13.5px;line-height:1.6;color:#5C5C67;}
.pl__adHead{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}