/* ============================================================
   Maison Oléron — "Île de Soleil" (the island of sun)
   Design: "Postcard dashboard" (Layout A)
   Palette: warm & luminous — golden sun, terracotta/coral,
            warm sand & cream, azure sea as accent.
   Type: Fraunces (headings) + Inter (UI). Mobile-first / fluid.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── "Île de Soleil" sun palette ── */
  --cream:        #FFFBF2;   /* page background — warm cream */
  --surface:      #FFFFFF;   /* cards */
  --sand:         #F4E7CB;   /* section surfaces / bands */
  --sand-soft:    #FBF2DF;

  --sunset:       #E07B4A;   /* PRIMARY — warm terracotta / coral */
  --sunset-dk:    #C25E30;
  --sunset-pale:  #FBE5D6;

  --sun:          #F6B81C;   /* bright accent — golden sun */
  --sun-dk:       #CF8E12;
  --sun-pale:     #FCEFC9;

  --sea:          #2C8FA3;   /* azure sea — secondary accent */
  --sea-pale:     #DCEDF0;

  --olive:        #7C8A4E;   /* warm green — secondary accent */
  --olive-pale:   #ECEEDA;

  --ink:          #3B2E22;   /* text — warm brown-black */
  --ink-soft:     #6B5C4D;   /* muted text */
  --ink-faint:    #A89A86;   /* dim text */
  --line:         rgba(59,46,34,0.10);
  --line-strong:  rgba(59,46,34,0.18);

  /* Calendar layer colours */
  --layer-stay:   #2C8FA3;   /* occupancy — azure */
  --layer-bin:    #CF8E12;   /* garbage — golden amber */
  --layer-market: #7C8A4E;   /* markets — olive */
  --layer-holiday:#B0468B;   /* holidays — magenta */
  --layer-service:#5b6cc4;   /* service — indigo */

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Spacing / shape */
  --container:  1080px;
  --px:         clamp(1rem, 4vw, 2rem);
  --radius:     14px;
  --radius-lg:  22px;
  --shadow:     0 2px 8px rgba(59,46,34,0.06);
  --shadow-md:  0 8px 28px rgba(59,46,34,0.10);
  --shadow-lg:  0 14px 44px rgba(59,46,34,0.16);
  --trans:      0.22s ease;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html { font-family: var(--sans); font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background: var(--cream); color: var(--ink); line-height: 1.6; min-height: 100dvh; }
img { max-width: 100%; display: block; }
a { color: var(--sunset-dk); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--sunset); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--px); }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.verify { display:inline-block; font: 600 0.62rem var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--sunset-dk); background:rgba(224,123,74,.13); border:1px solid rgba(224,123,74,.32); padding:.1rem .4rem; border-radius:6px; vertical-align:middle; margin-left:.4rem; }

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem var(--px);
  background: rgba(255,251,242,0.85);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__back { display:none; align-items:center; gap:.3rem; font-weight:500; color:var(--sunset-dk); padding:.3rem .2rem; }
.topbar__back svg { width:18px; height:18px; }
body.in-section .topbar__back { display:inline-flex; }
.topbar__brand { display:flex; align-items:center; gap:.55rem; font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--ink); min-width:0; }
.topbar__brand span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media (max-width:520px){ .topbar__brand { font-size:.98rem; } }
.topbar__brand .dot { width:11px; height:11px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px rgba(246,184,28,.22); }
.topbar__spacer { flex: 1; }

/* Language switch */
.lang { display:inline-flex; background:var(--sand-soft); border:1px solid var(--line); border-radius:999px; padding:2px; }
.lang button { padding:.28rem .6rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); border-radius:999px; letter-spacing:.02em; }
.lang button.active { background:var(--surface); color:var(--sunset-dk); box-shadow:var(--shadow); }

.iconbtn { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--ink-soft); transition:background var(--trans),color var(--trans); }
.iconbtn:hover { background:var(--sand-soft); color:var(--ink); }
.iconbtn svg { width:20px; height:20px; }

/* ── Konto-Anzeige & Menü ─────────────────────────────────── */
.account { position:relative; }
.account #accountBtn { position:relative; }
/* grüner Punkt am Icon, sobald angemeldet */
.account__online { display:none; position:absolute; right:5px; top:5px; width:9px; height:9px; border-radius:50%;
  background:var(--olive,#5f8a3f); border:2px solid var(--surface); }
body.is-auth .account__online { display:block; }
.account__menu { position:absolute; right:0; top:46px; z-index:70; min-width:210px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:.9rem; animation:pop .18s ease; }
.account__menu[hidden] { display:none; }
.account__who { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.7rem; }
.account__name { font-weight:600; color:var(--ink); word-break:break-word; }
.account__role { align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.1rem .5rem; border-radius:999px; background:var(--sand); color:var(--ink-soft); }
.account__role[data-role="admin"] { background:var(--sunset-pale); color:var(--sunset-dk); }
.account__exp { font-size:.78rem; color:var(--ink-faint); }
.account__exp:empty { display:none; }
.account__menu .btn { width:100%; justify-content:center; margin:0; }

/* ── Hero — full-viewport island start page ───────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: 100dvh;
  display: grid; place-items: center; text-align: center;
  padding: calc(20vh) var(--px) 18vh;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(48,28,12,.18) 0%, rgba(48,28,12,.20) 45%, rgba(48,28,12,.62) 100%),
    var(--hero-img, none),
    radial-gradient(125% 95% at 72% 14%, #FBD27A 0%, #F6A84C 30%, #E97A45 58%, #C9534F 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
.hero::after { /* wave silhouette into the page */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:48px;
  background: var(--cream);
  -webkit-mask: radial-gradient(30px 30px at 30px -10px, transparent 98%, #000) repeat-x;
  mask: radial-gradient(30px 30px at 30px -10px, transparent 98%, #000) repeat-x;
  -webkit-mask-size: 60px 48px; mask-size: 60px 48px;
}
.hero__inner { position: relative; z-index: 1; max-width: 40ch; }
.hero__eyebrow { font:600 .82rem var(--sans); letter-spacing:.2em; text-transform:uppercase; opacity:.95; text-shadow:0 1px 12px rgba(0,0,0,.3); }
.hero h1 { color:#fff; font-size: clamp(2.4rem, 9vw, 4.6rem); margin:.4rem 0 .5rem; text-shadow:0 2px 24px rgba(0,0,0,.3); font-weight:600; }
.hero__sub { font-size:1.08rem; opacity:.96; margin:0 auto; text-shadow:0 1px 14px rgba(0,0,0,.35); }
.hero__scroll {
  position:absolute; left:50%; bottom:clamp(1.4rem,5vh,3rem); transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.3rem; color:#fff; opacity:.9;
  font:600 .7rem var(--sans); letter-spacing:.16em; text-transform:uppercase;
  background:none;
}
.hero__scroll svg { width:26px; height:26px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }

/* ── Coming-up banner ─────────────────────────────────────── */
.comingup {
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin: 1.1rem auto -0.4rem; max-width: var(--container);
  background: linear-gradient(90deg, rgba(246,184,28,.16), rgba(246,184,28,.05));
  border:1px solid rgba(207,142,18,.3); border-left:4px solid var(--sun-dk);
  border-radius: var(--radius); padding:.7rem .9rem;
}
.comingup .ico { font-size:1.2rem; }
.comingup strong { font-weight:600; }
.comingup .when { color:var(--ink-soft); font-size:.9rem; }

/* ── Tages-Highlights (Müll / Wetter / Gezeiten) ──────────── */
.highlights { display:flex; gap:.7rem; flex-wrap:wrap; margin:1.1rem 0 0; }
.hl { flex:1 1 170px; display:flex; align-items:center; gap:.7rem; text-align:left; font:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.65rem .85rem;
  cursor:pointer; transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans); }
.hl:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.hl__ico { font-size:1.7rem; line-height:1; flex:0 0 auto; }
.hl__txt { display:flex; flex-direction:column; min-width:0; }
.hl__title { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.hl__val { font-weight:600; font-size:1rem; line-height:1.25; }
.hl--sos { background:rgba(224,123,74,.1); border-color:rgba(224,123,74,.45); }
.hl--sos .hl__title { color:#c0532a; }
.hl--todo { background:var(--olive-pale); border-color:rgba(90,110,60,.35); }

/* Hero – aktueller Aufenthalt */
.hero__stay { position:relative; z-index:1; margin-top:.5rem; color:#fff; font-size:1rem; font-weight:600; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.hero__stayday { font-weight:400; opacity:.92; }

/* Todo-Liste */
.todolist { list-style:none; }
.todo { display:flex; align-items:flex-start; gap:.7rem; padding:.6rem 0; border-top:1px solid var(--line); }
.todo:first-child { border-top:none; }
.todo__box { flex:0 0 auto; width:24px; height:24px; border:2px solid var(--line-strong); border-radius:7px; display:grid; place-items:center; background:var(--cream); cursor:pointer; color:transparent; }
.todo.done .todo__box { background:var(--olive); border-color:var(--olive); color:#fff; }
.todo__box svg { width:15px; height:15px; }
.todo__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.todo.done .todo__txt { text-decoration:line-through; color:var(--ink-faint); }
.todo__who { font-size:.78rem; color:var(--ink-soft); }
.todo__desc { font-size:.85rem; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; margin-top:.15rem; }
.todo.done .todo__desc { color:var(--ink-faint); }
.todo .cl-ctrls { margin-left:auto; }
/* Todo-Fotos: kleine Thumbnail-Strip unter dem Text; anklickbar → Lightbox */
.todo__photos { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.3rem; }
.todo__photo { width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:zoom-in; background:var(--sand-soft); }
.todo__photo:hover { border-color:var(--line-strong); }

/* Foto-Grid im Editor: quadratische Zellen mit Entfernen-Kreuz */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)); gap:.4rem; }
.photo-grid:empty { display:none; }
.photo-grid__cell { position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--sand-soft); }
.photo-grid__cell--pending { outline:2px dashed var(--sunset); outline-offset:-2px; }
.photo-grid__cell img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.photo-grid__rm { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; font-size:.7rem; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; }
.photo-grid__rm:hover { background:rgba(0,0,0,.85); }

/* Vollbild-Lightbox: klick irgendwohin oder Escape schliesst */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.86); display:grid; place-items:center; padding:2rem; cursor:zoom-out; }
.lightbox.hidden { display:none; }
.lightbox img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }

/* ── Dashboard grid (Postcard cards) ──────────────────────── */
.dash { padding: 1.6rem var(--px) 2.5rem; }
.dash__groups { display:flex; flex-direction:column; gap:1.8rem; }
.dash__group-title { font:600 .8rem var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .8rem; }
.dash__grid { display:grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }

/* ── Nächste Termine (Müll, An-/Abreise, Service) ─────────── */
.upcoming { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:.45rem .35rem; margin-bottom:1.1rem; }
.upcoming__h { font:600 .76rem var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding:.4rem .85rem .25rem; }
.up-row { display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; font:inherit;
  padding:.5rem .85rem; margin:.2rem .15rem; width:calc(100% - .3rem); border-radius:10px; cursor:pointer;
  border-left:4px solid transparent; transition:filter var(--trans); }
.up-row:hover { filter:brightness(.97); }
.up-ico { font-size:1.25rem; flex:0 0 auto; width:1.6rem; text-align:center; }
.up-label { font-weight:600; }
.up-when { margin-left:auto; color:var(--ink-soft); font-size:.85rem; text-align:right; white-space:nowrap; }
/* Farbe nach Typ */
.up-row--bin     { background:rgba(246,184,28,.1);  border-left-color:var(--sun-dk); }
.up-row--stay    { background:rgba(31,111,120,.08); border-left-color:#1F6F78; }
.up-row--service { background:var(--olive-pale);    border-left-color:var(--olive); }
.up-row--todo    { background:rgba(108,91,189,.12); border-left-color:#6b5bbd; }
/* Dringend (heute/morgen) → Warnung */
.up-row--urgent  { background:rgba(217,72,42,.12); border-left-color:#d9482a; }
.up-row--urgent .up-label, .up-row--urgent .up-when { font-weight:700; color:var(--ink); }

/* ── Feature-Kacheln: 2×2 (Wetter, Gezeiten, Aufgaben, Gästebuch) ── */
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.feat { text-align:left; display:flex; flex-direction:column; gap:.35rem; padding:1.2rem 1.15rem 1.3rem;
  min-height:152px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow); cursor:pointer; transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans); }
.feat:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.feat__ico { font-size:2rem; line-height:1; }
.feat__title { font-family:var(--serif); font-weight:600; font-size:1.2rem; }
.feat__sub { color:var(--ink-soft); font-size:.9rem; line-height:1.4; margin-top:auto; }
.feat--sky   { background:var(--sea-pale);  border-color:rgba(31,111,120,.22); }
.feat--amber { background:var(--sun-pale);  border-color:rgba(207,142,18,.28); }
.feat--olive { background:var(--olive-pale);border-color:rgba(90,110,60,.28); }
.feat--rose  { background:rgba(224,123,74,.12); border-color:rgba(224,123,74,.28); }
.feat--tide  { background:var(--sea-pale);  border-color:rgba(31,111,120,.22); }
.feat--nudge { border-style:dashed; border-width:2px; border-color:rgba(224,123,74,.65); }
.feat--nudge .feat__title { color:#c0532a; }
/* Wetter-Kachel: 2-Spalten – Symbol/Temperatur links, Details rechts */
.wx-cols { display:flex; align-items:center; gap:1.1rem; margin:auto 0; }
.wx-now { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.wx-emoji { font-size:3rem; line-height:1; }
.wx-temp { font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--ink); line-height:1.05; }
.wx-cond { font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.wx-side { display:flex; flex-direction:column; gap:.4rem; min-width:0; font-size:.85rem; color:var(--ink-soft); }
.wx-range { color:var(--ink-faint); }
.wx-wind { display:flex; align-items:center; gap:.3rem; }
.wx-wind__a { display:inline-block; color:var(--ink-faint); }
.wx-sun { display:flex; align-items:center; gap:.7rem; }
.wx-sun__s { color:#e7a92b; font-size:1.05rem; }
.wx-sun__t { font-variant-numeric:tabular-nums; }
.wx-sun__a { color:var(--ink-faint); font-size:.66rem; }

/* Vorschau-Modus (Admin als anderer Nutzer) */
.preview-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:1.3rem; z-index:70;
  display:flex; align-items:center; gap:.9rem; max-width:calc(100% - 2rem);
  background:#34495e; color:#fff; padding:.45rem .45rem .45rem 1.1rem; border-radius:999px;
  box-shadow:var(--shadow-lg); font-size:.9rem; }
.preview-bar strong { font-weight:700; }
.preview-bar .btn { background:#fff; color:#34495e; border:none; padding:.35rem .9rem; }
body.previewing .admin-only { display:none !important; }
/* Tide-Kurve in der Wetter-Detailansicht */
.tide-detail { max-width:560px; margin:.2rem 0 .9rem; }
/* Gezeiten-Kachel: Kurve + Zeitachse + Klartext-Status (vertikal) */
.wxf__chart { width:100%; margin-top:.5rem; }
.tide-svg { width:100%; height:auto; display:block; }
.wxf__axis { display:flex; justify-content:space-between; margin-top:.1rem; font-size:.7rem; color:var(--ink-faint); }
.wxf__status { font-size:.95rem; font-weight:600; color:#1a6068; margin-top:.45rem; }

.discover-btn { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; margin-top:1.4rem;
  padding:.95rem; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface);
  font:inherit; font-weight:600; color:var(--ink); cursor:pointer; transition:var(--trans); }
.discover-btn:hover { border-color:var(--sunset); color:var(--sunset); }
.discover-btn svg { width:18px; height:18px; }

/* ── Notfall-FAB (immer sichtbar) ─────────────────────────── */
.sos-fab { position:fixed; right:1rem; bottom:1.3rem; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; width:62px; height:62px; border-radius:50%;
  background:#d9482a; color:#fff; border:none; cursor:pointer; font-size:.58rem; font-weight:700;
  box-shadow:0 6px 20px rgba(217,72,42,.45); transition:transform var(--trans), background var(--trans); }
.sos-fab svg { width:23px; height:23px; }
.sos-fab:hover { background:#c33f24; transform:translateY(-2px); }
body.locked .sos-fab { display:none; }
.card {
  position:relative; overflow:hidden; text-align:left;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.05rem 1.05rem 1.15rem;
  min-height: 132px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow: var(--shadow); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card:active { transform: translateY(-1px); }
.card__ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.5rem; background:var(--sun-pale); }
.card__title { font-family:var(--serif); font-weight:600; font-size:1.18rem; margin-top:.7rem; }
.card__desc { color:var(--ink-soft); font-size:.86rem; margin-top:.15rem; }
.card__arrow { position:absolute; top:1.1rem; right:1.1rem; color:var(--ink-faint); transition:transform var(--trans),color var(--trans); }
.card:hover .card__arrow { transform:translateX(3px); color:var(--sunset); }
.card[data-accent="rose"]  .card__ico { background:rgba(224,123,74,.16); }   /* coral */
.card[data-accent="pine"]  .card__ico { background:var(--olive-pale); }
.card[data-accent="sand"]  .card__ico { background:var(--sand); }
.card[data-accent="amber"] .card__ico { background:var(--sun-pale); }
.card--wide { grid-column: 1 / -1; flex-direction:row; align-items:center; gap:1rem; min-height:auto; }
.card--wide .card__title { margin-top:0; }
.card--wide .card__ico { background:var(--sea-pale); }

/* ── Section views ────────────────────────────────────────── */
.view { display:none; padding: 1.4rem 0 3rem; }
.view.active { display:block; animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(6px);} to{opacity:1;transform:none;} }
.view__head { margin-bottom: 1.3rem; }
.view__eyebrow { font:600 .76rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--sunset-dk); }
.view__head h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); margin-top:.25rem; }
.view__head p { color:var(--ink-soft); margin-top:.4rem; max-width:60ch; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.1rem 1.2rem; box-shadow:var(--shadow); margin-bottom:1rem; }
.panel h3 { font-size:1.1rem; margin-bottom:.7rem; display:flex; align-items:center; gap:.5rem; }
.info-text { white-space: pre-wrap; }

/* Checklist */
.checklist { list-style:none; display:flex; flex-direction:column; gap:.1rem; }
.checklist li { display:flex; gap:.7rem; align-items:flex-start; padding:.6rem .2rem; border-bottom:1px solid var(--line); }
.checklist li:last-child { border-bottom:none; }
.checklist .box { flex:0 0 22px; width:22px; height:22px; margin-top:1px; border-radius:7px; border:2px solid var(--line-strong); display:grid; place-items:center; transition:var(--trans); }
.checklist li.done .box { background:var(--sunset); border-color:var(--sunset); }
.checklist li.done .box svg { opacity:1; }
.checklist .box svg { width:13px; height:13px; color:#fff; opacity:0; }
.checklist .ci { display:flex; flex-direction:column; gap:.2rem; flex:1; }
.checklist .txt { cursor:pointer; }
.checklist li.done .txt { color:var(--ink-faint); text-decoration:line-through; }
.checklist .ci-note   { font-size:.8rem; color:var(--ink-soft); }
.checklist .ci-img { display:inline-block; margin-top:.4rem; }
.checklist .ci-img img { max-height:120px; max-width:100%; border-radius:10px; display:block; }
.cl-img-preview { max-height:160px; max-width:100%; border-radius:10px; margin-bottom:.5rem; }
.checklist .ci-winter { font-size:.8rem; color:var(--sea); display:none; }
body.show-winter .checklist .ci-winter { display:block; }
.checklist .cat { margin:.9rem 0 .2rem; font:600 .74rem var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sunset-dk); }
.cl-toolbar { margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
/* Admin-Bedienelemente je Checklisten-Zeile */
.checklist li.has-ctrls { align-items:center; }
.cl-ctrls { margin-left:auto; display:flex; gap:.25rem; flex:0 0 auto; opacity:.85; transition:var(--trans); }
.checklist li:hover .cl-ctrls { opacity:1; }
.cl-ctrl { width:30px; height:30px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; cursor:pointer; font-size:.9rem; line-height:1; color:var(--ink-soft); }
.cl-ctrl:hover { background:var(--sand); color:var(--ink); border-color:var(--sunset); }
.cl-extra.hidden { display:none; }
.cl-extra__h { font-size:.78rem; font-weight:600; color:var(--ink-faint); margin:.7rem 0 .3rem; }
#clmKind { display:inline-flex; }
.modal__box textarea { width:100%; padding:.6rem .8rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--cream); font:inherit; resize:vertical; min-height:5.5rem; }
.modal__box textarea:focus { outline:none; border-color:var(--sunset); box-shadow:0 0 0 3px var(--sunset-pale); }
.modal__actions .btn { margin-top:0; flex:1; }

/* ── Login-Wall: ohne Anmeldung nur die Login-Maske ──────── */
body.locked .dash,
body.locked #comingUp,
body.locked .botnav,
body.locked .hero__scroll { display:none !important; }
body.locked #loginModal { display:grid; }

/* Text-Link-Button (z. B. „Passwort vergessen?") */
.linkbtn { display:inline-block; margin-top:.7rem; background:none; border:none; padding:0; cursor:pointer;
  color:var(--sunset-dk); font:inherit; font-size:.85rem; text-decoration:underline; }
.linkbtn:hover { color:var(--sunset); }
.translate-hint { text-align:left; color:var(--sunset-dk); margin:0 0 .6rem; }

/* Wetter */
.wx-current { text-align:center; }
.wx-now { display:flex; align-items:center; justify-content:center; gap:.6rem; }
.wx-now .wx-emoji { font-size:2.6rem; }
.wx-temp { font-size:2.4rem; font-weight:600; }
.wx-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; text-align:center; }
.wx-day { padding:.4rem .2rem; border-radius:10px; background:var(--cream); }
.wx-day .wx-emoji { font-size:1.5rem; }
.wx-dow { font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.wx-mm { font-size:.85rem; }
.wx-rain { font-size:.72rem; }
@media (max-width:560px){ .wx-grid { grid-template-columns:repeat(4,1fr); } }
.tide-date { padding:.5rem .7rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--cream); font:inherit; margin-bottom:.6rem; }
.tide-row { display:flex; gap:.5rem; align-items:baseline; padding:.2rem 0; }
.tide-src { text-align:left; }

/* Kalender-Abo */
.sub-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.6rem 0; border-bottom:1px solid var(--line); }
.sub-row:last-child { border-bottom:none; }
.sub-name { font-weight:600; flex:1; min-width:7rem; }
.sub-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.sub-actions .btn { margin:0; }

/* Geschäfte/Märkte-Editor */
.btn--sm { padding:.3rem .7rem; font-size:.82rem; }
.panel-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.panel-head h3 { margin:0; flex:1; }
.row.has-ctrls { position:relative; padding-right:120px; }
.row.has-ctrls .cl-ctrls { position:absolute; top:.5rem; right:.3rem; }
.field.two { display:flex; gap:.6rem; }
.field.two > span { flex:1; }

/* Gästebuch */
.gb-entry { padding:.65rem 0; border-top:1px solid var(--line); }
.gb-entry:first-of-type { border-top:none; }
.gb-entry__meta { font-size:.8rem; color:var(--ink-soft); margin-bottom:.2rem; overflow:hidden; }
.gb-entry__text { white-space:pre-wrap; line-height:1.45; }
.gb-entry__img { display:inline-block; margin-top:.5rem; }
.gb-entry__img img { max-height:160px; max-width:100%; border-radius:10px; display:block; }
.gb-entry__route { display:inline-block; margin-top:.4rem; font-size:.85rem; font-weight:600; color:var(--sunset); text-decoration:none; }
.gb-entry__route:hover { text-decoration:underline; }

/* Rundmail-Empfänger */
.bc-actions { font-size:.85rem; margin:0 0 .5rem; }
.bc-recipients { max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:.4rem .6rem; margin-bottom:1rem; }
.bc-recipient { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; cursor:pointer; }
.bc-recipient + .bc-recipient { border-top:1px solid var(--line); }
.bc-recipient input { flex:0 0 auto; }
.season-row { border:1px solid var(--line); border-radius:10px; padding:.5rem .6rem; margin-bottom:.5rem; }
.season-period { display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; }
.season-period input { width:6.5rem; padding:.45rem .5rem; border:1px solid var(--line-strong); border-radius:8px; background:var(--cream); font:inherit; }
.season-wd { display:flex; flex-wrap:wrap; gap:.5rem; font-size:.85rem; }
.season-wd .wd { display:inline-flex; align-items:center; gap:.2rem; }
.season-del { float:right; }
#mkSeasons + .btn { margin-top:0; }

/* Contact / emergency rows */
.contacts { display:flex; flex-direction:column; }
.contact { display:flex; align-items:center; gap:.9rem; padding:.7rem .2rem; border-bottom:1px solid var(--line); }
.contact:last-child { border-bottom:none; }
.contact__badge { flex:0 0 44px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem; background:var(--sea-pale); }
.contact--sos .contact__badge { background:rgba(224,123,74,.16); }
.contact__name { font-weight:600; }
.contact__note { font-size:.83rem; color:var(--ink-soft); }
.contact__num { margin-left:auto; }
.contact__num a { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-variant-numeric:tabular-nums; background:var(--sunset); color:#fff; padding:.45rem .8rem; border-radius:999px; }
.contact__num a:hover { background:var(--sunset-dk); color:#fff; }

/* Markets / garbage list */
.rows { display:flex; flex-direction:column; gap:.55rem; }
.row { display:flex; gap:.8rem; align-items:baseline; padding:.7rem .9rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.row__key { font-weight:600; min-width:9rem; }
.row__val { color:var(--ink-soft); }
.chip { display:inline-block; font-size:.74rem; font-weight:600; padding:.12rem .5rem; border-radius:999px; background:var(--sand); color:var(--ink); }

/* ── Calendar ─────────────────────────────────────────────── */
.cal__bar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.cal__nav { display:flex; align-items:center; gap:.3rem; }
.cal__title { font-family:var(--serif); font-weight:600; font-size:1.25rem; min-width:11rem; text-align:center; }
.seg { display:inline-flex; background:var(--sand-soft); border:1px solid var(--line); border-radius:999px; padding:2px; }
.seg button { padding:.3rem .8rem; font-size:.82rem; font-weight:600; color:var(--ink-soft); border-radius:999px; }
.seg button.active { background:var(--surface); color:var(--sunset-dk); box-shadow:var(--shadow); }
.cal__spacer { flex:1; }

.layers { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.layer-toggle { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:500; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); }
.layer-toggle .swatch { width:11px; height:11px; border-radius:3px; }
.layer-toggle[aria-pressed="true"] { color:var(--ink); border-color:var(--line-strong); }
.layer-toggle[aria-pressed="false"] { opacity:.45; }
.layer-toggle.stay   .swatch{background:var(--layer-stay);}
.layer-toggle.bin    .swatch{background:var(--layer-bin);}
.layer-toggle.market .swatch{background:var(--layer-market);}
.layer-toggle.holiday .swatch{background:var(--layer-holiday);}
.layer-toggle.service .swatch{background:var(--layer-service);}

/* Month grid */
.month { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.month__dow { display:grid; grid-template-columns:repeat(7,1fr); background:var(--sand-soft); border-bottom:1px solid var(--line); }
.month__dow span { padding:.5rem; text-align:center; font:600 .72rem var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.month__grid { display:grid; grid-template-columns:repeat(7,1fr); }
.day { min-height:84px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:.3rem; position:relative; display:flex; flex-direction:column; gap:.15rem; }
.day:nth-child(7n){border-right:none;}
.day.out { background:var(--cream); color:var(--ink-faint); }
.day.today .day__n { background:var(--sunset); color:#fff; }
.day__n { align-self:flex-end; font-size:.78rem; font-weight:600; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; }
.day.stay { background:linear-gradient(0deg, rgba(44,143,163,.12), rgba(44,143,163,.12)); }
.evt { font-size:.66rem; font-weight:600; line-height:1.2; padding:.1rem .3rem; border-radius:5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt.stay   { background:var(--layer-stay); }
.evt.editable, .aevt.editable, .evt.deletable, .aevt.deletable { cursor:pointer; }
.aevt.editable:hover, .evt.editable:hover, .aevt.deletable:hover, .evt.deletable:hover { outline:2px solid var(--sunset); outline-offset:1px; border-radius:5px; }
body.is-admin .evt.editable::after,
body.is-admin .aevt.editable::after { content:" ✎"; opacity:.55; margin-left:auto; }
.evt.bin    { background:var(--layer-bin); }
.evt.market { background:var(--layer-market); }
.evt.holiday { background:var(--layer-holiday); }
.evt.service { background:var(--layer-service); }
/* Eigene Buchungen (mine) – kräftigerer Akzent + Ring; im Monatsraster nur Ring (Hintergrund bleibt Layer-Farbe) */
.evt.stay.mine { box-shadow:inset 0 0 0 2px var(--sunset); }
.aevt.stay.mine .swatch { background:var(--sunset); }
.mine-badge { background:var(--sunset); color:#fff; font-size:.65rem; font-weight:700; padding:.05rem .35rem; border-radius:999px; line-height:1.3; letter-spacing:.02em; }
.user-pick { display:flex; flex-direction:column; gap:.25rem; max-height:11rem; overflow-y:auto; padding:.4rem .5rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--cream); }
.user-pick__row { display:flex; align-items:center; gap:.5rem; font:inherit; cursor:pointer; padding:.15rem .1rem; }
.user-pick__row input { margin:0; }

/* Agenda (mobile default) */
.agenda { display:flex; flex-direction:column; gap:.7rem; }
.agenda__day { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .9rem; box-shadow:var(--shadow); }
.agenda__day.is-today { border-color:var(--sunset); box-shadow:0 0 0 1px var(--sunset); }
.agenda__date { font:600 .8rem var(--sans); color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.4rem; display:flex; justify-content:space-between; }
.agenda__date .num { color:var(--sunset-dk); }
.agenda__items { display:flex; flex-direction:column; gap:.35rem; }
.aevt { display:flex; align-items:center; gap:.55rem; font-size:.9rem; }
.aevt .swatch { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.aevt.stay .swatch{background:var(--layer-stay);} .aevt.bin .swatch{background:var(--layer-bin);} .aevt.market .swatch{background:var(--layer-market);} .aevt.holiday .swatch{background:var(--layer-holiday);} .aevt.service .swatch{background:var(--layer-service);}
.aevt .sub { color:var(--ink-faint); font-size:.8rem; }
.agenda__empty { color:var(--ink-faint); font-size:.85rem; font-style:italic; }
.cal-sources { margin-top:1rem; font-size:.8rem; color:var(--ink-faint); line-height:1.8; }
.cal-sources .src-title { font-weight:600; color:var(--ink-soft); }
.cal-sources a { color:var(--sea); }
.cal-sources .src-upd { color:var(--ink-faint); }

.admin-only { display:none; }
body.is-admin .admin-only { display:inline-flex; }
.btn { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; padding:.5rem .95rem; border-radius:999px; background:var(--sunset); color:#fff; transition:var(--trans); }
.btn:hover { background:var(--sunset-dk); color:#fff; }
.btn--ghost { background:var(--surface); color:var(--sunset-dk); border:1px solid var(--line-strong); }
.btn--ghost:hover { background:var(--sand-soft); color:var(--sunset-dk); }
.btn svg { width:16px; height:16px; }

/* Documents */
.docs { display:grid; gap:.8rem; grid-template-columns:1fr; }
.doc { display:flex; align-items:center; gap:.9rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1rem; box-shadow:var(--shadow); }
.doc__ico { flex:0 0 42px; width:42px; height:42px; border-radius:11px; background:var(--sun-pale); display:grid; place-items:center; color:var(--sun-dk); font-weight:700; font-size:.72rem; }
.doc__meta { flex:1; min-width:0; }
.doc__title { font-weight:600; }
.doc__sub { font-size:.8rem; color:var(--ink-soft); }
.doc__tag { font-size:.68rem; font-weight:600; color:var(--sea); background:var(--sea-pale); padding:.1rem .45rem; border-radius:6px; }
.doc__open { text-decoration:none; }
.doc__dl { color:var(--ink-faint); display:grid; place-items:center; }
.doc__dl:hover { color:var(--sunset); }
.doc__del { flex:0 0 auto; width:28px; height:28px; border-radius:8px; color:var(--sunset-dk); background:rgba(224,123,74,.12); font-size:.8rem; }
.doc__del:hover { background:rgba(224,123,74,.22); }

/* ── Map (Leaflet / OpenStreetMap) ────────────────────────────────────── */
#mapCanvas { height: 60vh; min-height: 360px; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow); overflow:hidden; }
.map-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.map-legend .ml { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:500; color:var(--ink-soft); }
.map-legend .mlpin { width:11px; height:11px; border-radius:50%; display:inline-block; }
.map-legend .dot { font-size:1.05rem; }
.ido-pin { font-size:22px; line-height:22px; text-align:center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.map-missing { height:100%; padding:1.2rem; display:grid; place-items:center; text-align:center; color:var(--ink-soft); font-size:.9rem; background:var(--sand-soft); }
.pop { font-family:var(--sans); min-width:170px; }
.pop b { font-family:var(--serif); font-size:1rem; }
.pop__hours { color:var(--ink-soft); font-size:.85rem; margin:.25rem 0; }
.pop__sub { color:var(--ink-soft); font-size:.82rem; margin:.1rem 0; }
.row .st-open { color:var(--olive); font-weight:600; }
.row .st-closed { color:var(--sunset-dk); font-weight:600; }
.pop__status { font-weight:600; font-size:.82rem; }
.pop__status.open { color:var(--olive); }
.pop__status.closed { color:var(--sunset-dk); }
.pop__route { display:inline-block; margin-top:.35rem; font-weight:600; }
.pop__dist { color:var(--ink-faint); font-size:.78rem; }

/* ── Login modal ──────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:60; display:none; place-items:center; padding:1.2rem; background:rgba(48,28,12,.42); backdrop-filter:blur(3px); }
.modal.open { display:grid; }
.modal__box { width:100%; max-width:380px; background:var(--surface); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow-lg); animation:pop .25s ease; }
@keyframes pop { from{opacity:0; transform:scale(.96);} to{opacity:1;transform:none;} }
.modal__box h3 { font-size:1.35rem; margin-bottom:.3rem; }
.modal__box p { color:var(--ink-soft); font-size:.9rem; margin-bottom:1.1rem; }
.field { margin-bottom:.8rem; }
.field label { display:block; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:.3rem; }
.field input { width:100%; padding:.65rem .8rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--cream); font:inherit; }
.field input:focus { outline:none; border-color:var(--sunset); box-shadow:0 0 0 3px var(--sunset-pale); }
.modal__box .btn { width:100%; justify-content:center; margin-top:.4rem; }
.note { font-size:.78rem; color:var(--ink-faint); margin-top:.8rem; text-align:center; }

/* ── Adresssuche (Geocoding) ──────────────────────────────── */
.geo { margin:-.2rem 0 .8rem; }
.geo .note { display:inline-block; margin:0 0 0 .6rem; text-align:left; }
.geo__results { margin-top:.5rem; display:flex; flex-direction:column; gap:.35rem; }
.geo__hit { text-align:left; padding:.5rem .7rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--cream); font:inherit; font-size:.82rem; cursor:pointer; line-height:1.3; }
.geo__hit:hover { border-color:var(--sunset); background:var(--sunset-pale); }
.geo__adv { margin-bottom:.8rem; }
.geo__adv summary { cursor:pointer; margin:0 0 .5rem; text-align:left; }

/* ── Öffnungszeiten-Abgleich (Diff-Vorschau) ──────────────── */
.modal__box--wide { max-width:560px; }
.modal__box--wide #hoursBody { max-height:55vh; overflow:auto; margin:.4rem 0 .2rem; }
.hours-grp { font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:.9rem 0 .4rem; }
.hours-row { border:1px solid var(--line); border-radius:12px; padding:.6rem .75rem; margin-bottom:.55rem; background:var(--cream); }
.hours-pick { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.hours-pick input { width:16px; height:16px; }
.hours-name { font-weight:600; }
.hours-diff { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.5rem; font-size:.82rem; }
.hours-old { color:var(--ink-faint); }
.hours-new { color:var(--ink); }
.hours-note { font-size:.76rem; margin-top:.4rem; }
.hours-err { color:var(--sunset-dk); font-size:.82rem; margin-top:.4rem; }
.modal__actions { display:flex; gap:.6rem; margin-top:.8rem; }
.modal__actions .btn { margin-top:0; }
@media (max-width:520px) { .hours-diff { grid-template-columns:1fr; } }

/* ── Footer ───────────────────────────────────────────────── */
.foot { padding:2rem var(--px) calc(2rem + var(--safe-b)); text-align:center; color:var(--ink-faint); font-size:.82rem; border-top:1px solid var(--line); margin-top:2rem; }
.foot a { color:var(--ink-soft); }

/* ── Bottom nav (mobile) ──────────────────────────────────── */
.botnav { position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; justify-content:space-around;
  background:rgba(255,251,242,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:.4rem .3rem calc(.4rem + var(--safe-b)); }
.botnav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.35rem; font-size:.66rem; font-weight:600; color:var(--ink-faint); border-radius:10px; }
.botnav button svg { width:21px; height:21px; }
.botnav button.active { color:var(--sunset); }
.botnav__sos { color:#fff !important; background:#d9482a; }
.botnav__sos.active { color:#fff !important; }

/* ── Responsive (device-agnostic) ─────────────────────────── */
@media (min-width: 560px) {
  .dash__grid { grid-template-columns: repeat(3, 1fr); }
  .docs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .dash__grid { grid-template-columns: repeat(4, 1fr); }
  .card { min-height: 146px; }
}
@media (max-width: 640px) {
  .botnav { display:flex; }
  body { padding-bottom: 64px; }
  .day { min-height: 60px; }
  .sos-fab { bottom: calc(64px + .8rem); width:56px; height:56px; }
  .sos-fab svg { width:21px; height:21px; }
  .features { grid-template-columns: 1fr; }      /* je eine Kachel pro Zeile */
  .features > .feat { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}