/* ==========================================================================
   Chrischan Bublitz – NEW WAY
   Konzept: „Die Visitenkarte, aufgeklappt“
   Vorderseite = Hero · Innenseite = Angebote (hellgrün) · Rückseite = Kontakt
   Mobile-first. Keine externen Requests (DSGVO): Schriften liegen lokal.
   ========================================================================== */

@font-face {
  font-family: "Heros Cn";
  src: url("/assets/fonts/heros-cn-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-var.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-italic-var.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben – abgeleitet aus der Visitenkarte */
  --leaf: #DDEDD2;        /* helles Grün – dominiert die Seite */
  --leaf-2: #E9F3E1;      /* noch heller, für Wechsel-Abschnitte */
  --leaf-3: #CFE3C2;      /* Fußzeile */
  --paper: #F6FAF1;       /* Flächen, Logo-Panel */
  --card: #5F8F53;        /* Kartengrün (Vorderseite) – nur große Schrift */
  --forest: #4A7640;      /* tiefes Grün – Fließtext auf Grün (AA) */
  --band: #4F8045;        /* diagonales Band der Rückseite (AA) */
  --ink: #1D3018;         /* Text */
  --ink-soft: #3B5234;    /* Nebentext */
  --red: #C4250B;         /* Signalrot */
  --red-deep: #A11E07;
  --orange: #D86A14;      /* Orange – Flächen */
  --orange-ink: #A9500B;  /* Orange als Schrift auf Hellgrün (AA groß) */
  --amber: #F1A23A;
  --olive: #736130;       /* Überlagerung Rot/Grün der Karte */

  --font-display: "Heros Cn", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --font-text: "Lora", Georgia, "Times New Roman", serif;

  --gutter: 1.25rem;
  --radius: 6px;
  --dock-h: 0px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--leaf);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.15rem, 8.6vw, 3.6rem);
  letter-spacing: -0.005em;
  color: var(--ink);
}

h3 {
  font-size: 1.4rem;
  margin: 1.75rem 0 .75rem;
}

p { margin: 0 0 1rem; text-wrap: pretty; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }

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

.wrap {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
}
.skip:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--small { min-height: 40px; padding: .45rem 1rem; font-size: 1.05rem; }

.actions {
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ==========================================================================
   VORDERSEITE (Hero)
   ========================================================================== */
.card-front {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--card);
  color: #fff;
  padding-top: calc(1.75rem + env(safe-area-inset-top));
}

/* Diagonale Keile wie auf der Karte */
.card-front__wedge { position: absolute; inset: 0; z-index: -1; }
.wedge { position: absolute; inset: 0; }
.wedge--red {
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,.045) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(-60deg, rgba(0,0,0,.05) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, var(--orange) 0%, var(--red) 46%, var(--red) 100%);
  clip-path: polygon(0 0, 60% 0, 20% 100%, 0 100%);
}
.wedge--orange {
  background: linear-gradient(180deg, var(--amber), var(--orange) 70%);
  opacity: .9;
  clip-path: polygon(44% 0, 60% 0, 20% 100%, 9% 100%);
}
.wedge--olive {
  background: var(--olive);
  opacity: .42;
  clip-path: polygon(60% 0, 74% 0, 34% 100%, 20% 100%);
}

.card-front__inner {
  position: relative;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
}

.portrait {
  align-self: flex-end;
  width: min(58vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 6px;
  background: var(--paper);
  box-shadow: 0 18px 40px -18px rgba(29, 48, 24, .55);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.hero-title {
  margin-top: -.25rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.hero-title__name {
  display: block;
  font-size: clamp(3.4rem, 16.5vw, 7.25rem);
  line-height: .9;
  letter-spacing: -.01em;
}
.hero-title__role {
  display: block;
  margin-top: .45rem;
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  line-height: 1;
  letter-spacing: .01em;
}

/* Logo-Panel + Tagline-Streifen: wie unten links auf der Karte */
.card-front__brand { margin-top: 1.75rem; }
.logo-panel {
  width: min(82%, 360px);
  padding: .9rem var(--gutter) .8rem;
  background:
    linear-gradient(100deg, rgba(246,250,241,.96) 0 70%, rgba(246,250,241,.86));
}
.logo-panel img { width: 100%; max-width: 280px; }
.tagline {
  margin: 0;
  padding: .7rem var(--gutter) calc(.75rem + 2px);
  background: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: .01em;
}

/* ---------- Kurzvorstellung ---------- */
.intro {
  padding: 2rem var(--gutter) 2.75rem;
  max-width: 70rem;
  margin-inline: auto;
}
.slogan {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  line-height: 1.15;
  color: var(--forest);
  margin-bottom: 1rem;
}
.slogan--inline { font-size: inherit; color: var(--forest); }
.intro__lead {
  font-size: 1.125rem;
  max-width: 38rem;
}

/* ==========================================================================
   INNENSEITE
   ========================================================================== */

/* ---------- Angebots-Übersicht ---------- */
.offers { padding: 0 0 3rem; }
.offers h2 { margin-bottom: 1.25rem; }

.offer-index {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.offer-index__item + .offer-index__item { border-top: 1px solid rgba(29, 48, 24, .12); }
.offer-index__item a {
  position: relative;
  display: block;
  padding: 1.05rem 1rem 1.05rem 1.6rem;
  text-decoration: none;
}
.offer-index__item a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background: var(--topic, var(--card));
  transition: width .2s ease;
}
.offer-index__item a:hover::before { width: 12px; }
.offer-index__item--red    { --topic: var(--red); }
.offer-index__item--orange { --topic: var(--orange); }
.offer-index__item--green  { --topic: var(--card); }
.offer-index__item--olive  { --topic: var(--olive); }
.offer-index__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.08;
}
.offer-index__meta {
  display: block;
  margin-top: .25rem;
  font-size: .95rem;
  color: var(--ink-soft);
}

/* ---------- Themen-Abschnitte ---------- */
.topic {
  --topic: var(--red);
  padding: 3.5rem 0 3.75rem;
}
.topic--red    { --topic: var(--red);    background: var(--leaf-2); }
.topic--orange { --topic: var(--orange); background: var(--leaf); }
.topic--orange .steps li::before { color: var(--orange-ink); }
.topic__head h2 + .facts { margin-top: 1.4rem; }

/* Farbcode = Thema (gleich wie in der Übersicht) */
.topic__head h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: .5rem;
  margin-bottom: 1rem;
  background: var(--topic);
  transform: skewX(-32deg);
  transform-origin: left bottom;
}

.topic__sub {
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: .7rem 0 1.25rem;
}

.facts { margin: 0 0 1.5rem; }
.facts > div {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: .75rem;
  padding: .6rem 0;
  border-top: 1px solid rgba(29, 48, 24, .16);
}
.facts > div:last-child { border-bottom: 1px solid rgba(29, 48, 24, .16); }
.facts dt { font-size: .95rem; color: var(--ink-soft); padding-top: .1rem; }
.facts dd { margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }

.prose { max-width: 38rem; }

.ticks { list-style: none; margin: 0 0 1rem; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .72em;
  width: .85rem;
  height: .28rem;
  background: var(--topic);
  transform: skewX(-32deg);
}

/* ---------- Auswahl (Dauer, Stil, Anliegen) ---------- */
.chooser {
  border: 0;
  margin: 1.75rem 0 1.25rem;
  padding: 0;
  min-inline-size: 0;
}
.chooser legend {
  padding: 0;
  margin-bottom: .65rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.chooser__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: .35rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.chooser__hint { margin: .7rem 0 0; font-size: .98rem; color: var(--ink-soft); }

/* ---------- Abfolgen (echte Reihenfolge) ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 1.5rem 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.25rem 3.4rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -.15rem;
  width: 2.4rem;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--topic);
  text-align: center;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 2.5rem;
  bottom: .35rem;
  width: 2px;
  background: currentColor;
  opacity: .2;
}
.steps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
  margin-bottom: .2rem;
}
.steps span { display: block; }

.fit {
  border-left: 4px solid var(--topic);
  padding: .1rem 0 .1rem 1rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: .5rem 0 1.75rem;
}

/* ---------- Eigenes Thema ---------- */
.own-topic {
  padding: 3.5rem 0 5.75rem;
  background: var(--paper);
  border-top: 6px solid var(--olive);
}
.own-topic__text {
  font-size: clamp(1.35rem, 5.6vw, 1.9rem);
  line-height: 1.32;
  max-width: 34rem;
  margin: 1rem 0 1.5rem;
}
.own-topic__text em { font-style: italic; color: var(--olive); font-weight: 600; }

/* ---------- Moderation (Kartengrün) ---------- */
.topic--green {
  --topic: #fff;
  position: relative;
  background: var(--forest);
  color: #fff;
  padding-top: 5rem;
  clip-path: polygon(0 2.25rem, 100% 0, 100% 100%, 0 100%);
  margin-top: -2.25rem;
}
.topic--green h2 { color: #fff; }
.topic--green .topic__head h2::before { background: var(--amber); }
.facts--on-green > div { border-color: rgba(255,255,255,.28) !important; }
.facts--on-green dt { color: rgba(255,255,255,.85); }
.chooser--on-green .chip span,
.chooser--on-red .chip span { border-color: rgba(255,255,255,.9); color: #fff; }
.chooser--on-green .chip input:checked + span { background: #fff; color: var(--forest); }
.chooser--on-red .chip input:checked + span { background: #fff; color: var(--red-deep); }
.chooser--on-green .chip input:focus-visible + span,
.chooser--on-red .chip input:focus-visible + span { outline-color: #fff; }
.topic--green :focus-visible { outline-color: #fff; }
.moderation__steps-title { margin-top: 2rem; }
.topic--green .steps li::before { color: #fff; }

/* ---------- Über mich ---------- */
.about { padding: 3.5rem 0; }
.about__grid { display: grid; gap: 1.75rem; }
.about h2 { margin-bottom: 1rem; }
.about p { max-width: 38rem; }
.about__logo {
  width: 100%;
  max-width: 320px;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border-radius: var(--radius);
}

/* ---------- FAQ ---------- */
.faq { padding: 3.5rem 0; background: var(--leaf-2); }
.faq h2 { margin-bottom: 1.25rem; }
.faq__list { max-width: 46rem; }
.faq details { border-top: 1px solid rgba(29, 48, 24, .18); }
.faq details:last-child { border-bottom: 1px solid rgba(29, 48, 24, .18); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1rem 2.5rem 1rem 0;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: 16px;
  height: 2.5px;
  background: var(--red);
  transition: transform .2s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding-bottom: 1rem; margin: 0; max-width: 40rem; }

/* ==========================================================================
   RÜCKSEITE (Kontakt)
   ========================================================================== */
.card-back {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding: 3.75rem 0 4rem;
  background:
    repeating-linear-gradient(60deg, rgba(255,255,255,.04) 0 24px, transparent 24px 48px),
    repeating-linear-gradient(-60deg, rgba(0,0,0,.05) 0 24px, transparent 24px 48px),
    linear-gradient(90deg, var(--orange) 0%, var(--red) 22%, var(--red) 78%, var(--orange) 100%);
}
.card-back h2 { color: #fff; max-width: 22ch; }
.card-back__inner { position: relative; }

.mail-band {
  position: relative;
  display: block;
  margin: 1.5rem calc(-1 * var(--gutter)) 1.25rem;
  padding: 1.6rem var(--gutter) 1.7rem;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.mail-band::before {
  content: "";
  position: absolute;
  inset: 0 -10%;
  z-index: -1;
  background: var(--band);
  transform: skewY(-5deg);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.45);
}
.mail-band__label {
  display: block;
  font-size: 1rem;
  margin-bottom: .2rem;
}
.mail-band__address {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 7.6vw, 3.1rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
}
.mail-band:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.actions--contact { margin-top: 1.25rem; }
.card-back :focus-visible { outline-color: #fff; }
.copy-status { min-height: 1.6em; margin: .75rem 0 0; font-size: .98rem; }

/* ---------- Fußzeile ---------- */
.footer {
  background: var(--leaf-3);
  padding: 1.75rem 0 calc(2rem + var(--dock-h));
  font-size: .95rem;
  color: var(--ink-soft);
}
.footer__inner { display: grid; gap: .6rem; }
.footer p { margin: 0; }
.footer nav { display: flex; gap: 1.25rem; }
.footer nav a, .footer__credit a { color: var(--ink); }

/* ---------- Topbar (nur Desktop) ---------- */
.topbar { display: none; }

/* ---------- Dock (nur Handy) ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: .5rem;
  padding: .6rem max(.75rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-right));
  background: rgba(246, 250, 241, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(29, 48, 24, .12);
  transition: transform .25s ease;
}
.dock .btn { min-height: 48px; font-size: 1.1rem; padding-inline: .75rem; }
.dock[data-hidden="true"] { transform: translateY(110%); }

@media (max-width: 959.98px) {
  :root { --dock-h: calc(68px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Ladeanimation – ein einziger Moment: die Karte „klappt auf“
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .card-front__wedge { animation: wedge-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .portrait { animation: settle .8s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-title { animation: rise .7s .3s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes wedge-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes settle {
  from { transform: scale(.94) rotate(-3deg); }
  to   { transform: none; }
}
@keyframes rise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

/* ==========================================================================
   Größere Handys / Tablets
   ========================================================================== */
@media (min-width: 600px) {
  :root { --gutter: 2rem; }
  .actions { display: flex; flex-wrap: wrap; }
  .offer-index { display: grid; grid-template-columns: 1fr 1fr; }
  .offer-index__item + .offer-index__item { border-top: 0; }
  .offer-index__item:nth-child(n+3) { border-top: 1px solid rgba(29, 48, 24, .12); }
  .offer-index__item:nth-child(even) { border-left: 1px solid rgba(29, 48, 24, .12); }
  .about__grid { grid-template-columns: 1fr auto; align-items: center; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 960px) {
  body { font-size: 1.125rem; }

  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem max(2rem, calc((100vw - 70rem) / 2 + 2rem));
    background: rgba(221, 237, 210, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(29, 48, 24, .1);
    transform: translateY(-100%);
    transition: transform .25s ease;
  }
  .topbar[data-visible="true"] { transform: none; }
  .topbar__name { font-family: var(--font-display); font-size: 1.35rem; text-decoration: none; }

  .dock { display: none; }
  html { scroll-padding-top: 4.5rem; }

  .card-front { padding-top: 4rem; }
  .wedge--red    { clip-path: polygon(0 0, 47% 0, 27% 100%, 0 100%); }
  .wedge--orange { clip-path: polygon(37% 0, 47% 0, 27% 100%, 19% 100%); }
  .wedge--olive  { clip-path: polygon(47% 0, 56% 0, 36% 100%, 27% 100%); }

  .card-front__inner {
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: 2rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    min-height: 430px;
  }
  .portrait { grid-column: 2; grid-row: 1; width: 380px; align-self: center; }
  .hero-title { grid-column: 1; grid-row: 1; margin: 0 0 1rem; }

  .card-front__brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2.5rem;
  }
  .logo-panel { width: max(420px, calc((100vw - 70rem) / 2 + 26rem)); padding-left: max(2rem, calc((100vw - 70rem) / 2 + 2rem)); }
  .tagline { padding-left: max(2rem, calc((100vw - 70rem) / 2 + 2rem)); font-size: 1.6rem; }

  .intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem 4rem;
    align-items: start;
    padding: 3.5rem 2rem 4rem;
  }
  .intro .slogan { grid-row: 1 / span 2; margin: 0; font-size: 2.6rem; }
  .intro .actions { grid-column: 2; margin-top: .5rem; }

  .topic { padding: 5.5rem 0; }
  .topic__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }
  .topic__head { position: sticky; top: 5.5rem; }
  .topic--green { padding-top: 7.5rem; clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0 100%); margin-top: -4rem; }

  .steps--genz, .steps--moderation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .steps--genz li, .steps--moderation li { padding: 3.2rem 0 0; }
  .steps--genz li::before, .steps--moderation li::before { top: 0; width: auto; text-align: left; }
  .steps--genz li:not(:last-child)::after,
  .steps--moderation li:not(:last-child)::after {
    left: 2.4rem; right: 0; top: 1.15rem; bottom: auto; width: auto; height: 2px;
  }

  .about { padding: 5rem 0; }
  .own-topic { padding: 4.5rem 0 8.5rem; }
  .faq { padding: 5rem 0; }

  .card-back { padding: 5.5rem 0 6rem; }
  .mail-band { margin-inline: 0; padding-inline: 2.25rem; max-width: 48rem; }
  .mail-band::before { inset: 0 -100vw; transform: skewY(-3.5deg); }

  .footer__inner { grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; }
}

@media print {
  .dock, .topbar, .skip { display: none !important; }
  body { padding: 0; }
}

/* ==========================================================================
   Rechtliche Seiten (Impressum, Datenschutz, 404)
   ========================================================================== */
.legal-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--card);
  color: #fff;
  padding: calc(1.25rem + env(safe-area-inset-top)) 0 1.25rem;
}
.legal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--orange), var(--red) 60%);
  clip-path: polygon(0 0, 34% 0, 22% 100%, 0 100%);
}
.legal-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legal-head a { color: #fff; font-family: var(--font-display); font-size: 1.25rem; text-decoration: none; }
.legal-head a:focus-visible { outline-color: #fff; }
.legal { padding: 2.5rem 0 4rem; }
.legal h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); margin-bottom: 1.5rem; }
.legal h2 { font-size: clamp(1.5rem, 6vw, 2rem); margin: 2.25rem 0 .75rem; }
.legal h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.legal .prose { max-width: 42rem; }
.legal address { font-style: normal; margin-bottom: 1rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .35rem; }
.todo {
  background: #FFE7A3;
  color: #4A3500;
  padding: 0 .25em;
  border-radius: 3px;
  font-family: var(--font-display);
}
.legal-note {
  border-left: 4px solid var(--olive);
  padding-left: 1rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
.notfound { padding: 4rem 0 5rem; }
.notfound h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); margin-bottom: 1rem; }
body.no-dock { --dock-h: 0px; }

/* ---------- Weiterführende Links (Unterseiten, Blog) ---------- */
.more { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.more a { display: inline-block; padding: .6rem 0; font-weight: 600; }
.area { margin: .75rem 0 1.5rem; font-size: 1.05rem; }