@charset "UTF-8";
/* ============================================================================
   Assewald-IT – Design-System
   ----------------------------------------------------------------------------
   Handgeschrieben, kein Build-Schritt nötig. Aufbau:
     01 Schriften        05 Layout-Primitive   09 Leistungs-Index  13 Kontakt
     02 Tokens           06 Buttons & Links    10 Ablauf           14 Footer
     03 Reset & Basis    07 Header / Nav       11 Beleg (Preise)   15 Rechtstexte
     04 Typografie       08 Hero & Fakten      12 Über mich        16 Motion
                                                                   17 Kontrast
                                                                   18 Dunkelmodus
                                                                   19 Aktions-Deals

   Farbregeln (WCAG-AA nachgerechnet):
     · Bernstein #FCA311 ist NIE Textfarbe auf hellem Grund (nur 1,8:1).
       Erlaubt: Fläche mit dunklem Label (6,6:1) oder Text auf Tiefsee (6,6:1).
     · Moos #679436 nur grafisch/großflächig; für Fließtext #4F7028 (5,2:1).
   ========================================================================== */

/* == 01 Schriften =========================================================== */

/* Variable Fonts, self-hosted – keine Third-Party-Requests, keine Cookies. */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metrisch angeglichener Fallback: verhindert den Layout-Sprung (CLS),
   solange die Schrift noch lädt. */
@font-face {
  font-family: "Inter fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* == 02 Tokens ============================================================== */

:root {
  /* --- Kernpalette --- */
  --tiefsee: #153243;
  --bernstein: #fca311;
  --moos: #679436;
  --dunst: #8ea8c3;
  --mint: #cbf7ed;

  /* --- Abgeleitete Tiefsee-Skala --- */
  --ink-900: #0c1e28;
  --ink-800: #153243;
  --ink-700: #23495c;
  --ink-600: #35606f;
  --ink-500: #4e6879;
  --ink-400: #7b95a6;
  --ink-300: #b4c4d1;
  --ink-200: #d9e1e7;
  --ink-100: #eceff2;

  /* --- Flächen (warmes Bein-Papier statt Slate-Grau) --- */
  --papier: #f6f4ef;
  --papier-hoch: #fffefb;
  --papier-tief: #eeebe3;
  --linie: #ddd8cd;
  --linie-stark: #c6bfb0;

  /* --- Semantisch --- */
  --text: #1d3f52;
  --text-stark: var(--ink-800);
  --text-leise: var(--ink-500);
  --text-invers: #fbfaf7;
  --moos-text: #4f7028;
  --moos-hell: #9bc16b;
  --bernstein-tief: #8a5a00;

  /* --- Typografie ---
     Eine Familie, starker Gewichts-Kontrast: leichter Fließtext gegen sehr
     fette, eng laufende Headlines – moderner als eine zweite Schriftart. */
  --schrift-body: "Inter var", "Inter fallback", system-ui, sans-serif;
  --schrift-display: "Inter var", "Inter fallback", system-ui, sans-serif;

  --fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --fs-lede: clamp(1.1875rem, 1.09rem + 0.44vw, 1.4375rem);
  --fs-display: clamp(2.6rem, 1.3rem + 5.5vw, 5.25rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.7vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --fs-klein: 0.9375rem;
  --fs-mini: 0.8125rem;
  --fs-ziffer: clamp(3.5rem, 2rem + 6.5vw, 7rem);

  /* --- Maße --- */
  --shell: 78rem;
  --shell-eng: 46rem;
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  --band-y: clamp(3.25rem, 2.25rem + 4.5vw, 6rem);
  --radius: 10px;
  --radius-gross: 18px;
  --radius-pill: 999px;

  /* --- Bewegung --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-aus: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Schatten (warm getönt, kein Neutralgrau) --- */
  --schatten-s: 0 1px 2px rgba(21, 50, 67, 0.06),
    0 2px 8px rgba(21, 50, 67, 0.05);
  --schatten-m: 0 2px 4px rgba(21, 50, 67, 0.06),
    0 12px 28px -8px rgba(21, 50, 67, 0.14);
  --schatten-l: 0 4px 8px rgba(21, 50, 67, 0.07),
    0 28px 56px -16px rgba(21, 50, 67, 0.22);
}

/* == 03 Reset & Basis ======================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele nicht unter dem fixierten Header verstecken */
  scroll-padding-top: 6.5rem;
  -webkit-tap-highlight-color: rgba(252, 163, 17, 0.2);
}

body {
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

:where(h1, h2, h3, h4) {
  font-weight: inherit;
  font-size: inherit;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Sichtbarer, konsistenter Fokusring – nie entfernen.
   Doppelring: Bernstein allein erreicht auf hellem Papier nur 1,8:1 und
   verfehlt damit die 3:1 aus WCAG 2.4.11/1.4.11. Der dunkle Außenring
   sichert den Kontrast auf hellen Flächen ab; auf dunklem Grund ist er
   unsichtbar, dort trägt umgekehrt der Bernsteinring (8,4:1). */
:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 7px rgba(12, 30, 40, 0.9);
}

/* Auf dunklen Bändern übernimmt ein heller Außenring. */
.band--ink :focus-visible,
.fakten :focus-visible,
.fuss :focus-visible {
  box-shadow: 0 0 0 7px rgba(251, 250, 247, 0.55);
}

::selection {
  background: var(--bernstein);
  color: var(--ink-900);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--ink-900);
  color: var(--text-invers);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-size: var(--fs-klein);
  font-weight: 600;
  transition: top 0.18s var(--ease);
}

.skip-link:focus {
  top: 0.75rem;
}

/* == 04 Typografie ========================================================== */

.display {
  font-family: var(--schrift-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-stark);
  text-wrap: balance;
}

.h2 {
  font-family: var(--schrift-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-stark);
}

.h3 {
  font-family: var(--schrift-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-stark);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text-leise);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Kurzer Bernstein-Balken vor dem Label – zeichnet sich beim Einblenden
   von links auf (s. Motion-Abschnitt). */
.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 3px;
  border-radius: 999px;
  background: var(--bernstein);
  flex: none;
}

.eyebrow--zentriert {
  justify-content: center;
}

/* Handgezogener Bernstein-Strich unter einem einzelnen Wort im Display-Satz. */
.streich {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
}

.streich::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0;
  height: 0.16em;
  background: var(--bernstein);
  border-radius: 999px;
  z-index: -1;
  transform-origin: left center;
}

.ziffern {
  font-variant-numeric: tabular-nums;
}

/* == 05 Layout-Primitive ==================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--eng {
  max-width: calc(var(--shell-eng) + 2 * var(--gutter));
}

.band {
  padding-block: var(--band-y);
  position: relative;
}

.band--hell {
  background: var(--papier-hoch);
}

.band--ink {
  background: var(--tiefsee);
  color: var(--mint);
  /* 1px-Ring in Eigenfarbe: Die fluiden (vw-basierten) Abschnittshöhen enden
     auf Subpixeln; an der Kante Dunkel->Hell entsteht sonst eine Anti-Aliasing-
     Haarlinie, die bei Hover-Repaints (CTA-Transitions) die Farbe wechselt. */
  box-shadow: 0 0 0 1px var(--tiefsee);
}

.band--ink .h2,
.band--ink .h3,
.band--ink .display {
  color: var(--text-invers);
}

.band--ink .lede,
.band--ink .eyebrow {
  color: var(--dunst);
}

.band-kopf {
  max-width: 44rem;
  position: relative;
}

.band-kopf--zentriert {
  margin-inline: auto;
  text-align: center;
}

.band-kopf--zentriert .eyebrow {
  justify-content: center;
}

.band-kopf .h2 {
  margin-top: 1.1rem;
}

.band-kopf .lede {
  margin-top: 1.15rem;
}

.rule {
  height: 1px;
  background: var(--linie);
  border: 0;
}

.band--ink .rule {
  background: rgba(142, 168, 195, 0.28);
}

/* Feines Punktraster für dunkle Bänder – Textur statt Verlaufs-Blob. */
.raster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(203, 247, 237, 0.09) 1px,
    transparent 0
  );
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

/* == 06 Buttons & Links ===================================================== */

.btn {
  --btn-bg: var(--bernstein);
  --btn-text: var(--ink-900);
  --btn-rand: transparent;
  --btn-wisch: var(--ink-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid var(--btn-rand);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
    color 0.24s var(--ease), border-color 0.24s var(--ease);
}

/* Wisch-Füllung von links statt simplem Farbwechsel. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-wisch);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--ease-aus);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--text-invers);
  transform: translateY(-2px);
  box-shadow: var(--schatten-m);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.32s var(--ease);
}

.btn:hover svg,
.btn:focus-visible svg {
  transform: translateX(3px);
}

/* Sekundär: Kontur, füllt sich mit Tiefsee. */
.btn--kontur {
  --btn-bg: transparent;
  --btn-text: var(--text-stark);
  --btn-rand: var(--linie-stark);
}

.btn--kontur:hover,
.btn--kontur:focus-visible {
  border-color: var(--ink-800);
}

/* Auf dunklem Grund kehrt sich der Wisch um. */
.band--ink .btn--kontur {
  --btn-text: var(--text-invers);
  --btn-rand: rgba(203, 247, 237, 0.35);
  --btn-wisch: var(--mint);
}

.band--ink .btn--kontur:hover,
.band--ink .btn--kontur:focus-visible {
  color: var(--ink-900);
  border-color: var(--mint);
}

.btn--breit {
  width: 100%;
}

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Textlink: Unterlinie wächst zum Marker auf. */
.link {
  position: relative;
  color: var(--text-stark);
  font-weight: 600;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--bernstein), var(--bernstein));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size 0.32s var(--ease), color 0.2s var(--ease);
}

.link:hover,
.link:focus-visible {
  background-size: 100% 0.55em;
}

.band--ink .link {
  color: var(--text-invers);
}

.band--ink .link:hover,
.band--ink .link:focus-visible {
  color: var(--ink-900);
}

/* == 07 Header / Nav ======================================================== */

.kopf {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.32s var(--ease), border-color 0.32s var(--ease);
}

.kopf.is-solid {
  background: rgba(246, 244, 239, 0.9);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--linie);
}

/* Offenes Mobilmenü braucht immer eine deckende Fläche. */
.kopf.is-offen {
  background: var(--papier);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.75rem;
}

@media (min-width: 64rem) {
  .kopf-innen {
    height: 5.5rem;
  }
}

/* Wortmarke: rein typografisch, mit Bernstein-Punkt statt Gradient-Kachel. */
.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--schrift-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-stark);
  line-height: 1;
}

.marke em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-leise);
}

.marke::after {
  content: "";
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--bernstein);
  align-self: flex-end;
  margin-bottom: 0.08em;
  transition: transform 0.32s var(--ease);
}

.marke:hover::after,
.marke:focus-visible::after {
  transform: translateY(-0.3em) scale(1.15);
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 0.4rem + 1.6vw, 2.25rem);
}

.nav-link {
  position: relative;
  font-size: var(--fs-klein);
  font-weight: 550;
  color: var(--text-leise);
  padding-block: 0.35rem;
  transition: color 0.22s var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--bernstein);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s var(--ease-aus);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-aktiv {
  color: var(--text-stark);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-aktiv::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Telefonnummer sichtbar im Header – primärer Kontaktweg der Zielgruppe. */
.kopf-tel {
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-klein);
  font-weight: 700;
  color: var(--text-stark);
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: border-color 0.24s var(--ease), background-color 0.24s var(--ease);
}

.kopf-tel svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--moos-text);
}

.kopf-tel:hover,
.kopf-tel:focus-visible {
  border-color: var(--ink-800);
  background: var(--papier-hoch);
}

.kopf-werkzeuge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 60rem) {
  .nav {
    display: flex;
  }

  .kopf-tel {
    display: inline-flex;
  }
}

/* Icon-Button (Kontrast-Schalter, Burger). */
.ikon-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--text-stark);
  border: 1.5px solid transparent;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.ikon-btn svg {
  width: 1.35rem;
  height: 1.35rem;
}

.ikon-btn:hover,
.ikon-btn:focus-visible {
  background: var(--papier-tief);
  border-color: var(--linie);
}

@media (min-width: 60rem) {
  .ikon-btn--burger {
    display: none;
  }
}

/* Dreifach-Schalter für den Anzeigemodus: Hell | Dunkel (Standard) | Kontrast.
   Die aktive Option bekommt den Bernstein-Punkt – lesbar in allen drei Modi. */
.modus-schalter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--radius-pill);
}

.modus-opt {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--text-leise);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.modus-opt svg {
  width: 1.05rem;
  height: 1.05rem;
}

.modus-opt:hover {
  background: var(--papier-tief);
  color: var(--text-stark);
}

.modus-opt[aria-pressed="true"] {
  background: var(--bernstein);
  color: var(--ink-900);
}

/* Burger wechselt zum Schließkreuz, sobald das Menü offen ist. */
.burger-auf {
  display: none;
}

.kopf.is-offen .burger-auf {
  display: block;
}

.kopf.is-offen .burger-zu {
  display: none;
}

/* Mobiles Menü – Höhe animiert über grid-template-rows (kein max-height-Rätsel). */
.menu {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows 0.38s var(--ease-aus),
    border-color 0.38s var(--ease);
}

.menu.is-offen {
  grid-template-rows: 1fr;
  border-top-color: var(--linie);
}

/* visibility verhindert, dass Links im geschlossenen Menü per Tab erreichbar
   bleiben – overflow:hidden allein nimmt sie nicht aus der Fokusreihenfolge. */
.menu-innen {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.38s;
}

.menu.is-offen .menu-innen {
  visibility: visible;
  transition-delay: 0s;
}

.menu-liste {
  padding-block: 0.5rem 0;
}

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  font-family: var(--schrift-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-stark);
  border-bottom: 1px solid var(--linie);
}

.menu-link svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--bernstein-tief);
  transition: transform 0.28s var(--ease);
}

.menu-link:hover svg,
.menu-link:focus-visible svg {
  transform: translateX(4px);
}

.menu-aktion {
  margin-top: 1.35rem;
  padding-bottom: 1.75rem;
}

@media (min-width: 60rem) {
  .menu {
    display: none;
  }
}

/* Sehr schmale Geräte: Marke + Modus-Schalter + Menü-Knopf passten zusammen
   nicht mehr in die Zeile. Bei 320 px endete der Menü-Knopf 9 px außerhalb und
   wurde von "body { overflow-x: hidden }" lautlos abgeschnitten – auffällig
   wird das erst, wenn man ihn treffen will. WCAG 1.4.10 verlangt Bedienbarkeit
   bis hinunter zu 320 px, deshalb hier Abstände und Marke enger ziehen.
   MUSS am Ende von Abschnitt 07 stehen: Media Queries erhöhen die Spezifität
   nicht, weiter oben würden die Basisregeln (.marke, .modus-opt) gewinnen. */
@media (max-width: 23rem) {
  .kopf-innen {
    gap: 0.6rem;
  }

  .marke {
    font-size: 1.15rem;
  }

  .modus-opt {
    width: 1.85rem;
    height: 1.85rem;
  }
}

/* == 08 Hero & Fakten ======================================================= */

.hero {
  position: relative;
  padding-top: clamp(7rem, 5rem + 7vw, 9.5rem);
  padding-bottom: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
}

/* Weicher Bernstein-Schimmer oben rechts statt der üblichen Blur-Blobs. */
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -10%;
  width: min(46rem, 92vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(252, 163, 17, 0.15),
    rgba(252, 163, 17, 0) 62%
  );
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(3.5rem, 1rem + 7vw, 5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(3rem, 1rem + 5vw, 5.5rem);
  }
}

.hero-display {
  margin-top: 1.5rem;
}

.hero-lede {
  margin-top: 1.6rem;
  max-width: 34rem;
}

.hero-punkte {
  margin-top: 2rem;
  display: grid;
  gap: 0.8rem;
}

.hero-punkt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-klein);
  color: var(--text);
}

.hero-punkt svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.22rem;
  color: var(--moos-text);
}

/* Webdesign-Hinweis: bernsteinfarbener Funke + Betonung, vom Rest abgesetzt. */
.hero-punkt--neu {
  margin-top: 0.35rem;
}

.hero-punkt--neu svg {
  color: var(--bernstein-tief);
}

.hero-punkt--neu strong {
  font-weight: 750;
  color: var(--text-stark);
}

.hero-aktionen {
  margin-top: 2.4rem;
}

/* Portrait: harte Kante, versetzter Bernstein-Block dahinter. */
.portrait {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}

.portrait::before {
  content: "";
  position: absolute;
  inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  background: var(--bernstein);
  border-radius: var(--radius-gross);
  z-index: 0;
}

.portrait-rahmen {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--papier-tief);
  box-shadow: var(--schatten-l);
  aspect-ratio: 698 / 857;
}

.portrait-rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
}

/* Namensschild, halb überlappend. */
.portrait-schild {
  position: absolute;
  z-index: 2;
  left: -0.75rem;
  bottom: 1.4rem;
  background: var(--papier-hoch);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--bernstein);
  border-radius: var(--radius);
  padding: 0.75rem 1.1rem;
  box-shadow: var(--schatten-m);
  max-width: 15rem;
}

.portrait-schild strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-stark);
  line-height: 1.2;
}

.portrait-schild span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-mini);
  color: var(--text-leise);
}

/* --- Fakten-Band: große Ziffern statt Icon-Trio --- */
.fakten {
  background: var(--tiefsee);
  color: var(--mint);
  position: relative;
  overflow: hidden;
  /* Gleicher Subpixel-Schutz wie bei .band--ink (s. dort). */
  box-shadow: 0 0 0 1px var(--tiefsee);
}

.fakten-grid {
  display: grid;
}

.fakt {
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-bottom: 1px solid rgba(142, 168, 195, 0.24);
}

.fakt:last-child {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .fakten-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .fakt {
    border-bottom: 0;
    border-right: 1px solid rgba(142, 168, 195, 0.24);
    padding-inline: clamp(1.25rem, 0.4rem + 2vw, 2.5rem);
  }

  .fakt:first-child {
    padding-left: 0;
  }

  .fakt:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

.fakt-wert {
  font-family: var(--schrift-display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bernstein);
}

.fakt-wert small {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dunst);
  margin-left: 0.3em;
  font-family: var(--schrift-body);
}

.fakt-label {
  margin-top: 0.7rem;
  font-size: var(--fs-klein);
  color: var(--text-invers);
  font-weight: 600;
}

.fakt-hinweis {
  margin-top: 0.2rem;
  font-size: var(--fs-mini);
  color: var(--dunst);
}

/* == 09 Leistungs-Index ===================================================== */

.index {
  margin-top: clamp(2.25rem, 1.25rem + 3vw, 3.5rem);
  border-top: 1px solid var(--linie);
}

.leistung {
  position: relative;
  display: grid;
  gap: 0.35rem 1.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--linie);
}

/* Bernstein-Wisch, der von links einläuft – reine Dekoration. */
.leistung::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  background: linear-gradient(
    90deg,
    rgba(252, 163, 17, 0.13),
    rgba(252, 163, 17, 0) 78%
  );
  opacity: 0;
  transition: opacity 0.34s var(--ease);
  pointer-events: none;
  border-radius: var(--radius);
}

.leistung:hover::before,
.leistung:focus-within::before {
  opacity: 1;
}

.leistung-nr {
  font-family: var(--schrift-display);
  font-size: var(--fs-klein);
  font-weight: 700;
  color: var(--text-leise);
  padding-top: 0.35em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease), transform 0.34s var(--ease);
}

.leistung:hover .leistung-nr {
  color: var(--bernstein-tief);
  transform: translateX(3px);
}

.leistung-inhalt {
  display: grid;
  gap: 0.45rem;
}

@media (min-width: 56rem) {
  .leistung-inhalt {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 0.5rem + 3vw, 4rem);
    align-items: start;
  }
}

.leistung-titel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--schrift-display);
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-stark);
}

.leistung-titel svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  color: var(--moos-text);
  transition: transform 0.34s var(--ease);
}

.leistung:hover .leistung-titel svg {
  transform: translateY(-2px) rotate(-4deg);
}

.leistung-text {
  color: var(--text-leise);
  font-size: var(--fs-klein);
  line-height: 1.6;
  max-width: 46ch;
}

/* --- Webdesign: hervorgehobene Notiz – Bernstein-Rahmen wie ein markierter
   Coupon, dazu ein warmer Farbwisch und etwas Tiefe. --- */
.notiz {
  position: relative;
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  border: 2px dashed rgba(252, 163, 17, 0.7);
  border-radius: var(--radius-gross);
  background: linear-gradient(
      135deg,
      rgba(252, 163, 17, 0.1),
      rgba(252, 163, 17, 0) 55%
    ),
    var(--papier-hoch);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  box-shadow: var(--schatten-m);
}

@media (min-width: 56rem) {
  .notiz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* „Neu im Angebot“-Stempel, leicht gedreht – Bernstein als Signalfarbe. */
.stempel {
  display: inline-block;
  transform: rotate(-2.5deg);
  border: 2px solid var(--bernstein);
  color: var(--bernstein-tief);
  background: rgba(252, 163, 17, 0.12);
  border-radius: var(--radius);
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.notiz .h3 {
  margin-top: 1.1rem;
}

.notiz > div > p {
  margin-top: 0.9rem;
  color: var(--text-leise);
  font-size: var(--fs-klein);
}

.merkmale {
  display: grid;
  gap: 1.1rem;
}

.merkmal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.merkmal svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.28rem;
  flex: none;
  color: var(--moos-text);
}

.merkmal strong {
  display: block;
  font-weight: 700;
  color: var(--text-stark);
  font-size: var(--fs-klein);
}

.merkmal span {
  display: block;
  font-size: var(--fs-klein);
  color: var(--text-leise);
  line-height: 1.55;
}

.notiz .btn-reihe {
  margin-top: 1.5rem;
}

.nachsatz {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  font-size: var(--fs-klein);
  color: var(--text-leise);
}

/* == 10 Ablauf ============================================================== */

.schritte {
  margin-top: clamp(2.25rem, 1.25rem + 3vw, 3.5rem);
  display: grid;
  gap: clamp(2.25rem, 1rem + 4vw, 3.5rem);
}

@media (min-width: 56rem) {
  .schritte {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 0.5rem + 4vw, 4rem);
    /* Raum für den Treppenversatz der letzten Spalte. */
    padding-bottom: 4.5rem;
  }
}

.schritt {
  position: relative;
  padding-top: clamp(2.5rem, 1rem + 4vw, 4rem);
}

/* Übergroße Outline-Ziffer im Hintergrund. */
.schritt-nr {
  position: absolute;
  top: 0;
  left: -0.05em;
  font-family: var(--schrift-display);
  font-size: var(--fs-ziffer);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--linie-stark);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: -webkit-text-stroke-color 0.4s var(--ease);
}

.schritt:hover .schritt-nr {
  -webkit-text-stroke-color: var(--bernstein);
}

/* Versatz erzeugt eine Treppe statt einer geraden Reihe.
   Über margin statt transform, weil das Scroll-Reveal (transform: none auf
   .is-visible) einen translateY-Versatz wieder aufheben würde. */
@media (min-width: 56rem) {
  .schritt:nth-child(2) {
    margin-top: 2.25rem;
  }

  .schritt:nth-child(3) {
    margin-top: 4.5rem;
  }
}

.schritt-titel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--schrift-display);
  font-size: var(--fs-h3);
  font-weight: 750;
  color: var(--text-stark);
  letter-spacing: -0.015em;
}

.schritt-titel svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  color: var(--bernstein-tief);
}

.schritt-text {
  margin-top: 0.7rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
  max-width: 34ch;
}

/* == 11 Beleg (Preise) ====================================================== */

.beleg-buehne {
  margin-top: clamp(2.25rem, 1.25rem + 3vw, 3.25rem);
  max-width: 44rem;
  margin-inline: auto;
}

/* Kassenbon-Metapher: Papierfläche mit perforierter Abrisskante. */
.beleg {
  position: relative;
  background: var(--papier-hoch);
  color: var(--text);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  box-shadow: var(--schatten-l);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  transform: rotate(-0.5deg);
  transition: transform 0.5s var(--ease);
}

.beleg:hover,
.beleg:focus-within {
  transform: rotate(0deg);
}

.beleg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 14px;
  background: var(--papier-hoch);
  -webkit-mask-image: radial-gradient(
    circle at 7px 0,
    transparent 7px,
    #000 7.5px
  );
  mask-image: radial-gradient(circle at 7px 0, transparent 7px, #000 7.5px);
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

@media (max-width: 40rem) {
  .beleg {
    transform: none;
  }
}

.beleg-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink-800);
}

.beleg-marke {
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-stark);
}

.beleg-meta {
  font-size: var(--fs-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.beleg-preis {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.beleg-preis b {
  font-family: var(--schrift-display);
  font-size: clamp(4rem, 2.2rem + 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--text-stark);
}

.beleg-preis span {
  font-size: var(--fs-lede);
  font-weight: 600;
  color: var(--text-leise);
}

.beleg-unterzeile {
  text-align: center;
  font-size: var(--fs-klein);
  color: var(--text-leise);
  margin-top: 0.85rem;
  padding-bottom: 1.75rem;
}

/* Positionen wie auf einem echten Beleg. */
.posten {
  display: grid;
  gap: 1.75rem;
  padding-block: 1.75rem;
  border-top: 1px dashed var(--linie-stark);
  border-bottom: 1px dashed var(--linie-stark);
}

@media (min-width: 44rem) {
  .posten {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  }
}

.posten-titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--schrift-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-stark);
  margin-bottom: 0.9rem;
}

.posten-titel svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  color: var(--bernstein-tief);
}

.posten-liste {
  display: grid;
  gap: 0.6rem;
}

.posten-liste li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
  line-height: 1.5;
}

.posten-liste li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--moos);
  transform: translateY(-0.15em);
}

.beleg-fuss {
  padding-top: 1.5rem;
}

.kleingedruckt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  font-size: var(--fs-mini);
  line-height: 1.6;
  color: var(--text-leise);
}

.kleingedruckt svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  flex: none;
}

.beleg-cta {
  margin-top: 1.5rem;
}

/* Zweitkarte: Webdesign – bewusst hervorgehoben (Bernstein-Rahmen + Wisch). */
.ausblick {
  border: 1.5px solid rgba(252, 163, 17, 0.55);
  border-radius: var(--radius-gross);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: 2.5rem;
  background: linear-gradient(
    135deg,
    rgba(252, 163, 17, 0.14),
    rgba(252, 163, 17, 0.02) 60%
  );
}

.ausblick-ikon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--bernstein);
  color: var(--ink-900);
}

.ausblick-ikon svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Der Stempel steht hier auf dunklem Grund -> helles Bernstein als Text. */
.ausblick .stempel {
  margin-bottom: 0.85rem;
  color: var(--bernstein);
}

.ausblick h3 {
  font-family: var(--schrift-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-invers);
  line-height: 1.25;
}

.ausblick p {
  margin-top: 0.4rem;
  font-size: var(--fs-klein);
  color: var(--dunst);
}

.ausblick .btn-reihe {
  margin-top: 1.25rem;
}

/* == 12 Über mich =========================================================== */

.ueber-grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
}

@media (min-width: 62rem) {
  .ueber-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
  }
}

/* Großes Zitat als visueller Anker – klarer Bernstein-Balken statt Ornament. */
.zitat {
  position: relative;
  font-family: var(--schrift-display);
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-stark);
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--bernstein);
}

.zitat-quelle {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--schrift-body);
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: 0;
}

.ueber-text {
  display: grid;
  gap: 1.15rem;
}

.ueber-text p {
  color: var(--text-leise);
}

.ueber-text strong {
  color: var(--text-stark);
  font-weight: 700;
}

/* Haltung: Haarlinien-Zeilen statt Kartenraster. */
.haltung {
  margin-top: 2.5rem;
  border-top: 1px solid var(--linie);
}

.haltung-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 8.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linie);
}

.haltung-zeile svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--bernstein-tief);
  align-self: center;
}

.haltung-zeile strong {
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-stark);
}

.haltung-zeile span {
  font-size: var(--fs-klein);
  color: var(--text-leise);
}

@media (max-width: 34rem) {
  .haltung-zeile {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .haltung-zeile span {
    grid-column: 2;
  }
}

/* == 13 Kontakt ============================================================= */

.kontakt-liste {
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  border-top: 1px solid rgba(142, 168, 195, 0.28);
}

.kontakt-zeile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 2vw, 2.25rem);
  width: 100%;
  text-align: left;
  padding-block: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  border-bottom: 1px solid rgba(142, 168, 195, 0.28);
}

.kontakt-zeile::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  border-radius: var(--radius);
  background: rgba(203, 247, 237, 0.06);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  pointer-events: none;
}

.kontakt-zeile:hover::before,
.kontakt-zeile:focus-visible::before {
  opacity: 1;
}

.kontakt-ikon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  border: 1.5px solid rgba(142, 168, 195, 0.4);
  color: var(--mint);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.kontakt-ikon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.kontakt-zeile:hover .kontakt-ikon,
.kontakt-zeile:focus-visible .kontakt-ikon {
  background: var(--bernstein);
  border-color: var(--bernstein);
  color: var(--ink-900);
}

.kontakt-label {
  display: block;
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dunst);
}

.kontakt-wert {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--schrift-display);
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-invers);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.kontakt-pfeil {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--bernstein);
  transition: transform 0.34s var(--ease);
}

.kontakt-zeile:hover .kontakt-pfeil,
.kontakt-zeile:focus-visible .kontakt-pfeil {
  transform: translateX(5px);
}

/* WhatsApp-Einwilligung (Zwei-Klick-Lösung) */
.einwilligung {
  margin-top: 1.75rem;
  border: 1px solid rgba(142, 168, 195, 0.35);
  border-left: 3px solid var(--bernstein);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.85rem);
  background: rgba(203, 247, 237, 0.05);
}

.einwilligung[hidden] {
  display: none;
}

.einwilligung-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.einwilligung-kopf svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--moos-hell);
}

.einwilligung-kopf strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-invers);
}

.einwilligung-kopf p {
  margin-top: 0.6rem;
  font-size: var(--fs-klein);
  color: var(--dunst);
  line-height: 1.6;
}

.einwilligung .btn-reihe {
  margin-top: 1.35rem;
}

.erreichbarkeit {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-klein);
  color: var(--dunst);
}

.erreichbarkeit svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--moos-hell);
}

/* == 14 Footer ============================================================== */

.fuss {
  background: var(--ink-900);
  color: var(--dunst);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4rem) 2rem;
  font-size: var(--fs-klein);
  /* Gleicher Subpixel-Schutz wie bei .band--ink (s. dort). */
  box-shadow: 0 0 0 1px var(--ink-900);
}

.fuss-grid {
  display: grid;
  gap: clamp(2.25rem, 1rem + 4vw, 3.5rem);
}

@media (min-width: 48rem) {
  .fuss-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

/* Einzugsgebiet als eigenes, volles Band unter den Spalten. */
.fuss-orte {
  margin-top: clamp(2.25rem, 1rem + 3vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(142, 168, 195, 0.18);
}

.fuss h2 {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-invers);
  margin-bottom: 1.1rem;
}

.fuss-marke {
  color: var(--text-invers);
  font-size: 1.5rem;
}

/* Das gedämpfte „-IT" der Wortmarke braucht in der Fußzeile eine EIGENE Farbe:
   ".marke em" setzt --text-leise, was für den Header auf hellem Papier gedacht
   ist. Hier liegt die Marke auf --ink-900, und --text-leise ist im hellen wie
   im Kontrastmodus ein dunkles Grau – Ergebnis waren 2,9:1 bzw. 1,2:1.
   --dunst ist die gedämpfte Farbe DIESER Fläche (die Fußzeile nutzt sie ohnehin
   als Grundton) und trägt in allen drei Modi. */
.fuss-marke em {
  color: var(--dunst);
}

.fuss-strap {
  margin-top: 1rem;
  max-width: 26rem;
  line-height: 1.65;
}

.fuss-liste {
  display: grid;
  gap: 0.65rem;
}

.fuss-liste a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: color 0.22s var(--ease);
  overflow-wrap: anywhere;
}

.fuss-liste a svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--bernstein);
}

.fuss-liste a:hover,
.fuss-liste a:focus-visible {
  color: var(--text-invers);
}

/* Orte als Fließsatz mit Bernstein-Trennern statt Bullet-Spalte. */
.orte {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.8;
}

.orte li:not(:last-child)::after {
  content: "·";
  color: var(--bernstein);
  margin-inline: 0.5rem;
}

.orte li:last-child {
  color: var(--text-invers);
  font-weight: 600;
  width: 100%;
  margin-top: 0.5rem;
}

.fuss-unten {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(142, 168, 195, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-mini);
}

.fuss-recht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

/* min-height sichert die 24 px Zielgröße aus WCAG 2.2 (2.5.8): Die Zeilenhöhe
   allein ergab bei --fs-mini nur 21 px. Die Schriftgröße bleibt unverändert,
   es wächst ausschließlich die Trefferfläche. */
.fuss-recht a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color 0.22s var(--ease);
}

.fuss-recht a:hover,
.fuss-recht a:focus-visible {
  color: var(--text-invers);
}


/* Schwebender Anruf-Button (mobil) */
.ruf-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--bernstein);
  color: var(--ink-900);
  box-shadow: 0 8px 24px rgba(21, 50, 67, 0.3);
  transition: transform 0.3s var(--ease);
}

.ruf-fab svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ruf-fab:hover,
.ruf-fab:focus-visible {
  transform: scale(1.06);
}

@media (min-width: 60rem) {
  .ruf-fab {
    display: none;
  }
}

/* == 15 Rechtstexte ========================================================= */

.legal-kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--papier-hoch);
}

.legal-kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
}

/* Der Rechtstext-Kopf trägt mehr als der Startseiten-Kopf: Die Marke steht hier
   neben dem AUSGESCHRIEBENEN Rücklink plus Modus-Schalter. Bei 320 px sprengte
   das die Zeile und erzeugte echtes Querscrollen (WCAG 1.4.10) – anders als auf
   der Startseite, wo "body { overflow-x: hidden }" es kaschierte.
   Umbruch statt Verkleinern, damit der Rücklink beschriftet bleibt. */
@media (max-width: 23rem) {
  .legal-kopf-innen,
  .kopf-werkzeuge {
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
  }
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-klein);
  font-weight: 550;
  color: var(--text-leise);
  transition: color 0.22s var(--ease);
}

.zurueck svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.28s var(--ease);
}

.zurueck:hover,
.zurueck:focus-visible {
  color: var(--text-stark);
}

.zurueck:hover svg,
.zurueck:focus-visible svg {
  transform: translateX(-3px);
}

.legal-main {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.legal-titel {
  font-family: var(--schrift-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-stark);
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink-800);
  margin-bottom: 2rem;
  /* „Datenschutzerklärung" ist ein Wort und bei 320 px rund 383 px breit – die
     Seite ließ sich dadurch seitlich schieben (WCAG 1.4.10). hyphens trennt
     dank lang="de" sinnvoll (Daten-schutz-erklärung); overflow-wrap ist das
     Netz für Engines ohne deutsches Trennmuster. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.prosa {
  max-width: 42rem;
}

.prosa h2 {
  font-family: var(--schrift-display);
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-stark);
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 7rem;
}

.prosa > h2:first-child {
  margin-top: 0;
}

.prosa p {
  margin-bottom: 1rem;
  color: var(--text-leise);
}

.prosa ul {
  margin: 0.5rem 0 1.25rem;
  display: grid;
  gap: 0.45rem;
}

.prosa ul li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--text-leise);
}

.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bernstein);
}

.prosa strong,
.prosa .betont {
  color: var(--text-stark);
  font-weight: 700;
}

.prosa a {
  color: var(--text-stark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--bernstein);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.22s var(--ease);
}

.prosa a:hover,
.prosa a:focus-visible {
  text-decoration-color: var(--ink-800);
}

/* Gesetzlich vorgeschriebener Hinweiskasten (z. B. Widerspruchsrecht nach
   Art. 21 DSGVO). Der Hinweis muss "in verständlicher und von anderen
   Informationen getrennter Form" erscheinen – die Absetzung läuft deshalb
   über Fläche UND Rahmen, nicht über Farbe allein (sonst WCAG 1.4.1).
   Alle Farben kommen aus Tokens und stimmen dadurch in allen drei Modi. */
.prosa .rechtshinweis {
  margin: 1.75rem 0;
  padding: 1.25rem 1.4rem;
  border-left: 4px solid var(--moos);
  border-radius: var(--radius);
  background: var(--papier-tief);
}

.prosa .rechtshinweis p {
  margin-bottom: 0;
  color: var(--text);
}

/* Zwei Klassen nötig: ".prosa strong" (Klasse + Element) hätte sonst die
   höhere Spezifität und würde die Moos-Auszeichnung überschreiben. */
.prosa .rechtshinweis-titel {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--moos-text);
  font-weight: 700;
}

.prosa .rechtshinweis-aktion {
  display: block;
  margin-top: 0.9rem;
  color: var(--text-stark);
  font-weight: 700;
}

/* Im Kontrastmodus zusätzlich ein harter Rahmen ringsum. */
[data-contrast="high"] .prosa .rechtshinweis {
  background: var(--papier-hoch);
  border: 2px solid var(--text-stark);
  border-left-width: 6px;
  border-left-color: var(--moos);
}

.legal-fuss {
  border-top: 1px solid var(--linie);
  padding-block: 2rem;
  text-align: center;
  font-size: var(--fs-mini);
  color: var(--text-leise);
}

/* Gleiche 24-px-Zielgröße wie bei .fuss-recht a (WCAG 2.2 / 2.5.8).
   Die Links IM Fließtext (E-Mail, Aufsichtsbehörde) bleiben bewusst unangetastet:
   Für Links innerhalb eines Textblocks nimmt 2.5.8 ausdrücklich aus, und ein
   erzwungenes 24-px-Raster würde dort den Zeilenfall zerreißen. */
.legal-fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-stark);
  font-weight: 550;
}

.legal-fuss a:hover,
.legal-fuss a:focus-visible {
  text-decoration: underline;
}

/* == 16 Motion ============================================================== */

/* Scroll-Reveal – Startzustand nur bei aktivem JS (.js am <html>), damit ohne
   JS niemals Inhalte unsichtbar bleiben. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s var(--ease), transform 0.68s var(--ease);
  transition-delay: calc(var(--i, 0) * 75ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Der Bernstein-Strich zeichnet sich beim Einblenden. */
.js .streich::after {
  transform: scaleX(0);
  transition: transform 0.75s var(--ease-aus) 0.4s;
}

.js .is-visible .streich::after {
  transform: scaleX(1);
}

/* Auch der Eyebrow-Balken wächst beim Einblenden von links auf. */
.js [data-reveal] .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-aus) 0.25s;
}

.js [data-reveal].is-visible .eyebrow::before {
  transform: scaleX(1);
}

/* Sanfte Parallaxe des Portraits (Wert kommt aus main.js). */
.parallax {
  transform: translate3d(0, var(--py, 0px), 0);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .streich::after {
    transform: scaleX(1);
  }

  .parallax {
    transform: none;
  }
}

/* == 17 Hoher Kontrast ====================================================== */

/* Ein Attribut am <html>, von theme.js vor dem ersten Paint gesetzt.
   Ziel: durchgehend AAA-nahe Kontraste, keine Transparenzen, harte Ränder. */
[data-contrast="high"] {
  --papier: #ffffff;
  --papier-hoch: #ffffff;
  --papier-tief: #f0f0f0;
  --linie: #000000;
  --linie-stark: #000000;
  --tiefsee: #04121a;
  --ink-900: #000000;
  --ink-800: #04121a;
  --ink-400: #e8e8e8;
  --text: #04121a;
  --text-stark: #000000;
  --text-leise: #1c1c1c;
  --text-invers: #ffffff;
  --dunst: #f2f2f2;
  --mint: #ffffff;
  --moos: #2f4d10;
  --moos-text: #2f4d10;
  --moos-hell: #d6ff9e;
  --bernstein: #ffb31a;
  --bernstein-tief: #5c3800;
  --schatten-s: none;
  --schatten-m: none;
  --schatten-l: none;
}

[data-contrast="high"] .hero::before,
[data-contrast="high"] .raster {
  display: none;
}

[data-contrast="high"] .kopf.is-solid {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-width: 2px;
}

[data-contrast="high"] .leistung::before,
[data-contrast="high"] .kontakt-zeile::before {
  display: none;
}

[data-contrast="high"] .leistung:hover,
[data-contrast="high"] .kontakt-zeile:hover {
  outline: 2px solid var(--bernstein);
  outline-offset: -2px;
}

[data-contrast="high"] .portrait-rahmen img {
  filter: contrast(1.12) saturate(1.05);
}

[data-contrast="high"] .schritt-nr {
  -webkit-text-stroke-color: #000000;
}

[data-contrast="high"] .beleg {
  border: 2px solid #000000;
  transform: none;
}

[data-contrast="high"] .ausblick,
[data-contrast="high"] .einwilligung,
[data-contrast="high"] .kontakt-ikon,
[data-contrast="high"] .kontakt-liste,
[data-contrast="high"] .kontakt-zeile,
[data-contrast="high"] .fakt {
  border-color: #ffffff;
}

[data-contrast="high"] .einwilligung {
  background: transparent;
}

/* Die Bernstein-Hervorhebung der Webdesign-Karten wird hart gezogen:
   keine Farbwische, dafür kräftige Ränder. */
[data-contrast="high"] .notiz {
  background: #ffffff;
  border-color: #000000;
}

[data-contrast="high"] .ausblick {
  background: transparent;
  border-color: var(--bernstein);
}

/* Links im Fließtext immer unterstrichen – nicht nur farblich markiert. */
[data-contrast="high"] .prosa a,
[data-contrast="high"] .link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background-image: none;
}

[data-contrast="high"] .btn {
  border-width: 2px;
  border-color: #000000;
}

[data-contrast="high"] .btn--kontur {
  border-color: currentColor;
}

/* == 18 Dunkelmodus ========================================================= */

/* Dritter Anzeigemodus im Schalter-Zyklus (Standard -> Hoher Kontrast ->
   Dunkel). Gleiche Mechanik wie der Kontrastmodus: ein Attribut am <html>,
   die Bänder behalten ihr originales Tiefsee, nur die Papierflächen und
   Textfarben wechseln. Alle Kombinationen >= AA nachgerechnet. */
[data-contrast="dark"] {
  color-scheme: dark;

  --papier: #0c1e28;
  --papier-hoch: #12293a;
  --papier-tief: #0a1720;
  --linie: #26445a;
  --linie-stark: #3a5a71;

  --text: #d6e0e7;
  --text-stark: #f2f5f7;
  --text-leise: #9fb4c2;

  --moos-text: #a5cd76;
  --bernstein-tief: #fcb63d;

  /* Schatten wirken auf dunklem Grund nur als weiche Kanten. */
  --schatten-s: 0 1px 2px rgba(0, 0, 0, 0.35);
  --schatten-m: 0 2px 6px rgba(0, 0, 0, 0.35);
  --schatten-l: 0 6px 24px rgba(0, 0, 0, 0.45);
}

[data-contrast="dark"] .kopf.is-solid {
  background: rgba(12, 30, 40, 0.88);
}

/* Ränder, die im Hellen auf Tiefsee gesetzt sind, brauchen im Dunkeln
   eine helle Entsprechung. */
[data-contrast="dark"] .beleg-kopf,
[data-contrast="dark"] .legal-titel {
  border-color: var(--linie-stark);
}

[data-contrast="dark"] .btn--kontur:hover,
[data-contrast="dark"] .btn--kontur:focus-visible {
  border-color: var(--text-invers);
}

/* == 19 Aktions-Deals (befristet) ===========================================

   Kampagne „Vereins- und Starter-Deals“ (Inhalte aus dem Flyer DIN lang).
   Bewusst als geschlossener Block ganz am Dateiende – inklusive der eigenen
   Kontrast- und Dunkelmodus-Regeln. Nach dem Aktionsende lässt sich dieser
   Abschnitt ersatzlos löschen, ohne dass anderswo etwas nachgezogen werden muss.

   Der Flyer arbeitet mit Himmelblau + Bernstein. Übernommen wird hier nur die
   Bernstein-Auszeichnung des Vereins-Deals; das Blau bliebe ein Fremdkörper im
   Tiefsee-/Bernstein-System der Seite. Der Kontrast zwischen den zwei Karten
   entsteht stattdessen über Moos (Standardangebot) gegen Bernstein (Aktion).
   ========================================================================== */

/* --- Dauerhaft sichtbarer Aufruf-Button ---
   Unten LINKS, weil unten rechts bereits der mobile Anruf-Button (.ruf-fab)
   sitzt – so überlagern sich die beiden nie. */
.deal-fab {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Platz für den Anruf-Button rechts freihalten. */
  max-width: calc(100vw - 6.75rem);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--bernstein);
  color: var(--ink-900);
  font-size: var(--fs-mini);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  box-shadow: 0 8px 24px rgba(21, 50, 67, 0.3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.deal-fab svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.deal-fab:hover,
.deal-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--schatten-l);
}

@media (min-width: 60rem) {
  .deal-fab {
    left: 1.5rem;
    bottom: 1.5rem;
    max-width: none;
    padding: 0.8rem 1.35rem;
    font-size: var(--fs-klein);
  }
}

/* --- Dialog ---
   Natives <dialog> mit showModal(): Fokusfalle, Inertisierung des Hintergrunds
   und Escape zum Schließen kommen dadurch vom Browser statt aus eigenem JS. */
.deal-dialog {
  /* NICHT entfernen: Ein modaler Dialog wird vom Browser über
     "dialog { margin: auto }" innerhalb seiner inset:0-Box zentriert. Der
     globale Reset "* { margin: 0 }" (Abschnitt 03) überschreibt das und würde
     den Dialog sonst oben links festnageln. */
  margin: auto;
  width: min(46rem, calc(100vw - 2rem));
  /* svh statt vh: rechnet mit den EINGEBLENDETEN Safari-Leisten, der Dialog
     ragt dadurch auf iOS nie unter die Adressleiste. Die vh-Zeile davor ist
     der Rückfall für Engines ohne svh. */
  max-height: min(88vh, 50rem);
  max-height: min(88svh, 50rem);
  padding: 0;
  border: 0;
  /* Klammert die Scrollfläche in die runden Ecken und verhindert, dass neben
     dem Innenscroller ein zweiter Scrollbalken am Dialog selbst entsteht. */
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--papier-hoch);
  color: var(--text);
  box-shadow: var(--schatten-l);
}

/* display NUR im offenen Zustand setzen – ein unbedingtes display:flex würde
   das browserseitige display:none des geschlossenen Dialogs aushebeln. */
.deal-dialog[open] {
  display: flex;
  flex-direction: column;
}

.deal-dialog::backdrop {
  background: rgba(12, 30, 40, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Scrollfläche. overscroll-behavior verhindert, dass am Listenende die Seite
   dahinter weiterscrollt – bewusst statt eines overflow:hidden am <html>,
   das beim Öffnen die Scrollleiste entfernen und das Layout verspringen ließe. */
.deal-box {
  /* NICHT auf "flex: 1" ändern. Das wäre flex-basis:0, und weil der <dialog>
     per UA-Stylesheet "height: fit-content" hat, ist die Haupthöhe des
     Flex-Containers unbestimmt. Blink leitet die Containerhöhe dann trotzdem
     aus dem Inhalt ab, WebKit (iOS-Safari UND iOS-Chrome) rechnet das Element
     auf 0 – der Dialog fiel dort auf einen schmalen Streifen zusammen.
     Wachsen muss die Fläche ohnehin nicht: Sie BESTIMMT die Dialoghöhe und
     wird nur von max-height gedeckelt, dann greift flex-shrink + Scrollen. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
}

.deal-schliessen {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--text-leise);
  background: var(--papier-hoch);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.deal-schliessen svg {
  width: 1.3rem;
  height: 1.3rem;
}

.deal-schliessen:hover,
.deal-schliessen:focus-visible {
  background: var(--papier-tief);
  color: var(--text-stark);
}

.deal-kopf {
  /* Rechts Platz für den Schließen-Knopf lassen. */
  padding-right: 2.5rem;
}

.deal-kopf .h3 {
  margin-top: 0.85rem;
}

.deal-frist {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
}

.deal-frist svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--bernstein-tief);
}

.deal-frist strong {
  color: var(--text-stark);
  font-weight: 700;
}

/* --- Die beiden Angebotskarten --- */
.deal-karten {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.35rem, 1rem + 1.5vw, 1.85rem);
}

@media (min-width: 46rem) {
  .deal-karten {
    grid-template-columns: 1fr 1fr;
  }
}

/* Die ganze Karte ist klickbar (Handler s. main.js); der Knopf darin bleibt das
   echte, per Tastatur erreichbare Bedienelement – sein Klick blubbert zur Karte. */
.deal-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid var(--linie);
  border-left: 5px solid var(--moos);
  border-radius: var(--radius);
  background: var(--papier);
  padding: 1.35rem 1.4rem 1.5rem;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease);
}

.deal-karte:hover,
.deal-karte:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--schatten-m);
}

.deal-karte--aktion {
  border-color: rgba(252, 163, 17, 0.55);
  border-left-color: var(--bernstein);
  background: linear-gradient(
      135deg,
      rgba(252, 163, 17, 0.14),
      rgba(252, 163, 17, 0.02) 60%
    ),
    var(--papier-hoch);
}

/* Badge und Stempel stehen im normalen Fluss statt absolut positioniert:
   Auf schmalen Displays rutscht der Stempel dadurch einfach in die nächste
   Zeile, statt das Badge in eine dreizeilige Pille zu quetschen. */
.deal-kartenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 0.75rem;
}

/* „nur 1 €“ – der gedrehte Stempel vom Flyer. Bernstein als Fläche mit
   dunklem Label (8,4:1), nie als Textfarbe auf hellem Grund. */
.deal-stempel {
  margin-left: auto;
  transform: rotate(-5deg);
  background: var(--bernstein);
  border: 2px solid var(--bernstein-tief);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink-900);
  white-space: nowrap;
}

.deal-badge {
  align-self: flex-start;
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moos-text);
}

.deal-badge--aktion {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--bernstein);
  color: var(--ink-900);
  letter-spacing: 0.08em;
  /* Zusammenhalten – lieber der Stempel eine Zeile tiefer als ein
     mehrzeiliges Etikett. */
  white-space: nowrap;
}

.deal-titel {
  margin-top: 0.85rem;
  font-family: var(--schrift-display);
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-stark);
}

.deal-unterzeile {
  margin-top: 0.5rem;
  font-size: var(--fs-klein);
  color: var(--text-leise);
  line-height: 1.5;
}

.deal-liste {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.deal-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: var(--text-leise);
}

.deal-liste svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.25rem;
  flex: none;
  color: var(--moos-text);
}

/* margin-top:auto schiebt den Knopf ans Kartenende – dadurch stehen beide
   Knöpfe auf einer Linie, obwohl die Karten unterschiedlich viel Text haben. */
.deal-aktion {
  margin-top: auto;
  padding-top: 1.35rem;
}

.deal-kleingedruckt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  margin-top: 1.35rem;
  font-size: var(--fs-mini);
  line-height: 1.55;
  color: var(--text-leise);
}

.deal-kleingedruckt svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  flex: none;
}

/* --- Bewegung --- */
.deal-dialog[open] {
  animation: deal-auf 0.32s var(--ease);
}

@keyframes deal-auf {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deal-dialog[open] {
    animation: none;
  }

  .deal-karte:hover,
  .deal-karte:focus-within,
  .deal-fab:hover,
  .deal-fab:focus-visible {
    transform: none;
  }
}

/* --- Hoher Kontrast: harte Ränder statt Farbwische und Transparenzen --- */
[data-contrast="high"] .deal-dialog {
  border: 2px solid var(--text-stark);
}

[data-contrast="high"] .deal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-contrast="high"] .deal-karte {
  border-color: #000000;
  border-left-width: 6px;
}

[data-contrast="high"] .deal-karte--aktion {
  background: var(--papier-hoch);
}

[data-contrast="high"] .deal-fab,
[data-contrast="high"] .deal-schliessen {
  border: 2px solid #000000;
}

/* --- Dunkelmodus: die Bernstein-Wische tragen auf dunklem Papier nicht --- */
[data-contrast="dark"] .deal-karte--aktion {
  background: rgba(252, 163, 17, 0.08);
  border-color: rgba(252, 163, 17, 0.45);
}

[data-contrast="dark"] .deal-stempel {
  border-color: var(--bernstein);
}