/*
  Design-System „Editorial Rot" — Praxis Ute Beczasy (Referenz-Rebuild nach
  design-craft.md). Fraunces (Display) + Archivo (Text/Kicker).
  Papier, Tiefschwarz, Zinnoberrot als mutiger Block, Salbei sekundär.
  Handwerk: Überlappungen, Korn, Marquee, Badge, riesige Statements.
  Individuell für diese Praxis; nicht für andere Sites wiederverwenden.
*/
:root {
  --papier: #f4efe6;
  --papier-tief: #ece5d5;
  --tinte: #161310;
  --tinte-weich: #4f473d;
  --tinte-grau: #8b8172;
  --rot: #d94a26;
  --rot-tief: #b83a1a;
  --salbei: #7c8468;
  --hell: #f8efe4;
  --linie: rgba(22, 19, 16, 0.16);
  --linie-stark: rgba(22, 19, 16, 0.42);
  --disp: 'Fraunces', Georgia, serif;
  --grot: 'Archivo', 'Segoe UI', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--rot); color: var(--hell); }

html { scroll-behavior: smooth; }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--grot);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Papierkorn über allem */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Sticky Blur-Navigation */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 0.85rem clamp(1.1rem, 4vw, 3rem);
  background: rgba(244, 239, 230, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.brand { font-family: var(--disp); font-weight: 600; font-size: 1.18rem; }
.brand i { font-style: italic; color: var(--rot); }
.brand small { display: none; }
.topnav-links { display: flex; gap: clamp(0.9rem, 2.2vw, 1.8rem); flex-wrap: wrap; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.topnav-links a { position: relative; padding-bottom: 0.2rem; }
.topnav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--rot); transition: width 0.25s ease;
}
.topnav-links a:hover::after { width: 100%; }
.topnav-links a[aria-current="page"]::after { width: 100%; }
.topnav-telefon {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--tinte); color: var(--hell);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
}
.topnav-telefon:hover { background: var(--rot); }

/* Layout */
.raster { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 3rem); }

/* Kicker */
.kicker {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rot); margin-bottom: 1.2rem;
}
.kicker::before { content: ""; width: 2.4rem; height: 2px; background: var(--rot); }
.kicker--hell { color: var(--hell); }
.kicker--hell::before { background: var(--hell); }

/* Typo */
h1, h2, h3 { font-family: var(--disp); font-weight: 600; }
h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.98; letter-spacing: -0.02em; }
h1 em, .rot-kursiv { font-style: italic; font-weight: 400; color: var(--rot); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.015em; }
h2 em, h1 em { font-style: italic; font-weight: 400; color: var(--rot); }
h3 { font-size: 1.15rem; }
p + p { margin-top: 1rem; }
.gross { font-family: var(--disp); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.4; }

/* Hero mit Überlappung + Badge */
.hero { position: relative; padding-top: 5.2rem; }
.hero-raster {
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: end;
}
.hero-typo { grid-column: 1 / 9; grid-row: 1; position: relative; z-index: 3; padding: clamp(2rem, 5vw, 4rem) 0 0; }
.hero-typo h1 { margin: 1.1rem 0 1.6rem; }
.hero-typo .unter { max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--tinte-weich); line-height: 1.7; }
.hero-bild { grid-column: 8 / 13; grid-row: 1; position: relative; z-index: 1; padding-top: clamp(3.4rem, 8vw, 6.4rem); }
.bildrahmen { position: relative; }
.bildrahmen img {
  width: 100%; height: clamp(340px, 56vh, 560px); object-fit: cover;
  filter: sepia(0.18) saturate(0.9) contrast(1.04);
}
.bildrahmen::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(22, 19, 16, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.badge {
  position: absolute; z-index: 4;
  left: clamp(-1.2rem, -1.6vw, -0.8rem); bottom: 1.2rem;
  width: clamp(120px, 13vw, 158px); height: clamp(120px, 13vw, 158px);
  animation: drehen 26s linear infinite;
}
.badge text { font-family: var(--grot); font-weight: 700; font-size: 8.4px; letter-spacing: 0.34em; text-transform: uppercase; fill: var(--hell); }
.badge circle { fill: var(--rot); }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge { animation: none; } }

/* Marquee-Ticker */
.ticker {
  background: var(--rot); color: var(--hell);
  overflow: hidden; white-space: nowrap;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rot-tief);
  border-bottom: 1px solid var(--rot-tief);
}
.ticker-inhalt {
  display: inline-block;
  animation: lauf 28s linear infinite;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.ticker-inhalt span { margin: 0 1.6rem; }
.ticker-inhalt .stern { color: var(--papier); opacity: 0.7; }
@keyframes lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-inhalt { animation: none; } }

/* Sektionen */
.sektion { padding: clamp(5rem, 10vw, 9rem) 0; }

/* Stat-Band */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.stats > div { background: var(--papier); padding: 1.7rem 1.6rem; }
.stats .zahl { font-family: var(--disp); font-weight: 600; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; color: var(--rot); }
.stats .zahl small { font-size: 0.5em; }
.stats p { margin-top: 0.5rem; font-size: 0.94rem; color: var(--tinte-weich); max-width: 30ch; }

/* Vollfarben-Sektion */
.rotblock { background: var(--rot); color: var(--hell); padding: clamp(4rem, 8vw, 7rem) 0; margin: clamp(2rem, 5vw, 4rem) 0; }
.rotblock h2, .rotblock h3 { color: var(--hell); }
.rotblock .gross { color: var(--hell); }
.rotblock p { color: rgba(248, 239, 228, 0.88); }
.rotblock .zeilenlinie { border-color: rgba(248, 239, 228, 0.3); }

/* Duospalten */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }

/* Überlappende Faktenkarte auf Bild */
.ueberlappung { position: relative; }
.ueberlappung .bild { margin-left: clamp(0rem, 8vw, 7rem); }
.ueberlappung .bild img { width: 100%; height: clamp(300px, 48vh, 480px); object-fit: cover; filter: sepia(0.15) saturate(0.92); }
.ueberlappung .bild::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.faktenkarte {
  position: relative; z-index: 3;
  background: var(--tinte); color: var(--hell);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 520px;
  margin: clamp(-4.5rem, -7vw, -2.6rem) 0 0 auto;
  margin-right: clamp(0rem, 3vw, 2.5rem);
}
.faktenkarte .kennung { color: var(--aprikose, var(--rot)); }
.faktenkarte .kennung { color: #e8a063; }
.faktenkarte dl { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.2rem; font-size: 0.93rem; }
.faktenkarte dt { font-weight: 700; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 239, 228, 0.55); padding-top: 0.3rem; }
.faktenkarte dd { line-height: 1.55; }

/* Zeilenliste (Zeiten etc.) */
.zeilenlinie { border-top: 1px solid var(--linie-stark); }
.zeilenlinie > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: 0.6rem 1.7rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linie); }
.zeilenlinie dt { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-grau); padding-top: 0.26rem; }
.zeilenlinie dd { font-size: 0.97rem; }

/* Krise */
.krise { border: 2px solid var(--rot); padding: 1.5rem 1.7rem; margin-top: 2.4rem; background: var(--papier); }
.krise h3 { font-family: var(--disp); font-weight: 600; font-size: 1.4rem; color: var(--rot); margin-bottom: 0.5rem; }
.krise p, .krise li { font-size: 0.95rem; color: var(--tinte-weich); }
.krise ul { list-style: none; margin-top: 0.55rem; }
.krise li { padding: 0.26rem 0; }
.krise a { border-bottom: 1px solid var(--linie-stark); }

/* Hinweiskasten */
.hinweis { border-left: 3px solid var(--rot); background: var(--papier-tief); padding: 1.25rem 1.5rem; font-size: 0.95rem; color: var(--tinte-weich); max-width: 62ch; }
.hinweis strong { color: var(--tinte); }

/* Aussagezeile */
.statement { font-family: var(--disp); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.16; letter-spacing: -0.01em; max-width: 22ch; margin-bottom: 1.3rem; }
.statement em { font-style: italic; font-weight: 400; color: var(--rot); }

/* Bildtafel mit Korn */
.bildtafel img { width: 100%; height: clamp(260px, 44vh, 440px); object-fit: cover; filter: sepia(0.15) saturate(0.92); }
.bildtafel { position: relative; }
.bildtafel::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; pointer-events: none;
}

/* Krise */
.krise { border: 2px solid var(--rot); padding: 1.5rem 1.7rem; margin-top: 2.4rem; background: var(--papier); }
.krise h3 { font-family: var(--disp); font-weight: 600; font-size: 1.4rem; color: var(--rot); margin-bottom: 0.5rem; }
.krise p, .krise li { font-size: 0.95rem; color: var(--tinte-weich); }
.krise ul { list-style: none; margin-top: 0.55rem; }
.krise li { padding: 0.26rem 0; }
.krise a { border-bottom: 1px solid var(--linie-stark); }

/* Riesiges Footer-CTA */
.cta-riesig { background: var(--tinte); color: var(--hell); padding: clamp(3.4rem, 8vw, 6.5rem) 0 clamp(2.4rem, 5vw, 4rem); }
.cta-riesig h2 { font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: 1; letter-spacing: -0.02em; max-width: 14ch; }
.cta-riesig h2 em { font-style: italic; font-weight: 400; color: var(--rot); }
.cta-riesig .telefon-riese {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem);
  margin-top: 2rem; display: inline-block;
  border-bottom: 3px solid var(--rot); padding-bottom: 0.3rem;
}
.cta-riesig .telefon-riese:hover { color: var(--rot); }
.cta-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; border-top: 1px solid rgba(248, 239, 228, 0.2); padding-top: 1.4rem; font-size: 0.9rem; }
.cta-spalten h3 { font-family: var(--grot); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248, 239, 228, 0.5); margin-bottom: 0.6rem; }
.cta-spalten p { color: rgba(248, 239, 228, 0.85); line-height: 1.7; }
.cta-spalten a { border-bottom: 1px solid rgba(248, 239, 228, 0.35); }
.fussnote { border-top: 1px solid var(--linie); margin-top: 2.6rem; padding-top: 0.9rem; font-size: 0.78rem; color: var(--tinte-grau); }
sup { color: var(--rot); font-size: 0.72em; }
.cta-riesig .fussnote { color: rgba(248, 239, 228, 0.5); border-color: rgba(248, 239, 228, 0.2); }
.cta-riesig sup { color: var(--rot); }

/* Knöpfe */
.takt { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.knopf { display: inline-block; padding: 0.95rem 1.7rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; }
.knopf-rot { background: var(--rot); color: var(--hell); }
.knopf-rot:hover { background: var(--rot-tief); }
.knopf-linie { border: 1.5px solid var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: var(--hell); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Responsiv */
@media (max-width: 960px) {
  .hero-raster { grid-template-columns: 1fr; }
  .hero-typo { grid-column: 1; grid-row: 1; padding-top: 2.4rem; }
  .hero-bild { grid-column: 1; grid-row: 2; padding-top: 1.6rem; }
  .badge { left: auto; right: 1.2rem; bottom: auto; top: -4.2rem; }
  .stats { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .faktenkarte { margin: -3rem 1rem 0; }
  .cta-spalten { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .brand small { display: inline; font-family: var(--grot); font-style: normal; font-size: 0.6rem; color: var(--tinte-grau); margin-left: 0.5rem; }
  .topnav-links { display: none; }
}