/* =========================================================
   KG Erfttrabanten Schönau e.V. — Modern Onepager Styles
   (Update: Responsive Fix Header + kein horizontales Scrollen
    + Historie Popups INLINE-Bilder kompakt/thumbnail + Inline-Zoom)
========================================================= */

/* =========================
   Design System / Tokens
========================== */
:root{
  /* Fixer Seiten-Hintergrund (bleibt im Light/Dark gleich) */
  --page-bg: #7d0d12;
  --page-grad-red-1: rgba(255, 70, 70, 0.35);
  --page-grad-red-2: rgba(227, 6, 19, 0.25);
  --page-grad-gold-1: rgba(255, 200, 40, 0.22);
  --page-grad-gold-2: rgba(255, 179, 0, 0.16);

  /* Typo außerhalb Cards (IMMER weiß) */
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.75);

  /* Typo in Cards/Popups (dark default) */
  --card-text: #ffffff;
  --card-text-dim: rgba(255,255,255,0.75);

  /* Brand */
  --brand: #e30613;
  --brand-deep: #b7040f;
  --white: #ffffff;
  --gold: #ffb300;

  /* Card/Surface (Dark Default) */
  --card-bg: rgba(0,0,0,0.48);
  --card-border: rgba(255,255,255,0.14);
  --card-shadow-soft: 0 10px 40px rgba(0,0,0,0.55);
  --card-shadow-hard: 0 18px 80px rgba(0,0,0,0.75);

  /* „Soft“-Flächen (z.B. Inputs, Countdownboxen) */
  --bg-soft: rgba(0,0,0,0.6);
  --bg-glass: rgba(255,255,255,0.06);

  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --shadow-soft: var(--card-shadow-soft);
  --shadow-hard: var(--card-shadow-hard);

  --maxw: 1200px;
  --nav-h: 140px;

  --grid-gap: clamp(14px, 2.2vw, 22px);
}

/* =========================
   Reset / Base
========================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* WICHTIG: horizontales Scrollen verhindern */
html{ overflow-x: clip; }
body{ overflow-x: hidden; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 12% -10%, var(--page-grad-red-1), transparent 60%),
    radial-gradient(900px 600px at 88% 0%, var(--page-grad-gold-1), transparent 55%),
    radial-gradient(1100px 800px at 50% 110%, var(--page-grad-gold-2), transparent 58%),
    radial-gradient(1000px 700px at 70% 15%, var(--page-grad-red-2), transparent 62%),
    var(--page-bg);
  line-height:1.55;
  letter-spacing:0.2px;
}

/* defensive responsive rules */
img, video, canvas, svg, iframe{
  max-width:100%;
  height:auto;
  display:block;
}

a{ color:inherit; text-decoration:none; }

.container{
  width:min(100% - 32px, var(--maxw));
  margin-inline:auto;
}

/* =========================
   Background Blobs
========================== */
.blob{
  position:fixed; inset:auto;
  width:52vmax; height:52vmax;
  filter:blur(55px);
  opacity:.55;
  z-index:-1;
  border-radius:50%;
  animation: float 18s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events:none;
}
.blob.b1{
  background: radial-gradient(circle at 30% 30%, rgba(255, 80, 80, 0.9), transparent 60%);
  top:-18vmax; left:-18vmax;
}
.blob.b2{
  background: radial-gradient(circle at 40% 30%, rgba(255, 210, 90, 0.85), transparent 60%);
  top:-10vmax; right:-18vmax; animation-duration:22s;
}
.blob.b3{
  background: radial-gradient(circle at 50% 50%, rgba(255, 179, 0, 0.85), transparent 60%);
  bottom:-18vmax; left:20vmax; animation-duration:26s;
}
@keyframes float{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); }
  50%{ transform:translateY(-3vmax) translateX(2vmax) scale(1.05); }
}

/* =========================
   Header / Navbar
========================== */
header{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center;

  background:
    linear-gradient(to bottom,
      rgba(7,7,10,0.98),
      rgba(7,7,10,0.82),
      rgba(7,7,10,0.25));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:10px 0;
  flex-wrap:nowrap;
}

/* FIX: Brand darf schrumpfen und NICHT breiter als Viewport werden */
.brand{
  display:flex; align-items:center; gap:14px;
  font-weight:900; letter-spacing:0.3px;
  min-width:0;            /* wichtig */
  flex:1 1 auto;          /* wichtig */
}
.brand img{
  width:96px; height:96px;
  border-radius:16px;
  background:#fff; padding:8px;
  box-shadow: var(--shadow-soft);
  border:2px solid rgba(255,179,0,0.6);
  flex:0 0 auto;
}
.brand .title{
  display:flex; flex-direction:column;
  line-height:1.08;
  font-size:26px; font-weight:950;
  min-width:0;            /* wichtig für ellipsis */
}
.brand .title small{
  font-size:14px; color:var(--text-dim);
  font-weight:700; margin-top:4px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Desktop Nav immer aus */
nav ul{ display:none; }
nav a{ display:none; }

.nav-actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
  white-space:nowrap;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px;
  font-weight:900; font-size:16px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer; user-select:none; white-space:nowrap;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), #ff4b55);
  box-shadow: var(--shadow-hard);
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter:saturate(1.06);
}

.btn.ghost{
  background: var(--bg-glass);
  color: var(--white);
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--shadow-soft);
}
.btn.ghost:hover{
  background: rgba(255,255,255,0.10);
}

#themeToggle.btn.ghost{
  width:50px; height:46px; padding:0; font-size:18px;
}

/* Hamburger immer an */
.hamburger{
  display:inline-flex;
  width:54px; height:48px;
  border-radius:12px;
  background: var(--bg-glass);
  border:1px solid rgba(255,255,255,0.14);
  align-items:center; justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.hamburger span{
  width:22px; height:2px; background:var(--white);
  display:block; position:relative;
}
.hamburger span::before,
.hamburger span::after{
  content:""; position:absolute; left:0;
  width:22px; height:2px; background:var(--white);
  transition:.25s ease;
}
.hamburger span::before{ top:-7px; }
.hamburger span::after{ top:7px; }
.hamburger.open span{ background:transparent; }
.hamburger.open span::before{ transform:translateY(7px) rotate(45deg); }
.hamburger.open span::after{ transform:translateY(-7px) rotate(-45deg); }

/* =========================
   FULLSCREEN OVERLAY MENU
========================== */
.mobile-panel{
  position:fixed; inset:0;
  display:none; z-index:999;
}
.mobile-panel.open{ display:block; }

.mobile-panel-backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(227,6,19,0.30), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(255,179,0,0.18), transparent 55%),
    rgba(7,7,10,0.85);
  backdrop-filter: blur(10px);
  animation: fadeIn .22s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.mobile-panel-inner{
  position:relative;
  width:min(100% - 24px, 760px);
  margin: clamp(5vh, 50px, 8vh) auto 0;
  padding: 18px 18px 22px;
  border-radius:22px;
  background:
    radial-gradient(900px 450px at 0% 0%, rgba(227,6,19,0.18), transparent 55%),
    radial-gradient(700px 450px at 100% 100%, rgba(255,179,0,0.14), transparent 60%),
    rgba(0,0,0,0.75);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-hard);
  animation: slideDown .26s ease;
}
@keyframes slideDown{
  from{ opacity:0; transform:translateY(-20px) scale(.98); }
  to{ opacity:1; transform:none; }
}

.mobile-panel-close{
  position:absolute; top:10px; right:10px;
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background: var(--bg-glass);
  color: var(--text);
  font-size:18px;
  cursor:pointer;
}
.mobile-panel-close:hover{
  background: rgba(227,6,19,0.18);
  border-color: rgba(255,179,0,0.6);
}

.mobile-panel-brand{
  display:flex; align-items:center; gap:12px;
  padding:10px 10px 14px;
  border-radius:16px;
  background: rgba(255,255,255,0.05);
  border:1px dashed rgba(255,179,0,0.35);
}
.mobile-panel-brand img{
  width:70px; height:70px;
  border-radius:12px;
  background:#fff; padding:6px;
}
.mp-title{ font-weight:950; font-size:18px; }
.mp-sub{
  color:var(--text-dim); font-weight:800; font-size:14px; margin-top:2px;
}

.mobile-links{
  display:grid; gap:8px;
  padding:14px 6px 8px;
}
.mobile-links a{
  display:flex; align-items:center; justify-content:center;
  padding:14px 16px;
  border-radius:14px;
  font-weight:950;
  font-size:22px;
  letter-spacing:0.3px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  transition:.2s ease;
}
.mobile-links a:hover{
  background: rgba(227,6,19,0.18);
  border-color: rgba(255,179,0,0.6);
  transform: translateY(-1px);
}

.mobile-cta{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  padding-top:10px;
}

/* =========================
   Hero
========================== */
.hero{
  position:relative;
  padding: clamp(70px, 10vw, 120px) 0 40px;
  min-height: calc(100svh - var(--nav-h));
  display:grid; align-items:center;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

/* linker Block */
.hero-left{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* gemeinsame Höhe der beiden großen Hero-Cards */
.hero-main-card{
  min-height: 420px;
  height: 100%;
}

/* Welcome Card / Banner */
.welcome-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.welcome-banner{
  width:100%;
  height:auto;
  max-height: 360px;
  object-fit: contain;
  border-radius:12px;
}

/* Eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--bg-glass);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  font-size:12px; font-weight:900;
  letter-spacing:0.8px; text-transform:uppercase;
  color:var(--text-dim);
  width:max-content;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--gold);
  box-shadow:0 0 12px rgba(255,179,0,.9);
}

.lead{
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-dim);
  max-width:56ch;
  margin-bottom:0;
}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:6px 0 0;
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:6px;
}
.stat{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow-soft);
  color: var(--card-text);
}
.stat b{ font-size:20px; }
.stat span{
  color:var(--card-text-dim);
  font-size:13px; font-weight:700;
}

/* Hero Card rechts */
.hero-card{
  position:relative;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:22px;
  padding:18px;
  box-shadow: var(--shadow-hard);
  overflow:hidden;
  color: var(--card-text);
  display:flex;
  flex-direction:column;
}
.hero-card .card-transparent{
  margin-top:10px;
  flex:1;
}

.hero-card::after{
  content:"";
  position:absolute; inset:-40% -20% auto auto;
  width:320px;height:320px;border-radius:999px;
  background: radial-gradient(circle, rgba(255, 179, 0, 0.35), transparent 60%);
  filter: blur(30px);
  animation: swirl 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes swirl{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-40px,40px) scale(1.15); }
}

.hero-logo{
  display:flex; align-items:center; gap:14px;
  padding:12px;
  border-radius:16px;
  background: rgba(255,255,255,0.06);
  border:1px dashed rgba(255,179,0,0.35);
}
.hero-logo img{
  width:92px; height:92px;
  border-radius:14px;
  background:#fff;
  padding:6px;
}
.hero-logo .name{ font-weight:950; font-size:18px; }
.hero-logo .sub{ color:var(--card-text-dim); font-weight:700; font-size:14px; }

/* Countdown */
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:10px;
}
.cd-box{
  text-align:center;
  padding:12px;
  border-radius:14px;
  background: var(--bg-soft);
  border:1px solid rgba(255,255,255,0.10);
}
.cd-box b{ font-size:20px; }
.cd-box span{
  font-size:12px;
  color:var(--card-text-dim);
  font-weight:800;
  letter-spacing:0.6px;
  text-transform:uppercase;
}

/* Ticker Pills */
.ticker{
  margin-top:12px;
  display:flex; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--card-text-dim); font-weight:750;
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;border-radius:999px;
  background: rgba(227,6,19,0.12);
  border:1px solid rgba(255,255,255,0.12);
  transition: .2s ease;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,179,0,0.6);
}
.pill-btn{ cursor:pointer; color:inherit; font:inherit; border:none; }
.pill-btn:focus{
  outline:2px solid rgba(255,179,0,0.8);
  outline-offset:2px;
}

/* Social Pills with icons */
.social-pill .s-ico{
  width:18px; height:18px; display:inline-flex;
}
.social-pill svg{
  width:18px; height:18px; display:block;
}

/* =========================
   Sections / Cards
========================== */
section{ padding: clamp(56px, 8vw, 90px) 0; position:relative; }
.section-head{
  display:flex; align-items:end; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.section-head h2{
  margin:0; font-size: clamp(22px, 3vw, 34px); font-weight:950;
}
.section-head p{
  margin:6px 0 0; color:var(--text-dim); max-width:60ch;
}
.grid{ display:grid; gap: var(--grid-gap); }

.card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding:16px;
  box-shadow: var(--shadow-soft);
  position:relative; overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
  color: var(--card-text);
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,179,0,0.5);
}

.card .badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:950;
  letter-spacing:0.7px; text-transform:uppercase;
  padding:6px 9px; border-radius:999px;
  background: rgba(255,179,0,0.10);
  border:1px solid rgba(255,179,0,0.60);
  color:#ffd36a;
}

.card-title{ margin:8px 0 6px; font-size:18px; font-weight:950; }
.card-transparent{ background:transparent; border-style:solid; }

/* Muted global (Page) */
.muted{ color:var(--text-dim); }

/* Muted innerhalb Cards/Popups */
.card .muted,
.hero-card .muted,
.lightbox-content .muted{
  color: var(--card-text-dim);
}

.strong{ font-weight:850; }
.m-0{ margin:0; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }
.mt-14{ margin-top:14px; }
.pad-12{ padding:12px; }
.min-h-220{ min-height:220px; }

/* About */
.about-grid{ grid-template-columns: 1.1fr 0.9fr; align-items:stretch; }
.about-list{ display:grid; gap:10px; margin-top:12px; }
.about-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:14px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
}
.icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,179,0,0.35), transparent 60%),
    rgba(227,6,19,0.10);
  border:1px solid rgba(255,179,0,0.45);
  font-weight:950;
}
.board-grid{ grid-template-columns:1fr 1fr; gap:10px; }
.values{
  margin:10px 0 0; padding-left:18px;
  color:var(--card-text-dim); font-weight:750;
}

/* Events */
.events-grid{ grid-template-columns:repeat(3,1fr); }
.event{ display:flex; flex-direction:column; gap:8px; }
.event .date{ font-weight:950; font-size:18px; }
.event .meta{ color:var(--card-text-dim); font-size:14px; font-weight:750; }
.event .tag{
  font-size:12px; font-weight:950;
  text-transform:uppercase; letter-spacing:0.6px;
  width:max-content; padding:5px 8px; border-radius:999px;
  background: rgba(227,6,19,0.16);
  border:1px solid rgba(255,255,255,0.18);
  color:var(--card-text);
}

/* News */
.news-grid{
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--grid-gap);
}

.fb-card .fb-embed,
.ig-card .ig-embed{
  margin-top:8px;
  border-radius:14px;
  overflow:hidden;
  background: rgba(0,0,0,0.18);
  border:1px dashed rgba(255,255,255,0.18);
  min-height: 320px;
}

.fb-consent, .ig-consent{
  padding:14px;
  display:grid;
  gap:10px;
}

.fb-iframe, .ig-iframe{
  width:100% !important;
  max-width:100%;
  height:560px;
  border:0;
  overflow:hidden;
  display:block;
  border-radius:12px;
  background:#fff;
}

/* CTA */
.cta{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap: var(--grid-gap); align-items:center;
  padding:22px; border-radius:26px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow: var(--shadow-hard);
  color: var(--card-text);
}
.cta h3{
  margin:0 0 6px; font-size: clamp(20px, 2.4vw, 28px);
  font-weight:950;
}
.cta p{ margin:0; color:var(--card-text-dim); }
.cta-box{ display:grid; gap:10px; }
.cta-mini{
  padding:12px; border-radius:14px;
  background: rgba(227,6,19,0.12);
  border:1px solid rgba(255,179,0,0.45);
  font-weight:800;
}

/* Contact */
.contact-grid{ grid-template-columns:1fr 1fr; }
.contact-card{ display:grid; gap:10px; }
.label-strong{ font-weight:900; margin-bottom:6px; }
.input, textarea{
  width:100%; padding:12px; border-radius:12px;
  background: var(--bg-soft);
  border:1px solid rgba(255,255,255,0.12);
  color: var(--card-text);
  font-size:15px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{ min-height:120px; resize:vertical; }
.input:focus, textarea:focus{
  border-color: rgba(255,179,0,0.75);
  box-shadow: 0 0 0 4px rgba(255,179,0,0.12);
}
.contact-note{ color:var(--card-text-dim); font-size:14px; }
.social-list{ display:flex; gap:8px; flex-wrap:wrap; }

/* Reveal */
.reveal{
  opacity:0; transform: translateY(18px) scale(.98);
  transition: .7s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* Back to top */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:40;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(227,6,19,0.18);
  border:1px solid rgba(255,179,0,0.6);
  box-shadow: var(--shadow-hard);
  opacity:0; transform: translateY(12px);
  pointer-events:none; transition: .25s ease;
  font-weight:950;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }

/* Footer */
footer{
  padding:28px 0 46px;
  color:var(--text-dim); font-size:14px;
  border-top:1px solid rgba(255,255,255,0.10);
  background: linear-gradient(to top, rgba(255, 179, 0, 0.08), transparent);
}
.footer-grid{
  display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; align-items:center;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-logo{
  width:34px; height:34px; border-radius:8px;
  background:#fff; padding:3px;
  border:1px solid rgba(255,179,0,0.6);
}
.footer-title{ color:var(--white); font-weight:900; }
.footer-links{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================
   LIGHTBOX / POPUPS
========================== */
.lightbox{
  position:fixed; inset:0;
  display:none; z-index:999;
}
.lightbox.open{ display:block; }

.lightbox-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.lightbox-content{
  position:relative;
  width: min(92vw, 820px);
  max-height: 86vh;
  margin: 6vh auto 0;
  background: var(--card-bg);
  color: var(--card-text);
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow: var(--shadow-hard);
  padding:10px;
  overflow:auto;
  animation: pop .18s ease;
}

.lightbox-content img{
  width:100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
  display:block;
  border-radius:12px;
  background:#000;
}

.lightbox-caption{
  padding:8px 6px 4px;
  font-weight:800; color: var(--card-text-dim);
  text-align:center;
}

.lightbox-close{
  position:absolute; top:8px; right:8px;
  width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.15);
  background: var(--bg-glass);
  color: var(--card-text); font-size:18px;
  cursor:pointer;
}
.lightbox-close:hover{
  background: rgba(227,6,19,0.18);
  border-color: rgba(255,179,0,0.6);
}

/* =========================================================
   Historie Popup Layout + Inline-Bilder (Thumbnail + Zoom)
========================================================= */

#legalBody h4{
  margin: 2px 0 8px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
#legalBody h5{
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.2px;
  color: var(--card-text);
}

.hist-year,
.hist-entry{
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  padding:8px 10px;
  border-radius:10px;
  margin:8px 0 4px;
  font-size:14px;
  line-height:1.5;
}
.hist-year b,
.hist-entry b{
  font-size:15px;
  font-weight:900;
}

/* Trennlinie innerhalb Historie */
.hist-sep{
  border:none;
  height:1px;
  background: rgba(255,255,255,0.16);
  margin:10px 0;
}

/* Bildunterschriften weg */
.hist-figure figcaption{
  display:none !important;
}

/* Figure kleiner & als Thumbnail */
.hist-figure{
  margin:6px auto 12px;
  border-radius:10px;
  overflow:hidden;
  background: rgba(0,0,0,0.18);
  border:1px dashed rgba(255,255,255,0.14);
  max-width: 420px;
  transition: max-width .18s ease;
}

.hist-figure img{
  width:100%;
  height:auto;
  display:block;
  background:#000;
  max-height: 180px;  /* Thumbnail */
  object-fit: contain;
  cursor: zoom-in;
  transition: max-height .18s ease, transform .18s ease;
}

/* Inline vergrößert */
.hist-figure.enlarged{
  max-width: 720px;
}
.hist-figure.enlarged img{
  max-height: 520px;
  cursor: zoom-out;
  transform: scale(1.01);
}

/* Light Mode Historie */
[data-theme="light"] .hist-year,
[data-theme="light"] .hist-entry{
  background: #fff;
  border-color: rgba(10,12,18,0.10);
}
[data-theme="light"] .hist-figure{
  background:#fff;
  border-color: rgba(10,12,18,0.10);
}
[data-theme="light"] .hist-sep{
  background: rgba(10,12,18,0.10);
}

/* =========================
   Responsive
========================== */
@media (max-width:980px){
  :root{ --nav-h: 110px; }

  .hero-grid, .about-grid, .cta, .contact-grid, .news-grid{
    grid-template-columns:1fr;
  }
  .events-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero-main-card{ min-height: 360px; }

  .brand img{ width:72px; height:72px; padding:6px; }
  .brand .title{ font-size:20px; }
  .brand .title small{ font-size:12px; }

  .btn{ font-size:14px; padding:10px 14px; }
  #themeToggle.btn.ghost{ width:46px; height:44px; font-size:16px; }

  .hamburger{ width:50px; height:44px; }

  .mobile-panel-inner{ width:min(100% - 24px, 640px); }
  .mobile-links a{ font-size:20px; }

  .lightbox-content{
    width: min(94vw, 680px);
    max-height: 88vh;
  }
  .lightbox-content img{ max-height: 70vh; }

  .hero{ padding-top: 56px; }
}

@media (max-width:560px){
  .container{ width:min(100% - 20px, var(--maxw)); }

  .events-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .countdown{ grid-template-columns: repeat(2,1fr); }

  .hero-main-card{ min-height: 300px; }

  .brand img{ width:60px; height:60px; }
  .brand .title{ font-size:18px; }

  .nav{ gap:8px; }
  .nav-actions{ gap:6px; }

  .btn{ padding:9px 12px; font-size:13px; }
  #themeToggle.btn.ghost{ width:42px; height:40px; }
  .hamburger{ width:46px; height:40px; }

  .mobile-panel-inner{ margin: 4vh auto 0; }

  .lightbox-content{
    width: 96vw;
    margin: 4vh auto 0;
    max-height: 90vh;
  }
  .lightbox-content img{ max-height: 66vh; }

  .hist-figure{ max-width: 100%; }
  .hist-figure img{ max-height: 160px; }
  .hist-figure.enlarged img{ max-height: 420px; }
}

/* EXTRA: sehr kleine Geräte -> CTA Button darf schrumpfen */
@media (max-width:420px){
  .btn{ padding:8px 10px; font-size:12.5px; }
  .brand .title{ font-size:16px; }
  .brand .title small{ font-size:11px; }
}

/* =========================
   LIGHT MODE
========================== */
[data-theme="light"]{
  --card-text: #0b0d12;
  --card-text-dim: #596074;

  --card-bg: #ffffff;
  --card-border: rgba(10,12,18,0.10);
  --card-shadow-soft: 0 10px 30px rgba(15,18,28,0.08);
  --card-shadow-hard: 0 18px 70px rgba(15,18,28,0.12);

  --bg-soft: #ffffff;
  --bg-glass: rgba(227,6,19,0.05);

  --gold: #e9a800;
}

[data-theme="light"] header{
  background:
    linear-gradient(to bottom,
      rgba(246,247,251,0.96),
      rgba(246,247,251,0.86),
      rgba(246,247,251,0.30));
  border-bottom: 1px solid rgba(10,12,18,0.06);
}
[data-theme="light"] .btn{
  box-shadow: 0 10px 30px rgba(227,6,19,0.25);
}
[data-theme="light"] .btn.ghost{
  background:#fff; color:var(--card-text);
  border-color: rgba(10,12,18,0.08);
}
[data-theme="light"] .btn.ghost:hover{
  background: rgba(227,6,19,0.05);
}
[data-theme="light"] .hamburger{
  background:#fff; border-color: rgba(10,12,18,0.08);
}
[data-theme="light"] .hamburger span,
[data-theme="light"] .hamburger span::before,
[data-theme="light"] .hamburger span::after{
  background: var(--card-text);
}

[data-theme="light"] .input,
[data-theme="light"] textarea{
  background:#fff; border-color: rgba(10,12,18,0.12);
  color: var(--card-text);
}
[data-theme="light"] .input:focus,
[data-theme="light"] textarea:focus{
  border-color: rgba(227,6,19,0.8);
  box-shadow: 0 0 0 4px rgba(227,6,19,0.12);
}

[data-theme="light"] footer{
  border-top: 1px solid rgba(10,12,18,0.06);
}

[data-theme="light"] .mobile-panel-backdrop{
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(227,6,19,0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(255,179,0,0.12), transparent 55%),
    rgba(246,247,251,0.90);
}
[data-theme="light"] .mobile-panel-inner{
  background:
    radial-gradient(900px 450px at 0% 0%, rgba(227,6,19,0.10), transparent 55%),
    radial-gradient(700px 450px at 100% 100%, rgba(255,179,0,0.10), transparent 60%),
    #fff;
  border-color: rgba(10,12,18,0.08);
}
[data-theme="light"] .mobile-links a{
  background: rgba(227,6,19,0.04);
  border-color: rgba(10,12,18,0.08);
}

[data-theme="light"] .mobile-panel-inner,
[data-theme="light"] .mobile-panel-inner *{
  color: var(--card-text);
}

[data-theme="light"] .mobile-links a{
  color: var(--card-text);
}