/* =========================================================================
   Entwurf 1 – „Signature Hell“
   Weiß, viel Luft, große Schauzeilen. Ein einziger invertierter Block in
   Schwarz/Orange trägt die Beweisführung. Zurückhaltung ist hier der Effekt.
   Reines CSS, keine Abhängigkeiten.
   ========================================================================= */

:root {
  --brand:        #C25100;
  --brand-bright: #DB5B00;
  --brand-deep:   #A34400;
  --brand-tint:   #FFF4EC;

  --ink:    #1D1D1F;
  --ink-2:  #52525A;
  --ink-3:  #6E6E73;
  --paper:  #FFFFFF;
  --paper-2:#FAFAFB;
  --line:   #E4E4E8;

  --night:      #060607;
  --night-ink:  #FFFFFF;
  --night-ink-2:#A9A9B0;
  --night-brand:#FF8A2B;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --ease: cubic-bezier(.22, 1, .36, 1);

  --nav-h: 52px;
  --brand-shadow: rgba(194, 81, 0, .26);

  /* Formularelemente sollen hell bleiben, auch wenn das System dunkel steht */
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.09rem);
  line-height: 1.5;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  /* Rückfallebene: Wo der Browser keine Trennmuster für Deutsch hat, würde ein
     langes Kompositum sonst aus der Zeile laufen. */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3 {
  margin: 0 0 .4em;
  font-weight: 660;
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;
  hyphenate-limit-chars: 15 5 5;
}
h1 { font-size: clamp(2.8rem, 1.4rem + 6vw, 6rem); }
h2 { font-size: clamp(2.1rem, 1.2rem + 3.8vw, 4rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem); letter-spacing: -.025em; line-height: 1.15; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand); }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.inverse :focus-visible { outline-color: var(--night-brand); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: .5rem; z-index: 99;
  transform: translate(-50%, -200%);
  background: var(--ink); color: #fff; padding: .7rem 1.3rem; border-radius: 99px;
  text-decoration: none; font-weight: 600; transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--tight { max-width: 820px; }

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; }
.logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 660; letter-spacing: -.025em; color: var(--ink); text-decoration: none;
}
.logo img { width: 24px; height: 24px; }
.logo span { color: var(--brand); }
.top nav { display: flex; align-items: center; gap: clamp(.75rem, 2.4vw, 2rem); }
.top nav a {
  font-size: .9rem; font-weight: 520; color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px;
}
.top nav a:hover { color: var(--ink); }
/* Der Knopf behält seine eigene Schriftfarbe – sonst gewinnt die Regel darüber */
.top nav a.btn { color: #fff; }
.top nav a.btn:hover { color: #fff; }
.top__links { display: contents; }
@media (max-width: 700px) { .top__links { display: none; } }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .85rem 1.9rem;
  border: 1px solid transparent; border-radius: 99px;
  background: var(--brand); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn--line { background: transparent; color: var(--brand); border-color: currentColor; }
.btn--line:hover { background: var(--brand); color: #fff; }
.btn--sm { min-height: 40px; padding: .5rem 1.15rem; font-size: .9rem; }
.inverse .btn { background: #fff; color: var(--night); }
.inverse .btn:hover { background: var(--night-brand); color: var(--night); }
.inverse .btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.inverse .btn--line:hover { background: rgba(255,255,255,.12); color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.btns--mid { justify-content: center; }

/* ---------- Bausteine ---------- */
.eyebrow {
  margin: 0 0 1.1rem; font-size: .78rem; font-weight: 680;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.inverse .eyebrow { color: var(--night-brand); }
.lead {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  line-height: 1.4; letter-spacing: -.02em; color: var(--ink-2);
}
.inverse .lead { color: var(--night-ink-2); }
.small { font-size: .84rem; line-height: 1.5; color: var(--ink-3); }
.inverse .small { color: var(--night-ink-2); }

section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.head--mid { margin-inline: auto; text-align: center; }

/* ---------- Bühne ---------- */
.stage {
  padding-block: clamp(3.5rem, 9vw, 8rem) 0;
  text-align: center;
}
.stage h1 { max-width: 15ch; margin-inline: auto; }
.stage .lead { max-width: 40ch; margin-inline: auto; }
.stage .btns { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.stage__shot {
  margin-top: clamp(3rem, 7vw, 6rem);
  border-radius: clamp(18px, 2.6vw, 34px);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .32);
}
.stage__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Der Aufmacher wächst beim Scrollen aus der Seite heraus.
   Nur dort, wo scrollgesteuerte Animationen nativ unterstützt werden. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage__shot {
      animation: shot-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
    @keyframes shot-in {
      from { transform: scale(.9) translateY(2.5rem); opacity: .4; border-radius: 46px; }
      to   { transform: none; opacity: 1; }
    }
  }
}

/* ---------- Merkmalsleiste ---------- */
.marks { border-block: 1px solid var(--line); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.marks ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem 2rem; margin: 0; padding: 0; list-style: none;
}
.marks li { font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.marks b { display: block; color: var(--ink); font-weight: 620; margin-bottom: .1rem; }

/* ---------- Karten ---------- */
.cards {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-2);
  border-radius: clamp(16px, 2vw, 26px);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.card:has(a):hover, .card:focus-within { background: var(--brand-tint); transform: translateY(-3px); }
.card--mark:has(a):hover, .card--mark:focus-within { background: var(--brand-tint); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-2); font-size: .97rem; margin: 0; }
.card__no {
  display: block; margin-bottom: 1.6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--brand);
}

/* ---------- Invertierter Block ---------- */
.inverse {
  background: var(--night);
  color: var(--night-ink);
  border-radius: clamp(0px, 3vw, 42px);
  margin-inline: clamp(0px, 2vw, 1.5rem);
  overflow: hidden;
  position: relative;
}
.inverse::before {
  content: "";
  position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 100% at 30% 0%, rgba(255, 138, 43, .30), transparent 70%);
  pointer-events: none;
}
.inverse > * { position: relative; }
.inverse h2, .inverse h3 { color: var(--night-ink); }

.proof {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.proof + .proof { border-top: 1px solid var(--line); }
.inverse .proof + .proof { border-top-color: rgba(255, 255, 255, .12); }
.proof__media { border-radius: clamp(14px, 1.8vw, 22px); overflow: hidden; }
.proof__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.proof--flip .proof__media { order: 2; }
@media (max-width: 760px) { .proof--flip .proof__media { order: -1; } }
.proof p { color: var(--ink-2); }
.inverse .proof p { color: var(--night-ink-2); }
/* Die Zeichnungen brauchen auf Weiß eine Kante, auf Schwarz nicht */
.proof__media { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.inverse .proof__media { background: #17171A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }


.steps { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { background: var(--night); padding: 1.8rem 1.5rem; }
.steps h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.steps p { font-size: .92rem; margin: 0; }
.steps em { display: block; margin-top: .9rem; font-style: normal; font-size: .8rem; font-weight: 620; color: var(--night-brand); }

/* ---------- Zusagen ---------- */
.pledges { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.pledges li { position: relative; padding-left: 2.1rem; color: var(--ink-2); }
.pledges li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .55rem; height: .95rem; border: solid var(--brand); border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.pledges b { color: var(--ink); font-weight: 630; }

/* ---------- Zusagen ---------- */
.pledges { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.pledges li { position: relative; padding-left: 2.1rem; color: var(--ink-2); }
.pledges li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .55rem; height: .95rem; border: solid var(--brand); border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.pledges b { color: var(--ink); font-weight: 630; }

/* ---------- FAQ ---------- */

/* ---------- Abschluss & Fuß ---------- */
.closer { text-align: center; }
.foot { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; font-size: .88rem; color: var(--ink-3); }
.foot__row { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center; }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Einblendungen ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* =========================================================================
   TEIL 2 – Bausteine für die Unterseiten
   Alles Folgende steht in derselben Handschrift: Flächen statt Rahmen,
   Kreisformen an den Knöpfen, ein einziger Orangeakzent je Baustein.
   ========================================================================= */

/* ---------- Menü für schmale Fenster ---------- */
/* Die Vorlage blendet die Links unter 700 px einfach aus – als Startseite
   genügte das. Ein Auftritt mit neun Seiten braucht ein erreichbares Menü. */
.top__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -.5rem;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.top__toggle:hover { background: var(--paper-2); }
.top__bars, .top__bars::before, .top__bars::after {
  display: block;
  width: 19px; height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s var(--ease), opacity .18s var(--ease);
}
.top__bars { position: relative; }
.top__bars::before, .top__bars::after { content: ""; position: absolute; left: 0; }
.top__bars::before { top: -6px; }
.top__bars::after  { top: 6px; }
.top__toggle[aria-expanded="true"] .top__bars { background: transparent; }
.top__toggle[aria-expanded="true"] .top__bars::before { transform: translateY(6px) rotate(45deg); }
.top__toggle[aria-expanded="true"] .top__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 700px) {
  .top__toggle { display: inline-flex; }
  .top nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .22);
  }
  .top nav.is-open { display: flex; }
  .top__links { display: flex; flex-direction: column; align-items: stretch; }
  .top nav a {
    min-height: 52px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .top nav a.btn { margin-top: 1.25rem; min-height: 50px; border-bottom: 0; }
}
/* Ohne JavaScript bleibt das Menü sichtbar und benutzbar */
html.no-js .top__toggle { display: none; }
@media (max-width: 700px) {
  html.no-js .top__in { flex-wrap: wrap; padding-bottom: .75rem; }
  html.no-js .top nav {
    position: static;
    display: flex;
    width: 100%;
    max-height: none;
    padding: 0;
    box-shadow: none;
    border-bottom: 0;
  }
  html.no-js .top__links { display: flex; }
}

/* ---------- Aufmacher der Unterseiten ---------- */
/* Dieselbe Bühne, nur ohne Bild und mit weniger Anlauf. */
.stage--page { padding-block: clamp(3rem, 7vw, 6rem) 0; }
/* Unterseiten tragen Sachtitel mit langen deutschen Wörtern statt einer
   Schlagzeile. In der vollen Plakatgröße passt „unverbindlich." nicht mehr in
   die schmale Spalte und der Punkt rutscht allein in die nächste Zeile. */
.stage--page h1 { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.25rem); }
/* Ohne Bild darunter wäre der Abstand zum ersten Abschnitt sonst doppelt */
.stage--page + section { padding-top: clamp(2.5rem, 6vw, 4rem); }
/* Steht die Bühne allein auf der Seite, trägt sie den unteren Abstand selbst */
.stage--solo { padding-bottom: clamp(4rem, 9vw, 7rem); }
.stage--page h1 { max-width: 20ch; }
.stage--left { text-align: left; }
.stage--left h1, .stage--left .lead { margin-inline: 0; }

/* ---------- Layouthelfer ---------- */
.grid { display: grid; gap: clamp(.85rem, 1.6vw, 1.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.split {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.split--top { align-items: start; }
.split--media-first > .split__media { order: -1; }
.center { text-align: center; }
.mt-3 { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hidden { display: none !important; }
hr { border: 0; border-top: 1px solid var(--line); margin: clamp(2rem, 5vw, 3rem) 0; }

/* ---------- Bildflächen ---------- */
/* Die Grafiken sind Zeichnungen und bringen ihre eigene Fläche mit;
   eine Haarlinie genügt, ein Schlagschatten wäre hier zu viel. */
.plate {
  border-radius: clamp(14px, 1.8vw, 22px);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.card hr { margin: 1.5rem 0; }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 620; }

/* ---------- Textlink mit Pfeil ---------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  font-weight: 600;
  text-decoration: none;
}
.arrow-link::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
  transition: transform .2s var(--ease);
}
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }
.inverse .arrow-link { color: var(--night-brand); }

/* ---------- Merkmalsleiste als Sprungmarken ---------- */
.marks--links ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.marks--links a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--ink-2); text-decoration: none; font-weight: 600;
}
.marks--links a:hover { color: var(--brand); }

/* ---------- Hinweiskasten ---------- */
.note {
  padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--brand-tint);
  color: var(--ink-2);
  font-size: .94rem;
}
.note b { color: var(--ink); }

/* ---------- Karten: Innenleben ---------- */
/* .card p aus Teil 1 ist spezifischer als die Hilfsklassen und würde sie sonst
   überstimmen – deshalb hier noch einmal mit Kartenbezug. */
/* Haarlinie über dem Preis: sonst liest er sich als zweite Überschriftenzeile */
.card .price {
  margin: 1.1rem 0 .35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 1.3rem; font-weight: 660; letter-spacing: -.025em; color: var(--ink);
}
.card--mark .price { border-top-color: rgba(194, 81, 0, .28); }
.card .price + .small { margin-bottom: .25rem; }
.card .small { font-size: .84rem; color: var(--ink-3); }
.card .lead  { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); color: var(--ink-2); }
/* Schaltfläche am Kartenfuß, damit sie in einer Reihe auf gleicher Höhe steht.
   Dafür muss die Karte eine Spalte sein – die Vorlage brauchte das nicht, weil
   ihre Karten alle gleich viel Text hatten. Der Kartenbezug im zweiten Selektor
   ist nötig, sonst gewinnt .card p mit seinem margin: 0. */
.card { display: flex; flex-direction: column; }
.card .card__foot { margin: auto 0 0; padding-top: 1.5rem; }

/* Vier Karten sollen 2 × 2 stehen statt 3 + 1 */
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

/* ---------- Kennzeichnung ---------- */
/* Auf dem Markenton erreicht #C25100 nur 4,34:1 und verfehlt damit AA für
   Fließtext. Auf allen getönten Flächen gilt deshalb der dunklere Ton. */
.badge, .note a, .cta a:not(.btn), .cta .btn--line, .card a:not(.btn), .brandtext {
  color: var(--brand-deep);
}
/* Auf Schwarz gilt umgekehrt der helle Akzent: #C25100 erreicht dort nur 4,31:1 */
.inverse a:not(.btn), .result a:not(.btn) { color: var(--night-brand); }
.cta .btn--line { border-color: var(--brand-deep); }
.cta .btn--line:hover { background: var(--brand-deep); color: #fff; }
.badge {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 99px;
  background: var(--brand-tint);
  font-size: .8rem;
  font-weight: 680;
}
.card--mark { background: var(--brand-tint); box-shadow: inset 0 0 0 1.5px var(--brand); }
.price { font-size: 1.5rem; font-weight: 660; letter-spacing: -.03em; color: var(--ink); }

/* ---------- Rechtstexte ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: 2em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose dl { margin: 0 0 1.5em; }
.prose dt { margin-top: 1em; font-weight: 640; color: var(--ink); }
.prose dd { margin: .2em 0 0; color: var(--ink-2); }
.prose address { font-style: normal; line-height: 1.8; color: var(--ink-2); }

.table-scroll { overflow-x: auto; margin-bottom: 1.5em; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
caption { padding-bottom: .75rem; text-align: left; color: var(--ink-3); font-size: .86rem; }
th, td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-weight: 640; color: var(--ink); background: var(--paper-2); }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }
.field > label { font-size: .94rem; font-weight: 620; letter-spacing: -.01em; }
.field .hint { font-size: .82rem; color: var(--ink-3); }
.field--required > label::after { content: " *"; color: var(--brand); }
.field > label.checkbox { font-weight: 400; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: .75rem .95rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  appearance: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.textarea { min-height: 9rem; line-height: 1.5; resize: vertical; }
.select {
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-shadow);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.input:user-invalid, .textarea:user-invalid { border-color: #B3261E; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .94rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.checkbox input[type="checkbox"] { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--brand); }


/* Spam-Falle: für Menschen und Screenreader unsichtbar */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fußbereich ---------- */
/* Die Vorlage hatte eine einzige Zeile. Weil „Leistungen" nicht mehr in der
   Menüzeile steht, trägt der Fuß jetzt die Tiefenverlinkung – bleibt aber
   in derselben leisen Typografie. */
.foot__nav {
  display: grid;
  gap: 1.75rem clamp(1rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: 2.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.foot__nav h2 {
  margin-bottom: .9rem;
  font-size: .76rem;
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot__nav ul { margin: 0; padding: 0; list-style: none; }
.foot__nav li { margin-bottom: .4rem; }
.foot__nav a, .foot address a { display: inline-flex; align-items: center; min-height: 28px; }
.foot address { font-style: normal; line-height: 1.8; }
.foot__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--ink-3); }

/* ---------- Sichtbarkeitsmodi ---------- */
@media (forced-colors: active) {
  .card, .steps li, .input, .select, .textarea, .plate { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
}

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

@media print {
  .top, .foot, .btns, .skip, .top__toggle { display: none !important; }
  .plate, .stage__shot { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .inverse { background: #fff !important; color: #000 !important; }
  .inverse h2, .inverse h3, .inverse .lead, .inverse p { color: #000 !important; }
  section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}


/* Abgrenzungsliste: dasselbe Raster, aber ein Strich statt eines Hakens.
   Ein Häkchen vor „Kein fertiges Produkt" würde die Aussage verdrehen. */
.pledges--minus li::before {
  top: .72em;
  width: .8rem; height: 0;
  border-width: 0 0 2.5px 0;
  border-color: var(--ink-3);
  transform: none;
}

/* ---------- Bühne mit dem Angebot ---------- */
/* Die Schauzeile ist zwei Sätze lang und damit deutlich länger als eine
   Schlagzeile. In der Grundgröße stünde sie über fünf Zeilen; eine Stufe
   kleiner liest sie sich in vier und bleibt trotzdem die größte Fläche
   der Seite. */
.stage--angebot h1 {
  font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5rem);
  max-width: 22ch;
}
.stage--angebot .lead { max-width: 52ch; }

/* ---------- Die Wette ---------- */
/* Einsatz, Gegeneinsatz, Bedingung – nebeneinander wie auf einem Wettschein.
   Der Vorbehalt steckt in der dritten Spalte und ist damit Spielregel statt
   Kleingedrucktes. Genau das ist der Punkt: Ein Vorbehalt, der wie eine
   Fußnote aussieht, weckt das Misstrauen, das er ausräumen soll. */
.wette {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  max-width: 50rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: clamp(16px, 2vw, 26px);
  background: var(--paper-2);
  text-align: left;
}
.wette > div { border-top: 2px solid var(--line); padding-top: 1rem; }
.wette dt {
  margin-bottom: .5rem;
  font-size: .78rem; font-weight: 680; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-deep);
}
.wette dd { margin: 0; font-size: .96rem; line-height: 1.55; color: var(--ink-2); }
/* Die beiden Ausgänge der Wette bekommen die Markenfarbe: Darum geht es. */
.wette > div:nth-child(3) { border-top-color: var(--line); }
.wette > div:nth-child(4) { border-top-color: var(--brand); }

/* ---------- Vorbehalt im Fließtext ---------- */
/* Auf Unterseiten, wo kein Wettschein steht. */
.caveat {
  max-width: 54ch;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.caveat a { color: var(--brand); white-space: nowrap; }

/* ---------- Einladungskarten ---------- */
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.card--invite { padding: 0; overflow: hidden; }
.card--invite .plate { border-radius: 0; box-shadow: none; }
.card--invite .card__body { padding: clamp(1.35rem, 2.4vw, 1.8rem); }
.invite__von { color: var(--ink-2); margin: 0; }
.invite__zu {
  margin: .9rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 620;
}
/* Ohne Verweis darin soll die Karte auch nicht auf einen Klick warten */
.card--invite:hover { background: var(--bg-2, var(--paper-2)); transform: none; }

/* ---------- Aufforderungsblock ---------- */
/* Ein warmer Tonblock. Kein zweites Schwarz: Der invertierte Block soll das
   einzige Mal bleiben, dass diese Seite die Farbe umschlägt. */
.cta {
  padding: clamp(2.25rem, 6vw, 4rem);
  border-radius: clamp(18px, 2.6vw, 34px);
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px rgba(194, 81, 0, .18);
}
.cta h2 { max-width: 22ch; }
.cta p { max-width: 54ch; color: var(--ink-2); }
.cta--mid { text-align: center; }
.cta--mid h2, .cta--mid p { margin-inline: auto; }
.cta--mid .btns { justify-content: center; }