/* ══════════════════════════════════════════════════════════════════
   RESUELVE — Kunden-Web, Fassung 2 · Richtung „Papel y color"
   Gedrucktes Material eines Colmados (Preislisten, Belege, Coupons,
   gemalte Farbfelder) in Stripe-Praezision, auf der Cielo-Caribe-
   Leinwand. Der Rhythmus: eine lebende Sonnenuntergangs-Leinwand, die mit
   dem Scrollen durch den Tag laeuft, und Bewegung, die an das Scrollen
   gebunden ist statt an eine Uhr.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Tinte & Papier ── */
  --ink:#1C1226; --ink-2:#6A5B74; --ink-3:#9A8BA1;
  --paper:#FFFDFB; --paper-2:#FBF4F0; --paper-3:#F5ECE9;
  /* ── Cielo Caribe (kanonisch: WebLux.bgTop/bgMid/bgDeep) ── */
  --canvas-1:#FFE9D8; --canvas-2:#FFD6D2; --canvas-3:#EDD7F2;
  --canvas-solid:#FFDED6;
  /* ── EINE Aktionsfarbe ── */
  --coral:#FF5A7C; --coral-deep:#D93459; --coral-soft:#FFE7EC;
  --gold:#B8842A;
  /* ── Linien & Schatten ── */
  --hair:rgba(28,18,38,.11); --hair-2:rgba(28,18,38,.055);
  --sh-1:0 1px 1px rgba(48,22,58,.045), 0 3px 10px rgba(48,22,58,.055);
  --sh-2:0 2px 4px rgba(48,22,58,.06), 0 14px 32px rgba(48,22,58,.10);
  --sh-3:0 8px 18px rgba(48,22,58,.10), 0 34px 70px rgba(48,22,58,.17);
  /* ── Raster ── */
  --gut:clamp(16px,3.4vw,44px); --wide:1340px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  /* ── 17 Module: EIN System, gleiche Saettigung/Helligkeit ── */
  --food:hsl(16 72% 46%);    --prof:hsl(212 62% 45%);  --market:hsl(268 46% 50%);
  --real:hsl(150 44% 35%);   --adv:hsl(186 66% 33%);   --party:hsl(330 64% 48%);
  --don:hsl(352 66% 50%);    --health:hsl(162 60% 33%);--pets:hsl(32 72% 43%);
  --events:hsl(250 54% 55%); --rent:hsl(198 64% 39%);  --cour:hsl(8 64% 46%);
  --boats:hsl(220 58% 46%);  --tours:hsl(96 44% 33%);  --shop:hsl(292 46% 46%);
  --games:hsl(44 74% 40%);   --hotel:hsl(232 42% 46%);
  /* 18. Kachel: Vuelos. Azur, klar unterscheidbar von boats(220) und
     prof(212) — und die Seite dahinter ist eine eigene Website-Seite,
     kein App-Modul. */
  --vuelo:hsl(202 78% 40%);
  /* ── 3 Werkzeuge: dasselbe System, bewusst GEDAEMPFTER ──
     Leyes, Gasolineras und Noticias sind keine Handels-Module — man kauft
     dort nichts. Sie tragen deshalb dieselbe Kachel und dieselbe Mechanik,
     aber eine sichtbar niedrigere Saettigung (30-52 % statt 44-74 %). So
     liest sich das Band als eigene Familie, ohne aus der Handschrift zu
     fallen. */
  --laws:hsl(206 34% 40%);   --gas:hsl(28 52% 42%);    --news:hsl(178 30% 34%);
  --teal:hsl(186 66% 33%);   --wa:#25D366;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ink:#F6EEF6; --ink-2:#B3A2BC; --ink-3:#8B7A95;
  --paper:#241634; --paper-2:#2C1B3E; --paper-3:#351F49;
  --canvas-1:#2A1436; --canvas-2:#3A1A3D; --canvas-3:#191026;
  --canvas-solid:#2A1436;
  --coral-soft:#43203A; --coral-deep:#FF8AA3; --gold:#E0B160;
  --vuelo:hsl(202 82% 62%);
  --hair:rgba(255,238,248,.14); --hair-2:rgba(255,238,248,.075);
  --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 2px 6px rgba(0,0,0,.34), 0 16px 36px rgba(0,0,0,.4);
  --sh-3:0 10px 24px rgba(0,0,0,.4), 0 40px 80px rgba(0,0,0,.55);
}}
:root[data-theme="dark"]{
  --ink:#F6EEF6; --ink-2:#B3A2BC; --ink-3:#8B7A95;
  --paper:#241634; --paper-2:#2C1B3E; --paper-3:#351F49;
  --canvas-1:#2A1436; --canvas-2:#3A1A3D; --canvas-3:#191026;
  --canvas-solid:#2A1436;
  --coral-soft:#43203A; --coral-deep:#FF8AA3; --gold:#E0B160;
  --vuelo:hsl(202 82% 62%);
  --hair:rgba(255,238,248,.14); --hair-2:rgba(255,238,248,.075);
  --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 2px 6px rgba(0,0,0,.34), 0 16px 36px rgba(0,0,0,.4);
  --sh-3:0 10px 24px rgba(0,0,0,.4), 0 40px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0; color:var(--ink);
  font:15.5px/1.55 "Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,system-ui,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(130% 70% at 8% -6%, var(--canvas-1) 0%, transparent 62%),
    radial-gradient(120% 74% at 96% 4%,  var(--canvas-2) 0%, transparent 58%),
    linear-gradient(178deg, var(--canvas-2) 0%, var(--canvas-3) 46%, var(--canvas-1) 100%);
  background-attachment:fixed;
  background-color:var(--canvas-solid);
  min-height:100vh;
}
/* Korn: nimmt der Flaeche das Vektorhafte. Fest, nicht animiert. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:160px 160px;
  opacity:.055; mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.04}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen;opacity:.04}}

body.lock{overflow:hidden}
h1,h2,h3,h4,p{margin:0}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ══ KOPFZEILE ═══════════════════════════════════════════════════ */
.topbar{position:sticky;top:0;z-index:60}
.hdr{
  display:flex;align-items:center;gap:14px;
  padding:0 var(--gut); height:64px;
  background:color-mix(in srgb,var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.5) blur(18px); -webkit-backdrop-filter:saturate(1.5) blur(18px);
  border-bottom:1px solid var(--hair-2);
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:6px 4px}
.brand .mk{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;
  letter-spacing:-.02em;
  background:linear-gradient(145deg,#FF7D97,var(--coral) 46%,var(--coral-deep));
  box-shadow:0 2px 6px rgba(217,52,89,.34);
}
.brand .w{font-weight:800;font-size:18.5px;letter-spacing:-.035em}
.brand .w i{font-style:normal;color:var(--coral-deep)}

.tabs{display:flex;gap:2px;flex:0 0 auto;margin-left:6px}
.tab{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:11px;
  font-size:14px;font-weight:650;color:var(--ink-2);letter-spacing:-.01em;
  transition:background .18s, color .18s;
}
.tab:hover{background:var(--hair-2);color:var(--ink)}
.tab.on{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] .tab.on{background:var(--coral);color:#2A0F1A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tab.on{background:var(--coral);color:#2A0F1A}}

.hsearch{
  flex:1 1 auto; min-width:0; max-width:400px; margin-left:auto;
  display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;
  border-radius:12px;background:var(--paper-2);border:1px solid var(--hair);
  color:var(--ink-3);transition:border-color .18s, box-shadow .18s;
}
.hsearch:focus-within{border-color:var(--coral);box-shadow:0 0 0 3.5px var(--coral-soft)}
.hsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;color:var(--ink)}
.hsearch input::placeholder{color:var(--ink-3)}

.hacts{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}
.hsearch + .hacts{margin-left:0}
.cityb{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:12px;
  border:1px solid var(--hair);background:var(--paper-2);
  font-size:13.5px;font-weight:650;letter-spacing:-.01em;max-width:190px;
  transition:border-color .18s,background .18s;
}
.cityb:hover{border-color:var(--coral);background:var(--paper)}
.cityb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative;
  border:1px solid var(--hair);background:var(--paper-2);color:var(--ink-2);
  transition:background .18s,color .18s,border-color .18s;
}
.ico:hover{background:var(--paper);color:var(--ink);border-color:var(--coral)}
.ico .badge{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--coral);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--paper);
}
/* Support: dieselbe Stelle wie in der App - neben der Stadtwahl, immer da */
.supb{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--coral);color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb,var(--coral-deep) 36%, transparent);
  transition:transform .16s cubic-bezier(.2,.7,.2,1), filter .2s;
}
.supb:hover{filter:brightness(1.07);transform:scale(1.06)}
.supb:active{transform:scale(.94)}
.socb{
  height:40px;padding:0 15px;border-radius:12px;background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;
  transition:transform .16s, filter .18s;
}
.socb:hover{filter:brightness(1.18)} .socb:active{transform:scale(.97)}
:root[data-theme="dark"] .socb{background:var(--coral);color:#2A0F1A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .socb{background:var(--coral);color:#2A0F1A}}


/* ══ RAHMEN ══════════════════════════════════════════════════════ */
.shell{position:relative;z-index:1;padding:0 var(--gut);max-width:var(--wide);margin:0 auto}
.view{display:none} .view.on{display:block}

/* ══ TYPO-BAUSTEINE ══════════════════════════════════════════════ */
/* Etikett statt schwebender Uppercase-Zeile: ein gedrucktes Preisschild. */
.tag{
  display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  background:color-mix(in srgb,var(--c,var(--coral)) 15%, var(--paper));
  color:color-mix(in srgb,var(--c,var(--coral-deep)) 82%, var(--ink));
  border:1px solid color-mix(in srgb,var(--c,var(--coral)) 26%, transparent);
}
.h-sec{font-size:clamp(23px,2.5vw,32px);font-weight:800;letter-spacing:-.032em;line-height:1.08}
.h-card{font-size:16.5px;font-weight:750;letter-spacing:-.018em;line-height:1.24}
.lead{font-size:16px;line-height:1.58;color:var(--ink-2);max-width:62ch}

/* Bandkopf: Titel links, feine Linie bis zum Rand, Weg am Ende. */
.band-h{display:flex;align-items:flex-end;gap:16px;margin:var(--s6) 0 var(--s3)}
.band-h .txt{flex:0 0 auto;max-width:70%}
.band-h .rule{flex:1;height:1px;background:var(--hair);margin-bottom:14px}
.band-h .tag{margin-bottom:9px}
.band-h .hint{font-size:13px;color:var(--ink-3);margin-bottom:12px;flex:0 1 auto;min-width:0}
.more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;
  border-radius:11px;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em;
  border:1px solid var(--hair);background:var(--paper-2);transition:.18s;
}
.more:hover{color:var(--coral-deep);border-color:var(--coral);background:var(--paper)}

/* ══ KNOEPFE ═════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 22px;border-radius:14px;
  font-size:15px;font-weight:750;letter-spacing:-.012em;
  transition:transform .15s cubic-bezier(.2,.7,.2,1), filter .2s, background .2s, border-color .2s;
}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--coral);color:#fff;box-shadow:0 2px 5px rgba(217,52,89,.26),0 10px 22px rgba(217,52,89,.2)}
.btn-p:hover{filter:brightness(1.06)}
.btn-g{background:var(--paper);color:var(--ink);border:1px solid var(--hair);box-shadow:var(--sh-1)}
.btn-g:hover{border-color:var(--coral);color:var(--coral-deep)}
.btn-d{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-d:hover{background:rgba(255,255,255,.24)}
.btn-sm{min-height:40px;padding:0 15px;font-size:13.5px;border-radius:11px}
.btn-w{width:100%}

/* ══ HERO ════════════════════════════════════════════════════════ */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:end;padding:var(--s6) 0 var(--s5);
}
.sign{margin:0}

/* Bereichs-Ueberschriften brechen ausgewogen statt mit einem Einzelwort in
   der letzten Zeile. „…para todo lo / que hay que resolver" laeuft nirgends
   ueber — gemessen: Zeilenende 358 px in einem Kasten bis 359 —, liest sich
   aber wie ein Fehler. Browser ohne Unterstuetzung brechen wie bisher. */
.h-sec{text-wrap:balance}
.sign .l1{
  display:block;font-size:clamp(31px,4.3vw,58px);font-weight:800;letter-spacing:-.045em;
  line-height:.98;color:var(--ink);
}
.sign .l2{
  display:block;font-size:clamp(37px,5.4vw,74px);font-weight:800;letter-spacing:-.052em;
  line-height:.96;margin-top:2px;color:var(--coral-deep);
}
.sign .l2 em{font-style:normal;color:var(--ink)}
.hero-sub{margin-top:18px;font-size:clamp(16px,1.4vw,18.5px);line-height:1.5;color:var(--ink-2);max-width:44ch}

.bigsearch{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.bigsearch .f{
  flex:1 1 300px;min-width:0;display:flex;align-items:center;gap:11px;
  min-height:56px;padding:0 18px;border-radius:16px;
  background:var(--paper);border:1.5px solid var(--hair);box-shadow:var(--sh-1);
  color:var(--ink-3);transition:border-color .18s, box-shadow .18s;
}
.bigsearch .f:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-soft)}
.bigsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;color:var(--ink)}
.bigsearch input::placeholder{color:var(--ink-3)}

/* Kennzahlen als Beleg-Zeilen mit Punktfuehrung — kein Kachel-Trio. */
.facts{margin-top:26px;display:flex;flex-direction:column;gap:2px;max-width:440px}
.fact{
  display:flex;align-items:baseline;gap:10px;width:100%;padding:9px 2px;text-align:left;
  border-bottom:1px solid var(--hair-2);transition:transform .2s cubic-bezier(.2,.7,.2,1),color .2s;
}
.fact:hover{transform:translateX(8px);color:var(--coral-deep)}
.fact .v{font-size:19px;font-weight:800;letter-spacing:-.03em;flex:0 0 auto}
.fact .dots{flex:1;border-bottom:1.5px dotted var(--hair);transform:translateY(-4px);min-width:20px}
.fact .k{font-size:13.5px;color:var(--ink-2);flex:0 0 auto}

/* APK — als Karte mit Kanten-Reissung, nicht als Werbebanner */
.apk{
  background:var(--paper);border:1px solid var(--hair);border-radius:22px;padding:22px;
  box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:14px;
}
.apk .row{display:flex;gap:13px;align-items:flex-start}
.apk .lg{
  width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(145deg,#FF7D97,var(--coral) 46%,var(--coral-deep));
  color:#fff;font-weight:800;font-size:22px;box-shadow:0 3px 9px rgba(217,52,89,.3);
}
.apk .t{display:block;font-weight:750;font-size:15.5px;letter-spacing:-.015em}
.apk .d{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.apk .meta{display:block;font-size:12px;color:var(--ink-3);margin-top:6px;font-variant-numeric:tabular-nums}
.apk details{border-top:1px solid var(--hair-2);padding-top:12px}
.apk summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-size:13.5px;font-weight:700;color:var(--ink-2);min-height:24px;
}
.apk summary::-webkit-details-marker{display:none}
.apk details[open] summary{color:var(--coral-deep)}
.apk details p{margin:9px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ══ STREIFEN & HINWEISE ═════════════════════════════════════════ */
.topgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.topgrid>*{margin-top:0;height:100%}
@media(max-width:900px){.topgrid{grid-template-columns:1fr}}
.strip{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 18px;border-radius:16px;margin-top:12px;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.strip:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 44%, transparent)}
.strip .mk{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%, var(--paper));color:var(--c);
}
.strip .cnt{flex:1;min-width:0}
.strip .t{display:block;font-weight:750;font-size:14.5px;letter-spacing:-.015em}
.strip .d{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.note{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:13px 16px;border-radius:14px;margin-top:12px;font-size:13.5px;line-height:1.5;
  border:1px dashed;
}
.note b{display:block;font-weight:800;font-size:13.5px;margin-bottom:2px}
.note.warn{background:color-mix(in srgb,var(--games) 9%, var(--paper));border-color:color-mix(in srgb,var(--games) 40%, transparent);color:color-mix(in srgb,var(--games) 55%, var(--ink))}
.note.info{background:color-mix(in srgb,var(--prof) 8%, var(--paper));border-color:color-mix(in srgb,var(--prof) 34%, transparent);color:color-mix(in srgb,var(--prof) 52%, var(--ink))}
.note svg{flex:0 0 auto;margin-top:1px}

/* ══ KATEGORIEN ══════════════════════════════════════════════════ */
/* Achtzehn Felder statt siebzehn: „Todo" schliesst die Reihe und ist zugleich
   der Weg zurueck. 18 teilt sich sauber in 9 / 6 / 3 Spalten - keine Luecke
   in der letzten Zeile. Die Farbe traegt die Flaeche, nicht ein Plaettchen
   darin: eine Kachel in der Kachel ist eine Schachtel zu viel. */
.cats{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}

/* ── Werkzeug-Band (Leyes · Gasolineras · Noticias) ──────────────────
   Dieselbe Kachel, dieselbe Mechanik, nur ein eigener Abschnitt: die drei
   haben kein Inventar und wuerden im Neunerraster entweder einen leeren
   Zaehler oder ein falsches „PRONTO" tragen.

   `minmax(0,1fr)` und nicht `1fr` — bei 320 dp Breite sprengt ein langer
   Name wie „Gasolineras" sonst die Spalte, statt umzubrechen. Genau dieser
   Fehler ist in der Kunden-Web-Vorschau schon einmal passiert. */
.werk-band{margin-top:26px}
.werk-band .tag{--c:var(--laws)}
/* **Dasselbe Raster wie die Kategorien** — die Kacheln erben Spaltenbreite
   und Groesse von `.cats` und stehen in denselben ersten drei Spalten.
   Ein eigenes Dreispalten-Raster war der erste Versuch und sah falsch aus:
   drei Kacheln ueber die volle Breite lesen sich als leere Kaesten, nicht
   als Geschwister der kleinen Kategorie-Quadrate.

   Deshalb spannt das aeussere Raster wieder neun Spalten: die Kacheln
   nehmen 1-3, der Preisblock 4-9. Die Kachelbreite bleibt damit AUF DEN
   PIXEL die der Kategorien darueber (drei Spalten des Neunerrasters =
   drei Spalten eines Dreierrasters mit demselben Abstand), und rechts
   steht kein Loch mehr. */
.werk-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;margin-top:11px}
.cats.werk{grid-column:1 / span 3;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}

/* ── Amtliche Kraftstoffpreise ───────────────────────────────────────
   Kein Kasten im Kasten: derselbe getoente Grund und dieselbe Hairline
   wie eine Kachel, nur breiter. Die Preiszahlen laufen mit
   `tabular-nums`, damit die Spalte nicht zappelt.

   Leer heisst hier wirklich leer: ohne Daten rendert home.js nichts
   hinein, und `:empty` nimmt dem Block Rand und Rahmen, damit keine
   graue Attrappe stehenbleibt. */
.gasol{
  --c:var(--gas);
  grid-column:4 / -1;display:flex;flex-direction:column;gap:10px;
  padding:14px 16px 13px;border-radius:16px;min-height:104px;
  background:color-mix(in srgb,var(--c) 11%, var(--paper));
  border:1px solid color-mix(in srgb,var(--c) 24%, transparent);
}
.gasol:empty{display:none}
.gasol .gk{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gasol .gt{
  font-size:10.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 72%, var(--ink));
}
.gasol .gw{font-size:12.5px;color:var(--ink-2)}
/* Die Woche ist abgelaufen — der Preis stimmt vielleicht noch, aber wir
   wissen es nicht. Das gehoert an die Oberflaeche, nicht in ein Log:
   genau diese Luecke stand am 24.08. zwei Wochen offen.

   **Der Hinweis wird nicht blasser, sondern deutlicher.** Der erste
   Entwurf dimmte die abgelaufene Woche auf `--ink-3` — gemessen 2,75:1 auf
   dem getoenten Grund. Ausgerechnet der Satz, der eine Unsicherheit
   meldet, waere damit der am schlechtesten lesbare des Blocks gewesen.
   Jetzt traegt die Warnung die Koralle, die Woche selbst bleibt auf
   `--ink-2`. Der Tinten-Anteil ist NACHGEMESSEN und nicht geschaetzt: bei
   92 % Koralle standen 4,44:1 auf dem Papier — knapp unter der Schwelle
   und damit trotzdem ein Fehler. Bei 76 % sind es 5,63:1 (hell) und
   7,98:1 (dunkel), beides im Browser nachgerechnet. */
.gasol .gw.alt b{font-weight:800;color:color-mix(in srgb,var(--coral-deep) 76%, var(--ink))}
.gasol .gl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:8px 14px;margin:0;padding:0;list-style:none;
}
.gasol .gl div{display:flex;flex-direction:column;gap:1px;min-width:0}
.gasol .gl .k{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gasol .gl .v{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* `--ink-2`, nicht `--ink-3`: auf dem getoenten Grund kam die Fusszeile
   sonst auf 2,75:1 — Kleingedrucktes, das man nicht lesen kann, ist keine
   Quellenangabe, sondern Dekoration. */
.gasol .gf{font-size:11.5px;color:var(--ink-2);margin-top:auto}
.gasol .gf a{text-decoration:underline;text-underline-offset:2px}
.cat{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:14px 13px 13px;border-radius:16px;min-height:104px;text-align:left;
  background:color-mix(in srgb,var(--c) 15%, var(--paper));
  border:1px solid color-mix(in srgb,var(--c) 26%, transparent);
  color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), background .2s, border-color .2s, box-shadow .2s;
}
.cat .g{color:var(--c);line-height:0;transition:transform .22s cubic-bezier(.2,.7,.2,1), color .2s}
.cat .n{font-size:13.5px;font-weight:700;letter-spacing:-.016em;line-height:1.18}
.cat .n i{font-style:normal}
.cat .n .sm{display:none}
.cat:hover{
  transform:translateY(-3px);box-shadow:var(--sh-2);
  background:color-mix(in srgb,var(--c) 26%, var(--paper));
  border-color:color-mix(in srgb,var(--c) 46%, transparent);
}
.cat:hover .g{transform:scale(1.12) rotate(-3deg)}
.cat:active{transform:translateY(-1px) scale(.985)}
/* Gewaehlt: das Feld traegt seine Farbe voll aus - dieselbe Aussage wie in der Cinta */
.cat.on{
  background:var(--c);border-color:var(--c);color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb,var(--c) 42%, transparent);
}
.cat.on .g{color:#fff}
/* „Todo" ist kein Modul: es traegt die Tinte, wie Reiter und Chips es tun */
.cat.all{--c:var(--ink);background:color-mix(in srgb,var(--ink) 6%, var(--paper));border-color:var(--hair)}
.cat.all:hover{background:color-mix(in srgb,var(--ink) 11%, var(--paper));border-color:color-mix(in srgb,var(--ink) 26%, transparent)}
.cat.all .g{color:var(--ink-2)}
.cat.all.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cat.all.on .g{color:var(--paper)}

/* ══ SCHIENEN + FICHAS (Karten) ══════════════════════════════════ */
.rail-wrap{position:relative;margin:0 calc(var(--gut)*-1);padding:0 var(--gut)}
.rail{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 0 18px;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 254px}
/* Kurze Schienen lassen sonst eine tote Flaeche: der Abschluss nimmt sie ein. */
.rail>.tailcard{flex:1 1 254px;min-width:254px}
.arw{
  position:absolute;top:94px;width:40px;height:40px;border-radius:50%;z-index:4;
  display:grid;place-items:center;background:var(--paper);color:var(--ink);
  border:1px solid var(--hair);box-shadow:var(--sh-2);
  transition:transform .18s, background .18s;
}
.arw:hover{transform:scale(1.08);background:var(--paper-2)}
.arw.l{left:calc(var(--gut) - 16px)} .arw.r{right:calc(var(--gut) - 16px)}
.arw.l svg{transform:rotate(180deg)}
@media (hover:none){.arw{display:none}}

.card{
  display:flex;flex-direction:column;text-align:left;width:100%;
  background:var(--paper);border:1px solid var(--hair);border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 40%, transparent)}
.card:active{transform:translateY(-1px) scale(.99)}
.card .img{position:relative;height:126px;flex:0 0 auto;overflow:hidden}
.card .img::after{
  content:'';position:absolute;inset:0;background-image:var(--grain);background-size:160px;
  opacity:.16;mix-blend-mode:overlay;
}
/* Gezeichnet, nicht skaliert: eine Skalierung verdickt den Strich mit. */
.card .glyph{
  position:absolute;right:-18px;bottom:-22px;color:rgba(255,255,255,.3);line-height:0;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.card:hover .glyph{transform:translate(-6px,-6px)}
.card .heart{
  position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:#4A3B54;
  box-shadow:0 2px 6px rgba(30,15,40,.2);transition:transform .18s, color .18s;
}
.card .heart:hover{transform:scale(1.12)} .card .heart.on{color:var(--coral)}
.card .rate, .det-hero .rate{
  position:absolute;left:9px;top:9px;display:flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.93);
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:#1C1226;
}
.card .rate .s, .det-hero .rate .s{color:#B8842A}
.card .modl{
  position:absolute;left:9px;bottom:9px;height:22px;padding:0 8px;border-radius:6px;
  display:inline-flex;align-items:center;background:rgba(20,10,28,.42);color:#fff;
  font-size:10.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.card .body{padding:13px 14px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .name{display:flex;align-items:center;gap:5px;font-size:15.5px;font-weight:750;letter-spacing:-.018em;line-height:1.2}
.card .name .vf{color:var(--prof);display:inline-flex;flex:0 0 auto}
.card .desc{font-size:12.8px;color:var(--ink-2);line-height:1.38;display:block}
.card .st{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--real)}
.card .st.closed{color:var(--ink-3)}
.card .st .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.card .loc{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);line-height:1.35}
.card .loc svg{flex:0 0 auto}
/* Beleg-Zeile mit Punktfuehrung — das wiederkehrende Detail des Systems */
.card .foot{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:11px}
.card .foot .rv-n{font-size:11.5px;color:var(--ink-3);flex:0 0 auto}
.card .foot .dots{flex:1;border-bottom:1.5px dotted var(--hair);transform:translateY(-4px);min-width:12px}
.card .foot .pr{font-size:13.5px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;flex:0 0 auto}
.card .foot .pr.none{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:0}

.tailcard{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  border:1.5px dashed var(--hair);border-radius:18px;background:transparent;
  padding:24px 18px;text-align:center;min-height:262px;transition:.2s;
}
.tailcard:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 6%, transparent)}
.tailcard .g{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%, var(--paper));color:var(--c);
}
.tailcard .t{font-size:14.5px;font-weight:750;letter-spacing:-.015em}
.tailcard .d{font-size:12.5px;color:var(--ink-2);line-height:1.4}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}

/* ══ PANEELE ═════════════════════════════════════════════════════ */
.panel{border-radius:26px;padding:clamp(24px,3vw,42px);margin-top:var(--s5);position:relative;overflow:hidden}
.panel .grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.panel h3{font-size:clamp(21px,2.2vw,29px);font-weight:800;letter-spacing:-.032em;line-height:1.12;margin-top:12px}
.panel .x{margin-top:12px;font-size:15px;line-height:1.55;max-width:52ch}
.panel-dark{background:linear-gradient(150deg,#241638,#1A1028 62%,#2B1636);color:#F4ECF6;box-shadow:var(--sh-3)}
.panel-dark .x{color:#C7B6CE}
.panel-dark::after{content:'';position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.panel-paper{background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-2)}
.panel-paper .x{color:var(--ink-2)}

/* Mini-Zeilen: Beleg-Optik statt Kachel-Raster */
.minis{display:flex;flex-direction:column;gap:0}
.mini{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:14px 6px;border-top:1px solid var(--hair-2);transition:transform .2s cubic-bezier(.2,.7,.2,1);
}
.minis .mini:last-child{border-bottom:1px solid var(--hair-2)}
.mini:hover{transform:translateX(10px)}
.panel-dark .mini{border-color:rgba(255,255,255,.11)}
.panel-dark .minis .mini:last-child{border-color:rgba(255,255,255,.11)}
.mini .i{flex:0 0 auto;margin-top:1px;color:var(--coral-deep)}
.panel-dark .mini .i{color:#FF8AA3}
.mini .t{display:block;font-weight:750;font-size:14px;letter-spacing:-.015em}
.mini .d{display:block;font-size:12.8px;color:var(--ink-2);margin-top:2px;line-height:1.42}
.panel-dark .mini .d{color:#B7A6BF}
.mini .ar{margin-left:auto;flex:0 0 auto;color:var(--ink-3);opacity:0;transition:opacity .2s,transform .2s}
.mini:hover .ar{opacity:1;transform:translateX(3px)}

/* Cupón: echte Perforation per Maske — backdrop-unabhaengig */
.cupon{
  margin-top:var(--s5);border-radius:26px;color:#fff;position:relative;
  background:linear-gradient(140deg,#FF7D97 0%,var(--coral) 44%,var(--coral-deep) 100%);
  box-shadow:0 10px 30px rgba(217,52,89,.28);
  -webkit-mask:
    radial-gradient(circle 18px at 0 60%, transparent 97%, #000 100%),
    radial-gradient(circle 18px at 100% 60%, transparent 97%, #000 100%);
  mask:
    radial-gradient(circle 18px at 0 60%, transparent 97%, #000 100%),
    radial-gradient(circle 18px at 100% 60%, transparent 97%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.cupon .in{padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px)}
.cupon .tag{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.34)}
.cupon h3{font-size:clamp(21px,2.3vw,31px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:12px}
.cupon .x{margin-top:12px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);max-width:46ch}
.cupon .split{border-left:2px dashed rgba(255,255,255,.4);padding-left:clamp(18px,2.4vw,32px)}
.cupon .amt{font-size:clamp(38px,4.6vw,62px);font-weight:800;letter-spacing:-.05em;line-height:.94;font-variant-numeric:tabular-nums}
.cupon .amt small{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8;margin-top:8px}
.cupon .cline{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-size:13px;min-height:40px;padding:10px 0 0;border-radius:8px}
.cupon .cline .dots{flex:1;border-bottom:1.5px dotted rgba(255,255,255,.45);transform:translateY(-4px)}

/* Fahrplan */
.road{display:flex;align-items:center;gap:0;margin-top:26px;flex-wrap:nowrap;max-width:620px}
.rstep{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:0 0 auto;text-align:left}
.rstep .b{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:13.5px;font-weight:800;border:2px solid rgba(255,255,255,.28);color:#fff;
}
.rstep .b.done{background:var(--health);border-color:var(--health)}
.rstep .b.now{background:var(--coral);border-color:var(--coral)}
.rstep .lb{font-size:13.5px;font-weight:750;line-height:1.25}
.rstep .lb small{display:block;font-size:11.5px;font-weight:600;opacity:.66;margin-top:2px}
.rline{flex:1 1 auto;height:2px;background:rgba(255,255,255,.18);margin:0 12px 30px;min-width:16px}
.rline.done{background:var(--health)}

/* Grosse Zahl als Schild */
.big5{font-size:clamp(58px,7vw,96px);font-weight:800;letter-spacing:-.06em;line-height:.86;color:var(--coral-deep)}
.big5 small{display:block;font-size:13px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* Tueren */
.doors{display:flex;flex-direction:column;gap:10px}
.door{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;
  border-radius:16px;border:1px solid var(--hair);background:var(--paper-2);
  transition:transform .18s, border-color .18s, background .18s;min-height:52px;
}
.door:hover{transform:translateX(4px);border-color:var(--coral);background:var(--paper)}
.door .g{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%, var(--paper));color:var(--c)}
.door .t{display:block;font-weight:750;font-size:15px;letter-spacing:-.015em}
.door .d{display:block;font-size:12.8px;color:var(--ink-2);margin-top:2px}
.door .ar{margin-left:auto;color:var(--ink-3)}

/* Werte */
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0;margin-top:var(--s5);
  background:var(--paper);border:1px solid var(--hair);border-radius:22px;overflow:hidden;box-shadow:var(--sh-1)}
.val{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 22px;text-align:left;
  border-right:1px solid var(--hair-2);transition:background .2s;
}
.val:last-child{border-right:0}
.val:hover{background:color-mix(in srgb,var(--c) 6%, var(--paper))}
.val .g{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%, var(--paper));color:var(--c)}
.val .t{font-size:15.5px;font-weight:750;letter-spacing:-.018em}
.val .d{font-size:13px;color:var(--ink-2);line-height:1.46}
.val .mr{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--c);margin-top:auto;padding-top:8px}

/* Ausblick */
.story{margin-top:var(--s5);border-radius:26px;overflow:hidden;position:relative;
  background:linear-gradient(165deg,#2C1740 0%,#1B1029 58%,#3A1B33 100%);color:#fff;box-shadow:var(--sh-3)}
.story .sil{position:absolute;left:0;right:0;bottom:0;height:120px;opacity:.5;pointer-events:none}
.story .in{position:relative;padding:clamp(28px,3.6vw,52px) clamp(24px,3vw,44px) clamp(64px,7vw,92px)}
.story h3{font-size:clamp(24px,2.8vw,38px);font-weight:800;letter-spacing:-.038em;line-height:1.08;margin-top:12px}
.story p{margin-top:14px;font-size:15.5px;line-height:1.55;color:#C9B8D0;max-width:56ch}
.story .tag{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
.story .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.story .c{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:11px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-size:13.5px;font-weight:650;transition:.18s;
}
.story .c:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}

/* ══ BUSCAR ══════════════════════════════════════════════════════ */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:11px;flex:0 0 auto;
  background:var(--paper);border:1px solid var(--hair);font-size:13.5px;font-weight:650;
  letter-spacing:-.01em;transition:.18s;box-shadow:var(--sh-1);
}
.fchip .d{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto}
.fchip:hover{border-color:var(--c,var(--coral))}
.fchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fchip.on .d{background:var(--paper)}
:root[data-theme="dark"] .fchip.on{background:var(--coral);color:#2A0F1A;border-color:var(--coral)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fchip.on{background:var(--coral);color:#2A0F1A;border-color:var(--coral)}}
.pops{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pop{
  height:38px;padding:0 14px;border-radius:10px;background:var(--paper);border:1px solid var(--hair);
  font-size:13.5px;font-weight:650;color:var(--ink-2);transition:.18s;
}
.pop:hover{color:var(--coral-deep);border-color:var(--coral);transform:translateY(-2px)}
.empty{text-align:center;padding:56px 20px;background:var(--paper);border:1px solid var(--hair);border-radius:22px;box-shadow:var(--sh-1);margin-top:20px}
.empty .g{
  width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin:0 auto 16px;
  background:var(--coral-soft);color:var(--coral-deep);border:1px solid color-mix(in srgb,var(--coral) 26%, transparent);
}
.empty .t{font-size:20px;font-weight:800;letter-spacing:-.025em}
.empty .d{font-size:14.5px;color:var(--ink-2);margin-top:6px}

/* ══ MAPA ════════════════════════════════════════════════════════ */
.maparea{
  position:relative;height:min(60vh,520px);min-height:360px;border-radius:24px;overflow:hidden;
  background:#DCE9F2;border:1px solid var(--hair);box-shadow:var(--sh-2);margin-top:6px;
}
.maparea.sat{background:#12303F}
.mapsvg{position:absolute;inset:0;width:100%;height:100%}
.maptop{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:9px;z-index:3;flex-wrap:wrap}
.topsearch{
  flex:1 1 220px;min-width:0;max-width:340px;display:flex;align-items:center;gap:9px;height:44px;padding:0 15px;
  border-radius:13px;background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-2);color:var(--ink-3);
}
.topsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;color:var(--ink)}
.pill{
  display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 15px;border-radius:13px;flex:0 0 auto;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-2);font-size:13.5px;font-weight:700;
  transition:.18s;
}
.pill:hover{border-color:var(--coral);color:var(--coral-deep)}
.mappin{position:absolute;transform:translate(-50%,-100%);z-index:2;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.mappin:hover{transform:translate(-50%,-100%) scale(1.16);z-index:5}
.mappin .p{
  width:38px;height:38px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  display:grid;place-items:center;background:var(--c);color:#fff;
  box-shadow:0 4px 10px rgba(20,10,30,.34);border:2.5px solid #fff;
}
.mappin .p svg{transform:rotate(45deg)}
.mapctl{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:7px;z-index:3}
.mapctl button{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-2);transition:.18s;
}
.mapctl button:hover{border-color:var(--coral);color:var(--coral-deep)}
.maplegend{
  position:absolute;left:14px;bottom:14px;z-index:3;height:34px;padding:0 13px;border-radius:10px;
  display:inline-flex;align-items:center;background:rgba(20,10,28,.66);color:#fff;
  font-size:12.5px;font-weight:650;backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;
}

/* ══ PEDIDOS ═════════════════════════════════════════════════════ */
.order{
  display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--hair);
  border-radius:20px;padding:18px;margin-top:12px;box-shadow:var(--sh-1);max-width:940px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.order:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--c) 40%, transparent)}
.order .h{display:flex;gap:13px;align-items:flex-start}
.order .mk{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%, var(--paper));color:var(--c)}
.order .t{display:block;font-weight:750;font-size:15.5px;letter-spacing:-.018em}
.order .m{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.order .amt{margin-left:auto;text-align:right;flex:0 0 auto}
.order .amt .v{display:block;font-size:16px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.order .amt .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.track{display:flex;gap:5px;margin-top:15px}
.track .s{flex:1;height:5px;border-radius:3px;background:var(--hair)}
.track .s.on{background:var(--c)}
.ticket{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin-top:15px;
  padding-top:15px;border-top:1.5px dashed var(--hair);
}
.ticket .k{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ticket .v{display:block;font-size:13.5px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.state{display:inline-flex;align-items:center;gap:6px;font-weight:750}
.state .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.state.live{color:var(--real)} .state.done{color:var(--prof)} .state.cancel{color:var(--ink-3)}

/* ══ PERFIL ══════════════════════════════════════════════════════ */
.acct{
  display:flex;align-items:center;gap:16px;padding:22px;border-radius:22px;margin-top:6px;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-2);flex-wrap:wrap;max-width:940px;
}
.acct .av{
  width:62px;height:62px;border-radius:20px;flex:0 0 auto;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(145deg,#FF7D97,var(--coral) 50%,var(--coral-deep));color:#fff;
  box-shadow:0 4px 12px rgba(217,52,89,.3);
}
.acct .t{display:block;font-size:19px;font-weight:800;letter-spacing:-.028em}
.acct .d{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.acct .btns{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:0;max-width:940px;
  background:var(--paper);border:1px solid var(--hair);border-radius:22px;overflow:hidden;box-shadow:var(--sh-1)}
.opt{
  display:flex;align-items:center;gap:13px;padding:15px 17px;text-align:left;min-height:66px;
  border-bottom:1px solid var(--hair-2);transition:background .18s;
}
.opt:hover{background:color-mix(in srgb,var(--c) 7%, var(--paper))}
.opt .g{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%, var(--paper));color:var(--c);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), background .2s, color .2s}
.opt:hover .g{transform:scale(1.06);background:var(--c);color:#fff}
.opt .t{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.015em}
.opt .d{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.opt .ar{margin-left:auto;color:var(--ink-3);flex:0 0 auto}

/* ══ UNTERE LEISTE (nur schmal) ══════════════════════════════════ */
.dock{display:none}
/* ══ BLATT / MODAL ═══════════════════════════════════════════════ */
.scrim{
  position:fixed;inset:0;background:rgba(24,12,32,.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:80;
}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;z-index:90;background:var(--paper);
  left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  width:min(560px,calc(100vw - 32px));max-height:min(86vh,900px);overflow-y:auto;
  border-radius:28px;padding:26px;box-shadow:var(--sh-3);border:1px solid var(--hair);
  transition:opacity .28s, transform .34s cubic-bezier(.2,.8,.2,1);
}
.sheet.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.sheet .grab{display:none}
.sx{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-2);z-index:3;transition:.18s;
}
.sx:hover{color:var(--ink);border-color:var(--coral)}
.sheet h3{font-size:23px;font-weight:800;letter-spacing:-.032em;line-height:1.14}
.sheet .lead{margin-top:10px;font-size:14.8px;line-height:1.56;color:var(--ink-2)}
.hero-img{height:132px;border-radius:19px;position:relative;overflow:hidden;margin-bottom:4px}
.hero-img::after{content:'';position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.16;mix-blend-mode:overlay}
.hero-img .glyph{position:absolute;right:-14px;bottom:-18px;color:rgba(255,255,255,.3);line-height:0}
.rows{margin-top:18px;border-top:1px solid var(--hair-2)}
.rw{
  display:flex;gap:13px;align-items:flex-start;padding:14px 2px;border-bottom:1px solid var(--hair-2);
  width:100%;text-align:left;
}
.rw .i{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--coral)) 12%, var(--paper));color:var(--c,var(--coral-deep));
}
.rw .t{display:block;font-weight:750;font-size:14.5px;letter-spacing:-.015em}
.rw .d{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.cta{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.kick{
  display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  background:color-mix(in srgb,var(--c,var(--coral)) 15%, var(--paper));
  color:color-mix(in srgb,var(--c,var(--coral-deep)) 82%, var(--ink));
  border:1px solid color-mix(in srgb,var(--c,var(--coral)) 26%, transparent);
}
.chan{
  display:flex;align-items:center;gap:13px;padding:14px;border-radius:16px;margin-bottom:9px;
  border:1px solid var(--hair);background:var(--paper-2);min-height:52px;transition:.18s;
}
.chan:hover{border-color:var(--coral);transform:translateX(4px);background:var(--paper)}
.chan .i{width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;color:#fff}
.chan .t{display:block;font-weight:750;font-size:15px;letter-spacing:-.015em}
.chan .s{display:block;font-size:12.8px;color:var(--ink-2);margin-top:2px}
.slider{background:var(--paper-2);border:1px solid var(--hair);border-radius:20px;padding:20px;margin-top:18px}
.slider input[type=range]{width:100%;margin-top:14px;accent-color:var(--coral);height:24px}
.srow{display:flex;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap;padding-top:16px;border-top:1.5px dashed var(--hair)}
.srow .k{font-size:11.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.srow .v{font-size:23px;font-weight:800;letter-spacing:-.032em;margin-top:4px;font-variant-numeric:tabular-nums}

/* ══ TOAST ═══════════════════════════════════════════════════════ */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;width:calc(100vw - 32px);max-width:440px}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 18px;border-radius:15px;
  background:#231533;color:#fff;box-shadow:var(--sh-3);font-size:13.8px;line-height:1.4;
  opacity:0;transform:translateY(14px);transition:opacity .3s, transform .34s cubic-bezier(.2,.8,.2,1);
  border:1px solid rgba(255,255,255,.11);
}
.toast.on{opacity:1;transform:none}
.toast svg{flex:0 0 auto;color:#6FE0A8}
.toast b{font-weight:750}

/* ══ SCROLL-EINBLENDUNG (einmalig, kein Dauerlauf) ══════════════ */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--rvd,0ms)}

/* ══ RESPONSIV ═══════════════════════════════════════════════════ */
@media (max-width:1180px){
  .hsearch{display:none}
  /* Zwei Klassen, nicht eine: `.hsearch + .hacts{margin-left:0}` weiter oben
     ist spezifischer und gewann auch hier — die Knopfreihe stand deshalb auf
     JEDEM schmalen Schirm linksbuendig. Aufgefallen ist es erst, als „Mi
     cuenta" dazukam und der Ortschip schrumpfte: ploetzlich klaffte rechts
     eine Luecke. Vorher fuellte die Reihe die Breite zufaellig aus. */
  .hacts, .hsearch + .hacts{margin-left:auto}
}
@media (max-width:1180px){
  .cats{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,1fr);
    grid-auto-columns:min(calc((100% - 24px)/3.7), 168px);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none;
    padding-bottom:6px;
  }
  .cats::-webkit-scrollbar{display:none}
  .cat{scroll-snap-align:start}
  /* EINE Zeile statt zwei. Alles andere — Spaltenbreite, Abstand, Schnapp-
     Punkte — bleibt wie bei den Kategorien, damit die Kacheln gleich gross
     sind. Siebzehn brauchen zwei Zeilen und eine Schiene, drei nicht:
     sonst stuenden zwei oben und eine allein darunter.

     Untereinander statt nebeneinander: Der Preisblock braucht Breite fuer
     sechs Sorten. Neben drei Kacheln in einer Telefonspalte bliebe je
     Sorte kein lesbares Wort uebrig. */
  .werk-grid{grid-template-columns:1fr}
  .cats.werk{grid-template-rows:1fr;grid-column:auto}
  .gasol{grid-column:auto;min-height:0}
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:28px;align-items:stretch}
  .panel .grid2,.cupon .in{grid-template-columns:1fr;gap:26px}
  .cupon .split{border-left:0;border-top:2px dashed rgba(255,255,255,.4);padding-left:0;padding-top:24px}
  .vals{grid-template-columns:repeat(2,1fr)}
  .val:nth-child(2n){border-right:0}
  .val:nth-child(-n+2){border-bottom:1px solid var(--hair-2)}
}
@media (max-width:900px){
  .tabs{display:none}
  .socb .w{display:none}
  .socb{padding:0 12px}
  .shell{padding-bottom:104px}
  .dock{
    display:flex;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:70;
    align-items:center;gap:2px;padding:6px;border-radius:22px;
    background:color-mix(in srgb,var(--paper) 92%, transparent);
    backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);
    border:1px solid var(--hair);box-shadow:var(--sh-3);max-width:calc(100vw - 24px);
  }
  .dock .d{
    display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;height:52px;
    justify-content:center;border-radius:16px;font-size:10.5px;font-weight:700;color:var(--ink-3);
    transition:color .18s, background .18s;
  }
  .dock .d.on{color:var(--coral-deep);background:var(--coral-soft)}
  .fab{
    width:56px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 3px;
    background:var(--coral);color:#fff;box-shadow:0 3px 10px rgba(217,52,89,.4);
    transition:transform .16s;
  }
  .fab:active{transform:scale(.94)}
  .sheet{
    left:0;top:auto;bottom:0;transform:translateY(100%);width:100%;max-width:none;
    border-radius:32px 32px 0 0;max-height:90vh;padding:12px 20px 30px;
  }
  .sheet.on{transform:translateY(0)}
  .sheet .grab{display:block;width:42px;height:5px;border-radius:3px;background:var(--hair);margin:2px auto 14px}
  .sx{top:12px}
  .toasts{bottom:88px}
}
@media (max-width:700px){
  .band-h{flex-wrap:wrap;gap:10px}
  .band-h .rule{display:none}
  .band-h .hint{display:none}
}
@media (max-width:640px){
  .bigsearch .btn-p{flex:1 1 100%}
  .seal{flex-direction:column;align-items:flex-start;gap:0}
  .seal .dot{display:none}
  .seal>span:first-child{padding:6px}
  .fact{align-items:flex-start;gap:9px}
  .fact .k{flex:0 1 auto;min-width:0;line-height:1.35;text-align:right}
  .fact .dots{margin-top:13px;transform:none}
  .strip{flex-wrap:wrap;align-items:flex-start;padding:14px 15px}
  .strip .mk{width:36px;height:36px}
  .strip .cnt{flex:1 1 160px}
  .strip .btn{flex:1 1 100%;justify-content:center;margin-top:6px}
  .cityb{max-width:120px}
  .cityb .w{display:none}
  .brand .w{display:none}
  .band-h{margin-top:var(--s5)}
  .band-h .txt{max-width:100%}
  .rail>*{flex:0 0 218px}
  .cats{gap:8px;grid-auto-columns:min(calc((100% - 24px)/4.25), 132px)}
  .cat{min-height:84px;padding:11px 8px 10px;gap:9px}
  .cat .n{font-size:12px}
  .opts{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr}
  .val{border-right:0;border-bottom:1px solid var(--hair-2)}
  .val:last-child{border-bottom:0}
  .acct .btns{margin-left:0;width:100%}
  .acct .btns .btn{flex:1}
}
@media (max-width:430px){
  #lang,.socb{display:none}
  .cityb{max-width:104px;padding:0 10px}
  .hdr{gap:10px;padding:0 12px}
  .hacts{gap:6px}
}
/* Erst unter 360 dp wird es zu eng fuer vier - dort ruecken sie auf 3,4 */
@media (max-width:360px){
  .cats{grid-auto-columns:calc((100% - 24px)/3.4)}
  .cat .n{font-size:11.5px}

  /* Mit „Mi cuenta" stehen rechts DREI runde Knoepfe. Auf 320 dp klebte der
     letzte am Rand — gemessen: letzter Knopf bis x=304 bei 305 px Kopfzeile.
     Der Ortschip weicht, die Bedienelemente nicht: Text weicht, Knoepfe nie
     (UI_MASTER, Abnahmepunkt 6). Das Pin-Symbol bleibt, die Stadt steht
     einen Fingertipp entfernt im Blatt. */
  .cityb{max-width:none;width:40px;padding:0}
  .cityb #cityLbl{display:none}
}
@media (max-width:400px){
  .cat .n .lg{display:none}
  .cat .n .sm{display:inline}
  .rail>*{flex:0 0 200px}
  .grid-cards{grid-template-columns:1fr}
  .facts{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   NUR-PORTADA: was eine Startseite braucht und die Fassung v2 nicht hatte
   ══════════════════════════════════════════════════════════════════ */

/* ── Ladefolge: EIN inszenierter Moment, danach nie wieder ────────── */
@keyframes riseIn{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.hero-grid .rise{animation:riseIn .62s cubic-bezier(.2,.75,.2,1) both}
.hero-grid .rise:nth-child(1){animation-delay:.10s}
.hero-grid .rise:nth-child(2){animation-delay:.17s}
.hero-grid .rise:nth-child(3){animation-delay:.24s}
.hero-grid .rise:nth-child(4){animation-delay:.31s}
.hero-grid .rise:nth-child(5){animation-delay:.38s}
@media (prefers-reduced-motion:reduce){
  .hero-grid .rise{animation:none}
}

/* ── Der Horizont: die Sunset-Leinwand verdichtet sich hinter dem Hero ── */
.hero-band{position:relative;margin:0 calc(var(--gut)*-1);padding:0 var(--gut)}
.hero-band::before{
  content:'';position:absolute;left:0;right:0;top:-64px;bottom:-24px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(78% 62% at 20% 8%, color-mix(in srgb,var(--canvas-1) 88%, #fff) 0%, transparent 66%),
    radial-gradient(62% 58% at 88% 78%, color-mix(in srgb,var(--coral) 16%, transparent) 0%, transparent 64%);
  -webkit-mask:linear-gradient(#000 62%, transparent 100%);
  mask:linear-gradient(#000 62%, transparent 100%);
}
.hero-band>*{position:relative;z-index:1}

/* Siegel-Zeile: wo wir sind und was der Stand ist - eine Zeile, keine Kachel */
.seal{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:650;color:var(--ink-3);letter-spacing:.01em;
}
.seal .dot{width:5px;height:5px;border-radius:50%;background:var(--ink-3);opacity:.5;flex:0 0 auto}
.seal button{min-height:40px;padding:0 6px;border-radius:8px;color:inherit;font:inherit;transition:color .16s,background .16s}
.seal button:hover{color:var(--coral-deep);background:var(--coral-soft)}
.seal b{font-weight:800;color:var(--ink-2)}

/* ── Ergebnisband: gefiltert wird AUF der Startseite, nicht woanders ── */
.resband{margin-top:var(--s5)}
.reshead{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-radius:16px;margin-bottom:18px;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1);
}
.reshead .mk{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--coral)) 13%, var(--paper));color:var(--c,var(--coral-deep));
}
.reshead .t{display:block;font-weight:800;font-size:16px;letter-spacing:-.022em}
.reshead .d{display:block;font-size:12.8px;color:var(--ink-2);margin-top:2px}
.reshead .sp{flex:1}
.clearf{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:11px;
  font-size:13.5px;font-weight:700;color:var(--coral-deep);
  border:1px solid color-mix(in srgb,var(--coral) 40%, transparent);background:var(--coral-soft);
  transition:.18s;
}
.clearf:hover{background:var(--coral);color:#fff;border-color:var(--coral)}

/* ── Fußzeile: eine Webseite endet nicht mitten im Satz ─────────────── */
.foot{
  margin:var(--s6) calc(var(--gut)*-1) 0;padding:clamp(36px,4vw,60px) var(--gut) 0;
  position:relative;
}
.foot::before{content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--hair)}
.footgrid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
.footbrand .mk{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:19px;letter-spacing:-.02em;
  background:linear-gradient(145deg,#FF7D97,var(--coral) 46%,var(--coral-deep));
  box-shadow:0 2px 7px rgba(217,52,89,.32);
}
.footbrand .w{display:block;margin-top:12px;font-weight:800;font-size:19px;letter-spacing:-.035em}
.footbrand .w i{font-style:normal;color:var(--coral-deep)}
.footbrand p{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:34ch}
.footcol h4{
  font-size:11px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:12px;
}
.footcol a,.footcol button{
  display:flex;align-items:center;width:100%;text-align:left;min-height:40px;
  font-size:13.5px;color:var(--ink-2);line-height:1.35;transition:color .16s, transform .16s;
}
.footcol a:hover,.footcol button:hover{color:var(--coral-deep);transform:translateX(3px)}
.footbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(28px,3vw,44px);padding:20px 0 40px;border-top:1px solid var(--hair-2);
  font-size:12.5px;color:var(--ink-3);
}
.footbar .sp{flex:1}
.footbar button{
  min-height:40px;padding:0 13px;border-radius:9px;font-size:12.5px;font-weight:650;color:var(--ink-2);
  border:1px solid var(--hair);transition:.16s;
}
.footbar button:hover{color:var(--coral-deep);border-color:var(--coral)}

@media (max-width:1024px){
  .footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footbrand{grid-column:1 / -1}
}
@media (max-width:560px){
  .footgrid{grid-template-columns:1fr;gap:26px}
  .foot{padding-top:32px}
}

.hero-grid .apk.rise{animation-delay:.42s}
:root[data-theme="dark"] .cat.all.on{background:var(--coral);border-color:var(--coral);color:#2A0F1A}
:root[data-theme="dark"] .cat.all.on .g{color:#2A0F1A}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cat.all.on{background:var(--coral);border-color:var(--coral);color:#2A0F1A}
  :root:not([data-theme="light"]) .cat.all.on .g{color:#2A0F1A}
}

/* ══════════════════════════════════════════════════════════════════
   DIE LEBENDE LEINWAND
   Scrollen bewegt die Sonne. Vier Himmel liegen uebereinander und
   loesen sich ab — an das Scrollen gebunden, nicht an eine Uhr, also
   laeuft nichts im Leerlauf weiter.

   Harte Grenze, die die Gestaltung bestimmt hat: Die Seite steht mit
   dunkler Tinte auf diesem Himmel. Er darf im Hellmodus deshalb NIE
   dunkel werden — sonst ist die Fusszeile unlesbar. Der Tag laeuft
   also durch Farbe und Waerme, nicht durch Helligkeit. Im Dunkelmodus
   umgekehrt: er wird tiefer, und die Sterne treten hervor.

   Alles hier laeuft ueber scroll()/view()-Zeitachsen. Das sind
   Animationen ohne Uhr: sie bewegen sich nur, wenn der Nutzer scrollt,
   liegen im Compositor und kosten den Hauptfaden nichts.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --sky-1:#FFE3CE; --sky-2:#FFD9DC; --sky-3:#FFCFC6; --sky-4:#EBD2F3;
  --sky-acc:#FFB9A0; --sky-cool:#CFE7EA;
  --stars-max:0;
  --glow:rgba(255,120,140,.20);
}
:root[data-theme="dark"]{
  --sky-1:#241436; --sky-2:#2E1440; --sky-3:#3A1636; --sky-4:#150C22;
  --sky-acc:#4A1E44; --sky-cool:#16283A;
  --stars-max:.55;
  --glow:rgba(255,120,150,.16);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --sky-1:#241436; --sky-2:#2E1440; --sky-3:#3A1636; --sky-4:#150C22;
  --sky-acc:#4A1E44; --sky-cool:#16283A;
  --stars-max:.55;
  --glow:rgba(255,120,150,.16);
}}

#sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
#sky>i{position:absolute;inset:-12%;display:block;opacity:0}
#sky .s1{
  opacity:1;
  background:
    radial-gradient(120% 80% at 12% 0%, var(--sky-1) 0%, transparent 62%),
    radial-gradient(100% 70% at 92% 8%, var(--sky-2) 0%, transparent 58%),
    linear-gradient(178deg, var(--sky-2), var(--sky-1));
}
#sky .s2{
  background:
    radial-gradient(110% 74% at 78% 4%, var(--sky-cool) 0%, transparent 56%),
    radial-gradient(120% 84% at 10% 22%, var(--sky-2) 0%, transparent 64%),
    linear-gradient(180deg, var(--sky-1), var(--sky-2));
}
#sky .s3{
  background:
    radial-gradient(120% 86% at 88% 12%, var(--sky-acc) 0%, transparent 60%),
    radial-gradient(110% 78% at 6% 70%, var(--sky-4) 0%, transparent 62%),
    linear-gradient(172deg, var(--sky-3), var(--sky-2));
}
#sky .s4{
  background:
    radial-gradient(130% 90% at 16% 88%, var(--sky-acc) 0%, transparent 58%),
    radial-gradient(110% 80% at 90% 20%, var(--sky-4) 0%, transparent 62%),
    linear-gradient(168deg, var(--sky-4), var(--sky-3));
}
/* Ein wanderndes Licht — die einzige Bewegung, die quer laeuft */
#sky .lux{
  inset:auto; left:-30%; top:-25%; width:78vw; height:78vw; border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 66%);
  opacity:1; filter:blur(28px);
}
/* Sterne: eine Flaeche, kein Element je Punkt — nichts laeuft im Kreis */
#sky .stars{
  opacity:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 27% 42%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 41% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 58% 33%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 68% 8%,  #fff, transparent),
    radial-gradient(1.2px 1.2px at 79% 47%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 88% 22%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 34% 63%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 52% 74%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 71% 68%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 19% 82%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 92% 78%, #fff, transparent);
  background-repeat:no-repeat;
}

/* Sie kreuzen sich NICHT — sie legen sich uebereinander. Beim Kreuzen faellt
   die Deckung in der Mitte auf die Haelfte und die Seite wuescht aus; so ist
   immer genau ein voller Himmel da, der naechste blendet darueber. */
@keyframes skyB{0%{opacity:0} 10%{opacity:0} 32%{opacity:1} 100%{opacity:1}}
@keyframes skyC{0%{opacity:0} 42%{opacity:0} 64%{opacity:1} 100%{opacity:1}}
@keyframes skyD{0%{opacity:0} 74%{opacity:0} 96%{opacity:1} 100%{opacity:1}}
@keyframes luxDrift{0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(96vw,52vh,0)}}
@keyframes starsIn{0%{opacity:0} 62%{opacity:0} 100%{opacity:var(--stars-max)}}

/* ══ SCROLL-GEBUNDENE BEWEGUNG ═══════════════════════════════════
   Die Kurzform 'animation:' setzt animation-timeline zurueck — die
   Zeitachse MUSS danach stehen. (Derselbe Fehler wie bei mask-composite.) */
@supports (animation-timeline: view()){
  @media not (prefers-reduced-motion: reduce){

    #sky .s2{animation:skyB linear both; animation-timeline:scroll(root block);}
    #sky .s3{animation:skyC linear both; animation-timeline:scroll(root block);}
    #sky .s4{animation:skyD linear both; animation-timeline:scroll(root block);}
    #sky .lux{animation:luxDrift linear both; animation-timeline:scroll(root block);}
    #sky .stars{animation:starsIn linear both; animation-timeline:scroll(root block);}

    /* Die Baender kommen aus der Tiefe statt einfach aufzutauchen.
       Nur transform und opacity — beides liegt im Compositor. */
    .rv{opacity:1;transform:none;animation:emerge linear both;}
    .rv{animation-timeline:view(); animation-range:entry 4% cover 34%;}
    @keyframes emerge{
      from{opacity:0;transform:translate3d(0,44px,0) scale(.955)}
      to{opacity:1;transform:none}
    }

    /* Tiefe in der Karte: das Symbol wandert langsamer als die Karte */
    .card .glyph{animation:glyphPar linear both;}
    .card .glyph{animation-timeline:view(); animation-range:cover 0% cover 100%;}
    @keyframes glyphPar{from{transform:translate3d(0,16px,0)} to{transform:translate3d(0,-16px,0)}}

    /* Die grossen Szenen atmen beim Eintreten */
    .story .in, .cupon .in{animation:sceneIn linear both;}
    .story .in, .cupon .in{animation-timeline:view(); animation-range:entry 0% cover 46%;}
    @keyframes sceneIn{from{transform:translate3d(0,26px,0)} to{transform:none}}

    /* Die Silhouette am Horizont zieht gegenlaeufig */
    .story .sil{animation:silPar linear both;}
    .story .sil{animation-timeline:view(); animation-range:cover 0% cover 100%;}
    @keyframes silPar{from{transform:translate3d(0,18px,0)} to{transform:translate3d(0,-10px,0)}}
  }
}

/* ══ DER ERSTE MOMENT ════════════════════════════════════════════
   Ein Lichtstreifen laeuft einmal ueber den Schirm, dann nie wieder. */
#sweep{
  position:fixed; inset:0; z-index:6; pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(102deg, transparent 34%, rgba(255,255,255,.5) 47%, rgba(255,255,255,.16) 54%, transparent 66%);
  transform:translate3d(-130%,0,0);
  animation:sweep 1.5s cubic-bezier(.36,0,.16,1) 1.25s both;
}
@keyframes sweep{to{transform:translate3d(130%,0,0)}}

/* Die Ueberschrift setzt sich aus ihren Woertern zusammen */
.sign i{display:inline-block;font-style:normal;will-change:transform,filter}
.sign i{animation:word .95s cubic-bezier(.19,.86,.22,1) both}
@keyframes word{
  from{opacity:0; transform:translate3d(var(--dx,0),var(--dy,18px),0); filter:blur(12px)}
  to{opacity:1; transform:none; filter:blur(0)}
}
.sign .l1 i:nth-child(1){--dx:-58px;--dy:10px;animation-delay:1.04s}
.sign .l1 i:nth-child(2){--dx: 54px;--dy:-8px;animation-delay:1.12s}
.sign .l2 i:nth-child(1){--dx:-30px;--dy:26px;animation-delay:1.20s}
.sign .l2 i:nth-child(2){--dx: 38px;--dy:22px;animation-delay:1.28s}

/* ══ ZEIGER ══════════════════════════════════════════════════════
   Nur wo es einen echten Zeiger gibt. Der Systemzeiger bleibt sichtbar —
   ein unsichtbarer Mauszeiger ist eine Zumutung, kein Stilmittel. */
#cur{display:none}
@media (hover:hover) and (pointer:fine){
  @media not (prefers-reduced-motion: reduce){
    /* Aussen die Lage (schreibt das Skript), innen das Aussehen (macht CSS).
       Getrennt, damit die Groesse ueber transform laeuft und nicht ueber
       width/height — sonst rechnet der Browser bei jedem Bild neu um. */
    #cur{display:block; position:fixed; top:0; left:0; width:0; height:0;
         pointer-events:none; z-index:150; opacity:0; transition:opacity .35s ease}
    #cur::before{
      content:''; position:absolute; left:-15px; top:-15px; width:30px; height:30px;
      border-radius:50%; border:1.5px solid color-mix(in srgb,var(--coral) 70%, transparent);
      transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s;
    }
    #cur.live{opacity:.85}
    #cur.hot::before{transform:scale(1.8);background:color-mix(in srgb,var(--coral) 13%, transparent);border-color:color-mix(in srgb,var(--coral) 30%, transparent)}
    #cur.press::before{transform:scale(.72);background:color-mix(in srgb,var(--coral) 26%, transparent)}
  }
}
/* Magnetisch — bewusst nur die Hauptaktion und der Support-Knopf */
.btn-p,.supb{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.btn-p:active{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.98)}
.supb:active{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.94)}
.supb:hover{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(1.06)}

/* Telefon bekommt die Szene, nicht die volle Rechnung: der Himmel und die
   eintretenden Baender bleiben, die Parallaxe je Karte faellt weg - dort
   stehen zwei Dutzend Karten gleichzeitig im Bild. */
@media (max-width:700px){
  .card .glyph, .story .sil, .story .in, .cupon .in{animation:none}
  #sweep{animation-duration:1.1s}
}
@media (prefers-reduced-motion:reduce){
  #sweep{display:none}
  .sign i{animation:none}
  #sky .s1{opacity:1} #sky .lux{opacity:.6}
  .btn-p,.supb,.btn-p:active,.supb:active,.supb:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   SZENEN — Scrollen ist die Kamera

   Jede Szene ist ein hoher Abschnitt mit einer klebenden Buehne. Solange
   die Buehne klebt, laeuft die Szene ab; danach schiebt die naechste sie
   fort. Es gibt keinen Schnitt: was eine Szene verlaesst, faehrt an der
   Kamera vorbei, waehrend das Naechste aus der Tiefe kommt.

   Alles haengt an BENANNTEN view()-Zeitachsen des Abschnitts (--sc). Das
   ist der einzige Weg, eine klebende Buehne zu steuern: sie bewegt sich
   selbst nicht, ihr Abschnitt schon. Nachgemessen, bevor gebaut wurde.

   Es laeuft nichts von allein. Kein Element hat eine Endlosschleife.
   ══════════════════════════════════════════════════════════════════ */

.sc{position:relative; height:var(--h,260vh); overflow:clip; view-timeline-name:--sc; view-timeline-axis:block}
/* Die Hoehe einer Szene ist ihre SPIELZEIT, nicht ihr Inhalt: die Buehne
   darin klebt bei 100svh, der Rest ist Scrollstrecke fuer die Choreografie.

   Sie war zu lang. Gemessen am 2026-08-19 auf 390x844: das erste Angebot
   stand 4231 px unter dem Seitenanfang, die Kategorien 1844 px — fuenf
   bzw. zwei volle Wischer, bevor irgendetwas benutzbar war. Eine Szene mit
   280vh verlangt fast drei Wischer fuer EIN Bild. Das ist kein immersiver
   Einstieg mehr, das ist eine Vorfuehrung, an der man vorbeimuss.

   Jetzt: die Choreografie bleibt vollstaendig, nur das Halten dazwischen
   faellt weg. Erstes Angebot ~2600 px statt 4231.

   Untergrenze ist 130vh — darunter hat eine klebende Buehne keinen Weg
   mehr, auf dem sie sich bewegen koennte, und die Bewegung wirkt gehetzt. */
.sc1{--h:170vh} .sc2{--h:185vh} .sc3{--h:240vh} .sc4{--h:230vh} .sc5{--h:170vh}
@media (max-width:700px){ .sc1{--h:135vh} .sc2{--h:150vh} .sc3{--h:195vh} .sc4{--h:185vh} .sc5{--h:140vh} }
.stg{
  position:sticky; top:0; height:100svh; min-height:560px;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(75px + 12px) 0 24px;
  perspective:1400px; perspective-origin:50% 46%;
  transform-style:preserve-3d;
}
.stg>*{transform-style:preserve-3d}
.sc-tall{}
/* Ohne Zeitachsen (aeltere Browser) faellt alles auf den ruhigen Stand
   zurueck: Buehne nicht klebend, Abschnitt so hoch wie sein Inhalt. */
@supports not (animation-timeline: view()){
  .sc{height:auto !important}
  .stg{position:static;height:auto;min-height:0;padding:48px 0}
  .sc3{display:none}
  .mapa-wrap{height:auto;min-height:460px}
}
@media (prefers-reduced-motion:reduce){
  .sc{height:auto !important}
  .stg{position:static;height:auto;min-height:0;padding:40px 0}
  .stg *{animation:none !important;transform:none !important;opacity:1 !important}
  .sc3{display:none}
  .mapa-wrap{height:auto;min-height:460px}
}

/* Gemeinsame Bereichsangabe: die gesamte Klebezeit der Szene. */
@supports (animation-timeline: view()){
 @media not (prefers-reduced-motion: reduce){
  /* :where() nimmt der Sammelregel die Spezifitaet — sonst schlaegt sie
     jede Einzelzeit darunter, und die ganze Choreografie laeuft gleichzeitig.
     Genau das war der Fall: sechs Karten flogen als Block. */
  .stg :where([data-anim]){animation-timeline:--sc; animation-range:entry 55% contain 100%;}
  .sc1-exit{animation-range:contain 0% contain 100%}

  /* ══ SZENE 1 · APERTURA ══════════════════════════════════════ */
  /* Der Abgang: die ganze Szene faehrt an der Kamera vorbei. */
  .sc1-exit{animation:heroExit linear both; animation-timeline:--sc}
  @keyframes heroExit{
    0%  {transform:none; opacity:1}
    50% {transform:none; opacity:1}
    100%{transform:translate3d(0,-70px,600px); opacity:0}
  }
  .sc1-hint{animation:hintOut linear both; animation-timeline:--sc; animation-range:contain 0% contain 34%}
  @keyframes hintOut{0%{opacity:1} 100%{opacity:0}}

  /* ══ SZENE 2 · LOS DIECISIETE ════════════════════════════════
     Die Kacheln kommen aus dem Raum und landen GENAU in ihren
     Rasterplaetzen — ihr Endzustand ist 'transform:none', also das
     echte Raster. Danach sind es wieder normale Knoepfe. */
  /* SIE MUESSEN FRUEH LANDEN UND DANN STEHENBLEIBEN.

     Bis 2026-08-26 landete die erste Kachel bei `contain 42%` und die
     siebzehnte bei `contain 75,6%`. Auf dem Telefon ist die Klebestrecke
     469 px lang (gemessen 434x938): das fertige Raster existierte also
     erst ab 355 px und war nach 469 px vorbei — **115 px, ein Viertel
     einer Wischbewegung**. Die uebrigen drei Viertel war es eine Wolke
     aus verdrehten Kacheln, und weil die Buehne klebt, half Scrollen
     nicht: es trieb nur den Flug weiter. Genau das hat der Eigentuemer
     gemeldet ("wenn ich scrolle gehen sie wieder weg").

     Jetzt: erste Kachel bei 12 %, letzte bei 28,8 % — alle siebzehn
     stehen nach 135 px, das fertige Raster haelt die restlichen 334 px
     (71 %). Die Choreografie bleibt vollstaendig, nur das Nachzuegeln
     faellt weg. */
  .sc2-head{animation:headIn linear both; animation-timeline:--sc}
  .sc2-head{animation-range:entry 34% contain 8%}
  @keyframes headIn{
    0%{opacity:0;transform:translate3d(0,40px,-200px)}
    46%{opacity:1;transform:none} 100%{opacity:1;transform:none}
  }
  .sc2 .cat{
    animation:tileLand linear both; animation-timeline:--sc;
    animation-range:entry 34% contain calc(12% + var(--r,0) * 1.05%);
  }
  @keyframes tileLand{
    0%{
      opacity:0;
      transform:translate3d(var(--tx),var(--ty),var(--tz)) rotateX(var(--trx)) rotateY(var(--try_)) scale(.8);
    }
    18%{opacity:1}
    100%{opacity:1; transform:none}
  }
  .sc2-note{animation:noteIn linear both; animation-timeline:--sc;animation-range:contain 30% contain 44%}
  @keyframes noteIn{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}

  /* ══ SZENE 3 · LAS OFERTAS ═══════════════════════════════════
     Echte Angebote fliegen an der Kamera vorbei. Sie sind anklickbar,
     aber nur solange sie sichtbar sind — pointer-events wandert mit. */
  .fly{
    position:absolute; inset:0; display:grid; place-items:center;
    animation:flyBy linear both; animation-timeline:--sc;
    animation-range:contain calc(var(--i) * 13%) contain calc(var(--i) * 13% + 40%);
    pointer-events:none;
  }
  .fly .card{pointer-events:auto;
  }
  @keyframes flyBy{
    0%  {opacity:0; transform:translate3d(var(--fx),112vh,-1500px) rotateY(var(--fr))}
    16% {opacity:1}
    54% {transform:translate3d(0,0,0) rotateY(0deg); opacity:1}
    84% {opacity:1}
    100%{opacity:0; transform:translate3d(calc(var(--fx)*-.5),-118vh,660px) rotateY(calc(var(--fr)*-1))}
  }
  .sc3-label{animation:labelSwap linear both; animation-timeline:--sc}
  @keyframes labelSwap{0%{opacity:0;transform:translateY(14px)}22%{opacity:1;transform:none}74%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

  /* ══ SZENE 4 · EL MAPA ═══════════════════════════════════════ */
  .mapa-stage{position:relative;width:100%;height:100%;display:grid;place-items:center}
  .mapa-holder{position:relative;width:100%;max-width:1040px;aspect-ratio:100/60}
  @keyframes dotIn{
    0%{opacity:0; transform:translate3d(var(--dx),var(--dy),var(--dz)) scale(.4)}
    60%{opacity:1}
    100%{opacity:.9; transform:translate3d(0,0,0) scale(1)}
  }
  /* ── Die gemessene Insel ──────────────────────────────────────
     Der Ablauf haelt, was der Text daneben verspricht: die Kueste zeichnet
     sich, die Lichter gehen von West nach Ost an, das Land hebt sich aus
     dem Dunkel. Vorher stand die Insel fertig da, waehrend „se encienden,
     se unen, y aparece" etwas anderes behauptete.

     Alles haengt an der Scroll-Zeitleiste der Szene (--sc), nicht an einer
     Uhr: die Vorstellung beginnt, wenn der Abschnitt ins Bild kommt. */
  .i-kueste{
    animation:iZeichnen linear both; animation-timeline:--sc;
    animation-range:entry 62% contain 30%;
  }
  @keyframes iZeichnen{to{stroke-dashoffset:0}}
  .i-land{
    animation:iAuf linear both; animation-timeline:--sc;
    animation-range:contain 22% contain 44%;
  }
  @keyframes iAuf{from{opacity:0} to{opacity:1}}
  .i-schein{
    animation:iSchein linear both; animation-timeline:--sc;
    animation-range:contain calc(18% + var(--i) * .055%) contain calc(34% + var(--i) * .055%);
  }
  @keyframes iSchein{0%{opacity:0} 70%{opacity:.5} 100%{opacity:.38}}
  .i-kern{
    animation:iKern linear both; animation-timeline:--sc;
    animation-range:contain calc(20% + var(--i) * .055%) contain calc(33% + var(--i) * .055%);
  }
  @keyframes iKern{0%{opacity:0} 60%{opacity:1} 100%{opacity:.95}}
  .i-stadt .i-s-schein{
    animation:iStadt linear both; animation-timeline:--sc;
    animation-range:contain calc(18% + var(--i) * 1.1%) contain calc(38% + var(--i) * 1.1%);
  }
  @keyframes iStadt{0%{opacity:0} 70%{opacity:.85} 100%{opacity:.7}}
  .mapa-tit{animation:mapTit linear both; animation-timeline:--sc;animation-range:entry 55% contain 18%}
  @keyframes mapTit{from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}
  .mapa-cnt{animation:mapCnt linear both; animation-timeline:--sc;animation-range:contain 62% contain 84%}
  @keyframes mapCnt{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none}}

  /* ══ SZENE 5 · EL CINCO ══════════════════════════════════════ */
  .sc5-num{animation:numGrow linear both; animation-timeline:--sc;animation-range:entry 55% contain 55%}
  @keyframes numGrow{
    0%{opacity:0;transform:translate3d(0,0,-900px)}
    30%{opacity:1}
    100%{opacity:1;transform:translate3d(0,0,0)}
  }
  .sc5-rows .mini{
    animation:rowIn linear both; animation-timeline:--sc;
    animation-range:contain calc(34% + var(--m) * 7%) contain calc(58% + var(--m) * 7%);
  }
  @keyframes rowIn{
    from{opacity:0;transform:translate3d(var(--rx),0,-200px)}
    to{opacity:1;transform:none}
  }
  .sc5-cta{animation:ctaIn linear both; animation-timeline:--sc;animation-range:contain 70% contain 92%}
  @keyframes ctaIn{from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}
 }
}

/* Auftritt der ersten Szene: an der Uhr, genau einmal, beim Laden. */
@media not (prefers-reduced-motion: reduce){
  .sc1-body{animation:heroLoad .9s cubic-bezier(.2,.8,.2,1) 1.26s both}
  .sc1-apk{animation:heroLoad .95s cubic-bezier(.2,.8,.2,1) 1.4s both}
}
@keyframes heroLoad{from{opacity:0;transform:translate3d(0,34px,0)} to{opacity:1;transform:none}}

/* ══ AUSSEHEN DER SZENEN (unabhaengig von der Bewegung) ═════════ */
.sc-hint{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.sc-hint .m{
  width:22px;height:34px;border-radius:11px;border:1.5px solid var(--ink-3);position:relative;flex:0 0 auto;
}
.sc-hint .m::after{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--ink-3);transform:translateX(-50%)}

.sc2{}
.sc2 .stg{gap:22px}
.sc3 .stg{position:sticky}
.fly>.card{width:min(300px,74vw)}
.sc3-label{
  position:absolute; left:0; bottom:9vh; max-width:min(430px,72vw); z-index:3;
}
.sc3-label .k{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sc3-label .t{display:block;font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.032em;line-height:1.1;margin-top:8px}
.sc3-label .d{display:block;font-size:14.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}

.mapa-wrap{
  position:relative;border-radius:28px;overflow:hidden;width:100%;height:100%;
  background:linear-gradient(168deg,#1B1030,#241338 46%,#120A1E);
  box-shadow:var(--sh-3);
}
.mapa-wrap::after{content:'';position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.mapa-inner{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(16px,3vw,40px)}
.mapa-tit{position:absolute;left:clamp(20px,3vw,44px);top:clamp(18px,3vw,38px);z-index:4;max-width:min(430px,68vw);color:#fff}
.mapa-tit h3{font-size:clamp(21px,2.5vw,32px);font-weight:800;letter-spacing:-.032em;line-height:1.1;margin-top:11px}
.mapa-tit p{margin-top:10px;font-size:14.5px;line-height:1.5;color:#C6B4CE}
.mapa-tit .tag{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.26)}
.mapa-cnt{
  position:absolute;right:clamp(20px,3vw,44px);bottom:clamp(18px,3vw,38px);z-index:4;
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;max-width:min(560px,84vw);
}
.mcount{
  display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:13px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
}
.mcount b{font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.mcount span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#B9A7C2}

.sc5 .stg{align-items:flex-start}
.sc5-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;width:100%;max-width:var(--wide);margin:0 auto}
.sc5-num{font-size:clamp(96px,17vw,240px);font-weight:800;letter-spacing:-.06em;line-height:.82;color:var(--coral-deep)}
.sc5-num small{display:block;font-size:clamp(12px,1.1vw,15px);font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:16px}
.sc5-h{font-size:clamp(21px,2.3vw,31px);font-weight:800;letter-spacing:-.032em;line-height:1.12;margin-top:18px}
.sc5-x{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:46ch}

@media (max-width:900px){
  .sc5-grid{grid-template-columns:1fr;gap:18px}
  .sc3-label{bottom:5vh;left:0;right:0;max-width:none}
  .mapa-wrap{display:flex;flex-direction:column;gap:12px;padding:clamp(14px,4vw,26px);height:100%}
  .mapa-tit{position:static;max-width:none;margin:0}
  .mapa-tit h3{font-size:clamp(19px,5.2vw,27px);margin-top:8px}
  .mapa-tit p{font-size:13px;margin-top:7px}
  .mapa-inner{position:static;flex:1 1 auto;display:grid;place-items:center;padding:0;min-height:0}
  .mapa-holder{max-width:100%}
  .mapa-cnt{position:static;justify-content:flex-start;margin:0;gap:8px;max-width:none}
  .mcount{padding:8px 11px}
  .mcount b{font-size:16px}
  .mcount span{font-size:10px}
}
@media (max-width:700px){
  /* Die schwebende Leiste unten verdeckt sonst den Fuss jeder Szene. */
  .stg{padding-top:calc(75px + 6px);padding-bottom:96px;min-height:520px}
  .fly>.card{width:min(240px,68vw)}
  .sc5-num{font-size:clamp(74px,22vw,120px)}
}


/* ══════════════════════════════════════════════════════════════════
   ECHTE DATEN — was die Vorschau nicht brauchte
   ══════════════════════════════════════════════════════════════════ */

/* Echte Fotos statt gemalter Farbfelder. Der Farbverlauf bleibt als
   Grund darunter: bis das Bild da ist, steht dort die Modulfarbe und
   kein grauer Kasten. */
.card .img{background:linear-gradient(150deg,
  color-mix(in srgb,var(--c) 80%, #2A1730),
  color-mix(in srgb,var(--c) 34%, #150C1D))}
.card .ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.card:hover .ph{transform:scale(1.04)}

/* „Ejemplo": ein Beispielbetrieb muss als solcher erkennbar sein.
   Ohne diese Marke waere die Seite ein NO-DUMMY-Bruch. */
.card .demo, .det-hero .demo{
  position:absolute;right:9px;bottom:9px;height:22px;padding:0 8px;border-radius:6px;
  display:inline-flex;align-items:center;background:rgba(20,10,28,.55);color:#FFE2B8;
  font-size:10.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  backdrop-filter:blur(4px);border:1px solid rgba(255,226,184,.3);
}

/* Wie viele Betriebe hinter einer Kategorie stehen — echte Zahl aus
   dem Katalog, oder ehrlich „Pronto", wo es noch keine gibt. */
.cat{position:relative}
.cat .cnt{
  position:absolute;top:11px;right:11px;font-size:11px;font-weight:800;
  color:color-mix(in srgb,var(--c) 70%, var(--ink));opacity:.85;
}
.cat .cnt.pronto{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);opacity:.7;
}
.cat.on .cnt,.cat:hover .cnt{color:inherit;opacity:1}

/* Karten und Kacheln sind jetzt echte Links. */
.card,.cat,.tailcard,.door,.story .c,.more{text-decoration:none;color:inherit}
a.card:focus-visible,a.cat:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px}

/* Der Kopfzeilen-Ort IST ein Knopf: er oeffnet die Staedte-Wahl und filtert
   den Katalog. Bis 2026-08-20 war er eine Aussage mit `cursor:default` —
   der Eigentuemer hat ihn zu Recht angeklickt und nichts passierte. Ein
   Element, das aussieht wie ein Bedienelement, muss eines sein. */
.cityb{cursor:pointer}
.cityb:hover{border-color:var(--coral);background:var(--paper)}
.cityb:active{transform:scale(.98)}

/* Die Reiter der Kopfzeile fuehren in die App. */
a.tab{text-decoration:none}


/* ══════════════════════════════════════════════════════════════════
   DAS SIEGEL — die eine Markenanimation

   Es gibt ab hier GENAU EINE. Sie erscheint an drei Stellen und sieht
   an allen dreien gleich aus:

     1. beim Betreten der Startseite   (#rs-intro)
     2. beim Sprung in die App          (#rs-uebergang — ohne Marke)
     3. waehrend die App laedt          (#rs-boot in index.html)

   Der Grund dafuer ist ein gemessener Fehler: vorher lief hier eine
   Animation, und beim Klick auf ein Angebot lief eine ZWEITE (der
   Flutter-Splash, 3,2 s + 0,42 s). Zwei Marken-Auftritte hintereinander
   sind kein Auftritt, sondern eine Warteschlange.

   Ein Vorhang, kein Schaufenster: nach knapp zwei Sekunden ist er weg
   und bedienbar ist alles darunter. An der Uhr, genau einmal.
   ══════════════════════════════════════════════════════════════════ */

/* Der pinke Grund. Eine Flaeche, kein Verlaufssalat: die Aktionsfarbe
   der Marke, unten dunkler, damit das weisse R oben Luft hat. */
.sello{
  position:fixed; inset:0; z-index:2147483000;
  display:grid; place-items:center; align-content:center;
  /* haelt den Lichtstrahl drinnen — sonst schiebt er eine Bildlaufleiste an */
  overflow:hidden;
  background:
    radial-gradient(94% 60% at 50% 22%, #FF7E9C 0%, transparent 64%),
    radial-gradient(70% 50% at 84% 96%, #E11D53 0%, transparent 60%),
    linear-gradient(168deg, #FF5A7C 0%, #F0325F 52%, #D31E4B 100%);
  color:#fff;
}

/* Das R. Gross, weiss, mittig — die Marke selbst, nicht ihr Kaestchen. */
.sello .r{
  position:relative;
  font-size:clamp(128px,30vw,204px); line-height:.82; font-weight:800;
  letter-spacing:-.06em; color:#fff;
  text-shadow:0 14px 44px rgba(120,8,40,.34);
}

/* Ein Lichtstrahl faehrt einmal ueber die ganze Flaeche — der Moment, in
   dem das Siegel „gepraegt" wirkt. Er haengt am GRUND, nicht am R: am
   Buchstaben befestigt lief er als weisser Strich daneben vorbei statt
   darueber (gesehen im gerenderten Bild, nicht im Quelltext vermutet).
   Nur Transform, also allein auf dem Compositor — kein Ruckeln auf
   schwachen Geraeten. */
.sello::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-46%; width:34%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-14deg) translateX(0);
  pointer-events:none; filter:blur(6px);
}

/* Die Wortmarke wischt unter dem R hervor. */
.sello .w{
  margin-top:20px; font-size:clamp(13px,3.4vw,17px); font-weight:750;
  letter-spacing:.42em; text-transform:uppercase; text-indent:.42em;
  color:rgba(255,255,255,.94);
}
/* Das Land, leise. */
.sello .l{
  margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}

/* ── Der Auftritt ───────────────────────────────────────────────── */
@keyframes selloR{
  0%  {opacity:0; transform:translateY(16px) scale(.86); filter:blur(11px)}
  62% {opacity:1; filter:blur(0)}
  100%{opacity:1; transform:none; filter:blur(0)}
}
@keyframes selloLicht{
  0%,10%{transform:skewX(-14deg) translateX(0)}
  70%   {transform:skewX(-14deg) translateX(430%)}
  100%  {transform:skewX(-14deg) translateX(430%)}
}
@keyframes selloWort{
  from{opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(6px)}
  to  {opacity:1; clip-path:inset(0 0 0 0);    transform:none}
}
/* Der Vorhang hebt sich — er blendet nicht aus, er geht auf. Darunter
   steht die Startseite schon fertig da. */
@keyframes selloHoch{
  from{clip-path:inset(0 0 0 0)}
  to  {clip-path:inset(0 0 100% 0)}
}

.sello .r{animation:selloR .68s cubic-bezier(.2,.85,.2,1) both}
.sello::after{animation:selloLicht 1.3s cubic-bezier(.32,.06,.2,1) .18s both}
.sello .w{animation:selloWort .62s cubic-bezier(.2,.85,.2,1) .34s both}
.sello .l{animation:selloWort .62s cubic-bezier(.2,.85,.2,1) .50s both}

/* Die Startseiten-Fassung: sie geht nach 1,32 s von selbst auf. */
#rs-intro{
  pointer-events:none;
  animation:selloHoch .62s cubic-bezier(.62,0,.28,1) 1.32s both;
}

/* Der Schleier beim Sprung in die App.

   Er zeigt KEINE Marke. Sein Verlauf ist pixelgleich zu #rs-boot in
   web/index.html: fuer das Auge laedt EINE ruhige Flaeche weiter, waehrend
   das Dokument wechselt und knapp 2 MB Engine kommen. Der schmale Balken
   oben sagt „es passiert etwas" — mehr braucht ein Klick an dieser Stelle
   nicht.

   Die drei Zustaende (hell · Systemdunkel · ausdruecklich dunkel) folgen
   demselben Muster wie der Rest dieser Datei. */
#rs-uebergang{
  position:fixed; inset:0; z-index:2147483000; overflow:hidden;
  background:linear-gradient(180deg,#FFE1C4 0%,#FFCFD6 44%,#F3DCEF 100%);
}
:root[data-theme="dark"] #rs-uebergang{background:linear-gradient(180deg,#33202B 0%,#2A1B2E 44%,#1C1426 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #rs-uebergang{
  background:linear-gradient(180deg,#33202B 0%,#2A1B2E 44%,#1C1426 100%)}}
#rs-uebergang i{
  position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,transparent,var(--coral),transparent);
  animation:rsLauf 1.05s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes rsLauf{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* Wer reduzierte Bewegung eingestellt hat, sieht keinen Vorhang —
   weder auf der Startseite noch beim Sprung. */
@media (prefers-reduced-motion:reduce){
  #rs-intro{display:none}
  .sello .r,.sello::after,.sello .w,.sello .l{animation:none}
  #rs-uebergang i{animation:none; opacity:.5}
  .sello .r,.sello .w,.sello .l{opacity:1; transform:none; filter:none; clip-path:none}
  .sello::after{display:none}
}

/* ── Hell/Dunkel ──────────────────────────────────────────────────
   Ein Schalter, zwei Zustaende, ein Symbol: gezeigt wird immer das ZIEL des
   Klicks — Sonne im Dunkeln, Mond im Hellen. Dieselbe Logik wie auf den
   SEO-Seiten (`web/theme.js`), damit sich die Website ueberall gleich
   bedient. */
.thb{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--paper-2);color:var(--ink-2);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .16s;
}
.thb:hover{background:var(--paper);color:var(--ink);border-color:var(--coral)}

/* Mi cuenta — gleiche Masse wie der Hell/Dunkel-Schalter, damit die drei
   runden Knoepfe rechts eine Reihe bilden und keine Treppe. */
.cntb{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--paper-2);color:var(--ink-2);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .16s;
}
.cntb:hover{background:var(--paper);color:var(--ink);border-color:var(--coral)}
.cntb:active{transform:scale(.94)}
.thb:active{transform:scale(.94)}
.thb .th-sol{display:none}
:root[data-theme="dark"] .thb .th-sol{display:block}
:root[data-theme="dark"] .thb .th-mond{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .thb .th-sol{display:block}
  :root:not([data-theme="light"]) .thb .th-mond{display:none}
}

/* Die Staedte-Wahl im Blatt. */
.lugarliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:16px}
.lugarliste button{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;
  padding:0 13px;border-radius:12px;border:1px solid var(--hair);background:var(--paper-2);
  font-size:13.5px;font-weight:640;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .16s,background .16s;
}
.lugarliste button:hover{border-color:var(--coral);background:var(--paper)}
.lugarliste button[aria-current="true"]{border-color:var(--coral);background:var(--coral-soft)}
.lugarliste .z{font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════
   DIE INSEL — gemessen, nicht gezeichnet

   Kuestenlinie aus geoBoundaries ADM0 (CC BY 4.0), 45.021 Rohpunkte auf
   777 reduziert; Haiti groeber daneben, damit die DR nicht im Nichts
   schwebt. Jeder Betrieb steht an seiner echten Adresse.

   Der Lichtschein ist ein FARBVERLAUF, keine Unschaerfe. 449 weichge-
   zeichnete Kreise kosten auf schwachen Geraeten spuerbar Leistung; 449
   Verlaeufe kosten fast nichts. Gemessen: 61 Bilder/s waehrend der
   kompletten Vorstellung.
   ══════════════════════════════════════════════════════════════════ */
.insel{display:block;width:100%;height:auto;max-height:100%}
.i-nachbar{fill:#0A141D;stroke:#132433;stroke-width:1;vector-effect:non-scaling-stroke}
.i-land{fill:url(#iLand);stroke:none;opacity:0}
.i-land.loch{fill:#071420}
.i-kueste{
  fill:none;stroke:#5EE6CB;stroke-width:1.2;vector-effect:non-scaling-stroke;
  opacity:.62;stroke-dasharray:1;stroke-dashoffset:1;
}
.i-schein{fill:url(#iSchein);opacity:0}
.i-kern{fill:currentColor;opacity:0}
.i-schmal{display:none}
.i-s-schein{fill:url(#iSchein);color:#FFC98A;opacity:0}
.i-s-kern{fill:#FFE3B0;opacity:0}

/* Ein Klick auf ein Modul laesst nur dessen Lichter brennen. */
.insel.gefiltert .i-kern:not(.an),
.insel.gefiltert .i-schein:not(.an){opacity:.05!important}
.insel.gefiltert .i-kern.an{opacity:1!important}
.insel.gefiltert .i-schein.an{opacity:.45!important}

.mapa-leg{
  position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(18px,3vw,38px);z-index:4;
  display:flex;gap:7px;flex-wrap:wrap;max-width:min(520px,60vw);
}
.mleg{
  display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;
  border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#D8C9DF;font:inherit;font-size:12px;font-weight:640;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.mleg i{width:8px;height:8px;border-radius:50%;display:inline-block}
.mleg b{color:#fff;font-weight:750;font-variant-numeric:tabular-nums}
.mleg:hover{background:rgba(255,255,255,.13);color:#fff}
.mleg[aria-pressed="true"]{border-color:#5EE6CB;background:rgba(94,230,203,.16);color:#fff}

/* Schmale Schirme bekommen die 26 Stadtlichter statt der 449 Punkte —
   auf 390 px waeren die Einzelpunkte ein Schmierfleck, kein Bild. */
@media (max-width:700px){
  .i-breit{display:none}
  .i-schmal{display:block}
  .i-kueste{stroke-width:2}
  .mapa-leg{display:none}
}

@media (prefers-reduced-motion:reduce){
  .i-kueste{stroke-dashoffset:0;animation:none}
  .i-land{opacity:1;animation:none}
  .i-kern,.i-s-kern{opacity:.95;animation:none}
  .i-schein,.i-s-schein{opacity:.38;animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   DER ERSTE BILDSCHIRM AUF DEM HANDY

   Gemeldet am 2026-08-20 mit Bild: „das sieht scheisse aus." Es stimmte.
   Die Ueberschrift lag bei y = 2 px, die Kopfzeile ist 64 px hoch — man
   sah nur den rosa Rest von „de resolver". Ursache ist keine Schriftgroesse,
   sondern die Ausrichtung: die klebende Buehne ZENTRIERT einen Block, der
   auf 390 px hoeher ist als der Schirm, und schiebt ihn dabei oben hinaus.

   Alles hier gilt NUR schmal. Breit bleibt die Startseite, wie sie ist.
   ══════════════════════════════════════════════════════════════════ */
.nur-schmal{display:none}

/* Vier Wege zum Antippen — nur schmal, breit steht die Kachelwand darunter. */
.hero-wege{display:none}
.hweg{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px 9px;border-radius:15px;text-align:center;
  background:var(--paper);border:1px solid var(--hair);
  transition:transform .16s cubic-bezier(.2,.7,.2,1),border-color .16s;
}
.hweg:active{transform:scale(.96)}
.hweg .g{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);
}
.hweg .t{font-size:11px;font-weight:720;letter-spacing:-.01em;color:var(--ink)}
.hweg .n{font-size:10px;font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums}
.hmehr{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:42px;margin-top:2px;border-radius:13px;
  border:1px solid var(--hair);background:var(--paper-2);
  font:inherit;font-size:13px;font-weight:680;color:var(--ink-2);cursor:pointer;
}
.hmehr:active{transform:scale(.98)}
.hmehr svg{transform:rotate(90deg)}

@media (max-width:700px){
  /* 1 · Die Ueberschrift wird sichtbar: oben anfangen statt zentrieren.

     Der Abstand nach oben wurde DOPPELT gezaehlt. Die Buehne klebt bei
     top:0, ihr Innenabstand haelt also die 64 px der Kopfzeile frei —
     richtig, sobald man scrollt. Beim ersten Blick aber steht sie noch im
     Fluss UNTER der Kopfzeile, und aus 64 + 82 wurden 146 px Leere ueber
     der Ueberschrift. Die Buehne beginnt jetzt hinter der Kopfzeile
     (margin-top:-64px), damit derselbe Innenabstand in beiden Zustaenden
     dasselbe bedeutet: die Ueberschrift steht immer 26 px unter der
     Kopfzeile, ob gescrollt oder nicht. */
  .sc1{margin-top:-64px}
  .sc1 .stg{justify-content:flex-start;padding-top:calc(64px + 26px)}

  /* 2 · Ein Satz statt drei Zeilen. */
  .nur-breit{display:none}
  .nur-schmal{display:inline}
  .hero-sub{margin-top:11px;font-size:14.5px;max-width:32ch}

  /* Die Ueberschrift darf den Platz nutzen, den sie jetzt hat. */
  .sign .l1,.sign .l2{font-size:clamp(28px,8.4vw,36px)}

  /* 3 · Die Suche ist die Hauptsache: ein Feld, ein Knopf, eine Zeile. */
  .bigsearch{gap:8px;margin-top:16px;flex-wrap:nowrap}
  .bigsearch .f{flex:1 1 auto;min-height:52px;padding:0 15px;border-radius:15px}
  .bigsearch .btn-p{flex:0 0 auto;width:52px;min-height:52px;padding:0;
    border-radius:15px;font-size:0;position:relative}
  .bigsearch .btn-p::after{content:"→";font-size:20px;font-weight:700;line-height:1}

  /* 4 · Vier Wege statt einer Wand. */
  .hero-wege{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;margin-top:13px}

  /* 5 · Der Fakten-Block spricht zu Betrieben, nicht zu Kunden. */
  .facts{display:none}

  /* 6 · Kein Maus-Symbol auf einem Geraet ohne Maus. */
  .sc1-hint{display:none}

  /* 7 · SZENE 2 KLEBT AUF DEM TELEFON NICHT.

     Die Buehne haelt Ueberschrift, siebzehn Kacheln, Hinweis, das
     Werkzeug-Band mit den Kraftstoffpreisen und die Socios-Tuer:
     gemessen 908 px Inhalt plus 177 px Innenabstand. Auf 390x844 stehen
     844 px zur Verfuegung, mit eingeblendeter Safari-Leiste nur 745.
     `justify-content:center` schneidet den Ueberschuss oben UND unten ab
     — auf dem Geraet des Eigentuemers standen dadurch die Ueberschrift
     und die erste Kachelreihe hinter der 64 px hohen Kopfzeile. Weil die
     Buehne klebt, gab es keinen Weg, sie hervorzuholen: Scrollen trieb
     nur den Flug weiter, das Raster blieb angeschnitten.

     Eine klebende Buehne kann nur zeigen, was auf EINEN Schirm passt.
     Hier passt es nicht — also klebt sie hier nicht. Der Flug bleibt: er
     haengt an der Zeitachse des Abschnitts (`--sc`), nicht am Kleben.
     Die Kacheln kommen weiter aus der Tiefe, nur laeuft die Seite dabei
     normal weiter, und alle siebzehn sind erreichbar.

     Die Bereiche laufen hier ueber `entry` statt `contain`: ohne Kleben
     ist der Abschnitt nur noch wenig hoeher als der Schirm, und
     `contain` schrumpft damit auf wenige Pixel — die ganze Staffelung
     fiele in einen Sprung zusammen. `entry` ist immer min(Hoehe, Schirm)
     lang und bleibt stabil, egal wie hoch der Inhalt gerade ist. */
  .sc2{height:auto}
  .sc2 .stg{position:static;height:auto;min-height:0;padding:10px 0 44px}
  @supports (animation-timeline: view()){
    @media not (prefers-reduced-motion: reduce){
      .sc2-head{animation-range:entry 20% entry 66%}
      .sc2 .cat{animation-range:entry 20% entry calc(72% + var(--r,0) * 1.4%)}
      .sc2-note{animation-range:entry 76% entry 92%}
    }
  }
}

/* Die Vertrauenszeile wird EINE Zeile. Die Regel bei 640 px stellte sie
   untereinander — drei zentrierte Zeilen fuer eine Aussage. */
@media (max-width:640px){
  /* Ein Glied darf NIE in sich umbrechen — „República / Dominicana" ueber
     zwei Zeilen liest sich als Fehler. Umbrechen darf nur die Zeile als
     Ganzes, zwischen den Gliedern; mit dem gekuerzten Text passt sie auf
     390 dp in eine Zeile und auf 320 dp in zwei saubere. */
  .seal{flex-direction:row;align-items:center;flex-wrap:wrap;gap:7px;
    justify-content:flex-start;margin-top:13px;font-size:11.5px}
  .seal>span,.seal>button{white-space:nowrap}
  /* Mit EINER Klasse verliert das gegen `.seal .dot{display:block}` weiter
     unten — gleiche Herkunft, hoehere Spezifitaet gewinnt. Also hier
     ausdruecklich zweistufig. */
  .seal .dot.nur-breit{display:none}
  .seal .dot{display:block}
  .seal>span:first-child{padding:0}
  .seal button{min-height:32px;padding:0 8px;font-size:11.5px}
}

/* ══ KATEGORIE- UND SUCHLISTEN ═══════════════════════════════════
   Diese Bedienelemente standen bis 2026-08-22 in seo.css. Seit die
   Kategorie- und Suchseiten dieselbe Designsprache tragen wie die
   Startseite, laden sie seo.css nicht mehr — die Regeln gehoeren
   hierher, zu den Tokens, mit denen sie gesetzt sind. */
/* Der Sprunglink fuer Tastatur und Screenreader. Er stand bis 2026-08-22
   in seo.css — als die Listen-Seiten auf home.css umzogen, verlor er
   seine Regel und stand SICHTBAR oben links auf jeder Seite. Erst das
   gerenderte Bild zeigte es; kein Test hatte danach gefragt. */
.skip{position:absolute;left:-999px;top:0;z-index:60;
  background:var(--ink);color:var(--paper);padding:10px 16px;
  border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* Luft zwischen Kopfleiste und Ueberschrift. Ohne sie klebt der
   Kategoriename an der Leiste — UI_MASTER: im Zweifel mehr Abstand. */
.lista{padding:var(--s5) 0 var(--s5)}
.lista-steuer{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}
.rs-suche{
  flex:1 1 15rem;min-width:0;border:1px solid var(--line);background:var(--paper);
  border-radius:999px;padding:11px 17px;font:inherit;font-size:14.5px;color:var(--ink);
}
.rs-suche::placeholder{color:var(--ink-3)}
.rs-stadt{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:11px 15px;font:inherit;font-size:14.5px;
  cursor:pointer;max-width:15rem;
}
.rs-chip{
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  border-radius:999px;padding:10px 16px;font:inherit;font-size:14px;
  cursor:pointer;white-space:nowrap;transition:border-color .18s,color .18s,background .18s;
}
.rs-chip:hover{border-color:var(--coral);color:var(--ink)}
.rs-chip[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#fff}
.rs-suche:focus-visible,.rs-chip:focus-visible,.rs-stadt:focus-visible{
  outline:2.5px solid var(--coral);outline-offset:2px
}
.rs-hinweis{
  margin:14px 0 0;padding:11px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper-2);color:var(--ink-2);font-size:14px;
}
/* Ladezustand: ruhige Flaechen, KEINE Dauer-Animation je Kachel —
   ein Raster traegt bis zu 65 davon. */
.rs-skel{height:286px;border-radius:20px;background:var(--paper-3);border:1px solid var(--line)}
.rs-leer{padding:var(--s5) 20px;text-align:center;color:var(--ink-2)}
.rs-leer b{display:block;font-size:20px;color:var(--ink);margin-bottom:6px}
/* ══ ANGEBOTSSEITE (/kategorie/betrieb/) — Fassung 2 ═════════════════
   Volle Seitenbreite (die 760-px-Saeule wirkte am Monitor verloren,
   Owner-Befund 2026-08-22): oben Foto und Info nebeneinander, darunter
   das Sortiment als Karten-Raster wie im Katalog der App. */
.detalle{padding:var(--s4) 0 var(--s6)}
.det-brote{margin:0 0 16px}
.det-brote a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px}
.det-brote a:hover{color:var(--coral)}
.det-oben{display:grid;gap:clamp(18px,3vw,44px);align-items:start}
@media (min-width:980px){.det-oben{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.det-hero{position:relative;border-radius:24px;overflow:hidden;background:var(--paper);
  border:1px solid var(--hair);box-shadow:var(--sh-2,0 18px 48px rgba(0,0,0,.12))}
.det-hero img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* Totes Hero-Bild (Unsplash loescht Fotos): getoente Flaeche statt Kaputt-Symbol. */
.det-hero.hero-leer{aspect-ratio:16/10;background:linear-gradient(135deg,var(--hair),var(--paper))}
.det-hero .rate{position:absolute;top:14px;left:14px}
.det-hero .demo{position:absolute;right:14px;bottom:14px}
.det-info h1{margin:2px 0 0;font-size:clamp(28px,3.4vw,42px);line-height:1.06;
  letter-spacing:-.022em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.det-check{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:999px;background:var(--coral);color:#fff;flex:0 0 auto}
.det-sub{margin:8px 0 0;color:var(--ink-2);font-size:17px}
.det-metas{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;color:var(--ink-2);font-size:14.5px}
.det-meta{display:inline-flex;align-items:flex-start;gap:7px;min-width:0}
.det-meta svg{flex:0 0 auto;margin-top:3px}
.det-desc{margin:16px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:58ch}
.det-wege{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.det-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 30px;border-radius:999px;background:var(--coral);color:#fff;font-weight:700;
  font-size:16.5px;text-decoration:none;box-shadow:0 10px 26px rgba(232,67,107,.35);
  transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.det-cta:hover{transform:translateY(-2px)}
.det-cta:active{transform:scale(.98)}
.det-neben{display:inline-flex;align-items:center;gap:8px;min-height:54px;padding:0 22px;
  border-radius:999px;background:var(--paper);border:1px solid var(--hair);color:var(--ink);
  font-weight:600;font-size:15px;text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s}
.det-neben:hover{transform:translateY(-2px);border-color:var(--coral)}
/* WhatsApp ist die EINZIGE fremde Marke mit eigener Farbe — sie ist ihr
   Wiedererkennungszeichen, keine zweite Aktionsfarbe dieses Systems. */
.det-wa{color:#128C4B}
[data-theme="dark"] .det-wa{color:#4AD37D}
.det-h2{margin:44px 2px 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2));font-weight:700}
/* Das Sortiment: Karten wie im Katalog, nicht Zeilen. Am Monitor fuenf
   nebeneinander, auf dem Telefon zwei — dieselbe Logik wie das
   Kartenraster der Kategorie-Seiten. */
.det-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;margin-top:16px}
.det-prod{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);
  border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.det-prod:hover{transform:translateY(-3px);box-shadow:var(--sh-2,0 18px 48px rgba(0,0,0,.12))}
.det-prod .pimg{display:block;aspect-ratio:4/3;background:
  linear-gradient(135deg,var(--hair),var(--paper))}
.det-prod .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pbody{display:flex;flex-direction:column;gap:5px;flex:1;padding:12px 14px 14px}
.pbody > b{font-size:15.5px;line-height:1.25;letter-spacing:-.01em}
.pbody > span:not(.pfuss){color:var(--ink-2);font-size:13px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pfuss{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px;padding-top:8px}
.pprecio{font-weight:800;font-size:16.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.det-badge{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--coral);background:
  color-mix(in srgb,var(--coral) 12%,transparent);padding:3px 8px;border-radius:999px}
@media (max-width:700px){
  .detalle{padding-top:var(--s3)}
  .det-hero{border-radius:20px}
  .det-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
  .pbody{padding:10px 12px 12px}
}
/* ── Der Warenkorb auf der Seite ─────────────────────────────────────
   Karte antippen = ein Stueck mehr. Der Zaehler mit − / + sitzt in der
   Fusszeile der Karte, die Leiste unten sammelt Stueckzahl und Summe.
   Die Summe ist ANZEIGE — der Server rechnet autoritativ nach. */
.padd{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;background:var(--korall-fl,rgba(232,67,107,.12));
  background:color-mix(in srgb,var(--coral) 12%,transparent);color:var(--coral);
  font-size:19px;font-weight:700;line-height:1}
.det-prod.im-korb{border-color:var(--coral)}
.det-prod.im-korb .padd{display:none}
.det-menge{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;
  background:color-mix(in srgb,var(--coral) 10%,transparent);border-radius:999px;padding:2px}
.det-menge button{width:30px;height:30px;border:0;border-radius:999px;background:transparent;
  color:var(--coral);font-size:17px;font-weight:700;cursor:pointer;line-height:1}
.det-menge button:hover{background:color-mix(in srgb,var(--coral) 16%,transparent)}
.det-menge b{min-width:22px;text-align:center;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.det-bar{position:fixed;left:50%;transform:translateX(-50%);z-index:70;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.det-bar-btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;
  padding:0 26px;border:0;border-radius:999px;background:var(--coral);color:#fff;
  font-weight:700;font-size:16.5px;cursor:pointer;font-family:inherit;
  box-shadow:0 14px 34px rgba(232,67,107,.45);
  transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.det-bar-btn:hover{transform:translateY(-2px)}
.det-bar-btn:active{transform:scale(.98)}
.det-bar-btn .n{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:#fff;
  color:var(--coral);font-size:14px;font-variant-numeric:tabular-nums}
.det-bar-btn .s{font-variant-numeric:tabular-nums;opacity:.92}
/* ── Der Bestell-Fluss: ein Blatt, vier Schritte ─────────────────────
   Korb → Konto → Entrega → fertig. Rechts am Monitor, von unten auf dem
   Telefon — Radien, Farben, Dauern aus dem System. */
#rs-flujo{position:fixed;inset:0;z-index:90}
#rs-flujo[hidden]{display:none}
.fl-back{position:absolute;inset:0;background:rgba(20,10,22,.42);backdrop-filter:blur(2px)}
.fl-panel{position:absolute;top:0;right:0;bottom:0;width:min(94vw,440px);
  background:var(--paper);border-left:1px solid var(--hair);
  box-shadow:var(--sh-2,0 18px 48px rgba(0,0,0,.25));
  display:flex;flex-direction:column;
  animation:fl-ein .3s cubic-bezier(.2,.7,.2,1)}
@keyframes fl-ein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:700px){
  .fl-panel{top:auto;left:0;width:auto;max-height:92dvh;border-left:0;
    border-top:1px solid var(--hair);border-radius:24px 24px 0 0;
    animation-name:fl-hoch}
  @keyframes fl-hoch{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion: reduce){.fl-panel{animation:none}}
html.fl-offen{overflow:hidden}
/* Solange das Blatt offen ist, schlaeft die Pedir-Leiste — zwei
   konkurrierende Coral-Knoepfe uebereinander sind einer zu viel. */
html.fl-offen .det-bar{opacity:0;pointer-events:none;transition:opacity .2s ease}
.fl-kopf{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--hair)}
.fl-kopf b{text-align:center;font-size:15.5px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-zurueck,.fl-zu{width:40px;height:40px;border:0;border-radius:999px;
  background:transparent;color:var(--ink-2);font-size:20px;cursor:pointer;line-height:1}
.fl-zurueck:hover,.fl-zu:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.fl-inhalt{flex:1;overflow-y:auto;padding:16px 18px}
.fl-fuss{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--hair)}
.fl-zeile{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--hair)}
.fl-zeile:last-child{border-bottom:0}
.fl-zeile img,.fl-noimg{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.fl-noimg{background:linear-gradient(135deg,var(--hair),var(--paper))}
.fl-zt{flex:1;min-width:0}
.fl-zt b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-zt span{font-size:12.5px;color:var(--ink-2)}
.fl-zsumme{flex:0 0 auto;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:74px;text-align:right}
.fl-reihe{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;
  padding:4px 0;color:var(--ink-2)}
.fl-reihe b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fl-total{font-size:16px;padding-top:8px;margin-top:4px;border-top:1px solid var(--hair)}
.fl-total span{color:var(--ink);font-weight:700}
.fl-total b{font-size:18px}
.fl-summe{margin-top:16px;padding:12px 14px;border:1px solid var(--hair);border-radius:14px}
.fl-cta{display:block;width:100%;min-height:52px;border:0;border-radius:999px;
  background:var(--coral);color:#fff;font-weight:700;font-size:16px;cursor:pointer;
  font-family:inherit;box-shadow:0 10px 26px rgba(232,67,107,.3);
  transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.fl-cta:hover{transform:translateY(-1px)}
.fl-cta:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.fl-neben{display:block;width:100%;min-height:44px;margin-top:10px;border-radius:999px;
  background:transparent;border:1px solid var(--hair);color:var(--ink);font-weight:600;
  font-size:14px;cursor:pointer;font-family:inherit}
.fl-hinweis{margin:10px 0 0;font-size:12.5px;color:var(--ink-3,var(--ink-2));line-height:1.5}
.fl-hinweis a{color:var(--coral)}
.fl-fehler{margin:0 0 12px;padding:10px 13px;border-radius:12px;font-size:13.5px;
  background:color-mix(in srgb,var(--coral) 10%,transparent);color:var(--coral);font-weight:600}
.fl-tabs{display:flex;gap:6px;margin:0 0 14px;padding:4px;border:1px solid var(--hair);
  border-radius:999px}
.fl-tabs button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;
  color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.fl-tabs button.an{background:var(--coral);color:#fff}
.fl-modo{margin-top:2px}
.fl-google{display:flex;justify-content:center;min-height:44px;margin:4px 0 2px}
.fl-oder{margin:12px 0;font-size:12px;color:var(--ink-3,var(--ink-2));text-align:center;
  text-transform:uppercase;letter-spacing:.12em}
.fl-form label,.fl-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin:0 0 12px}
.fl-form input,.fl-dir{display:block;width:100%;min-height:48px;margin-top:5px;
  border:1px solid var(--hair);border-radius:12px;background:var(--paper);color:var(--ink);
  font:inherit;font-size:15px;padding:0 13px}
.fl-form input:focus,.fl-dir:focus{outline:2px solid var(--coral);border-color:var(--coral)}
.fl-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fl-wer{margin:0 0 12px;font-size:13.5px;color:var(--ink-2)}
.fl-link{border:0;background:none;padding:0;color:var(--coral);font:inherit;font-size:13.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fl-listo{text-align:center;padding-top:28px}
.fl-hak{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:999px;background:var(--gut-fl,#E7F5EF);color:var(--gut,#1F7A5A);margin-bottom:8px}
.fl-listo h3{margin:6px 0 8px;font-size:19px;letter-spacing:-.01em}
.fl-listo p{margin:0 0 8px;font-size:14.5px;color:var(--ink-2)}
.fl-listo .fl-cta{margin-top:18px}

/* ── Kassen-Feinschliff: vier klare Bloecke, ein Empfangsschein ──── */
.fl-lokal{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:14px;color:var(--ink-2)}
.fl-lokal b{color:var(--ink)}
.fl-liste{display:grid}
.fl-zeile{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--hair)}
.fl-zeile:last-child{border-bottom:0}
.fl-zeile img,.fl-noimg{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:0 0 auto}
.fl-zt i{display:block;font-style:normal;color:var(--ink-3,var(--ink-2));font-size:12px;
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-zt span{display:block;margin-top:2px}
.fl-zrechts{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fl-zrechts .fl-zsumme{min-width:0}
.fl-block{margin:0 0 14px;padding:14px 15px;border:1px solid var(--hair);
  border-radius:16px;background:color-mix(in srgb,var(--ink) 2.5%,var(--paper))}
.fl-bt{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;
  font-weight:700;letter-spacing:.02em;color:var(--ink)}
.fl-bt svg{color:var(--coral)}
.fl-bt .fl-link{margin-left:auto;font-weight:600}
.fl-abhol{display:flex;gap:10px;margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.fl-abhol svg{flex:0 0 auto;margin-top:2px;color:var(--coral)}
.fl-abhol b{color:var(--ink)}
/* Zahlungsart: eine Karte mit Auswahlpunkt — heute genau eine, ehrlich
   als gewaehlt gezeigt statt als Auswahl vorgetaeuscht. */
.fl-pago{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1.5px solid var(--hair);border-radius:14px;background:var(--paper)}
.fl-pago.an{border-color:var(--coral)}
.fl-pago>svg{margin-left:auto;color:var(--ink-3,var(--ink-2))}
.fl-pr{width:18px;height:18px;border-radius:999px;border:2px solid var(--hair);flex:0 0 auto;position:relative}
.fl-pago.an .fl-pr{border-color:var(--coral)}
.fl-pago.an .fl-pr::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--coral)}
.fl-pt b{display:block;font-size:14.5px}
.fl-pt i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.fl-mini{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:14px}
.fl-mn{flex:0 0 auto;font-weight:700;color:var(--coral);font-variant-numeric:tabular-nums}
.fl-mt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.fl-mp{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--ink-2)}
/* Der Empfangsschein: eigene Karte, Total deutlich abgesetzt. */
.fl-recibo{margin:2px 0 12px;padding:12px 15px;border:1px solid var(--hair);
  border-radius:16px;background:var(--paper)}
.fl-recibo .fl-total{border-top:1px dashed var(--rand2,var(--hair));border-color:var(--hair)}
.fl-desde{font-style:normal;font-size:11px;color:var(--ink-3,var(--ink-2));
  text-transform:uppercase;letter-spacing:.08em}
.fl-nr{margin:2px 0 14px;font-size:14px;color:var(--ink-2)}
.fl-nr b{font-size:17px;color:var(--ink);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.fl-links{text-align:left}
.fl-gps svg{vertical-align:-2px;margin-right:6px}
/* ── Das Konto-Blatt (web/cuenta.js) ─────────────────────────────────
   Teilt sich Rahmen und Formsprache mit dem Kassen-Blatt (fl-*).
   Liegt UEBER der Kasse (z 95 > 90): verlangt die Kasse eine Anmeldung,
   erscheint das Konto darueber und gibt danach den Blick wieder frei. */
#rs-cuenta{position:fixed;inset:0;z-index:95}
#rs-cuenta[hidden]{display:none}
#rs-cuenta .fl-back{position:absolute;inset:0;background:rgba(20,10,22,.42);backdrop-filter:blur(2px)}
.kt-oauth{display:flex;justify-content:center;min-height:44px;margin:2px 0}
.kt-apple{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
  min-height:46px;margin:10px 0 0;border:0;border-radius:999px;background:#000;color:#fff;
  font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit}
[data-theme="dark"] .kt-apple{background:#fff;color:#000}
.kt-kopfkarte{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--hair);
  border-radius:18px;background:color-mix(in srgb,var(--ink) 2.5%,var(--paper));margin:0 0 14px}
.kt-kopfkarte>span:last-child{min-width:0}
.kt-kopfkarte b{display:block;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-kopfkarte b+span,.kt-kopfkarte span span{display:block;color:var(--ink-2);font-size:13px;
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-avatar{width:52px;height:52px;border-radius:999px;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;
  flex:0 0 auto;overflow:hidden}
.kt-avatar img{width:100%;height:100%;object-fit:cover}
.kt-avatar.kt-gross{width:76px;height:76px;font-size:30px}
.kt-eintrag{display:flex;align-items:center;gap:12px;width:100%;padding:14px 15px;margin:0 0 10px;
  border:1px solid var(--hair);border-radius:16px;background:var(--paper);font:inherit;
  text-align:left;color:var(--ink);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s}
.kt-eintrag:hover{transform:translateY(-1px);border-color:var(--coral)}
.kt-eintrag svg{color:var(--coral);flex:0 0 auto}
.kt-eintrag b{font-size:14.5px}
.kt-eintrag i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.kt-pfeil{margin-left:auto;color:var(--ink-3,var(--ink-2));font-size:18px}
.kt-raus{display:block;width:100%;min-height:44px;margin-top:4px;border:1px solid var(--hair);
  border-radius:999px;background:transparent;color:var(--ink-2);font-weight:600;font-size:14px;
  font-family:inherit;cursor:pointer}
.kt-ped{display:flex;gap:12px;align-items:center;width:100%;padding:13px 14px;margin:0 0 10px;
  border:1px solid var(--hair);border-radius:16px;background:var(--paper);font:inherit;
  text-align:left;color:var(--ink);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s}
.kt-ped:hover{transform:translateY(-1px);border-color:var(--coral)}
.kt-pic{width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hair),var(--paper));display:flex;align-items:center;
  justify-content:center;color:var(--coral)}
.kt-pt{flex:1;min-width:0}
.kt-pt b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-pt span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.kt-pr{flex:0 0 auto;text-align:right}
.kt-pr b{display:block;font-variant-numeric:tabular-nums;font-size:14px}
.kt-chip{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}
.kt-ok{background:color-mix(in srgb,#1F7A5A 14%,transparent);color:#1F7A5A}
[data-theme="dark"] .kt-ok{color:#6ED2A8}
.kt-mid{background:color-mix(in srgb,#9A5B10 14%,transparent);color:#9A5B10}
[data-theme="dark"] .kt-mid{color:#E8B071}
.kt-coral{background:color-mix(in srgb,var(--coral) 13%,transparent);color:var(--coral)}
.kt-code{margin:0 0 14px;padding:14px 16px;border-radius:16px;text-align:center;
  background:color-mix(in srgb,var(--coral) 9%,transparent);border:1px dashed var(--coral)}
.kt-code i{display:block;font-style:normal;font-size:12px;color:var(--ink-2);margin-bottom:4px}
.kt-code b{font-size:30px;letter-spacing:.3em;padding-left:.3em;color:var(--coral);
  font-variant-numeric:tabular-nums}
.kt-dkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.kt-dkopf b{font-size:17px}
.kt-tl{list-style:none;margin:0 0 14px;padding:12px 14px;border:1px solid var(--hair);
  border-radius:16px}
.kt-tl li{position:relative;padding:0 0 14px 24px;font-size:13.5px;color:var(--ink-3,var(--ink-2))}
.kt-tl li:last-child{padding-bottom:0}
.kt-tl li::before{content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;
  border-radius:999px;background:var(--hair)}
.kt-tl li::after{content:"";position:absolute;left:8.5px;top:15px;bottom:-3px;width:1.5px;
  background:var(--hair)}
.kt-tl li:last-child::after{display:none}
.kt-tl li.kt-da{color:var(--ink)}
.kt-tl li.kt-da::before{background:#1F7A5A}
[data-theme="dark"] .kt-tl li.kt-da::before{background:#6ED2A8}
.kt-tl li.kt-jetzt{color:var(--ink);font-weight:600}
.kt-tl li.kt-jetzt::before{background:var(--coral);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 18%,transparent)}
.kt-tl time{float:right;font-size:12px;color:var(--ink-3,var(--ink-2));
  font-variant-numeric:tabular-nums}
.kt-dblock{margin:0 0 12px;padding:12px 14px;border:1px solid var(--hair);border-radius:16px}
.kt-dbt{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3,var(--ink-2))}
.kt-ditem{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:14px}
.kt-ditem .n{flex:0 0 auto;font-weight:700;color:var(--coral);font-variant-numeric:tabular-nums}
.kt-ditem .t{flex:1;min-width:0;color:var(--ink)}
.kt-ditem .p{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.kt-drow{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px;
  color:var(--ink-2)}
.kt-drow b{color:var(--ink);font-variant-numeric:tabular-nums}
.kt-drow.kt-tot{border-top:1px dashed var(--hair);margin-top:6px;padding-top:8px;font-size:15px}
.kt-drow.kt-tot span{color:var(--ink);font-weight:700}
.kt-fotoreihe{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.kt-sperr{font-size:11px;color:var(--ink-3,var(--ink-2));font-weight:400;margin-left:6px}
.kt-ok.kt-toast,.kt-okmeld{display:block}
p.kt-ok{margin:0 0 12px;padding:10px 13px;border-radius:12px;font-size:13.5px;
  background:color-mix(in srgb,#1F7A5A 12%,transparent);color:#1F7A5A;font-weight:600}
[data-theme="dark"] p.kt-ok{color:#6ED2A8}
.kt-lade{display:grid;gap:10px}
.kt-lade .rs-skel{height:72px;border-radius:16px}

/* ── Sprachwahl ──────────────────────────────────────────────────── */
.lgb{display:inline-flex;align-items:center;justify-content:center;min-width:40px;
  height:40px;padding:0 10px;border:1px solid var(--hair);border-radius:999px;
  background:var(--paper);color:var(--ink);cursor:pointer;font-family:inherit}
.lgb b{font-size:12px;font-weight:800;letter-spacing:.08em}
.lgb:hover{border-color:var(--coral)}
#rs-idioma{position:fixed;inset:0;z-index:96}
#rs-idioma .lg-back{position:absolute;inset:0;background:rgba(20,10,22,.42)}
#rs-idioma .lg-karte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,300px);background:var(--paper);border:1px solid var(--hair);
  border-radius:20px;box-shadow:var(--sh-2,0 18px 48px rgba(0,0,0,.25));padding:8px}
#rs-idioma button{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:48px;padding:0 16px;border:0;border-radius:14px;background:transparent;
  color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left}
#rs-idioma button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
#rs-idioma button.an{color:var(--coral)}
/* ── Adresswahl in der Kasse (Owner-Go 2026-08-23) ─────────────────── */
.fl-wer2{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.fl-ava{width:34px;height:34px;border-radius:999px;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex:0 0 auto}
.fl-wt{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fl-wt b{display:block;color:var(--ink);font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fl-wer2 .fl-salir{min-height:34px;padding:0 14px;border:1px solid var(--hair);
  border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer}
.adr{display:flex;align-items:flex-start;gap:11px;width:100%;padding:12px 13px;margin:0 0 8px;
  border:1.5px solid var(--hair);border-radius:14px;background:var(--paper);font:inherit;
  text-align:left;color:var(--ink);cursor:pointer;
  transition:border-color .2s,transform .2s cubic-bezier(.2,.7,.2,1)}
.adr:hover{transform:translateY(-1px)}
.adr.an{border-color:var(--coral)}
.adr .ai{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:var(--coral);
  background:color-mix(in srgb,var(--coral) 10%,transparent)}
.adr .at{flex:1;min-width:0}
.adr .at b{display:block;font-size:14px}
.adr .at span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:1px}
.adr-tag{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#1F7A5A;
  background:color-mix(in srgb,#1F7A5A 14%,transparent);padding:2px 7px;border-radius:999px}
[data-theme="dark"] .adr-tag{color:#6ED2A8}
.adr .haken{flex:0 0 auto;width:20px;height:20px;border-radius:999px;
  border:2px solid var(--hair);margin-top:2px;position:relative}
.adr.an .haken{border-color:var(--coral);background:var(--coral)}
.adr.an .haken::after{content:"";position:absolute;inset:0;
  background:no-repeat center/12px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>')}
.neu-form{margin:2px 0 6px;display:none}
.neu-form.an{display:block}
.neu-form input{display:block;width:100%;min-height:46px;margin:0 0 8px;
  border:1px solid var(--hair);border-radius:12px;background:var(--paper);color:var(--ink);
  font:inherit;font-size:14.5px;padding:0 13px}
.neu-form input:focus{outline:2px solid var(--coral);border-color:var(--coral)}
/* ── „En Resuelve ahora" auf den Kategorie-Seiten (2026-08-23) ──
   Die statischen Links auf die Betriebe, die im Google-Index stehen. Die
   Liste darueber baut JavaScript; dieser Block ist der einzige Weg, auf
   dem ein Crawler von der Kategorie zum Angebot kommt. Deshalb sichtbar
   und schlicht — er ist Bedienung UND Crawler-Pfad, kein Schmuck. */
.lista-verif{margin:18px 0 4px;padding:14px 16px;border:1px solid var(--hair);
  border-radius:16px;background:var(--paper)}
.lista-verif h2{margin:0 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.lista-verif ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lista-verif a{display:inline-block;padding:7px 14px;border:1px solid var(--hair);
  border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:none;transition:border-color .15s,transform .15s}
.lista-verif a:hover{border-color:var(--coral);transform:translateY(-1px)}

/* ── Buchung/Spende/Kontakt auf der Angebotsseite (2026-08-23) ──
   Die Auswahlkarten sind dieselben .adr-Karten wie die Adresswahl —
   hier nur, was dort fehlt: Karten als Link, Bild statt Icon,
   Preiszeile, Zeit-Chips und der Datums-Eingang. */
a.adr{text-decoration:none;color:inherit;cursor:pointer}
.adr .ai img{width:34px;height:34px;border-radius:10px;object-fit:cover;display:block}
.adr-precio{display:block;margin-top:3px;font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.adr-precio i{font-style:normal;font-weight:500;font-size:11.5px;color:var(--ink-2)}
.fl-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:6px}
.fl-chips button{min-height:42px;border:1px solid var(--hair);border-radius:999px;
  background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums}
.fl-chips button:hover{border-color:var(--coral)}
.fl-chips button.an{background:var(--coral);border-color:var(--coral);color:#fff}
.fl-fecha{color-scheme:light dark}
[data-theme="dark"] .fl-fecha{color-scheme:dark}
.fl-cta-a{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* ── Die Vollbild-Buehne der Buchung (Owner-Go 2026-08-23) ──────────
   Banda mit der Identitaet des Betriebs, nummerierte Schritte,
   Tages-Streifen, grosse Auswahlkarten, Ticket. Am Telefon bleibt das
   Blatt das gewohnte Bottom-Sheet; ab 940 px fuellt es die Seite:
   Kopf und Banda ueber die volle Breite, Inhalt links, Ticket rechts
   (klebend). */
.fl-banda{background:linear-gradient(115deg,
  color-mix(in srgb,var(--coral) 14%,var(--paper)),
  color-mix(in srgb,var(--coral) 7%,var(--paper)) 55%,
  color-mix(in srgb,var(--coral) 16%,var(--paper)))}
.fb-in{display:flex;gap:12px;align-items:center;padding:14px 18px}
.fb-foto{width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#E8916F,#C0567E);box-shadow:0 8px 22px rgba(28,18,38,.18)}
.fb-tx{min-width:0}
.fb-tx>b{display:block;font-size:16.5px;letter-spacing:-.015em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--ink-2)}
.fb-meta i{font-style:normal}
.fb-est{color:var(--ink);font-weight:700}
.fb-est s{color:#E8A13C;text-decoration:none;margin-right:2px}
.fb-demo{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 82%,transparent);color:var(--paper)}

.fl-pn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:21px;height:21px;border-radius:999px;background:var(--coral);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:0}
.fl-opc{text-transform:none;letter-spacing:0;font-weight:600}

.fl-servs{display:grid;gap:10px}
.fl-sv{display:flex;align-items:stretch;text-align:left;width:100%;padding:0;
  border:1.5px solid var(--hair);border-radius:16px;background:var(--paper);color:var(--ink);
  font:inherit;cursor:pointer;overflow:hidden;transition:transform .16s,border-color .16s}
.fl-sv:hover{transform:translateY(-1px)}
.fl-sv.an{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.sv-foto{width:76px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:linear-gradient(135deg,var(--hair),transparent)}
.sv-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sv-tx{flex:1;min-width:0;padding:11px 12px}
.sv-tx b{display:block;font-size:14.5px;letter-spacing:-.01em}
.sv-tx>span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.sv-precio{display:inline-block;margin-top:7px;font-weight:800;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--ink);
  background:color-mix(in srgb,var(--coral) 12%,transparent);
  border-radius:99px;padding:2px 9px}
.sv-precio i{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-2)}
.fl-sv .haken{align-self:flex-start;margin:11px 11px 0 0;flex:0 0 auto;width:21px;height:21px;
  border-radius:999px;border:2px solid var(--hair);position:relative}
.fl-sv.an .haken{border-color:var(--coral);background:var(--coral)}
.fl-sv.an .haken::after{content:"";position:absolute;inset:4px;border-radius:999px;background:#fff}

.fl-dias{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.fl-dia{flex:0 0 auto;min-width:64px;padding:8px 6px 7px;border:1.5px solid var(--hair);
  border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;
  text-align:center;transition:border-color .15s}
.fl-dia:hover{border-color:var(--coral)}
.fl-dia.an{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.fl-dia i{display:block;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fl-dia b{display:block;font-size:17px;margin-top:1px;font-variant-numeric:tabular-nums}
.fl-dia-otro{min-width:104px}
.fl-dia-otro input{border:0;background:none;color:inherit;font:inherit;font-size:12px;
  width:100%;text-align:center;margin-top:2px;color-scheme:light dark}

.fl-zrow{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 2px}
.fl-zl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.fl-zae{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--hair);
  border-radius:999px;padding:3px}
.fl-zae button{width:36px;height:36px;border:0;border-radius:999px;background:transparent;
  font-size:18px;cursor:pointer;color:var(--coral);font-family:inherit}
.fl-zae button:hover{background:color-mix(in srgb,var(--coral) 14%,transparent)}
.fl-zae b{min-width:34px;text-align:center;font-size:14.5px;font-variant-numeric:tabular-nums;
  padding:0 4px;white-space:nowrap}
.fl-zae-s button{width:30px;height:30px;font-size:16px}
.fl-zae-s b{min-width:22px;font-size:13.5px}

.fl-modos{display:grid;gap:10px}
.fl-mo{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  padding:13px 14px;border:1.5px solid var(--hair);border-radius:16px;background:var(--paper);
  color:var(--ink);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.fl-mo:hover{transform:translateY(-1px)}
.fl-mo.an{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.fl-mo>svg{flex:0 0 auto;margin-top:2px;color:var(--coral)}
.mo-tx{flex:1;min-width:0}
.mo-tx b{display:block;font-size:14px}
.mo-tx>span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.mo-precio{display:inline-block;margin-top:6px;font-weight:800;font-size:12px;
  color:var(--ink);background:color-mix(in srgb,var(--coral) 12%,transparent);
  border-radius:99px;padding:2px 9px;font-variant-numeric:tabular-nums}
.fl-mo .haken{margin-left:auto;flex:0 0 auto;width:21px;height:21px;border-radius:999px;
  border:2px solid var(--hair);position:relative}
.fl-mo.an .haken{border-color:var(--coral);background:var(--coral)}
.fl-mo.an .haken::after{content:"";position:absolute;inset:4px;border-radius:999px;background:#fff}

.fl-exliste{display:grid}
.fl-ex{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--hair)}
.fl-ex:last-child{border-bottom:0}
.fl-ex-solo{border:1.5px solid var(--hair);border-radius:16px;padding:12px 14px;margin-top:8px}
.fl-ext{flex:1;min-width:0}
.fl-ext b{display:block;font-size:13.5px}
.fl-ext span{display:block;font-size:12px;color:var(--ink-2);margin-top:1px;line-height:1.45}
.fl-exp{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fl-sw{flex:0 0 auto;width:44px;height:26px;border-radius:99px;border:0;cursor:pointer;
  background:var(--hair);position:relative;transition:background .15s;padding:0}
.fl-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:99px;background:#fff;transition:left .15s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fl-sw.an{background:var(--coral)}
.fl-sw.an::after{left:21px}

.fl-dev{color:var(--ok,#0E8F5B)}
.fl-dev span,.fl-dev b{color:var(--ok,#0E8F5B) !important}
[data-theme="dark"] .fl-dev span,[data-theme="dark"] .fl-dev b{color:#6ED2A8 !important}
.fl-viaje span,.fl-viaje b{color:var(--coral) !important}

.fl-nb{margin:18px 0 4px;border:1.5px solid var(--coral);border-radius:18px;
  background:var(--paper);padding:15px 16px;text-align:left}
.fl-nbk{display:flex;gap:11px;align-items:flex-start}
.fl-nbk>svg{flex:0 0 auto;color:var(--coral);margin-top:2px}
.fl-nbk b{display:block;font-size:15px}
.fl-nbk p{margin:3px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.fl-nb .fl-cta{min-height:46px;font-size:14.5px;margin-top:12px}
.fl-nbno{display:block;width:100%;margin-top:6px;border:0;background:none;
  color:var(--ink-2);font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer;padding:8px}

/* Vollbild ab 940 px: Kopf + Banda volle Breite, Inhalt links,
   Ticket (.fl-fuss) rechts als klebende Karte. */
@media (min-width:940px){
  #rs-flujo .fl-panel{
    --flpad:max(26px,calc((100vw - 1200px)/2));
    width:100%;left:0;border-left:0;
    display:grid;overflow-y:auto;
    grid-template-columns:minmax(0,1.55fr) minmax(330px,.95fr);
    grid-template-rows:auto auto 1fr;
    grid-template-areas:"kopf kopf" "banda banda" "inhalt fuss";
    column-gap:28px;align-content:start;
    padding:0 var(--flpad) 44px;
    animation:none}
  #rs-flujo .fl-kopf{grid-area:kopf;position:sticky;top:0;z-index:6;
    margin:0 calc(-1*var(--flpad));padding:14px var(--flpad);
    background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px)}
  #rs-flujo .fl-kopf b{font-size:18px}
  #rs-flujo .fl-banda{grid-area:banda;margin:0 calc(-1*var(--flpad))}
  #rs-flujo .fl-banda .fb-in{max-width:1200px;margin:0 auto;padding:20px var(--flpad)}
  #rs-flujo .fb-foto{width:54px;height:54px}
  #rs-flujo .fb-tx>b{font-size:22px;white-space:normal}
  #rs-flujo .fb-meta{font-size:13px}
  #rs-flujo .fl-inhalt{grid-area:inhalt;overflow:visible;padding:24px 0 0}
  #rs-flujo .fl-fuss{grid-area:fuss;align-self:start;position:sticky;top:78px;
    margin-top:24px;border:1px solid var(--hair);border-radius:20px;
    padding:16px 18px 18px;background:var(--paper);
    box-shadow:0 16px 44px rgba(28,18,38,.12)}
  #rs-flujo .fl-fuss-leer{display:none}
  #rs-flujo .fl-panel:has(.fl-fuss-leer){grid-template-columns:1fr}
  #rs-flujo .fl-panel:has(.fl-fuss-leer) .fl-inhalt{max-width:660px;margin:0 auto;width:100%}
  #rs-flujo .fl-servs{grid-template-columns:1fr 1fr;gap:12px}
  #rs-flujo .fl-modos{grid-template-columns:1fr 1fr;gap:12px}
  #rs-flujo .adrs-2,#rs-flujo .fl-inhalt .adr{max-width:none}
  #rs-flujo .fl-dia{min-width:72px}
  #rs-flujo .fl-listo{text-align:center;padding-top:36px}
}
.merken{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
  cursor:pointer;padding:2px 2px 4px}
.merken input{width:17px;height:17px;accent-color:var(--coral)}
.fl-exakt{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#1F7A5A;background:color-mix(in srgb,#1F7A5A 14%,transparent);
  padding:2px 7px;border-radius:999px;margin-left:4px}
[data-theme="dark"] .fl-exakt{color:#6ED2A8}
/* ── /mapa/: die Karte im Seiten-Design ─────────────────────────────── */
.mp-voll{position:relative;z-index:1;display:flex;flex-direction:column;
  height:calc(100dvh - 64px)}
#rs-mapa{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
.mp-werk{display:flex;gap:10px;align-items:center;padding:10px var(--gut);
  flex-wrap:wrap}
.mp-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;
  padding:2px}
.mp-chips::-webkit-scrollbar{display:none}
.mp-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:38px;
  padding:0 13px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);
  color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  white-space:nowrap}
.mp-chip i{font-style:normal;color:var(--ink-3,var(--ink-2));font-size:11.5px;
  font-variant-numeric:tabular-nums}
.mp-chip.an{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,var(--paper))}
.mp-punkt{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.mp-rechts{display:flex;gap:8px;align-items:center;flex:0 0 auto;margin-left:auto}
.mp-vista{display:flex;gap:4px;padding:4px;border:1px solid var(--hair);border-radius:999px;
  background:var(--paper)}
.mp-vista button{min-height:32px;padding:0 13px;border:0;border-radius:999px;
  background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer}
.mp-vista button.an{background:var(--coral);color:#fff}
.mp-gps{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:0;
  border-radius:999px;background:var(--coral);color:#fff;font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(232,67,107,.3)}
.mp-gps:disabled{opacity:.6}
.mp-karte{flex:1;min-height:0;border-top:1px solid var(--hair)}
.mp-lade{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);margin:0;
  padding:10px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--hair);
  color:var(--ink-2);font-size:13.5px;z-index:400;pointer-events:none}
/* Die Strassenkarte im Dunkelmodus: helle Voyager-Kacheln, invertiert
   und in die Pflaume gedreht (Variante F, am 2026-08-23 an sechs
   Screenshots abgestimmt). NUR die fondo-Flaeche - der Satellit sind
   echte Fotos, die faerbt man nicht. */
/* Seit dem CARTO-Ausfall (2026-08-28) kommen die hellen Kacheln von Esri.
   Sie sind von Haus aus kraeftiger als die frueheren: gruene Landflaeche,
   sattes Meerblau. Ein Hauch Entsaettigung holt sie in die ruhige Farbwelt
   der Seite zurueck, ohne die Karte flach zu machen - die Marker sollen die
   einzigen kraeftigen Punkte im Bild sein. */
.leaflet-fondo-pane{filter:saturate(.6) brightness(1.06)}
/* Der Dunkelmodus MUSSTE mit den Esri-Kacheln neu abgestimmt werden. Der
   alte Filter war auf die frueheren Kacheln gerechnet; auf den neuen kippte
   er das Bild um: das MEER leuchtete magenta, das Land wurde dunkelgruen -
   heller Ozean auf dunklem Land, genau verkehrt herum. Am Bild neu
   abgestimmt (drei Fassungen verglichen, 2026-08-28):
     1. invert + hue-rotate(180) dreht hell/dunkel um und holt die
        Original-Farbtoene zurueck (ohne den zweiten Schritt wird Wasser
        orange - das war der Fehler des alten Filters);
     2. grayscale neutralisiert, was danach noch bunt ist;
     3. sepia + hue-rotate faerbt das Ergebnis in die Pflaume der Leinwand
        (Owner-Entscheid 2026-08-23).
   Ergebnis: Land pflaumendunkel, Meer fast schwarz, Beschriftung lesbar,
   und die Marker sind die einzigen kraeftigen Punkte im Bild. */
[data-theme="dark"] .leaflet-fondo-pane{
  filter:invert(.92) hue-rotate(180deg) grayscale(.62) brightness(.9)
         sepia(.5) hue-rotate(248deg) saturate(1.5)}

/* Leaflet-Popup in der Formsprache der Seite. */
.leaflet-popup-content-wrapper{background:var(--paper);color:var(--ink);border-radius:16px;
  border:1px solid var(--hair);box-shadow:var(--sh-2,0 18px 48px rgba(0,0,0,.18))}
.leaflet-popup-content{margin:12px 14px;font:inherit;line-height:1.45}
.leaflet-popup-tip{background:var(--paper);border:1px solid var(--hair)}
.leaflet-container{font:inherit;background:var(--paper)}
.leaflet-container a.leaflet-popup-close-button{color:var(--ink-3,var(--ink-2))}
.mp-pop{min-width:190px}
.mp-pm{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:999px;margin-bottom:6px}
.mp-pop b{display:block;font-size:14.5px;letter-spacing:-.01em}
.mp-pz{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.mp-stern{font-style:normal;color:#B8842A;font-weight:700}
.mp-ver{display:flex;align-items:center;justify-content:center;margin-top:10px;
  min-height:38px;border-radius:999px;background:var(--coral);color:#fff!important;
  font-size:13px;font-weight:700;text-decoration:none}
@media (max-width:700px){
  .mp-voll{height:calc(100dvh - 56px)}
  .mp-werk{padding:8px 12px}
  .mp-gps{padding:0 13px;font-size:12.5px}
}
/* Platz fuer die Leiste, damit sie die letzte Kartenreihe nicht deckt. */
.detalle{padding-bottom:calc(var(--s6) + 56px)}
/* Leere Kategorie: die Wege hinaus. Keine Leere ohne Alternative
   (UI_MASTER). Die Zahl daneben ist die echte Anzahl aus dem
   Bauzeit-Schnappschuss, nie geschaetzt. */
/* `hidden` muss auch dann greifen, wenn eine Regel display setzt —
   sonst ist die Angabe wahr und die Wirkung bleibt aus. */
#rs-liste [hidden],#rs-suche [hidden]{display:none!important}
/* Der Kategorie-Wechsel. Eine Reihe, die seitlich laeuft statt in drei
   Zeilen umzubrechen — siebzehn Namen sind auf 320 px sonst ein Block,
   der die Liste nach unten schiebt. Die aktuelle Kategorie traegt die
   Aktionsfarbe und ist kein Link auf sich selbst. */
.kat-leiste{display:flex;gap:8px;overflow-x:auto;margin:14px 0 2px;
  padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kat-leiste::-webkit-scrollbar{display:none}
.kat-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:0 15px;border-radius:999px;
  background:var(--paper);border:1px solid var(--hair);color:var(--ink);
  font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),border-color .18s}
.kat-chip:hover{transform:translateY(-1px);border-color:var(--coral)}
.kat-chip i{font-style:normal;font-size:12.5px;color:var(--ink-3,var(--ink-2));
  font-variant-numeric:tabular-nums}
.kat-chip.on{background:var(--coral);border-color:var(--coral);color:#fff}
.kat-chip.on i{color:rgba(255,255,255,.82)}
/* Weicher Rand als Hinweis „hier geht es weiter". Gesetzt von cat.js,
   nur wenn die Reihe wirklich breiter ist als ihr Platz. */
.kat-leiste.rollbar{mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.kat-leiste.rollbar.amEnde{mask-image:none;-webkit-mask-image:none}
.leer-weg{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.leer-weg a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 18px;border-radius:999px;background:var(--paper);
  border:1px solid var(--hair);color:var(--ink);font-weight:600;font-size:15px;
  text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
.leer-weg a:hover{transform:translateY(-2px);box-shadow:var(--sh-1,0 6px 18px rgba(0,0,0,.10))}
.leer-weg a i{font-style:normal;font-size:13px;color:var(--ink-3,var(--ink-2));
  font-variant-numeric:tabular-nums}
.lista-mehr{display:flex;gap:20px;flex-wrap:wrap;margin:22px 0 0;font-size:14.5px}
.lista-mehr a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px}
/* Auf einer Kategorie-Seite traegt jede Karte dasselbe Modul-Etikett —
   es sagt nichts, was die Ueberschrift nicht schon sagt. */
#rs-liste .card .modl{display:none}
/* Die Chips der Suche: eine Reihe, die seitlich laeuft. Vierzehn Module
   umgebrochen fuellen auf dem Telefon fuenf Zeilen. */
.su-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:4px}
.su-chips::-webkit-scrollbar{display:none}
.su-chips .rs-chip{flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════════
   NEUE BAUSTEINE - die drei Werkzeugseiten
   Regel: verzweigen ja, duplizieren nein. Jede Farbe, jeder Radius und
   jeder Abstand kommt aus den Tokens oben; `.tag`, `.band-h`, `.h-sec`,
   `.lead`, `.btn`, `.kat-leiste`, `.gasol` und `.slider` sind bestehende
   Bausteine der Startseite und werden hier nur angeordnet.
   ══════════════════════════════════════════════════════════════════ */

.wz{padding:var(--s4) 0 var(--s6)}
.wz .band-h:first-child{margin-top:var(--s3)}

/* Brotkrumen. Auf einer Unterseite muss der Weg zurueck sichtbar sein -
   in der App ist es der Zurueck-Pfeil, im Browser die Krume. */
.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);padding-top:var(--s3)}
.krumen a{text-decoration:underline;text-underline-offset:2px}
.krumen a:hover{color:var(--coral-deep)}
.krumen i{font-style:normal;color:var(--ink-3)}
.krumen span{color:var(--ink)}

/* ── LEYES: Kopfbereich ─────────────────────────────────────────── */
.ley-top{display:grid;grid-template-columns:1.02fr .98fr;gap:14px;margin-top:var(--s3)}
@media(max-width:820px){.ley-top{grid-template-columns:1fr}}

/* Die EINE Handlung dieser Seite traegt die Aktionsfarbe. Alles andere auf
   der Seite bleibt ruhig; zwei konkurrierende Handlungsfarben waeren ein
   Fehler, kein Stil (UI_MASTER, Abnahme Punkt 9). */
.ley-multas{
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
  padding:22px 24px;border-radius:20px;min-height:178px;
  /* NACHGEMESSEN, nicht geschaetzt. Der erste Entwurf nahm den Verlauf des
     Markenzeichens (#FF7D97 → Koralle → Koralle-tief). Weiss auf der hellen
     Koralle #FF5A7C ergibt 3.0:1 - unter der Schwelle 4.5 fuer die
     14,5-px-Zeile. Der Verlauf startet deshalb bei #D93459 (4.66:1) und
     laeuft auf #A8264A (7.02:1). Feste Hex-Werte und NICHT
     `var(--coral-deep)`: im Dunkelmodus wird dieses Token zu hellem Rosa
     (#FF8AA3), weisse Schrift darauf waere unlesbar.
     Fuer den Bericht: `.btn-p` und `.kat-chip.on` der ECHTEN Seite stehen
     heute bei denselben 3.0:1 - ein Befund am bestehenden System, den ich
     hier nicht eigenmaechtig umbaue. */
  background:linear-gradient(148deg,#D93459 0%,#C42E52 48%,#A8264A 100%);
  color:#fff;box-shadow:0 2px 6px rgba(168,38,74,.26),0 16px 34px rgba(168,38,74,.22);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;
}
.ley-multas:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(168,38,74,.32),0 26px 52px rgba(168,38,74,.28)}
.ley-multas:active{transform:translateY(-1px) scale(.994)}
/* Das Etikett bekommt einen DUNKLEREN Grund, keinen helleren: weisser
   Text auf `rgba(255,255,255,.2)` ueber der Koralle kam auf 3,49:1 -
   der aufhellende Schleier frisst genau den Kontrast, den er stiften
   soll. Mit Schwarz-Schleier sind es 6,3:1. */
.ley-multas .kick{align-self:flex-start;background:rgba(0,0,0,.22);color:#fff;border-color:rgba(255,255,255,.34)}
.ley-multas .t{font-size:clamp(21px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
/* Reines Weiss, nicht 94 %: die vier Prozent kosten 4,66 → 4,21 und damit
   die Schwelle. Bei 14,5 px ist das kein Feinschliff. */
.ley-multas .s{font-size:14.5px;line-height:1.5;color:#fff;max-width:40ch}
.ley-multas .w{margin-top:4px;font-size:14.5px;font-weight:750}

.ley-such{
  display:flex;flex-direction:column;gap:11px;padding:22px 24px;border-radius:20px;min-height:178px;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1);
}
.ley-such .h{font-size:16.5px;font-weight:750;letter-spacing:-.018em}
.such-f{
  display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-3);
  transition:border-color .18s,box-shadow .18s;
}
.such-f:focus-within{border-color:var(--coral);box-shadow:0 0 0 3.5px var(--coral-soft)}
.such-f input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15.5px;color:var(--ink)}
.such-f input::placeholder{color:var(--ink-3)}
.such-h{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.such-vor{display:flex;gap:7px;flex-wrap:wrap}
.such-vor button{
  min-height:40px;padding:0 13px;border-radius:999px;font-size:13.5px;
  background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-2);
  transition:border-color .18s,color .18s;
}
.such-vor button:hover{border-color:var(--coral);color:var(--ink)}
.such-tref{display:grid;gap:2px;max-height:216px;overflow:auto;margin-top:2px}
.such-tref a{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  padding:9px 11px;border-radius:11px;font-size:14px;line-height:1.34;
}
.such-tref a:hover{background:var(--paper-2)}
.such-tref a b{font-size:12px;font-weight:800;color:color-mix(in srgb,var(--laws) 64%,var(--ink));white-space:nowrap;font-variant-numeric:tabular-nums}
.such-tref .nix{padding:9px 11px;font-size:14px;color:var(--ink-2)}

/* ── LEYES: die 17 Bereiche ─────────────────────────────────────────
   BEWUSST OHNE PIKTOGRAMM. Die App traegt hier Emojis; im Browser sind
   genau die schon einmal als leere Kaesten erschienen (Windows,
   2026-08-11 und der Web-Audit vom 22.08.). Siebzehn Symbole neu zu
   erfinden waere die zweite schlechte Loesung - ein Gesetzbuch ist Text.
   Anker ist deshalb die ZAHL: sie ist echt, sie steht in der Kachel an
   der Stelle, an der die Kategorie-Kacheln ihren Zaehler tragen, und sie
   sagt dem Leser sofort, wie viel ihn dort erwartet. */
.ley-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(186px,100%),1fr));gap:10px}
.area{
  --c:var(--laws);
  display:flex;flex-direction:column;gap:7px;padding:15px 14px 14px;border-radius:16px;min-height:120px;
  background:color-mix(in srgb,var(--c) 12%, var(--paper));
  border:1px solid color-mix(in srgb,var(--c) 24%, transparent);
  color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s,box-shadow .2s;
}
.area:hover{
  transform:translateY(-3px);box-shadow:var(--sh-2);
  background:color-mix(in srgb,var(--c) 21%, var(--paper));
  border-color:color-mix(in srgb,var(--c) 44%, transparent);
}
.area:active{transform:translateY(-1px) scale(.985)}
.area .z{display:flex;align-items:baseline;gap:5px;color:color-mix(in srgb,var(--c) 60%, var(--ink))}
.area .z b{font-size:23px;font-weight:800;letter-spacing:-.032em;font-variant-numeric:tabular-nums;line-height:1}
.area .z i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.82}
.area .t{font-size:14.5px;font-weight:750;letter-spacing:-.016em;line-height:1.2}
.area .d{font-size:12.5px;line-height:1.4;color:var(--ink-2)}

.ley-fuss{
  margin-top:var(--s4);padding:16px 18px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--hair);
  font-size:13px;line-height:1.55;color:var(--ink-2);max-width:78ch;
}
.ley-fuss b{color:var(--ink)}

/* ── LEYES: Liste eines Bereichs ────────────────────────────────── */
.ley-liste{display:grid;gap:10px;margin-top:var(--s3)}
.ley-k{
  display:grid;grid-template-columns:136px 1fr;gap:18px;padding:17px 20px;
  background:var(--paper);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;
}
.ley-k:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--laws) 40%,transparent)}
.ley-k .nr b{display:block;font-size:15px;font-weight:800;letter-spacing:-.022em;color:color-mix(in srgb,var(--laws) 64%,var(--ink))}
.ley-k .nr span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* `display:block` ist hier kein Feinschliff: die Bausteine sind `<span>`,
   damit sie in einem `<a>` stehen duerfen. Ohne diese Zeile klebt die
   Zusammenfassung an den Titel - „…Licencias de ConducirReglamenta…". */
.ley-k .t{display:block;font-size:16.5px;font-weight:750;letter-spacing:-.018em;line-height:1.24;text-wrap:balance}
.ley-k .s{display:block;margin-top:7px;font-size:14px;line-height:1.52;color:var(--ink-2)}
.ley-k .est{margin-top:9px}
@media(max-width:640px){.ley-k{grid-template-columns:1fr;gap:9px;padding:16px 17px}}

/* Rechtsstand. Eine Regel des Katalogs, die im Browser genauso gelten
   muss wie in der App: ein aufgehobenes Gesetz darf nie ohne diese Marke
   erscheinen (Ley 550-14 stand einmal als geltendes Strafgesetzbuch da). */
.est{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.est.v{background:color-mix(in srgb,var(--real) 14%,var(--paper));color:color-mix(in srgb,var(--real) 62%,var(--ink));border:1px solid color-mix(in srgb,var(--real) 28%,transparent)}
.est.w{background:color-mix(in srgb,var(--gold) 16%,var(--paper));color:color-mix(in srgb,var(--gold) 68%,var(--ink));border:1px solid color-mix(in srgb,var(--gold) 32%,transparent)}
.est.x{background:var(--coral-soft);color:color-mix(in srgb,var(--coral-deep) 66%,var(--ink));border:1px solid color-mix(in srgb,var(--coral) 30%,transparent)}

/* ── LEYES: die Ficha ───────────────────────────────────────────── */
.ficha{max-width:72ch}
.ficha>.tag{margin-top:18px}
.ficha h1{font-size:clamp(25px,2.8vw,34px);font-weight:800;letter-spacing:-.034em;line-height:1.11;text-wrap:balance;margin-top:12px}
.ficha .meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:15px}
.ficha .meta .p{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ficha .abs{margin-top:20px;font-size:17px;line-height:1.6}
.punkte{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.punkte li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15.5px;line-height:1.5}
.punkte .hk{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:1px;flex:0 0 auto;
  background:color-mix(in srgb,var(--laws) 16%,var(--paper));color:color-mix(in srgb,var(--laws) 84%,var(--ink));
}
.quelle{margin-top:var(--s4);padding:20px 22px;border-radius:18px;background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1)}
.quelle .k{font-size:12.5px;color:var(--ink-2)}
.quelle .n{margin-top:3px;font-size:16px;font-weight:750;letter-spacing:-.018em}
.quelle .btn{margin-top:14px}
.quelle .v{margin-top:11px;font-size:12.5px;color:var(--ink-2)}
.hinweis{margin-top:var(--s3);padding:2px 0 2px 15px;border-left:2px solid var(--hair);font-size:13px;line-height:1.55;color:var(--ink-2);max-width:70ch}
.ficha-mehr{margin-top:var(--s5)}

/* ── MULTAS ─────────────────────────────────────────────────────── */
.multa-erkl{
  margin-top:var(--s3);padding:20px 22px;border-radius:18px;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1);max-width:78ch;
}
.multa-erkl p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.multa-erkl .gr{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:12px 0 10px}
.multa-erkl .gr b{font-size:27px;font-weight:800;letter-spacing:-.034em;font-variant-numeric:tabular-nums;line-height:1}
.multa-erkl .gr span{font-size:13px;color:var(--ink-2)}
.multa-erkl .warn{margin-top:12px;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--coral) 55%,transparent);font-size:13px;line-height:1.5;color:var(--ink-2)}
.multa-erkl .warn b{color:color-mix(in srgb,var(--coral-deep) 76%,var(--ink))}

.multen{display:grid;gap:8px;margin-top:14px}
.multa{
  display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:center;
  padding:14px 18px;background:var(--paper);border:1px solid var(--hair);border-radius:14px;
}
.multa .t{font-size:15px;font-weight:650;letter-spacing:-.012em;line-height:1.3}
.multa .a{display:block;margin-top:4px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.multa .b{text-align:right}
.multa .b b{display:block;font-size:16px;font-weight:800;letter-spacing:-.024em;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--coral-deep) 74%,var(--ink))}
.multa .b span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-2)}
@media(max-width:560px){.multa{grid-template-columns:1fr;gap:8px}.multa .b{text-align:left}}

/* ── GASOLINERAS ────────────────────────────────────────────────── */
/* `.gasol` ist der Preisblock der Startseite. Hier steht dieselbe Klasse
   mit einem Zusatz - nicht eine zweite Fassung davon. */
.gasol.gross{grid-column:auto;min-height:0;padding:22px 24px;border-radius:20px;gap:16px;margin-top:var(--s3)}
.gasol.gross .gk{gap:11px}
.gasol.gross .gt{font-size:11px}
.gasol.gross .gw{font-size:13.5px}
.preis-haupt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(154px,100%),1fr));gap:11px}
.preis-h{padding:15px 16px;border-radius:14px;background:var(--paper);border:1px solid color-mix(in srgb,var(--gas) 22%,transparent)}
.preis-h .k{font-size:12.5px;color:var(--ink-2)}
.preis-h .v{margin-top:5px;font-size:27px;font-weight:800;letter-spacing:-.034em;font-variant-numeric:tabular-nums;line-height:1}
.preis-h .u{margin-top:4px;font-size:11.5px;color:var(--ink-2)}
.preis-bez{font-size:12px;color:var(--ink-2);margin-top:-4px}
.preis-rest{border-top:1.5px dashed var(--hair);padding-top:14px}
.preis-rest .rt{font-size:11px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}

.delta{display:inline-flex;align-items:baseline;gap:4px;font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums}
.delta.up{color:color-mix(in srgb,var(--coral-deep) 78%,var(--ink))}
.delta.dn{color:color-mix(in srgb,var(--real) 82%,var(--ink))}
.delta.eq{color:var(--ink-2);font-weight:650}

.gas-erkl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:12px;margin-top:var(--s3)}
.gas-e{padding:18px 20px;border-radius:16px;background:var(--paper);border:1px solid var(--hair);box-shadow:var(--sh-1)}
.gas-e .t{font-size:15.5px;font-weight:750;letter-spacing:-.016em}
.gas-e p{margin-top:7px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

.rechner-out{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rechner-out b{font-size:31px;font-weight:800;letter-spacing:-.036em;font-variant-numeric:tabular-nums;line-height:1}
.rechner-sel{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:4px}

/* ── NOTICIAS ───────────────────────────────────────────────────── */
.not-leiste{display:flex;gap:8px;overflow-x:auto;margin:var(--s3) 0 2px;padding:2px 2px 8px;scrollbar-width:none}
.not-leiste::-webkit-scrollbar{display:none}
.not-lead{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;margin-top:12px;
  background:var(--paper);border:1px solid var(--hair);border-radius:20px;overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;
}
.not-lead:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.not-lead .bild{position:relative;min-height:236px;background:var(--paper-3)}
.not-lead .bild img{width:100%;height:100%;object-fit:cover;display:block}
.not-lead .txt{padding:24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.not-lead .t{font-size:clamp(20px,2vw,25px);font-weight:800;letter-spacing:-.028em;line-height:1.16;text-wrap:balance}
.not-lead .s{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media(max-width:760px){.not-lead{grid-template-columns:1fr}.not-lead .bild{min-height:186px}.not-lead .txt{padding:19px}}

/* `min(324px,100%)` statt `324px`: auf 320 dp ist die Spalte breiter als
   der Platz, und das Raster schiebt die ganze Seite seitlich raus - genau
   gemessen 340 px in 305 px. Derselbe Fehler wie das `1fr` statt
   `minmax(0,1fr)` in der Kunden-Web-Vorschau. */
.not-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(324px,100%),1fr));gap:11px;margin-top:11px}
.not{
  display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px;
  background:var(--paper);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;
}
.not:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--news) 40%,transparent)}
.not .bild{width:98px;height:74px;border-radius:11px;overflow:hidden;background:var(--paper-3);flex:0 0 auto;display:grid;place-items:center;color:color-mix(in srgb,var(--news) 46%,transparent)}
.not .bild img{width:100%;height:100%;object-fit:cover;display:block}
.not .t{display:block;margin-top:5px;font-size:15px;font-weight:700;letter-spacing:-.016em;line-height:1.3}
.not .s{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.not-lead .t,.not-lead .s{display:block}
/* Ohne Bild keine leere Bildflaeche: die Karte wird einspaltig. Ein
   grauer Kasten neben dem Aufmacher sagt „hier fehlt etwas" - und bei
   Al Momento, El Dinero und Remolacha fehlt das Bild IMMER. */
.not-lead.ohne{grid-template-columns:1fr}
.not-lead.ohne .bild{display:none}
.q{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)}
.q b{font-weight:750;color:color-mix(in srgb,var(--news) 60%,var(--ink))}
.q i{font-style:normal;color:var(--ink-3)}
.not-fuss{margin-top:var(--s4);padding:16px 18px;border-radius:14px;background:var(--paper-2);border:1px solid var(--hair);font-size:13px;line-height:1.55;color:var(--ink-2);max-width:78ch}
.not-fuss b{color:var(--ink)}

/* ── Leerer Zustand: nie eine leere Flaeche (UI_MASTER) ─────────── */
.leer{padding:26px 22px;border-radius:18px;background:var(--paper-2);border:1px dashed var(--hair);margin-top:var(--s3)}
.leer .t{font-size:16px;font-weight:750;letter-spacing:-.018em}
.leer p{margin-top:7px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:62ch}
/* ── Hinweis zum Rechtsstand ─────────────────────────────────────
   Steht auf der Ficha VOR der Zusammenfassung, nicht darunter: wer ein
   aufgehobenes Gesetz liest, muss das erfahren, bevor er den Inhalt
   fuer geltendes Recht haelt. */
.stand-notiz{
  margin-top:16px;padding:14px 16px;border-radius:14px;
  background:var(--coral-soft);border:1px solid color-mix(in srgb,var(--coral) 26%,transparent);
  font-size:14.5px;line-height:1.55;
}
.stand-notiz b{color:color-mix(in srgb,var(--coral-deep) 66%,var(--ink))}

/* Verweiskarten am Seitenende: dieselbe Kachel wie die Erklaerblocks,
   nur anklickbar. */
a.gas-e{display:block;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
a.gas-e:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--coral) 40%,transparent)}

/* Ladezustand der Nachrichten: ruhige Platzhalterflaechen statt eines
   Kreisels (UI_MASTER) und KEINE Dauer-Animation je Karte - sechs
   pulsierende Kacheln machen schwache Geraete heiss. */
.not-skel{height:104px;border-radius:16px;background:var(--paper-3);border:1px solid var(--hair)}

/* „Hier geht es raus." Nur die Nachrichten tragen es: dort ist der
   Absprung zum Verlag der Zweck (Eigentuemer-Entscheid 2026-08-25). Bei
   Leyes und Gasolineras bleibt der Leser bei uns, deshalb gibt es das
   Symbol dort bewusst nicht — ein Hinweis, der ueberall steht, sagt
   nichts mehr. */
.q .raus{margin-left:2px;color:var(--ink-3);flex:0 0 auto}
.not:hover .q .raus,.not-lead:hover .q .raus{color:var(--coral-deep)}
/* Fuer Screenreader, nicht fuer das Auge: das Symbol allein ist fuer
   jemanden, der die Seite hoert, keine Information. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Etikett im Dunkelmodus lesbar machen ────────────────────────────
   `.tag` mischt seine Schriftfarbe aus der Modulfarbe (82 %) und der
   Tinte. Auf hellem Papier trägt das; auf dem dunklen kommt es bei
   10,5 px Versalien auf 3,49:1 — NACHGEMESSEN, nicht geschätzt. Das ist
   ausgerechnet die kleinste Schrift der Seite und damit die, die den
   Kontrast am nötigsten braucht.

   Bei 60 % Modulfarbe sind es 5,29:1. Die Farbe bleibt erkennbar die des
   Moduls, sie wird nur heller gemischt — die Handschrift ändert sich
   nicht, die Lesbarkeit schon.

   Betrifft auch das Werkzeug-Band der Startseite, das dieses Etikett seit
   dem 24.08. trägt. Nur der Dunkelmodus wird angefasst; hell bleibt
   unverändert. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag,
  :root:not([data-theme="light"]) .kick{
    color:color-mix(in srgb,var(--c,var(--coral-deep)) 60%, var(--ink));
  }}
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .kick{
  color:color-mix(in srgb,var(--c,var(--coral-deep)) 60%, var(--ink));
}
/* Auf der Koralle-Karte bleibt das Etikett weiss — dort ist der Grund
   nicht das Papier, sondern der dunkle Verlauf. */
:root[data-theme="dark"] .ley-multas .kick{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ley-multas .kick{color:#fff}}

/* ══ DER SOCIOS-EINSTIEG ═════════════════════════════════════════════
   Zwei Wege fuer einen BETRIEB in die Socios-App: eine schmale Leiste
   unter der Kopfzeile und eine Tuer nach den Kategorien.
   Eigentuemer-Entscheid 2026-08-26.

   WARUM ES SIE BRAUCHT — gemessen, nicht vermutet. Auf resuelvedr.com bei
   390 px: der Socios-Knopf der Kopfzeile ist ab 430 px `display:none`
   (siehe Regel weiter oben), und der einzige verbleibende Weg stand in der
   Fusszeile bei 13.522 px von oben, auf einer Seite von 14.181 px. Ein
   Betrieb haette 95 % der Seite herunterscrollen muessen.

   KEINE ZAHLEN IM TEXT. Kommission und monatliche Kosten sind am
   2026-08-22 bewusst aus dem Hero geflogen, weil sie eine Frage
   beantworten, die ein Kunde nicht stellt. Hier steht deshalb nur, WER
   gemeint ist und WOHIN es geht.

   KEINE WEISSE SCHRIFT AUF KORALLE: die Kombination traegt gemessen
   3,00:1. Die Flaechen sind koralle-GETOENT, die Schrift bleibt Tinte;
   der Knopftext nimmt `--coral-deep` bei 76 % — derselbe Anteil, der beim
   Kraftstoffblock auf 5,63:1 (hell) und 7,98:1 (dunkel) nachgemessen ist. */

/* ── Die Leiste: immer im ersten Bild, 42 px hoch ─────────────────── */
.soc-leiste{
  position:relative;z-index:59;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:42px;padding:6px 14px;
  background:color-mix(in srgb,var(--coral) 12%, var(--paper));
  border-bottom:1px solid color-mix(in srgb,var(--coral) 26%, transparent);
  font-size:13.5px;color:var(--ink);text-decoration:none;text-align:center;
  transition:background .18s;
}
.soc-leiste:hover{background:color-mix(in srgb,var(--coral) 19%, var(--paper))}
.soc-leiste b{font-weight:750}
.soc-leiste .w{
  display:inline-flex;align-items:center;gap:6px;font-weight:750;white-space:nowrap;
  color:color-mix(in srgb,var(--coral-deep) 76%, var(--ink));
}
/* Der Zusatzsatz nutzt `.nur-breit` — den Baustein, den die Startseite
   schon fuehrt (verschwindet unter 700 px). Eine zweite Regel fuer
   dasselbe waere genau die Doppelpflege, die dieses Blatt vermeidet. */
@media(max-width:560px){.soc-leiste{gap:8px;font-size:13px;padding:6px 12px}}

/* ── Die Tuer: nach den Kategorien, eine Zeile hoch ───────────────── */
.soc-tuer{
  display:flex;align-items:center;gap:14px;margin-top:26px;
  padding:16px 18px;border-radius:16px;
  background:color-mix(in srgb,var(--coral) 9%, var(--paper));
  border:1px solid color-mix(in srgb,var(--coral) 28%, transparent);
  color:var(--ink);text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s,background .2s;
}
.soc-tuer:hover{
  transform:translateY(-2px);box-shadow:var(--sh-2);
  border-color:color-mix(in srgb,var(--coral) 52%, transparent);
  background:color-mix(in srgb,var(--coral) 14%, var(--paper));
}
.soc-tuer:active{transform:translateY(0) scale(.995)}
.soc-tuer .g{
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--coral) 16%, var(--paper));
  color:color-mix(in srgb,var(--coral-deep) 80%, var(--ink));
}
.soc-tuer .tx{flex:1;min-width:0}
.soc-tuer .t{display:block;font-size:16px;font-weight:750;letter-spacing:-.018em;line-height:1.24}
.soc-tuer .d{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.soc-tuer .w{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 17px;border-radius:12px;
  font-size:14.5px;font-weight:750;letter-spacing:-.012em;
  background:var(--paper);border:1px solid color-mix(in srgb,var(--coral) 40%, transparent);
  color:color-mix(in srgb,var(--coral-deep) 76%, var(--ink));
}
.soc-tuer:hover .w{border-color:var(--coral)}
/* Unter 560 px bricht sie um: Symbol und Text in einer Zeile, der Knopf
   darunter ueber die volle Breite. Ein 44-px-Knopf neben zwei Textzeilen
   liesse auf 320 px kein lesbares Wort uebrig. */
@media(max-width:560px){
  .soc-tuer{flex-wrap:wrap;gap:12px}
  .soc-tuer .tx{flex:1 1 calc(100% - 58px)}
  .soc-tuer .w{width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   REDAKTIONELLER TEIL DER KATEGORIESEITEN

   Unter der Betriebsliste steht auf jeder Kategorieseite ein Kopf und
   fuenf Abschnitte (siehe tools/seo/generate.mjs `mainHtml`). Bis
   2026-08-26 wurde dieser Text gar nicht erst ausgeliefert; als er
   zurueckkam, stand er ungestylt da: die Stile dafuer lagen
   ausschliesslich in `web/seo.css`, und die Listen-Seiten laden
   bewusst NUR `home.css` — sie sollen die Handschrift der Startseite
   tragen und nicht die aeltere SEO-Oberflaeche.

   `seo.css` einfach mitzuladen waere der bequeme Weg und der falsche:
   es bringt seine eigene Typografie, eigene Karten und eigene Tokens
   mit, und die Seite haette wieder zwei Handschriften — genau das,
   was der Eigentuemer als "mehrere UI zu einer gemacht" beanstandet
   hat. Also stehen die Regeln hier, in den Tokens dieser Datei.

   `.wrap` gibt es in `home.css` sonst nicht (die Startseite setzt ihre
   Breite je Band). Sie wird hier NUR innerhalb der beiden Bloecke
   definiert, damit sie nichts ausserhalb beruehrt. */
.hero--nach, .sections{ margin-top:var(--s5) }
.hero--nach .wrap, .sections .wrap{
  max-width:var(--wide); margin:0 auto; padding:0 var(--gut); width:100%;
}

/* ── Der Kopf unter der Liste ── */
.hero--nach .wrap{ display:grid; gap:var(--s3); align-items:center }
@media(min-width:900px){
  .hero--nach .wrap{ grid-template-columns:minmax(0,1fr) minmax(0,22rem) }
  .hero--solo .wrap{ grid-template-columns:minmax(0,1fr) }
}
.hero--nach .kicker{
  display:inline-flex; align-items:center; height:23px; padding:0 9px;
  border-radius:6px; margin:0 0 12px;
  font-size:10.5px; font-weight:800; letter-spacing:.075em; text-transform:uppercase;
  background:color-mix(in srgb,var(--coral) 15%, var(--paper));
  color:color-mix(in srgb,var(--coral-deep) 82%, var(--ink));
  border:1px solid color-mix(in srgb,var(--coral) 26%, transparent);
}
.hero--nach .hero-h{
  font-size:clamp(23px,2.5vw,32px); font-weight:800; letter-spacing:-.032em;
  line-height:1.08; margin:0 0 12px; text-wrap:balance;
}
.hero--nach .lead{ margin:0 }

/* ── Die fuenf Abschnitte ── */
.sections{ padding-bottom:var(--s5) }
.sections .wrap{ display:grid; gap:var(--s3) }
.sections section{
  background:var(--paper); border:1px solid var(--hair); border-radius:24px;
  box-shadow:var(--sh-1); padding:clamp(20px,3vw,32px);
}
.sections h2{
  font-size:clamp(20px,2.1vw,26px); font-weight:800; letter-spacing:-.028em;
  line-height:1.14; margin:0 0 14px; color:var(--ink); text-wrap:balance;
}
.sections h3{
  font-size:16.5px; font-weight:750; letter-spacing:-.018em; line-height:1.3;
  margin:22px 0 6px; color:var(--ink);
}
.sections h3:first-child{ margin-top:0 }
.sections p{ margin:0 0 12px; color:var(--ink-2); font-size:15.5px; line-height:1.6 }
.sections p:last-child{ margin-bottom:0 }
.sections strong{ color:var(--ink); font-weight:750 }
.sections a{
  color:var(--coral-deep); font-weight:700; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--coral) 50%, transparent);
}
.sections a:hover{ text-decoration-color:var(--coral) }

/* Text neben Bild. Auf dem Telefon untereinander — 18rem Bild neben
   einem Absatz laesst auf 320 dp kein lesbares Wort uebrig. */
/* Oben ausrichten, nicht mittig: der Textblock ist fast immer kuerzer als
   das Bild daneben, und zentriert riss er eine sichtbare Luecke zwischen
   die Ueberschrift und den ersten Satz. */
.sections .cols{ display:grid; gap:var(--s3); align-items:start }
@media(min-width:760px){
  .sections .cols{ grid-template-columns:minmax(0,1fr) minmax(0,18rem) }
}

/* Die nummerierten Schritte. Die Ziffer traegt die Aktionsfarbe, weil
   sie die Reihenfolge fuehrt — sie ist keine zweite Handlungsfarbe. */
.sections .steps{ list-style:none; margin:0; padding:0; counter-reset:paso }
.sections .steps li{
  counter-increment:paso; position:relative; padding:14px 0 14px 44px;
  border-top:1px solid var(--hair-2); color:var(--ink-2); line-height:1.55;
}
.sections .steps li:first-child{ border-top:0 }
.sections .steps li::before{
  content:counter(paso); position:absolute; left:0; top:12px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--coral-soft); color:var(--coral-deep);
  font-size:13px; font-weight:800;
}

/* ── Bild und Merkmalsreihe ── */
.hero--nach .ph, .sections .ph{
  border-radius:20px; overflow:hidden; border:1px solid var(--hair);
  box-shadow:var(--sh-1); margin:0;
}
.hero--nach .ph{ aspect-ratio:4/3 }
.sections .ph{ aspect-ratio:3/2 }
.hero--nach .ph img, .sections .ph img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.hero--nach .chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none;
}
.hero--nach .chips li{
  padding:7px 12px; border-radius:999px; background:var(--paper-2);
  border:1px solid var(--hair); color:var(--ink-2);
  font-size:12.5px; font-weight:650;
}