/* Startseite | Mulaga City - gleiche Familie wie das Regelwerk:
   Nacht-Petrol, Verlauf Blau -> Türkis -> Mint, Baloo 2, runde Formen,
   Palme als Wasserzeichen. Kein Blur, kein Strich über Karten. */

:root {
  --blau:#3FB8F5; --tuerkis:#6FE6D8; --mint:#CFF6B2;
  --nacht:#0b1f2e; --tief:#081723; --grund:#061019;
  --flaeche:rgba(9,30,44,.88); --feld:rgba(4,14,22,.7);
  --rand:rgba(111,230,216,.16); --rand-stark:rgba(111,230,216,.4);
  --text:#effbff; --leise:#9cc0cf; --blass:#7d9fae; --dunkel:#062236;
  --verlauf:linear-gradient(90deg,var(--blau),var(--tuerkis) 55%,var(--mint));
  --top:80px;
  --breite:1240px;
  --font:"Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 16px); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font: 500 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: radial-gradient(ellipse at 15% -5%, #1f3a4a 0%, var(--nacht) 40%, var(--grund) 100%) fixed;
}
body::after {
  content: ""; position: fixed; right: -90px; bottom: -100px; width: 520px; height: 520px; z-index: 0; pointer-events: none;
  background: url("/startseite-assets/palme.png") right bottom / contain no-repeat; opacity: .06; transform: scaleX(-1) rotate(-6deg);
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
::selection { background: rgba(111,230,216,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--tuerkis); outline-offset: 3px; border-radius: 6px; }

.skip { position: fixed; top: -80px; left: 16px; z-index: 60; padding: 10px 18px; border-radius: 999px; background: var(--verlauf); color: var(--dunkel); font-weight: 800; }
.skip:focus { top: 12px; }

.verlauf-text { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: 16px; font-weight: 700; color: var(--tuerkis); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: 999px;
  font-size: 17px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms, background 140ms;
}
.knopf svg { width: 22px; height: 22px; fill: currentColor; }
.knopf-voll {
  background: var(--verlauf); color: var(--dunkel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 .6rem 1.6rem rgba(63,184,245,.28);
}
.knopf-voll:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 .9rem 2rem rgba(63,184,245,.38); }
.knopf-rand { background: var(--feld); border: 1px solid var(--rand-stark); color: var(--text); }
.knopf-rand:hover { border-color: var(--tuerkis); background: rgba(111,230,216,.08); }
.knopf-klein { height: 42px; padding: 0 20px; font-size: 15px; }

/* ---------- Kopf ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  height: var(--top); padding: 0 max(24px, calc((100vw - var(--breite)) / 2));
  background: rgba(6,16,25,.92); border-bottom: 1px solid var(--rand);
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 .3rem .8rem rgba(30,143,224,.4)); }
.brand strong { font-size: 22px; font-weight: 800; line-height: 1; }

.nav { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(4,14,22,.6); border: 1px solid var(--rand); }
.nav-item {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 16px; font-weight: 600; color: var(--leise); white-space: nowrap; transition: color 120ms, background 120ms;
}
.nav-item:hover { color: var(--text); background: rgba(111,230,216,.07); }
.nav-item.aktiv { background: var(--verlauf); color: var(--dunkel); font-weight: 800; }

.topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.live {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px;
  background: rgba(4,14,22,.6); border: 1px solid var(--rand); font-size: 15px; color: var(--leise); white-space: nowrap;
}
.live strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(207,246,178,.6); animation: puls 2.2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(207,246,178,.55); } 70% { box-shadow: 0 0 0 9px rgba(207,246,178,0); } 100% { box-shadow: 0 0 0 0 rgba(207,246,178,0); } }

.menue-knopf { display: none; width: 46px; height: 42px; border-radius: 999px; border: 1px solid var(--rand); background: rgba(4,14,22,.6); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.menue-knopf span { width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 160ms; }
.menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Inhalt ---------- */
main { position: relative; z-index: 1; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* Bühne */
.buehne {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center;
  padding: 72px 0 84px;
}
.buehne::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 30px; height: 260px; opacity: .45; pointer-events: none; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%233FB8F5' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%233FB8F5'/%3E%3Cstop offset='.6' stop-color='%236FE6D8'/%3E%3Cstop offset='.9' stop-color='%23CFF6B2'/%3E%3Cstop offset='1' stop-color='%23CFF6B2' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-20 230 C 300 40, 620 300, 940 150 S 1450 20, 1640 120' fill='none' stroke='url(%23b)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M-20 252 C 320 70, 640 320, 960 172 S 1460 50, 1640 142' fill='none' stroke='url(%23b)' stroke-width='2' stroke-opacity='.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.buehne h1 { margin-top: 6px; font-size: clamp(42px, 5.4vw, 70px); font-weight: 800; line-height: 1.02; letter-spacing: -.015em; }
.buehne h1 .verlauf-text { display: inline-block; }
.intro { margin-top: 18px; max-width: 560px; color: var(--leise); font-size: 19px; line-height: 1.55; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Release-Countdown */
.release {
  margin-top: 28px; max-width: 560px; padding: 18px 20px 20px; border-radius: 28px;
  background: linear-gradient(110deg, rgba(63,184,245,.18), rgba(111,230,216,.08) 50%, rgba(207,246,178,.12)), var(--tief);
  border: 1px solid var(--rand-stark);
}
.release-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16px; font-weight: 700; color: #cfe7f1; }
.release-marke { font-size: 13px; font-weight: 800; padding: 1px 12px; border-radius: 999px; background: var(--verlauf); color: var(--dunkel); }
.release-uhr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.release-uhr div {
  display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; border-radius: 20px;
  background: rgba(4,14,22,.75); border: 1px solid var(--rand);
}
.release-uhr strong {
  font-size: 40px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.release-uhr span { font-size: 13px; font-weight: 700; color: var(--blass); }
.release-live { margin-top: 12px; font-size: 22px; font-weight: 800; }
.release.ist-live .release-uhr { display: none; }

.fakten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.fakten li {
  display: flex; flex-direction: column; padding: 12px 20px; border-radius: 20px;
  background: var(--feld); border: 1px solid var(--rand); line-height: 1.25;
}
.fakten strong { font-size: 17px; font-weight: 800; }
.fakten span { font-size: 14px; color: var(--blass); }

.buehne-bild {
  position: relative; border-radius: 34px; padding: 8px;
  background: linear-gradient(135deg, rgba(63,184,245,.55), rgba(111,230,216,.25) 45%, rgba(207,246,178,.5));
  box-shadow: 0 2rem 4rem rgba(0,0,0,.45), 0 0 5rem rgba(63,184,245,.18);
  transform: rotate(1.4deg);
}
.buehne-bild img { width: 100%; border-radius: 27px; aspect-ratio: 16 / 9; object-fit: cover; }
.buehne-bild::after {
  content: ""; position: absolute; inset: 8px; border-radius: 27px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Abschnitte */
.abschnitt { padding: 64px 0; }
.abschnitt-kopf { margin-bottom: 34px; }
.abschnitt-kopf h2, .band h2 { display: flex; align-items: center; gap: 14px; margin-top: 2px; font-size: clamp(32px, 3.6vw, 44px); font-weight: 800; line-height: 1.1; }
.abschnitt-kopf h2::before { content: ""; flex: none; width: 7px; height: 34px; border-radius: 7px; background: linear-gradient(180deg, var(--mint), var(--blau)); }
.abschnitt-intro { margin-top: 10px; max-width: 640px; color: var(--leise); font-size: 18px; }

/* Wer wir sind */
.wir { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.wir-text { display: grid; gap: 16px; font-size: 18px; color: #cfe7f1; }
.wir-text p:first-child { font-size: 21px; color: var(--text); font-weight: 600; line-height: 1.5; }
.werte { display: grid; gap: 12px; }
.wert {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(127,227,240,.06), rgba(255,255,255,.02) 50%), var(--flaeche);
  border: 1px solid var(--rand); transition: border-color 140ms, transform 140ms;
}
.wert:hover { border-color: rgba(111,230,216,.34); transform: translateX(4px); }
.wert-zeichen { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--verlauf); }
.wert-zeichen svg { width: 26px; height: 26px; fill: none; stroke: var(--dunkel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wert h3 { font-size: 20px; font-weight: 800; line-height: 1.25; }
.wert p { margin-top: 2px; color: var(--leise); font-size: 16px; line-height: 1.5; }

/* Die Stadt: Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kachel {
  position: relative; overflow: hidden; padding: 24px 24px 26px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(127,227,240,.06), rgba(255,255,255,.02) 50%), var(--flaeche);
  border: 1px solid var(--rand); transition: border-color 140ms, transform 140ms;
}
.kachel:hover { border-color: rgba(111,230,216,.38); transform: translateY(-3px); }
.kachel-gross { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
.kachel-gross::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/startseite-assets/city.webp") center 18% / 112% auto no-repeat; opacity: .5;
  filter: hue-rotate(-75deg) saturate(.85);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 62%);
}
.kachel-gross > * { position: relative; z-index: 1; }
.kachel-gross h3 { font-size: 32px; }
.kachel-gross p { font-size: 17px; max-width: 460px; }
.kachel-breit { grid-column: span 2; }

/* Kampf: ganze Breite, eigener Verlauf + Fadenkreuz */
.kachel-kampf {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 30px 34px; border-color: var(--rand-stark);
  background: linear-gradient(110deg, rgba(63,184,245,.2), rgba(111,230,216,.1) 45%, rgba(207,246,178,.12)), var(--tief);
}
.kachel-kampf::before {
  content: ""; position: absolute; right: -40px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); pointer-events: none; opacity: .13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%236FE6D8' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%236FE6D8'/%3E%3Cpath d='M50 4v20M50 76v20M4 50h20M76 50h20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kachel-kampf > * { position: relative; z-index: 1; }
.kampf-text { max-width: 620px; }
.kachel-kampf .kachel-nr { background: var(--verlauf); color: var(--dunkel); }
.kachel-kampf h3 { font-size: 30px; }
.kachel-kampf p { font-size: 17px; color: #cfe7f1; }
.kampf-marken { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 380px; }
.kampf-marken li {
  height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px;
  background: rgba(4,14,22,.7); border: 1px solid var(--rand-stark); font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.kampf-marken li:first-child { background: var(--verlauf); color: var(--dunkel); border-color: transparent; }
.kachel-nr {
  align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 800; background: rgba(63,184,245,.16); color: #bfeff8; font-variant-numeric: tabular-nums;
}
.kachel h3 { margin-top: 14px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.kachel p { margin-top: 6px; color: var(--leise); font-size: 16px; line-height: 1.5; }

/* Einstieg */
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.schritt {
  position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 30px;
  background: var(--flaeche); border: 1px solid var(--rand);
}
.schritt-zahl {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px;
  background: var(--verlauf); color: var(--dunkel); font-size: 30px; font-weight: 800; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 .6rem 1.4rem rgba(63,184,245,.25);
}
.schritt:not(:last-child)::after {
  content: ""; position: absolute; top: 56px; right: -22px; width: 30px; height: 30px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FE6D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 22px no-repeat, var(--tief);
  border: 1px solid var(--rand); border-radius: 50%;
}
.schritt h3 { margin-top: 18px; font-size: 23px; font-weight: 800; }
.schritt p { margin-top: 6px; color: var(--leise); font-size: 16px; line-height: 1.55; }
.schritt em { font-style: normal; font-weight: 700; color: #bfeff8; }
.schritt-link {
  align-self: flex-start; margin-top: auto; padding-top: 18px; font-weight: 800; font-size: 16px; color: var(--tuerkis);
  display: inline-flex; align-items: center; gap: 6px;
}
.schritt-link::after { content: "→"; transition: transform 140ms; }
.schritt-link:hover::after { transform: translateX(4px); }

.visum {
  display: flex; gap: 16px; align-items: baseline; margin-top: 16px; padding: 16px 22px;
  border-radius: 22px; background: rgba(63,184,245,.08); border: 1px solid rgba(63,184,245,.28);
}
.visum-marke { flex: none; font-size: 13px; font-weight: 800; padding: 1px 12px; border-radius: 999px; background: var(--verlauf); color: var(--dunkel); }
.visum p { font-size: 16px; line-height: 1.5; color: #cfe7f1; }

/* Regelwerk-Band */
.band {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin: 40px 0 90px; padding: 40px 44px; border-radius: 34px;
  background: linear-gradient(120deg, rgba(63,184,245,.2), rgba(111,230,216,.12) 50%, rgba(207,246,178,.14)), var(--tief);
  border: 1px solid var(--rand-stark);
}
.band::after {
  content: ""; position: absolute; right: 180px; top: -40px; width: 260px; height: 260px; pointer-events: none;
  background: url("/startseite-assets/palme.png") center / contain no-repeat; opacity: .1; transform: rotate(8deg);
}
.band-text { position: relative; z-index: 1; max-width: 640px; }
.band-text p:last-child { margin-top: 8px; color: #cfe7f1; font-size: 17px; }
.band .knopf { position: relative; z-index: 1; flex: none; }

/* Fuß */
.fuss { position: relative; z-index: 1; border-top: 1px solid var(--rand); background: rgba(4,12,19,.75); }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 32px 24px 40px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px 32px; align-items: center;
}
.fuss .brand img { width: 44px; height: 44px; }
.fuss .brand strong { font-size: 19px; }
.fuss-links { justify-self: end; display: flex; flex-wrap: wrap; gap: 6px; }
.fuss-links a { padding: 6px 14px; border-radius: 999px; color: var(--leise); font-weight: 600; }
.fuss-links a:hover { color: var(--text); background: rgba(111,230,216,.07); }
.fuss-klein { grid-column: 1 / -1; color: var(--blass); font-size: 14px; }

/* Textseiten (Datenschutz) */
.text-seite { max-width: 860px; padding-top: 56px; padding-bottom: 90px; }
.text-kopf h1 { margin-top: 4px; font-size: clamp(40px, 5vw, 58px); font-weight: 800; line-height: 1.05; }
.text-stand { margin-top: 10px; font-size: 14px; color: var(--blass); }
.text-inhalt {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 8px; padding: 8px; border-radius: 26px;
  background: rgba(4,14,22,.6); border: 1px solid var(--rand);
}
.text-inhalt a { padding: 6px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--leise); }
.text-inhalt a:hover { color: var(--text); background: rgba(111,230,216,.08); }
.text-block {
  margin-top: 14px; padding: 26px 28px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(127,227,240,.05), rgba(255,255,255,.015) 50%), var(--flaeche);
  border: 1px solid var(--rand);
}
.text-block h2 { font-size: 24px; font-weight: 800; line-height: 1.25; }
.text-block h3 { margin-top: 18px; font-size: 18px; font-weight: 800; color: #bfeff8; }
.text-block p { margin-top: 8px; color: #cfe7f1; font-size: 16px; line-height: 1.65; }
.text-block a { color: var(--tuerkis); font-weight: 700; }
.text-block em { font-style: normal; font-weight: 700; color: #bfeff8; }
.text-liste { display: grid; gap: 8px; margin-top: 12px; }
.text-liste li {
  position: relative; padding: 10px 16px 10px 34px; border-radius: 18px; background: rgba(4,14,22,.55);
  color: #cfe7f1; font-size: 16px; line-height: 1.55;
}
.text-liste li::before { content: ""; position: absolute; left: 15px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--verlauf); }

/* Einblenden beim Scrollen (nur mit JS, sonst bleibt alles sichtbar) */
.js .auftauchen { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
.js .auftauchen.da { opacity: 1; transform: none; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1080px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live { display: none !important; }
}
@media (max-width: 900px) {
  :root { --top: 70px; }
  .brand img { width: 46px; height: 46px; }
  .brand strong { font-size: 20px; }
  .menue-knopf { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 16px; right: 16px; top: calc(var(--top) + 8px);
    flex-direction: column; gap: 4px; padding: 8px; border-radius: 26px; background: var(--tief); border-color: var(--rand-stark);
    box-shadow: 0 1.4rem 3rem rgba(0,0,0,.5);
  }
  .nav.offen { display: flex; }
  .nav-item { height: 48px; justify-content: center; font-size: 17px; }
  .buehne { grid-template-columns: 1fr; gap: 40px; padding: 44px 0 56px; }
  .buehne-bild { transform: none; }
  .wir { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr; }
  .schritt:not(:last-child)::after { top: auto; bottom: -22px; right: 50%; transform: translateX(50%) rotate(90deg); }
  .band { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
  .kachel-kampf { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
  .kampf-marken { justify-content: flex-start; max-width: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  main { padding: 0 16px; }
  .topbar { padding: 0 16px; gap: 10px; }
  .brand strong { display: none; }
  .topbar-rechts .knopf-klein { padding: 0 16px; }
  .intro { font-size: 17px; }
  .knoepfe .knopf { flex: 1 1 100%; }
  .fakten li { flex: 1 1 calc(50% - 10px); }
  .release { padding: 16px 14px 16px; }
  .release-uhr { gap: 6px; }
  .release-uhr strong { font-size: 30px; }
  .release-uhr span { font-size: 12px; }
  .kacheln { grid-template-columns: 1fr; }
  .kachel-gross, .kachel-breit { grid-column: auto; grid-row: auto; }
  .kachel-gross { min-height: 260px; }
  .kachel-kampf { grid-column: auto; }
  .kachel-kampf h3 { font-size: 25px; }
  .kachel-gross h3 { font-size: 26px; }
  .abschnitt { padding: 48px 0; }
  .buehne-bild { border-radius: 26px; padding: 6px; }
  .buehne-bild img, .buehne-bild::after { border-radius: 21px; inset: 6px; }
  .fuss-innen { grid-template-columns: 1fr; }
  .fuss-links { justify-self: start; }
  .text-seite { padding-top: 36px; }
  .text-block { padding: 22px 18px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .auftauchen { opacity: 1; transform: none; }
}