/* Weserfunke – Stylesheet
   Farbwelt "Abend an der Weser": Papier (Speisekarte), Petrol (Weser, aus dem Logo),
   Gold (der Funke, aus dem Logo, auch die Hauptknoepfe --funke). Rot nur fuer Warnungen (--crit), seit 02.10.2026.
   Schriften: Fraunces (Überschriften), Source Sans 3 (Text), selbst ausgeliefert aus
   assets/fonts (keine Verbindung zu Google). Lizenz: SIL OFL 1.1, siehe fonts/LIZENZ.txt.
   Immer hell: eine helle Seite wirkt vertrauenswuerdiger (Entscheidung 23.09.2026). Das dunkle
   Schema bleibt nur ueber data-theme="dark" erreichbar und ist derzeit nirgends eingeschaltet.
   Aufbau: Schriften, Tokens, Grundlagen, Nutzerseite, Formulare, Admin, Handy. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/fraunces.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/fraunces-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-sans-3.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Zusatz-Zeichensaetze (Tuerkisch, Vietnamesisch, Kyrillisch): der Browser laedt sie nur, wenn solche Zeichen vorkommen */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/fraunces-italic-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/fraunces-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-italic-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-italic-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-italic-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-sans-3-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-sans-3-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-sans-3-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/source-sans-3-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --ground:#F7F1E6; --surface:#FFFCF6; --surface-2:#F0E7D6; --line:#E3D6C0;
  --ink:#1C3134; --ink-2:#4A5E5F; --ink-3:#616C69;
  --night:#134A4E; --night-ink:#F7F1E6; --night-line:#2C6468;
  --funke:#E9A21B; --funke-ink:#1C3134; --gold:#E9A21B; --gold-text:#8F6208; --teal:#1E6468;
  --ok:#2A7049; --warn:#8C5C06; --crit:#B3362A; --on:#FFFFFF;
  --radius:12px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(28,49,52,.06),0 8px 28px rgba(28,49,52,.08);
}

:root[data-theme="dark"]{
  --ground:#0F1E20; --surface:#162A2C; --surface-2:#1D3436; --line:#2A4447;
  --ink:#F1EADC; --ink-2:#C3CAC3; --ink-3:#8D9B97;
  --night:#0B2A2D; --night-ink:#F1EADC; --night-line:#23494C;
  --funke:#F0B53A; --gold:#F0B53A; --gold-text:#F0B53A; --teal:#62AAAB;
  --ok:#5DB384; --warn:#E0A63B; --crit:#E06A5C; --on:#10191A; --funke-ink:#1B1210;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3);
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;text-wrap:balance;font-weight:600;font-optical-sizing:auto}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
.eyebrow{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600}
.sub{color:var(--ink-2);margin-top:8px;max-width:42em}
.fine{font-size:14px;color:var(--ink-3)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--surface-2);padding:2px 8px;border-radius:4px}
.pre{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--surface-2);padding:12px;border-radius:8px;overflow-x:auto}
.stack{display:grid;gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid2>*,.two>*,.stack>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
/* Kurze Seiten (z. B. 404): Fuss nicht mitten im Bild enden lassen */
#inhalt{min-height:62vh}
/* Fuer Lokale: am PC Text und Anfrage nebeneinander */
.lokal-anfrage{margin-top:28px;max-width:760px}
.prose .lokal-leiste{margin:16px 0 8px}
.ab50-bild{margin:20px 0 4px}
@media (min-width:1000px){.lokal-seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:start}.lokal-seite .lokal-anfrage{margin-top:0;position:sticky;top:96px}}
.flash{padding:12px 16px;border-radius:8px;margin:16px 0;font-size:14px}
.flash.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.flash.err{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
.flash.info{background:var(--surface-2);color:var(--ink-2)}
.status-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* In Tabellen bleibt die Knopf-Spalte eine echte Zelle, sonst verrutschen Linien und Hoehe der Zeile */
td.tools{display:table-cell}
td.tools>*{display:inline-block;vertical-align:middle;margin:2px 8px 2px 0}
form.inline{display:inline}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:12px 24px;font:600 17px/1.2 var(--body);cursor:pointer;text-decoration:none;text-align:center;min-height:44px}
.btn-funke{background:var(--funke);color:var(--funke-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ok{background:var(--ok);color:var(--on)}
.btn-crit{background:var(--crit);color:var(--on)}
.btn-sm{padding:8px 16px;font-size:14px;min-height:38px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .15s ease,background-color .15s ease}
  .btn:hover{transform:translateY(-1px)}
}

/* Pillen */
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.pill.teal{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}

/* Bilder */
.pic{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius)}
.pic.r45{aspect-ratio:4/5}.pic.r32{aspect-ratio:3/2}
/* Kennzeichnung KI-erzeugter Bilder (Art. 50 Abs. 4 KI-VO) */
.ki,.bild{position:relative;display:block}   /* .ki = KI-Bild mit Hinweis, .bild = echtes Foto (Pexels/Unsplash) ohne Hinweis */
.ki::after{content:"KI-Bild";position:absolute;right:8px;bottom:8px;font:500 10px/1.4 var(--body);letter-spacing:.03em;background:rgba(0,0,0,.28);color:rgba(255,255,255,.88);padding:1px 8px;border-radius:999px;pointer-events:none}
/* Schild in der Seitensprache (die Uebersetzung setzt html lang, CSS-Texte erreicht sie sonst nicht) */
html[lang="en"] .ki::after{content:"AI image"}html[lang="uk"] .ki::after{content:"Фото ШІ"}html[lang="ru"] .ki::after{content:"Фото ИИ"}html[lang="tr"] .ki::after{content:"YZ görseli"}html[lang="vi"] .ki::after{content:"Ảnh AI"}
.band.ki::after{top:10px;bottom:auto;right:10px}
/* Bildnachweis direkt am Foto (Agenturfotos, z. B. Stamm/Future Image: Copytrack sucht den Credit am Bild) */
.bild[data-credit]::after{content:attr(data-credit);position:absolute;right:8px;bottom:8px;font:500 10px/1.4 var(--body);letter-spacing:.03em;background:rgba(0,0,0,.28);color:rgba(255,255,255,.88);padding:1px 8px;border-radius:999px;pointer-events:none;z-index:2}
.band.bild[data-credit]::after{top:10px;bottom:auto;right:10px}
.band picture{display:block}
/* Textkasten im Banner: am Computer rechts oben im Himmel (von Patrick eingerichtet, 1440 px: rechts 141, oben 49) */
@media (min-width:901px){.band .card{position:absolute;right:9.8%;top:8.9%;max-width:min(34em,46%)}}

/* ---------- Kopf ---------- */
.site-head{background:var(--ground);border-bottom:1px solid var(--line);position:relative;z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.mark{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.mark-img{width:64px;height:auto;display:block}
.site-head nav{display:flex;gap:24px;font-size:17px;align-items:center}
.site-head nav a{text-decoration:none;color:var(--ink-2)}
.site-head nav a:hover{color:var(--ink)}
.site-head nav a.nav-cta{color:var(--gold-text);font-weight:600}
.site-head nav a.nav-neu{color:var(--gold-text);font-weight:600;white-space:nowrap}
.nav-marke{display:inline-block;vertical-align:super;margin-left:4px;font-size:10px;font-weight:700;line-height:1.5;background:var(--gold);color:#1B2426;border-radius:99px;padding:0 4px}
/* Gaeste: Login dezent mit Symbol, Bewerben als Knopf (klar getrennt) */
.nav-login{display:inline-flex;align-items:center;gap:4px}
.nav-login svg{width:16px;height:16px;flex:none}
.site-head nav a.nav-knopf{background:var(--funke);color:var(--funke-ink);border-radius:999px;padding:8px 16px;font-weight:700}
.site-head nav a.nav-knopf:hover{color:var(--funke-ink);filter:brightness(1.08)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:14px}
.menu summary::-webkit-details-marker{display:none}
.menu summary .bars{width:16px;height:2px;background:currentColor;position:relative;border-radius:4px}
.menu summary .bars::before,.menu summary .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:4px}
.menu summary .bars::before{top:-5px}.menu summary .bars::after{top:5px}
.menu[open] summary{background:var(--surface-2)}
.menu .drop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:220px;padding:8px;display:grid}
.menu .drop a{padding:12px 16px;border-radius:8px;text-decoration:none;font-size:17px}
.menu .drop a:hover{background:var(--surface-2)}
.menu .drop a.nav-cta{color:var(--gold-text);font-weight:600}
.menu .drop a.nav-knopf{background:var(--funke);color:var(--funke-ink);text-align:center;margin-top:8px;font-weight:700}
.menu .drop a.nav-knopf:hover{background:var(--funke);filter:brightness(1.08)}

/* ---------- Hero ---------- */
.hero{background:var(--ground)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;padding-block:48px 64px;align-items:center}
.hero .eyebrow{color:var(--gold-text)}
.hero h1{font-size:clamp(40px,5.6vw,68px);margin-top:16px;letter-spacing:-.02em;font-weight:600}
.hero h1 em{font-style:italic;font-weight:500;color:var(--teal)}
.hero .lead{font-size:20px;max-width:34em;margin-top:20px;color:var(--ink-2)}
.cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}
.hero-fig{position:relative;justify-self:end;max-width:420px;width:100%}
.hero-pic{box-shadow:var(--shadow)}
.hero-fig::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);border-radius:var(--radius);z-index:-1}
.hero-fig .spark{position:absolute;top:-14px;left:-14px;width:40px;height:40px;color:var(--gold)}

/* Naechstes Dinner */
.nextbar{background:var(--night);color:var(--night-ink)}
.nextbar .wrap{display:flex;gap:8px 24px;align-items:center;padding-block:16px;flex-wrap:wrap;font-size:17px}
.nextbar b{font-weight:600}
.nextbar .lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
.nextbar .btn{margin-left:auto;background:var(--gold);color:#1C3134;border-color:var(--gold)}

/* ---------- Abschnitte ---------- */
section.block{padding-block:56px}
section.block h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em}

/* Wegwahl: ruhig. Keine Breitenaenderung, nur Rahmen und Haken. */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.way{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.way .pic{border-radius:0;aspect-ratio:3/2}
.way .body{padding:24px;display:flex;flex-direction:column}
.way .body .eyebrow{display:flex;align-items:center;color:var(--ink-3)}
.way h3{font-size:24px;margin-top:8px;letter-spacing:-.01em;display:flex;align-items:center}
.way h3 .pick{color:var(--ink-3)}
.way[aria-checked="true"] h3 .pick{color:var(--gold-text)}
.way p{color:var(--ink-2);margin-top:8px;font-size:17px}
.way .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:16px;gap:12px;flex-wrap:wrap}
.way .amount{font-family:var(--display);font-size:29px;font-variant-numeric:tabular-nums}
.way .amount small{font:400 14px var(--body);color:var(--ink-3)}
.way .choose{font-size:14px;font-weight:600;color:var(--ink-3)}
.pick{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;margin-right:8px;position:relative;flex:none}
.pick::after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor;transform:scale(0)}
/* Auswahl in Gold wie der Rahmen am ersten Bild (Gold = Rahmen und Schmuck, Rot = Knoepfe) */
.way[aria-checked="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow)}
.way[aria-checked="true"] .body .eyebrow,.way[aria-checked="true"] .choose{color:var(--gold-text)}
.way[aria-checked="true"] .pick::after{transform:scale(1)}
.way:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .way{transition:border-color .25s ease,box-shadow .25s ease}
  .pick::after{transition:transform .2s ease}
}

/* Ablauf: beide Varianten liegen uebereinander, die Hoehe bleibt gleich, nur ein sanftes Ueberblenden. */
.flow-switch{display:inline-flex;margin-top:16px;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px}
.flow-switch button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:600 14px var(--body);color:var(--ink-2);cursor:pointer;min-height:40px}
.flow-switch button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
:root[data-theme="dark"] .flow-switch button[aria-selected="true"]{background:var(--teal);color:#10191A}
a[href^="tel:"]{white-space:nowrap}
/* Handy: Hauptknoepfe in Formularen und Aufrufe zum Bewerben ueber die volle Breite */
@media (max-width:640px){form.card.stack > div > .btn-funke:only-child,form.card.stack .tools .btn-funke,.wrap > p > .btn-funke:only-child{width:100%;justify-content:center}}
.flows{display:grid}
.flows>.flow{grid-area:1/1}
.flow.is-off{visibility:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .flow{transition:opacity .35s ease,visibility 0s linear 0s}
  .flow.is-off{transition:opacity .2s ease,visibility 0s linear .2s}
}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;counter-reset:s;list-style:none;padding:0}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step::before{counter-increment:s;content:counter(s);font-family:var(--display);font-size:42px;font-weight:500;font-style:italic;color:var(--funke);line-height:1;display:block;margin-bottom:8px}
.step h3{font-size:20px}
.step p{color:var(--ink-2);font-size:17px;margin-top:8px}

/* Weser-Band */
.band{position:relative;margin-top:8px}
.band-pic{border-radius:0;aspect-ratio:21/8;object-position:center 60%}
.band .over{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(to top,rgba(11,42,45,.55),transparent 55%)}
.band .over .wrap{width:100%;padding-block:24px}
.band .card{background:var(--night);color:var(--night-ink);border:0;padding:16px 24px;max-width:34em;font-size:17px}
.band .card b{font-family:var(--display);font-size:24px;font-weight:600;display:block;margin-bottom:4px}

/* Warum anders */
.why{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start;margin-top:28px}
.rules{display:grid;grid-template-columns:1fr;gap:16px}
.rule{padding:20px 24px;border-left:3px solid var(--gold);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.rule h3{font-size:20px}
.rule p{color:var(--ink-2);margin-top:8px;font-size:17px}

/* Preise */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px}
.price-card.lead{border-color:var(--funke);box-shadow:0 0 0 1px var(--funke)}
.price-card .amount{font-family:var(--display);font-size:42px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-card .amount small{font:400 17px var(--body);color:var(--ink-3)}
.price-card ul{margin:8px 0 0;padding-left:16px;color:var(--ink-2);font-size:17px}
.price-card .tag{align-self:flex-start;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600}

/* Bewertung mit Herzen: Radios in umgekehrter Reihenfolge, damit ~ die Herzen links vom gewaehlten fuellt */
.herzen-feld{border:0;margin:0;padding:0;min-width:0}
.herzen-feld legend{padding:0;margin-bottom:8px;font-weight:600;color:var(--ink)}
.herzen{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.herzen input{position:absolute;opacity:0;width:0;height:0}
.herzen label{cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:8px}
.herzen label::before{content:"♡";font-size:29px;line-height:1;color:var(--gold-text)}
.herzen input:checked~label::before,.herzen label:hover::before,.herzen label:hover~label::before{content:"♥"}
.herzen input:focus-visible+label{outline:2px solid var(--gold);outline-offset:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bewertung{gap:16px}

/* Rattenfaenger als Wasserzeichen (KI-Grafik, rein dekorativ) */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
/* Rattenfaenger als Inline-SVG (wasserzeichen_svg): Farben wie die frueheren Bilder petrol bzw. hell */
.wz{position:absolute;display:block;pointer-events:none}
.hero-wz{left:max(-80px,calc(50% - 700px));bottom:-140px;width:540px;height:898px;color:#134A4E;opacity:.06}
footer.site{position:relative;overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto 640px}   /* erst zeichnen, wenn sichtbar: spart am Handy die Schriftteile fuer die Sprachnamen vor dem ersten Bild (LCP) */
footer.site .wrap{position:relative;z-index:1}
.foot-wz{right:max(-40px,calc(50% - 640px));top:-30px;width:250px;height:416px;color:#F7F2E6;opacity:.07}

:root[data-theme="dark"] .hero-wz{color:#F7F2E6;opacity:.05}
@media (max-width:640px){.hero-wz{left:auto;right:-90px;bottom:auto;top:40px;width:300px;height:499px;opacity:.05}.foot-wz{width:170px;height:283px}}
@media print{.wz{display:none}}

/* Haeufige Fragen */
.faq{margin-top:24px;border-top:1px solid var(--line);max-width:780px}
/* Haeufige Fragen in drei Themen nebeneinander, am Handy untereinander */
.faq-gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 36px;margin-top:8px;align-items:start}
.faq-gruppen .faq{margin-top:16px;max-width:none}
.faq-gruppen .faq h3{font:600 24px var(--display);color:var(--ink);margin:0;padding:16px 0 8px}   /* normale Zwischenueberschrift, keine kleine Versalzeile */
.faq-gruppen .faq summary{font-size:17px;padding:16px 32px 16px 0}
@media (max-width:900px){.faq-gruppen{grid-template-columns:minmax(0,1fr)}}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;font-family:var(--display);font-size:20px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 24px var(--body);color:var(--gold-text)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding:0 0 16px;max-width:62ch}

/* Sprunglink fuer Tastatur und Screenreader */
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--night);color:var(--night-ink);padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* Fuss */
footer.site{background:var(--night);color:var(--night-ink);margin-top:48px}
footer.site .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-block:40px;font-size:14px}
footer.site .foot-mark{font-family:var(--display);font-size:24px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:8px}
footer.site .foot-mark svg{width:20px;height:20px;color:var(--gold)}
footer.site h3{font:600 14px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;opacity:.9}
footer.site ul a{text-decoration:none}
footer.site ul a:hover{text-decoration:underline}
footer.site p{opacity:.8;max-width:34em}
footer.site .madeby{margin-top:16px;opacity:1}
footer.site .madeby b{font-weight:600}
footer.site .heart{color:var(--gold)}

/* ---------- Formulare ---------- */
.apply{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-top:28px;overflow:hidden}
.apply-head{display:flex;border-bottom:1px solid var(--line)}
.apply-head div{flex:1;padding:16px 16px;font-size:14px;color:var(--ink-3);border-right:1px solid var(--line)}
.apply-head div:last-child{border-right:0}
.apply-head div b{display:block;color:var(--ink);font-weight:600}
.apply-head div.on{background:var(--surface-2);color:var(--gold-text)}
.apply-body{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding:24px}
.apply-foot{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2);min-width:0}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea,.main input:not([type=checkbox]):not([type=radio]):not([type=file]),.main select,.main textarea{font:400 17px var(--body);padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink);max-width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.main input:focus-visible,.main select:focus-visible,.main textarea:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.field .hint{font-size:17px;color:var(--ink-3)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--crit)}
.field .msg{font-size:17px;font-weight:600;color:var(--crit)}
.iban-hinweis{font-size:14px;min-height:0}
.iban-hinweis.ok{color:var(--ok)}
.iban-hinweis.fehler{color:var(--crit)}
.feld-hinweis{font-size:14px}
.feld-hinweis.ok{color:var(--ok)}
.feld-hinweis.fehler{color:var(--crit)}
.feld-hinweis.tipp{color:var(--warn)}
.feld-vorschlag{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--teal);text-decoration:underline;cursor:pointer}
[data-iban]{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--ink-2);background:var(--surface)}
.chips input:checked+.chip{background:var(--teal);color:var(--on);border-color:var(--teal)}
.chips input:focus-visible+.chip{outline:2px solid var(--gold);outline-offset:2px}
.upload{border:2px dashed var(--line);border-radius:8px;padding:16px;text-align:center;color:var(--ink-2);font-size:14px}
.upload input{display:block;margin:8px auto 0;max-width:100%}
.check{display:flex;gap:8px;align-items:flex-start;font-size:17px;color:var(--ink-2)}
.check input{margin-top:4px;width:18px;height:18px;flex:none}
.prose{max-width:70ch;line-height:1.65}
.prose h2{font-size:29px;margin-top:44px}
.prose h3{font-size:20px;margin-top:24px}
.prose p,.prose li{margin-top:8px;color:var(--ink-2)}
.prose p:first-child{margin-top:0}
/* Zahlungsseite im Checkout-Aufbau: Zahlarten links, Uebersicht rechts (am Handy oben zum Aufklappen) */
.kasse{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:start}
.kasse-form{display:grid;gap:20px;order:1;min-width:0}
.kasse-summe{order:2;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:16px;position:sticky;top:20px;min-width:0}
section.block .kasse-titel{font-size:24px}
.kasse-unter{color:var(--ink-3);font-size:14px;margin-top:4px}
.kasse-wahl{border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.kasse-opt:first-child,.kasse-opt:first-child .kasse-kopf{border-radius:8px 8px 0 0}
.kasse-opt:last-child{border-radius:0 0 8px 8px}
.kasse-opt:only-child,.kasse-opt:only-child .kasse-kopf{border-radius:8px}
/* Anklickbare Felder heben sich beim Ueberfahren mit einem Schatten ab (wie die Knoepfe) */
@media (hover:hover){
  .kasse-opt,.kasse-einwilligung,.kasse-form .field input,.kasse-gutschein input{transition:box-shadow .18s ease}
  .kasse-opt:not(.off):hover{position:relative;z-index:1;box-shadow:0 4px 16px rgba(20,30,32,.16)}
  .kasse-einwilligung:hover,.kasse-form .field input:hover,.kasse-gutschein input:hover{box-shadow:0 4px 14px rgba(20,30,32,.12)}
  :root[data-theme="dark"] .kasse-opt:not(.off):hover,:root[data-theme="dark"] .kasse-einwilligung:hover,:root[data-theme="dark"] .kasse-form .field input:hover,:root[data-theme="dark"] .kasse-gutschein input:hover{box-shadow:0 4px 16px rgba(0,0,0,.45)}
}
.kasse-opt+.kasse-opt{border-top:1px solid var(--line)}
.kasse-kopf{display:flex;align-items:center;gap:12px;padding:16px 16px;cursor:pointer}
.kasse-kopf input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;flex:none;border:2px solid #9AA8A6;border-radius:50%;background:#FFFFFF;cursor:inherit}
.kasse-kopf input:checked{border-color:var(--teal);background:radial-gradient(circle,var(--teal) 0 4.5px,#FFFFFF 5px)}
.kasse-kopf input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.kasse-kopf input:disabled{background:#EEF0EF}
.kasse-form .check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:2px;border:2px solid #9AA8A6;border-radius:4px;background:#FFFFFF;cursor:pointer}
.kasse-form .check input:checked{border-color:var(--teal);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.kasse-form .check input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.kasse-name{font-weight:600;flex:1;color:var(--ink);min-width:0}
.kasse-zusatz{font-size:14px;color:var(--ink-3)}
/* Schmal: Zusatz in eine eigene Zeile unter den Namen, damit der Name nicht Buchstabe fuer Buchstabe umbricht */
@media (max-width:640px){.kasse-kopf{flex-wrap:wrap;row-gap:2px}.kasse-name{flex:1 1 9em}.kasse-zusatz{flex-basis:100%;padding-left:32px}}
.kasse-pp{height:22px;width:auto;display:block}
.kasse-pp-dunkel,:root[data-theme="dark"] .kasse-pp-hell{display:none}
:root[data-theme="dark"] .kasse-pp-dunkel{display:block}
.kasse-zeichen{width:24px;height:24px;color:var(--ink-3);flex:none}
.kasse-opt:has(input:checked){background:color-mix(in srgb,var(--teal) 8%,var(--surface))}
.kasse-opt:has(input:checked) .kasse-kopf{box-shadow:inset 0 0 0 2px var(--teal)}
.kasse-inhalt{display:none;padding:2px 16px 16px 48px;gap:12px;font-size:14px;color:var(--ink-2)}
.kasse-opt:has(input:checked) .kasse-inhalt{display:grid}
.kasse-opt.off{opacity:.6}
.kasse-opt.off .kasse-kopf{cursor:default}
.kasse-einwilligung{border:1px solid var(--line);border-radius:8px;padding:16px 16px;background:var(--surface);display:grid;gap:8px}
.kasse-einwilligung>p{font-size:14px;color:var(--ink-3)}
.kasse-einwilligung.err{border-color:var(--crit)}
/* Der ganze Kasten setzt das Haekchen: die Klickflaeche des Labels liegt ueber dem Kasten, der Link bleibt darueber */
.kasse-einwilligung{position:relative;cursor:pointer}
.kasse-einwilligung .check::after{content:"";position:absolute;inset:0;border-radius:8px}
.kasse-einwilligung a{position:relative;z-index:1}
.kasse-vorab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;font-size:14px;color:var(--ink-2);margin-bottom:-8px}
.kasse-vorab b{color:var(--ink);font-size:17px;white-space:nowrap}
.kasse-vorab small{font-weight:400;font-size:14px;color:var(--ink-3)}
.kasse-knopf{width:100%;justify-content:center;padding:16px 20px;font-size:17px;background:var(--gold);color:#1B2426;font-weight:700}
@media (hover:hover){.btn.kasse-knopf:hover{box-shadow:0 8px 22px color-mix(in srgb,var(--gold) 45%,transparent)}}
/* Der Knopf nennt die gewaehlte Zahlart (ohne Skript, damit die Uebersetzung greift) */
.kasse-knopf span{display:none}
.kasse-form:has(input[value=gutschein]:checked) .kasse-k-gutschein,.kasse-form:has(input[value=guthaben]:checked) .kasse-k-guthaben,.kasse-form:has(input[value=paypal]:checked) .kasse-k-paypal,.kasse-form:has(input[value=lastschrift]:checked) .kasse-k-lastschrift,.kasse-form:has(input[value=ueberweisung]:checked) .kasse-k-ueberweisung{display:inline}
.kasse-auf-offen,.kasse-summe:not(.zu) .kasse-auf-zu{display:none}
/* Termin-Gutschein gewaehlt: Gesamt 0 und Gutschein-Zeile, sonst der normale Betrag */
.kasse-nur-gs{display:none}
.kasse:has(input[value=gutschein]:checked) .kasse-nur-gs{display:inline}
.kasse:has(input[value=gutschein]:checked) div.kasse-nur-gs{display:flex}
.kasse:has(input[value=gutschein]:checked) .kasse-ohne-gs{display:none}
.kasse-summe:not(.zu) .kasse-auf-offen{display:inline}
.kasse-fein{font-size:14px;color:var(--ink-3)}
.kasse-produkt{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}
.kasse-bild img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.kasse-produkt b{display:block;color:var(--ink)}
.kasse-produkt small{display:block;font-size:14px;color:var(--ink-3)}
.kasse-preis,.kasse-zeilen span:last-child,.kasse-gesamt span{font-variant-numeric:tabular-nums;white-space:nowrap}
.kasse-posten{display:grid;gap:16px}
.kasse-zeilen{display:grid;gap:8px;font-size:14px}
.kasse-zeilen>div{display:flex;justify-content:space-between;gap:12px}
.kasse-zeilen .leise{color:var(--ink-3);font-size:14px}
.kasse-gesamt{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:16px}
.kasse-gesamt b{font-size:20px}
.kasse-gesamt span{font-size:24px;font-weight:600}
.kasse-gesamt small{font-size:14px;font-weight:400;color:var(--ink-3);margin-right:4px}
.kasse-gutschein{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.kasse-gutschein input{font:400 17px var(--body);padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.kasse-gutschein input:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.kasse-auf{display:none}
@media (max-width:860px){
  .kasse{grid-template-columns:minmax(0,1fr);gap:24px}
  .kasse-summe{order:0;position:static;padding:0 16px 16px;gap:16px}
  .kasse-auf{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 0 0;background:none;border:0;font:600 14px var(--body);color:var(--teal);cursor:pointer}
  .kasse-auf b{color:var(--ink);font-size:17px}
  .kasse-summe.zu .kasse-posten{display:none}
  .kasse-inhalt{padding-left:16px}
}

/* ---------- Admin ---------- */
.admin{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--surface-2);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .mark{font-size:20px;padding:4px 8px 16px}
.side .mark-img{width:52px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px;border-radius:8px;text-decoration:none;font-size:14px;color:var(--ink-2);white-space:nowrap}
.side a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.side a.on{background:var(--night);color:var(--night-ink)}
/* Menuepunkte mit Symbol: Symbol, Text, Zaehler rechts */
.side a.mit-ic{justify-content:flex-start;gap:8px}
.side a.mit-ic .count{margin-left:auto}
.side-ic{flex:none;opacity:.8}
.side a:hover .side-ic,.side a.on .side-ic{opacity:1}
.side .count{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--funke);color:var(--funke-ink);border-radius:999px;padding:1px 8px}
.side .count.quiet{background:color-mix(in srgb,var(--ink) 12%,transparent);color:inherit}
.side .me{margin-top:auto;font-size:14px;color:var(--ink-3);padding:8px}
.main{padding:24px 28px;display:grid;gap:24px;align-content:start;min-width:0}
.main>*{min-width:0}
.main h2{font-size:29px;letter-spacing:-.015em}
.admin-login{max-width:400px;margin:60px auto;padding-inline:16px}
.admin .main .card{margin:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px}
.kpi .n{font-family:var(--display);font-size:35px;font-variant-numeric:tabular-nums;line-height:1}
.kpi .l{font-size:14px;color:var(--ink-3);margin-top:4px}
.kpi.hot{border-color:var(--funke)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px;border-bottom:1px solid var(--line);gap:8px 12px;flex-wrap:wrap}
.panel-head h3{font-size:20px}
.pruef{display:grid;grid-template-columns:200px 200px minmax(0,1fr);gap:20px;padding:16px}
.photo{border-radius:8px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden;min-height:120px;color:var(--ink-3);font-size:14px}
.photo img{width:100%;display:block}
.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 8px;font-size:12px;background:rgba(0,0,0,.55);color:#fff}
.profilfoto{width:96px;height:96px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:var(--surface-2);display:block}
.profilfoto.klein{width:40px;height:40px;border-radius:50%}
.person{display:flex;gap:16px;align-items:flex-start}
.answers{display:grid;gap:8px;font-size:14px;align-content:start;min-width:0}
.answers dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 12px;margin:0}
.answers dt{color:var(--ink-3)}
.answers dd{margin:0}
.q{padding:8px 12px;background:var(--surface-2);border-radius:8px;color:var(--ink-2);font-size:14px}
.q b{color:var(--ink);display:block;font-weight:600;margin-bottom:2px}
.actions{display:flex;gap:8px;padding:16px 16px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
.actions .fine{margin-left:auto}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:8px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
.plan-meta{display:flex;gap:8px 16px;padding:12px 16px;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.plan-meta b{color:var(--ink);font-weight:600}
.main form.filter{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.main form.filter .field{min-width:160px}
.score{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums}
.reasons{font-size:14px;color:var(--ink-3);min-width:220px}
textarea.wide{width:100%;min-height:120px}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;padding-block:32px 48px}
  .hero-fig{justify-self:start;max-width:none}
  .hero-pic.pic.r45{aspect-ratio:4/3;object-position:center 35%}
  .hero-fig::before{inset:12px -10px -12px 12px}
  .steps{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .why>.ki,.why>.bild{display:none}
  .pricing,.two,.apply-body,.grid2,.pay-opts{grid-template-columns:1fr}
  footer.site .wrap{grid-template-columns:1fr 1fr}
  footer.site .wrap>div:first-child{grid-column:1/-1}
  .band-pic{aspect-ratio:16/9}
  .band .over{position:static;background:none}
  .band .over .wrap{padding-block:0}
  .band .card{margin-top:12px;position:relative}  /* unter dem Foto, damit das Wasser frei bleibt (Wellen, weser.js) */

  /* Admin: Navigation als waagerechte Leiste oben */
  .admin{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .side .mark{padding:0 8px 0 0;font-size:0;flex:none}
  .side .mark-img{width:40px}
  .side-knopf{display:inline-flex}
  .side-inhalt{display:none;flex-basis:100%;max-height:calc(100vh - 70px);overflow-y:auto;padding-bottom:8px}
  .side.offen .side-inhalt{display:flex}
  .side .me{display:none}
  .main{padding:16px 16px;gap:20px}
  .kpis{grid-template-columns:1fr 1fr}
  .pruef{grid-template-columns:1fr 1fr}
  .pruef .answers{grid-column:1/-1}
}

/* ---------- Handy ---------- */
@media (max-width:640px){
  body{font-size:17px}
  .site-head .wrap{min-height:64px}
  .site-head nav{display:none}
  .menu{display:block}
  .mark{font-size:24px}
  .mark-img{width:52px}
  .hero h1{font-size:42px}
  .hero .lead{font-size:17px;margin-top:16px}
  .cta-row{margin-top:24px}
  .cta-row .btn{width:100%}
  .nextbar .wrap{display:grid;gap:4px;padding-block:16px}
  .nextbar .btn{margin:8px 0 0;width:100%}
  section.block{padding-block:40px}

  /* Wegwahl untereinander, kompakt: Bild links, Text rechts */
  .ways{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .way{grid-template-columns:104px 1fr;grid-template-rows:1fr}
  .way .ki,.way .bild,.way .pic{height:100%}
  .way .pic{aspect-ratio:auto;position:absolute;inset:0}
  .way .ki::after{content:"KI";right:6px;bottom:6px;padding:1px 8px}
  html[lang="en"] .way .ki::after,html[lang="vi"] .way .ki::after{content:"AI"}html[lang="uk"] .way .ki::after{content:"ШІ"}html[lang="ru"] .way .ki::after{content:"ИИ"}html[lang="tr"] .way .ki::after{content:"YZ"}
  .way .body{padding:16px 16px}
  .way h3{font-size:20px;margin-top:4px}
  .way p{font-size:14px;margin-top:4px}
  .way .body .eyebrow{font-size:12px}
  .way h3{font-size:24px}
  .way .row{padding-top:8px}
  .way .amount{font-size:20px}
  .way .amount small{font-size:14px}
  .way .choose{display:none}

  .flow-switch{display:flex;width:100%}
  .flow-switch button{flex:1;padding:8px 8px}
  .steps{grid-template-columns:1fr;gap:8px}
  .step{display:grid;grid-template-columns:44px 1fr;gap:0 8px;padding:16px}
  .step::before{grid-row:span 2;font-size:35px;margin:0}
  .step h3{font-size:17px}
  .step p{margin-top:2px;font-size:14px}
  .rule{padding:16px 16px}
  .price-card{padding:20px}
  .price-card .amount{font-size:35px}
  footer.site .wrap{grid-template-columns:1fr}

  .apply-head div{padding:8px 12px;font-size:14px}
  .apply-head div:not(.on){flex:0 0 auto}
  .apply-head div:not(.on) span{display:none}
  .apply-body{padding:16px 16px}
  .apply-foot{padding:16px 16px}
  .apply-foot>div{width:100%}
  .apply-foot .btn{flex:1}

  .pruef{grid-template-columns:1fr}
  .answers dl{grid-template-columns:1fr}
  .answers dt{margin-top:8px}
  .actions .fine{display:none}
  .actions input{flex-basis:100%}
  .actions .btn{flex:1}
  .panel-head{padding:12px 16px}
  td,th{padding:8px 8px}
}

:root[data-theme="dark"] .mark-img{filter:brightness(1.7) saturate(.9)}

/* Partnerlokale auf der Startseite */
.lokale{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-auto-rows:1fr;gap:12px}
.lokale li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px;display:grid;gap:2px}
.lokale li b{font-family:var(--display);font-size:20px;font-weight:600}
.lokale li a{text-decoration:none}
.lokale li span{color:var(--ink-3);font-size:14px}

/* Eckdaten einer Person im Admin: klar getrennt */
.eck{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.eck span{display:inline-flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-weight:600;font-size:14px;color:var(--ink);line-height:1.25}
.eck small{font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* Alles Anklickbare hebt sich beim Ueberfahren leicht ab */
@media (hover:hover){
  .btn,.way,.chip,.lokale li,.faq summary,.side a,.menu .drop a,.site-head nav a,.theme-toggle,.flow-switch button,.price-card,.step,.rule{transition:box-shadow .18s ease,transform .18s ease,background-color .18s ease,color .18s ease}
  .btn:hover{box-shadow:0 4px 14px rgba(28,49,52,.18)}
  .way:hover,.lokale li:hover{box-shadow:0 8px 24px rgba(28,49,52,.14);transform:translateY(-2px)}
  .way[aria-checked="true"]:hover{box-shadow:0 0 0 1px var(--gold),0 8px 24px rgba(28,49,52,.16)}
  .chip:hover,.flow-switch button:hover,.theme-toggle:hover{box-shadow:0 2px 8px rgba(28,49,52,.14)}
  .faq summary:hover{color:var(--gold-text)}
  .side a:hover,.menu .drop a:hover{box-shadow:0 2px 8px rgba(28,49,52,.10)}
  .site-head nav a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
  td a:hover,.prose a:hover,footer.site ul a:hover{text-decoration-color:var(--gold)}
}
@media (prefers-reduced-motion:reduce){.way:hover,.lokale li:hover{transform:none}}

/* Dunkelmodus nur auf Wunsch (Schalter im Kopf), Standard bleibt hell */
:root[data-theme="dark"]{color-scheme:dark}
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;padding:0}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .sonne{display:none}
:root[data-theme="dark"] .theme-toggle .mond{display:none}
:root[data-theme="dark"] .theme-toggle .sonne{display:block}
.kopf-rechts{display:flex;align-items:center;gap:8px}
.side .theme-toggle{margin:4px 8px;width:36px;height:36px;color:inherit}

/* Bildfenster im Admin: Bilder nebeneinander, zoombar */
dialog.bildfenster{width:min(1400px,96vw);height:min(92vh,1000px);max-width:none;max-height:none;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.bildfenster[open]{display:flex;flex-direction:column}
dialog.bildfenster::backdrop{background:rgba(11,30,32,.7)}
.bf-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line)}
.bf-kopf .bf-zu{margin-left:auto}
.bf-reihe{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:8px;min-height:0}
.bf-bild{display:flex;flex-direction:column;min-height:0;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bf-flaeche{flex:1;min-height:0;overflow:hidden;background:#1b1f20;display:grid;place-items:center;cursor:grab;touch-action:none}
.bf-flaeche:active{cursor:grabbing}
.bf-flaeche img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none}
.bf-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 8px;border-top:1px solid var(--line)}
.bf-leiste .tools{margin:0}
@media (max-width:760px){.bf-reihe{grid-auto-flow:row;grid-auto-rows:1fr;grid-auto-columns:auto}dialog.bildfenster{width:100vw;height:100dvh;border-radius:0}}

/* Tischkarte im Admin */
.tischkarte{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:16px;display:grid;gap:12px}
.tk-kopf{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.tk-raum{display:grid;grid-template-columns:repeat(var(--oben),minmax(92px,1fr));gap:8px;max-width:760px;margin-inline:auto;width:100%}
.tk-platte{background:linear-gradient(180deg,#b9895a,#9c6f45);border-radius:12px;min-height:70px;display:grid;place-items:center;color:#fff8ee;font-family:var(--display);font-style:italic;box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}
.tk-n2 .tk-raum{grid-template-columns:minmax(120px,220px);justify-content:center}
.tk-platz{border:2px dashed var(--line);border-radius:12px;min-height:118px;display:grid;grid-template-rows:auto 1fr;gap:4px;padding:8px;background:var(--surface);cursor:pointer;text-align:center}
.tk-platz .tk-nr{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tk-platz.besetzt{border-style:solid;border-color:var(--teal)}
.tk-platz.drueber,.tk-pool.drueber{outline:3px solid var(--gold);outline-offset:2px}
.tischkarte.waehlt .tk-platz:not(.besetzt){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.tk-sitz{display:grid;place-items:center}
.tk-pool{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:70px;border:1px dashed var(--line);border-radius:12px;padding:8px;background:var(--surface)}
.tk-bank{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;width:100%}
.tk-person{display:grid;justify-items:center;gap:4px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px;cursor:grab;font:600 14px var(--body);color:var(--ink);width:92px}
.tk-person img,.tk-init{width:62px;height:62px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--surface-2);font-family:var(--display);font-size:24px;color:var(--teal)}
.tk-person.gewaehlt{outline:3px solid var(--gold);outline-offset:1px}
.tk-sitz .tk-person{border-color:transparent;background:transparent}
@media (max-width:640px){.tk-raum{grid-template-columns:repeat(var(--oben),minmax(70px,1fr));gap:8px}.tk-person{width:74px}.tk-person img,.tk-init{width:48px;height:48px}.tk-platz{min-height:96px}}
.termin-frage{display:grid;gap:8px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
details.inline{display:inline-block}
details.inline>summary{list-style:none}
details.inline>summary::-webkit-details-marker{display:none}

/* Geschlecht farbig: blau Mann, rose Frau, grau divers bzw. alle */
:root{--g-m:#2F6BB0;--g-f:#AD3A6B;--g-d:#5C6569}
:root[data-theme="dark"]{--g-m:#7FB0EA;--g-f:#EE8DB5;--g-d:#A7B0B3}
.g{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid currentColor;line-height:1.5}
.g-m{color:var(--g-m);background:color-mix(in srgb,var(--g-m) 10%,transparent)}
.g-f{color:var(--g-f);background:color-mix(in srgb,var(--g-f) 10%,transparent)}
.g-d{color:var(--g-d);background:color-mix(in srgb,var(--g-d) 10%,transparent)}
.eck span.g-m{border-color:var(--g-m);color:var(--g-m)}
.eck span.g-f{border-color:var(--g-f);color:var(--g-f)}
.eck span.g-d{border-color:var(--g-d);color:var(--g-d)}
.eck span.g-m small,.eck span.g-f small,.eck span.g-d small{color:inherit;opacity:.85}
.tk-person.tk-g-m img,.tk-person.tk-g-m .tk-init{box-shadow:0 0 0 3px var(--g-m)}
.tk-person.tk-g-f img,.tk-person.tk-g-f .tk-init{box-shadow:0 0 0 3px var(--g-f)}
.tk-person.tk-g-d img,.tk-person.tk-g-d .tk-init{box-shadow:0 0 0 3px var(--g-d)}

/* Ganze Tabellenzeile klickbar (public/assets/admin.js) */
tr.klickbar{cursor:pointer}
tr.klickbar:hover td{background:color-mix(in srgb,var(--gold) 9%,var(--surface))}

/* ---------- Admin: Post im Aufbau von Outlook (Ordner | Liste | Lesebereich) ---------- */
.mail-app{display:grid;grid-template-columns:220px minmax(260px,360px) minmax(0,1fr);height:calc(100vh - 120px);min-height:560px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.mail-ordner{background:var(--surface-2);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.mail-neu{justify-content:center;margin:0 4px 8px}
.mail-konto{font-size:12px;color:var(--ink-3);padding:4px 8px;word-break:break-all}
.mail-ordner nav{display:flex;flex-direction:column;gap:1px}
.mail-ordner nav a{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:14px}
.mail-ordner nav a:hover{background:var(--surface)}
.mail-ordner nav a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--teal)}
.mail-ordner nav a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-ordner nav a b{font-size:12px;color:var(--teal);font-variant-numeric:tabular-nums}
.mail-ordner nav a.neu span{font-weight:600;color:var(--ink)}
.mail-ordner nav a i{font-style:normal;font-size:12px;color:var(--ink-3)}
.mail-ordner hr{border:0;border-top:1px solid var(--line);margin:8px 8px}
.mail-modus{margin-top:auto;padding:8px 8px}
.mail-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mail-liste{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.mail-liste-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:12px 16px 8px}
.mail-liste-kopf h2{font-size:20px}
.mail-liste-kopf form{margin-left:auto}
.mail-suche{display:flex;gap:8px;padding:4px 12px 8px;border-bottom:1px solid var(--line)}
.mail-suche input{flex:1;min-width:0;font:400 14px var(--body);padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink)}
.mail-zeilen{overflow-y:auto;flex:1}
.mail-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"von zeit" "betreff zeichen";gap:2px 8px;padding:8px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-2);font-size:14px;border-left:3px solid transparent}
.mail-zeile:hover{background:var(--surface-2)}
.mail-zeile.aktiv{background:color-mix(in srgb,var(--teal) 12%,var(--surface));border-left-color:var(--teal)}
.mail-zeile.ungelesen{border-left-color:var(--funke)}
.mail-zeile.ungelesen .mz-von,.mail-zeile.ungelesen .mz-betreff{font-weight:700;color:var(--ink)}
.mz-von{grid-area:von;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.mz-zeit{grid-area:zeit;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.mz-betreff{grid-area:betreff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mz-zeichen{grid-area:zeichen;display:flex;gap:4px;align-items:center;color:var(--ink-3)}
.mz-zeichen .mail-ico{width:15px;height:15px}
.mz-flagge{color:var(--gold-text)}
.mz-flagge .mail-ico{width:16px;height:16px;vertical-align:-2px}
.mail-leer{padding:24px 16px;color:var(--ink-3);font-size:14px}
.mail-leer.gross{display:grid;place-items:center;height:100%;text-align:center}
.mail-seiten{display:flex;gap:8px;align-items:center;justify-content:center;padding:8px;border-top:1px solid var(--line)}
.mail-lesen{min-width:0;min-height:0;overflow-y:auto;padding:0 20px 20px;display:flex;flex-direction:column}
.mail-werkzeuge{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;background:var(--surface);border-bottom:1px solid var(--line);margin-bottom:16px}
.mail-knopfreihe{display:contents}
.mail-werkzeuge select{font:400 14px var(--body);padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink)}
.mail-zurueck{display:none}
.mail-hinweis{margin-left:auto}
.mail-kopf h2{font-size:24px;line-height:1.25;margin-bottom:8px}
.mail-kopf dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 16px;font-size:14px}
.mail-kopf dt{color:var(--ink-3)}
.mail-kopf dd{margin:0;word-break:break-word;color:var(--ink)}
.mail-anhaenge{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.chip-datei{display:inline-flex;align-items:center;gap:8px;padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);text-decoration:none;font-size:14px}
.chip-datei:hover{border-color:var(--teal)}
.chip-datei small{color:var(--ink-3)}
.mail-umschalter{margin-bottom:8px}
.mail-text{white-space:pre-wrap;word-wrap:break-word;font-size:14px;line-height:1.6;color:var(--ink)}
.mail-html{width:100%;flex:1;min-height:420px;border:1px solid var(--line);border-radius:8px;background:#fff}
.mail-verfassen{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.mail-felder{display:grid;grid-template-columns:auto 1fr;gap:8px 8px;align-items:center}
.mail-felder label{font-size:14px;color:var(--ink-3);text-align:right}
.mail-felder input,.mail-editor{font:400 14px var(--body);padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink);min-width:0}
.mail-editor{flex:1;min-height:320px;resize:vertical;line-height:1.55}
@media (max-width:1180px){.mail-app{grid-template-columns:190px minmax(0,1fr)}.mail-lesen{display:none}.mail-app.hat-mail .mail-liste,.mail-app.schreibt .mail-liste{display:none}.mail-app.hat-mail .mail-lesen,.mail-app.schreibt .mail-lesen{display:flex}.mail-zurueck{display:inline-flex}}
@media (max-width:760px){.mail-app{grid-template-columns:1fr;height:auto;min-height:0}.mail-ordner{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:center}.mail-ordner nav{flex-direction:row;overflow-x:auto;width:100%}.mail-ordner nav a{white-space:nowrap}.mail-ordner hr,.mail-konto,.mail-modus{display:none}.mail-zeilen{max-height:none}.mail-lesen{padding:0 12px 16px}.mail-felder{grid-template-columns:1fr}.mail-felder label{text-align:left}.mail-hinweis{margin-left:0;width:100%}}

/* ---------- Runde 6: Dates, Dinner, Verlauf, Kalender (24.09.2026) ---------- */
/* Seitenleiste in Gruppen */
.side-gruppe{display:block;margin:16px 0 4px;padding:8px 8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700}
/* Am PC kompakter, damit das ganze Menue auch auf einen Laptop (900 px hoch) passt */
@media (min-width:901px){
  .side{padding-top:16px}
  .side .mark{padding:2px 8px 8px}
  .side a{padding:8px 8px}
  .side-gruppe{margin:8px 0 2px;padding:2px 8px;background:none;color:var(--ink-2);border-top:1px solid var(--line);border-radius:0;padding-top:8px}
}
/* Reiter ueber Listen */
.reiter{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.reiter a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px}
.reiter a:hover{color:var(--ink)}
.reiter a.on{color:var(--ink);border-bottom-color:var(--funke)}
.reiter .count{font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
/* Kopf eines Dates oder Tisches: vier Kacheln */
.date-kopf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.date-kopf>div,.date-kopf>form>div{display:flex;flex-direction:column;gap:4px;padding:16px 16px;background:var(--surface);align-items:flex-start;min-width:0}
.date-kopf>form{display:contents}
.kopf-wert{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.kopf-edit{display:none;flex-direction:column;gap:8px;width:100%}
.kopf-form.bearbeiten .kopf-edit{display:flex}
.kopf-form.bearbeiten .kopf-wert{display:none}
.kopf-edit input,.kopf-edit select{font:inherit;font-size:14px;padding:8px 8px;border:1px solid var(--feldrand,var(--line));border-radius:8px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
.kopf-zeit{display:grid;grid-template-columns:1fr auto;gap:8px}
.kopf-zeit input[type=time]{width:auto}
.kopf-edit .chips{display:flex;flex-wrap:wrap;gap:4px}
.kopf-edit .chip{font-size:12px;padding:2px 8px}
.kopf-stift{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:8px;vertical-align:middle;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:0;cursor:pointer}
.kopf-stift:hover,.kopf-stift:focus-visible{color:var(--teal);border-color:var(--teal)}
.kopf-form.bearbeiten small .kopf-aendern{display:none}
.date-kopf small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.date-kopf b{font-size:17px}
/* Naechster Schritt */
.naechster{padding:12px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.naechster-warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.naechster-crit{border-color:color-mix(in srgb,var(--crit) 45%,var(--line));background:color-mix(in srgb,var(--crit) 8%,var(--surface))}
.naechster-ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.naechster>.btn:last-child{margin-left:auto}
.warnbox{margin:16px 16px;padding:8px 16px;border-radius:8px;background:color-mix(in srgb,var(--warn) 10%,var(--surface));color:var(--ink);display:grid;gap:4px;font-size:14px}
/* Farbpunkt fuer Stand */
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;flex:none;background:var(--ink-3)}
.punkt-ok{background:var(--ok)}.punkt-warn{background:var(--warn)}.punkt-crit{background:var(--crit)}.punkt-info{background:var(--teal)}
/* Liste der laufenden Dates: je Date eine Gruppe aus zwei Personenzeilen */
.date-liste td{vertical-align:top}
.date-liste tbody.date-gruppe{border-top:2px solid var(--line)}
.date-liste tbody.date-gruppe:hover td{background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.date-liste .dl-wann a{text-decoration:none;color:var(--ink)}
.date-liste .dl-person{font-weight:600;white-space:nowrap}
.date-liste .dl-schritt{font-size:14px;color:var(--ink-2);min-width:200px;max-width:320px}
.date-liste td .fine,.stand td .fine{font-size:12px;margin-top:2px}
.stand td{vertical-align:top}
.person-klein{display:flex;gap:8px;align-items:center}
.wahl-liste tr.gewaehlt td{background:var(--surface-2)}
.check-klein{display:inline-flex;gap:8px;align-items:center;font-size:14px}
/* Verlauf */
.verlauf{list-style:none;margin:0;padding:8px 0}
.verlauf li{display:grid;grid-template-columns:28px 128px 150px minmax(0,1fr);gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);font-size:14px;align-items:baseline}
.verlauf li:last-child{border-bottom:0}
.vl-sym{text-align:center;color:var(--ink-3);font-size:14px}
.vl-zeit{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.vl-wer{font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.vl-mail .vl-sym,.vl-mail .vl-wer{color:var(--teal)}
.vl-lokal .vl-sym,.vl-lokal .vl-wer{color:var(--gold-text)}
.vl-nutzer .vl-sym{color:var(--ok)}
.vl-geld .vl-sym{color:var(--gold)}
.verlauf details summary{cursor:pointer}
.vl-mail{margin-top:8px;display:grid;gap:8px}
/* Zu tun */
.todo{list-style:none;margin:0;padding:0}
.todo li{border-bottom:1px solid var(--line)}
.todo li:last-child{border-bottom:0}
.todo a{display:flex;align-items:center;padding:12px 16px;text-decoration:none;color:var(--ink);font-size:14px}
.todo a:hover{background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
/* Gruppen-Dinner: Abende mit Tischen */
.abend-vorbei{opacity:.75}
.tische{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:16px 16px}
.tisch-karte{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--ground)}
.tisch-karte:hover{border-color:var(--teal)}
.tk-titel{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.tisch-balken{display:flex;gap:4px}
.tisch-balken i{flex:1;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.tisch-balken i.halb{background:color-mix(in srgb,var(--warn) 55%,transparent)}
.tisch-balken i.zu{background:var(--ok)}
/* Kalender fuer freie Abende */
.abend-kalender{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-width:520px}
.ak-kopf{font-size:12px;font-weight:600;color:var(--ink-3);text-align:center;letter-spacing:.06em}
.ak-tag{position:relative;display:block;cursor:pointer}
.ak-tag input{position:absolute;opacity:0;width:0;height:0}
.ak-tag span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);font-size:14px;font-variant-numeric:tabular-nums}
.ak-tag input:checked+span{background:var(--teal);border-color:var(--teal);color:var(--on);font-weight:600}
.ak-tag input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.ak-tag.ak-fest{cursor:default}
.ak-tag.ak-fest input:checked+span{background:color-mix(in srgb,var(--teal) 55%,var(--surface));border-color:transparent}
.ak-vorbei{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;color:var(--ink-3);opacity:.45}
.hinweis-karte{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
/* Pause, vergeben, loeschen */
.pause-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pause-option{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--ground)}
.pause-option .tools,.pause-option form{margin-top:auto}
.btn-gefahr{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
/* Lokal bestaetigt die Reservierung */
.res-karte{margin-top:20px;display:grid;gap:16px}
.res-daten{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 16px;margin:0;font-size:17px}
.res-daten dt{color:var(--ink-3)}
.res-daten dd{margin:0;font-weight:600}
.res-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.res-knoepfe .btn{min-width:200px}
@media (max-width:1180px){.date-kopf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.verlauf li{grid-template-columns:22px minmax(0,1fr)}.vl-zeit,.vl-wer,.vl-was{grid-column:2}.date-kopf{grid-template-columns:1fr}.res-knoepfe .btn{width:100%}.ak-tag span{min-height:36px;font-size:14px}}
/* Uebersicht: Besucher als eine aufklappbare Zeile */
.besucher>summary{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:12px 16px;cursor:pointer;font-size:14px;color:var(--ink-2);list-style:none}
.besucher>summary::-webkit-details-marker{display:none}
.besucher>summary::before{content:"▸";color:var(--ink-3);transition:transform .15s ease}
.besucher[open]>summary::before{transform:rotate(90deg)}
.besucher>summary b{color:var(--ink);font-weight:600}
.besucher>summary .fine{margin-left:auto}
/* Gruppen-Dinner: links neuer Abend, rechts alle Abende */
.dinner-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
.dinner-neu{position:sticky;top:16px}
.dinner-neu .apply-body{padding:16px 16px}
@media (max-width:1100px){.dinner-layout{grid-template-columns:1fr}.dinner-neu{position:static}}
/* Auswahlgruppen in Formularen: fieldset ohne Rahmen, Frage als legend */
fieldset.feldgruppe{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
fieldset.feldgruppe>legend{padding:0;margin:0 0 8px;font-size:14px;color:var(--ink-2)}

/* Kontraste (Pruefung 24.09.2026): Fokus und Feldrahmen deutlich sichtbar */
:root{--feldrand:#8C7D66}
:root[data-theme="dark"]{--feldrand:#7F918D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--feldrand:#7F918D}}
.field input,.field select,.field textarea,.main input:not([type=checkbox]):not([type=radio]):not([type=file]),.main select,.main textarea,.chip,.ak-tag span{border-color:var(--feldrand)}
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.chips input:focus-visible+.chip,.ak-tag input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}


/* Admin: Menue-Knopf (nur schmal sichtbar) und sortierbare Tabellen */
.side-inhalt{display:flex;flex-direction:column;gap:2px;flex:1}
.side-knopf{display:none;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer}
.side-knopf .side-aktiv{font-weight:400;color:var(--ink-2)}
.side-knopf .side-aktiv::after{content:" ·"}
.side-knopf .count{font-size:12px;font-weight:600;background:var(--funke);color:var(--funke-ink);border-radius:999px;padding:1px 8px}
th.sortierbar{cursor:pointer;user-select:none}
th.sortierbar:hover{color:var(--ink)}
th.sortierbar::after{content:"↕";margin-left:4px;opacity:.35;font-size:12px}
th[aria-sort=ascending]::after{content:"▲";opacity:.9}
th[aria-sort=descending]::after{content:"▼";opacity:.9}


/* Tischkarte: Ampel als Rahmen, Hinweisfenster beim Drueberfahren oder Antippen */
.tk-person.tk-a-gruen{border:3px solid var(--ok)}
.tk-person.tk-a-gelb{border:3px solid var(--warn)}
.tk-person.tk-a-rot{border:3px dashed var(--crit)}
.tk-sitz .tk-person.tk-a-gruen{border-color:var(--ok)}
.tk-sitz .tk-person.tk-a-gelb{border-color:var(--warn)}
.tk-sitz .tk-person.tk-a-rot{border-color:var(--crit)}
.tk-bank{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.tk-legende{display:inline-flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-2)}
.tk-legende i{display:inline-block;width:12px;height:12px;border-radius:4px;border:3px solid;margin-left:8px}
.tk-legende i.tk-a-gruen{border-color:var(--ok)}
.tk-legende i.tk-a-gelb{border-color:var(--warn)}
.tk-legende i.tk-a-rot{border-color:var(--crit);border-style:dashed}
.tk-bank-hinweis{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.tk-popup{position:fixed;z-index:50;width:min(300px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px 16px;font:14px/1.45 var(--body);pointer-events:none}
.tk-popup[hidden]{display:none}
.tk-popup .tk-karte-name{display:block;font-size:14px}
.tk-popup .tk-karte-ampel{display:inline-block;margin:4px 0 8px;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;border:2px solid}
.tk-popup .tk-karte-ampel.tk-a-gruen{border-color:var(--ok);color:var(--ok)}
.tk-popup .tk-karte-ampel.tk-a-gelb{border-color:var(--warn);color:var(--warn)}
.tk-popup .tk-karte-ampel.tk-a-rot{border-color:var(--crit);color:var(--crit)}
.tk-popup ul{margin:0 0 8px;padding:0;list-style:none;display:grid;gap:4px}
.tk-popup li{padding-left:16px;position:relative}
.tk-popup li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%}
.tk-popup li.gruen::before{background:var(--ok)}
.tk-popup li.gelb::before{background:var(--warn)}
.tk-popup li.rot::before{background:var(--crit)}
.tk-popup dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:0;font-size:14px}
.tk-popup dt{color:var(--ink-3)}
.tk-popup dd{margin:0}


/* Einstellungen eines Tisches als eine Zeile unter dem Kopf */
.kopf-leiste{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:14px;color:var(--ink-2)}
.kopf-leiste label{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.kopf-leiste input,.kopf-leiste select{font:inherit;font-weight:400;font-size:14px;padding:4px 8px;border:1px solid var(--feldrand,var(--line));border-radius:8px;background:var(--surface);color:var(--ink);min-width:0}
.kopf-leiste input.kurz{width:64px}
.kopf-leiste label.breit{flex:1 1 240px}
.kopf-leiste label.breit input{flex:1}
@media (max-width:760px){.kopf-leiste label,.kopf-leiste label.breit{flex:1 1 100%}.kopf-leiste select{flex:1}}


/* Eingebettete Fenster im Admin (z. B. Tisch reservieren) */
dialog.fenster{width:min(640px,94vw);max-height:90vh;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.fenster::backdrop{background:rgba(11,30,32,.55)}
.fenster-kopf{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;padding:16px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.fenster-kopf b{font-size:17px}
.fenster-kopf .fenster-zu{margin-left:auto}
.date-kopf [data-fenster]{margin-top:4px}
@media (max-width:760px){dialog.fenster{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}}


dialog.fenster-breit{width:min(860px,94vw)}
.fenster-inhalt{padding:16px 16px}
.fenster-zeile{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.fenster-zeile:last-child{border-bottom:0}
.fenster-zeile>div:first-child{flex:1 1 240px}
.fenster-zeile .fine{display:block;margin-top:2px}
.fenster-zeile input{font:400 14px var(--body);padding:8px 8px;border:1px solid var(--feldrand,var(--line));border-radius:8px;background:var(--surface);color:var(--ink)}
.nutzer-knoepfe .btn svg{vertical-align:-2px;margin-right:4px}


/* Nutzer-Detailseite: Knopfleiste, Eckdaten, Steckbrief links, Fragebogen rechts */
.nutzer-leiste{gap:8px}
.nutzer-leiste .nutzer-status{margin-left:auto;gap:8px}
.nutzer-leiste .nutzer-status select{font:400 14px var(--body)!important;padding:8px 8px!important;background:var(--surface)!important}
.date-kopf .umbruch{overflow-wrap:anywhere}
.nutzer-body{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:24px;padding:16px;align-items:start}
.nutzer-steckbrief{display:grid;gap:16px;align-content:start}
.nutzer-person{flex-direction:column}
.nutzer-person .profilfoto{width:120px;height:120px}
.nutzer-fakten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;margin:0;font-size:14px;padding-top:12px;border-top:1px solid var(--line)}
.nutzer-fakten dt{color:var(--ink-3)}
.nutzer-fakten dd{margin:0}
.nutzer-fakten .fine{display:block}
.nutzer-fragebogen{display:grid;gap:12px;align-content:start;min-width:0}
.nutzer-notiz{padding:8px 16px;border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--surface));border-radius:0 8px 8px 0;font-size:14px}
.nutzer-notiz b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.fb-block{background:var(--surface-2);border-radius:8px;padding:2px 16px}
.fb-block .q{background:none;border-radius:0;padding:8px 0;border-bottom:1px solid var(--line)}
.fb-block .q:last-child{border-bottom:0}
@media (max-width:900px){.nutzer-body{grid-template-columns:1fr}.nutzer-leiste .nutzer-status{margin-left:0}}


/* Weserpaare */
.paare{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.paar-karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.paar-bild{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2)}
.paar-ohne-bild{display:grid;place-items:center;color:var(--gold);aspect-ratio:4/3}
.paar-ohne-bild svg{width:56px;height:56px}
.paar-text{padding:16px 16px 20px;display:grid;gap:8px}
.paar-text h3{font-size:24px}
.paar-text p{color:var(--ink-2)}
.sterne{color:var(--gold);letter-spacing:2px;font-size:17px}
.sterne-leer{color:var(--line)}
.sterne-wahl{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.sterne-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.sterne-wahl label{font-size:29px;line-height:1;color:var(--line);cursor:pointer;padding:0 2px}
.sterne-wahl input:checked~label,.sterne-wahl label:hover,.sterne-wahl label:hover~label{color:var(--gold)}
.sterne-wahl input:focus-visible+label{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.paar-admin-inhalt{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;padding:16px 16px;align-items:start}
.paar-admin .paar-karte{border:0}
@media (max-width:760px){.paar-admin-inhalt{grid-template-columns:1fr}}


/* Blind Date: die beiden mit grossem Foto statt Tischkarte */
.profilfoto.gross{width:180px;height:180px;border-radius:12px}
.date-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.date-person{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--surface);min-width:0}
.date-person-name{font-size:17px}
@media (max-width:1100px){.date-person{flex-direction:column}}
@media (max-width:700px){.date-paar{grid-template-columns:1fr}.profilfoto.gross{width:140px;height:140px}}


/* Eingebettete Bilder und Seiten im Admin */
dialog.einbettung{width:min(1100px,96vw)}
dialog.einbettung .fenster-kopf .btn-funke+.fenster-zu{margin-left:0}
.einbettung-bild{display:grid;place-items:center;padding:12px;background:var(--surface-2);cursor:zoom-out}
.einbettung-bild img{max-width:100%;max-height:calc(90vh - 90px);object-fit:contain;border-radius:8px}
.einbettung-seite{display:block;width:100%;height:calc(90vh - 70px);border:0;background:#fff}


/* Fortschritt eines Dates: Match, Termin, Lokal, Date */
.fortschritt{list-style:none;margin:0;padding:16px 16px 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);counter-reset:none}
.fortschritt li{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;padding:0 8px;min-width:0}
.fortschritt li::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.fortschritt li:first-child::before{display:none}
.fortschritt li.fs-ok::before,.fortschritt li.fs-aktiv::before,.fortschritt li.fs-crit::before{background:var(--ok)}
.fs-punkt{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--surface);border:3px solid var(--line);color:var(--ink-3)}
.fs-ok .fs-punkt{background:var(--ok);border-color:var(--ok);color:var(--on)}
.fs-aktiv .fs-punkt{border-color:var(--warn);color:var(--warn)}
.fs-crit .fs-punkt{background:var(--crit);border-color:var(--crit);color:var(--on)}
.fortschritt b{font-size:14px}
.fs-text{font-size:12px;color:var(--ink-2);line-height:1.35;overflow-wrap:anywhere}
.fs-offen b,.fs-offen .fs-text{color:var(--ink-3)}
.fs-crit .fs-text{color:var(--crit);font-weight:600}
@media (max-width:640px){.fortschritt{grid-template-columns:1fr;gap:12px}.fortschritt li{grid-template-columns:34px 1fr;justify-items:start;text-align:left;column-gap:8px}.fortschritt li::before{display:none}.fs-punkt{grid-row:span 2}}


.fortschritt.fs-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.status-erklaerung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;font-size:14px;color:var(--ink-2);padding:8px 16px;border-left:3px solid var(--teal);background:var(--surface);border-radius:0 8px 8px 0}
.status-erklaerung b{color:var(--ink)}
.status-erklaerung{flex-wrap:nowrap}.status-erklaerung .kopf-stift{margin-left:auto;flex:none}
@media (max-width:640px){.fortschritt.fs-5{grid-template-columns:1fr}}


/* Reservierungsfenster: bevorzugter Weg des Lokals */
.res-weg{display:grid;gap:8px;justify-items:start;padding:12px 16px;border-radius:8px;background:var(--surface-2)}
.res-hinweis{font-size:14px;padding:8px 8px;border-left:3px solid var(--gold);background:var(--surface);border-radius:0 4px 4px 0}
.res-andere summary{cursor:pointer}


/* Neuigkeiten auf der Übersicht (statt Mails an Admins) */
.hinweise{list-style:none;margin:0;padding:0}
.hinweise li{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line)}
.hinweise li>div:first-child{flex:1 1 320px;min-width:0}
.hinweis-text{font-size:14px;color:var(--ink-2);margin-top:4px;overflow-wrap:anywhere}

/* Admin-Menue auf schmalen Bildschirmen: steht nach den allgemeinen Regeln, damit es sie ueberschreibt */
@media (max-width:900px){
  .side-knopf{display:inline-flex}
  .side-inhalt{display:none}
  .side.offen .side-inhalt{display:flex}
}
@media (max-width:640px){
  details.inline[open]{display:block;width:100%}
  details.inline form{min-width:0!important;max-width:100%}
}


/* Bewerbung: Abschnitte im Formular, Zugangsdaten untereinander */
.apply-body .formteil{grid-column:1/-1;font-size:17px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.apply-body .formteil:first-of-type{margin-top:0}
.apply-body .zugang{grid-column:1/-1;display:grid;gap:16px;max-width:calc(50% - 12px)}
.von-bis{display:flex;align-items:center;gap:8px}
.von-bis input{width:100%;max-width:120px}
@media (max-width:900px){.apply-body .zugang{max-width:none}}


.apply-body .field.full > select#f-ort,.apply-body .field.full > .wohnort{max-width:calc(50% - 12px)}
@media (max-width:900px){.apply-body .field.full > select#f-ort,.apply-body .field.full > .wohnort{max-width:none}}


/* Geburtsdatum: Tag, Monat, Jahr nebeneinander */
.geb-auswahl{display:grid;grid-template-columns:minmax(4.5em,1fr) minmax(7em,2fr) minmax(5.5em,1.4fr);gap:8px}


/* Das hidden-Attribut gewinnt immer (sonst ueberschreibt z. B. .field{display:flex} es) */
[hidden]{display:none!important}


.tischkarte{overflow-x:auto;max-width:100%}
.tischkarte .tk-raum{min-width:min-content}


/* Designrunde 24.09.: Kundenseite */
.check.err{padding:8px 12px;border:1px solid var(--crit);border-radius:8px;background:color-mix(in srgb,var(--crit) 6%,transparent)}
.check.err input{outline:2px solid var(--crit);outline-offset:2px}
.skala{display:flex;justify-content:space-between;max-width:216px;font-size:12px;color:var(--ink-3);margin-top:2px}
.fortschritt.schritte{padding:16px 12px 12px;background:var(--ground)}
@media (pointer:coarse){.btn-sm{min-height:44px}}
@media (max-width:900px){.site-head nav{display:none}.menu{display:block}}


/* Designrunde 24.09.: Admin */
.side nav.side-nav{display:contents}
@media (pointer:coarse){.kopf-stift{width:44px;height:44px}}
@media (max-width:640px){.status-erklaerung{flex-wrap:wrap}.status-erklaerung .kopf-stift{margin-left:0}}
.nutzer-notiz .kopf-stift{margin-left:4px}
.naechster-warn .btn{margin-left:8px}
.card.erledigt{opacity:.6}
.card.dringend-warn{border-left:4px solid var(--warn)}
.card.dringend-crit{border-left:4px solid var(--crit)}
tr.zeile-warn>td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
tr.zeile-crit>td{background:color-mix(in srgb,var(--crit) 7%,transparent)}
.leer{color:var(--ink-3)}
.panel-innen{padding:16px 16px}
.eingabe-klein{font:400 14px var(--body);padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink)}


/* SEO: echte H1, Aussehen wie vorher */
.hero h1.mit-zeile{margin-top:0}
/* Zweite Zeile im H1: worum es geht, fuer den ersten Blick und die Suche (kein Kicker darueber, sondern darunter) */
.hero h1 .h1-zeile{display:block;margin-top:16px;font:700 clamp(19px,2.1vw,24px)/1.35 var(--body);letter-spacing:0;color:var(--ink)}
.hero h1 .eyebrow{display:block;font-family:var(--body);font-size:14px;line-height:1.55;font-style:normal;margin-bottom:16px}
section.block h1.wie-h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em}


/* Admin am Handy (25.09.): Kopf nicht aufblaehen, Menue unter dem Kopf, Tabellen als Karten */
@media (max-width:900px){
  .admin{grid-template-rows:auto 1fr}
  .side{align-self:start}
  .side-inhalt{flex:1 1 100%}
  .side-knopf{margin-left:auto}
}
@media (max-width:640px){
  .main table.karten thead{display:none}
  .main table.karten,.main table.karten tbody{display:block;width:100%}
  .main table.karten tr{display:block;padding:8px 16px;border-bottom:1px solid var(--line)}
  .main table.karten tbody.date-gruppe{border-bottom:1px solid var(--line);padding:4px 0}
  .main table.karten tbody.date-gruppe tr{border-bottom:0;padding:2px 16px}
  .main table.karten td{display:flow-root;position:relative;border:0;padding:4px 0 4px 36%;text-align:left;min-width:0!important;white-space:normal;overflow-wrap:anywhere}
  .main table.karten td::before{content:attr(data-label);float:left;margin:3px 0 0 -56.25%;width:51.5625%;font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);overflow-wrap:normal}
  .main table.karten td[data-label=""]{padding-left:0}
  .main table.karten td[data-label=""]::before{display:none}
  .main table.karten td:empty{display:none}
  .main table.karten .person-klein{justify-content:flex-start}
  .wahl-liste tr.gewaehlt{background:var(--surface-2)}
  .wahl-liste tr.gewaehlt td{background:none}
  .bf-leiste>b{flex-basis:100%}
  .bf-kopf .fine{display:none}
}


/* 25.09.: Mini-Fotos, Bildfenster, Nutzerseite, Planen in Schritten */
.mini-foto{display:inline-block;width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:-7px;margin-right:8px;background:var(--surface-2);border:1px solid var(--line);font:600 12px/22px var(--body);text-align:center;color:var(--ink-3);text-decoration:none}
a.mit-foto{white-space:nowrap}
.bf-flaeche{display:block;position:relative}
.bf-flaeche img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.ausweis-vorschau{display:flex;flex-direction:column;gap:4px}
.nutzer-person{flex-wrap:wrap}
.schritt-fertig{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.schritt-nr{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:var(--on);font-weight:700;font-size:14px}
.schritt-was{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.schritt-was small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.schritt-was .fine{overflow-wrap:anywhere}


/* Auswahllisten (Date planen) am Handy: kompakte Karte, Name oben, Eckdaten darunter */
@media (max-width:640px){
  .main table.karten-kompakt thead{display:none}
  .main table.karten-kompakt,.main table.karten-kompakt tbody{display:block;width:100%}
  .main table.karten-kompakt tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .main table.karten-kompakt td{border:0;padding:0;font-size:14px;color:var(--ink-2);min-width:0!important}
  .main table.karten-kompakt td:has(a.mit-foto){order:-1;flex-basis:100%;font-size:17px;font-weight:600}
  .main table.karten-kompakt td.reasons{flex-basis:100%;font-size:14px}
  .main table.karten-kompakt td[data-label="letztes Date"]::before{content:"letztes Date: "}
  .main table.karten-kompakt td[data-label="laufend"]::before{content:"laufend: "}
  .main table.karten-kompakt td.score::before{content:"passt zu ";font:400 14px var(--body);color:var(--ink-3)}
  .main table.karten-kompakt td.score{font-size:17px}
  .main table.karten-kompakt td[colspan]{flex-basis:100%}
}


/* Lokal-Wahl als antippbare Karten (Date planen) */
.lokal-wahl legend .fine{display:block;margin-top:2px}
.lokal-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.lokal-karte{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;color:var(--ink);font-size:14px;transition:border-color .15s,box-shadow .15s}
.lokal-karte:hover{border-color:var(--teal)}
.lokal-karte input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lokal-karte:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal);background:color-mix(in srgb,var(--teal) 7%,var(--surface))}
.lokal-karte:has(input:checked)::after{content:"✓ gewählt";position:absolute;top:10px;right:12px;font-size:12px;font-weight:700;color:var(--teal)}
.lokal-karte:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.lk-kopf{display:flex;flex-direction:column;padding-right:72px}
.lk-kopf b{font-size:17px}
.lk-wege{display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.lk-schon{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:8px;padding:4px 8px}
.lk-zuweit{color:var(--warn)}
.lokal-karte.zu-weit:not(:has(input:checked)){opacity:.85}
.lokal-karte.ist-ruhetag:not(:has(input:checked)){opacity:.5}


/* Lokal-Wahl am PC: schlanke Liste statt Karten, eine Zeile je Lokal, Auswahlkreis links */
@media (min-width:641px){
  .lokal-karten{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
  .lokal-karte{display:grid;grid-template-columns:18px minmax(0,210px) minmax(0,220px) minmax(0,1fr) minmax(0,190px);column-gap:16px;align-items:center;padding:8px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none!important;font-size:14px}
  .lokal-karte:last-child{border-bottom:0}
  .lokal-karte:hover{background:color-mix(in srgb,var(--teal) 4%,var(--surface))}
  .lokal-karte::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--feldrand);box-sizing:border-box}
  .lokal-karte:has(input:checked)::before{border-color:var(--teal);background:radial-gradient(circle,var(--teal) 0 3.5px,transparent 4px)}
  .lokal-karte:has(input:checked)::after{content:none}
  .lokal-karte .pill.ok{display:none}
  .lokal-karte .pill{white-space:normal;text-align:left;line-height:1.3}   /* lange Kuechen-Texte brechen um statt in die Nachbarspalte zu laufen (20.10.2026) */
  .lokal-karte>span{min-width:0;overflow-wrap:break-word}
  .lk-kopf{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding-right:0;min-width:0}
  .lk-kopf b{font-size:14px}
  .lk-wege{flex-direction:row;flex-wrap:wrap;gap:2px 16px;font-size:14px}
  .lk-wege .mini-foto{display:none}
  .lokal-karte>.fine{font-size:12px}
  .lokal-karte>.lk-schon{grid-column:2/-1;justify-self:start;margin-top:8px}
}


/* Logos der Lokale */
.lokal-logo{display:inline-block;width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line);vertical-align:middle;flex:none}
.lokal-logo.mini{width:26px;height:26px;border-radius:4px;margin-right:8px;vertical-align:-8px}
.lokal-logo.gross{width:96px;height:96px;border-radius:12px;padding:4px}
.lokal-logo.leer{background:var(--surface-2)}
.lokal-logo.gross.leer{display:inline-grid;place-items:center;font-size:12px;color:var(--ink-3)}
.logo-feld{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lk-kopf .lokal-logo.mini{align-self:center}
.lokale li .lokal-logo{margin-right:8px}


/* Date planen: Wann vor dem Lokal */
.datum-wahl .chips{gap:8px}
.datum-wahl .chip{cursor:pointer}
.datum-anders input,.datum-uhrzeit input{font:400 17px var(--body);padding:8px 12px;border:1px solid var(--feldrand);border-radius:8px;background:var(--ground);color:var(--ink)}
.datum-uhrzeit{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--ink-2)}


@media (max-width:640px){
  .lk-kopf:has(.lokal-logo){display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
  .lk-kopf .lokal-logo.mini{grid-row:span 2;width:36px;height:36px;margin:0}
}


/* Glocke oben rechts im Admin */
.main-kopf{display:flex;justify-content:flex-end;margin-bottom:-12px}
.glocke{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;padding:0;flex:none}
.glocke:hover,.glocke:focus-visible{color:var(--teal);border-color:var(--teal)}
.glocke-zahl{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:999px;background:var(--funke);color:var(--funke-ink);font:700 12px/20px var(--body);text-align:center;box-shadow:0 0 0 2px var(--ground)}
.glocke-side{display:none}
.main-kopf{gap:8px;align-items:center}
/* Live-Anzeige: gruene LED mit Zahl, pulsiert, solange jemand da ist; grau bei niemandem */
/* Fragebogen zweier Personen nebeneinander (Date planen) */
.vergleich{margin:16px 16px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.vg-zeile{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.vg-zeile:first-child{border-top:0}
.vg-kopf{background:var(--surface-2);font-weight:700}
.vg-label{padding:8px 16px;font-weight:600;font-size:14px;color:var(--ink-2)}
.vg-zelle{padding:8px 16px;font-size:14px;line-height:1.45;border-left:1px solid var(--line);min-width:0}
.vg-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--surface-2);margin:2px 4px 2px 0;font-size:14px}
.vg-chip.vg-gleich{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);font-weight:600}
.vg-chip.vg-konflikt{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn);font-weight:600}
.vg-hat-konflikt{background:color-mix(in srgb,var(--warn) 6%,var(--surface))}
.vg-hinweis{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--warn)}
.vg-legende{margin:0;padding:8px 16px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .vergleich{margin:16px 16px 0}
  .vg-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vg-label{grid-column:1/-1;padding-bottom:0}
  .vg-zelle{border-left:0}
  .vg-zelle+.vg-zelle{border-left:1px solid var(--line)}
  .vg-kopf .vg-label{display:none}
}

.abgesagt-klapp{border-top:1px solid var(--line)}
.abgesagt-klapp>summary{padding:8px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-2)}
.abgesagt-klapp[open]>summary{border-bottom:1px solid var(--line)}
.vl-suche-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.vl-suche{flex:1 1 280px;max-width:520px;height:42px;font-size:14px!important}
td.bilanz{white-space:nowrap}
/* Lokale-Liste: passt am Laptop ohne Scrollen (lange Namen, Hinweise und Kontakte brechen um) */
@media (min-width:901px){
  .lokal-liste th,.lokal-liste td{padding-left:8px;padding-right:8px}
  .lokal-liste td:nth-child(2){max-width:220px}
  .lokal-liste td:nth-child(2) a.mit-foto{white-space:normal}
  .lokal-liste td:nth-child(3){max-width:180px}
  .lokal-liste td.reasons{max-width:160px}
}
.filter-feld{font:400 14px var(--body);padding:8px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ground);color:var(--ink);min-width:0}

/* Suche ueber alles: oben am PC, am Handy oben im Menue */
.admin-suche{position:relative;display:flex;align-items:center;margin-right:auto;width:min(360px,100%)}
.admin-suche input{width:100%;height:42px;padding:0 44px 0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:400 14px var(--body)}
.admin-suche input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.admin-suche-knopf{position:absolute;right:4px;top:4px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.admin-suche-knopf:hover{color:var(--ink);background:var(--surface-2)}
.admin-suche-side{display:none;width:100%;margin:4px 0 8px}
@media (max-width:900px){.admin-suche-side{display:flex}}
.such-gross{display:flex;gap:8px;flex-wrap:wrap}
.such-gross input{flex:1 1 260px;min-width:0;height:46px;padding:0 16px;border:1px solid var(--feldrand);border-radius:8px;background:var(--surface);color:var(--ink);font:400 17px var(--body)}
.such-liste{list-style:none;margin:0;padding:0}
.such-liste li+li{border-top:1px solid var(--line)}
.such-liste a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;text-decoration:none;color:var(--ink)}
.such-liste a:hover{background:color-mix(in srgb,var(--teal) 5%,var(--surface))}
.such-liste a b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600}
.live{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 14px var(--body);cursor:pointer;flex:none}
.live:hover,.live:focus-visible{border-color:var(--teal)}
.live-led{width:11px;height:11px;border-radius:50%;background:#A9B3B2;flex:none}
.live.an{color:var(--ink)}
.live.an .live-led{background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:live-puls 2s ease-out infinite}
@keyframes live-puls{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.live.an .live-led{animation:none}}
.live-wort{font-weight:500;color:var(--ink-2)}
.live-side{display:none}
.live-liste table{width:100%}
.live-liste td:last-child{text-align:right;font-variant-numeric:tabular-nums;width:3em}
@media (max-width:900px){.live-side{display:inline-flex;margin-left:auto;height:38px;padding:0 8px}.live-side .live-wort{display:none}.live-side + .glocke-side{margin-left:8px}}
@media (max-width:900px){.glocke-side{display:inline-grid;margin-left:auto}.glocke-main{display:none}.main-kopf{display:block;height:0;margin:0;overflow:visible}.main-kopf>:not(dialog){display:none}.side-knopf{margin-left:8px}}   /* main-kopf nicht ganz ausblenden: darin steckt das Glocken-Fenster, sonst bleibt es am Handy unsichtbar (20.10.2026) */
.glocke-liste{display:flex;flex-direction:column;gap:0;padding:8px 0}
.glocke-eintrag{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.glocke-eintrag:hover{background:var(--surface-2)}
/* Meldung mit WhatsApp-Knopf: Rahmen mit Link und Formular daneben (kein Formular im Link) */
.glocke-aktion>a{display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none}
.glocke-aktion form{margin-top:8px}
/* WhatsApp-Knoepfe: anfragen gruen, erinnern gelb, absagen rot (Patrick 02.10.2026, damit man sich nicht vertippt). Fest, in beiden Schemata gleich. */
.btn-wa{background:#0E7A3A;color:#FFFFFF}
.btn-wa:hover{background:#0B6630;color:#FFFFFF}
.btn-wa-gelb{background:#F4C20D;color:#1C3134}
.btn-wa-gelb:hover{background:#E0B000;color:#1C3134}
.btn-wa-rot{background:#C8372D;color:#FFFFFF}
.btn-wa-rot:hover{background:#AE2D24;color:#FFFFFF}
.btn-wa svg{width:18px;height:18px;flex:none}
[data-wa]{--wa-streifen:#1DA851;border-left:5px solid var(--wa-streifen)}
[data-wa="erinnerung"]{--wa-streifen:#F4C20D}
[data-wa="storno"]{--wa-streifen:#C8372D}
.glocke-eintrag[data-wa],.hinweise li[data-wa]{padding-left:12px}
.glocke-eintrag:last-of-type{border-bottom:0}
.glocke-text{font-size:14px;color:var(--ink-2)}
.glocke-liste .leer{padding:16px 16px}


/* Schliesszeiten je Wochentag (Lokal bearbeiten) */
.schluss-zeiten{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.schluss-zeiten label{display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:600;color:var(--ink-3)}
.schluss-zeiten input{width:6.6em;font:400 14px var(--body);padding:8px 8px}


@media (max-width:640px){.schritt-gruende{display:none}}


/* Date planen: Begruendung als eigene Blase unter den Schritten */
.passung-blase{padding:12px 16px;background:color-mix(in srgb,var(--teal) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));border-radius:var(--radius);font-size:14px;color:var(--ink-2)}
.passung-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink)}
.passung-blase ul{margin:8px 0 0;padding-left:16px;display:grid;gap:4px}


/* Online-Reservierung: Angaben zum Kopieren */
.res-kopieren{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.res-kopieren>.fine{flex-basis:100%}
.res-feld{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:500 14px var(--body);cursor:pointer;text-align:left;max-width:100%}
.res-feld small{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.res-feld span{overflow-wrap:anywhere}
.res-feld:hover{border-color:var(--teal)}
.res-feld.kopiert{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.res-feld.kopiert small::after{content:" · kopiert";color:var(--ok)}
/* Kopier-Symbol, damit man sieht, dass die Felder Knoepfe sind (21.10.2026) */
.res-feld{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.res-feld small{grid-column:1}
.res-feld span{grid-column:1}
.res-feld .kopier-ic{grid-column:2;grid-row:1 / span 2;color:var(--teal)}
.res-feld.kopiert .kopier-ic{color:var(--ok)}
.mit-kopieren{display:flex;gap:8px;align-items:stretch}
.mit-kopieren input{flex:1;min-width:0}
.kopier-knopf{display:inline-grid;place-items:center;padding:0 10px;color:var(--teal)}
.kopier-knopf.kopiert{border-color:var(--ok);color:var(--ok)}

/* Sehr schmale Handys (z. B. iPhone SE, 320 px): Kopfleiste passt in eine Zeile, der Schriftzug schiebt sich nicht unter den Mond-Knopf */
@media (max-width:379px){
  .site-head .wrap{gap:8px}
  .mark{font-size:17px;gap:8px}
  .mark-img{width:38px}
  .theme-toggle{width:36px;height:36px}
  .menu summary{padding:8px 8px;gap:8px;font-size:14px}
}
/* Admin am Handy: Logo als Tippflaeche gross genug, Fotos beim Vorschlag nicht zusammenquetschen */
@media (max-width:900px){.side .mark{min-height:40px;min-width:44px;display:inline-flex;align-items:center}}
@media (max-width:420px){.answers .person{flex-direction:column}.answers .person .profilfoto.gross{width:120px;height:120px}}
.person .profilfoto{flex:none}


/* Sprachwahl: dezent unten in der Fusszeile; die Hinweiszeile sehen nur Browser in einer anderen Sprache */
footer.site .wrap.fuss-sprachen{display:block;padding-block:0 28px}
.sprachen{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:14px;padding-top:16px;border-top:1px solid var(--night-line)}
.sprachen a,.sprachen span{color:var(--night-ink);opacity:.62;text-decoration:none;padding-block:8px}
.sprachen a:hover,.sprachen a:focus-visible{opacity:1;text-decoration:underline}
.sprachen [aria-current]{opacity:1;font-weight:600}
.sprach-hinweis{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:14px}
.sprach-hinweis .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:2px}
.sprach-hinweis a{color:var(--ink);font-weight:600;text-decoration:none;padding-block:8px}
.sprach-hinweis .sprach-weg{font-weight:400;font-size:24px;line-height:1;color:var(--ink-2);min-width:44px;text-align:center}
/* Fraunces kennt kein Kyrillisch: dort nimmt der Browser je Zeichen Georgia, Ziffern und Euro bleiben in Fraunces */


/* Admin: Summe unter Listen */
.liste-summe{margin:0;padding:8px 16px 16px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line)}
.liste-summe b{color:var(--ink)}
.lk-aktiv{margin-top:8px}


/* Partnerlokale: Leiste im Startbereich, Kacheln am Handy zweispaltig */
.lokal-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px;text-decoration:none;color:var(--ink-2);font-size:14px}
.lokal-leiste .ll-logos{display:flex}
.lokal-leiste .ll-logos .lokal-logo{width:36px;height:36px;margin-left:-8px;box-shadow:0 0 0 2px var(--ground)}
.lokal-leiste .ll-logos .lokal-logo:first-child{margin-left:0}
.lokal-leiste .ll-text{flex:1 1 220px}
.lokal-leiste b{color:var(--ink);font-weight:600}
.lokal-leiste:hover .ll-text{text-decoration:underline}
.lokale{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.lokale li .lokal-logo{width:48px;height:48px;margin-bottom:8px}
.lk-aktiv-tag{justify-self:start;margin-top:8px;font-size:14px!important;font-weight:600;color:var(--teal)!important;background:var(--surface-2);border-radius:999px;padding:2px 8px}
@media (max-width:640px){
  .lokale{grid-template-columns:1fr 1fr;gap:8px}
  .lokale li{padding:12px}
  .lokale li b{font-size:17px;line-height:1.25}
  .lokale li span{font-size:14px}
  .lokale li .lokal-logo{width:40px;height:40px}
}
.lokale li{align-content:start}
/* Partnerkacheln: am Rechner Logo links, Name und Ort daneben; am Handy alles mittig */
.lokale li{grid-template-columns:auto 1fr;column-gap:16px;align-items:center;align-content:center;padding:16px 16px}
.lokale li .lokal-logo{grid-row:1 / span 3;width:60px;height:60px;margin:0}
.lokale li > :not(.lokal-logo){grid-column:2}
@media (max-width:640px){
  .lokale li{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:start;padding:16px 8px}
  .lokale li .lokal-logo{grid-row:auto;width:48px;height:48px;margin-bottom:8px}
  .lokale li > :not(.lokal-logo){grid-column:1}
  .lk-aktiv-tag{justify-self:center}
}
/* Ab 7 Lokalen am Handy eine Reihe zum Wischen (Klasse lokale-wisch in index.php), die naechste Karte schaut an */
@media (max-width:640px){
  .lokale.lokale-wisch{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin-inline:-16px;padding:4px 16px 8px;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .lokale.lokale-wisch::-webkit-scrollbar{display:none}
  .lokale.lokale-wisch li{flex:0 0 44%;scroll-snap-align:start}
}


/* Spezialitaet unter jedem Partnerlokal */
.lokale li .lk-spez{margin-top:4px;font-size:14px!important;color:var(--teal)!important;font-style:italic}
/* Bilder nicht per Rechtsklick, langem Tippen oder Ziehen speichern (Logos bleiben frei). Bildschirmfotos verhindert das nicht. */
img.pic,img.paar-bild{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.ki,.bild,.paar-karte{-webkit-touch-callout:none}


/* Ueber Weserfunke: Kasten auf der Startseite und Kopf der Seite (echtes Foto, kein KI-Bild) */
.wer-kasten{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;text-decoration:none;color:var(--ink)}
.wer-kasten:hover{box-shadow:0 8px 24px rgba(28,49,52,.12)}
.wer-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.wer-text{display:grid;gap:2px;flex:1 1 240px}
.wer-text b{font-family:var(--display);font-size:20px;font-weight:600}
.wer-text span{color:var(--ink-2)}
.wer-mehr{font-weight:600;color:var(--gold-text);white-space:nowrap}
.ueber-kopf{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:8px 0 8px}
.ueber-foto{width:160px;height:160px;border-radius:50%;object-fit:cover;flex:none}
.ueber-kopf .lead{flex:1 1 260px;margin:0}


.ueber-bild{margin:16px 0 16px}
.ueber-bild img{width:100%;height:auto;border-radius:var(--radius);display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ueber-bild figcaption{font-size:14px;color:var(--ink-3);margin-top:8px}
.wer-foto{width:80px;height:80px;pointer-events:none;-webkit-touch-callout:none}
.ueber-uns .lead{margin-bottom:28px}
/* Hauptmenue: Links nie umbrechen; enger bei schmalen Rechnern, laengere Sprachen frueher als Menue-Knopf */
.site-head nav a{white-space:nowrap}
@media (max-width:1180px){.site-head nav{gap:16px;font-size:14px}}
@media (max-width:1340px){html:is([lang="ru"],[lang="uk"],[lang="vi"],[lang="tr"]) .site-head nav{display:none}html:is([lang="ru"],[lang="uk"],[lang="vi"],[lang="tr"]) .menu{display:block}}
/* Admin: Mailvorlagen */
.vl-liste{display:grid}
.vl-zeile{display:grid;gap:2px;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:12px 16px;font:inherit;color:var(--ink);cursor:pointer}
.vl-zeile:first-child{border-top:0}
.vl-zeile:hover{background:var(--surface-2)}
.vl-betreff{font-size:14px;color:var(--ink-2)}
.vl-text{font:14px/1.5 ui-monospace,Consolas,monospace;min-height:280px;width:100%}
.vl-hilfen{display:grid;gap:8px}
.vl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vl-chip{display:inline-grid;text-align:left;cursor:pointer;font-family:ui-monospace,Consolas,monospace;font-size:14px}
.vl-chip small{font-family:var(--body);font-size:12px;color:var(--ink-3)}
.vl-bed{display:grid;gap:4px;margin-top:8px}
.vl-bed code{font-size:12px;background:var(--surface-2);padding:1px 4px;border-radius:4px}
.vl-vorschau{border-top:1px solid var(--line);padding-top:12px}
.vl-rahmen{width:100%;height:520px;border:1px solid var(--line);border-radius:8px;background:#fff}
.vl-hilfe summary{cursor:pointer}
/* Instagram in Fusszeile und auf Ueber uns */
.insta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
footer.site .insta{color:var(--night-ink);padding-block:8px}
footer.site .insta:hover{color:var(--gold)}
.fuss-social{margin-top:8px}
.insta-text{color:var(--gold-text)}
.kopf-knoepfe{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Tisch-Seite: Schritte nach dem Einladen zusammenklappbar */
.schritte-klapp{display:block}
.schritte-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px 16px;cursor:pointer;list-style:none;margin-bottom:0}
.schritte-kopf::-webkit-details-marker{display:none}
.schritte-kopf::before{content:"▸";color:var(--ink-3)}
.schritte-klapp[open]>.schritte-kopf{margin-bottom:24px}
.schritte-klapp[open]>.schritte-kopf::before{content:"▾"}
/* Uebersicht: Neuigkeiten eingeklappt unter den Aufgaben */
.neuigkeiten>summary{cursor:pointer;list-style:none;flex-wrap:wrap}
.neuigkeiten>summary::-webkit-details-marker{display:none}
.neuigkeiten>summary::before{content:"▸";color:var(--ink-3);transition:transform .15s ease}
.neuigkeiten[open]>summary::before{transform:rotate(90deg)}
.uebersicht-zwischen{font-size:17px;margin:4px 0 -8px}
/* Sehr schmale Handys (320 px): Bankverbindung untereinander, lange Hinweise duerfen umbrechen */
.pill{max-width:100%}
@media (max-width:400px){
  .pill{white-space:normal}
  .ueberweisung .eckdaten{grid-template-columns:1fr !important;gap:0 !important}
  .ueberweisung .eckdaten dt{margin-top:8px;font-size:14px;color:var(--ink-3)}
  .ueberweisung .eckdaten dd{margin:0;overflow-wrap:anywhere}
}
/* Ladebalken beim Hochladen von Fotos */
.upload-balken{display:grid;gap:4px;width:100%;flex-basis:100%;margin-top:8px}
.upload-balken progress{width:100%;height:12px;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--surface-2);overflow:hidden}
.upload-balken progress::-webkit-progress-bar{background:var(--surface-2);border-radius:999px}
.upload-balken progress::-webkit-progress-value{background:var(--funke);border-radius:999px;transition:width .2s}
.upload-balken progress::-moz-progress-bar{background:var(--funke);border-radius:999px}
.upload-balken span{font-size:14px;color:var(--ink-2)}


/* Admin-Karte (app/admin/karte.php) */
.karte-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.karte-zahlen .panel{padding:12px 16px;display:grid;gap:2px}
.karte-zahlen b{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.karte-zahlen span{font-size:14px;opacity:.8}
.karte-zahlen .karte-warn b{color:#C62828}
.karte-rahmen{padding:0;overflow:hidden}
.karte{height:min(72vh,720px);min-height:380px;width:100%;background:#E8E4DA}
.karte-leiste{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);font-size:14px}
.karte-leiste label{display:flex;gap:8px;align-items:center}
.karte-skala{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:14px}
.karte-skala i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.karte-tab{margin-top:8px;border-collapse:collapse;font-size:14px}
.karte-tab th,.karte-tab td{padding:2px 8px 2px 0;text-align:left;white-space:nowrap}
.karte-tab th{font-weight:600;opacity:.75}
.leaflet-popup-content .btn{color:inherit}
.leaflet-popup-content .btn-funke{color:#1C3134}


/* Mailverlauf je Nutzer und Lokal (app/mailverlauf.php) */
.mailverlauf{list-style:none;margin:0;padding:0;display:grid;max-height:560px;overflow:auto}
.mailverlauf li+li{border-top:1px solid var(--line)}
.mailverlauf button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:22px 1fr auto;gap:2px 8px;width:100%;padding:8px 4px;align-items:baseline}
.mailverlauf button:hover,.mailverlauf button:focus-visible{background:var(--surface-2)}
.mailverlauf button:focus-visible{outline:2px solid var(--teal,#134A4E);outline-offset:-2px}
.mv-pfeil{grid-row:span 2;font-weight:700;text-align:center;color:var(--ink-3)}
.mv-empfangen .mv-pfeil{color:var(--teal,#134A4E)}
.mv-fehler .mv-pfeil,.mv-rot{color:#C62828}
.mv-betreff{grid-column:2;grid-row:1;overflow-wrap:anywhere}
.mv-neu .mv-betreff{font-weight:700}
.mv-zeit{grid-column:3;grid-row:1;white-space:nowrap;text-align:right}
.mv-wer{grid-column:2 / 4;grid-row:2;opacity:.8}
.mv-mail{display:flex;flex-direction:column;gap:8px}
.mv-koepfe{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:14px}
.mv-koepfe dt{font-weight:600;opacity:.7}
.mv-koepfe dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){.mailverlauf button{grid-template-columns:22px 1fr}.mv-zeit{grid-column:2;grid-row:3;text-align:left}.mv-wer{grid-column:2}}

/* Fusszeile: kein Tracking, nur Kekse zum Nachtisch */
.fuss-kekse{font-size:14px;opacity:.8;margin-top:8px}


/* Lokale: Logo-Knoepfe im Logo-Feld, Zusammenfuehren in der Liste */
.logo-knoepfe{margin-top:8px}
.spalte-haken{width:34px;text-align:center}
.zusammen-leiste{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.zusammen-wahl{display:flex;flex-wrap:wrap;gap:8px 16px}
.zusammen-wahl label{display:flex;gap:8px;align-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Danke-Seite nach der Zahlung (danke.php), Aufbau wie die Zahlungsseite ---------- */
.danke-links{order:1;display:grid;gap:24px;min-width:0}
.danke-summe{order:2}
.danke-kopf{display:flex;gap:16px;align-items:center}
.danke-kopf small{display:block;color:var(--ink-3);font-size:14px}
.danke-kreis{width:52px;height:52px;border-radius:50%;border:2px solid var(--ok);display:grid;place-items:center;color:var(--ok);flex:none}
.danke-kreis svg{width:26px;height:26px}
section.block .danke-titel{font-size:clamp(26px,3.4vw,32px);line-height:1.15}
section.block .danke-karte h2{font-size:20px;margin-bottom:12px}
.danke-karte p{color:var(--ink-2)}
.danke-schritte{list-style:none;margin:0;padding:0;display:grid}
.danke-schritte li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-bottom:16px}
.danke-schritte li:last-child{padding-bottom:0}
.danke-schritte li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.danke-schritte li:last-child::before{display:none}
.danke-schritte b{display:block;color:var(--ink)}
.danke-schritte li > div > span{color:var(--ink-2);font-size:14px;display:block}
.danke-punkt{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink-3);position:relative;z-index:1}
.danke-punkt.fertig{background:var(--ok);border-color:var(--ok);color:#fff}
.danke-punkt.fertig svg{width:14px;height:14px}
.danke-punkt.jetzt{border-color:var(--gold);color:var(--gold-text)}
.danke-bank{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;font-size:14px;margin:8px 0 0;background:var(--surface-2);border-radius:8px;padding:16px 16px}
.danke-bank dt{color:var(--ink-3)}
.danke-bank dd{margin:0;font-weight:600;overflow-wrap:anywhere;color:var(--ink)}
.danke-qr{display:block;margin-top:8px}
.danke-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.danke-knoepfe .kasse-knopf{width:auto;padding:16px 24px;font-size:17px}
@media (max-width:860px){
  .danke-seite .danke-summe{order:2;padding:24px}
}
@media (max-width:560px){
  .danke-bank{grid-template-columns:minmax(0,1fr);gap:0}
  .danke-bank dt{font-size:14px;margin-top:8px}
  .danke-bank dt:first-child{margin-top:0}
  .danke-knoepfe .btn{flex:1 1 100%}
}

/* ---------- Tipps-Seite: Karten mit Symbol; am Handy zugeklappt (seite.js), "Du bist frei" immer offen ---------- */
.tipp-einleitung{max-width:62ch;color:var(--ink-2);font-size:17px;margin-top:12px}
.tipp-sprung{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.tipp-sprung a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;background:var(--surface);transition:box-shadow .18s ease}
.tipp-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.tipp-karte{background:var(--surface);border:1px solid var(--line);border-radius:12px;scroll-margin-top:88px;min-width:0}
.tipp-karte.breit{grid-column:1/-1}
.tipp-karte summary,.tipp-kopf{list-style:none;display:flex;align-items:center;gap:16px;padding:20px 24px 8px}
.tipp-karte summary{cursor:default}
.tipp-karte summary::-webkit-details-marker{display:none}
section.block .tipp-karte h2{font-size:24px;margin:0;flex:1}
.tipp-symbol{width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--teal);display:grid;place-items:center;flex:none}
.tipp-symbol svg{width:24px;height:24px}
.tipp-pfeil{display:none;width:22px;height:22px;color:var(--gold-text);flex:none;transition:transform .2s ease}
.tipp-karte[open] .tipp-pfeil{transform:rotate(180deg)}
.tipp-inhalt{padding:8px 24px 24px}
.tipp-inhalt p{color:var(--ink-2);margin:0 0 12px;max-width:70ch}
.tipp-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tipp-liste li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;color:var(--ink-2)}
.tipp-liste li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:8px;justify-self:center}
.tipp-fragen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
section.block .tipp-fragen h3{font:600 14px var(--body);color:var(--ink-3);margin:0 0 8px}
.tipp-inhalt .tipp-frage{background:var(--surface-2);border-radius:12px;padding:12px 16px;margin:0 0 8px;font:500 17px/1.35 var(--display);color:var(--ink)}
.tipp-frei{background:var(--night);color:var(--night-ink);border:0}
.tipp-frei h2{color:var(--night-ink)}
.tipp-frei .tipp-symbol{background:rgba(255,255,255,.1);color:var(--gold)}
.tipp-frei .tipp-inhalt p{color:var(--night-ink);opacity:.92}
.tipp-frei .tipp-zitat{font:500 20px/1.35 var(--display);opacity:1;border-left:3px solid var(--gold);padding-left:16px;margin:4px 0 16px}
.tipp-aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.btn.tipp-hell{background:var(--night-ink);color:var(--night)}
.btn.tipp-rand{border-color:rgba(255,255,255,.45);color:var(--night-ink)}
@media (hover:hover){.tipp-sprung a:hover{box-shadow:0 4px 14px rgba(20,30,32,.14)}}
@media (max-width:700px){
  .tipp-raster,.tipp-fragen{grid-template-columns:minmax(0,1fr)}
  .tipp-sprung{display:none}
  .tipp-klappen .tipp-karte.klappbar summary{cursor:pointer;padding-bottom:20px}
  .tipp-klappen .tipp-karte.klappbar[open] summary{padding-bottom:8px}
  .tipp-klappen .tipp-pfeil{display:block}
}

/* ---------- Date-Ideen: Karten je Idee nach Orten; am Handy Orte zugeklappt (seite.js) ---------- */
.ideen-pin{width:18px;height:18px;color:var(--gold-text);flex:none}
.tipp-sprung a{display:inline-flex;align-items:center;gap:8px}
.tipp-sprung .ideen-pin{width:15px;height:15px}
.ideen-ort{margin-top:36px;scroll-margin-top:88px}
.ideen-ort summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:default}
.ideen-ort summary::-webkit-details-marker{display:none}
section.block .ideen-ort summary h2{font-size:29px;margin:0;flex:1}
.ideen-ort summary .ideen-pin{width:22px;height:22px}
.ideen-anzahl{font-size:14px;color:var(--ink-3)}
.ideen-ort[open] .tipp-pfeil{transform:rotate(180deg)}
.ideen-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.ideen-idee{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;min-width:0;transition:box-shadow .18s ease}
.ideen-idee .tipp-symbol{width:48px;height:48px}
.ideen-idee .tipp-symbol svg{width:26px;height:26px}
section.block .ideen-idee h3{font:600 20px/1.25 var(--display);margin:2px 0 8px}
.ideen-idee p{color:var(--ink-2);margin:0}
.ideen-merkmale{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ideen-merkmale span{font-size:14px;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold-text)}
.ideen-mehr{display:inline-block;margin-top:8px;font-size:14px;color:var(--teal);font-weight:600}
.ideen-gedanken{margin-top:40px;background:var(--surface-2);border-radius:16px;padding:24px}
section.block .ideen-gedanken h2,section.block .ideen-cta h2{font-size:24px;margin:0 0 16px}
.ideen-gedanken ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.ideen-gedanken li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;color:var(--ink-2)}
.ideen-gedanken li svg{width:24px;height:24px;color:var(--teal);margin-top:2px}
.ideen-gedanken p{margin:16px 0 0;color:var(--ink-2)}
.ideen-cta{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
section.block .ideen-cta h2{margin-bottom:4px}
.ideen-cta p{margin:0;color:var(--ink-2)}
@media (hover:hover){.ideen-idee:hover{box-shadow:0 6px 18px rgba(20,30,32,.12)}}
@media (max-width:700px){
  .ideen-karten,.ideen-gedanken ul{grid-template-columns:minmax(0,1fr)}
  .tipp-klappen .ideen-ort{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
  .tipp-klappen .ideen-ort summary{cursor:pointer}
  section.block .tipp-klappen .ideen-ort summary h2{font-size:24px}
  .tipp-klappen .ideen-ort .tipp-pfeil{display:block}
  .tipp-klappen .ideen-idee{border:0;padding:16px 0 0;border-top:1px solid var(--line);border-radius:0;background:none}
  .tipp-klappen .ideen-karten{gap:16px;margin-top:12px}
  .ideen-cta{flex-direction:column;align-items:stretch}
}


/* ---------- Gutschein verschenken (Shop ohne Konto) ---------- */
.gs-held{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.gs-punkte{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.gs-punkte li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;color:var(--ink-2)}
.gs-punkte svg{width:20px;height:20px;color:var(--ok);margin-top:2px}
.gs-karte{border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(20,30,32,.22);transform:rotate(-1.5deg)}
.gs-m-ratten{display:none}
.gs-seite:has(input[name=motiv][value=ratten]:checked) .gs-m-date{display:none}
.gs-seite:has(input[name=motiv][value=ratten]:checked) .gs-m-ratten{display:block}
.gs-motive{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.gs-motiv{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;display:grid;gap:8px;position:relative;transition:box-shadow .18s ease}
.gs-motiv input{position:absolute;opacity:0;pointer-events:none}
.gs-motiv:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:color-mix(in srgb,var(--teal) 8%,var(--surface))}
.gs-motiv:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.gs-motiv b{font:600 17px var(--display);color:var(--ink);padding:0 4px 2px}
.gs-motiv-bild{display:block;height:74px;border-radius:8px}
.gs-motiv-date{background:linear-gradient(180deg,rgba(19,74,78,.35),rgba(11,42,45,.55)),url(/img/blinddate-640.webp) center 40%/cover}
.gs-motiv-ratten{background:url(/img/rattenfaenger-hell.webp) no-repeat 14% 30%/auto 190%,radial-gradient(circle at 20% 30%,#1A5C60,#134A4E 45%,#0B2A2D)}
@media (hover:hover){.gs-motiv:hover{box-shadow:0 4px 14px rgba(20,30,32,.14)}}
.gs-vorschau{margin-top:16px}
.gs-vorschau p{font-size:14px;color:var(--ink-3);margin:0 0 8px}
.gs-vorschau .wk-rahmen{border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(20,30,32,.18)}
.gs-mini{margin:0 0 16px}
.gs-kasse-titel p{color:var(--ink-2);margin:8px 0 0}
.gs-zurueck{width:100%;margin-top:4px}
.gs-kasse{margin-top:36px}
section.block .gs-schritt{font-size:24px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.gs-schritt span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--night);color:var(--night-ink);font:700 14px var(--body);flex:none}
:root[data-theme="dark"] .gs-schritt span{background:var(--gold);color:#1C3134}
.gs-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gs-wahl label{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 16px;cursor:pointer;display:grid;gap:2px;position:relative;transition:box-shadow .18s ease}
.gs-wahl label:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:color-mix(in srgb,var(--teal) 8%,var(--surface))}
.gs-wahl input{position:absolute;opacity:0;pointer-events:none}
.gs-wahl label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.gs-wahl b{font:600 17px var(--display);color:var(--ink)}
.gs-wahl span{font-size:14px;color:var(--ink-3)}
.gs-wahl .gs-preis{font-weight:700;color:var(--ink);font-size:17px}
.gs-wahl .gs-tipp{position:absolute;top:-10px;right:12px;background:var(--gold);color:#1C3134;font:700 12px var(--body);letter-spacing:.02em;padding:4px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(20,30,32,.15);transform:rotate(3deg)}
.gs-betrag{display:none;margin-top:12px;max-width:260px}
.gs-seite:has(input[name=art][value=betrag]:checked) .gs-betrag{display:flex}
.gs-betrag input{background:var(--surface)}
/* Shop Schritt 1: am PC laeuft rechts die Karte mit Preis mit (statt Karte im Einstieg), am Handy: Art, Motiv,
   Vorschau, Persoenliches */
@media (min-width:861px){.gs-mini .wk-rahmen{transform:rotate(-1.5deg);box-shadow:0 14px 40px rgba(20,30,32,.22)}}
@media (min-width:861px){.gs-gestalten .gs-b-vorschau{display:none}.gs-held{grid-template-columns:minmax(0,1fr)}.gs-held .gs-karte{display:none}.gs-held>div:first-child{max-width:720px}}
@media (max-width:860px){
  .gs-gestalten .gs-mini{display:none}
  /* Knoepfe ganz nach unten, unter die Uebersicht: das Formular gibt seine Teile ans Raster ab */
  .gs-kasse{gap:20px}.gs-kasse .kasse-form{display:contents}.gs-kasse .kasse-form>*{order:5}.gs-kasse .kasse-summe{order:6}
  .gs-kasse .kasse-einwilligung,.gs-kasse .kasse-vorab,.gs-kasse .kasse-knopf,.gs-kasse .kasse-fein,.gs-kasse .gs-zurueck{order:7}
  .gs-zahlen .kasse-summe .kasse-gesamt{display:none}   /* der Gesamtbetrag steht direkt darunter vor dem Kaufknopf */
  .gs-kasse.gs-gestalten .gs-b-art{order:1}.gs-kasse.gs-gestalten .gs-b-motiv{order:2}.gs-kasse.gs-gestalten .gs-b-vorschau{order:3}.gs-kasse.gs-gestalten .gs-b-pers{order:4}
}
.gs-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.gs-so{font-size:14px;color:var(--ink-2);display:grid;gap:8px}
.gs-so b{color:var(--ink)}
.gs-art-date,.gs-art-dinner,.gs-art-termin,.gs-art-betrag{display:none}
.gs-seite:has(input[name=art][value=date]:checked) .gs-art-date,.gs-seite:has(input[name=art][value=dinner]:checked) .gs-art-dinner,
.gs-seite:has(input[name=art][value=termin]:checked) .gs-art-termin,.gs-seite:has(input[name=art][value=betrag]:checked) .gs-art-betrag{display:inline}
@media (hover:hover){.gs-wahl label:hover{box-shadow:0 4px 14px rgba(20,30,32,.14)}}
@media (max-width:860px){.gs-held{grid-template-columns:minmax(0,1fr)}.gs-karte{max-width:460px;width:100%}}
@media (max-width:560px){.gs-wahl,.gs-box{grid-template-columns:minmax(0,1fr)}}
/* Startseite: Kasten "Ein erstes Date verschenken" */
.gs-teaser{background:var(--night);color:var(--night-ink);border-radius:16px;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:24px}
.gs-teaser b{font:600 24px var(--display);display:block}
.gs-teaser p{margin:8px 0 0;opacity:.9}
.gs-teaser .btn{background:var(--gold);color:#1B2426}
@media (max-width:700px){.gs-teaser{grid-template-columns:minmax(0,1fr)}}
/* Mein Bereich: "ist nicht gekommen?" unter der Bewertung */
.nicht-da{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:14px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:8px}
.linkknopf{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Admin Pruefung: Ampel der Vorpruefung (public/assets/pruefung.js) */
.vorpruef{border:1px solid var(--line);border-radius:8px;padding:12px 16px;display:grid;gap:8px;background:var(--surface-2)}
.vorpruef-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vorpruef-kopf b{font-size:17px}
.vorpruef-kopf .fine{margin-left:auto}
.ampel{display:inline-flex;gap:4px;padding:4px 8px;border-radius:999px;background:#1C3134}
.ampel i{width:12px;height:12px;border-radius:50%;background:#3A4B4D;display:block}
.vorpruef.gruen .ampel i:nth-child(3){background:#46C07A;box-shadow:0 0 8px #46C07A}
.vorpruef.gelb .ampel i:nth-child(2){background:#F0B53A;box-shadow:0 0 8px #F0B53A}
.vorpruef.rot .ampel i:nth-child(1){background:#E0564A;box-shadow:0 0 8px #E0564A}
.vorpruef.gruen{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.vorpruef.gelb{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.vorpruef.rot{border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
.vorpruef ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.vorpruef li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start}
.vorpruef li::before{font-weight:700;text-align:center}
.vorpruef li.ok::before{content:"✓";color:var(--ok)}
.vorpruef li.warn::before{content:"?";color:var(--warn)}
.vorpruef li.crit::before{content:"✗";color:var(--crit)}
.vorpruef li.info{color:var(--ink-3)}
.vorpruef li.info::before{content:"•";color:var(--ink-3)}
.vorpruef li span{color:var(--ink-3)}
.vorpruef.laeuft .ampel i{animation:ampel-blink 1.2s infinite}
.vorpruef.laeuft .ampel i:nth-child(2){animation-delay:.2s}.vorpruef.laeuft .ampel i:nth-child(3){animation-delay:.4s}
@keyframes ampel-blink{50%{background:#6C7E80}}
@media (prefers-reduced-motion:reduce){.vorpruef.laeuft .ampel i{animation:none}}

/* Datenschutz: Inhaltsverzeichnis und Zwischenueberschriften */
.ds-inhalt{display:flex;flex-wrap:wrap;gap:8px 16px;padding:16px 16px;margin:16px 0 8px;background:var(--surface-2);border-radius:var(--radius);font-size:14px}
.ds-inhalt b:first-child{flex-basis:100%}
.ds-inhalt .ds-gruppe{flex-basis:100%;font-weight:700;margin-top:8px}
h4.ds-thema{font:600 17px var(--display);margin:24px 0 4px;color:var(--ink);scroll-margin-top:20px}
h4.ds-thema + p{margin-top:0}

/* Mein Bereich, am Tag des Treffens: Hilfe und "Date beendet" (details, ohne JavaScript) */
.am-abend{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--surface-2);display:grid;gap:8px}
.am-abend-knoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.am-abend-teil{flex:0 0 auto;min-width:0}
.am-abend-teil[open]{flex-basis:100%;order:2}
.am-abend-teil > summary{list-style:none;cursor:pointer;display:inline-flex}
.am-abend-teil > summary::-webkit-details-marker{display:none}
.am-abend-teil[open] > summary{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.am-abend-box{margin-top:8px;padding:12px 16px;border-radius:8px;background:var(--surface);border:1px solid var(--line);gap:8px}
.am-abend-box p{margin:0}
.am-abend-box a[href^="tel:"]:not(.btn){font-weight:700;white-space:nowrap}
.verlauf-wahl{display:flex;flex-wrap:wrap;gap:8px}
.verlauf-wahl .chip{white-space:normal;text-align:left}

/* Admin-Uebersicht: Besucher-Diagramm (SVG): Aufrufe teal mit Flaeche, Bewerbungen gelb (eigene Skala rechts) */
.besucher-graf{padding:12px 16px 8px}
.besuche-graf{display:block;width:100%;height:auto}
.graf-schmal{display:none}
@media (max-width:640px){.besucher-graf{padding:8px 12px 8px}.graf-breit{display:none}.graf-schmal{display:block}.graf-schmal .graf-achse{font-size:12px}}
.graf-info{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.graf-tag.an .graf-spalte{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
.graf-tag.an .graf-punkt{opacity:1}
.graf-linie{stroke:var(--line);stroke-width:1}
.graf-achse{font:10px var(--body);fill:var(--ink-3)}
.graf-achse-b{fill:#B7800F}
.graf-flaeche{fill:color-mix(in srgb,var(--teal) 12%,transparent)}
.graf-kurve{fill:none;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.graf-kurve-a{stroke:var(--teal)}
.graf-kurve-b{stroke:#E9A21B}
.graf-laeuft{stroke-dasharray:4 4;opacity:.75}
.graf-spalte{fill:transparent}
.graf-punkt{fill:var(--teal);opacity:0}
.graf-punkt-b{fill:#E9A21B}
.graf-tag:hover .graf-spalte{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.graf-tag:hover .graf-punkt{opacity:1}
.graf-legende{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.graf-l-kurve,.graf-l-bew{display:inline-block;width:16px;height:2px;border-radius:4px;background:var(--teal);margin-right:-8px;vertical-align:middle}
.graf-l-bew{background:#E9A21B}
.graf-legende .fine{margin-left:auto}

/* Wohnort-Feld mit Suche (app/orte.php wohnort_select, Skript in seite.js) */
.wo{display:flex;flex-direction:column;gap:8px;min-width:0}
.wo-suche{position:relative}
.wo .wo-suche input.wo-eingabe.wo-eingabe:not([type=checkbox]):not([type=radio]){width:100%;padding-left:40px}
.wo-suche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.wo-liste{list-style:none;margin:0;padding:4px 0;border:1px solid var(--feldrand,var(--line));border-radius:8px;background:var(--surface);max-height:320px;overflow-y:auto;box-shadow:var(--shadow)}
.wo-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 12px;cursor:pointer;color:var(--ink);font-size:17px}
.wo-liste li small{font-size:14px;color:var(--ink-3);white-space:nowrap}
.wo-liste li[aria-selected="true"],.wo-liste li[role=option]:hover{background:var(--surface-2)}
.wo-liste li.kopf,.wo-liste li.mehr{cursor:default;font-size:14px;color:var(--ink-3)}
.wo-liste li.kopf{padding-block:8px 4px}
.wo-meldung{font-size:14px;color:var(--ink);background:color-mix(in srgb,var(--gold) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:8px;padding:8px 12px}

/* Story-Bilder zum Teilen (story_teilen_html: Danke-Seite nach der Bewerbung, Mein Bereich am Tag des Dates) */
.story-teilen{margin-top:20px;max-width:60ch}
.story-teilen h3{font-size:24px}
.story-wahl{display:flex;flex-wrap:wrap;gap:16px}
.story-wahl figure{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(170px,44%)}
.story-wahl img{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:8px;box-shadow:var(--shadow)}
.story-teilen .btn svg{width:16px;height:16px;flex:none}
.story-wahl .btn{white-space:nowrap}
.story-wahl figure:only-child{width:min(200px,60%)}

/* Tabellen in Mein Bereich (Zahlungen): am Handy je Zeile ein Block mit Beschriftung statt Wischen */
@media (max-width:640px){
  table.karten-nutzer thead{display:none}
  table.karten-nutzer,table.karten-nutzer tbody{display:block;width:100%}
  table.karten-nutzer tr{display:block;padding:8px 16px;border-bottom:1px solid var(--line)}
  table.karten-nutzer tr:last-child{border-bottom:0}
  table.karten-nutzer td{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;border:0;padding:4px 0;text-align:right;white-space:normal}
  table.karten-nutzer td::before{content:attr(data-label);font-size:14px;color:var(--ink-3);text-align:left}
}

/* Admin am Handy (Pruefung 02.10.2026): nichts darf seitlich herausragen */
@media (max-width:640px){
  .main th{white-space:normal}
  .main .reasons{min-width:0}
  .main table.karten a.mit-foto{white-space:normal;min-width:0}
  .main table.stapel,.main table.stapel tbody,.main table.stapel tr,.main table.stapel td{display:block;width:100%}
  .main table.stapel tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .main table.stapel td{border:0;padding:4px 16px}
  .main table.stapel td:empty{display:none}
}

/* Kleine Aufklapper am Handy gut antippbar (Pruefung 02.10.2026) */
summary.fine{padding-block:8px;cursor:pointer}
@media (max-width:640px){.ideen-ort summary{min-height:44px}}

/* ---------- Funkel: Helfer unten rechts und Tipp in der Bewerbung (app/funkel.php, seite.js) ---------- */
.fk{display:block;overflow:visible}
.fk .fk-stern{fill:url(#funkel-gold);stroke:url(#funkel-gold);stroke-width:9;stroke-linejoin:round}
.fk .fk-schatten{fill:#1C3134;opacity:.13}
:root[data-theme="dark"] .fk .fk-schatten{fill:#000;opacity:.35}
.fk .fk-schweben,.fk .fk-huepfer{transform-box:view-box;transform-origin:100px 228px}
.fk .fk-schweben{animation:fk-schweben 3.8s ease-in-out infinite}
.fk .fk-schatten{transform-box:fill-box;transform-origin:center;animation:fk-schatten 3.8s ease-in-out infinite}
.fk .fk-halo{transform-box:fill-box;transform-origin:center;animation:fk-gluehen 3.8s ease-in-out infinite}
.fk .fk-auge{transform-box:fill-box;transform-origin:center;animation:fk-blinzeln 5.2s infinite}
.fk .fk-glitzer path{transform-box:fill-box;transform-origin:center;animation:fk-funkeln 2.6s ease-in-out infinite}
.fk .fk-glitzer g:nth-child(2) path{animation-delay:.7s;animation-duration:3.1s}
.fk .fk-glitzer g:nth-child(3) path{animation-delay:1.3s;animation-duration:2.3s}
.fk .fk-glitzer g:nth-child(4) path{animation-delay:1.9s;animation-duration:2.9s}
.fk .fk-blick{transition:transform .3s ease}
.fk .fk-l-froh,.fk .fk-r-froh,.fk .fk-mund-lachen,.fk .fk-mund-oh,.fk .fk-mund-sprechen{display:none}
.fk[data-ausdruck=freut] .fk-l-offen,.fk[data-ausdruck=freut] .fk-r-offen,.fk[data-ausdruck=freut] .fk-mund-laecheln,.fk[data-ausdruck=zwinkert] .fk-r-offen,.fk[data-ausdruck=zwinkert] .fk-mund-laecheln,.fk[data-ausdruck=ueberlegt] .fk-mund-laecheln,.fk[data-ausdruck=spricht] .fk-mund-laecheln{display:none}
.fk[data-ausdruck=freut] .fk-l-froh,.fk[data-ausdruck=freut] .fk-r-froh,.fk[data-ausdruck=freut] .fk-mund-lachen,.fk[data-ausdruck=zwinkert] .fk-r-froh,.fk[data-ausdruck=zwinkert] .fk-mund-lachen,.fk[data-ausdruck=ueberlegt] .fk-mund-oh,.fk[data-ausdruck=spricht] .fk-mund-sprechen{display:inline}
.fk[data-ausdruck=ueberlegt] .fk-blick{transform:translate(2.4px,-3px)}
.fk .fk-mund-sprechen ellipse{transform-box:fill-box;transform-origin:center top;animation:fk-reden .26s ease-in-out infinite alternate}
.fk .fk-funken path{opacity:0;transform-box:fill-box;transform-origin:center}
.fk.fk-hopst .fk-huepfer{animation:fk-huepfen .75s cubic-bezier(.3,.7,.4,1)}
.fk.fk-hopst .fk-funken path{animation:fk-burst .85s ease-out}
@keyframes fk-schweben{0%,100%{transform:translateY(0) rotate(-2.2deg)}50%{transform:translateY(-6px) rotate(2.2deg)}}
@keyframes fk-schatten{0%,100%{transform:scaleX(1);opacity:.13}50%{transform:scaleX(.8);opacity:.08}}
@keyframes fk-gluehen{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes fk-blinzeln{0%,91%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes fk-funkeln{0%,100%{opacity:.15;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(25deg)}}
@keyframes fk-reden{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes fk-huepfen{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(2px) scale(1.08,.9)}45%{transform:translateY(-26px) scale(.95,1.06) rotate(-4deg)}70%{transform:translateY(0) scale(1.06,.93)}85%{transform:translateY(-3px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
@keyframes fk-wackeln{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}45%{transform:rotate(8deg)}70%{transform:rotate(-4deg)}}
@keyframes fk-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(90deg)}}

/* Knopf unten rechts: nur der Stern, kein Kreis */
.funkel-knopf{position:fixed;z-index:60;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:64px;height:74px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
.funkel-knopf .fk{width:64px;height:auto;filter:drop-shadow(0 3px 5px rgba(28,49,52,.22))}
.funkel-knopf:hover .fk-huepfer{animation:fk-wackeln .7s ease-in-out}
.funkel-knopf{touch-action:none}
.funkel-knopf.gezogen{cursor:grabbing}
.funkel-knopf.gezogen .fk-schweben,.funkel-knopf.gezogen .fk-huepfer{animation:none}
.funkel-knopf:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:12px}
.funkel-hinweis{position:fixed;z-index:60;right:calc(max(12px,env(safe-area-inset-right)) + 72px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 26px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font:600 14px var(--body);box-shadow:var(--shadow);opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none;white-space:nowrap}
.funkel-knopf:hover+.funkel-hinweis,.funkel-knopf:focus-visible+.funkel-hinweis{opacity:1;transform:none}
.funkel.offen .funkel-knopf,.funkel.offen .funkel-hinweis{opacity:0;pointer-events:none}

/* Fenster: am Handy unten als Blatt, am PC als Karte unten rechts */
.funkel-fenster{position:fixed;z-index:61;right:16px;bottom:16px;width:min(380px,calc(100vw - 32px));height:min(600px,calc(100dvh - 120px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(28,49,52,.25);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);transform-origin:bottom right;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.funkel-fenster[hidden]{display:none!important}
.funkel.offen .funkel-fenster{opacity:1;transform:none}
@media (max-width:600px){.funkel-fenster{right:0;left:0;bottom:0;width:100%;height:min(86dvh,640px);border-radius:24px 24px 0 0;border-bottom:0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}}
.funkel-kopf{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;border-bottom:1px solid var(--line)}
.funkel-kopf .fk{width:42px;height:auto;flex:none}
.funkel-kopf b{display:block;font:600 17px var(--display)}
.funkel-kopf span{display:block;font-size:14px;color:var(--ink-2)}
.funkel-zu{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--ground);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.funkel-verlauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:8px}
.funkel-bl{max-width:88%;padding:8px 12px;border-radius:16px;font-size:17px;line-height:1.45;animation:funkel-rein .25s ease-out}
.funkel-bl a{color:inherit}
.funkel-bl-funkel{align-self:flex-start;background:var(--ground);border:1px solid var(--line);border-bottom-left-radius:5px}
.funkel-bl-ich{align-self:flex-end;background:var(--funke);color:var(--funke-ink);font-weight:600;border-bottom-right-radius:5px}
.funkel-fragen{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px}
.funkel-fragen button{font:600 14px var(--body);text-align:left;padding:8px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--funke) 60%,var(--line));background:var(--surface);color:var(--ink);cursor:pointer}
.funkel-fragen button:hover,.funkel-fragen button:focus-visible{border-color:var(--funke);background:color-mix(in srgb,var(--funke) 14%,var(--surface))}
.funkel-tippt{display:inline-flex;gap:4px;padding:4px 0}
.funkel-tippt i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);opacity:.4;animation:funkel-tippen 1s infinite}
.funkel-tippt i:nth-child(2){animation-delay:.15s}.funkel-tippt i:nth-child(3){animation-delay:.3s}
.funkel-fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px 16px;border-top:1px solid var(--line);font-size:14px}
.funkel-fuss a:not(.btn){color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.fehler-links a{color:inherit;font-weight:600}
/* Vorschau der gewaehlten Fotos (seite.js) */
.foto-vorschau{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.foto-vorschau img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--surface-2)}
.foto-vorschau span{flex:1 1 160px;min-width:0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
/* Mein Bereich: Weg zu Pause und Loeschen mit Abstand zu Abmelden */
.konto-weg{margin:8px 0 0}
.konto-weg a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--ink-3)}
@keyframes funkel-rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes funkel-tippen{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}

/* Tipp in der Bewerbung */
.label-zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:4px 8px;flex-wrap:wrap}
.label-zeile>label{flex:1 1 200px}
.funkel-tipp-knopf{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:0 2px;cursor:pointer;color:var(--gold-text);font:700 14px var(--body);min-height:44px}
.funkel-tipp-knopf .fk{width:34px;height:auto}
.funkel-tipp{flex:1 1 100%;position:relative;margin:4px 0 8px;background:var(--surface);border:1px solid color-mix(in srgb,var(--funke) 50%,var(--line));border-radius:12px;padding:12px 12px;font-size:14px;line-height:1.45;animation:funkel-rein .25s ease-out}
.funkel-tipp p{margin:0}
.funkel-tipp em{font-style:normal;font-weight:600}
@media print{.funkel{display:none}}
/* Lebendige Weser (weser.js): Wellen im Milchstrassen-Foto der Startseite, Funke auf der Danke-Seite nach der Bewerbung */
.weser-wellen{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
.danke-weser{margin-top:20px;display:grid;gap:20px;align-items:start}
.danke-weser>.card{max-width:60ch}
@media (min-width:861px){.danke-weser.mit-szene{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.danke-szene{display:grid;gap:8px}
.danke-szene canvas{display:block;width:100%;height:clamp(220px,30vw,330px);border-radius:var(--radius);background:linear-gradient(#0E2F33,#1E5357 50%,#0B2A2D 56%,#0B2A2D)}
.danke-szene-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.danke-landung{margin:0;font-weight:600;color:var(--teal);opacity:0;transition:opacity .6s}
.danke-landung.sicht{opacity:1}
/* Funken zum Antippen (seite.js): blinken kurz auf, ein paar kleine Funken stieben, Funkel freut sich */
/* beim Drueberfahren keine Veraenderung, nur beim Antippen; auch mit "Bewegung reduzieren" gleich, weil man es selbst ausloest */
svg[data-funke]{-webkit-tap-highlight-color:transparent}
footer.site .foot-mark svg[data-funke]{padding:8px;margin:-8px;box-sizing:content-box}
svg.funke-blitz{animation:funke-blitz .6s cubic-bezier(.2,.9,.3,1)}
@keyframes funke-blitz{0%{transform:scale(1)}28%{transform:scale(1.45) rotate(14deg);filter:brightness(1.5) drop-shadow(0 0 10px var(--funke))}100%{transform:scale(1)}}
.funke-flug{position:fixed;z-index:70;width:11px;height:11px;margin:-4px 0 0 -4px;pointer-events:none;color:var(--funke);animation:funke-flug .7s cubic-bezier(.15,.8,.3,1) forwards}
.funke-flug svg{display:block;width:100%;height:100%}
@keyframes funke-flug{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--fx),var(--fy)) scale(1) rotate(80deg);opacity:0}}
/* 100 Funken angetippt (app/funken.php): Funkel schenkt ein Date */
.funken-glueck{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:16px;background:rgba(11,42,45,.5)}
.funken-glueck[hidden]{display:none}
.fg-karte{background:var(--surface);color:var(--ink);border-radius:var(--radius);width:100%;max-width:440px;padding:20px 24px 24px;text-align:center;box-shadow:0 24px 70px rgba(11,42,45,.4);animation:funkel-rein .3s ease-out}
.fg-karte .fk{display:block;width:120px;height:auto;margin:0 auto 2px}
.fg-karte h2{margin:0 0 8px;font-size:clamp(26px,6vw,32px)}
.fg-karte p{margin:0 0 8px;color:var(--ink-2);text-wrap:pretty}
.fg-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.funke-flug-gross{width:16px;height:16px;margin:-8px 0 0 -8px;z-index:76;animation-duration:.9s}
/* Admin Marketing (app/admin/marketing.php) */
.mk-zeitraum{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.mk-zeitraum a.btn.on{background:var(--teal);border-color:var(--teal);color:var(--on)}
.mk-aus td{color:var(--ink-3)}
.mk-ohne td{border-top:2px solid var(--line)}
.mk-ohne-quellen{margin:8px 0 0}
.mk-matrix td{white-space:nowrap;vertical-align:top}
/* Marketing (10.10.2026): Besucher-Listen, am Handy Quellen als Karten mit Zahlenraster, Wer fehlt wo je Wohnort */
.mk-seiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 24px;padding:0 18px 14px}
.mk-seiten h4{margin:10px 0 4px;font-size:15px}
.mk-seiten ol{margin:0;padding:0;list-style:none;font-size:15px;font-variant-numeric:tabular-nums}
.mk-seiten li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);min-width:0}
.mk-seiten li>span{min-width:0;overflow-wrap:anywhere}
.mk-seiten li.leer{color:var(--ink-3)}
.besucher-zeile{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:14px 18px;color:var(--ink);text-decoration:none}
.besucher-zeile .fine{margin-left:auto}
.mk-orte{display:none}
.mk-ort{padding:12px 16px;border-top:1px solid var(--line)}
.mk-ort>b{display:block;margin-bottom:6px}
.mk-ort ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:15px;font-variant-numeric:tabular-nums}
.mk-ort li span{color:var(--ink-3)}
.mk-ort .fm-fehlt{display:block;margin-top:4px}
@media (max-width:640px){
  .mk-matrix-wrap{display:none}
  .mk-orte{display:block}
  .main table.mk-tabelle.karten tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px}
  .main table.mk-tabelle.karten td{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:0;font-size:20px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
  .main table.mk-tabelle.karten td::before{float:none;margin:0;width:auto;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.3;color:var(--ink-3)}
  .main table.mk-tabelle.karten td:first-child{grid-column:1 / 3;flex-direction:column;justify-content:center;font-size:17px}
  .main table.mk-tabelle.karten td:first-child::before,.main table.mk-tabelle.karten td.tools::before{display:none}
  .main table.mk-tabelle.karten td.tools{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:6px}
  .main table.mk-tabelle.karten td.tools:empty{display:flex}   /* Platz oben rechts frei halten, sonst rutscht eine Zahl hoch */
  .main table.mk-tabelle.mk-woche.karten td:first-child{grid-column:1 / -1}
  .main table.mk-tabelle.karten td.leer{grid-column:1 / -1;font-size:15px;font-weight:400}
  .besucher-zeile .fine{margin-left:0}
}
.mk-matrix .fm{display:block}
.mk-matrix .fm-fehlt{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--gold-text);background:color-mix(in srgb,var(--gold) 16%,transparent);border-radius:999px;padding:1px 8px}
.mk-summe td{border-top:2px solid var(--line);font-weight:600}
.mk-qr-fenster{display:grid;justify-items:center;gap:12px;text-align:center}
.mk-qr{width:min(260px,70vw);background:#fff;padding:12px;border-radius:12px}
.mk-qr canvas,.mk-qr img{display:block;width:100%!important;height:auto!important}
.mk-qr canvas{display:none!important}
/* Empfehlungslink in Mein Bereich (app/empfehlung.php) */
.empf-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.empf-adresse{font-weight:600;color:var(--teal);background:var(--surface-2);border-radius:999px;padding:8px 16px;overflow-wrap:anywhere}
/* Seiten fuer einzelne Orte (public/ortseite.php) */
.ort-hero .wrap{grid-template-columns:1fr}
.ort-hero .lead{max-width:62ch}
.lokale li .ort-minuten{font-size:14px!important;font-weight:600;color:var(--teal)!important}
.ort-ideen{margin-top:16px}
.ort-mehr{margin:16px 0 0}
.ort-steps{margin-top:16px}
.ort-andere{margin:16px 0 0;color:var(--ink-2);font-size:14px}
/* Spass-Test "Welcher Date-Typ bist du?" (public/date-typ.php, assets/date-typ.js) */
.dt{max-width:860px}
.dt h1{font-size:clamp(36px,6vw,54px);line-height:1.05;text-wrap:balance}
.dt h1 i,.dt-karte h2 i{font-style:italic;font-weight:500;color:var(--gold-text)}
.dt .nw{white-space:nowrap}
.dt .lead{max-width:56ch;margin-top:16px;color:var(--ink-2);font-size:20px}
.dt-zwischen{font-size:24px;margin-top:44px}
.dt-typen{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dt-typen li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:14px;line-height:1.3;color:var(--ink-2)}
.dt-typen svg{width:30px;height:30px;color:var(--gold-text);display:block;margin-bottom:8px}
.dt-typen b{display:block;color:var(--ink);font-weight:700}
.dt-stand{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-3);font-weight:600}
.dt-balken{flex:1;height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.dt-balken i{display:block;height:100%;background:var(--gold);border-radius:99px}
.dt-frage h2{font-size:clamp(28px,5vw,38px);line-height:1.12;margin:16px 0 20px;text-wrap:balance}
.dt-wahl{display:grid;gap:8px;counter-reset:dt}
.dt-wahl button{display:flex;align-items:center;gap:16px;text-align:left;width:100%;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:16px 16px;font:400 17px/1.35 var(--body);cursor:pointer;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.dt-wahl button::before{counter-increment:dt;content:counter(dt,upper-alpha);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--body);background:var(--surface-2);color:var(--ink-2)}
@media (hover:hover){.dt-wahl button:hover{border-color:var(--teal)}}
.dt-wahl button.an{background:var(--surface-2);border-color:var(--teal)}
.dt-wahl button.an::before{background:var(--teal);color:var(--surface)}
.dt-zurueck{margin-top:16px;background:none;border:0;color:var(--ink-3);font:600 14px var(--body);cursor:pointer;padding:8px 0}
.dt-ergebnis:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:start}
@media (max-width:700px){.dt-ergebnis:not([hidden]){grid-template-columns:1fr}}
.dt-karte{background:var(--night);color:var(--night-ink);border-radius:24px;padding:28px 24px 24px}
.dt-karte .dt-sym{width:56px;height:56px;color:var(--gold);display:block}
.dt-du{margin:16px 0 0;font-size:17px;opacity:.85}
.dt-karte h2{font-size:clamp(34px,6vw,46px);line-height:1.04;margin:2px 0 0;color:var(--night-ink)}
.dt-karte h2 i{color:var(--gold)}
.dt-karte p:last-child{margin:16px 0 0;color:var(--night-ink);opacity:.9;max-width:48ch}
.dt-passt{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.dt-passt h3{font-size:20px;line-height:1.25;margin:0}
.dt-passt p{margin:8px 0 0;color:var(--ink-2)}
.dt-links .cta-row{margin-top:16px}
.dt-teilen{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dt-teilen img{display:block;width:100%;max-width:220px;height:auto;aspect-ratio:9/16;border-radius:12px;box-shadow:var(--shadow)}
.dt-teilen .btn svg{width:16px;height:16px;flex:none}
.dt-teilen .fine{margin:2px 0 0}
@media (max-width:700px){.dt-teilen img{max-width:200px}}
@media (max-width:520px){.dt-typen li:last-child:nth-child(odd){grid-column:1/-1}}

/* Cyberdox Web-Standard M7: am Touchscreen jedes Bedienelement mindestens 44 px hoch */
@media (pointer:coarse){.chip,.theme-toggle,.flow-switch button,.side-knopf{min-height:44px}input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select{min-height:44px}.theme-toggle{min-width:44px}}

/* Blind Dates, Planen: Vorschläge ganz oben (beste_paare, 20.10.2026) */
.dv-liste{display:grid;gap:8px;padding:0 16px 16px}
.dv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 16px;border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));border-radius:var(--radius);background:color-mix(in srgb,var(--teal) 6%,var(--surface))}
.dv-paar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px}
.dv-paar .plus{color:var(--ink-3)}
.dv-info{grid-column:1;font-size:14px;color:var(--ink-2)}
.dv .dv-knoepfe{grid-column:2;grid-row:1 / span 2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.dv{grid-template-columns:1fr}.dv .dv-knoepfe{grid-column:1;grid-row:auto;justify-content:flex-start}}
.dv-fuss{display:flex;gap:8px;justify-content:flex-end;padding:16px}

/* Profilbilder in den Listen Nutzer und Date planen etwas groesser (23.10.2026) */
.nutzer-tabelle .mini-foto,.wahl-liste .mini-foto{width:36px;height:36px;vertical-align:middle;font-size:15px;line-height:34px;margin-right:10px}
/* „passt nicht ganz“ immer in eigener Zeile unter dem Namen, buendig mit dem Namen (Foto 36 px + 10 px Abstand) */
.wahl-liste .kand-hinweis{margin:4px 0 0 46px;line-height:1}

/* Absagen mit freiwilligem Grund (Mein Bereich, 26.10.2026): „Der Abend passt mir nicht“ zeigt das Verschieben statt der Absage */
.absage-gruende{display:grid;gap:6px}
.absage-form .nur-abend{display:none}
.absage-form:has(input[value="abend"]:checked) .nur-abend{display:block}
.absage-form:has(input[value="abend"]:checked) .tools .nur-abend{display:inline-flex}
.absage-form:has(input[value="abend"]:checked) .nicht-abend{display:none}

/* Date-Vorschlag in Mein Bereich: Fragebogen-Antworten und „Was euch verbindet“ (27.10.2026, Vorschau abgesegnet) */
.verbindet{margin-top:4px;padding:14px 16px;border-radius:var(--radius);background:color-mix(in srgb,var(--teal) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 25%,var(--line))}
.verbindet b{font-family:var(--display);font-size:17px}
.verbindet ul{margin:8px 0 0;padding-left:20px;color:var(--ink-2)}
.verbindet li{margin:4px 0}
.ueber-sie{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:15px}
.ueber-sie dt{color:var(--ink-3)}
.ueber-sie dd{margin:0;color:var(--ink-2)}