/* nochfrei: gemeinsame Gestaltung. Hell, luftig, Mint als Signal für «frei», Koralle für Rabatt. */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/Figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  --bg:#F5F7F4; --surface:#FFFFFF; --sunk:#EEF2EE; --ink:#0D1411; --muted:#5D6762; --line:#E2E7E3;
  --mint:#2EE59D; --mint-soft:#D8FBEA; --mint-ink:#0D1411; --mint-strong:#047A55;
  --deal:#E5364F; --deal-soft:#FFE4E8; --deal-ink:#FFFFFF;
  --taken:#8B958F; --shadow:0 1px 2px rgba(13,20,17,.05),0 10px 30px -18px rgba(13,20,17,.25);
  --p1:#E0457B; --p2:#2F7DEB; --p3:#D9822B; --p4:#7C5CE0; --p5:#0E9F8E; --p6:#C2410C; --p7:#4F46E5; --p8:#65A30D;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A0E0C; --surface:#141A17; --sunk:#1B2420; --ink:#EEF5F1; --muted:#94A39C; --line:#25302B;
  --mint:#2EE59D; --mint-soft:#123A2A; --mint-ink:#06140E; --mint-strong:#5EF0B5;
  --deal:#FF5C72; --deal-soft:#3D1820; --deal-ink:#1A0508;
  --taken:#68736E; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -18px rgba(0,0,0,.8);
  --p1:#F06B98; --p2:#5B9BF2; --p3:#EBA048; --p4:#9A80F0; --p5:#2CC4B1; --p6:#F07B45; --p7:#8B85F5; --p8:#8BC34A; color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--mint-strong);outline-offset:2px}
[hidden]{display:none!important}

/* Marke */
.logo{display:inline-flex;align-items:center;gap:8px;font:800 20px/1 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}
.logo i{font-style:normal;color:var(--mint-strong)}
.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:600}
.live b{width:7px;height:7px;border-radius:50%;background:var(--taken)}
.live.on b{background:var(--mint);animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 var(--mint-soft)}50%{box-shadow:0 0 0 5px var(--mint-soft)}}

/* Personen */
.av{--c:var(--muted);position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font:700 13px/1 var(--display);flex:none}
.av.lg{width:44px;height:44px;font-size:17px}
.c1{--c:var(--p1)}.c2{--c:var(--p2)}.c3{--c:var(--p3)}.c4{--c:var(--p4)}.c5{--c:var(--p5)}.c6{--c:var(--p6)}.c7{--c:var(--p7)}.c8{--c:var(--p8)}.gone{--c:var(--taken)}

/* Rabatt und Preis */
.deal{display:inline-flex;align-items:center;font:800 12px/1 var(--display);letter-spacing:.01em;color:var(--deal-ink);background:var(--deal);border-radius:999px;padding:5px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.price{font-variant-numeric:tabular-nums;font-weight:700}
.price s{color:var(--muted);font-weight:500;margin-left:4px}

/* Formularteile */
.field{display:grid;gap:8px;min-width:0}
.field > span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px 4px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--ink)}
.chip.person{padding:4px 14px 4px 4px}
.chip.day{flex-direction:column;gap:0;border-radius:var(--r-sm);padding:8px 12px;min-width:62px;line-height:1.2;flex-shrink:0;white-space:nowrap}
.chip.day small{font-size:12px;font-weight:500;opacity:.7}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.deal-chip[aria-pressed="true"]{background:var(--deal);border-color:var(--deal);color:var(--deal-ink)}
input[type=time],input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number]{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:11px 14px;font-variant-numeric:tabular-nums;font-size:16px;transition:border-color .15s}
input:focus{border-color:var(--ink);outline:none}
.field select{width:100%;-webkit-appearance:none;appearance:none;border:1px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b7570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;border-radius:var(--r-sm);padding:11px 40px 11px 14px;font:16px var(--body);line-height:inherit;color:var(--ink);transition:border-color .15s;cursor:pointer}
.field select:focus{border-color:var(--ink);outline:none}
.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:800;background:var(--mint);color:var(--mint-ink);transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:scale(.98)}
.btn.big{font-size:16px;padding:15px 28px}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:700}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.note{font-size:13px;color:var(--muted)}
.note.ok{color:var(--mint-strong);font-weight:700}
.note.err{color:var(--deal);font-weight:700}
.link{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:13px;font-weight:600}
.link.danger{color:var(--deal)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Wortmarke im Fliesstext (gesetzt von common.js) */
.nf{font-weight:800;color:var(--ink);white-space:nowrap}
.nf .nf-f{font-weight:800;color:var(--mint-strong)}
.win .nf,.bar-admin .nf,.phone .nf{color:inherit}
.win .nf .nf-f,.bar-admin .nf .nf-f,.phone .nf .nf-f{color:var(--mint)}

/* Hinweise vom Admin (assets/hinweise.js): eine schmale Leiste, höchstens zwei Zeilen Text */
.hinweis{display:flex;align-items:center;gap:8px 10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:7px 8px 7px 12px;font-size:13.5px;line-height:1.35;color:var(--ink)}
.hinweis[hidden]{display:none}
.hinweis .ic{flex:none;font-size:15px}
.hinweis .tx{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hinweis .tx a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.hinweis .nav{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.hinweis button{border:0;background:none;color:var(--muted);font:700 16px/1 var(--body);width:28px;height:28px;border-radius:8px;cursor:pointer;flex:none}
.hinweis button:hover{background:var(--sunk);color:var(--ink)}
.hinweis.stoerung{background:var(--deal-soft);border-color:transparent;color:var(--deal)}
.hinweis.stoerung .nav,.hinweis.stoerung button{color:var(--deal)}

/* Ferien in den Einstellungen */
.ferienliste{display:grid;gap:8px;margin:4px 0 12px}
.ferie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;font-size:14px}
.ferie .acts{display:flex;gap:14px}
.ferie .badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--sunk);border-radius:999px;padding:2px 8px;margin-left:4px}
.fform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 8px}
.fform input[type=date]{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:10px 12px;font-size:15px;color:var(--ink)}
.fwirk{min-height:1.4em;font-weight:600}
.fwirk .err{color:var(--deal)}
.warnbox{background:var(--deal-soft);color:var(--ink);border-radius:var(--r-sm);padding:10px 12px;font-size:14px}

/* Rechnungen im Abo-Dialog */
.rliste{display:grid;gap:6px}
.rzeile{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 12px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;color:var(--ink);text-decoration:none}
.rzeile:hover{border-color:var(--mint-strong)}
.rzeile .pdf{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--mint-strong)}
@media (max-width:480px){.rzeile{grid-template-columns:1fr auto auto}.rzeile span:nth-child(2){grid-column:1/-1;order:3;color:var(--muted)}}

/* abweichende Rechnungsadresse */
.field textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:11px 14px;font:16px/1.4 var(--body);color:var(--ink);resize:vertical;transition:border-color .15s}
.field textarea:focus{border-color:var(--ink);outline:none}
.field .hint{font-size:13px;color:var(--muted);line-height:1.4}