/* ==========================================================================
   Echtzeitgesellschaft – Stylesheet mit Tag-/Nachtdesign
   Keine externen Schriften (DSGVO-freundlich)
   ========================================================================== */

/* Farben, Schrift, Radien und Schatten kommen aus dem Designsystem (designs.css:
   standard | steampunk | forschung, jeweils Tag und Nacht). Hier werden sie nur auf die
   Namen dieser Seite abgebildet – Farbänderungen also immer in designs.css vornehmen. */
:root {
  --font-display: var(--serif);
  --radius-sm: calc(var(--radius) - 2px);
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg: var(--paper);
  --bg-alt: var(--line-2);
  --surface: var(--card);
  --surface-2: color-mix(in srgb, var(--card) 45%, var(--paper));
  --text: var(--ink);
  --muted: var(--ink-2);
  --border: var(--line);
  --primary-ink: #ffffff;
  --accent: var(--blue);
  --accent-soft: var(--blue-soft);
  --ok: var(--green); --ok-soft: var(--green-soft);
  --warn: var(--amber); --warn-soft: var(--amber-soft);
  --bad: var(--error); --bad-soft: var(--error-soft);
  --hero-glow: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 60%),
               radial-gradient(800px 400px at -10% 110%, color-mix(in srgb, var(--blue) 16%, transparent) 0%, transparent 60%);

  /* Leiste (Menü-Icons, Laufschrift, Fotobanner) */
  --bar: #359760; --bar-hover: #2b7f50; --bar-ink: #ffffff; --bar-accent: #ffd7c9;
  --bar-bg: var(--bar);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; --primary-ink: var(--paper); }

:root[data-design="steampunk"] {
  --bar: #4a2e1b; --bar-hover: #6b4426; --bar-ink: var(--sp-brass-1); --bar-accent: #fff3cf;
  --bar-bg: linear-gradient(180deg, var(--sp-leather-1), var(--sp-leather-2));
}
:root[data-design="steampunk"]:not([data-theme="dark"]) { --primary-ink: #fffaf0; }
:root[data-design="forschung"] {
  --primary-ink: var(--fo-on);
  --bar: var(--fo-space-2); --bar-hover: var(--fo-indigo); --bar-ink: var(--fo-himmel); --bar-accent: var(--fo-star);
  --bar-bg: linear-gradient(90deg, var(--fo-space-1), var(--fo-space-2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.6 var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.site-main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: var(--primary-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 700; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 5px; font-size: .9em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(720px, 100% - 2.5rem); }
.section { margin-block: 2.5rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline { display: inline; }
.empty { color: var(--muted); padding: 1.5rem; text-align: center; background: var(--surface-2); border-radius: var(--radius); border: 1px dashed var(--border); }
.stack { display: grid; gap: .5rem; }

/* ---------- Header ---------- */
.site-header { z-index: 50; }   /* Aussehen: .topbar aus komponenten.css */
.header-inner { justify-content: space-between; gap: 1rem; min-height: 72px; max-width: none; padding: 0; }
.brand { gap: .65rem; letter-spacing: -.01em; }
.brand-logo { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .22)); transition: transform .3s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-size: 1.3rem; }
.brand-sub { font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--primary-text); margin-top: .2rem; }
@media (max-width: 420px) { .brand-name { font-size: 1.1rem; } .brand-sub { font-size: .58rem; } .brand-logo { width: 50px; height: 50px; } }

.mainnav { justify-content: flex-end; gap: .3rem; flex-wrap: nowrap; }   /* Schrift/Farben: komponenten.css */
.mainnav > a, .mainnav .linklike { border-radius: 999px; }
.mainnav .linklike { font-family: var(--font); font-size: .95rem; color: var(--ink-2); text-decoration: none; }
.mainnav .linklike:hover { background: var(--line-2); color: var(--ink); }
.mainnav > a.btn-primary { color: var(--primary-ink); background: var(--primary); font-weight: 600; }
.nav-user { display: inline-flex; align-items: center; gap: .4rem; }
.theme-toggle {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; margin-left: .3rem;
  transition: transform .4s var(--ease);
}
.theme-toggle:hover { transform: rotate(25deg); }
[data-theme="light"] .i-sun, [data-theme="dark"] .i-moon { display: none; }
.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: .2s; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .mainnav {
    position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch;
    background: var(--card); border-bottom: 3px solid var(--primary); padding: .75rem 1.25rem 1rem; gap: .15rem;
    display: none; box-shadow: var(--shadow);
  }
  .mainnav.open { display: flex; }
  .mainnav > a, .mainnav .linklike { text-align: left; width: 100%; }
  .theme-toggle { margin: .5rem 0 0; }
}

.adminnav { background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }
.adminnav .wrap { display: flex; gap: .2rem; padding-block: .5rem; }
.adminnav a { white-space: nowrap; padding: .35rem .75rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500; }
.adminnav a:hover { color: var(--text); background: var(--surface-2); }
.adminnav a.active { color: var(--accent); background: var(--accent-soft); }

.impersonate-bar { background: var(--warn); color: #1a1200; text-align: center; padding: .45rem 1rem; font-size: .92rem; }
.impersonate-bar form { margin-left: .5rem; }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--surface); --c: var(--text); --bd: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--bd);
  background: var(--b); color: var(--c); font: inherit; font-weight: 600;
  text-decoration: none; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; box-sizing: border-box;
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
  margin-bottom: 0; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
/* Hauptbutton wie im Echtzeitnetz: Systemfarbe, dunkle Kante, weiße Schrift, kräftiger Schatten */
.btn-primary {
  --b: var(--red); --c: #fff; --bd: var(--red-dark);
  box-shadow: 0 16px 38px -12px rgba(0, 0, 0, .56), 0 4px 25px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
}
.btn-primary:hover { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6), 0 6px 26px 0 rgba(0, 0, 0, .14), 0 10px 12px -5px rgba(0, 0, 0, .22); }
.btn-primary:active { box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5), 0 2px 10px 0 rgba(0, 0, 0, .12); }
/* Helle Systemfarben (Nacht, Forschung): dunkle Schrift, damit der Text lesbar bleibt */
:root[data-theme="dark"] .btn-primary, :root[data-design="forschung"] .btn-primary { --c: var(--primary-ink); }
.btn-ghost { --b: transparent; }
.btn-light { --b: #fff; --c: #1a1200; --bd: transparent; }
.btn-danger { --b: var(--bad-soft); --c: var(--bad); --bd: transparent; }
.btn-sm { padding: 6px 12px; font-size: .88rem; gap: 5px; }
.btn-lg { padding: 13px 24px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.linklike { background: none; border: 0; color: var(--primary-text); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.mainnav .linklike { text-decoration: none; }

/* ---------- Flash ---------- */
.flashes { margin-top: 1.25rem; display: grid; gap: .5rem; }
.flash { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); position: relative; padding-right: 2.5rem; }
.flash-success { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.flash-error { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.flash-info { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.flash-close { position: absolute; right: .6rem; top: .5rem; background: none; border: 0; font-size: 1.3rem; color: inherit; cursor: pointer; opacity: .6; }
.panel .flash { padding-right: 1rem; }

/* ---------- Panels, Cards ---------- */
/* Grundaussehen von .panel und .card: komponenten.css (bei Steampunk mit Kupferrohr-Rahmen) */
.panel { margin-bottom: 1.5rem; }
.panel + .panel { margin-top: 0; }
.grid.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.card { padding: 0; gap: 0; overflow: hidden; transition: transform .25s var(--ease), border-color .15s, filter .25s; }
.card:hover { transform: translateY(-3px); }
.card.is-past { opacity: .72; }
.card-media { position: relative; aspect-ratio: 16/10; display: block; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 65% 48%)); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.cover-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 4rem; color: rgba(255,255,255,.85); font-weight: 700; }
.cover-placeholder.big { font-size: 8rem; }
.date-chip { position: absolute; top: .75rem; left: .75rem; background: var(--surface); color: var(--text); border-radius: 10px; padding: .3rem .55rem; text-align: center; line-height: 1.05; box-shadow: var(--shadow); }
.date-chip b { display: block; font-size: 1.25rem; }
.date-chip small { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: var(--muted); }
.card-body { padding: 1rem 1.1rem .5rem; flex: 1; }
.card-body h3 { margin: .35rem 0 .3rem; }
.card-body h3 a { color: var(--text); text-decoration: none; }
.card-body h3 a:hover { color: var(--primary); }
.meta { color: var(--muted); font-size: .9rem; margin-bottom: .5rem; }
.card-text { font-size: .93rem; color: var(--muted); margin: 0; }
.card-foot { display: flex; justify-content: space-between; padding: .7rem 1.1rem; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 600; }
.card-foot .free { color: var(--ok); }
.card-foot .full { color: var(--bad); }

.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin: 0 .25rem .25rem 0; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Avatare ---------- */
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; vertical-align: middle; }
.avatar-initials { background: hsl(var(--h) 55% 88%); color: hsl(var(--h) 50% 30%); font-weight: 700; }
[data-theme="dark"] .avatar-initials { background: hsl(var(--h) 30% 26%); color: hsl(var(--h) 60% 82%); }
.avatar-xs { width: 26px; height: 26px; font-size: .68rem; }
.avatar-sm { width: 42px; height: 42px; font-size: .9rem; }
.avatar-md { width: 56px; height: 56px; }
.avatar-lg { width: 80px; height: 80px; font-size: 1.5rem; }
.avatar-xl { width: 128px; height: 128px; font-size: 2.4rem; }

/* ---------- Hero ---------- */
.hero { background: var(--hero-glow), var(--bg); border-bottom: 1px solid var(--border); }
.hero-inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: center; padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--accent); }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); line-height: 1.05; margin-bottom: .4em; }
.accent { color: var(--primary); font-style: italic; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 38em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.hero-quote { margin: 1.5rem 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; border-left: 3px solid var(--primary); padding-left: 1rem; }
.hero-quote cite { display: block; font-style: normal; font-family: var(--font); font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.hero-art { position: relative; height: 360px; }
.bubble { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border); font-size: 2.2rem; animation: float 7s ease-in-out infinite; }
.b1 { width: 130px; height: 130px; left: 8%; top: 10%; font-size: 3rem; }
.b2 { width: 96px; height: 96px; right: 10%; top: 0; animation-delay: -1.5s; }
.b3 { width: 110px; height: 110px; right: 4%; bottom: 14%; animation-delay: -3s; }
.b4 { width: 84px; height: 84px; left: 2%; bottom: 8%; animation-delay: -4.5s; }
.b5 { width: 120px; height: 120px; left: 40%; top: 38%; background: var(--primary); border-color: transparent; animation-delay: -2s; }
@keyframes float { 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } * { transition: none !important; } }
@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-art { display: none; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: -2rem; position: relative; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); }
.step span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; margin-bottom: .5rem; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; margin-top: 1.5rem; } }

.section-head, .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin-bottom: .2rem; }
.page-head p { margin: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.two-col.wide-left { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 860px) { .two-col, .two-col.wide-left { grid-template-columns: 1fr; } }
.cta-panel { background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); border: 0; }

.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.notice-list li { display: flex; gap: .9rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .85rem; }
.notice-list a { color: var(--text); text-decoration: none; }
.notice-list a:hover { color: var(--primary); }
.nl-date { flex: none; width: 48px; text-align: center; line-height: 1.05; background: var(--primary-soft); color: var(--primary); border-radius: 10px; padding: .35rem 0; }
.nl-date b { display: block; font-size: 1.2rem; }
.nl-date small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Filter ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.5rem; }
.filters input[type="search"] { flex: 1 1 220px; }
.filters.compact { margin: 0; }
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: 1rem; }
.filters .segmented { margin: 0; }
.segmented a { padding: .4rem .9rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.segmented a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.form label.check, label.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
label.check input { margin-top: .3rem; accent-color: var(--primary); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .62rem .8rem; width: 100%; transition: border-color .2s, box-shadow .2s;
}
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="file"] { padding: .5rem; background: transparent; border-style: dashed; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; min-height: 90px; }
.filters input, .filters select { width: auto; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.inline-form { margin-bottom: 1rem; }
.current-image { display: flex; gap: 1rem; align-items: center; }
.current-image img { width: 160px; border-radius: var(--radius-sm); }
.danger-zone { border-color: var(--bad-soft); margin-top: 1rem; }
.auth-panel { max-width: 480px; margin-inline: auto; }
.checklist { list-style: none; padding: 0; columns: 2; font-size: .92rem; }
.checklist .ok { color: var(--ok); } .checklist .bad { color: var(--bad); }

.tabs { display: flex; gap: .3rem; background: var(--surface-2); padding: 4px; border-radius: 999px; margin-bottom: 1.25rem; }
.tabs button { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--muted); padding: .55rem; border-radius: 999px; cursor: pointer; }
.tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Eventdetail ---------- */
.event-hero { height: clamp(220px, 38vw, 420px); position: relative; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 65% 48%)); }
.event-hero img { width: 100%; height: 100%; object-fit: cover; }
.event-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; margin-top: -3rem; position: relative; }
.event-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); min-width: 0; }
.crumbs { font-size: .9rem; margin-bottom: .75rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.prose p:last-child { margin-bottom: 0; }
.block { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.5rem; }
.sticky { position: sticky; top: 84px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0 0 1.25rem; }
.facts dt { color: var(--muted); font-size: .85rem; font-weight: 600; }
.facts dd { margin: 0; }
.you-joined { color: var(--ok); font-weight: 700; background: var(--ok-soft); padding: .6rem .9rem; border-radius: var(--radius-sm); }
@media (max-width: 900px) { .event-layout { grid-template-columns: 1fr; margin-top: -2rem; } .event-side { order: -1; } .sticky { position: static; } }

.people-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.people-list li { display: flex; gap: .7rem; align-items: flex-start; }
.people-list a { color: var(--text); text-decoration: none; }
.people-list p { margin: .15rem 0 0; color: var(--muted); }

.posts { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.post { display: flex; gap: .8rem; }
.post-body { flex: 1; min-width: 0; background: var(--surface-2); border-radius: 4px var(--radius) var(--radius) var(--radius); padding: .7rem 1rem; }
.post-body p { margin: .3rem 0 0; overflow-wrap: anywhere; }
.post-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .92rem; }
.post-head a { color: var(--text); text-decoration: none; }
.post-head form { margin-left: auto; }
.post:target .post-body { box-shadow: 0 0 0 2px var(--primary); }
.post.is-hidden { opacity: .6; }
.admin-posts .post { padding: 1rem; margin: 0; }
.admin-posts .post-body { background: none; padding: 0; }
.post-preview { cursor: pointer; list-style: none; }
.post-preview::-webkit-details-marker { display: none; }
.post-actions { display: flex; gap: .4rem; margin-top: .5rem; }

.gallery, .admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.gallery figure, .admin-gallery figure { margin: 0; position: relative; }
.gallery img, .admin-gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--radius-sm); }
.gallery figcaption, .admin-gallery figcaption { font-size: .85rem; margin-top: .3rem; }
figure.is-pending img { opacity: .55; }
.pick { position: absolute; top: .4rem; left: .4rem; background: var(--surface); border-radius: 6px; padding: .15rem .35rem; z-index: 2; }
.bulk-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.upload-form { background: var(--surface-2); padding: 1rem; border-radius: var(--radius-sm); }

/* ---------- Profil ---------- */
.profile-head { display: flex; gap: 1.75rem; align-items: flex-start; }
.profile-head.compact { align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-head.compact h1 { margin: 0; font-size: 1.6rem; }
.profile-info { flex: 1; }
.photo-edit { display: flex; gap: 1.25rem; align-items: center; }
@media (max-width: 640px) { .profile-head, .photo-edit { flex-direction: column; } }

/* ---------- Kalender ---------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 .5rem; }
.cal-nav h2 { margin: 0; font-family: var(--font-display); font-size: 1.6rem; }
.legend { font-size: .88rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: .5rem; }
.dot-event { background: var(--primary); } .dot-notice { background: var(--accent); }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-wd { background: var(--surface-2); text-align: center; font-weight: 700; font-size: .8rem; padding: .45rem 0; color: var(--muted); }
.cal-day { background: var(--surface); min-height: 104px; padding: .35rem; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day.is-empty { background: var(--bg-alt); }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-num { font-size: .85rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.is-today .cal-num { color: var(--primary); }
.cal-add { opacity: 0; color: var(--accent); }
.cal-day:hover .cal-add { opacity: 1; }
.cal-item { display: block; font-size: .75rem; line-height: 1.3; padding: .15rem .35rem; border-radius: 5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.cal-notice { background: var(--accent-soft); color: var(--accent); }
.cal-item.is-draft { opacity: .55; border: 1px dashed currentColor; }
.cal-more { font-size: .72rem; color: var(--muted); }
@media (max-width: 700px) {
  .cal-day { min-height: 64px; }
  .cal-item { font-size: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; display: inline-block; }
  .cal-event { background: var(--primary); } .cal-notice { background: var(--accent); }
  .cal-more { display: none; }
}
.notice { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
.notice:target { background: var(--accent-soft); border-radius: var(--radius-sm); padding-inline: 1rem; }
.notice img { width: 130px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.notice h3 { margin: .2rem 0; }
@media (max-width: 560px) { .notice { flex-direction: column; } .notice img { width: 100%; height: 160px; } }

/* ---------- Admin ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin: 1rem 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.stat:hover { transform: translateY(-2px); }
.stat b { display: block; font-size: 2rem; font-family: var(--font-display); color: var(--primary); }
.stat span { color: var(--muted); font-size: .88rem; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .65rem .8rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.table td a { color: var(--text); }
.table .actions { white-space: nowrap; text-align: right; }
.table .actions form, .table .actions a { margin-left: .2rem; }
.thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.thumb.placeholder { background: linear-gradient(135deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 65% 48%)); }
.simple-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.simple-list li { padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.simple-list li:last-child { border-bottom: 0; }
.simple-list form.inline { margin-left: .4rem; }
pre.mail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; white-space: pre-wrap; font-size: .85rem; overflow-wrap: anywhere; }
.accordion details summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
.accordion details[open] summary { margin-bottom: 1rem; }

.pagination { display: flex; gap: .3rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 36px; text-align: center; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--border); text-decoration: none; color: var(--text); background: var(--surface); }
.pagination .current { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* ---------- Dialog & Lightbox ---------- */
dialog.ezg-dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.5rem; width: min(440px, 92vw); box-shadow: var(--shadow); }
dialog.ezg-dialog::backdrop { background: rgba(10, 8, 6, .55); backdrop-filter: blur(2px); }
dialog.ezg-dialog p { margin-top: 0; font-weight: 600; }
dialog.ezg-dialog .form-actions { justify-content: flex-end; margin-top: 1rem; }
dialog.ezg-lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
dialog.ezg-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 10px; }
dialog.ezg-lightbox::backdrop { background: rgba(0, 0, 0, .85); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); margin-top: 3rem; padding: 2rem 0; font-size: .92rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-inner nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-inner nav a { color: var(--muted); text-decoration: none; }
.footer-inner nav a:hover { color: var(--primary); }

/* ==========================================================================
   Erweiterungen: Icons, Banner, Laufschrift, Themen, Teilen, Benachrichtigungen
   ========================================================================== */
.icon { flex: none; vertical-align: middle; }
.mainnav > a, .mainnav .linklike, .mainnav > a.btn { display: inline-flex; align-items: center; gap: .4rem; }
.mainnav .linklike { display: inline-flex; }
.nav-bell { position: relative; }
.nav-label-mobile { display: none; }
.bell-count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: .68rem; line-height: 18px; text-align: center; font-weight: 800; }
.adminnav a { display: inline-flex; align-items: center; gap: .35rem; }
.theme-toggle .i-sun, .theme-toggle .i-moon { display: inline-flex; }
[data-theme="light"] .theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (min-width: 861px) and (max-width: 1100px) { .mainnav > a:not(.btn) span, .mainnav .linklike span { display: none; } }
@media (max-width: 860px) {
  .nav-label-mobile { display: inline; }
  .bell-count { position: static; margin-left: auto; }
}

/* Fotobanner: 100 % breit, 180 px hoch */
.photo-banner { position: relative; width: 100%; height: 180px; overflow: hidden; background: #2b2b33; }
.banner-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; display: flex; align-items: flex-end; text-decoration: none; }
.banner-slide.is-active { opacity: 1; }
.banner-caption { margin: 0 0 1.1rem max(1.25rem, calc((100% - var(--wrap)) / 2)); padding: .45rem 1rem; border-radius: 999px; background: rgba(15, 12, 10, .55); color: #fff; font-weight: 700; font-size: 1.05rem; backdrop-filter: blur(4px); }
.banner-dots { position: absolute; right: 1rem; bottom: .8rem; display: flex; gap: .4rem; }
.banner-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.banner-dots button.is-active { background: #fff; }
.banner-preview { border-block: 1px solid var(--border); }

/* Laufschrift */
.ticker { overflow: hidden; background: var(--text); color: var(--bg); border-bottom: 1px solid var(--border); font-size: .92rem; }
[data-theme="dark"] .ticker { background: var(--surface-2); color: var(--text); }
.ticker-track { display: flex; width: max-content; animation: ticker-move var(--ticker-duration, 40s) linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; flex: none; }
.ticker-item { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.6rem; white-space: nowrap; color: inherit; text-decoration: none; position: relative; }
.ticker-item::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); transform: translateY(-50%); }
a.ticker-item:hover { color: var(--primary); }
@keyframes ticker-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
  .ticker-group[aria-hidden] { display: none; }
}

/* Themen */
.topic-badge { position: absolute; right: .75rem; top: .75rem; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tc); color: #fff; box-shadow: var(--shadow); }
.topic-tag { background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); display: inline-flex; align-items: center; gap: .3rem; }
[data-theme="dark"] .topic-tag { color: color-mix(in srgb, var(--tc) 55%, white); }
.topic-fieldset { margin: .25rem 0 1rem; min-width: 0; }   /* Rahmen: .form-section aus komponenten.css */
.topic-fieldset legend { font-size: .92rem; }
.topic-fieldset legend small { font-weight: 400; }
.topic-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.topic-pick { position: relative; display: block !important; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .2s, transform .15s; font-weight: 600; }
.topic-pick img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; filter: saturate(.55) brightness(.9); transition: filter .2s; }
.topic-pick span { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .5rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: .82rem; display: flex; align-items: center; gap: .3rem; }
.topic-pick input { position: absolute; top: .4rem; left: .4rem; width: 18px; height: 18px; accent-color: var(--tc); z-index: 1; }
.topic-pick:has(input:checked) { border-color: var(--tc); }
.topic-pick:has(input:checked) img { filter: none; }
.topic-pick:hover { transform: translateY(-1px); }
.topic-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

.image-choice { min-width: 0; }
.image-choice legend { font-size: .92rem; }
.image-choice-grid { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.image-preview { margin: 0; }
.image-preview img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 560px) { .image-choice-grid { grid-template-columns: 1fr; } }

/* Teilen & Einladen */
.side-stack { display: grid; gap: 1.25rem; }
.side-stack .panel { margin: 0; }
.cal-add-btn { margin-top: .6rem; }
.share-panel h2 { display: flex; align-items: center; gap: .4rem; font-size: 1.15rem; }
.share-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .8rem; }
.share-btn { display: inline-flex; align-items: center; gap: .4rem; justify-content: center; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.share-btn:hover { border-color: var(--primary); color: var(--primary); }
.share-wa:hover { border-color: #25a35a; color: #25a35a; }
.share-tg:hover { border-color: #2a9bd8; color: #2a9bd8; }
.share-fb:hover { border-color: #3b64c4; color: #3b64c4; }
.share-btn.is-copied { border-color: var(--ok); color: var(--ok); }
.invite-box { border-top: 1px solid var(--border); padding-top: .6rem; margin-top: .6rem; }
.invite-box summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .4rem; padding: .3rem 0; }
.invite-box[open] summary { margin-bottom: .6rem; }

/* Benachrichtigungen */
.notif-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.notif-list a { display: flex; gap: .9rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.notif-list a:hover { border-color: var(--primary); }
.notif-list .is-unread a { border-left: 4px solid var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.notif-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.notif-text { display: grid; gap: .1rem; min-width: 0; }
.notify-table td, .notify-table th { padding: .5rem .7rem; }
.notify-table input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Admin: Themen, Banner, Feeds, Systemtest */
.topic-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.topic-card { margin: 0; border-top: 4px solid var(--tc, var(--border)); }
.topic-card.is-inactive, .banner-item.is-inactive, .feed-item.is-inactive { opacity: .6; }
.topic-card-img { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.topic-card-img img { width: 100%; aspect-ratio: 1200/630; object-fit: cover; }
.topic-card-img span { position: absolute; left: .6rem; bottom: .6rem; background: rgba(0,0,0,.55); color: #fff; padding: .25rem .7rem; border-radius: 999px; font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; }
.icon-pick { display: flex; flex-wrap: wrap; gap: .3rem; }
.icon-pick label { display: grid !important; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick label:has(input:checked) { background: var(--tc, var(--primary)); border-color: var(--tc, var(--primary)); color: #fff; }
.topic-card fieldset { border: 0; padding: 0; margin: 0; }
.inline-label { display: inline-flex !important; align-items: center; gap: .4rem; font-weight: 500 !important; }
.banner-list { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.banner-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; }
.banner-item img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.feed-item summary { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; cursor: pointer; align-items: center; }
.feed-item[open] summary { margin-bottom: .8rem; }
.error-text { color: var(--bad); }
.system-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.system-grid .panel { margin: 0; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .92rem; }
.check-list li { display: flex; gap: .55rem; align-items: flex-start; }
.check-list li > svg { margin-top: .2rem; }
.check-list small { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.st-ok > svg { color: var(--ok); } .st-warn > svg { color: var(--warn); } .st-bad > svg { color: var(--bad); } .st-info > svg { color: var(--accent); }
.st-bad span { color: var(--bad); font-weight: 600; }
pre.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-html-link { margin: 1rem 0 -.6rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: .5rem 0; }

/* ==========================================================================
   Dunkelgrün: runde Icons im Menü, Laufschrift, Admin-Menü mit Zeilenumbruch
   ========================================================================== */
.mainnav .icon, .adminnav .icon, .theme-toggle .icon {
  width: 34px; height: 34px; padding: 8px; border-radius: 50%;
  background: var(--bar); color: var(--bar-ink); box-sizing: border-box; transition: background-color .2s, transform .2s var(--ease);
}
.mainnav > a:hover .icon, .mainnav .linklike:hover .icon { background: var(--bar-hover); transform: scale(1.06); }
.mainnav > a.active .icon { background: var(--primary); }
.mainnav > a, .mainnav .linklike { padding: .3rem .65rem .3rem .3rem; }
.mainnav > a.btn-primary .icon { background: rgba(255,255,255,.22); }
.nav-bell { padding: .3rem !important; }
.bell-count { top: -2px; right: -2px; border: 2px solid var(--bg); }
.theme-toggle { width: auto; height: auto; padding: 0; border: 0; background: none; }
.theme-toggle .icon { width: 40px; height: 40px; padding: 10px; }
.theme-toggle:hover { transform: rotate(25deg); }

.adminnav { overflow: visible; }
.adminnav .wrap { flex-wrap: wrap; row-gap: .4rem; }
.adminnav a { padding: .25rem .7rem .25rem .25rem; }
.adminnav .icon { width: 28px; height: 28px; padding: 6px; }
.adminnav a.active .icon { background: var(--primary); }
.adminnav a.active { color: var(--text); background: var(--surface-2); }

.ticker, [data-theme="dark"] .ticker { background: var(--bar-bg); color: var(--bar-ink); border-bottom: 0; }
.ticker-item, a.ticker-item { color: var(--bar-ink); }
a.ticker-item:hover { color: var(--bar-accent); }
.ticker-item::after { background: var(--bar-accent); opacity: .7; }
.ticker .icon { color: var(--bar-ink); }
.photo-banner { background: var(--bar-bg); }
input[type="color"] { padding: 3px; height: 44px; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }

/* ==========================================================================
   Designwahl (Fußzeile) und design-spezifische Details
   ========================================================================== */
.design-pick { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; font-size: .85rem; color: var(--muted); }
.design-pick button {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem .25rem .3rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.design-pick button[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); font-weight: 600; }
.design-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; background: var(--dot); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }

.design-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.design-card { position: relative; border: 2px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--surface); }
.design-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.design-card input { position: absolute; top: .7rem; right: .7rem; width: 20px; height: 20px; accent-color: var(--primary); }
.design-card .dc-body { padding: .8rem 1rem 1rem; }
.design-card .dc-body strong { display: block; font-size: 1.05rem; }
.dc-preview { display: grid; grid-template-columns: 1fr 1fr; }
.dc-mode { padding: .7rem; font-size: .78rem; display: grid; gap: .4rem; }
.dc-mode .dc-bar { height: 10px; border-radius: 5px; }
.dc-mode .dc-card { border-radius: 6px; padding: .45rem .5rem; border: 1px solid; }
.dc-mode .dc-btn { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-weight: 700; font-size: .72rem; }
.dc-swatches { display: flex; gap: 3px; }
.dc-swatches i { flex: 1; height: 12px; border-radius: 3px; }
.palette-table td { padding: .25rem .5rem; font-size: .82rem; }
.palette-table .sw { display: inline-block; width: 22px; height: 16px; border-radius: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.12); margin-right: .35rem; }

/* Steampunk: Messing, Leder, Nieten */
[data-design="steampunk"] .btn-primary,
[data-design="steampunk"] .mainnav > a.btn-primary {
  background: linear-gradient(180deg, var(--sp-brass-1), var(--sp-brass-2) 55%, var(--sp-brass-3));
  color: var(--sp-leather-2); border-color: var(--sp-brass-3); text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
}
[data-design="steampunk"] .mainnav .icon, [data-design="steampunk"] .adminnav .icon, [data-design="steampunk"] .theme-toggle .icon {
  box-shadow: inset 0 0 0 2px var(--sp-brass-2), 0 1px 2px rgba(0, 0, 0, .35);
}
[data-design="steampunk"] .ticker { border-block: 2px solid var(--sp-brass-2); }
[data-design="steampunk"] .site-header { border-bottom: 3px double var(--line); }
[data-design="steampunk"] h1, [data-design="steampunk"] h2 { letter-spacing: .01em; }

/* Forschung: Weltraum, Türkis, Leuchten */
[data-design="forschung"] h1, [data-design="forschung"] .brand-name { font-family: var(--font); letter-spacing: -.02em; }
[data-design="forschung"] .mainnav .icon, [data-design="forschung"] .theme-toggle .icon { box-shadow: 0 0 0 1px rgba(148, 227, 254, .35), 0 0 12px rgba(0, 201, 216, .35); }
[data-design="forschung"] .mainnav > a.active .icon { background: var(--fo-tuerkis); color: var(--fo-on); }
[data-design="forschung"] .btn-primary:hover { box-shadow: 0 0 0 3px var(--primary-soft), 0 0 18px rgba(0, 201, 216, .45); }
[data-design="forschung"] .ticker-item::after { background: var(--fo-star); }
.mainnav > a.active .icon, .adminnav a.active .icon { background: var(--primary); color: var(--primary-ink); }

/* ==========================================================================
   Komponenten (komponenten.css) an diese Seite angepasst
   ========================================================================== */
/* Rahmenbild über den Seitenrouter laden (relative Pfade in CSS zeigen sonst auf die Startseite) */
:root[data-design="steampunk"] .panel,
:root[data-design="steampunk"] .card,
.sp-frame { border-image-source: url("?f=assets/css/steampunk/frame.svg"); }
:root[data-design="steampunk"] .card:hover { transform: none; }
:root[data-design="steampunk"] .card .card-foot { border-top-color: var(--line); }
:root[data-design="steampunk"] .design-card, :root[data-design="steampunk"] .flash { border-radius: var(--radius); }
.card.event-card { padding: 0; }

/* Menü-Icons passend zur Menüzeile */
:root[data-design="steampunk"] .mainnav .icon,
:root[data-design="steampunk"] .theme-toggle .icon {
  background: radial-gradient(circle at 35% 30%, var(--sp-brass-1), var(--sp-brass-2) 55%, var(--sp-brass-3));
  color: var(--sp-leather-2); box-shadow: inset 0 0 0 2px rgba(43, 25, 13, .45), 0 0 0 1px var(--sp-brass-3);
}
:root[data-design="steampunk"] .mainnav > a:hover .icon { background: radial-gradient(circle at 35% 30%, #fff1c4, var(--sp-brass-1) 55%, var(--sp-brass-2)); }
:root[data-design="steampunk"] .brand-sub { color: var(--sp-brass-1); }
:root[data-design="steampunk"] .nav-toggle span { background: var(--sp-brass-1); }
:root[data-design="steampunk"] .mainnav > a.btn-primary { color: var(--sp-leather-2); }

:root[data-design="forschung"] .mainnav .icon,
:root[data-design="forschung"] .theme-toggle .icon { background: var(--fo-on); color: var(--fo-himmel); box-shadow: none; }
:root[data-design="forschung"] .mainnav > a:hover .icon { background: #0a4a52; }
:root[data-design="forschung"] .mainnav > a.active .icon { background: var(--fo-tuerkis); color: var(--fo-on); }
:root[data-design="forschung"] .brand-sub { color: var(--fo-on); }
:root[data-design="forschung"] .nav-toggle span { background: var(--fo-on); }
:root[data-design="forschung"] .mainnav > a.btn-primary { background: var(--fo-on); color: var(--fo-himmel); }

/* Glocken-Zähler: .count aus komponenten.css, hier nur positioniert */
.bell-count.count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; line-height: 16px; border: 2px solid var(--card); }
:root[data-design="steampunk"] .bell-count.count { border-color: var(--sp-leather-1); }
:root[data-design="forschung"] .bell-count.count { border-color: var(--fo-himmel); }

/* Mobiles Menü in der Farbe der Menüzeile */
@media (max-width: 860px) {
  :root[data-design="steampunk"] .mainnav { background: linear-gradient(180deg, var(--sp-leather-1), var(--sp-leather-2)); border-bottom: 4px solid var(--sp-brass-2); }
  :root[data-design="forschung"] .mainnav { background: var(--fo-himmel); border-bottom: 2px solid var(--fo-tuerkis); }
}
:root[data-design="steampunk"] .topbar .linkbtn:hover { background: rgba(240, 207, 126, .16); color: #ffe7a8; }
:root[data-design="forschung"] .topbar .linkbtn:hover { background: rgba(3, 38, 43, .1); color: var(--fo-on); }

/* Schriftgröße Menü und Laufschrift */
.mainnav a, .mainnav .linklike, .topbar .linkbtn, .ticker { font-size: 1rem; }
/* Schrift: Systemschrift (system-ui) in allen Designs, gleiche Größen auch bei Steampunk */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Alle Boxen: Rahmen + 3D-Schatten
   ========================================================================== */
:root { --shadow3d: 0 16px 38px -12px rgba(0, 0, 0, .56), 0 4px 25px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2); }
.panel, .card, .step, .event-main, .stat, .table-wrap, dialog.ezg-dialog, .calendar,
.notice-list li, .notif-list a, .banner-item, .design-card, .form-section, .empty {
  border: 1px solid var(--line);
  box-shadow: var(--shadow3d);
}
.form-section { border-width: 2px; }
.empty { border-style: dashed; }
.card:hover, .stat:hover { box-shadow: 0 20px 42px -12px rgba(0, 0, 0, .6), 0 6px 26px 0 rgba(0, 0, 0, .14), 0 10px 12px -5px rgba(0, 0, 0, .22); }
.design-card:has(input:checked) { border: 2px solid var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow3d); }
/* Steampunk: Kupferrohr-Rahmen bleibt, Schatten wie bei den anderen Designs */
:root[data-design="steampunk"] .panel,
:root[data-design="steampunk"] .card { border-width: 16px; box-shadow: var(--shadow3d); filter: none; }
:root[data-design="steampunk"][data-theme="dark"] .panel,
:root[data-design="steampunk"][data-theme="dark"] .card,
:root[data-design="steampunk"] .card:hover { filter: none; }
@media (max-width: 600px) { :root[data-design="steampunk"] .panel, :root[data-design="steampunk"] .card { border-width: 11px; } }

/* Einwilligung: Text als ein Fließtext neben dem Kästchen */
label.check > span { flex: 1; min-width: 0; }
label.check.consent a { display: inline; }

/* FAQ */
.faq-intro { margin-bottom: 1.5rem; }
.faq-group h2 { display: flex; align-items: center; gap: .5rem; margin: 2rem 0 .8rem; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow3d); margin-bottom: .9rem; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font-weight: 600; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bar); color: var(--bar-ink); font-weight: 700; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-answer { padding: .9rem 1.2rem 1.1rem; color: var(--ink-2); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-toc { display: flex; flex-wrap: wrap; gap: .5rem; }