/* ==========================================================================
   Junge Union Burgwedel — Design System
   Helles "Liquid Glass"-Theme. Handgeschrieben, kein Utility-Framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schriften - lokal gehostet (DSGVO)

   Bewusst KEIN @import von fonts.googleapis.com: sonst erhielte Google die
   IP-Adresse jedes Besuchers (vgl. LG Muenchen I, Urt. v. 20.01.2022,
   Az. 3 O 17493/20). Die Dateien liegen unter /fonts/ auf dem eigenen Server.

   Variable Fonts: ein File deckt den gesamten Gewichtsbereich ab, also auch
   die hier benutzten Zwischenwerte 550 und 650.
   Lizenz beider Familien: SIL Open Font License 1.1 (siehe fonts/OFL-*.txt)
   -------------------------------------------------------------------------- */

/* Bricolage Grotesque - latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bricolage Grotesque - latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter - latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Marke */
  --blue-950: #00142b;
  --blue-900: #001a35;
  --blue-800: #002244;
  --blue-700: #003572;
  --blue-600: #00458f;
  --blue-500: #0053b3;
  --blue-400: #0070f3;
  --blue-200: #9dc6ff;
  --blue-100: #dce9fb;
  --blue-050: #eef5fd;

  --orange: #f39200;
  --orange-dark: #d07b00;
  --orange-light: #ffaa33;
  --orange-050: #fff5e6;

  /* Flächen & Text */
  --bg: #f2f7fd;
  --surface: #ffffff;
  --ink: #0a1c31;
  --ink-2: #33506f;
  --ink-3: #6a819b;
  --line: rgba(12, 40, 80, 0.10);

  /* Glas */
  --glass-bg-top: rgba(255, 255, 255, 0.72);
  --glass-bg-bottom: rgba(255, 255, 255, 0.48);
  --glass-blur: 22px;
  --glass-sat: 1.7;

  /* Radien */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-full: 999px;

  /* Schatten */
  --shadow-sm:
    0 1px 2px rgba(10, 28, 49, 0.05),
    0 4px 12px -6px rgba(10, 28, 49, 0.10);
  --shadow-md:
    0 1px 2px rgba(10, 28, 49, 0.05),
    0 10px 24px -12px rgba(10, 28, 49, 0.16),
    0 30px 60px -40px rgba(10, 28, 49, 0.30);
  --shadow-lg:
    0 2px 4px rgba(10, 28, 49, 0.04),
    0 18px 40px -18px rgba(10, 28, 49, 0.20),
    0 50px 90px -50px rgba(10, 28, 49, 0.40);

  /* Typo-Skala (fluid) */
  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
  --t-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --t-1:  clamp(1.05rem, 1.00rem + 0.28vw, 1.22rem);
  --t-2:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --t-3:  clamp(1.55rem, 1.35rem + 1.00vw, 2.20rem);
  --t-4:  clamp(2.00rem, 1.60rem + 2.00vw, 3.20rem);
  --t-5:  clamp(2.60rem, 1.80rem + 3.80vw, 4.75rem);

  /* Rhythmus */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --max-w: 1200px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Basis
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(243, 146, 0, 0.25); color: var(--blue-900); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--blue-050); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 53, 114, 0.22);
  border: 3px solid var(--blue-050);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 53, 114, 0.4); }

/* --------------------------------------------------------------------------
   3. Layout-Helfer
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 880px; }

.section {
  position: relative;
  padding-block: var(--section-y);
  scroll-margin-top: 110px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Hintergrund — Aurora + Korn
   -------------------------------------------------------------------------- */

.aurora {
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  filter: blur(70px);
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}

.aurora__blob--a {
  width: 52vmax; height: 52vmax;
  top: 4%; left: -4%;
  background: radial-gradient(circle at 40% 40%, rgba(107, 172, 255, 0.85), rgba(150, 200, 255, 0.35) 42%, rgba(255, 255, 255, 0) 70%);
  animation: drift-a 34s var(--ease-out) infinite alternate;
}

.aurora__blob--b {
  width: 46vmax; height: 46vmax;
  top: -4%; right: -2%;
  background: radial-gradient(circle at 55% 45%, rgba(255, 196, 118, 0.80), rgba(255, 214, 160, 0.32) 44%, rgba(255, 255, 255, 0) 70%);
  animation: drift-b 40s var(--ease-out) infinite alternate;
}

.aurora__blob--c {
  width: 58vmax; height: 58vmax;
  bottom: 2%; left: 26%;
  background: radial-gradient(circle at 50% 50%, rgba(133, 176, 232, 0.70), rgba(190, 214, 245, 0.30) 46%, rgba(255, 255, 255, 0) 70%);
  animation: drift-c 46s var(--ease-out) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vmax, 8vmax, 0) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-14vmax, 12vmax, 0) scale(0.9); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(10vmax, -10vmax, 0) scale(1.15); }
}

/* Feines Filmkorn — nimmt der Fläche das Digitale */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* Fortschrittsbalken */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue-500), var(--orange));
  z-index: 200;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Glas-Primitive
   -------------------------------------------------------------------------- */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--glass-bg-top), var(--glass-bg-bottom));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    var(--shadow-md);
}

/* Haarfeine Verlaufskante — der eigentliche „Glasrand" */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.35) 32%,
    rgba(0, 53, 114, 0.10) 66%,
    rgba(255, 255, 255, 0.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Lichtreflex, folgt dem Zeiger */
.glass--sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}

.glass--sheen:hover::after { opacity: 1; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(255,255,255,0.92));
  }
}

/* --------------------------------------------------------------------------
   6. Typo-Bausteine
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
}

.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(243, 146, 0, 0));
}

.section-head {
  display: grid;
  gap: 1.15rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.section-head h2 { font-size: var(--t-4); }

.section-head p {
  font-size: var(--t-1);
  color: var(--ink-3);
  font-weight: 300;
}

.lead { font-size: var(--t-1); font-weight: 300; }

.text-accent {
  background: linear-gradient(100deg, var(--orange-light), var(--orange) 55%, var(--orange-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-shift-x: 0px;
  --btn-shift-y: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border: 0;
  border-radius: var(--r-full);
  font-family: 'Inter', sans-serif;
  font-size: var(--t-0);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(var(--btn-shift-x), var(--btn-shift-y), 0);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

/* Wanderndes Glanzlicht */
.btn::after {
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  background: linear-gradient(to bottom right,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 62%);
  transform: rotate(35deg) translate3d(-80%, -80%, 0);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}

.btn:hover::after { transform: rotate(35deg) translate3d(80%, 80%, 0); }

.btn--primary {
  background: linear-gradient(140deg, var(--orange-light), var(--orange) 60%, var(--orange-dark));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 20px -8px rgba(243, 146, 0, 0.75),
    0 20px 40px -24px rgba(180, 100, 0, 0.6);
}

.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 28px -10px rgba(243, 146, 0, 0.8),
    0 28px 56px -28px rgba(180, 100, 0, 0.7);
}

.btn--blue {
  background: linear-gradient(140deg, var(--blue-500), var(--blue-700));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 20px -10px rgba(0, 53, 114, 0.7),
    0 20px 40px -26px rgba(0, 26, 53, 0.6);
}

.btn--blue:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 14px 30px -12px rgba(0, 53, 114, 0.75),
    0 28px 56px -30px rgba(0, 26, 53, 0.7);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  color: var(--blue-700);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--shadow-sm);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--blue-900);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    var(--shadow-md);
}

.btn--sm { padding: 0.7em 1.3em; font-size: var(--t--1); }
.btn--block { width: 100%; }

.btn__icon { width: 1.1em; height: 1.1em; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn:disabled { opacity: 0.65; cursor: not-allowed; }
.btn:disabled::after { display: none; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 650;
  font-size: var(--t--1);
  color: var(--blue-600);
}

.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover { color: var(--orange-dark); }
.link-arrow:hover svg { transform: translate(3px, -3px); }

/* --------------------------------------------------------------------------
   8. Navigation
   -------------------------------------------------------------------------- */

.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  padding: clamp(0.6rem, 1.6vw, 1.1rem) var(--gutter);
  transition: padding 0.5s var(--ease-out);
}

.nav-wrap.is-scrolled { padding-top: 0.5rem; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0.55rem 0.65rem 0.55rem 1.15rem;
  border-radius: var(--r-full);
  --glass-bg-top: rgba(255, 255, 255, 0.62);
  --glass-bg-bottom: rgba(255, 255, 255, 0.42);
  transition:
    background 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.nav-wrap.is-scrolled .nav {
  --glass-bg-top: rgba(255, 255, 255, 0.88);
  --glass-bg-bottom: rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    var(--shadow-lg);
}

/* Das Logo-PNG hat viel transparenten Rand — Box beschneiden, damit die
   Wortmarke optisch die volle Höhe nutzt. */
.nav__logo {
  display: block;
  flex-shrink: 0;
  width: 182px;
  height: 40px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-spring);
}

.nav__logo img {
  width: 182px;
  height: 71px;
  margin-top: -14px;
  object-fit: contain;
}

.nav__logo:hover { transform: scale(1.04); }

@media (max-width: 560px) {
  .nav__logo { width: 146px; height: 33px; }
  .nav__logo img { width: 146px; height: 57px; margin-top: -11px; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  position: relative;
}

.nav__link {
  position: relative;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
  z-index: 1;
}

.nav__link:hover { color: var(--blue-700); }
.nav__link.is-active { color: var(--blue-800); font-weight: 650; }

/* Gleitende Pille hinter dem aktiven Link */
.nav__pill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(222, 236, 253, 0.85));
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px -6px rgba(0, 53, 114, 0.35);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.55s var(--ease-spring),
    width 0.55s var(--ease-spring),
    opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.nav__pill.is-on { opacity: 1; }

.nav__cta { display: none; }

.nav__burger {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(0, 53, 114, 0.12);
  cursor: pointer;
  transition: background 0.3s var(--ease-out);
}

.nav__burger:hover { background: rgba(255, 255, 255, 0.95); }

.nav__bars {
  display: grid;
  gap: 5px;
  place-items: center;
}

.nav__bars .bar {
  display: block;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: var(--blue-700);
  transition: transform 0.45s var(--ease-spring), opacity 0.25s ease;
}

.nav__burger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav__burger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Overlay-Menü */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  align-content: center;
  gap: 0.4rem;
  padding: 6rem var(--gutter) 3rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(224, 237, 252, 0.96));
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  backdrop-filter: blur(34px) saturate(1.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out),
    visibility 0s linear 0.45s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.45rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blue-800);
  opacity: 0;
  transform: translateY(14px);
  transition: background 0.3s var(--ease-out);
}

.mobile-menu.is-open .mobile-menu__link {
  animation: menu-in 0.55s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 90ms);
}

.mobile-menu__link:active { background: rgba(255, 255, 255, 0.7); }

.mobile-menu__link span:last-child {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.1em;
}

.mobile-menu__foot {
  margin-top: 1.5rem;
  opacity: 0;
}

.mobile-menu.is-open .mobile-menu__foot {
  animation: menu-in 0.55s var(--ease-out) forwards;
  animation-delay: 420ms;
}

@keyframes menu-in {
  to { opacity: 1; transform: none; }
}

@media (min-width: 900px) {
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .mobile-menu { display: none; }
}

@media (max-width: 899px) {
  .nav__links { display: none; }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

/* Der Hero ist die Scroll-Strecke, `.hero__stage` das, was man sieht.
   Auf großen Schirmen bleibt die Bühne kleben (sticky) und das
   Hintergrundvideo scrubbt über die zusätzliche Höhe durch. */
.hero {
  position: relative;
  /* Zusätzliche Scroll-Strecke für das Pinning (siehe Media-Query unten) */
  --hero-pin: 200vh;
}

.hero__stage {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Ohne Textinhalt trägt nichts mehr die Höhe – die Bühne setzt sie selbst */
  min-height: 100svh;
  padding-top: clamp(7.5rem, 15vh, 10rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  background: var(--blue-950);
  color: #fff;
}

.hero__shell {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Schriftzug auf dem Video -------------------------------------------- */

/* `--hero-progress` (0 → 1) setzt das Skript aus der Scroll-Position im Hero.
   Am Anfang steht der Schriftzug blass im Bild, mit dem Scrollen wird er
   satter. Der helle Schein hängt an derselben Deckkraft und hebt das
   Dunkelblau vom Video ab — sonst bliebe Dunkel auf Dunkel. */
.hero__wordmark {
  margin: 0;
  text-align: center;
  font-size: clamp(3.4rem, 13vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--blue-800);
  /* Radien in em, damit der Schein bei jeder Größe gleich eng anliegt */
  text-shadow:
    0 0 0.16em rgba(233, 243, 255, 0.80),
    0 0 0.50em rgba(233, 243, 255, 0.50),
    0 0 1.10em rgba(233, 243, 255, 0.30);
  /* Blass → satt. Ohne Skript (oder ohne JS) bleibt es beim vollen Wert. */
  opacity: calc(0.24 + 0.76 * var(--hero-progress, 1));
  transition: opacity 120ms linear;
}

.hero__wordmark-line { display: block; }

/* Der Hinweis sitzt unten links in der Bühne — nicht mittig am Schriftzug */
.hero__stage .scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 3.5vh, 2.5rem);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__wordmark { transition: none; }
}

/* --- Hintergrundvideo ---------------------------------------------------- */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  /* Leichte Gradierung Richtung Markenblau, nimmt dem Material das Grelle */
  filter: saturate(0.88) contrast(1.06) brightness(0.94);
  /* Sanftes Aufblenden, sobald das erste Bild dekodiert ist */
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}

.hero.is-video-ready .hero__video { opacity: 1; }

/* Leichter Schleier: nur so viel, dass Header und Scroll-Hinweis lesbar
   bleiben und die Kanten zum Markenblau weich auslaufen. Der Drohnenflug
   selbst bleibt offen — hier steht kein Text mehr. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%,
      rgba(0, 20, 43, 0) 0%,
      rgba(0, 20, 43, 0.16) 62%,
      rgba(0, 20, 43, 0.48) 100%),
    linear-gradient(180deg,
      rgba(0, 14, 30, 0.52) 0%,
      rgba(0, 14, 30, 0.10) 26%,
      rgba(0, 14, 30, 0.14) 62%,
      rgba(0, 14, 30, 0.58) 100%);
}

/* --- Pinning: Bühne steht, Video läuft ----------------------------------- */

@media (min-width: 1000px) and (min-height: 600px) {
  /* Die Scrub-Strecke muss echte Höhe sein — in reinem Padding kann die
     Bühne nicht kleben, weil das Containing Block dort endet. */
  .hero { height: calc(100svh + var(--hero-pin)); }

  .hero__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-top: clamp(5.5rem, 11vh, 8rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  /* Höhenabhängig deckeln, damit beide Zeilen auch auf 600–800 px passen */
  .hero__stage .hero__wordmark { font-size: min(13vw, 22vh); }
}

/* Kein Pinning und kein Scrubbing, wenn Bewegung unerwünscht ist */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__stage { position: static; height: auto; }
  .hero__stage .scroll-cue { position: static; margin-top: clamp(2rem, 5vw, 3rem); }
}

/* --- Heller Text auf dunklem Hero ---------------------------------------- */

.hero__stage .chip {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}

.hero__stage .hero__title { color: #fff; }

.hero__stage .hero__text {
  color: rgba(255, 255, 255, 0.80);
  text-shadow: 0 1px 24px rgba(0, 14, 30, 0.5);
}

.hero__stage .stat__num { color: #fff; }
.hero__stage .stat__label { color: rgba(255, 255, 255, 0.62); }
.hero__stage .hero__meta { border-top-color: rgba(255, 255, 255, 0.18); }

.hero__stage .scroll-cue { color: rgba(255, 255, 255, 0.65); }
.hero__stage .scroll-cue__rail { background: rgba(255, 255, 255, 0.22); }

/* Geister-Button hell ausführen, sonst verschwindet er im Bild */
.hero__stage .btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero__stage .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Die Karte braucht auf dem Video eine klare Kante */
.hero__stage .hero-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 30px 70px -30px rgba(0, 8, 20, 0.9),
    0 60px 120px -60px rgba(0, 8, 20, 0.8);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1.05em;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--shadow-sm);
  font-size: var(--t--1);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-700);
}

.chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(243, 146, 0, 0.6);
  animation: ping 2.6s var(--ease-out) infinite;
}

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(243, 146, 0, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(243, 146, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 146, 0, 0); }
}

.hero__title {
  margin-block: 1.5rem 1.4rem;
  font-size: var(--t-5);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

/* Zeilenweiser Reveal hinter einer Maske */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.reveal-line > span {
  display: block;
  transform: translateY(110%);
  animation: line-up 1s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}

@keyframes line-up {
  to { transform: none; }
}

.hero__text {
  max-width: 36rem;
  font-size: var(--t-1);
  font-weight: 300;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.2rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

.stat__num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--t-3);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--blue-700);
}

.stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ink-3);
}

/* Hero-Visual */
.hero__visual {
  position: relative;
  perspective: 1400px;
  padding-bottom: 2.25rem;
}

.hero-card {
  position: relative;
  padding: 1.05rem;
  border-radius: var(--r-xl);
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, 0, 0);
  transition: transform 0.6s var(--ease-out);
}

.hero-card__inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 10px);
  padding: clamp(1.4rem, 3vw, 2rem);
  padding-bottom: clamp(2.6rem, 5vw, 3.4rem);
  min-height: clamp(19rem, 34vw, 24rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(0, 112, 243, 0.85), rgba(0, 112, 243, 0) 60%),
    linear-gradient(155deg, var(--blue-600), var(--blue-800) 70%, var(--blue-950));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Rotierender Lichtkegel im Panel — additiv, damit er aufhellt statt zu trüben */
.hero-card__inner::before {
  content: '';
  position: absolute;
  inset: -55%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 190, 90, 0.55) 55deg,
    rgba(160, 210, 255, 0.45) 120deg,
    rgba(255, 255, 255, 0) 200deg,
    rgba(255, 255, 255, 0) 360deg);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: spin 26s linear infinite;
  pointer-events: none;
}

/* Feines Raster für Textur */
.hero-card__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(90% 80% at 70% 20%, #000, transparent 75%);
  mask-image: radial-gradient(90% 80% at 70% 20%, #000, transparent 75%);
  pointer-events: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.hero-card__top,
.hero-card__body { position: relative; z-index: 1; }

.hero-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tag-glass {
  padding: 0.4em 0.9em;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.05em;
}

.tag-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--orange-light);
}

.hero-card__body h3 {
  font-size: var(--t-2);
  color: #fff;
  margin-bottom: 0.6rem;
}

.hero-card__body p {
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  max-width: 22rem;
}

/* Schwebendes Alters-Badge */
.hero-badge {
  position: absolute;
  right: -0.75rem;
  bottom: -1.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.35rem;
  border-radius: var(--r-md);
  color: #fff;
  background: linear-gradient(140deg, var(--orange-light), var(--orange) 65%, var(--orange-dark));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 30px -12px rgba(243, 146, 0, 0.8),
    0 30px 60px -34px rgba(120, 70, 0, 0.7);
  animation: float 6s ease-in-out infinite;
  z-index: 2;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.hero-badge strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero-badge span {
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* Scroll-Hinweis */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  font-size: var(--t--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.scroll-cue__rail {
  position: relative;
  width: 54px; height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.scroll-cue__rail::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 2px;
  background: var(--orange);
  animation: cue 2.4s var(--ease-out) infinite;
}

@keyframes cue {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(160%); }
  100% { transform: translateX(160%); }
}

/* --------------------------------------------------------------------------
   10. Ortsteile-Laufband
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  user-select: none;
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  to { transform: translateX(-100%); }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgba(0, 53, 114, 0.45);
}

.marquee__item::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   11. Über uns
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  justify-items: center;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

/* Ohne Porträt daneben trägt der Text die Spalte allein — auf Lesebreite
   begrenzen, sonst laufen die Zeilen über die volle Sektionsbreite. */
.about__grid > .prose { max-width: 62ch; }

.portrait {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(0, 112, 243, 0.35), rgba(0, 112, 243, 0) 70%),
    linear-gradient(170deg, var(--blue-100), var(--blue-050) 45%, #ffffff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    var(--shadow-lg);
  display: grid;
  place-items: center;
  transition: transform 0.6s var(--ease-out);
}

.about__grid:hover .portrait { transform: translateY(-6px); }

.portrait__initials {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(4.5rem, 12vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(0, 53, 114, 0.18);
  transition: transform 0.8s var(--ease-out), color 0.5s ease;
}

.about__grid:hover .portrait__initials {
  transform: scale(1.06);
  color: rgba(0, 53, 114, 0.2);
}

.portrait__plate {
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.9rem;
  padding: 0.95rem 1.2rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    var(--shadow-sm);
}

.portrait__plate small {
  display: block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-dark);
}

.portrait__plate strong {
  display: block;
  margin-top: 0.15rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blue-800);
}

.prose { display: grid; gap: 1.2rem; }
.prose h3 { font-size: var(--t-3); }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--blue-700); font-weight: 650; }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.05em;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--blue-700);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out);
}

.pill:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    var(--shadow-sm);
}

.pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* --------------------------------------------------------------------------
   12. Themen-Karten
   -------------------------------------------------------------------------- */

.grid-cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Sechs Themen sollen 3 × 2 stehen, nicht 4 + 2 */
@media (min-width: 900px) {
  .grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.topic {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    transform 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}

.topic:hover {
  transform: translateY(-7px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    var(--shadow-lg);
}

/* Farbschimmer, der beim Hover aufsteigt */
.topic__glow {
  position: absolute;
  left: 50%; bottom: -60%;
  width: 130%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 112, 243, 0.16), rgba(0, 112, 243, 0) 65%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}

.topic:hover .topic__glow {
  opacity: 1;
  transform: translateX(-50%) translateY(-18%);
}

.topic:nth-child(even) .topic__glow {
  background: radial-gradient(circle, rgba(243, 146, 0, 0.16), rgba(243, 146, 0, 0) 65%);
}

.topic__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 15px;
  color: var(--blue-600);
  background: linear-gradient(160deg, #fff, var(--blue-050));
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.10),
    0 4px 10px -6px rgba(0, 53, 114, 0.4);
  transition:
    transform 0.5s var(--ease-spring),
    color 0.4s ease,
    background 0.4s ease;
}

.topic__icon svg { width: 23px; height: 23px; }

.topic:hover .topic__icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  color: #fff;
  background: linear-gradient(160deg, var(--blue-500), var(--blue-700));
}

.topic h4 {
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--blue-800);
}

.topic p { font-size: 0.92rem; color: var(--ink-3); }

.topic__no {
  position: absolute;
  top: 1.1rem; right: 1.3rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(0, 53, 114, 0.07);
  transition: color 0.4s ease;
}

.topic:hover .topic__no { color: rgba(243, 146, 0, 0.3); }

/* --------------------------------------------------------------------------
   13. News-Karten
   -------------------------------------------------------------------------- */

.news {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.news:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    var(--shadow-lg);
}

.news__cover {
  position: relative;
  height: 11rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
}

.news__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.news__cover--warm { background: linear-gradient(135deg, #ffb347, var(--orange) 45%, #c96a00); }
.news__cover--deep { background: linear-gradient(135deg, var(--blue-600), var(--blue-900)); }
.news__cover--fresh { background: linear-gradient(135deg, var(--blue-400), #0e9f9f); }

.news__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.news:hover .news__cover img { transform: scale(1.06); }

/* Damit die Kategorie auch auf hellen Motiven lesbar bleibt */
.news__cover::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 20, 43, 0.55), rgba(0, 20, 43, 0));
  pointer-events: none;
}

.news__cover svg {
  width: 68px; height: 68px;
  opacity: 0.32;
  transition: transform 0.7s var(--ease-out), opacity 0.5s ease;
}

.news:hover .news__cover svg { transform: scale(1.15) rotate(5deg); opacity: 0.45; }

/* Die ganze Karte öffnet den Beitrag */
.news { cursor: pointer; }

.news__cat {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.35em 0.85em;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  z-index: 1;
}

/* Kennzeichnung der KI-generierten Symbolbilder. Das Impressum sagt zu, dass
   die Bilder gekennzeichnet sind - dann muss der Hinweis auch auf der Karte
   stehen und nicht nur im geoeffneten Beitrag. Die Motive sind fotorealistisch
   und wirken wie echte Aufnahmen einer JU-Veranstaltung; genau dafuer verlangt
   Art. 50 Abs. 4 KI-VO seit dem 02.08.2026 einen Hinweis. */
.news__ai {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 1;
  padding: 0.25em 0.62em;
  border-radius: var(--r-full);
  background: rgba(0, 20, 43, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.news__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
}

.news__date {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.news__body h4 { font-size: var(--t-1); line-height: 1.25; }

.news__body h4 a {
  color: var(--blue-800);
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease-out), color 0.3s ease;
}

.news:hover h4 a { background-size: 100% 2px; }

.news__excerpt {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ink-3);
}

.news__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.news__more svg { width: 15px; height: 15px; transition: transform 0.4s var(--ease-out); }
.news:hover .news__more svg { transform: translateX(5px); }

/* --- Volltexte & Leseansicht --------------------------------------------- */

/* Die Quelltexte bleiben im DOM (Suchmaschinen), aber unsichtbar */
.article-store { display: none; }

.reader {
  width: min(46rem, 100vw - 2rem);
  max-height: min(88svh, 60rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.reader::backdrop {
  background: rgba(0, 20, 43, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.reader[open] { animation: reader-in 0.45s var(--ease-out); }

@keyframes reader-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
  .reader[open] { animation: none; }
}

.reader__scroll {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reader__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 20, 43, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.reader__close:hover { background: rgba(0, 20, 43, 0.7); transform: rotate(90deg); }
.reader__close svg { width: 17px; height: 17px; }

.reader__figure { margin: 0; }

.reader__figure img {
  width: 100%;
  height: clamp(11rem, 30vw, 17rem);
  object-fit: cover;
}

.reader__figure figcaption {
  padding: 0.5rem clamp(1.4rem, 4vw, 2.6rem) 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.reader__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem clamp(1.4rem, 4vw, 2.6rem) 0;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reader__cat {
  padding: 0.35em 0.85em;
  border-radius: var(--r-full);
  background: var(--orange-050);
  box-shadow: inset 0 0 0 1px rgba(243, 146, 0, 0.28);
  color: var(--orange-dark);
}

.reader__date { color: var(--ink-3); }

/* Fließtext-Typografie der Beiträge */
.article {
  padding: 1rem clamp(1.4rem, 4vw, 2.6rem) clamp(1.8rem, 4vw, 2.6rem);
}

.article h3 {
  font-size: var(--t-3);
  margin-bottom: 1rem;
}

.article h4 {
  font-size: var(--t-1);
  margin-top: 1.9rem;
  margin-bottom: 0.6rem;
  color: var(--blue-800);
}

.article p { margin-bottom: 0.95rem; }
.article p:last-child { margin-bottom: 0; }

.article__lead {
  font-size: var(--t-1);
  font-weight: 300;
  color: var(--ink-2);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
}

.article ul {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.article li {
  position: relative;
  padding-left: 1.4rem;
}

.article li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.article a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 69, 143, 0.35);
}

.article a:hover { color: var(--orange-dark); }

/* --------------------------------------------------------------------------
   14. Kontakt & Formular
   -------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; }
}

.steps {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border-radius: var(--r-lg);
  display: grid;
  gap: 1.1rem;
}

.steps h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-1);
  color: var(--blue-700);
}

.steps h4 svg { width: 20px; height: 20px; flex-shrink: 0; }

.steps ol { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; counter-reset: s; }

.steps li {
  display: flex;
  gap: 0.85rem;
  font-size: 0.92rem;
  color: var(--ink-2);
  counter-increment: s;
}

.steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--orange-light), var(--orange));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 10px -5px rgba(243, 146, 0, 0.9);
}

.form-card { padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: var(--r-xl); }
.form-card h3 { font-size: var(--t-3); margin-bottom: 1.6rem; }

.form { display: grid; gap: 1.25rem; }

.form__row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 620px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.12),
    inset 0 1px 2px rgba(10, 28, 49, 0.04);
  transition: box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); opacity: 0.7; }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  box-shadow:
    inset 0 0 0 1.5px var(--blue-400),
    0 0 0 4px rgba(0, 112, 243, 0.12);
}

.check {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 53, 114, 0.09);
  cursor: pointer;
  transition: background 0.3s var(--ease-out);
}

.check:hover { background: rgba(255, 255, 255, 0.85); }

.check input {
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 0.15rem;
  accent-color: var(--blue-500);
  cursor: pointer;
}

.check__text { font-size: 0.86rem; font-weight: 500; color: var(--ink); }
.check__hint { display: block; margin-top: 0.3rem; font-size: 0.76rem; font-weight: 400; color: var(--ink-3); }

.alert {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 500;
  animation: pop 0.45s var(--ease-spring);
}

.alert.is-shown { display: flex; }
.alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }

.alert--ok {
  background: rgba(16, 185, 129, 0.10);
  color: #06694c;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.alert--bad {
  background: rgba(244, 63, 94, 0.09);
  color: #9f1239;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.28);
}

@keyframes pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.spinner {
  width: 17px; height: 17px;
  animation: spin 0.9s linear infinite;
}

.spinner[hidden] { display: none; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: 0.8rem; }

.faq__item {
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.faq__item.is-open {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    var(--shadow-md);
}

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem clamp(1.1rem, 2.5vw, 1.6rem);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-800);
  transition: color 0.3s ease;
}

.faq__btn:hover { color: var(--blue-500); }

.faq__mark {
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff, var(--blue-050));
  box-shadow: inset 0 0 0 1px rgba(0, 53, 114, 0.12);
  transition: background 0.4s ease, transform 0.5s var(--ease-spring);
}

.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  border-radius: 2px;
  background: var(--blue-600);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease-spring), background 0.4s ease;
}

.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item.is-open .faq__mark {
  background: linear-gradient(160deg, var(--orange-light), var(--orange));
  transform: rotate(180deg);
}

.faq__item.is-open .faq__mark::before,
.faq__item.is-open .faq__mark::after { background: #fff; }
.faq__item.is-open .faq__mark::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}

.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

.faq__panel > div { overflow: hidden; }

.faq__panel p {
  padding: 0 clamp(1.1rem, 2.5vw, 1.6rem) 1.5rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s var(--ease-out) 0.1s;
}

.faq__item.is-open .faq__panel p { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  color: rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(0, 112, 243, 0.28), rgba(0, 112, 243, 0) 55%),
    radial-gradient(70% 100% at 92% 10%, rgba(243, 146, 0, 0.16), rgba(243, 146, 0, 0) 55%),
    linear-gradient(170deg, var(--blue-900), var(--blue-950));
  border-radius: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem) 0 0;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .footer__grid { grid-template-columns: 1.6fr 0.85fr 1.1fr 1.1fr; }
}

.footer__logo {
  width: 200px;
  height: 44px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.footer__logo img { width: 200px; height: 78px; margin-top: -16px; }

.footer p { font-size: 0.9rem; font-weight: 300; line-height: 1.7; }

.footer__note {
  margin-top: 1.4rem;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 2px solid var(--orange);
  font-size: 0.85rem;
}

.footer a { color: rgba(255, 255, 255, 0.72); }
.footer a:hover { color: #fff; }
.footer__note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.footer__note a:hover { color: var(--orange-light); }

.footer h4 {
  margin-bottom: 1.1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
}

.footer__nav { display: grid; gap: 0.6rem; font-size: 0.9rem; }

.footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  transition: transform 0.35s var(--ease-out), color 0.3s ease;
}

.footer__nav a::before {
  content: '';
  width: 0; height: 1px;
  background: var(--orange);
  transition: width 0.35s var(--ease-out);
}

.footer__nav a:hover { transform: translateX(4px); }
.footer__nav a:hover::before { width: 12px; }

.bank {
  padding: 1.15rem 1.3rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.bank strong {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.bank dl { display: grid; gap: 0.35rem; margin: 0; font-size: 0.78rem; }
.bank div { display: flex; gap: 0.5rem; }
.bank dt { font-weight: 650; color: rgba(255, 255, 255, 0.8); margin: 0; }
.bank dd { margin: 0; font-variant-numeric: tabular-nums; }

.clock {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  padding: 1.35rem 1rem;
  border-radius: var(--r-md);
  text-align: center;
  background: linear-gradient(170deg, rgba(0, 12, 28, 0.85), rgba(0, 20, 43, 0.65));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 40px -14px rgba(243, 146, 0, 0.5);
}

.clock__time {
  font-family: 'Bricolage Grotesque', ui-monospace, monospace;
  font-size: clamp(1.75rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
  text-shadow: 0 0 22px rgba(243, 146, 0, 0.55);
}

.clock__date {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   17. Zurück nach oben
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 100;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--blue-700);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(0, 53, 114, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.5s var(--ease-spring),
    visibility 0s linear 0.4s,
    background 0.3s ease;
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.to-top:hover { background: #fff; transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   18. Scroll-Reveals
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.85s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: translateY(20px) scale(0.96); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   19. Responsive Feinschliff
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
  .hero__visual { max-width: 30rem; margin-inline: auto; width: 100%; }
  .hero-card { transform: none !important; }
}

@media (max-width: 640px) {
  :root { --glass-blur: 16px; }

  /* Der Abstand zur Navigation gehört auf die Bühne — auf `.hero` würde er
     einen hellen Streifen über dem Video erzeugen. */
  .hero__stage { padding-top: 7.5rem; }
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .hero__actions .btn { width: 100%; }
  .hero__meta { gap: 1.2rem 1.8rem; }
  .hero-badge {
    right: 50%;
    transform: translateX(50%);
    animation: none;
  }
  .hero__visual { padding-bottom: 3rem; }
  .news__cover { height: 9.5rem; }
  /* Der Platzhalter braucht auf dem Handy nicht den halben Bildschirm */
  .portrait { width: min(100%, 16rem); aspect-ratio: 1 / 1.05; }
  .footer__bar {
    justify-content: center;
    text-align: center;
    /* Platz, damit der Nach-oben-Button die letzte Zeile nicht verdeckt */
    padding-bottom: 3.5rem;
  }
  .footer__bar nav { justify-content: center; }
}

/* Touch-Geräte: kein Tilt, keine Hover-Sheen-Kosten */
@media (hover: none) {
  .glass--sheen::after { display: none; }
  .topic:hover, .news:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   20. Bewegung reduzieren
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .aurora { animation: none; }
  .marquee__track { animation: none; }
  .hero-card { transform: none !important; }
}

/* --------------------------------------------------------------------------
   21. Druck
   -------------------------------------------------------------------------- */

@media print {
  .nav-wrap, .mobile-menu, .to-top, .aurora, .grain, .progress, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .glass { box-shadow: none; border: 1px solid #ccc; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   22. Kontaktformular: Spamschutz & Datenschutzhinweis
   -------------------------------------------------------------------------- */

/* Honeypot. Bewusst nicht display:none - manche Bots ueberspringen das.
   Aus dem sichtbaren Bereich geschoben und aus der Tab-Reihenfolge genommen. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__privacy {
  margin: 0 0 1.25rem;
  font-size: var(--t--1);
  line-height: 1.55;
  color: var(--ink-3);
}

.form__privacy a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__privacy a:hover { color: var(--orange-dark); }

/* --------------------------------------------------------------------------
   23. Rechtsseiten (Impressum, Datenschutz)

   Nutzen bewusst die vorhandene .article-Prosa aus dem Neuigkeiten-Reader,
   damit Typografie und Abstaende identisch bleiben.
   -------------------------------------------------------------------------- */

.legal-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}

/* Gleiche Zuschnitt-Technik wie .nav__logo auf der Startseite: das PNG hat
   oben und unten Leerraum, der hier weggeschnitten wird. */
.legal-top__logo {
  display: block;
  flex-shrink: 0;
  width: 182px;
  height: 40px;
  overflow: hidden;
}

.legal-top__logo img {
  width: 182px;
  height: 71px;
  margin-top: -14px;
  object-fit: contain;
}

.legal-top__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--blue-600);
  white-space: nowrap;
}

.legal-top__back:hover { color: var(--orange-dark); }
.legal-top__back svg { width: 1em; height: 1em; }

.legal {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.legal__head {
  max-width: 62ch;
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.legal__head h1 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: var(--t-4);
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.legal__head p {
  color: var(--ink-3);
  font-size: var(--t--1);
}

.legal__body {
  max-width: 78ch;
}

/* .article bringt die Prosa mit, hier nur die Ergaenzungen fuer laengere Texte. */
.legal__body .article h2 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: var(--t-3);
  line-height: 1.2;
  margin: 2.4rem 0 0.9rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}

/* .article h3 erbt --t-3 aus dem Neuigkeiten-Reader und waere hier groesser
   als h2. Auf den Rechtsseiten ist h3 eine Unterstufe, also runterstufen. */
.legal__body .article h3 {
  font-size: var(--t-1);
  margin: 1.9rem 0 0.5rem;
  color: var(--blue-800);
}

.legal__body .article h4 {
  font-size: var(--t-0);
  margin: 1.5rem 0 0.4rem;
}

.legal__body .article h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal__body .article dl {
  margin: 0 0 1rem;
}

.legal__body .article dt {
  font-weight: 600;
  color: var(--ink);
}

.legal__body .article dd {
  margin: 0 0 0.6rem;
  color: var(--ink-2);
}

.legal__note {
  margin-top: 2.4rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--orange);
  background: var(--orange-050);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t--1);
  color: var(--ink-2);
}
/* Widerspruchsrecht nach Art. 21 Abs. 4 DSGVO: muss "in einer verstaendlichen
   und von anderen Informationen getrennten Form" dargestellt werden. Deshalb
   ein eigener, abgesetzter Kasten statt Fliesstext. */
.legal__callout {
  margin: 1.2rem 0 0.4rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--blue-200);
  border-left: 4px solid var(--blue-500);
  background: var(--blue-050);
  border-radius: var(--r-sm);
}

.legal__callout p { margin-bottom: 0.85rem; }
.legal__callout p:last-child { margin-bottom: 0; }

.legal__callout-head {
  font-weight: 700;
  color: var(--blue-800);
  letter-spacing: -0.01em;
}


@media (max-width: 560px) {
  .legal-top__logo { width: 146px; height: 33px; }
  .legal-top__logo img { width: 146px; height: 57px; margin-top: -11px; }
  .legal-top__back span { display: none; }
}

/* Footer auf den Rechtsseiten: nur die Leiste, ohne die Spalten darueber. */
.footer__bar--solo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.footer__bar a { color: rgba(255, 255, 255, 0.62); }
.footer__bar a:hover { color: var(--orange-light); }