/* Wuseltipps – iOS-Designsystem nach den Apple Human Interface Guidelines.
   Wird nach style.css geladen und überschreibt dort nur das Aussehen:
   Systemschrift (SF Pro) mit Dynamic Type, Systemfarben für Hell und Dunkel, durchgehende Tableiste,
   Navigationsleiste mit Zurück-Knopf und großem Titel, gruppierte Listen, Segmentschalter, Sheets, 44-pt-Tippflächen.
   Markenfarbe (Terrakotta) bleibt die Tint-Farbe. Entfernen der Datei = altes Aussehen. */

:root {
  color-scheme: light;
  --f-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Systemfarben (hell) */
  --cream: #F2F2F7;            /* systemGroupedBackground */
  --paper: #FFFFFF;            /* secondarySystemGroupedBackground */
  --sand: #E5E5EA;
  --ink: #000000;              /* label */
  --ink-2: #5B5B60;            /* secondaryLabel, abgedunkelt: mind. 4,5:1 auch auf Grauflächen (WCAG AA) */
  --line: rgba(60, 60, 67, .16);
  --line-strong: rgba(60, 60, 67, .29);   /* separator */
  --fill: rgba(118, 118, 128, .12);       /* systemFill */
  --seg-on: #FFFFFF;
  --bar-bg: rgba(249, 249, 249, .82);
  --forest-bg: #2F5D50;
  --danger: #D70015;
  --ios-green: #248A3D;        /* barrierearmes Grün (accessibleSystemGreen) */
  --field-edge: #8A8A8E;       /* Rand von Eingabefeldern: mind. 3:1 zur Fläche (WCAG 1.4.11) */
  --placeholder: #6E6E73;      /* Platzhalter-Text: mind. 4,5:1 */
  --switch-off: #8A8A8E;
  --blur: saturate(180%) blur(20px);

  /* Formen & Schatten: flache Flächen, kaum Schatten */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --shadow-1: 0 0 0 .5px rgba(60, 60, 67, .1);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(60, 60, 67, .1);

  --tabbar-h: 49px;
}

html[data-theme="dark"] { color-scheme: dark; }
/* Dunkel: per data-theme (theme.js – Systemeinstellung oder eigene Wahl) */
  html[data-theme="dark"] {
    --cream: #000000;
    --paper: #1C1C1E;
    --sand: #2C2C2E;
    --ink: #FFFFFF;
    --ink-2: #AEAEB2;
    --line: rgba(84, 84, 88, .5);
    --line-strong: rgba(84, 84, 88, .75);
    --fill: rgba(120, 120, 128, .32);
    --seg-on: #636366;
    --bar-bg: rgba(29, 29, 30, .82);
    --accent: #F28B6E;           /* Schrift/Symbole auf Dunkel: mind. 4,5:1 */
    --accent-hover: #F6A48C;
    --accent-fill: #B8432A;      /* Flächen unter weißer Schrift: mind. 4,5:1 */
    --accent-fill-hover: #A23A23;
    --accent-soft: #3B221B;
    --forest: #62B597;
    --forest-soft: #1E3A30;
    --forest-bg: #2A6150;
    --danger: #FF6961;
    --ios-green: #30D158;
    --field-edge: #757579;
    --placeholder: #8E8E93;
    --switch-off: #6E6E73;
    --shadow-1: 0 0 0 .5px rgba(84, 84, 88, .4);
    --shadow-2: 0 10px 32px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(84, 84, 88, .5);
  }
  html[data-theme="dark"] [data-cat=spielplatz], html[data-theme="dark"] [data-cat=ausflug] { --c-bg: #1B3A2D; --c-fg: #7FD1A8; --c-dot: #2E5A44; }
  html[data-theme="dark"] [data-cat=baden] { --c-bg: #17353D; --c-fg: #6CCBE0; --c-dot: #28606E; }
  html[data-theme="dark"] [data-cat=kurs], html[data-theme="dark"] [data-cat=verein] { --c-bg: #1E3049; --c-fg: #86B5EA; --c-dot: #35547F; }
  html[data-theme="dark"] [data-cat=kultur], html[data-theme="dark"] [data-cat=event] { --c-bg: #2D2442; --c-fg: #BCA0E6; --c-dot: #4E3F73; }
  html[data-theme="dark"] [data-cat=restaurant] { --c-bg: #402219; --c-fg: #F29A82; --c-dot: #6D3B2D; }
  html[data-theme="dark"] [data-cat=geburtstag] { --c-bg: #432130; --c-fg: #F5A3BD; --c-dot: #74364D; }
  html[data-theme="dark"] [data-cat=alle] { --c-bg: var(--sand); --c-fg: var(--ink); --c-dot: #48484A; }
  html[data-theme="dark"] .notice, html[data-theme="dark"] .dup-box { background: #3A3014; border-color: #6B5718; color: #F4E3B0; }
  html[data-theme="dark"] .dup-hint, html[data-theme="dark"] .chip-mini.warn { background: #40340F; color: #F4CE6A; }
  html[data-theme="dark"] .dup-head > .ic { color: #F4CE6A; }
  html[data-theme="dark"] .tag.sand { background: #3A3024; color: #E0B88A; }
  html[data-theme="dark"] .tag.demo { background: #2C2C2E; color: #AEAEB2; }
  html[data-theme="dark"] .btn.danger { color: var(--danger); }
  html[data-theme="dark"] .invalid input:not([type=checkbox]), html[data-theme="dark"] .invalid select, html[data-theme="dark"] .invalid textarea { background-color: #2A1614; }
  html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1C1C1E 0%, #2C2C2E 50%, #1C1C1E 100%); background-size: 200% 100%; }
  html[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23AEAEB2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  html[data-theme="dark"] .leaflet-container, html[data-theme="dark"] #map, html[data-theme="dark"] .minimap, html[data-theme="dark"] .fav-map { background: #1C1C1E; }
  html[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }
  html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--paper); color: var(--ink); }
  html[data-theme="dark"] .leaflet-bar a { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
  html[data-theme="dark"] .leaflet-control-attribution { background: rgba(28, 28, 30, .8) !important; color: var(--ink-2) !important; }
  html[data-theme="dark"] .leaflet-control-attribution a { color: var(--ink-2) !important; }
  html[data-theme="dark"] .photo-big { background: #000; }
  html[data-theme="dark"] .cat-tile .bubble { background: rgba(0, 0, 0, .32); }
  html[data-theme="dark"] .brand img { content: url("/img/logo-blume-dark.svg"); }

/* ---------- Schrift: Systemschrift mit Dynamic Type ----------
   Wer in iOS „Anzeige & Helligkeit → Textgröße“ ändert, vergrößert damit die ganze App (alle Größen sind rem). */
@supports (font: -apple-system-body) { html { font: -apple-system-body; -webkit-text-size-adjust: 100%; } }
body { font-family: var(--f-text); font-size: 1rem; line-height: 1.4; overscroll-behavior-y: auto; background: var(--cream); color: var(--ink); }
h1, h2, h3 { font-family: var(--f-display); font-variation-settings: normal; letter-spacing: -.01em; }
h1 { font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: .01em; }        /* Large Title 34 pt */
h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }                              /* Title 2, 22 pt */
h3 { font-size: 1.18rem; font-weight: 600; line-height: 1.25; }                            /* Title 3, 20 pt */
.hero h1 { font-size: 2rem; }
.hero h1 em { font-style: normal; font-variation-settings: normal; font-weight: 700; }
.hero .lead { font-size: 1.0625rem; line-height: 1.4; }
.detail h1 { font-size: 1.75rem; }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: .9375rem; }
.l-card h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }              /* Headline */
.section-head h2, .results-bar h2, .heute-head h2 { font-size: 1.3rem; }
a { text-underline-offset: 2px; }

/* ---------- Navigationsleiste ---------- */
.top { background: var(--bar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: .5px solid transparent; }
.top.scrolled { border-bottom-color: var(--line-strong); }
.nav-back, .nav-title { display: none; }
.brand span { font-size: 1.5rem; }
.top-nav a { font-weight: 600; font-size: .9375rem; }
.top-nav a[aria-current="page"] { background: var(--fill); color: var(--accent); }
.avatar-btn { border: 0; background: var(--fill); }

@media (max-width: 1023px) {
  :root { --header-h: 44px; }
  .nav-back { display: flex; align-items: center; min-width: 0; }
  .nav-back:empty { display: none; }
  .top.has-back .brand { display: none; }
  .nav-back .back { margin: 0; min-height: 44px; padding: 0 var(--s3) 0 0; color: var(--accent); font-size: 1.0625rem; font-weight: 400; max-width: 40vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .nav-back .back .ic { width: 26px; height: 26px; stroke-width: 2.4; margin-left: -8px; }
  .nav-back .back:hover { color: var(--accent); }
  .nav-title { display: block; position: absolute; left: 50%; bottom: 0; height: var(--header-h); line-height: var(--header-h); transform: translateX(-50%); max-width: calc(100% - 200px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.0625rem; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .top.title-on .nav-title { opacity: 1; }
  .top.title-on:not(.has-back) .brand { opacity: 0; }
}

/* ---------- Tableiste: durchgehend, Material-Hintergrund, 5 gleichwertige Tabs ---------- */
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.tabbar { left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-radius: 0; box-shadow: none; background: var(--bar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: .5px solid var(--line-strong); align-items: flex-start; justify-content: space-around; }
.tabbar a { min-height: var(--tabbar-h); justify-content: center; gap: 2px; padding: 0; font-size: 10px; font-weight: 500; letter-spacing: .01em; color: var(--ink-2); }
.tabbar a .ic { width: 25px; height: 25px; stroke-width: 1.75; }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.tabbar a[aria-current="page"] .ic { stroke-width: 2.1; fill: currentColor; fill-opacity: .14; }
.tabbar a:active { opacity: .6; transform: none; }
#toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); border-radius: var(--r-md); font-weight: 500; background: rgba(40, 40, 42, .94); }
@media (min-width: 1024px) { body { padding-bottom: 0; } #toast { bottom: var(--s6); } }
@media (max-width: 1023px) {
  body[data-route="new"] { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body[data-route="new"] #toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .submit-bar { background: var(--bar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: .5px solid var(--line-strong); box-shadow: none; border-radius: 0; }
}

/* ---------- Flächen: gruppierte, flache Karten ---------- */
.card, .form-section, .info-card, .profile-card, .set-group, .conv-list, .auth, .more-filters, .comment-body, .heute-card, .treff-card, .admin-row, .l-card { box-shadow: var(--shadow-1); }
.info-card, .auth { box-shadow: var(--shadow-2); }
.l-card { border-left: 0; padding: var(--s3) var(--s2) var(--s3) var(--s4); background: var(--paper); }
.l-card:hover { box-shadow: var(--shadow-1); transform: none; }
.l-card:active, .heute-card:active { background: var(--sand); transform: none; }
.l-card .fav { width: 44px; height: 44px; background: transparent; margin: -4px 0 0; }
.my-item .l-card { border: 0; }
.list-filter .chips { margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); }
.review, .info-list li, .person-row, .conv, .set-row { border-bottom-color: var(--line-strong); }
.info-list .ib, .set-row .num { background: var(--fill); }
.stat, .kid { background: var(--fill); }
.narrow > .stats .stat { background: var(--paper); }
.empty .art { background: var(--fill); }

/* ---------- Buttons: gefüllt, getönt, einfach ---------- */
.btn { min-height: 50px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; border-width: 0; padding: 0 var(--s5); transition: opacity .15s, background .15s; }
.btn:hover { transform: none; }
.btn:active { opacity: .7; transform: none; }
.btn.sm { min-height: 40px; font-size: 1rem; }
.btn.outline { background: var(--fill); color: var(--ink); }
.btn.outline:hover { background: var(--fill); color: var(--ink); filter: brightness(.96); }
.btn.ghost { color: var(--accent); }
.btn.ghost:hover { background: var(--fill); color: var(--accent); }
.btn.danger { background: rgba(255, 59, 48, .1); color: var(--danger); }
.btn.danger:hover { background: rgba(255, 59, 48, .16); color: var(--danger); }
.btn.danger-text, .btn.danger-text:hover { color: var(--danger); background: transparent; }
.btn.dark { background: var(--ink); color: var(--cream); }
.btn.forest { background: var(--forest-bg); }
.btn.forest:hover { background: var(--forest-bg); filter: brightness(1.08); }
.band .btn { color: #000; }
.icon-btn { background: var(--paper); box-shadow: var(--shadow-1); }
.icon-btn:hover { transform: none; }
.icon-btn:active { opacity: .6; }
@media (pointer: coarse) {
  .btn.sm { min-height: 44px; }
  .chip, .filter-group .chip { min-height: 44px; }
  .view-toggle button { min-height: 40px; }
  .tabs button { min-height: 44px; }
}

/* ---------- Chips, Segmentschalter ---------- */
.chip { border: 0; background: var(--paper); box-shadow: var(--shadow-1); font-weight: 500; font-size: .9375rem; }
.chip:hover { box-shadow: var(--shadow-1); }
.chip:active { opacity: .7; transform: none; }
.chip[aria-pressed="true"] { background: var(--accent-fill); color: #fff; box-shadow: none; }
.chip-count { background: var(--fill); color: var(--ink-2); }
.chip[aria-pressed="true"] .chip-count { background: rgba(255, 255, 255, .25); color: #fff; }
.view-toggle, .tabs { background: var(--fill); border: 0; padding: 2px; }
.view-toggle button, .tabs button { font-weight: 500; color: var(--ink); }
.view-toggle button[aria-pressed="true"], .tabs button[aria-selected="true"] { background: var(--seg-on); color: var(--ink); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.tabs .count-badge, .count-badge { background: var(--fill); color: var(--ink-2); }
.tabs button[aria-selected="true"] .count-badge { color: var(--ink); }
.checks label { border: 0; box-shadow: var(--shadow-1); font-weight: 500; }
.checks label:has(input:checked) { background: var(--forest-soft); box-shadow: inset 0 0 0 1.5px var(--forest); }
.cat-tile { border-width: 0; }
.cat-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--c-fg); }
.cat-tile:active { opacity: .75; transform: none; }
.cat-tile:hover { transform: none; }
.kind-pick button, .who-pick button, .org-pick button { border: 0; box-shadow: var(--shadow-1); }
.kind-pick button[aria-checked="true"], .who-pick button[aria-checked="true"], .org-pick button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--forest); }

/* ---------- Formulare ---------- */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=month], input[type=date], input[type=search],
input[type=number], input[type=tel], input[type=time], input[type=datetime-local], select, textarea {
  border: 0; background-color: var(--paper); box-shadow: inset 0 0 0 1px var(--field-edge); border-radius: var(--r-sm); min-height: 50px; color: var(--ink);
}
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--field-edge); }
input:focus, select:focus, textarea:focus, input[type=number]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=datetime-local]:focus { box-shadow: 0 0 0 2px var(--accent); }
label.field > span, .field-label { font-weight: 600; font-size: .9375rem; color: var(--ink-2); }
.search-field input[type=search], .sb-field input { background-color: transparent; }
.sb-field input, .sb-field select { min-height: 0; border-radius: 0; box-shadow: none; }
.sb-field input:hover, .sb-field select:hover { box-shadow: none; }
.searchbar { outline: 1px solid var(--field-edge); outline-offset: -1px; }
.search-field input[type=search] { background-color: var(--fill); box-shadow: inset 0 0 0 1px var(--field-edge); border-radius: var(--r-pill); min-height: 44px; }
.search-field input[type=search]:focus { box-shadow: 0 0 0 2px var(--accent); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
.ic-ph, select:has(option[value=""]:checked) { color: var(--placeholder); }
.req { color: var(--accent); }
.field-error { font-weight: 500; }
.invalid input:not([type=checkbox]), .invalid select, .invalid textarea { box-shadow: 0 0 0 1.5px var(--danger); }
.form-section > h2 .num { background: var(--fill); }

/* iOS-Schalter */
.switch { width: 51px; height: 31px; background: var(--switch-off); }
.switch::after { top: 2px; left: 2px; width: 27px; height: 27px; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); }
input[role="switch"]:checked + .switch-row .switch { background: var(--ios-green); }
input[role="switch"]:checked + .switch-row .switch::after { transform: translateX(20px); }

/* Suche auf der Startseite: auf dem Handy als gruppierte Liste */
@media (max-width: 1023px) {
  .searchbar { grid-template-columns: minmax(0, 1fr); max-width: 680px; padding: 0; gap: 0; overflow: hidden; box-shadow: var(--shadow-1); border-radius: var(--r-md); }
  .searchbar .sb-field { border-radius: 0; min-height: 56px; }
  .searchbar .sb-field + .sb-field::before { display: none; }
  .searchbar .sb-field + .sb-field { box-shadow: 0 -.5px 0 var(--line-strong); }
  .searchbar .btn { margin: var(--s2); min-height: 50px; border-radius: var(--r-pill); }
}
.sb-field:hover, .sb-field:focus-within { background: var(--fill); }
.searchbar { box-shadow: var(--shadow-2); }
.sb-field small { font-weight: 600; letter-spacing: .02em; }

/* ---------- Sheets: Dialoge wie in iOS ---------- */
dialog { border-radius: var(--r-lg); box-shadow: var(--shadow-2); background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog[open] { animation: sheetPop .25s var(--ease); }
.dlg-head .icon-btn { width: 32px; height: 32px; background: var(--fill); box-shadow: none; position: relative; }
.dlg-head .icon-btn::after { content: ""; position: absolute; inset: -6px; }
@keyframes sheetPop { from { opacity: 0; transform: scale(.96); } }
@keyframes sheetUp { from { transform: translateY(100%); } }
@media (max-width: 599px) {
  dialog[open] { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh; overflow: auto; border-radius: 20px 20px 0 0;
    padding: var(--s6) max(var(--s4), env(safe-area-inset-left)) calc(var(--s5) + env(safe-area-inset-bottom)); animation: sheetUp .35s var(--ease); }
  dialog[open]::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line-strong); }
  .dlg-head { margin-top: var(--s1); }
}

/* ---------- Sonstiges ---------- */
.nav-badge { background: #D70015; }   /* barrierearmes iOS-Rot, 5:1 zu Weiß */
.tag, .chip-mini.free, .chip-mini.open { font-weight: 600; }
.thumb { background: var(--c-bg); }
.avatar, .bubble-msg.mine { background: var(--forest-bg); }
.avatar.ghost { background: var(--fill); }
.avatar.has-img { background: var(--sand); }
.band { background: var(--forest-bg); }
.band p { color: rgba(255, 255, 255, .8); }
.info-points, .geo-results button { background: var(--fill); }
.geo-results button:hover { background: var(--sand); }
.chat-head { background: var(--cream); }
.bubble-msg { background: var(--paper); box-shadow: none; }
.chat-day { background: var(--fill); color: var(--ink-2); }
.composer { background: var(--bar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-1); }
.pw-toggle { color: var(--ink-2); }
footer.site, footer.site a { color: var(--ink-2); }
.stars .ic { color: #FF9F0A; fill: #FF9F0A; stroke: #FF9F0A; }
.starpick button { color: var(--line-strong); }
.starpick button.on { color: #FF9F0A; }
.starpick button.on .ic { fill: #FF9F0A; }

/* Kein Heben/Verschieben bei Hover auf Touch-Geräten */
@media (hover: none) {
  .l-card:hover, .cat-tile:hover, .heute-card:hover, .btn:hover, .icon-btn:hover, .chip:hover { transform: none; }
}

/* ---------- Tableiste im Liquid-Glass-Stil (iOS 26): schwebende Kapsel aus Glas ---------- */
:root {
  --glass-bg: rgba(255, 255, 255, .42);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .08);
  --glass-sel: rgba(120, 120, 128, .16);
  --tabbar-h: 62px;
}
/* Dunkel: per data-theme (theme.js – Systemeinstellung oder eigene Wahl) */
  html[data-theme="dark"] { --glass-bg: rgba(58, 58, 60, .45); --glass-edge: rgba(255, 255, 255, .16); --glass-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --glass-sel: rgba(255, 255, 255, .14); }
@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
  .tabbar {
    left: max(var(--s4), env(safe-area-inset-left)); right: max(var(--s4), env(safe-area-inset-right));
    bottom: calc(env(safe-area-inset-bottom) + 8px); height: var(--tabbar-h); padding: 5px;
    align-items: stretch; gap: 2px; border-radius: 999px; border: 0;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.04); backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
    box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, .5);
  }
  .tabbar a { min-height: 0; flex: 1 1 0; justify-content: center; border-radius: 999px; transition: background .25s var(--ease), color .2s; }
  .tabbar a[aria-current="page"] { background: var(--glass-sel); }
  .tabbar a[aria-current="page"] .ic { fill: none; stroke-width: 2; }
  .tabbar a:active { opacity: 1; background: var(--glass-sel); }
  #toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
  /* Karten-/Chat-/Formularseiten ohne Tableiste behalten ihre eigenen Abstände */
  body[data-route="new"], body[data-route="chat"] { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(250, 250, 252, .94); }
}

/* ---------- iOS 26 „Liquid Glass“: durchgehend ---------- */
:root {
  --r-sm: 14px; --r-md: 20px; --r-lg: 28px;
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .55);
}
html[data-theme="dark"] { --glass-strong: rgba(44, 44, 46, .72); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .12); } 

/* Navigationsleiste: kein Balken mehr, Inhalt läuft weich darunter weg */
@media (max-width: 1023px) {
  .top, .top.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
  .top::before { content: ""; position: absolute; inset: 0 0 -14px 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--cream) 88%, transparent) 55%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  /* Zurück-Knopf als Glas-Kapsel */
  .nav-back .back { min-height: 40px; padding: 0 14px 0 4px; border-radius: 999px; max-width: 46vw;
    background: var(--glass-bg); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge); }
  .nav-back .back .ic { margin-left: 0; }
  .nav-title { text-shadow: 0 0 12px var(--cream); }
}

/* Runde Glas-Knöpfe, Segmentschalter und Chips */
.icon-btn { background: var(--glass-strong); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge); }
.l-card .fav, .dlg-head .icon-btn, .rev-pic .icon-btn { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.l-card .fav { background: transparent; }
.chip { box-shadow: var(--shadow-1), var(--glass-hi); }
.chip[aria-pressed="true"] { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.view-toggle, .tabs { box-shadow: inset 0 0 0 .5px var(--line); }

/* Gefüllte Hauptknöpfe: leicht glänzend wie getöntes Glas */
.btn:not(.ghost):not(.outline):not(.danger):not(.danger-text) { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.dark, .btn.forest { box-shadow: 0 6px 18px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.outline { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Karten & Eingaben: großzügige, konzentrische Rundungen */
.l-card, .card, .heute-card, .treff-card { border-radius: var(--r-md); }
.searchbar, .info-card, .form-section, .profile-card, .auth, .set-group, .conv-list { border-radius: var(--r-lg); }
@media (max-width: 1023px) { .searchbar { border-radius: var(--r-lg); } }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=month], input[type=date], input[type=search],
input[type=number], input[type=tel], input[type=time], input[type=datetime-local], select, textarea { border-radius: var(--r-sm); }
.cat-tile { border-radius: var(--r-md); }

/* Sheets und Dialoge aus Glas */
dialog { background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge); border-radius: 32px; }
@media (max-width: 599px) { dialog[open] { border-radius: 32px 32px 0 0; } }
dialog input, dialog textarea, dialog select { background-color: var(--paper); }

/* Schwebende Speichern-Leiste im Formular als Glas-Kapsel */
@media (max-width: 1023px) {
  .submit-bar { left: max(var(--s3), env(safe-area-inset-left)); right: max(var(--s3), env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 8px); padding: 8px; border-radius: 999px; border: 0;
    background: var(--glass-bg); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge); }
  .submit-bar .btn { min-height: 46px; }
}

/* Outline-Buttons (z. B. „Meinen Standort verwenden“): der ganze Button reagiert, das Symbol springt nicht */
.btn.outline { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn.outline:hover { background: color-mix(in srgb, var(--forest) 12%, var(--paper, #fff)); color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); filter: none; }
.btn.outline:active { background: color-mix(in srgb, var(--forest) 20%, var(--paper, #fff)); }
.btn.outline:hover .ic, .btn.outline:active .ic { transform: none; }

/* Lange Beschriftungen umbrechen statt aus dem Button zu laufen */
.btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; text-wrap: balance; }
.btn.sm { white-space: nowrap; }
.row > input[type=search], .row > input[type=text] { flex: 1 1 0; min-width: 0; }