/* München heute – Design „Glas“ (Produktion seit 22.10.2026).
   Liegt über css/app.css (Grundlayout) und ersetzt den Blueprint-Look.
   Vorlage: designs/common.css + designs/glas.css */
/* ===== Gemeinsame Basis aller Design-Varianten (wird vor die Variante gesetzt) =====
   Entfernt den Blueprint-Look: keine „+“-Marken, keine überstehenden Linien,
   keine Schraffur. Funktionen und Markup bleiben unverändert. */
.card::before { content: none !important; display: none !important; }
.card { border: 0; }
body { font-size: 16px; }
.tile p, .mini .sub { font-size: 16px; }
.mini .sub2, .row .what .meta, .muted, .count { font-size: 15px; }
.morebtn { background-image: none; }
.band { background-image: none; }
.brand-mark { border: 0; }
.brand-mark::after { content: none; }
.tabbar a::before { content: none; }
.rubric-head .num { transform: none; }
.facts tr:first-child th, .facts tr:first-child td { border-top: 0; }
/* Akzentfarben so weit abgedunkelt, dass farbige Schrift auch auf getönten
   Flächen WCAG AA (≥ 4,5:1) erreicht. Rubrikfarben in js/config.js werden beim
   Bauen passend ersetzt (tools/build-designs.mjs). */
:root { --oepnv: #c42929; --free: #197533; }
.day, .preview, .calcard { --c: #a34f00; }

/* ===== Variante „Glas“ – angelehnt an Apples Liquid Glass =====
   Milchglas-Flächen mit Unschärfe, feinen Lichtkanten, großen Radien,
   schwebende Glas-Tab-Leiste, Systemschrift (SF auf iPhone, sonst Inter). */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Inter'; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+1E00-1E9F; }

:root {
  --ink: #111318; --ink-2: #363b46; --ink-3: #5a6070; --line: rgba(17,19,24,.10); --grid: rgba(17,19,24,.06);
  --head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --tabh: 64px;
  --r: 22px;
  --glass: rgba(255,255,255,.5);
  --glass-strong: rgba(255,255,255,.72);
  --glass-edge: rgba(255,255,255,.85);
  --blur: blur(22px) saturate(180%);
  --lift: 0 1px 1px rgba(20,30,60,.04), 0 10px 30px rgba(20,30,60,.08);
  --spec: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.25);
  --sky: radial-gradient(70% 45% at 0% 0%, #bcd4ff 0%, rgba(188,212,255,0) 70%),
         radial-gradient(60% 40% at 100% 14%, #ffd3bd 0%, rgba(255,211,189,0) 70%),
         radial-gradient(65% 45% at 0% 60%, #c6eed8 0%, rgba(198,238,216,0) 70%),
         radial-gradient(70% 50% at 100% 92%, #ddd0ff 0%, rgba(221,208,255,0) 70%),
         #eef1f7;
}
html { background: #eef1f7; } body { background: transparent; }
body { font-family: var(--text); letter-spacing: -.005em; }
/* Farbverläufe hinter dem Glas – als feste Ebene (iOS kennt kein background-attachment: fixed) */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--sky); pointer-events: none; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
:focus-visible { outline-offset: 3px; border-radius: 12px; }

/* Glas-Grundfläche */
.card, .topbar, .tabbar, .morebtn, .chip, .day, .hours div, .archive-banner, .art-actions button, .sheet, .pagebar, .opt, .seg {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r); box-shadow: var(--lift), var(--spec); }

/* Obere Leiste */
.topbar { background: rgba(243,245,249,.62); border-bottom: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 0 rgba(17,19,24,.05); }
.brand { font: 700 18px/1 var(--head); text-transform: none; letter-spacing: -.01em; }
.brand-mark { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #6aa0ff, #1a5cc8); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }

/* Begrüßung */
.hello { padding: 26px 2px 16px; }
.hello h1 { font-size: 36px; letter-spacing: -.03em; }
.hello .date { font: 600 14px/1.2 var(--text); letter-spacing: .02em; text-transform: none; color: var(--ink-3); margin-top: 8px; }
.hello .intro { font-size: 17px; color: var(--ink-2); }
.note { border: 0; border-radius: 12px; background: var(--glass); }
.archive-banner { border: 1px solid var(--glass-edge); border-radius: 16px; background: var(--glass-strong); box-shadow: var(--lift); }

/* Wetter + ÖPNV */
.duo { gap: 12px; margin-top: 6px; }
.mini { padding: 16px 16px 12px; border-radius: 24px; }
.mini .k { font: 600 13px/1.2 var(--text); letter-spacing: 0; text-transform: none; }
.mini .big { font: 700 30px/1 var(--head); letter-spacing: -.03em; }
.mini.oepnv .big { font-size: 21px; letter-spacing: -.02em; }
.mini .go { font-size: 15px; }

/* Rubriken: Farbe als Punkt + feine Beschriftung statt dicker Linien */
.rubric { margin-top: 38px; }
.rubric-head { border-bottom: 0; padding: 0 2px; margin-bottom: 14px; align-items: center; gap: 10px; color: var(--ink); }
.rubric-head .num { order: 2; margin-left: auto; border: 0; padding: 5px 10px; border-radius: 999px; font: 600 13px/1 var(--text); letter-spacing: .02em; color: var(--c); background: var(--glass-strong); box-shadow: var(--spec), 0 0 0 1px rgba(255,255,255,.7); }
.rubric-head h2 { font-size: 26px; text-transform: none; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.rubric-head h2::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(255,255,255,.8), 0 2px 6px rgba(0,0,0,.15); flex: none; }
.tiles { gap: 14px; }
.tile { padding: 16px 16px 4px; }
.cat { font: 600 13px/1.2 var(--text); letter-spacing: .01em; text-transform: none; }
.when { font-weight: 600; }
.tile h3 { font-size: 21px; margin-top: 6px; letter-spacing: -.02em; }
.tile p { color: var(--ink-2); line-height: 1.5; }
.actions { border-top: 1px solid rgba(17,19,24,.07); margin-top: 10px; }
.morebtn { margin-top: 14px; min-height: 50px; border: 1px solid var(--glass-edge); border-radius: 999px; padding: 0 18px; background: var(--glass); box-shadow: var(--lift), var(--spec); font: 600 16px/1 var(--text); letter-spacing: 0; text-transform: none; color: var(--c); }

.band { margin: 46px 0 0; border-radius: 20px; padding: 16px; background: rgba(17,19,24,.78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); font: 600 16px/1 var(--text); letter-spacing: .02em; text-transform: none; box-shadow: var(--lift), inset 0 1px 0 rgba(255,255,255,.18); }
.foot h2 { font-size: 24px; }

/* Schwebende Glas-Tab-Leiste */
main { padding-bottom: calc(var(--tabh) + var(--sab) + 44px); }
.tabbar { left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(10px + var(--sab)); padding: 4px; border: 1px solid var(--glass-edge); border-radius: 32px; background: rgba(255,255,255,.58); box-shadow: 0 12px 34px rgba(20,30,60,.16), var(--spec); max-width: 520px; margin: 0 auto; }
.tabbar a { min-height: calc(var(--tabh) - 8px); border-radius: 28px; font: 500 12px/1 var(--text); color: var(--ink-3); transition: background .2s; }
.tabbar a.active { color: var(--tabc, var(--wetter)); background: rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(20,30,60,.10), inset 0 1px 0 #fff; font-weight: 600; }
.toast { bottom: calc(var(--tabh) + var(--sab) + 26px); border-radius: 999px; background: rgba(17,19,24,.86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* Seitenköpfe */
.pagehead { padding: 26px 2px 8px; }
.pagehead h1 { font-size: 32px; text-transform: none; letter-spacing: -.03em; }

/* Woche: jeder Tag eine Glasfläche */
.day { margin-top: 18px; padding: 4px 16px 2px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--lift), var(--spec); }
.day-head { font: 700 17px/1.2 var(--text); text-transform: none; letter-spacing: -.01em; border-bottom: 0; padding: 12px 0 4px; }
.day-head::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 1px; }
.row { border-bottom: 1px solid rgba(17,19,24,.07); }
.row:last-child { border-bottom: 0; }
.row .t { font: 700 17px/1 var(--text); letter-spacing: -.01em; }
.preview { padding: 16px; }
.btn-wide { border: 1px solid var(--glass-edge); border-radius: 999px; font: 600 17px/1 var(--text); letter-spacing: 0; text-transform: none; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift), var(--spec); }
.btn-solid { background: var(--c, var(--ink)); color: #fff; border-color: transparent; }

/* Entdecken */
.chips { background: transparent; }
.chip { border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); font: 600 15px/1 var(--text); letter-spacing: 0; text-transform: none; box-shadow: var(--spec), 0 2px 8px rgba(20,30,60,.06); }
.chip[aria-pressed="true"] { background: var(--c); color: #fff; border-color: transparent; }
.secline { font: 700 15px/1 var(--text); text-transform: none; letter-spacing: 0; }

/* Ausgaben */
.ed .top { font: 600 14px/1.2 var(--text); letter-spacing: 0; text-transform: none; }
.ed .wx { font: 600 15px/1.2 var(--text); letter-spacing: 0; text-transform: none; }
.tag { border-radius: 999px; padding: 4px 9px; }

/* Vollbild-Seiten */
.page { background: var(--sky); }
.pagebar { background: rgba(243,245,249,.62); border-bottom: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 0 rgba(17,19,24,.05); }
.pagebar .label { font: 600 14px/1 var(--text); letter-spacing: 0; text-transform: none; }
.article h1 { font-size: 32px; letter-spacing: -.03em; }
.facts { border-radius: 18px; overflow: hidden; background: var(--glass); box-shadow: var(--lift); border-collapse: separate; border-spacing: 0; }
.facts th, .facts td { border-bottom: 1px solid rgba(17,19,24,.06); padding: 12px 12px; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { font: 600 14px/1.4 var(--text); text-transform: none; letter-spacing: 0; padding-left: 14px; }
.art-actions button { border: 1px solid var(--glass-edge); border-radius: 16px; background: var(--glass); box-shadow: var(--lift), var(--spec); font: 600 16px/1 var(--text); letter-spacing: 0; text-transform: none; }
.art-actions button.done { border-color: var(--free); }
.source { border-top: 1px solid rgba(17,19,24,.08); }
.brief li { border-bottom: 1px solid rgba(17,19,24,.07); }
.brief li::before { border-radius: 50%; }
.hours div { border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--glass); }
.hours div b { font: 700 16px/1.2 var(--text); }

/* Blätter von unten */
.backdrop { background: rgba(17,19,24,.25); }
.sheet { border-top: 0; border-radius: 28px 28px 0 0; background: rgba(248,249,252,.82); box-shadow: 0 -10px 40px rgba(20,30,60,.18), var(--spec); }
.sheet-head h2 { font-size: 24px; text-transform: none; }
.sheet h3 { font: 600 14px/1.2 var(--text); text-transform: none; letter-spacing: 0; }
.toggle { border-bottom: 1px solid rgba(17,19,24,.07); }
.toggle .sw { width: 51px; height: 31px; border: 0; border-radius: 999px; background: rgba(120,120,128,.24); }
.toggle .sw::after { top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.toggle[aria-checked="true"] .sw { background: var(--c); }
.toggle[aria-checked="true"] .sw::after { transform: translateX(20px); }
.toggle .sq { border-radius: 50%; }
.seg { border: 0; border-radius: 12px; background: rgba(120,120,128,.14); padding: 2px; }
.seg button { border-right: 0; border-radius: 10px; }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.later { border-radius: 999px; }
.opt { border: 1px solid var(--glass-edge); border-radius: 16px; background: var(--glass); }
.opt .dot { border-radius: 50%; }
.calcard b { font: 700 20px/1.2 var(--text); }
.sk { border-radius: 8px; }

/* Kein backdrop-filter: deckende, helle Flächen statt Glas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .day, .morebtn, .chip, .hours div, .opt, .art-actions button, .btn-wide, .facts, .archive-banner { background: rgba(255,255,255,.94); }
  .topbar, .pagebar { background: rgba(243,245,249,.97); }
  .tabbar { background: rgba(255,255,255,.97); }
  .sheet { background: #f8f9fc; }
  .band { background: #22252c; }
}