/* Variante 2 - "agentur-teuer". Stil-Festlegung: design-entscheidung.md
   (webdesign-stil-highend; die CI von Uwe Cornelsen schlaegt die Skill-Verbote).
   CI: Navy #0B2545, Creme #F8F5EE, Gold #C9A047, Newsreader + Manrope.
   Gold traegt nie Fliesstext (Kontrast), sondern Linien, Raender und Marken. */

:root {
  --navy: #0B2545;
  --navy-tief: #071A33;
  --navy-weich: #16324F;
  --creme: #F8F5EE;
  --creme-warm: #F2EDE3;
  --karte: #FDFCF8;      /* Karten liegen einen Hauch heller als die Flaeche */
  --gold: #C9A047;
  --gold-hell: #DFC078;
  --gold-tief: #A8842F;

  --text: #10233C;
  --text-leise: #4C5C71;
  --text-hell: #E7E3DA;
  --text-hell-leise: #B9C2CE;

  --bahn: 74rem;
  --bahn-schmal: 46rem;
  --radius: 2rem;
  --radius-innen: 1.625rem;   /* Doppelrand: aussen minus Schalendicke */
  --schale: 0.375rem;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --kurve: cubic-bezier(0.32, 0.72, 0, 1);
  --dauer: 700ms;
}

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Feine Koernung ueber allem - fixiert, nie im Scrollcontainer. */
.koernung {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.028;
  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'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  /* Keine Trennstriche in Ueberschriften - sie zerschneiden die Wortmarke des
     Textes. Nur die Rechtstitel duerfen trennen, dort sprengt sonst ein einzelnes
     Wort ("Datenschutzerklaerung") die schmalen Schirme. */
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 1.7rem + 2.9vw, 4rem); }
h2 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.35rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); line-height: 1.2; }
p { margin: 0 0 1.15rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.nur-screenreader {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--creme); padding: 0.75rem 1.25rem; z-index: 100;
}
.nur-screenreader:focus { left: 1rem; top: 1rem; }

.fehlt {
  background: #FFF3CD; color: #6B4E00; padding: 0 0.3em; border-radius: 3px;
  font-family: var(--sans); font-size: 0.9em;
}

/* --- Raster ---------------------------------------------------------------- */
.bahn { width: min(100% - 2.5rem, var(--bahn)); margin-inline: auto; }
.bahn-schmal { width: min(100% - 2.5rem, var(--bahn-schmal)); }

.band { padding-block: clamp(6rem, 3.5rem + 9vw, 10.5rem); position: relative; }
.band-eng { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }

.ton-hell { background: var(--creme); }
.ton-warm { background: var(--creme-warm); }
.ton-dunkel { background: var(--navy); color: var(--text-hell); }
.ton-dunkel h1, .ton-dunkel h2, .ton-dunkel h3 { color: var(--creme); }

/* Haarlinie als Bandtrenner statt harter Kante */
.ton-hell + .ton-hell::before, .ton-warm + .ton-warm::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 37, 69, 0.12) 22%, rgba(11, 37, 69, 0.12) 78%, transparent);
}

/* --- Doppelrand ------------------------------------------------------------ */
.schale {
  background: rgba(11, 37, 69, 0.045);
  border: 1px solid rgba(11, 37, 69, 0.09);
  border-radius: var(--radius);
  padding: var(--schale);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.schale > .kern {
  background: var(--karte);
  border-radius: var(--radius-innen);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 60px -34px rgba(11, 37, 69, 0.5);
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  height: 100%;
}
.ton-dunkel .schale { background: rgba(248, 245, 238, 0.06); border-color: rgba(248, 245, 238, 0.14); }
.ton-dunkel .schale > .kern {
  background: var(--navy-weich); color: var(--text-hell);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 30px 70px -40px rgba(0, 0, 0, 0.85);
}

.schale-bild { padding: var(--schale); }
.schale-bild > .kern { padding: 0; overflow: hidden; }
.schale-bild img { width: 100%; height: auto; border-radius: var(--radius-innen); }

/* --- Kopf: freistehende Insel ---------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 30; padding: 1.15rem 1.25rem 0; }
.insel {
  width: min(100% - 0.5rem, var(--bahn));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  background: rgba(248, 245, 238, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(11, 37, 69, 0.1);
  border-radius: 999px;
  box-shadow: 0 18px 40px -30px rgba(11, 37, 69, 0.7);
}
.kopf-schlank .insel { justify-content: center; padding: 0.75rem 1.5rem; }

.marke { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.marke .logo { height: 4.4rem; width: auto; display: block; }
.fuss-marke .logo { height: 3.2rem; width: auto; }

.navi { display: flex; align-items: center; gap: 0.4rem; }
.navi-glieder { display: flex; align-items: center; gap: 0.2rem; }
.navi-glieder a {
  position: relative; text-decoration: none; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.01em; padding: 0.55rem 0.85rem; border-radius: 999px;
  color: var(--text-leise);
  transition: color 400ms var(--kurve), background-color 400ms var(--kurve);
}
.navi-glieder a:hover { color: var(--navy); background: rgba(11, 37, 69, 0.06); }
.navi-glieder a[aria-current="page"] { color: var(--navy); }
.navi-glieder a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem; height: 1.5px;
  background: var(--gold); border-radius: 2px;
}

/* Hamburger: morpht ueber transform zum X, nie ueber top/left. */
.navi-schalter {
  display: none; position: relative; width: 2.9rem; height: 2.9rem; flex: 0 0 auto;
  border: 1px solid rgba(11, 37, 69, 0.12); border-radius: 999px;
  background: rgba(11, 37, 69, 0.03); cursor: pointer;
}
.navi-schalter .strich {
  position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 1.5px;
  background: var(--navy); border-radius: 2px;
  transition: transform 520ms var(--kurve);
}
.navi-schalter .strich-oben { transform: translate(-50%, -4px); }
.navi-schalter .strich-unten { transform: translate(-50%, 3px); }
.navi-schalter[aria-expanded="true"] .strich-oben { transform: translate(-50%, 0) rotate(45deg); }
.navi-schalter[aria-expanded="true"] .strich-unten { transform: translate(-50%, 0) rotate(-45deg); }

/* --- Knopf: Pille mit eingesetztem Kreis ------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.62rem 0.62rem 0.62rem 1.5rem;
  border-radius: 999px; text-decoration: none;
  font-family: var(--sans); font-size: 0.94rem; font-weight: 700; letter-spacing: 0.01em;
  background: var(--gold); color: var(--navy);
  border: 1px solid transparent;
  transition: transform 420ms var(--kurve), background-color 420ms var(--kurve), box-shadow 420ms var(--kurve);
  box-shadow: 0 16px 34px -20px rgba(168, 132, 47, 0.95);
}
.knopf:hover { background: var(--gold-hell); box-shadow: 0 22px 46px -20px rgba(168, 132, 47, 1); }
.knopf:active { transform: scale(0.98); }
.knopf-kreis {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: 999px; background: rgba(11, 37, 69, 0.16); color: var(--navy);
  transition: transform 420ms var(--kurve), background-color 420ms var(--kurve);
}
.knopf-kreis svg { width: 0.85rem; height: 0.85rem; }
.knopf:hover .knopf-kreis { transform: translate(3px, -2px) scale(1.06); background: rgba(11, 37, 69, 0.24); }

.knopf-leise {
  background: transparent; color: var(--navy);
  border-color: var(--gold-tief); box-shadow: none;
}
.knopf-leise .knopf-kreis { background: rgba(11, 37, 69, 0.07); color: var(--gold-tief); }
.knopf-leise:hover { background: rgba(201, 160, 71, 0.14); border-color: var(--gold); box-shadow: none; }
/* Auf dunklem Grund - der Hero zaehlt dazu, auch ohne .ton-dunkel. */
.hero .knopf-leise, .ton-dunkel .knopf-leise, .cta-band .knopf-leise {
  color: var(--creme); border-color: var(--gold);
}
.hero .knopf-leise .knopf-kreis, .ton-dunkel .knopf-leise .knopf-kreis, .cta-band .knopf-leise .knopf-kreis {
  background: rgba(201, 160, 71, 0.22); color: var(--gold-hell);
}
.hero .knopf-leise:hover, .ton-dunkel .knopf-leise:hover, .cta-band .knopf-leise:hover {
  background: rgba(201, 160, 71, 0.18);
}

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.knopf-reihe-mitte { justify-content: center; }

/* --- Eyebrow --------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem; margin-bottom: 1.5rem;
  border: 1px solid rgba(11, 37, 69, 0.16); border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--text-leise);
}
.eyebrow::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--gold);
}
.ton-dunkel .eyebrow, .cta-band .eyebrow, .hero .eyebrow {
  border-color: rgba(248, 245, 238, 0.24); color: var(--text-hell-leise);
}
.hero-ohne-bild .eyebrow, .seitentitel .eyebrow { border-color: rgba(11, 37, 69, 0.16); color: var(--text-leise); }

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative; background: var(--navy); color: var(--text-hell);
  padding-block: clamp(6.5rem, 4rem + 10vw, 11rem);
  margin-top: -6.6rem; padding-top: clamp(11.5rem, 8rem + 10vw, 15rem);
}
.hero h1 { color: var(--creme); }
.hero .sub {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.45; color: var(--text-hell-leise); margin-top: 1.75rem; max-width: 46ch;
}
.hero .fussnote { margin-top: 1.4rem; font-size: 0.85rem; color: var(--text-hell-leise); }
.hero-kompakt { padding-block: clamp(8rem, 6rem + 6vw, 11rem) clamp(4.5rem, 3rem + 4vw, 7rem); }

.hero-raster { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: center; }
.hero-bild .schale { background: rgba(248, 245, 238, 0.08); border-color: rgba(248, 245, 238, 0.16); }
.hero-bild .schale > .kern { background: transparent; box-shadow: none; }

/* Tiefe hinter dem Hero: warmer Lichtschein, keine harte Flaeche. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 78% 18%, rgba(201, 160, 71, 0.16), transparent 62%);
}
.hero > * { position: relative; z-index: 1; }

.seitentitel h1 { hyphens: auto; }
.seitentitel {
  background: var(--creme-warm); margin-top: -6.6rem;
  padding: clamp(10.5rem, 8rem + 6vw, 13rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem);
}

/* --- Editorial Split ------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); }
.split-kopf { position: sticky; top: 7.5rem; align-self: start; }
.split-text > p { color: var(--text-leise); }
.ton-dunkel .split-text > p { color: var(--text-hell-leise); }

.band-kopf { max-width: 44ch; margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.band-intro { margin-top: 1.35rem; color: var(--text-leise); }
.ton-dunkel .band-intro { color: var(--text-hell-leise); }

.zitat {
  margin: 2.25rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.35;
}
.zitat p { margin: 0; max-width: 34ch; }

/* --- Bento ----------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.bento .karte { grid-column: span 3; }
.bento .karte-breit { grid-column: span 6; }
.bento .kern { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.bento h3 { font-family: var(--serif); }
.bento p { margin: 0; color: var(--text-leise); }
.ton-dunkel .bento p { color: var(--text-hell-leise); }
.karte-zeichen {
  width: 2.6rem; height: 2.6rem; color: var(--gold-tief);
  transition: transform var(--dauer) var(--kurve);
}
.ton-dunkel .karte-zeichen { color: var(--gold); }
.bento .schale:hover .karte-zeichen { transform: translateY(-2px) scale(1.04); }
.karte-nummer {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--gold-tief);
}
.ton-dunkel .karte-zeichen {
  width: 2.6rem; height: 2.6rem; color: var(--gold-tief);
  transition: transform var(--dauer) var(--kurve);
}
.ton-dunkel .karte-zeichen { color: var(--gold); }
.bento .schale:hover .karte-zeichen { transform: translateY(-2px) scale(1.04); }
.karte-nummer { color: var(--gold); }
.bento .schale:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(11, 37, 69, 0.55); }

.bento-schlicht { grid-template-columns: repeat(2, 1fr); }
.bento-schlicht .karte, .bento-schlicht .karte-breit { grid-column: span 1; }


/* --- Erklaer-Grafiken ------------------------------------------------------ */
.grafik { margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; }
.grafik svg { display: block; width: 100%; height: auto; }
.g-linie, .g-teiler, .g-stufe {
  fill: none; stroke: var(--gold-tief); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}
.g-teiler { stroke: rgba(11, 37, 69, 0.16); }
.g-punkt { fill: var(--creme); stroke: var(--gold-tief); stroke-width: 1.2; }
.g-nabe, .g-kern { fill: var(--gold); stroke: none; }
.g-text {
  font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--text-leise);
  letter-spacing: 0.02em;
}
.g-klein { font-size: 11.5px; font-weight: 500; }
.g-mitte { text-anchor: middle; }
.g-bildtext { font-size: 15px; font-weight: 500; }
.g-titel {
  font-family: var(--serif); font-size: 22px; fill: var(--text); text-anchor: middle;
}
.ton-dunkel .g-linie, .ton-dunkel .g-stufe { stroke: var(--gold); }
.ton-dunkel .g-punkt { fill: var(--navy); stroke: var(--gold); }
.ton-dunkel .g-text { fill: var(--text-hell-leise); }
.ton-dunkel .g-titel { fill: var(--creme); }
.ton-dunkel .g-teiler { stroke: rgba(248, 245, 238, 0.2); }

/* Grafik neben dem Bandkopf statt darunter */
.kopf-mit-grafik {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}
.kopf-mit-grafik .band-kopf { margin-bottom: 0; }
.kopf-mit-grafik .grafik { margin: 0; }

/* Akzentbild als breite Kachel unter einem Textband */
.akzent { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.akzent .schale { max-width: 58rem; margin-inline: auto; }
/* Hochformate sollen das Band nicht auffressen - Hoehe deckeln, Verhaeltnis bleibt. */
.akzent .kern { display: flex; justify-content: center; }
.akzent img { max-height: 30rem; width: auto; max-width: 100%; }

/* --- Zeitstrahl ------------------------------------------------------------ */
.zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitstrahl::before {
  content: ''; position: absolute; left: 1.35rem; top: 0.9rem; bottom: 0.9rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
  opacity: 0.55;
}
.zeitstrahl li {
  position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.75rem); align-items: start;
  padding: 0 0 clamp(1.75rem, 1.4rem + 1vw, 2.6rem);
}
.zeitstrahl li:last-child { padding-bottom: 0; }
.zeitstrahl-marke {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  border: 1px solid rgba(201, 160, 71, 0.55); border-radius: 999px;
  background: var(--creme);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-tief);
}
.ton-dunkel .zeitstrahl-marke { background: var(--navy); color: var(--gold); border-color: rgba(201, 160, 71, 0.7); }
.zeitstrahl-inhalt { padding-top: 0.35rem; }
.zeitstrahl-inhalt h3 { margin-bottom: 0.4rem; }
.zeitstrahl-inhalt p { margin: 0; color: var(--text-leise); }
.ton-dunkel .zeitstrahl-inhalt p { color: var(--text-hell-leise); }

@media (max-width: 62rem) {
  .kopf-mit-grafik { grid-template-columns: 1fr; }
  .kopf-mit-grafik .grafik { max-width: 22rem; }
}

/* --- Bio ------------------------------------------------------------------- */
.bio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.bio-text > p { color: var(--text-leise); }
.ton-dunkel .bio-text > p { color: var(--text-hell-leise); }
.bio-text h2 { margin-bottom: 1.5rem; }

/* --- CTA-Band -------------------------------------------------------------- */
.cta-band { position: relative; background: var(--navy); color: var(--text-hell); overflow: hidden; }
.cta-band .schale { background: rgba(248, 245, 238, 0.08); border-color: rgba(248, 245, 238, 0.16); }
.cta-band .schale > .kern {
  background: rgba(7, 26, 51, 0.72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: var(--text-hell); text-align: center;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.cta-band h2 { color: var(--creme); margin-bottom: 1.25rem; }
.cta-band p { color: var(--text-hell-leise); margin-inline: auto; }
.cta-bild {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: saturate(0.85);
}
.cta-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 37, 69, 0.86), rgba(7, 26, 51, 0.92)); }
.cta-band .bahn { position: relative; z-index: 1; }
.cta-siegel { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.75rem; display: block; }

/* --- FAQ ------------------------------------------------------------------- */
.faq { display: grid; gap: 0.85rem; }
.schale-faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  cursor: pointer; list-style: none; border-radius: var(--radius-innen);
  transition: background-color 420ms var(--kurve);
  font-family: var(--serif); font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); line-height: 1.3;
}
.schale-faq > summary::-webkit-details-marker { display: none; }
.schale-faq > summary:hover { background: rgba(11, 37, 69, 0.04); }
.ton-dunkel .schale-faq > summary:hover { background: rgba(248, 245, 238, 0.06); }
.faq-zeichen {
  position: relative; width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
}
.faq-zeichen::before, .faq-zeichen::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--gold-tief); border-radius: 2px;
  transition: transform 480ms var(--kurve);
}
.faq-zeichen::before { width: 1.05rem; height: 1.5px; transform: translate(-50%, -50%); }
.faq-zeichen::after { width: 1.5px; height: 1.05rem; transform: translate(-50%, -50%); }
details[open] .faq-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.schale-faq > .antwort {
  padding: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: var(--text-leise); max-width: 68ch;
}
.ton-dunkel .schale-faq > .antwort { color: var(--text-hell-leise); }
.ton-dunkel .faq-zeichen::before, .ton-dunkel .faq-zeichen::after { background: var(--gold); }

/* --- Daten und Rechtstexte ------------------------------------------------- */
.datenliste { margin: 0; display: grid; gap: 1.1rem; }
.datenliste > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
.datenliste dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-leise); }
.datenliste dd { margin: 0; font-size: 1.05rem; }

.hinweis {
  border-left: 2px solid var(--gold); padding-left: 1.25rem;
  font-size: 0.95rem; color: var(--text-leise);
}
.rechtstext { max-width: var(--bahn-schmal); overflow-wrap: anywhere; }
.rechtstext h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); margin: 2.75rem 0 1rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext .zeilen, .rechtstext li { color: var(--text-leise); }
.rechtstext .zeilen { margin-bottom: 1.15rem; line-height: 1.8; }
.rechtstext ul { padding-left: 1.1rem; }

/* --- Formulare (KlickTipp-Rohformular) ------------------------------------- */
.schale-form .ktv2-form-element { margin-bottom: 1.1rem; }
.schale-form label {
  display: block; margin-bottom: 0.4rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-leise);
}
.schale-form br { display: none; }
.schale-form input[type="text"], .schale-form select, .schale-form textarea {
  width: 100%; padding: 0.9rem 1.05rem;
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: rgba(11, 37, 69, 0.03);
  border: 1px solid rgba(11, 37, 69, 0.16); border-radius: 0.9rem;
  transition: border-color 380ms var(--kurve), background-color 380ms var(--kurve);
}
.schale-form textarea { min-height: 8.5rem; resize: vertical; }
.schale-form input[type="text"]:focus, .schale-form select:focus, .schale-form textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(201, 160, 71, 0.06);
}
.schale-form #FormSubmit {
  width: 100%; padding: 1rem 1.5rem; margin-top: 0.5rem;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--navy); background: var(--gold);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform 420ms var(--kurve), background-color 420ms var(--kurve);
}
.schale-form #FormSubmit:hover { background: var(--gold-hell); }
.schale-form #FormSubmit:active { transform: scale(0.985); }
.formhinweis { margin-top: 1.15rem; font-size: 0.82rem; color: var(--text-leise); }

/* --- Fuss ------------------------------------------------------------------ */
.fuss { background: var(--navy-tief); color: var(--text-hell-leise); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; align-items: flex-start; }
.fuss-claim { margin-top: 1.15rem; max-width: 32ch; font-family: var(--serif); font-size: 1.1rem; color: var(--text-hell); }
.fuss-navi { display: grid; grid-template-columns: repeat(2, auto); gap: 0.6rem 2.5rem; }
.fuss-navi a { text-decoration: none; font-size: 0.92rem; transition: color 380ms var(--kurve); }
.fuss-navi a:hover { color: var(--gold-hell); }
.fuss-recht {
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(248, 245, 238, 0.12);
  font-size: 0.8rem; max-width: 80ch;
}

/* --- Overlay --------------------------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: none; }
.overlay[data-offen="true"] { display: grid; place-items: center; padding: 1.5rem; }
.overlay-grund {
  position: absolute; inset: 0; background: rgba(7, 26, 51, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.overlay-fenster {
  position: relative; width: min(100%, 34rem); max-height: 90vh; overflow-y: auto;
}
.overlay-fenster .schale > .kern { padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
.overlay-fenster h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: 0.75rem; }
.overlay-fenster .sub { color: var(--text-leise); margin-bottom: 1.75rem; }
.overlay-schliessen {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; color: var(--text-leise);
  background: rgba(11, 37, 69, 0.06); border: 0; border-radius: 999px; cursor: pointer;
  transition: transform 420ms var(--kurve), background-color 420ms var(--kurve);
}
.overlay-schliessen:hover { background: rgba(11, 37, 69, 0.12); transform: rotate(90deg); }

/* --- Einblendung (rein additiv - ohne JS ist alles sichtbar) ---------------- */
[data-js="an"] .auftritt {
  opacity: 0; transform: translateY(clamp(1.5rem, 1rem + 1.5vw, 2.75rem)); filter: blur(6px);
  transition: opacity 900ms var(--kurve), transform 900ms var(--kurve), filter 900ms var(--kurve);
}
[data-js="an"] .auftritt-spaet { transition-delay: 140ms; }
[data-js="an"] .auftritt.sichtbar { opacity: 1; transform: none; filter: none; }

/* --- Schmale Schirme ------------------------------------------------------- */
@media (max-width: 62rem) {
  .hero-raster, .split, .bio { grid-template-columns: 1fr; }
  .split-kopf { position: static; }
  .bio-bild { max-width: 26rem; }
  .bento .karte, .bento .karte-breit { grid-column: span 6; }
  .bento-schlicht { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .bahn, .bahn-schmal { width: min(100% - 2rem, var(--bahn)); }
  /* Kein backdrop-filter auf der Insel: er macht sie zum Bezugsrahmen fuer
     position:fixed - das Menue wuerde sonst in der Pille eingesperrt bleiben. */
  .insel {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(248, 245, 238, 0.95);
  }
  .navi-schalter { display: block; position: relative; z-index: 60; }
  .marke .logo { height: 3.2rem; }
  .navi {
    position: fixed; inset: 0; z-index: 50;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    background: rgba(248, 245, 238, 0.97);
    -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
    padding-top: 4rem;
    opacity: 0; pointer-events: none;
    transition: opacity 520ms var(--kurve);
  }
  .navi[data-offen="true"] { opacity: 1; pointer-events: auto; }
  .navi-glieder { flex-direction: column; gap: 0.5rem; }
  .navi-glieder a {
    font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--navy);
    opacity: 0; transform: translateY(2.5rem);
    transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
    transition-delay: var(--verzug, 0ms);
  }
  .navi[data-offen="true"] .navi-glieder a { opacity: 1; transform: none; }
  .navi-glieder a[aria-current="page"]::after { display: none; }
  .navi-knopf {
    opacity: 0; transform: translateY(2.5rem);
    transition: opacity 620ms var(--kurve) 320ms, transform 620ms var(--kurve) 320ms;
  }
  .navi[data-offen="true"] .navi-knopf { opacity: 1; transform: none; }
  .datenliste > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .fuss-navi { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  [data-js="an"] .auftritt { opacity: 1; transform: none; filter: none; }
}