/* Schriften – selbst gehostet (kein Abruf bei Google) */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2-variations"), url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-var.woff2") format("woff2-variations"), url("/fonts/bricolage-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
/* ==========================================================================
   köln.app – Designsystem „Rheinrot“
   Kölner Rot · Rhein-Nachtblau · Sandstein · Kölsch-Gold
   ========================================================================== */
:root {
  --red: #c8102e;
  --red-deep: #8e0b21;
  --red-soft: #fbe9ec;
  --gold: #e3a92b;
  --gold-soft: #fbf1dc;
  --rhein: #2b6a92;
  --rhein-2: #5aa3cf;
  --rhein-soft: #e6f0f7;
  --green: #276b46; /* ≥ 4,5:1 auf --green-soft (WCAG AA) */
  --green-soft: #e3f3e9;
  --night: #121b33;
  --night-2: #1c2847;

  --ink: #16213d;
  --ink-2: #3d4763;
  --muted: #5f6779; /* ≥ 4,5:1 auch auf --bg-2 (WCAG AA) */
  --line: #e7e1d6;
  --line-2: #efeae1;
  --bg: #faf7f2;
  --bg-2: #f3eee5;
  --card: #ffffff;
  --acc: var(--red);
  --acc-soft: var(--red-soft);

  --shadow-sm: 0 1px 2px rgba(22, 33, 61, .06);
  --shadow: 0 1px 2px rgba(22, 33, 61, .05), 0 10px 30px -14px rgba(22, 33, 61, .22);
  --shadow-lg: 0 2px 4px rgba(22, 33, 61, .05), 0 24px 60px -24px rgba(22, 33, 61, .35);
  --radius: 18px;
  --radius-sm: 11px;
  --wrap: 1240px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E");
}
/* „hidden“ muss immer gewinnen – sonst bleiben gefilterte Karten (display: flex) sichtbar */
[hidden] { display: none !important; }
/* Bereichsfarben: --acc-l ist die Grundfarbe im hellen Modus, so gewählt, dass sie als Text ≥ 4,5:1 auf --bg erreicht
   (Orange, Gold und Türkis dafür leicht abgedunkelt). Im dunklen Modus wird sie unten mit Weiß aufgehellt. */
body[data-section="entdecken"] { --acc-l: #c8102e; --acc-soft: #fbe9ec; }
body[data-section="essen"]     { --acc-l: #b0561a; --acc-soft: #fbeedd; }
body[data-section="kultur"]    { --acc-l: #7445b3; --acc-soft: #f0e9fa; }
body[data-section="events"]    { --acc-l: #c42a63; --acc-soft: #fbe6ee; }
body[data-section="freizeit"]  { --acc-l: #0f7a8c; --acc-soft: #e0f4f6; }
body[data-section="stadt"]     { --acc-l: #2b6a92; --acc-soft: #e6f0f7; }
body[data-section="dienste"]   { --acc-l: #3d55a8; --acc-soft: #e8ecf8; }
body[data-section="verkehr"]   { --acc-l: #276b46; --acc-soft: #e3f3e9; }
body[data-section="anzeigen"]  { --acc-l: #b25513; --acc-soft: #fcecdc; }
body[data-section="news"]      { --acc-l: #c8102e; --acc-soft: #fbe9ec; }
body { --acc: var(--acc-l, var(--red)); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red: #ff5a72; --red-deep: #ff8597; --red-soft: #3a1622;
    --gold: #f2c25a; --gold-soft: #3a2f16;
    --rhein: #7db8e0; --rhein-2: #4f8db8; --rhein-soft: #16263a;
    --green: #6fcf97; --green-soft: #15301f;
    --ink: #eef1f8; --ink-2: #c4cbdb; --muted: #8f98ad; --line: #283350; --line-2: #222c46;
    --bg: #0d1426; --bg-2: #131c33; --card: #162038;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.8);
  }
  :root:not([data-theme="light"]) body { --acc: color-mix(in srgb, var(--acc-l, #ff5a72) 70%, #fff); --acc-soft: color-mix(in srgb, var(--acc) 22%, #0d1426); }
}
:root[data-theme="dark"] {
  --red: #ff5a72; --red-deep: #ff8597; --red-soft: #3a1622; --gold: #f2c25a; --gold-soft: #3a2f16;
  --rhein: #7db8e0; --rhein-2: #4f8db8; --rhein-soft: #16263a; --green: #6fcf97; --green-soft: #15301f;
  --ink: #eef1f8; --ink-2: #c4cbdb; --muted: #8f98ad; --line: #283350; --line-2: #222c46;
  --bg: #0d1426; --bg-2: #131c33; --card: #162038;
}
:root[data-theme="dark"] body { --acc: color-mix(in srgb, var(--acc-l, #ff5a72) 70%, #fff); --acc-soft: color-mix(in srgb, var(--acc) 22%, #0d1426); }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--acc); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
main a:not(.btn):not(.section-tile):not(.teaser):not(.chip):not([class]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acc) 35%, transparent); }
a:hover { text-decoration: underline; text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--acc) 25%, transparent); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin-top: 2.6rem; font-weight: 750; }
h3 { font-size: 1.16rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
strong { font-weight: 650; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; display: inline-block; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: 10px 14px; z-index: 100; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 68ch; line-height: 1.55; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
main { padding: 2rem 20px 4rem; min-height: 50vh; }
ul.plain { list-style: none; padding: 0; margin: 0; }
.two-col { columns: 2; column-gap: 2.5rem; }
@media (max-width: 700px) { .two-col { columns: 1; } }
main ul:not([class]), main ol:not([class]) { padding-left: 1.25em; }
main li::marker { color: var(--acc); }
main li { margin: .3em 0; }

/* ---------- Stadtfarben-Leiste & Live-Ticker ---------- */
.topbar { background: var(--night); color: #cdd5e6; font-size: .8rem; position: relative; }
.topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--red) 0, var(--red) 14px, #fff 32px, #fff 42px, var(--red) 60px); opacity: .95; }
.topbar .wrap { display: flex; align-items: center; gap: 18px; min-height: 36px; padding-top: 4px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.topbar .wrap::-webkit-scrollbar { display: none; }
.topbar a { color: #fff; }
.tick { display: inline-flex; align-items: center; gap: 6px; }
.tick .i { width: 15px; height: 15px; color: var(--gold); }
.tick b { color: #fff; font-weight: 600; }
.topbar .tb-right { margin-left: auto; display: flex; gap: 16px; }
.topbar .tb-right a { color: #cdd5e6; }
.topbar .tb-right a:hover { color: #fff; }
@media (max-width: 700px) { .topbar .tb-right { display: none; } }

/* ---------- Kopfzeile ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 18px; height: 70px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.045em; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, var(--red), var(--red-deep)); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--red) 70%, transparent); }
.logo-mark .i { width: 24px; height: 24px; stroke-width: 2; }
.logo-tld { color: var(--red); }
.site-search { position: relative; flex: 1; max-width: 560px; margin-left: auto; display: flex; }
.site-search input { width: 100%; height: 46px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 0 52px 0 46px; font: inherit; font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.site-search::before { content: ""; position: absolute; left: 17px; top: 14px; width: 18px; height: 18px; background: var(--muted); -webkit-mask: var(--ico-search) no-repeat center / contain; mask: var(--ico-search) no-repeat center / contain; pointer-events: none; }
.site-search input:focus { border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.site-search button { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: 0; background: var(--red); color: #fff; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease), background .2s; }
.site-search button:hover { background: var(--red-deep); transform: scale(1.06); }
.site-search button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.search-results { position: absolute; top: 54px; left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 70vh; overflow: auto; padding: 8px; z-index: 60; }
.search-results a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); }
.search-results a:hover, .search-results a:focus { background: var(--bg-2); text-decoration: none; }
.search-results a small { display: block; color: var(--muted); font-size: .82rem; }
.search-results .group { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 10px 12px 4px; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; flex: none; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav { border-top: 1px solid var(--line-2); }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav-item > a { display: flex; align-items: center; gap: 7px; padding: 12px 12px; color: var(--ink-2); font-weight: 600; font-size: .9rem; border-radius: 10px; position: relative; }
.nav-item > a .nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--red)); opacity: .85; }
.nav-item > a:hover { color: var(--ink); text-decoration: none; background: var(--bg-2); }
.nav-item.is-active > a { color: var(--ink); }
.nav-item.is-active > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c, var(--red)); }
.sub-toggle { display: none; }
.sub { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .18s var(--ease); z-index: 55; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-item:hover .sub, .nav-item:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-size: .93rem; font-weight: 500; }
.sub a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--red)); opacity: .5; }
.sub a:hover { background: var(--bg-2); text-decoration: none; }
.sub a:hover::before { opacity: 1; }

@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .site-search { max-width: none; }
  .main-nav { display: none; border-top: 0; }
  .main-nav.open { display: block; border-top: 1px solid var(--line); max-height: calc(100dvh - 110px); overflow: auto; background: var(--bg); }
  .nav-list { flex-direction: column; padding: 10px 0 24px; gap: 0; }
  .nav-item { display: grid; grid-template-columns: 1fr 50px; border-bottom: 1px solid var(--line-2); }
  .nav-item > a { padding: 15px 6px; font-size: 1.05rem; font-family: var(--display); font-weight: 700; }
  .nav-item > a .nav-dot { width: 10px; height: 10px; }
  .nav-item.is-active > a::after { display: none; }
  .sub-toggle { display: block; border: 0; background: none; cursor: pointer; position: relative; }
  .sub-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translate(-50%, -70%) rotate(45deg); transition: .2s; }
  .sub-toggle[aria-expanded="true"]::after { transform: translate(-50%, -30%) rotate(225deg); }
  .sub { position: static; grid-column: 1 / -1; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 12px 18px; min-width: 0; }
  .sub::before { display: none; }
  .sub.open { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .nav-item:hover .sub:not(.open) { display: none; }
}
@media (max-width: 600px) {
  .header-inner { height: 62px; gap: 10px; }
  .logo { font-size: 1.32rem; gap: 8px; }
  .logo-mark { width: 34px; height: 34px; border-radius: 10px; }
  .logo-mark .i { width: 20px; height: 20px; }
  .site-search input { height: 42px; padding-left: 40px; font-size: .9rem; }
  .site-search::before { left: 14px; top: 12px; }
  .site-search button { top: 3px; right: 3px; }
  .sub.open { grid-template-columns: 1fr; }
}
@media (max-width: 400px) { .logo-text { display: none; } }

/* ---------- Seitenkopf (Bereichsfarbe) ---------- */
.page-hero { position: relative; background: var(--acc-soft); color: var(--ink); overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(900px 300px at 90% -10%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
  radial-gradient(color-mix(in srgb, var(--acc) 22%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px; mask: linear-gradient(90deg, transparent 0%, #000 55%); -webkit-mask: linear-gradient(90deg, transparent 0%, #000 55%); }
.page-hero .wrap { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding-top: 2.2rem; padding-bottom: 3.4rem; }
.page-hero h1 { margin: .35rem 0 .6rem; max-width: 22ch; }
.page-hero .lead { margin: 0; }
.hero-icon { width: 132px; height: 132px; border-radius: 34px; background: var(--card); color: var(--acc); display: grid; place-items: center; box-shadow: var(--shadow-lg); transform: rotate(-6deg); }
.hero-icon .i { width: 70px; height: 70px; stroke-width: 1.4; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.2rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid color-mix(in srgb, var(--acc) 20%, var(--line)); color: var(--ink-2); font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.hero-meta .i { color: var(--acc); width: 15px; height: 15px; }
.page-hero .wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 28px; color: var(--bg); display: block; }
.breadcrumb { font-size: .84rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.breadcrumb a { color: var(--ink-2); font-weight: 500; }
.breadcrumb .sep { margin: 0 .45em; opacity: .5; }
.breadcrumb [aria-current] { color: var(--acc); font-weight: 600; }
@media (max-width: 760px) {
  .page-hero .wrap { grid-template-columns: 1fr; padding-top: 1.4rem; padding-bottom: 2.6rem; }
  .hero-icon { display: none; }
}
.page-head { display: none; }

/* ---------- Startseite: Hero ---------- */
.home-hero { position: relative; background: #2a1520; color: #fff; overflow: hidden; isolation: isolate; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(700px 420px at 12% 10%, rgba(200, 16, 46, .5), transparent 65%),
  radial-gradient(600px 400px at 95% 30%, rgba(214, 120, 70, .38), transparent 65%),
  radial-gradient(700px 360px at 55% 115%, rgba(227, 169, 43, .38), transparent 70%),
  linear-gradient(180deg, #22121c 0%, #3a1c26 100%); }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.75) 1px, transparent 1.3px), radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.2px); background-size: 140px 120px, 90px 70px; background-position: 10px 20px, 50px 40px; mask: linear-gradient(180deg, #000 0%, transparent 55%); -webkit-mask: linear-gradient(180deg, #000 0%, transparent 55%); opacity: .35; }
.home-hero { --sky-h: max(120px, min(15.84vw, 300px)); }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 40px; align-items: center; padding-top: clamp(2.4rem, 6vw, 5rem); padding-bottom: calc(var(--sky-h) * .72 + 30px); }
.home-hero h1 { color: #fff; font-size: clamp(2.6rem, 6.6vw, 5.4rem); line-height: .98; letter-spacing: -.045em; margin: 0 0 1.1rem; }
.home-hero h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg, #ff8a9b, var(--gold)); -webkit-background-clip: text; background-clip: text; }
.home-hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.home-hero .kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.home-hero p.sub { color: rgba(255,255,255,.8); font-size: clamp(1.05rem, 1.7vw, 1.22rem); max-width: 56ch; }
.hero-search { display: flex; max-width: 640px; margin: 1.6rem 0 1.1rem; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.7); position: relative; }
.hero-search::before { content: ""; position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #6c7489; -webkit-mask: var(--ico-search) no-repeat center / contain; mask: var(--ico-search) no-repeat center / contain; }
.hero-search input { flex: 1; border: 0; background: none; padding: 0 16px 0 52px; font: inherit; font-size: 1.05rem; min-width: 0; outline: none; color: #16213d; }
.hero-search button { border: 0; background: var(--red); color: #fff; padding: 0 26px; height: 50px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; transition: background .2s; }
.hero-search button:hover { background: var(--red-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 500; border: 1px solid rgba(255,255,255,.18); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.chips a .i { width: 15px; height: 15px; color: var(--gold); }
.chips a:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); text-decoration: none; transform: translateY(-1px); }
.hero-live { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.hero-live h2 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; font-family: var(--font); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hero-live h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.2); animation: pulse 2s infinite; }
.hl-time { font-family: var(--display); font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.hl-date { color: rgba(255,255,255,.7); font-size: .92rem; margin: 4px 0 16px; }
.hl-rows { display: grid; gap: 8px; }
.hl-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; }
.hl-row:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.hl-row .i { width: 22px; height: 22px; color: var(--gold); justify-self: center; }
.hl-row small { display: block; color: rgba(255,255,255,.6); font-size: .76rem; }
.hl-row b { font-family: var(--display); font-size: 1.15rem; white-space: nowrap; }
.home-hero .skyline { position: absolute; left: 0; right: 0; bottom: 26px; width: 100%; height: var(--sky-h); z-index: -1; display: block; }
.skyline .sk-far { fill: #4e2a36; }
.skyline .sk-near { fill: #1a0d14; }
.skyline .sk-arch { fill: none; stroke: #1a0d14; stroke-width: 7; }
.skyline .sk-ground { fill: #1a0d14; }
.home-hero .rhein { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, #1a0d14, #1a0d14 30%, #3a2234); }
.home-hero .rhein::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 10px; background: radial-gradient(ellipse 60px 2px at 50% 50%, rgba(255,255,255,.22), transparent 70%) 0 0 / 180px 10px, radial-gradient(ellipse 40px 1.5px at 50% 50%, rgba(255,255,255,.14), transparent 70%) 90px 5px / 220px 10px; }
.home-hero + .wave-bottom { display: block; width: 100%; height: 28px; margin-top: -1px; color: #3a2234; }
body.home .topbar { background: #1a0d14; }
@media (max-width: 900px) {
  .home-hero .wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--sky-h) + 20px); }
  .hero-live { max-width: 520px; }
}
@media (max-width: 520px) {
  .hero-search button { padding: 0 16px; height: 46px; }
  .hero-search input { padding-left: 44px; font-size: 1rem; }
  .hero-search::before { left: 18px; }
  .hl-time { font-size: 2.4rem; }
}

/* ---------- Abschnittsköpfe ---------- */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 3.2rem; margin-bottom: 1.1rem; }
.section-head h2 { margin: 0; }
.section-head .eyebrow, .eyebrow { display: block; font-family: var(--font); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin-bottom: .45rem; }
.section-head a.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: .92rem; white-space: nowrap; color: var(--ink); padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); transition: .2s var(--ease); }
.section-head a.more::after { content: "→"; transition: transform .2s var(--ease); }
.section-head a.more:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; }
.section-head a.more:hover::after { transform: translateX(3px); }

/* ---------- Bereichskacheln ---------- */
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 1.2rem 0 2.4rem; }
.section-tile { --c: var(--acc); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; box-shadow: var(--shadow-sm); overflow: hidden; isolation: isolate; min-width: 0; }
.section-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); z-index: -1; transition: transform .35s var(--ease); }
.section-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.section-tile:hover::after { transform: scale(1.5); }
.tile-icon { width: 48px; height: 48px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, var(--card)); color: var(--c); border-radius: 14px; margin-bottom: 6px; }
.tile-icon .i, .tile-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-title { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.015em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-title::after { content: "→"; color: var(--c); opacity: 0; transform: translateX(-6px); transition: .25s var(--ease); }
.section-tile:hover .tile-title::after { opacity: 1; transform: none; }
.tile-teaser { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.tile-count { font-size: .75rem; font-weight: 700; color: var(--c); letter-spacing: .02em; margin-top: auto; padding-top: 6px; }
.section-grid.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.section-grid.big .section-tile { padding: 24px; min-height: 170px; }

/* ---------- Raster & Kästen ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; margin: 1.2rem 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; margin: 1.2rem 0; }
.grid-2 > *, .grid-3 > * { min-width: 0; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); min-width: 0; overflow-wrap: anywhere; position: relative; }
.box > :last-child { margin-bottom: 0; }
.box h2, .box h3 { margin-top: 0; }
.box h3 { font-size: 1.12rem; display: flex; align-items: center; gap: 8px; }
.box ul { padding-left: 1.15em; }
.box-red { background: linear-gradient(160deg, var(--red-soft), color-mix(in srgb, var(--red-soft) 50%, var(--card))); border-color: color-mix(in srgb, var(--red) 18%, var(--line)); }
.box-blue { background: linear-gradient(160deg, var(--rhein-soft), color-mix(in srgb, var(--rhein-soft) 50%, var(--card))); border-color: color-mix(in srgb, var(--rhein) 18%, var(--line)); }
.box-red h3 { color: var(--red); }
.box-blue h3 { color: var(--rhein); }
.callout { position: relative; border: 1px solid color-mix(in srgb, var(--rhein) 25%, var(--line)); background: var(--rhein-soft); padding: 14px 18px 14px 50px; border-radius: var(--radius-sm); margin: 1.2rem 0; }
.callout::before { content: "i"; position: absolute; left: 15px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--rhein); color: #fff; font: 700 .8rem/22px var(--font); text-align: center; }
.callout.warn { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--gold-soft); color: var(--ink); }
.callout.warn::before { content: "!"; background: #c98a06; }
.callout.red { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: var(--red-soft); }
.callout.red::before { content: "!"; background: var(--red); }
.callout > :last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; background: var(--acc); color: #fff; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--acc); cursor: pointer; font: inherit; font-weight: 650; line-height: 1.2; transition: transform .2s var(--ease), box-shadow .2s, background .2s; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--acc) 80%, transparent); text-decoration: none !important; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--acc) 90%, transparent); filter: brightness(1.05); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); box-shadow: none; filter: none; }
.btn-sm { padding: 7px 13px; font-size: .84rem; }
.btn-sm .i { width: 15px; height: 15px; }
.btn-blue { background: var(--rhein); border-color: var(--rhein); }

/* ---------- Verzeichnisse ---------- */
.dir-tools { position: sticky; top: 118px; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1.4rem 0 1.4rem; padding: 12px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 1080px) { .dir-tools { top: 112px; } }
@media (max-width: 600px) { .dir-tools { top: 98px; padding: 10px; } }
.dir-search-wrap { flex: 1 1 240px; position: relative; }
.dir-search-wrap::before { content: ""; position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); background: var(--muted); -webkit-mask: var(--ico-search) no-repeat center / contain; mask: var(--ico-search) no-repeat center / contain; pointer-events: none; }
.dir-search, .dir-filter, .field input, .field select, .field textarea { width: 100%; height: 44px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 0 13px; font: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.dir-search { padding-left: 38px; }
.dir-filter { width: auto; min-width: 160px; flex: 0 1 auto; cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.dir-search:focus, .dir-filter:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 15%, transparent); }
.dir-count { font-size: .88rem; color: var(--muted); margin-left: auto; padding: 0 4px; }
.dir-count b { color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.dir-reset { padding: 9px 14px; font-size: .85rem; }
@media (max-width: 600px) { .dir-filter { flex: 1 1 140px; min-width: 0; } .dir-count { margin-left: 0; } .dir-reset { display: none; } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.cards-1 { grid-template-columns: 1fr; }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow-sm); scroll-margin-top: 200px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; min-width: 0; overflow-wrap: anywhere; }
.card::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); opacity: 0; transition: opacity .25s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }
.card:hover::before { opacity: 1; }
.card:target { border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent), var(--shadow); }
.card:target::before { opacity: 1; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head h3 { margin: 0; font-size: 1.13rem; line-height: 1.25; }
.badge { flex: none; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--acc-soft); color: var(--acc); padding: 5px 10px; border-radius: 999px; white-space: nowrap; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
.card-meta { font-size: .86rem; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.card-meta .i { width: 15px; height: 15px; color: var(--acc); }
.meta-veedel { font-weight: 650; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.card-text { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.card-note { margin: 0; font-size: .85rem; color: var(--ink-2); background: var(--gold-soft); border-radius: 10px; padding: 8px 11px; }
.facts { margin: 2px 0 0; display: grid; gap: 6px; font-size: .88rem; border-top: 1px dashed var(--line); padding-top: 10px; }
.facts div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.facts dt { color: var(--acc); padding-top: 1px; }
.facts dt .i { width: 17px; height: 17px; }
.facts dt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.facts dd { margin: 0; color: var(--ink-2); }
.facts dd small { display: block; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: .76rem; background: var(--bg-2); padding: 4px 10px; border-radius: 999px; color: var(--ink-2); font-weight: 500; margin: 0; }
.card-foot { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.dir-empty { padding: 3rem 1rem; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius); }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); margin: 1rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.data-table th { background: var(--bg-2); font-weight: 650; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; }
.data-table th[data-dir="asc"]::after { content: " ↑"; color: var(--acc); }
.data-table th[data-dir="desc"]::after { content: " ↓"; color: var(--acc); }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--acc) 5%, transparent); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td:first-child { font-weight: 650; color: var(--ink); }
main > .data-table, .box > .data-table, .prose > .data-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .data-table td { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 3px 0; border: 0; }
  .data-table td::before { content: attr(data-label); color: var(--muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
  .data-table td:not([data-label])::before { display: none; }
  .data-table td:not([data-label]) { grid-template-columns: 1fr; }
}

/* ---------- Teaser ---------- */
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr)); gap: 14px; }
.teaser { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; min-width: 0; box-shadow: var(--shadow-sm); }
.teaser:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 30%, var(--line)); }
.teaser strong { font-family: var(--display); font-size: 1.04rem; letter-spacing: -.01em; line-height: 1.25; }
.teaser-date { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); font-weight: 700; }
.teaser-meta { font-size: .82rem; color: var(--muted); }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; }
.field textarea { height: auto; min-height: 150px; padding: 11px 13px; resize: vertical; line-height: 1.5; }
.field small { color: var(--muted); font-size: .8rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.hp { position: absolute; left: -9999px; }

/* ---------- Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 1.4rem 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; text-align: left; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); }
.stat b { display: block; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--acc); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 4px; }
.stat span { font-size: .84rem; color: var(--muted); line-height: 1.35; display: block; }

/* ---------- Notruf ---------- */
.emergency { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.emergency a { display: flex; flex-direction: column; padding: 13px 15px; border-radius: 14px; background: var(--card); border: 1px solid color-mix(in srgb, var(--red) 18%, var(--line)); color: var(--ink); transition: transform .2s var(--ease), border-color .2s; }
.emergency a:hover { border-color: var(--red); text-decoration: none; transform: translateY(-2px); }
.emergency b { font-family: var(--display); font-size: 1.45rem; color: var(--red); letter-spacing: -.02em; }
.emergency span { font-size: .8rem; color: var(--muted); }

/* ---------- Wetter ---------- */
.weather { display: flex; align-items: center; gap: 14px; }
.weather-temp { flex: none; font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.weather-desc { color: var(--muted); font-size: .88rem; }

/* ---------- Inhalt ---------- */
.prose { max-width: 74ch; }
.prose li { margin: .35em 0; }
.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.kv dt { font-weight: 650; color: var(--ink); }
.kv dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; } }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; margin: .7rem 0 1.2rem; }
.pill-list li { margin: 0; }
.pill-list a, .pill-list > li:not(:has(a)) { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; font-size: .88rem; color: var(--ink); font-weight: 500; text-decoration: none !important; transition: .2s var(--ease); }
.pill-list a:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-1px); }
.linie { display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 8px; border-radius: 7px; font-weight: 800; color: #fff; background: var(--rhein); font-size: .82rem; font-family: var(--display); letter-spacing: -.01em; }
details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; margin: 10px 0; background: var(--card); transition: border-color .2s, box-shadow .2s; }
details[open] { border-color: color-mix(in srgb, var(--acc) 30%, var(--line)); box-shadow: var(--shadow-sm); }
summary { cursor: pointer; font-weight: 650; padding: 14px 48px 14px 18px; list-style: none; position: relative; line-height: 1.4; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
details[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
summary:hover { color: var(--acc); }
details > :not(summary) { margin-left: 18px; margin-right: 18px; }
details > :last-child { margin-bottom: 16px; }
.timeline { list-style: none; padding: 0 !important; margin: 1.2rem 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 20%, transparent)); border-radius: 2px; }
.timeline li { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 10px 0 10px 32px; margin: 0; }
.timeline li::before { content: ""; position: absolute; left: 1px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 3px solid var(--acc); }
.timeline time { font-family: var(--display); font-weight: 750; color: var(--acc); letter-spacing: -.01em; }
@media (max-width: 520px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Werkzeuge & Live ---------- */
.tool-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.tool-form .field { margin: 0; }
.tool { border: 0; background: linear-gradient(160deg, var(--acc-soft), var(--card) 60%); box-shadow: var(--shadow); }
.bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.bin { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
.bin strong { display: block; font-family: var(--display); }
.bin span:not(.bin-dot) { font-size: .86rem; color: var(--muted); }
.bin-dot { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bin, #6b7280); margin-right: 6px; vertical-align: -3px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bin, #6b7280) 20%, transparent); }
.m-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; margin-top: 10px; }
.m-month h4 { margin: 0 0 6px; }
.m-month ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.m-month li { padding: 3px 0; }
.pegel-val { font-family: var(--display); font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; margin-right: 10px; }
.pegel-meta { font-size: .86rem; color: var(--muted); margin: 2px 0 6px; }
.pegel-hint { font-size: .84rem; margin: 6px 0 0; color: var(--ink-2); }
.spark { width: 100%; height: 48px; display: block; }
.spark polyline { fill: none; stroke: var(--rhein); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: 8px; letter-spacing: .02em; }
.pill-ok { background: var(--green-soft); color: var(--green); }
.pill-warn { background: var(--gold-soft); color: #9a6400; }
.pill-bad { background: var(--red-soft); color: var(--red); }
.live-stamp { font-size: .77rem; color: var(--muted); margin: 12px 0 0; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.live-stamp::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; margin-right: 6px; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
.stoer-list li { padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: .92rem; margin: 0; }
.stoer-list li:last-child { border-bottom: 0; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-bottom: 1rem; }
.live-grid > .box { min-width: 0; }
.live-grid > .box h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: var(--font); font-weight: 700; }
.live-grid > .box h3 .i { color: var(--acc); width: 17px; height: 17px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.news-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; min-width: 0; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.news-card.is-top { grid-column: span 2; background: linear-gradient(150deg, var(--red-soft), var(--card) 70%); border-color: color-mix(in srgb, var(--red) 25%, var(--line)); }
.news-card.is-top h3 { font-size: 1.35rem; }
@media (max-width: 640px) { .news-card.is-top { grid-column: auto; } }
.news-card h3 { margin: 6px 0 6px; font-size: 1.07rem; line-height: 1.28; }
.news-card p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.news-cat { display: inline-block; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); }
.news-src { font-size: .76rem !important; color: var(--muted) !important; margin-top: 10px !important; }
.event-list { display: grid; gap: 10px; }
.event { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.event h3 { margin: 3px 0 4px; font-size: 1.05rem; }
.event-date { text-align: center; background: var(--acc); color: #fff; border-radius: 14px; padding: 9px 4px; align-self: start; box-shadow: 0 8px 18px -10px var(--acc); }
.event-date b { display: block; font-family: var(--display); font-size: 1.65rem; line-height: 1; }
.event-date span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }

/* ---------- Anzeigen ---------- */
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr)); gap: 14px; }
.ad { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; }
.ad:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ad-price { font-family: var(--display); font-weight: 800; color: var(--acc); font-size: 1.2rem; letter-spacing: -.02em; }
.ad-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ad h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.ad h3 a { color: var(--ink); }
.ad p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.ad-meta { font-size: .8rem; color: var(--muted); margin-top: auto; padding-top: 6px; }
.ad-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
.ad-cats button { border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); padding: 7px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 500; transition: .2s var(--ease); }
.ad-cats button.active, .ad-cats button:hover { background: var(--acc); color: #fff; border-color: var(--acc); }

/* ---------- Veedel-Karte ---------- */
.veedel-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin: 2rem 0; }
@media (max-width: 860px) { .veedel-section { grid-template-columns: 1fr; gap: 10px; } }
.veedel-map { margin: 0; }
.veedel-map svg { width: 100%; height: auto; display: block; }
.vk-rhein { fill: none; stroke-width: 38; stroke-linecap: round; opacity: .9; }
.vk-rhein-label { fill: #fff; font: italic 700 15px var(--display); letter-spacing: .3em; opacity: .85; }
.vk-b path { fill: var(--card); stroke: var(--line); stroke-width: 1.5; transition: fill .25s, stroke .25s, transform .25s var(--ease); }
.vk-b text { fill: var(--ink); font: 700 16px var(--display); text-anchor: middle; pointer-events: none; letter-spacing: -.01em; }
.vk-b text.vk-n { fill: var(--muted); font: 600 12px var(--font); letter-spacing: 0; }
.vk-b:hover path, .vk-b:focus path { fill: var(--red); stroke: var(--red); }
.vk-b:hover text, .vk-b:focus text { fill: #fff; }
.vk-b.vk-zentrum path { fill: var(--red-soft); stroke: color-mix(in srgb, var(--red) 40%, var(--line)); }
.vk-dom path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; }
.vk-b:hover ~ .vk-dom path { stroke: #fff; }
.vk-side { fill: var(--muted); font: 600 12px var(--font); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 600px) { .vk-b text { font-size: 23px; } .vk-b text.vk-n { font-size: 16px; } .vk-side { font-size: 15px; } .vk-dom { display: none; } }
.veedel-map figcaption { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 6px; }

/* ---------- Bento (Startseite) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin: 1.2rem 0; }
.bento > * { min-width: 0; }
.b-4 { grid-column: span 4; } .b-5 { grid-column: span 5; } .b-6 { grid-column: span 6; } .b-7 { grid-column: span 7; } .b-8 { grid-column: span 8; } .b-12 { grid-column: span 12; }
@media (max-width: 980px) { .b-4, .b-5, .b-6, .b-7, .b-8 { grid-column: span 6; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .b-4, .b-5, .b-6, .b-7, .b-8, .b-12 { grid-column: auto; } }
.cta-band { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 26px 28px; border-radius: 24px; background: linear-gradient(120deg, var(--night), var(--night-2)); color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); margin: 2rem 0; }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(200,16,46,.55), transparent 70%); }
.cta-band strong { font-family: var(--display); font-size: 1.4rem; display: block; letter-spacing: -.02em; }
.cta-band span { color: rgba(255,255,255,.75); }
.cta-band .btn { background: #fff; color: var(--night); border-color: #fff; position: relative; z-index: 1; box-shadow: none; }
.cta-band .cta-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--gold); flex: none; }
.cta-band .cta-icon .i { width: 30px; height: 30px; }
.cta-band > div { display: flex; gap: 16px; align-items: center; position: relative; z-index: 1; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--night); color: #c3cbdc; margin-top: 5rem; padding: 0 0 1.8rem; font-size: .9rem; position: relative; }
.footer-sky { display: block; line-height: 0; background: linear-gradient(180deg, var(--bg) 0, var(--bg) calc(100% - 7px), var(--night) calc(100% - 7px)); }
.footer-sky .skyline { width: 100%; max-width: 1100px; height: auto; aspect-ratio: 1200 / 190; display: block; margin: 0 auto; }
.footer-sky .skyline .sk-far { fill: #2a3963; opacity: .55; }
.footer-sky .skyline .sk-near, .footer-sky .skyline .sk-ground { fill: var(--night); }
.footer-sky .skyline .sk-arch { stroke: var(--night); }
.footer-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; padding: 1.6rem 0 2.2rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 2rem; align-items: center; }
.footer-intro .logo { color: #fff; }
.footer-intro p { margin: .6rem 0 0; color: #9aa5bd; max-width: 52ch; }
.footer-intro .f-search { justify-self: end; width: 100%; max-width: 380px; }
@media (max-width: 760px) { .footer-intro { grid-template-columns: 1fr; } .footer-intro .f-search { justify-self: stretch; } }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 22px; margin-bottom: 2.4rem; }
.footer-col h4 { font-family: var(--font); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .7rem; font-weight: 700; }
.footer-col h4 a { color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.footer-col h4 a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--red)); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 5px 0; }
.footer-col a { color: #9aa5bd; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.4rem; color: #9aa5bd; display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; font-size: .84rem; }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #c3cbdc; }
.footer-bottom a:hover { color: #fff; }
.footer-stripes { height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0, var(--red) 14px, #fff 32px, #fff 42px, var(--red) 60px); }
.to-top { position: fixed; right: 18px; bottom: 18px; width: 48px; height: 48px; border-radius: 16px; border: 0; background: var(--ink); color: var(--bg); font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 40; transition: transform .2s var(--ease); }
.to-top:hover { transform: translateY(-2px); }

/* ---------- Druck ---------- */
@media print {
  .topbar, .site-header, .site-footer, .dir-tools, .to-top, .hero-icon, .wave, .skyline { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .box { break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   Gestaltung 2: Abschnitte, Piktogramme, Info-Karten, Illustrationen
   ========================================================================== */
:root { --band: color-mix(in srgb, var(--acc) 5%, var(--bg)); }
main h2 a, main h3 a, .ad h3 a, .news-card h3 a { text-decoration: none !important; color: inherit; }
main h2 a:hover, main h3 a:hover { color: var(--acc); }

/* Abschnitte mit Farbband im Wechsel */
.sec { position: relative; padding: 6px 0 22px; container-type: inline-size; }
.sec + .sec { margin-top: 22px; }
.sec.band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); padding: 40px 0 46px; margin-top: 44px; margin-bottom: 44px; }
.sec.band + .sec { margin-top: 0; }
.sec > h2:first-child, .sec > .sec-h:first-child { margin-top: .6rem; }
.sec-h { display: flex; align-items: center; gap: 14px; }
.h-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--acc); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 10px 20px -12px var(--acc); transform: rotate(-4deg); transition: transform .3s var(--ease); }
.sec-h:hover .h-ico { transform: rotate(0) scale(1.05); }
.h-ico .i { width: 24px; height: 24px; stroke-width: 1.9; }
.sec-intro { max-width: 78ch; }
.sec-intro > p:first-child, .sec-intro > .lead:first-child { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); line-height: 1.6; }
.sec-dir { padding-top: 4px; }
.sec-dir > .sec-h { margin-top: 1.2rem; }
@supports (animation-timeline: view()) {
  .sec:not(.sec-dir) > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 22%; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .sec > * { animation: none !important; } }

/* Inhaltsverzeichnis unter dem Seitenkopf */
.toc { border-bottom: 1px solid var(--line-2); background: var(--bg); }
.toc .wrap { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.toc .wrap::-webkit-scrollbar { display: none; }
.toc-label { font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.toc-list { display: flex; gap: 8px; }
.toc a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: .85rem; font-weight: 600; white-space: nowrap; text-decoration: none !important; transition: .2s var(--ease); }
.toc a .i { color: var(--acc); width: 16px; height: 16px; }
.toc a:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-1px); }

/* Illustration im Seitenkopf */
.hero-art { position: relative; width: clamp(210px, 22vw, 300px); align-self: center; margin: -6px 0 -30px; }
.hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--acc) 25%, transparent)); }
.hero-art .a1, .art .a1 { fill: var(--acc); }
.hero-art .a2, .art .a2 { fill: color-mix(in srgb, var(--acc) 55%, #fff); }
.hero-art .a3, .art .a3 { fill: color-mix(in srgb, var(--acc) 20%, #fff); }
.hero-art .ak, .art .ak { fill: var(--night); }
.hero-art .aw, .art .aw { fill: #fff; }
.hero-art .gold, .art .gold { fill: var(--gold); }
.hero-art .rhein, .art .rhein { fill: var(--rhein); }
.hero-art .green, .art .green { fill: var(--green); }
.hero-art .sk, .art .sk { stroke: var(--night); fill: none; }
.hero-art .s1, .art .s1 { stroke: var(--acc); }
.hero-art .s2, .art .s2 { stroke: var(--gold); }
.hero-art .rh, .art .rh { stroke: var(--rhein-2); }
.art-text { font: 800 40px var(--display); fill: var(--night); }
.art-text.sm { font-size: 28px; }
.art-text.w { fill: #fff; }
.hero-badge { position: absolute; right: 2px; bottom: 18px; width: 58px; height: 58px; border-radius: 18px; background: var(--card); color: var(--acc); display: grid; place-items: center; box-shadow: var(--shadow-lg); transform: rotate(6deg); }
.hero-badge .i { width: 30px; height: 30px; }
@media (max-width: 760px) { .hero-art { display: none; } }
.hero-icon { display: none; }

/* Info-Karten statt grauer Kästen */
.grid-2 > .box, .grid-3 > .box { border: 0; border-radius: 22px; padding: 26px 26px 22px; box-shadow: 0 1px 2px rgba(22, 33, 61, .04), 0 16px 36px -24px rgba(22, 33, 61, .4); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.grid-2 > .box:hover, .grid-3 > .box:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(22, 33, 61, .05), 0 24px 44px -24px rgba(22, 33, 61, .45); }
.grid-2 > .box:nth-child(2n):not(.box-red):not(.box-blue), .grid-3 > .box:nth-child(3n+2):not(.box-red):not(.box-blue) { background: linear-gradient(165deg, color-mix(in srgb, var(--acc) 8%, var(--card)), var(--card) 65%); }
.box h3.has-ico { display: flex; align-items: center; gap: 12px; }
.grid-2 > .box > h3.has-ico, .grid-3 > .box > h3.has-ico { flex-direction: column; align-items: flex-start; gap: 14px; font-size: 1.17rem; }
.h3-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 13%, var(--card)); color: var(--acc); flex: none; }
.h3-ico .i { width: 23px; height: 23px; }
.box-red .h3-ico { background: color-mix(in srgb, var(--red) 16%, var(--card)); color: var(--red); }
.box-blue .h3-ico { background: color-mix(in srgb, var(--rhein) 16%, var(--card)); color: var(--rhein); }
.sec.band .box { background-color: var(--card); }
.box { container-type: inline-size; }

/* Listen mit Piktogramm statt Punkt */
.box ul:not([class]), .sec > ul:not([class]), .sec-intro ul:not([class]), .prose ul:not([class]) { list-style: none; padding-left: 0 !important; }
.box ul:not([class]) > li, .sec > ul:not([class]) > li, .sec-intro ul:not([class]) > li, .prose ul:not([class]) > li { position: relative; padding-left: 30px; margin: .55em 0; }
.box ul:not([class]) > li::before, .sec > ul:not([class]) > li::before, .sec-intro ul:not([class]) > li::before, .prose ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 7px; background: color-mix(in srgb, var(--acc) 14%, var(--card)); }
.box ul:not([class]) > li::after, .sec > ul:not([class]) > li::after, .sec-intro ul:not([class]) > li::after, .prose ul:not([class]) > li::after { content: ""; position: absolute; left: 4px; top: calc(.2em + 4px); width: 12px; height: 12px; background: var(--acc); -webkit-mask: var(--ico-check) no-repeat center / contain; mask: var(--ico-check) no-repeat center / contain; }
.box-red ul:not([class]) > li::after { background: var(--red); }
.box-blue ul:not([class]) > li::after { background: var(--rhein); }
:root { --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* Nummerierte Schritte */
.box ol:not([class]), .sec > ol:not([class]), .prose ol:not([class]) { counter-reset: schritt; list-style: none; padding-left: 0 !important; }
.box ol:not([class]) > li, .sec > ol:not([class]) > li, .prose ol:not([class]) > li { counter-increment: schritt; position: relative; padding-left: 42px; margin: .8em 0; min-height: 30px; }
.box ol:not([class]) > li::before, .sec > ol:not([class]) > li::before, .prose ol:not([class]) > li::before { content: counter(schritt); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #fff; font: 800 .88rem/30px var(--display); text-align: center; box-shadow: 0 6px 14px -8px var(--acc); }

/* Faktenzeilen statt gequetschter Spalten */
.kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; margin: 6px 0 10px; }
.kv dt, .kv dd { padding: 11px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.kv dt { padding-right: 16px; font-weight: 600; color: var(--ink-2); font-size: .93rem; }
.kv dd { color: var(--ink); overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
@container (max-width: 470px) {
  .kv { grid-template-columns: 1fr; }
  .kv dt { border-bottom: 0; padding-bottom: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .kv dd { padding-top: 3px; }
}
.eur { font-weight: 750; color: var(--acc); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* FAQ: gebündelt, zweispaltig */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 10px 16px; align-items: start; margin: 1rem 0; }
.faq details { margin: 0; border-radius: 16px; }
.faq summary { padding-left: 54px; }
.faq summary::before { content: "?"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--acc) 14%, var(--card)); color: var(--acc); font: 800 .95rem/28px var(--display); text-align: center; }
.faq details[open] summary::before { background: var(--acc); color: #fff; }

/* Kennzahlen lebendiger */
.stat { padding: 20px 18px 18px 20px; }
.stat b { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }

/* Kopfzeile Verzeichnis */
.sec-dir .dir-tools { margin-top: .8rem; }

/* ---------- News: Magazin mit Piktogrammen ---------- */
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.news-filter button { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); padding: 7px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; transition: .2s var(--ease); }
.news-filter button .i { width: 16px; height: 16px; color: var(--c, var(--acc)); }
.news-filter button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.news-filter button.active .i { color: inherit; }
.news-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.news-card { --c: var(--acc); display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 0; box-shadow: 0 1px 2px rgba(22, 33, 61, .04), 0 14px 32px -24px rgba(22, 33, 61, .45); border-radius: 20px; }
.news-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.nc-top { display: flex; align-items: center; gap: 10px; }
.nc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--c); flex: none; }
.nc-ico .i { width: 22px; height: 22px; }
.nc-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nc-meta .news-cat { color: var(--c); }
.nc-meta time { font-size: .78rem; color: var(--muted); }
.news-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.news-card p { margin: 0; }
.nc-src { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.nc-src a, .nc-src span { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--bg-2); padding: 4px 10px; border-radius: 999px; text-decoration: none !important; }
.nc-src a:hover { color: var(--c); }
.nc-src .i { width: 12px; height: 12px; }
.news-card.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px 28px; padding: 28px 30px; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 10%, var(--card)), var(--card) 60%); }
.news-card.is-lead h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.news-card.is-lead .nc-art { grid-row: 1 / span 4; grid-column: 2; align-self: center; width: 200px; height: 160px; border-radius: 22px; background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--c); display: grid; place-items: center; }
.news-card.is-lead .nc-art .i { width: 86px; height: 86px; stroke-width: 1.2; }
@media (max-width: 700px) { .news-card.is-lead { grid-template-columns: 1fr; padding: 22px; } .news-card.is-lead .nc-art { display: none; } }
.news-card .nc-art { display: none; }
.news-card.is-lead .nc-art { display: grid; }

/* ---------- Kleinanzeigen mit Piktogrammen ---------- */
.ad { --c: var(--acc); padding: 0; overflow: hidden; border: 0; box-shadow: 0 1px 2px rgba(22, 33, 61, .04), 0 14px 32px -24px rgba(22, 33, 61, .45); border-radius: 20px; gap: 0; position: relative; }
.ad-visual { height: 112px; display: grid; place-items: center; background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), color-mix(in srgb, var(--c) 10%, var(--card)); color: var(--c); position: relative; }
.ad-visual .i { width: 52px; height: 52px; stroke-width: 1.3; transition: transform .35s var(--ease); }
.ad:hover .ad-visual .i { transform: scale(1.08) rotate(-4deg); }
.ad-visual img { width: 100%; height: 100%; object-fit: cover; }
.ad-visual .ad-cat { position: absolute; left: 12px; top: 12px; background: var(--card); color: var(--c); padding: 4px 10px; border-radius: 999px; font-size: .66rem; box-shadow: var(--shadow-sm); }
.ad-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ad h3 a::after { content: ""; position: absolute; inset: 0; }
.ad-price { display: inline-flex; align-self: flex-start; font-size: 1.05rem; background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--c); padding: 3px 11px; border-radius: 10px; }
.ad-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-meta .i { width: 14px; height: 14px; color: var(--c); }
.ad-gesuch { position: absolute; right: 12px; top: 12px; background: var(--ink); color: var(--bg); font-size: .66rem; font-weight: 750; padding: 4px 9px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }

/* Kennzahl-Kacheln mit Piktogramm */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; margin: 1.2rem 0; }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(22, 33, 61, .04), 0 12px 28px -22px rgba(22, 33, 61, .45); overflow: hidden; }
.tile > .i:first-child { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 13%, var(--card)); color: var(--acc); margin-bottom: 6px; box-sizing: border-box; }
.tile b { font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.tile span { font-size: .86rem; color: var(--muted); line-height: 1.35; }
.tile small { font-size: .76rem; color: var(--muted); }
.tile.hi { background: linear-gradient(150deg, var(--acc), color-mix(in srgb, var(--acc) 70%, #000)); }
a.tile { color: inherit; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
a.tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 50%, transparent); outline-offset: 2px; }
.saison-band { max-width: var(--wrap); margin: 1.6rem auto 0; padding: 0 clamp(16px, 4vw, 32px); }
.saison-band .tiles { margin: 0; }
.tile.hi b, .tile.hi span, .tile.hi small { color: #fff; }
.tile.hi > .i:first-child { background: rgba(255, 255, 255, .18); color: #fff; }
blockquote.pull { margin: 1.6rem 0; padding: 22px 26px 22px 64px; border-radius: 22px; background: color-mix(in srgb, var(--acc) 8%, var(--card)); font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.35; letter-spacing: -.01em; position: relative; color: var(--ink); }
blockquote.pull::before { content: "„"; position: absolute; left: 20px; top: 2px; font-size: 4rem; line-height: 1; color: var(--acc); font-family: var(--display); }
blockquote.pull cite { display: block; margin-top: 8px; font: 500 .85rem var(--font); color: var(--muted); font-style: normal; }

/* ==========================================================================
   Veedel, Karten, Heute, Werkzeuge
   ========================================================================== */
body[data-section="heute"] { --acc-l: #946500; --acc-soft: #fbf1dc; }
body[data-section="veedel"] { --acc-l: #0f7c6b; --acc-soft: #dff2ee; }

/* Hero mit echtem Foto */
.hero-art.has-foto { width: clamp(240px, 30vw, 420px); margin: 0 0 -40px; }
.hero-foto { margin: 0; position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(1.5deg); background: var(--card); }
.hero-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 7px; font-size: .66rem; color: rgba(255,255,255,.88); background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.hero-foto figcaption a { color: #fff; }
.hero-art.has-foto .hero-badge { bottom: -10px; right: -8px; }
@media (max-width: 760px) { .hero-art.has-foto { display: block; width: 100%; margin: 6px 0 -20px; } .hero-foto { transform: none; } }

/* Karten */
.karte { position: relative; height: clamp(360px, 56vh, 560px); border-radius: 22px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); margin: 1rem 0 1.2rem; isolation: isolate; }
.karte-gross { height: clamp(420px, 66vh, 680px); }
.karte-voll { height: calc(100dvh - 260px); min-height: 460px; }
.karte-ph { height: 100%; display: flex; align-items: center; gap: 22px; padding: 26px clamp(18px, 4vw, 48px); background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 55%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--acc) 5%, var(--bg-2)) 0 18px, var(--bg-2) 18px 36px); }
.karte-ph-art { flex: none; width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; background: var(--card); color: var(--acc); box-shadow: var(--shadow); }
.karte-ph-art .i { width: 48px; height: 48px; stroke-width: 1.4; }
.karte-ph strong { font-family: var(--display); font-size: 1.25rem; }
.karte-ph p { color: var(--ink-2); font-size: .9rem; max-width: 52ch; margin: 6px 0 14px; }
.karte-merken { font-size: .84rem; color: var(--muted); margin-left: 8px; }
@media (max-width: 560px) { .karte-ph { flex-direction: column; align-items: flex-start; } .karte-ph-art { width: 64px; height: 64px; } }
.karte-load { height: 100%; display: grid; place-items: center; color: var(--muted); }
.karte-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: .8rem 0 -.2rem; }
.karte-chips button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; transition: .2s var(--ease); }
.karte-chips button .i { width: 15px; height: 15px; color: var(--c); }
.karte-chips button small { font-weight: 700; color: var(--muted); }
.karte-chips button.on { border-color: var(--c); color: var(--ink); background: color-mix(in srgb, var(--c) 10%, var(--card)); }
.karte-chips button:not(.on) { opacity: .6; }
.maplibregl-popup-content { border-radius: 14px !important; padding: 12px 14px !important; box-shadow: var(--shadow-lg) !important; font-family: var(--font); background: var(--card) !important; color: var(--ink); }
.maplibregl-popup-tip { border-top-color: var(--card) !important; border-bottom-color: var(--card) !important; }
.kp { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; line-height: 1.35; }
.kp strong { font-family: var(--display); font-size: 1.02rem; }
.kp .i { width: 13px; height: 13px; color: var(--acc); margin-right: 4px; vertical-align: -1px; }
.kp-kat { font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.kp-links a { font-weight: 650; }

/* Veedel-Seite */
.veedel-intro { max-width: 78ch; margin: 1.4rem 0 .4rem; }
.poi-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: .8rem 0 1rem; }
.poi-count { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.poi-count .i { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 12%, var(--card)); color: var(--acc); box-sizing: border-box; }
.poi-count b { font-family: var(--display); font-size: 1.25rem; line-height: 1; }
.poi-count span { font-size: .78rem; color: var(--muted); }
details.poi-cat { margin: 10px 0; border-radius: 16px; }
details.poi-cat > summary { display: flex; align-items: center; gap: 10px; }
details.poi-cat > summary .i { width: 22px; height: 22px; color: var(--acc); }
details.poi-cat > summary b { margin-left: auto; margin-right: 26px; font-family: var(--display); font-size: .9rem; background: color-mix(in srgb, var(--acc) 12%, var(--card)); color: var(--acc); padding: 1px 10px; border-radius: 999px; }
.poi-list { list-style: none; margin: 0 18px 16px !important; padding: 0 !important; columns: 2 300px; column-gap: 26px; }
.poi-list li { break-inside: avoid; padding: 8px 0 9px; border-bottom: 1px dashed var(--line); margin: 0 !important; display: flex; flex-direction: column; gap: 1px; }
.poi-list li::before, .poi-list li::after { display: none !important; }
.poi-list strong { font-weight: 650; }
.poi-list strong a { color: var(--ink); text-decoration: none !important; }
.poi-list strong a:hover { color: var(--acc); }
.poi-list em { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--acc); }
.poi-list span { font-size: .82rem; color: var(--muted); }
.poi-list li.offen strong::after { content: "geöffnet"; margin-left: 8px; font-size: .66rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--green); background: var(--green-soft); padding: 2px 7px; border-radius: 999px; vertical-align: 2px; }
.halt-list li { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.linien { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.linien .linie { min-width: 26px; height: 22px; font-size: .74rem; padding: 0 6px; background: var(--muted); }
.linien .linie.bahn { background: var(--red); }
.plz-chip { display: inline-block; font-family: var(--display); font-weight: 700; background: var(--bg-2); padding: 3px 10px; border-radius: 8px; margin: 2px 2px 2px 0; }
.quellen { font-size: .8rem; margin-top: 2rem; }

/* Veedel-Übersicht */
.veedel-tools { position: static; }
.veedel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.veedel-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px; background: var(--card); border-radius: 18px; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s; text-decoration: none !important; }
.veedel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.vc-bild { width: 76px; height: 76px; border-radius: 13px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 12%, var(--card)); color: var(--acc); }
.vc-bild img { width: 100%; height: 100%; object-fit: cover; }
.vc-bild .i { width: 34px; height: 34px; }
.vc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-bez { font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.vc-body strong { font-family: var(--display); font-size: 1.08rem; line-height: 1.2; }
.vc-stats { display: flex; gap: 10px; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.vc-stats span { display: inline-flex; align-items: center; gap: 3px; }
.vc-stats .i { width: 13px; height: 13px; }

/* Heute */
.heute { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.heute > * { min-width: 0; }
.h-card { grid-column: span 4; background: var(--card); border-radius: 22px; padding: 22px; box-shadow: 0 1px 2px rgba(22,33,61,.04), 0 16px 34px -24px rgba(22,33,61,.45); position: relative; overflow: hidden; }
.h-card.w6 { grid-column: span 6; } .h-card.w8 { grid-column: span 8; } .h-card.w12 { grid-column: span 12; }
@media (max-width: 980px) { .h-card, .h-card.w6, .h-card.w8 { grid-column: span 6; } }
@media (max-width: 640px) { .heute { grid-template-columns: 1fr; } .h-card, .h-card.w6, .h-card.w8, .h-card.w12 { grid-column: auto; } }
.h-card h2 { font-size: .74rem; font-family: var(--font); font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.h-card h2 .i { color: var(--acc); width: 18px; height: 18px; }
.h-card .big { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.h-hero { grid-column: span 12; background: linear-gradient(120deg, var(--night), var(--night-2)); color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: flex-end; }
.h-hero h2 { color: rgba(255,255,255,.65); }
.h-hero .big { color: #fff; }
.h-hero p { color: rgba(255,255,255,.8); margin: 6px 0 0; }
.h-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.h-badges span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 12px; border-radius: 999px; font-size: .86rem; }
.h-badges .i { width: 15px; height: 15px; color: var(--gold); }
.hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 4px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; }
.hours div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); }
.hours b { font-size: .9rem; color: var(--ink); }
.hours .bar { width: 8px; border-radius: 4px; background: color-mix(in srgb, var(--rhein) 70%, transparent); min-height: 2px; }
.hours .i { width: 18px; height: 18px; color: var(--acc); }
.h-list { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 8px; }
.h-list li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--bg-2); margin: 0 !important; }
.h-list li::before, .h-list li::after { display: none !important; }
.h-list li .i { width: 22px; height: 22px; color: var(--acc); justify-self: center; }
.h-list small { display: block; color: var(--muted); font-size: .78rem; }
.h-list a { color: var(--ink); font-weight: 600; text-decoration: none !important; }
.warn-item { border-left: 4px solid #d97706; }
.warn-item.rot { border-left-color: var(--red); }
.h-empty { color: var(--muted); font-size: .9rem; }
.wort { font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--acc); letter-spacing: -.02em; }

/* Werkzeuge */
.tool-card { background: var(--card); border-radius: 22px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 1px 2px rgba(22,33,61,.04), 0 16px 34px -24px rgba(22,33,61,.45); margin: 1rem 0 1.4rem; }
.countdown { display: flex; flex-wrap: wrap; gap: 12px; }
.cd-item { flex: 1 1 200px; padding: 18px; border-radius: 20px; background: linear-gradient(150deg, var(--acc), color-mix(in srgb, var(--acc) 65%, #000)); color: #fff; }
.cd-item:nth-child(2) { background: linear-gradient(150deg, var(--red), var(--red-deep)); }
.cd-item:nth-child(3) { background: linear-gradient(150deg, var(--rhein), #1d4766); }
.cd-item b { display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; }
.cd-item span { font-size: .86rem; opacity: .9; }
.cd-item small { display: block; margin-top: 6px; opacity: .8; font-size: .78rem; }
.ftab { width: 100%; border-collapse: collapse; }
.ftab td, .ftab th { padding: 10px 12px; border-bottom: 1px dashed var(--line); text-align: left; }
.ftab th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ftab tr.vorbei td { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.ftab tr.naechst td { background: color-mix(in srgb, var(--acc) 8%, transparent); font-weight: 650; }
.ftab .tag { display: inline-block; min-width: 26px; font-size: .74rem; font-weight: 700; color: var(--acc); }
.bruecke { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.progress { height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 10px 0 4px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 60%, var(--gold))); border-radius: 999px; transition: width .4s var(--ease); }
.check-group { margin: 1.6rem 0 .6rem; }
.check-item { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); margin: 8px 0; cursor: pointer; transition: .2s var(--ease); }
.check-item:hover { box-shadow: var(--shadow); }
.check-item input { width: 24px; height: 24px; accent-color: var(--acc); margin-top: 2px; cursor: pointer; }
.check-item.done { opacity: .62; }
.check-item.done strong { text-decoration: line-through; }
.check-item strong { font-family: var(--display); font-size: 1.04rem; }
.check-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); margin-top: 4px; }
.check-meta span { display: inline-flex; align-items: center; gap: 4px; }
.check-meta .i { width: 14px; height: 14px; color: var(--acc); }
.koelsch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.kw { background: var(--card); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.kw b { font-family: var(--display); font-size: 1.3rem; color: var(--acc); letter-spacing: -.01em; }
.kw .kw-kat { font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kw p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.kw q { font-size: .88rem; color: var(--muted); font-style: italic; quotes: "„" "“"; }
.wdt { display: grid; grid-template-columns: auto 1fr; gap: 18px 26px; align-items: center; padding: 26px 28px; border-radius: 24px; background: linear-gradient(130deg, color-mix(in srgb, var(--acc) 14%, var(--card)), var(--card) 70%); box-shadow: var(--shadow); margin: 1rem 0 1.6rem; }
.wdt .wort { font-size: clamp(2.2rem, 6vw, 3.6rem); }
@media (max-width: 640px) { .wdt { grid-template-columns: 1fr; } }
/* Veedel-Vergleich */
.vg-tools { flex-wrap: wrap; }
.vg-sel { flex: 1 1 180px; } .vg-sel select { width: 100%; }
.vg-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; }
.vg-tab { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 8px clamp(10px, 2vw, 22px); margin-bottom: .8rem; }
.vg-row { display: grid; grid-template-columns: minmax(120px, 1.3fr) repeat(var(--n), minmax(0, 1fr)); gap: 10px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.vg-row:first-child { border-top: 0; }
.vg-head a { text-decoration: none; color: var(--ink); } .vg-head b { display: block; font-family: var(--display); font-size: 1.15rem; } .vg-head small { color: var(--muted); }
.vg-label { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-2); } .vg-label .i { width: 16px; height: 16px; color: var(--acc); flex: none; }
.vg-val { display: grid; gap: 4px; } .vg-val b { font-variant-numeric: tabular-nums; }
.vg-val i { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 35%, var(--bg-2)); }
.vg-val.top b { color: var(--green); } .vg-val.top i { background: var(--green); }
@media (max-width: 600px) { .vg-row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } .vg-label { grid-column: 1 / -1; } .vg-head > span:first-child { display: none; } }
/* Kölsch-Quiz */
.quiz-start { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.quiz-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.quiz-frage { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 1rem 0 .8rem; }
.quiz-frage b { font-family: var(--display); color: var(--acc); }
.quiz-antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.quiz-a { text-align: left; font: inherit; font-size: .98rem; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.quiz-a:hover:not(:disabled) { border-color: var(--acc); transform: translateY(-1px); }
.quiz-a:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 45%, transparent); outline-offset: 2px; }
.quiz-a:disabled { cursor: default; opacity: .7; }
.quiz-a.richtig { opacity: 1; border-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 650; }
.quiz-a.falsch { opacity: 1; border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--card)); }
.quiz-info { margin-top: 1rem; min-height: 1px; }
.quiz-info q { font-style: italic; }
.quiz-ende { text-align: center; }
.quiz-punkte { font-family: var(--display); font-size: clamp(3rem, 10vw, 5rem); line-height: 1; color: var(--acc); }
.quiz-punkte small { font-size: .35em; color: var(--muted); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; margin: 0 0 14px; }
.calc input[type=range] { accent-color: var(--acc); width: 100%; }
.calc output { font-family: var(--display); font-weight: 800; color: var(--acc); font-size: 1.15rem; }
.calc-res { display: grid; gap: 8px; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.calc-row .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--acc) 35%, transparent); }
.calc-row.best { box-shadow: 0 0 0 2.5px var(--green), var(--shadow); }
.calc-row.best::after { content: "günstigste Wahl"; position: absolute; right: 12px; top: -1px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--green); padding: 2px 8px; border-radius: 0 0 8px 8px; }
.calc-row b { font-family: var(--display); font-size: 1.15rem; }
.fav-btn { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: .2s var(--ease); z-index: 2; }
.fav-btn .i { width: 18px; height: 18px; }
.fav-btn:hover { color: var(--red); border-color: var(--red); }
.fav-btn.on { color: #fff; background: var(--red); border-color: var(--red); }
.fav-btn.on .i { fill: currentColor; }
.card { padding-bottom: 58px; }
.card .card-foot { position: absolute; left: 20px; bottom: 12px; right: 56px; padding-top: 0; }
/* Drei Knöpfe (Website, Route, Kalender) brechen auf schmalen Karten um: mehr Platz unten lassen */
.card:has(.card-foot > :nth-child(3)) { padding-bottom: 96px; }
.card-dist { font-size: .76rem; font-weight: 700; color: var(--acc); background: var(--acc-soft); padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.card-open { font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.card-open.ja { color: var(--green); background: var(--green-soft); }
.card-open.nein { color: var(--muted); background: var(--bg-2); }
.card-open.bald { color: color-mix(in srgb, var(--gold) 55%, currentColor); background: var(--gold-soft); }
.dir-extra { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.dir-extra button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); padding: 7px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; }
.dir-extra button .i { width: 15px; height: 15px; color: var(--acc); }
.dir-extra button.on { background: var(--acc); color: #fff; border-color: var(--acc); }
.dir-extra button.on .i { color: #fff; }
.dir-abo { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); padding: 7px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; text-decoration: none; }
.dir-abo .i { width: 15px; height: 15px; color: var(--acc); }
.dir-abo:hover { border-color: var(--acc); color: var(--acc); }
.theme-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.theme-btn .i { width: 19px; height: 19px; }
.palette { position: fixed; inset: 0; z-index: 200; background: rgba(13, 20, 38, .55); backdrop-filter: blur(4px); display: grid; place-items: start center; padding-top: 12vh; }
.palette[hidden] { display: none; }
.palette-box { width: min(640px, calc(100% - 32px)); background: var(--card); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.palette-box input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 20px 22px; font: inherit; font-size: 1.1rem; background: transparent; color: var(--ink); outline: none; }
.palette-res { max-height: 56vh; overflow: auto; padding: 8px; }
.palette-res a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none !important; }
.palette-res a.sel, .palette-res a:hover { background: var(--bg-2); }
.palette-res a .i { width: 20px; height: 20px; color: var(--acc); }
.palette-res small { display: block; color: var(--muted); font-size: .8rem; }
.palette-hint { padding: 10px 16px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); display: flex; gap: 16px; }
.palette-hint kbd { font: inherit; font-weight: 700; background: var(--bg-2); border-radius: 6px; padding: 1px 6px; }

/* Korrektur: Bandfarbe folgt der Bereichsfarbe */
.sec.band { --band: color-mix(in srgb, var(--acc) 6%, var(--bg)); }
/* Fotos auf Karten und Teasern */
.card.has-foto { padding-top: 0; }
.card-foto { margin: 0 -20px 6px; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--bg-2); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card:hover .card-foto img { transform: scale(1.04); }
.card-foto figcaption, .veedel-foto figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 3px 8px; font-size: .62rem; color: rgba(255,255,255,.9); background: rgba(0,0,0,.45); border-top-left-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foto figcaption a { color: #fff; }
.card.has-foto::before { display: none; }
.teaser.has-foto { padding-top: 0; overflow: hidden; }
.teaser-foto { display: block; margin: 0 -16px 8px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.teaser-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.teaser:hover .teaser-foto img { transform: scale(1.05); }
.card-trust { margin: 0; font-size: .74rem; color: var(--green); display: flex; align-items: center; gap: 4px; }
.card-trust .i { width: 14px; height: 14px; }
.card-trust a { color: var(--muted); }

.fav-link { position: relative; color: var(--red); text-decoration: none !important; }
.fav-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font: 700 .68rem/18px var(--font); text-align: center; padding: 0 4px; }
.fav-n[hidden] { display: none; }
@media (max-width: 600px) { .theme-btn { width: 36px; height: 36px; } .fav-link { display: none; } }

/* Melden, Newsletter, Anzeigen-Galerie */
.card-melden { position: absolute; right: 54px; bottom: 18px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; z-index: 2; }
.card-melden:hover { color: var(--red); }
.melde-dlg { border: 0; border-radius: 22px; padding: 24px; width: min(560px, calc(100% - 32px)); box-shadow: var(--shadow-lg); background: var(--card); color: var(--ink); }
.melde-dlg::backdrop { background: rgba(13, 20, 38, .55); backdrop-filter: blur(3px); }
.md-msg, .nl-msg { font-size: .88rem; margin: 0; color: var(--green); min-height: 1em; }
.footer-nl { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; padding: 22px 24px; margin: 0 0 2.2rem; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.footer-nl strong { display: block; color: #fff; font-family: var(--display); font-size: 1.2rem; }
.footer-nl span { color: #9aa5bd; font-size: .88rem; }
.nl-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 340px; justify-content: flex-end; }
.nl-form input[type=email] { flex: 1 1 220px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; padding: 0 16px; font: inherit; }
.nl-form input[type=email]::placeholder { color: #8c97b0; }
.nl-form .btn { box-shadow: none; }
.nl-form .nl-msg { flex-basis: 100%; text-align: right; color: #8be0a4; }
.ad-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 1rem 0; }
.ad-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.ad-alarm-box, .m-erinnerung { margin: 1.2rem 0; }