/* v1.27: Design „Liquid Glass“ – Glasflächen, eckige Knöpfe (3 px), Hell/Dunkel per Umschalter.
   Wird nach allen anderen Stylesheets geladen und überschreibt nur das Aussehen. */

/* ---------- Vereinsfarbe ----------
   NarrenApp 2.0: Alle Töne kommen aus einer Grundfarbe (Verwaltung → Verein & Aussehen). inc/verein.php berechnet
   daraus die Variablen --b-… und gibt sie im Seitenkopf aus. Die Werte hier sind nur der Rückfall (neutrales Blau). */
:root {
  --b: #2f6fb3; --b-rgb: 47,111,179; --b-mid: #3d78b0; --b-strong: #2a64a1; --b-strong-rgb: 42,100,161; --b-dark: #275d96; --b-ink: #173a63;
  --b-tint: #c7dbf0; --b-soft: #e4eef9; --b-bg: #f2f5f8; --b-solid: #f9fbfc; --b-shadow-rgb: 41,61,82;
  --b-text: #585f66; --b-heading: #1f2429; --b-muted: #757d85; --b-ios: #2b67a5;
  --b-dk: #2f6fb3; --b-dk-rgb: 47,111,179; --b-dk-bg: #0f1215; --b-dk-solid: #1b1f23; --b-dk-glass-rgb: 31,36,41; --b-dk-bar-rgb: 22,26,29;
  --b-dk-text: #c6ccd2; --b-dk-heading: #eef2f6; --b-dk-muted: #939ba3; --b-dk-light: #77a9de; --b-dk-ink: #c3daf3; --b-dk-ios: #6aa1da;
}
/* ---------- Farben hell ---------- */
:root {
  --radius: 8px; --r-sm: 3px; --g-blur: 22px; --g-sat: 180%;
  --page-bg: radial-gradient(900px 600px at 10% -5%, var(--b-tint) 0%, transparent 60%), radial-gradient(800px 600px at 100% 10%, #dbeafe 0%, transparent 55%), radial-gradient(700px 600px at 50% 110%, #efe3fa 0%, transparent 60%), var(--b-bg);
  --g-bg: rgba(255,255,255,.72); --g-solid: var(--b-solid); --g-border: rgba(255,255,255,.9); --g-hi: rgba(255,255,255,.9); --g-lo: rgba(0,0,0,.03); --g-shadow: rgba(var(--b-shadow-rgb),.10);
  --g-hover: rgba(var(--b-rgb),.12); --g-line: rgba(0,0,0,.08); --pill-on: rgba(var(--b-rgb),.20); --pill-on-ink: var(--b-ink);
  --btn-bg: rgba(255,255,255,.8); --in-bg: rgba(255,255,255,.88); --in-border: rgba(0,0,0,.12); --sel-bg: rgba(var(--b-rgb),.16); --sel-border: rgba(var(--b-strong-rgb),.55); --focus: rgba(var(--b-rgb),.45);
  --p1: var(--b-mid); --p2: var(--b-strong); --p-shadow: rgba(var(--b-strong-rgb),.30);
  --text: var(--b-text); --heading: var(--b-heading); --muted: var(--b-muted); --line: rgba(0,0,0,.08); --card: transparent;
  --hint-bg: rgba(255,246,220,.75); --hint-border: rgba(233,196,106,.6);
  color-scheme: light;
}
/* ---------- Farben dunkel ---------- */
html[data-theme=dark] {
  --g-blur: 24px; --g-sat: 160%;
  --page-bg: radial-gradient(800px 600px at 0% 0%, rgba(var(--b-dk-rgb),.42) 0%, transparent 60%), radial-gradient(700px 600px at 100% 20%, rgba(56,120,200,.36) 0%, transparent 60%), radial-gradient(700px 600px at 60% 110%, rgba(150,80,200,.30) 0%, transparent 60%), var(--b-dk-bg);
  --g-bg: rgba(var(--b-dk-glass-rgb),.58); --g-solid: var(--b-dk-solid); --g-border: rgba(255,255,255,.13); --g-hi: rgba(255,255,255,.16); --g-lo: rgba(0,0,0,.3); --g-shadow: rgba(0,0,0,.35);
  --g-hover: rgba(255,255,255,.07); --g-line: rgba(255,255,255,.10); --pill-on: rgba(var(--b-dk-rgb),.28); --pill-on-ink: var(--b-dk-ink);
  --btn-bg: rgba(255,255,255,.07); --in-bg: rgba(0,0,0,.28); --in-border: rgba(255,255,255,.16); --sel-bg: rgba(var(--b-dk-rgb),.16); --sel-border: rgba(var(--b-dk-rgb),.55); --focus: rgba(var(--b-dk-rgb),.55);
  --p1: var(--b-dk); --p2: var(--b-strong); --p-shadow: rgba(var(--b-dk-rgb),.25);
  --text: var(--b-dk-text); --heading: var(--b-dk-heading); --muted: var(--b-dk-muted); --line: rgba(255,255,255,.10);
  --primary-dark: var(--b-dk-light); --ok: #b7e38a; --ok-bg: rgba(139,195,74,.16); --warn: #f3cf7a; --warn-bg: rgba(240,180,40,.15); --err: #ff9c9c; --err-bg: rgba(220,60,60,.18);
  --hint-bg: rgba(240,180,40,.12); --hint-border: rgba(240,180,40,.35);
  --m-yes: rgba(139,195,74,.22); --m-yes-ink: #c3eb9a; --m-maybe: rgba(240,180,40,.22); --m-maybe-ink: #f6d68b; --m-no: rgba(220,60,60,.24); --m-no-ink: #ffb0b0; --m-open: rgba(255,255,255,.08); --m-blue: rgba(80,140,230,.20); --m-blue-ink: #b4cff7;
  color-scheme: dark;
}

/* ---------- Grundfläche ---------- */
html { background: var(--page-bg); background-attachment: fixed; min-height: 100%; }
body { background: transparent !important; color: var(--text); -webkit-font-smoothing: antialiased; }
h1 { font-weight: 700; letter-spacing: -.02em; color: var(--heading); }
h2 { font-weight: 700; letter-spacing: -.01em; }
h1, h2, h3, strong, dd, th, label, .pname, .check { color: var(--heading); }
a { color: var(--primary-dark); }

/* Glasflächen */
.card, header.top, .subnav, .tabbar, .menu-pop, .summary-grid div, .usermenu > summary, .toolbar .panel, #app-hint {
  background: var(--g-bg) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border: 1px solid var(--g-border) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 -1px 0 var(--g-lo), 0 10px 30px var(--g-shadow);
}
.menu-pop { background: var(--g-solid) !important; }
.card { border-radius: var(--radius); padding: 20px 22px; }
.summary-grid div, .toolbar .panel, .menu-pop { border-radius: var(--radius); }
.summary-grid b { color: var(--heading); }

/* Kopf: schwebende Glasleiste */
header.top { position: sticky; top: 10px; z-index: 50; margin: 10px auto 0; max-width: 1120px; width: calc(100% - 24px); border-radius: 10px; }
body.page-wide header.top, body.page-wide .subnav { max-width: 1900px; }
.topbar { padding-top: 8px; padding-bottom: 8px; }
.brand img { height: 44px; width: auto; aspect-ratio: 1; border-radius: 22%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.brand-name { font-weight: 700; color: var(--heading); }
.mainnav { border-top: 0; gap: 4px; padding: 0 10px 10px; }
.mainnav a { border: 0 !important; border-radius: var(--r-sm); padding: 7px 14px; color: var(--heading); transition: background .2s; }
.mainnav a:hover { background: var(--g-hover); color: var(--heading); }
.mainnav a.active { background: var(--pill-on); color: var(--pill-on-ink); }
.mainnav a[data-admin] { color: var(--heading); }
.usermenu > summary { border-radius: var(--r-sm); color: var(--heading); }
.subnav { margin: 10px auto 0; max-width: 1120px; width: calc(100% - 24px); border-radius: var(--radius); }
.subnav a { border: 0 !important; border-radius: var(--r-sm); padding: 6px 12px; margin: 5px 0; color: var(--heading); }
.subnav a.active { background: var(--pill-on); color: var(--pill-on-ink); }
main { padding-top: 26px; }
details.menu[open] > summary { background: var(--g-hover); }
.menu-pop > a, .menu-pop button { color: var(--heading); border-radius: var(--r-sm); }
.menu-pop > a:hover, .menu-pop button:hover { background: var(--g-hover); }
.menu-pop .danger { color: var(--err); }

/* Umschalter Hell/Dunkel */
.theme-toggle { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--g-hover); border: 1px solid var(--g-border); flex: none; }
.theme-toggle button { border: 0; background: transparent; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: 2px; cursor: pointer; display: flex; gap: 5px; align-items: center; line-height: 1.2; }
.theme-toggle button[aria-pressed=true] { background: var(--g-solid); color: var(--heading); box-shadow: 0 1px 3px var(--g-shadow); }

/* Knöpfe: flach, eckig */
.btn { border-radius: var(--r-sm) !important; border: 1px solid var(--in-border); background: var(--btn-bg); color: var(--heading); box-shadow: 0 1px 2px var(--g-shadow); transition: background .15s, border-color .15s; }
.btn:hover { background: var(--g-hover); border-color: var(--sel-border); }
.btn.primary { text-transform: none; letter-spacing: 0; font-size: 1rem; background: var(--p2); border: 1px solid var(--p2); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 12px var(--p-shadow); }
.btn.primary:hover { background: var(--p1); border-color: var(--p1); }
.btn.danger { color: var(--err); }
.toolbar > details[open] > summary.btn.primary { background: var(--p1); }
.m-btn { border-radius: var(--r-sm); background: var(--btn-bg); }

/* Eingaben */
input:not([type=checkbox]):not([type=radio]), textarea, select { border-radius: var(--r-sm); border: 1px solid var(--in-border); background: var(--in-bg); color: var(--heading); }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.check.big { border-radius: var(--r-sm); border: 1px solid var(--in-border); background: var(--btn-bg); }
.check.big:has(input:checked) { background: var(--sel-bg); border-color: var(--sel-border); }

/* Hinweise, Marken, Listen */
.flash, .admin-hint, .help-wanted, .card.pending, .notes, .cancel-box, .m-answer, .gd-note { border-radius: var(--radius); }
.help-wanted li { border-radius: var(--r-sm); background: var(--g-solid); }
.admin-hint, .todo-tiles .card.alert, .card.pending, .m-pending { background: var(--hint-bg) !important; border-color: var(--hint-border) !important; }
.tag, .pill, .chip, .m-sym { border-radius: var(--r-sm); }
.notes { background: var(--g-hover); }
.bar { height: 10px; background: var(--g-hover); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.bar span { background: linear-gradient(90deg, var(--p1), var(--p2)); border-radius: 99px; }
th, td { border-bottom-color: var(--g-line); }
th { color: var(--muted); }
.plist li, .home-list li, .todo-list li { border-bottom-color: var(--g-line); }
.trip-row, a.fest-card, .admin-links a.card { transition: border-color .15s, box-shadow .15s; }
.trip-row:hover, a.fest-card:hover, .admin-links a.card:hover { border-color: var(--sel-border) !important; box-shadow: inset 0 1px 0 var(--g-hi), 0 14px 32px var(--g-shadow); }
table.shifts-admin tr.clickable:hover td { background: var(--g-hover); }
.site-footer { border-top: 0; }
.m-date { border-radius: var(--r-sm); }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  header.top { top: 0; margin: 0; width: 100%; border-radius: 0 0 10px 10px; border-top: 0 !important; }
  .subnav { width: calc(100% - 16px); }
  .theme-toggle { margin-left: auto; }
  .theme-toggle button { padding: 6px 9px; }
  .theme-toggle button span { display: none; }
  .tabbar { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; border-radius: 12px; padding: 4px !important; }
  .tabbar > a, .tabbar > details > summary { border-radius: 6px; color: var(--heading) !important; padding: 7px 2px; }
  .tabbar > a.active, .tabbar > details.active > summary { background: var(--pill-on); color: var(--pill-on-ink) !important; }
  .tabbar > a.active::before, .tabbar > details.active > summary::before { display: none; }
  body.logged-in main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.6rem; }
}

/* ---------- Dunkel: Flächen mit festen Farben ---------- */
html[data-theme=dark] .trip h2, html[data-theme=dark] h1.trip-title { color: var(--b-dk-light); }
html[data-theme=dark] .tag { background: rgba(255,255,255,.10); color: var(--heading); }
html[data-theme=dark] .tag.yes { background: var(--ok-bg); color: var(--ok); }
html[data-theme=dark] .tag.no { background: rgba(255,255,255,.06); color: var(--muted); }
html[data-theme=dark] .tag.warn, html[data-theme=dark] .tag.maybe { background: var(--warn-bg); color: var(--warn); }
html[data-theme=dark] .tag.err { background: var(--err-bg); color: var(--err); }
html[data-theme=dark] .tag.gd1, html[data-theme=dark] .tag.garde, html[data-theme=dark] .tag.kind-register { background: rgba(170,110,230,.24); color: #dcc0f7; }
html[data-theme=dark] .tag.gd2, html[data-theme=dark] .tag.music, html[data-theme=dark] .tag.kind-probe { background: rgba(80,140,230,.24); color: #b4cff7; }
html[data-theme=dark] .tag.gd3 { background: rgba(139,195,74,.22); color: #c3eb9a; }
html[data-theme=dark] .tag.gd4 { background: rgba(230,90,150,.24); color: #f7b8d4; }
html[data-theme=dark] .tag.gd5 { background: rgba(240,140,60,.24); color: #f8c99a; }
html[data-theme=dark] .tag.gd6 { background: rgba(40,180,165,.22); color: #a3e8df; }
html[data-theme=dark] .tag.gd7 { background: rgba(230,195,50,.22); color: #f3df8f; }
html[data-theme=dark] .tag.gd8 { background: rgba(230,70,70,.24); color: #f7b3b3; }
html[data-theme=dark] .tag.gd9 { background: rgba(110,115,230,.26); color: #c4c7f8; }
html[data-theme=dark] .tag.gd10 { background: rgba(170,120,80,.26); color: #e3c6ab; }
html[data-theme=dark] .tag.gd11 { background: rgba(150,165,60,.24); color: #d6df9e; }
html[data-theme=dark] .tag.gd12 { background: rgba(160,168,185,.22); color: #d3d7df; }
html[data-theme=dark] .tag.kind-auftritt, html[data-theme=dark] .tag.cake { background: rgba(240,140,60,.22); color: #f8c99a; }
html[data-theme=dark] .tag.draft { background: rgba(120,140,220,.22); color: #c4cdf5; }
html[data-theme=dark] .help-wanted { background: var(--hint-bg); border-color: var(--hint-border); }
html[data-theme=dark] .help-wanted h3, html[data-theme=dark] .help-wanted .hw-free { color: var(--warn); }
html[data-theme=dark] .help-wanted.cakes { background: rgba(230,90,150,.12); border-color: rgba(230,90,150,.35); border-left-color: #d9658f; }
html[data-theme=dark] .help-wanted.cakes h3, html[data-theme=dark] .help-wanted.cakes .hw-free { color: #f7b8d4; }
html[data-theme=dark] .help-wanted.garde, html[data-theme=dark] .gd-note { background: rgba(170,110,230,.12); border-color: rgba(170,110,230,.35); }
html[data-theme=dark] .help-wanted.music { background: rgba(80,140,230,.12); border-color: rgba(80,140,230,.35); }
html[data-theme=dark] .cancel-box, html[data-theme=dark] .m-answer, html[data-theme=dark] .shift.full, html[data-theme=dark] .help code { background: rgba(255,255,255,.05); }
html[data-theme=dark] .m-answer.open { background: var(--hint-bg); border-color: var(--hint-border); }
html[data-theme=dark] .m-date { border-color: rgba(var(--b-dk-rgb),.35); }
html[data-theme=dark] .m-regs .part { background: var(--m-maybe); border-color: rgba(240,180,40,.4); }
html[data-theme=dark] .m-regs .none { background: var(--m-no); border-color: rgba(220,60,60,.4); }
html[data-theme=dark] .m-regs .full { border-color: rgba(139,195,74,.4); }
html[data-theme=dark] .m-count .co, html[data-theme=dark] .m-sym { color: var(--muted); }
html[data-theme=dark] .m-answer .m-who .gd-sub, html[data-theme=dark] .gd-auto { color: var(--muted); }
html[data-theme=dark] table.m-grid th, html[data-theme=dark] table.m-grid td { background: transparent; border-color: var(--g-line); }
html[data-theme=dark] table.m-grid .n, html[data-theme=dark] table.m-grid tfoot td, html[data-theme=dark] table.m-grid tfoot th, html[data-theme=dark] table.raster .t { background: var(--g-solid); }
html[data-theme=dark] table.m-grid td.s1 { background: var(--m-yes); } html[data-theme=dark] table.m-grid td.s2 { background: var(--m-maybe); } html[data-theme=dark] table.m-grid td.s0 { background: var(--m-no); }
html[data-theme=dark] table.m-grid td.sx, html[data-theme=dark] table.m-grid .cx, html[data-theme=dark] .m-legend .sx { background: rgba(255,255,255,.03); color: var(--muted); }
html[data-theme=dark] .cell.full, html[data-theme=dark] .pill.full, html[data-theme=dark] .raster-legend .full::before { background: var(--m-yes); color: var(--ok); }
html[data-theme=dark] .cell.part, html[data-theme=dark] .pill.part, html[data-theme=dark] .raster-legend .part::before { background: var(--m-maybe); color: var(--warn); }
html[data-theme=dark] .cell.empty, html[data-theme=dark] .pill.empty, html[data-theme=dark] .raster-legend .empty::before { background: var(--m-no); color: var(--err); }
html[data-theme=dark] .chip.on { background: var(--p2); border-color: var(--p2); color: #fff; }
html[data-theme=dark] .help-toc, html[data-theme=dark] .help figure img { background: rgba(255,255,255,.04); }
html[data-theme=dark] .brand img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* ---------- Drucken: immer hell, ohne Glas ---------- */
@media print {
  html, html[data-theme=dark] { background: #fff !important; --text: #333; --heading: #111; --muted: #666; --line: #ccc; --g-line: #ccc; color-scheme: light; }
  .card, .summary-grid div { background: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0 !important; }
  .theme-toggle { display: none !important; }
  html[data-theme=dark] .tag { background: #eee; color: #333; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, header.top, .subnav, .tabbar, .summary-grid div { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-solid) !important; }
}

/* Fenster einer Schicht (Raster) */
.shift-dlg { border-radius: var(--radius); background: var(--g-solid); color: var(--text); border: 1px solid var(--g-border); }
.shift-dlg::backdrop { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ===================== v1.28: Handy-App im Apple-Stil (nur bis 760 px Breite) =====================
   Aufbau wie iPhone-Apps (große Titel, Navigationsleiste, Schalter, Segment-Reiter, Auswahlblatt), dazu Glas und 3-px-Ecken aus 1.27. */
@media (max-width: 760px) {
  :root {
    --ios-bg: #f2f2f7; --ios-cell: #ffffff; --ios-sep: rgba(60,60,67,.18); --ios-label: #000; --ios-sec: rgba(60,60,67,.6);
    --ios-fill: rgba(118,118,128,.12); --ios-tint: var(--b-ios); --ios-bar: rgba(249,249,249,.82);
  }
  html[data-theme=dark] {
    --ios-bg: #000; --ios-cell: #1c1c1e; --ios-sep: rgba(84,84,88,.6); --ios-label: #fff; --ios-sec: rgba(235,235,245,.6);
    --ios-fill: rgba(118,118,128,.24); --ios-tint: var(--b-dk-ios); --ios-bar: rgba(22,22,24,.82);
  }
  html, html[data-theme=dark] { background: var(--ios-bg) !important; }
  body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important; color: var(--ios-label); letter-spacing: -.01em; }
  h1, h2, h3, strong, dd, th, label, .pname, .check { color: var(--ios-label) !important; }
  .muted, .when, small, .facts dt, th { color: var(--ios-sec) !important; }
  a { color: var(--ios-tint); }

  /* Navigationsleiste oben: durchscheinend, Titel mittig, klein */
  header.top { position: sticky; top: 0; margin: 0; width: 100%; border-radius: 0 !important; background: var(--ios-bar) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border: 0 !important; border-bottom: .5px solid var(--ios-sep) !important; box-shadow: none !important; }
  .topbar { justify-content: center; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; position: relative; min-height: 44px; }
  .brand { margin: 0 auto; font-size: 1.05rem; font-weight: 600; gap: 8px; }
  .brand img { height: 28px; filter: none; }
  .brand-name { font-weight: 600; color: var(--ios-label); }
  .theme-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: var(--ios-fill); border: 0; border-radius: 9px; padding: 2px; }
  .theme-toggle button { border-radius: 7px !important; padding: 3px 8px; font-size: .8rem; }
  .theme-toggle button[aria-pressed=true] { background: var(--ios-cell); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

  /* Großer Titel */
  main { padding-top: 10px; }
  h1 { font-size: 2.125rem !important; font-weight: 700 !important; letter-spacing: .01em; margin: 4px 0 14px; }
  .back a { font-weight: 400; font-size: 1.05rem; text-decoration: none; }

  /* Gruppierte Listen statt Glaskarten */
  .card { background: var(--ios-cell) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 14px 16px !important; }
  .card h2 { font-size: 1.25rem; font-weight: 700; }
  .home-list li, .plist li, .todo-list li { border-bottom: .5px solid var(--ios-sep) !important; padding: 11px 0; }
  .home-list li:last-child, .plist li:last-child { border-bottom: 0 !important; }
  .trip-row { position: relative; padding-right: 30px !important; }
  .trip-row::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ios-sec); font-size: 1.5rem; }
  .trip-list { gap: 10px; }
  h2.day { color: var(--ios-sec); font-size: .8rem; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; border: 0; margin: 20px 16px 6px; padding: 0; }
  .tr-title { color: var(--ios-label); font-weight: 600; }
  .trip h2, h1.trip-title { color: var(--ios-label) !important; }
  .trip-date, .help-wanted .when { color: var(--ios-tint) !important; }

  /* Knöpfe: iOS-Füllknöpfe */
  .btn { border: 0 !important; border-radius: 10px !important; background: var(--ios-fill) !important; color: var(--ios-tint) !important; box-shadow: none !important; font-weight: 600; padding: 9px 16px; }
  .btn.small { border-radius: 8px !important; padding: 5px 12px; }
  .btn.primary { background: var(--ios-tint) !important; color: #fff !important; font-size: 1.05rem; padding: 13px 20px; }
  html[data-theme=dark] .btn.primary { color: #000 !important; }
  .btn.danger { color: #ff3b30 !important; }
  .card form > .btn.primary, .attend .btn.primary { display: block; width: 100%; text-align: center; }

  /* Eingaben */
  input:not([type=checkbox]):not([type=radio]), textarea, select { border: 0 !important; border-radius: 10px !important; background: var(--ios-fill) !important; color: var(--ios-label); padding: 11px 12px; box-shadow: none !important; }
  input:focus, textarea:focus, select:focus { outline: 2px solid var(--ios-tint) !important; }

  /* Häkchen als iOS-Schalter */
  .check.big { border: 0 !important; border-radius: 0 !important; background: transparent !important; border-bottom: .5px solid var(--ios-sep) !important; padding: 10px 0 !important; margin: 0 !important; justify-content: flex-start; }
  .check.big:has(input:checked) { background: transparent !important; }
  .check.big input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 51px !important; height: 31px !important; border-radius: 99px; background: var(--ios-fill); position: relative; flex: none; transition: background .2s; cursor: pointer; margin: 0; }
  .check.big input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .2s; }
  .check.big input[type=checkbox]:checked { background: #34c759; }
  .check.big input[type=checkbox]:checked::after { transform: translateX(20px); }
  .check.big input[type=checkbox] { order: 9; margin-left: auto; } .check.big .tag { margin-left: 4px; }

  /* Segmentschalter statt Reiter */
  .tabs { background: var(--ios-fill); border: 0; border-radius: 9px; padding: 2px; gap: 0; display: flex; }
  .tabs a { flex: 1; text-align: center; border: 0 !important; border-radius: 7px; padding: 6px 8px !important; font-size: .85rem; color: var(--ios-label); margin: 0; }
  .tabs a.active { background: var(--ios-cell); color: var(--ios-label); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }

  /* Marken, Hinweise */
  .tag { border-radius: 6px !important; font-weight: 600; }
  .flash, .admin-hint, .help-wanted, .card.pending { border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
  .help-wanted li { border-radius: 10px; }
  .notes { border: 0; border-radius: 10px; background: var(--ios-fill) !important; }
  .bar { height: 6px; background: var(--ios-fill) !important; box-shadow: none; }
  .bar span { background: var(--ios-tint) !important; }
  .summary-grid div { background: var(--ios-cell) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }

  /* Tab-Leiste unten wie bei iOS */
  .tabbar { left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 0 !important; background: var(--ios-bar) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border: 0 !important; border-top: .5px solid var(--ios-sep) !important; box-shadow: none !important; padding: 0 0 env(safe-area-inset-bottom) !important; }
  .tabbar > a, .tabbar > details > summary { background: transparent !important; color: #8e8e93 !important; font-size: .65rem; font-weight: 500; padding: 7px 0 4px; border-radius: 0 !important; }
  .tabbar > a.active, .tabbar > details.active > summary { color: var(--ios-tint) !important; background: transparent !important; }
  .tabbar .ico { width: 25px; height: 25px; }
  body.logged-in main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* „Ich“-Menü als Aktionsblatt */
  .tabbar .menu-pop { position: fixed; left: 8px; right: 8px; bottom: calc(60px + env(safe-area-inset-bottom)); top: auto; border-radius: 14px !important; padding: 0; background: var(--ios-cell) !important; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 0 !important; box-shadow: 0 10px 40px rgba(0,0,0,.25) !important; gap: 0; }
  .tabbar .menu-pop > a { text-align: center; padding: 16px; font-size: 1.15rem; font-weight: 400; color: var(--ios-tint); border-bottom: .5px solid var(--ios-sep); border-radius: 0; }
  .tabbar .menu-pop > a:last-child { border-bottom: 0; color: #ff3b30; }
  .site-footer { color: var(--ios-sec); }
}

/* Variante: Glas zurück, alles eckig (3 px) */
@media (max-width: 760px) {
  :root { --ios-cell: rgba(255,255,255,.66); --ios-bar: rgba(255,255,255,.6); --ios-fill: rgba(118,118,128,.14); }
  html[data-theme=dark] { --ios-cell: rgba(var(--b-dk-glass-rgb),.58); --ios-bar: rgba(var(--b-dk-bar-rgb),.6); --ios-fill: rgba(255,255,255,.10); }
  html, html[data-theme=dark] { background: var(--page-bg) !important; background-attachment: fixed !important; }
  .card, .summary-grid div { background: var(--g-bg) !important; border: 1px solid var(--g-border) !important; border-radius: 8px !important;
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) !important; backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) !important;
    box-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px var(--g-shadow) !important; }
  header.top { background: var(--g-bg) !important; border-bottom: 1px solid var(--g-border) !important; box-shadow: 0 6px 20px var(--g-shadow) !important; }
  .tabbar { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; border-radius: 8px !important;
    background: var(--g-bg) !important; border: 1px solid var(--g-border) !important; box-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px var(--g-shadow) !important; padding: 2px 0 !important; }
  body.logged-in main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tabbar .menu-pop { bottom: calc(76px + env(safe-area-inset-bottom)); border-radius: 8px !important; background: var(--g-solid) !important; border: 1px solid var(--g-border) !important; }
  .btn, .btn.small, .btn.primary, input:not([type=checkbox]):not([type=radio]), textarea, select, .tabs, .tabs a, .tag, .notes, .help-wanted li, .theme-toggle, .theme-toggle button, .m-btn { border-radius: 3px !important; }
  .flash, .admin-hint, .help-wanted, .card.pending { border-radius: 8px !important; }
  .btn:not(.primary) { background: var(--g-hover) !important; }
  /* Mitfahr-Schalter rund wie beim iPhone */
}

/* v1.31: Mitgliederansicht – Hinweisleiste, Umschalter in Menüs und Verwaltung */
.memberview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); border: 2px solid #9b6fd0;
  background: rgba(155,111,208,.14); color: var(--heading); position: sticky; top: 8px; z-index: 30;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-theme=dark] .memberview-bar { background: rgba(155,111,208,.24); border-color: #b996e6; }
.memberview-bar form { margin: 0; }
.memberview-bar .btn { white-space: nowrap; }
.view-switch { margin: 0; display: inline; }
.menu-pop .view-switch { display: block; }
.menu-pop .view-switch button { color: #7a4cb5 !important; font-weight: 600; }
html[data-theme=dark] .menu-pop .view-switch button { color: #cfb2f2 !important; }
.subnav .view-switch { margin-left: auto; }
.subnav .view-switch .btn { margin: 4px 0; }
.area-form { display: block; margin-top: 2px; }
.btnrow form { display: inline; }
@media (max-width: 760px) {
  .memberview-bar { top: calc(env(safe-area-inset-top, 0px) + 54px); font-size: .9rem; padding: 8px 12px; }
  .memberview-bar .btn { width: 100%; }
  .tabbar .menu-pop .view-switch button { text-align: center; padding: 16px; font-size: 1.15rem; font-weight: 500; border-bottom: .5px solid var(--ios-sep); border-radius: 0; }
  .subnav .view-switch { margin-left: 8px; }
}
@media print { .memberview-bar, .view-switch { display: none !important; } }

/* 2.3: Demo-Modus – Hinweisband und Demo-Zugänge auf der Anmeldeseite */
.demo-bar { margin: 0 0 14px; padding: 9px 14px; border-radius: 10px; background: #fff4d6; border: 1px solid #e3b440; color: #4a3800; font-size: .92em; line-height: 1.45; }
.demo-bar strong { background: #e3b440; color: #2b2100; padding: 1px 8px; border-radius: 6px; margin-right: 2px; }
.demo-bar a { color: inherit; font-weight: 600; }
html[data-theme=dark] .demo-bar { background: rgba(227,180,64,.16); border-color: #c9a03a; color: #f3e2b0; }
.demo-login .demo-accounts { display: grid; gap: 10px; }
.demo-login .demo-accounts form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.demo-login .demo-accounts .btn { min-width: 190px; }
.demo-mail { white-space: pre-wrap; font-family: inherit; margin: 6px 0 0; font-size: .92em; }
@media (max-width: 600px) { .demo-bar { font-size: .8em; padding: 6px 10px; margin-bottom: 10px; } }

/* 2.11.1: Handy – größere Tippflächen am Hell/Dunkel-Umschalter, Verwaltungsleiste bricht um statt seitlich zu verschwinden, kein seitliches Wackeln */
@media (max-width: 760px) {
  .theme-toggle button { min-width: 40px; min-height: 34px; justify-content: center; }
  .subnav .wrap { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 0; }
  .subnav a { padding: 6px 10px !important; margin: 3px 0 !important; }
  body { overflow-x: clip; }
  .module-form .module-row { flex-wrap: wrap; }
  main select, main input[type=file] { max-width: 100%; }
  .module-form .module-row > label.check[style*="28px"] { flex: 1 1 100%; }
}
/* 2.11.1: zugeklappte Menüs nehmen keinen Platz ein */
details.menu:not([open]) > .menu-pop { display: none !important; }