/* ============================================================
   NutriCheck — Magdalena Riedl
   Variante A „Beere". Violett als große Fläche, das Beerenfoto
   violett getönt, damit es nach Marke aussieht statt nach
   Stockbild. Der Beeren-Doppelpunkt aus dem Logo ist der
   Abschnittsmarker.

   Farben sind aus dem Logo gemessen, nicht geschätzt.
   Schriften liegen selbst gehostet unter assets/fonts — die Seite
   lädt nichts von Dritten nach. Auf einer Seite, auf der Menschen
   über ihre Blutwerte nachdenken, ist das kein Detail.
   ============================================================ */

@import url("assets/schriften.css");

:root {
  --violett:        #5E17EB;
  --violett-tief:   #3A0DA0;
  --violett-nacht:  #1B0546;
  --blatt:          #176818;

  --grund:          #FFFFFF;
  --grund-getont:   #F7F4FF;
  --tinte:          #1A1030;
  --tinte-leise:    #5C5378;
  --linie:          #E6E0F7;

  --mass:   clamp(1.25rem, 4vw, 3rem);
  --spalte: min(1160px, 100% - 2 * var(--mass));
  --lese:   64ch;

  --display: "Outfit", system-ui, sans-serif;
  --text:    "Source Sans 3", system-ui, sans-serif;
  --daten:   "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--text);
  font-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.14rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

.spalte { width: var(--spalte); margin-inline: auto; }
img { max-width: 100%; height: auto; }

/* ---------- Typografie ---------- */

h1, h2, h3 { font-family: var(--display); margin: 0 0 0.5em; line-height: 1.08; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
p  { margin: 0 0 1.1em; max-width: var(--lese); }
.gross { font-size: 1.15em; line-height: 1.6; color: var(--tinte-leise); }

.marker {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--daten); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--violett); margin-bottom: 1.2rem;
}
.marker::before {
  content: ""; flex: none; width: 22px; height: 12px;
  background:
    radial-gradient(circle 5.5px at 5.5px 6px, currentColor 98%, transparent 100%),
    radial-gradient(circle 5.5px at 16.5px 6px, var(--blatt) 98%, transparent 100%);
}

a { color: var(--violett); text-underline-offset: 3px; }
a:hover { color: var(--violett-tief); }
:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; border-radius: 3px; }

.sprung { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--violett); color: #fff; padding: 0.8rem 1.3rem; }
.sprung:focus { left: 0; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; flex: none; }
.logo .bildmarke { height: 34px; width: auto; }
.logo .wortmarke { height: 21px; width: auto; }
.kopf nav ul { display: flex; gap: clamp(0.85rem, 2vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.kopf nav a { font-size: 0.95rem; text-decoration: none; color: var(--tinte-leise); padding: 0.4rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--violett); border-bottom-color: var(--violett); }

/* Auf schmalen Geräten wird die Navigation nicht versteckt, sondern
   scrollbar. Wer auf dem Handy kommt, soll trotzdem zu den Kosten finden. */
@media (max-width: 1080px) {
  .kopf-innen { flex-wrap: wrap; gap: 0.2rem 1rem; padding-bottom: 0.4rem; }
  /* Die weiche Kante rechts zeigt, dass die Leiste weitergeht. */
  .kopf nav {
    width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .kopf nav::-webkit-scrollbar { display: none; }
  .kopf nav ul { gap: 1.15rem; padding-bottom: 0.15rem; }
  .kopf nav a { font-size: 0.9rem; }
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  padding: 1rem 1.75rem; border-radius: 999px;
  background: var(--violett); color: #fff;
  border: 2px solid var(--violett); text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.knopf:hover { background: var(--violett-tief); border-color: var(--violett-tief); color: #fff; transform: translateY(-2px); }
.knopf--leise { background: transparent; color: var(--violett); border-color: var(--violett); }
.knopf--leise:hover { background: var(--grund-getont); color: var(--violett-tief); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

/* ---------- Abschnitte ---------- */

/* Sprungziele: Abstand nach oben, sonst schiebt die klebende Kopfzeile
   die Überschrift aus dem Bild. */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 1080px) { section[id] { scroll-margin-top: 118px; } }

.block { padding-block: clamp(3.75rem, 8vw, 7rem); }
.block--getont { background: var(--grund-getont); }
.block--violett { background: var(--violett); color: #fff; }
.block--nacht { background: var(--violett-nacht); color: #EDE7FB; }

/* ---------- Aufmacher ---------- */

.auf { position: relative; isolation: isolate; background: var(--violett-nacht); color: #fff; overflow: hidden; }
/* Das Foto trägt den Aufmacher. Der Verlauf deckt nur so weit ab, wie die
   Schrift Halt braucht — rechts bleiben die Beeren in voller Farbe stehen. */
.auf__bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% center;
  filter: saturate(0.95) contrast(1.04);
}
.auf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg,
      rgba(20, 4, 52, 0.94) 0%,
      rgba(27, 5, 70, 0.88) 26%,
      rgba(46, 10, 122, 0.58) 48%,
      rgba(94, 23, 235, 0.14) 62%,
      transparent 76%),
    linear-gradient(to top, rgba(20, 4, 52, 0.55), transparent 38%);
}
@media (max-width: 720px) {
  /* Auf dem Handy steht die Schrift über der ganzen Breite. Der Verlauf muss
     deshalb flächig sein — aber nur so dunkel, dass die Beeren durchkommen. */
  .auf__bild { object-position: 52% center; }
  .auf::before {
    background:
      linear-gradient(to bottom,
        rgba(20, 4, 52, 0.82) 0%,
        rgba(27, 5, 70, 0.52) 42%,
        rgba(27, 5, 70, 0.58) 68%,
        rgba(20, 4, 52, 0.78) 100%);
  }
}
.auf .spalte { padding-block: clamp(4rem, 12vw, 8.5rem); }
.auf h1 { max-width: 13ch; }
.auf .gross { color: #DCD2F5; max-width: 44ch; }
.auf .marker { color: #C4A9FF; }
.auf .marker::before { background:
    radial-gradient(circle 5.5px at 5.5px 6px, #C4A9FF 98%, transparent 100%),
    radial-gradient(circle 5.5px at 16.5px 6px, #6BD46B 98%, transparent 100%); }
.auf .knopf { background: #fff; color: var(--violett-nacht); border-color: #fff; }
.auf .knopf:hover { background: #EFE8FF; color: var(--violett-nacht); border-color: #EFE8FF; }
.auf .knopf--leise { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.auf .knopf--leise:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }

/* Die drei Fakten, die vor dem ersten Anruf jeder wissen will. */
.fakten {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.8rem;
  font-family: var(--daten); font-size: 0.82rem; letter-spacing: 0.02em; color: #C4B6E8;
}
.fakten li { display: inline-flex; align-items: center; gap: 0.55rem; }
.fakten li::before {
  content: ""; flex: none; width: 9px; height: 5px;
  border-left: 2px solid #7BE07B; border-bottom: 2px solid #7BE07B;
  transform: rotate(-45deg) translateY(-1px);
}

.fuss-claim { margin: 0 0 0.7rem; }
.fuss-claim img { height: 26px; width: auto; opacity: 0.75; }

/* ---------- Ansatz: der Text plus die drei Säulen ---------- */

.ansatz-raster { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .ansatz-raster { grid-template-columns: 1.15fr 0.85fr; } }
.ansatz-bild { margin: 0; border-radius: 20px; overflow: hidden; }
.ansatz-bild img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ansatz-bild figcaption { font-family: var(--daten); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-leise); padding-top: 0.9rem; }

.saeulen { display: grid; gap: 1.5rem; margin-top: 2.75rem; }
@media (min-width: 880px) { .saeulen { grid-template-columns: repeat(3, 1fr); } }
.saeule { background: var(--grund); border: 1px solid var(--linie); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.1rem); }
.saeule__kopf { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.9rem; }
.saeule__punkt { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--violett); }
.saeule:nth-child(2) .saeule__punkt { background: var(--blatt); }
.saeule:nth-child(3) .saeule__punkt { background: var(--violett-tief); }
.saeule h3 { margin: 0; }
.saeule p { margin: 0; color: var(--tinte-leise); font-size: 0.99rem; }

/* ---------- Angebote ---------- */

.block--violett .marker { color: #D9C6FF; }
.block--violett .marker::before { background:
    radial-gradient(circle 5.5px at 5.5px 6px, #D9C6FF 98%, transparent 100%),
    radial-gradient(circle 5.5px at 16.5px 6px, #7BE07B 98%, transparent 100%); }
.block--violett .gross { color: #DCCDFA; }

.angebote { display: grid; gap: 1.4rem; margin-top: 2.75rem; }
@media (min-width: 880px) { .angebote { grid-template-columns: repeat(3, 1fr); } }
.angebot {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.angebot:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.55); transform: translateY(-3px); }
.angebot__mehr {
  font-family: var(--display); font-weight: 600; font-size: 0.97rem;
  color: #fff; margin-top: auto; padding-top: 1.3rem;
}
.angebot p.angebot__mehr { margin-bottom: 0; margin-top: 1.4rem; }
.angebot__bild { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.angebot__text { padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.angebot h3 { color: #fff; margin-bottom: 0.65rem; }
.angebot p { color: #DCCDFA; font-size: 0.99rem; margin-bottom: 0; }
.angebot p
.hinweis {
  margin-top: 2.4rem; padding: 1.3rem 1.5rem;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(27,5,70,0.35);
}
.hinweis p { margin: 0; font-size: 0.95rem; color: #DCCDFA; max-width: none; }
.hinweis strong { color: #fff; }
.hinweis a { color: #fff; }

/* Derselbe Kasten auf hellem Grund — etwa auf den Angebotsseiten. */
.hinweis--hell { background: var(--grund); border: 1px solid var(--linie); border-left: 4px solid var(--violett); }
.hinweis--hell p { color: var(--tinte-leise); }
.hinweis--hell strong { color: var(--tinte); }
.hinweis--hell a { color: var(--violett); }

/* ---------- Ablauf ---------- */
/* Nummeriert, weil hier tatsächlich eine Reihenfolge gilt: ohne Anamnese
   keine Analyse, ohne Analyse kein Zweitgespräch. */

.ablauf { counter-reset: schritt; margin-top: 2.75rem; }
.schritt { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1.4rem; padding-block: 1.9rem; border-top: 1px solid var(--linie); }
.schritt:last-child { border-bottom: 1px solid var(--linie); }
.schritt::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--violett); line-height: 1; padding-top: 0.15rem;
}
.schritt h3 { margin-bottom: 0.3rem; }
.schritt p { margin-bottom: 0; color: var(--tinte-leise); }
.ortsangabe { margin-top: 1.8rem; color: var(--tinte-leise); }
.ortsangabe strong { color: var(--tinte); }

/* ---------- Kosten ---------- */

/* Zwei Angebote, also zwei Karten statt einer Tabelle. Der Preis ist das,
   was gesucht wird — er steht deshalb groß und nicht am Zeilenende. */
.tarife { display: grid; gap: 1.5rem; margin-top: 2.75rem; align-items: start; }
@media (min-width: 800px) { .tarife { grid-template-columns: 1fr 1.25fr; } }
.tarif {
  background: var(--grund); border: 1px solid var(--linie); border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.tarif--betont { border: 2px solid var(--violett); box-shadow: 0 14px 40px rgba(94,23,235,0.1); }
.tarif h3 { margin-bottom: 0.5rem; }
.tarif__preis {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1; letter-spacing: -0.035em; color: var(--violett); margin: 0 0 1.1rem;
}
.tarif__preis--frei { color: var(--blatt); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); }
.tarif p { color: var(--tinte-leise); }
.tarif__liste { list-style: none; margin: 0; padding: 0; }
.tarif__liste li { padding-left: 1.7rem; position: relative; margin-bottom: 0.7rem; color: var(--tinte-leise); }
.tarif__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 5px; border-left: 2px solid var(--violett); border-bottom: 2px solid var(--violett);
  transform: rotate(-45deg);
}
.tarif__fuss {
  font-family: var(--daten); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linie);
}
.kleinunternehmer { font-size: 0.95rem; color: var(--tinte-leise); margin-top: 1.8rem; max-width: 62ch; }
.kleinunternehmer strong { color: var(--tinte); }

/* ---------- Dranbleiben: Wochen-Zeitplan ---------- */

.zeitplan { margin-top: 2.75rem; }
.zeitplan .etappe {
  display: grid; grid-template-columns: 6.2rem 1fr; gap: 1.4rem;
  padding-block: 1.8rem; border-top: 1px solid var(--linie);
}
.zeitplan .etappe:last-child { border-bottom: 1px solid var(--linie); }
.zeitplan .wann {
  font-family: var(--daten); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--violett); padding-top: 0.35rem;
}
.zeitplan .dauer { display: block; color: var(--tinte-leise); margin-top: 0.3rem; text-transform: none; letter-spacing: 0.02em; }
.zeitplan h3 { margin-bottom: 0.4rem; }
.zeitplan .etappe :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .zeitplan .etappe { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Kosten-Raster mit drei Karten */
@media (min-width: 980px) { .tarife--drei { grid-template-columns: 0.85fr 1fr 1.15fr; } }
.tarif__preis .alt { display: block; font-family: var(--text); font-weight: 400; font-size: 0.55em; letter-spacing: 0; color: var(--tinte-leise); margin-top: 0.4rem; }
.anschluss {
  margin-top: 1.6rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--linie); border-left: 4px solid var(--blatt);
  border-radius: 12px; background: var(--grund);
}
.anschluss p { margin: 0; font-size: 0.97rem; color: var(--tinte-leise); max-width: none; }
.anschluss strong { color: var(--tinte); }

/* ---------- Über Magdalena ---------- */

.person { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .person { grid-template-columns: 0.85fr 1.15fr; } }
.portraet { margin: 0; border-radius: 20px; overflow: hidden; }
/* Der Bildausschnitt sitzt bewusst hoch — sonst schneidet 4:5 den Kopf ab. */
.portraet img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; }
.qualifikation { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.qualifikation li { padding-left: 1.6rem; position: relative; margin-bottom: 1.1rem; color: var(--tinte-leise); font-size: 0.99rem; }
.qualifikation li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 10px; height: 10px; border-radius: 50%; background: var(--blatt); }
.qualifikation strong { display: block; color: var(--tinte); font-family: var(--display); font-weight: 600; font-size: 1.04rem; }
.merkmale { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.merkmale li { padding-left: 1.7rem; position: relative; margin-bottom: 0.8rem; }
.merkmale li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 9px; height: 5px; border-left: 2px solid var(--violett); border-bottom: 2px solid var(--violett);
  transform: rotate(-45deg);
}

/* ---------- Kontakt ---------- */

.block--nacht h2 { color: #fff; }
.block--nacht .marker { color: #C4A9FF; }
.block--nacht .marker::before { background:
    radial-gradient(circle 5.5px at 5.5px 6px, #C4A9FF 98%, transparent 100%),
    radial-gradient(circle 5.5px at 16.5px 6px, #6BD46B 98%, transparent 100%); }
.block--nacht p { color: #C9BCE6; }
.wege { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; font-family: var(--daten); font-size: 1rem; }
.wege a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.65rem; }
.wege a:hover { text-decoration: underline; }
.block--nacht .knopf { background: #fff; color: var(--violett-nacht); border-color: #fff; }
.block--nacht .knopf:hover { background: #EFE8FF; color: var(--violett-nacht); border-color: #EFE8FF; }

/* ---------- Offene Punkte: vor dem Livegang zu entfernen ---------- */

.offen {
  margin-top: 1.8rem; padding: 1.1rem 1.35rem;
  background: #FFF8E1; border: 1px dashed #C89B1E; border-radius: 12px;
  font-size: 0.92rem; color: #6B5210;
}
.offen p { margin: 0 0 0.6em; max-width: none; color: #6B5210; }
.offen p:last-child { margin-bottom: 0; }
.offen strong { color: #4A3808; }
.offen code { font-family: var(--daten); font-size: 0.92em; }
.platz { background: #FFF8E1; border-bottom: 2px solid #C89B1E; padding: 0.05em 0.4em; font-family: var(--daten); font-size: 0.9em; color: #6B5210; }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); padding-block: 2.8rem calc(2.8rem + env(safe-area-inset-bottom)); font-size: 0.92rem; color: var(--tinte-leise); }
.fuss-raster { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; justify-content: space-between; align-items: center; }
.fuss p { margin: 0; }
.fuss ul { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.fuss a { color: var(--tinte-leise); }
.fuss a:hover { color: var(--violett); }

/* ---------- Unterseiten der Angebote ---------- */

/* Leitsatz-Band: die Handschrift aus dem Original, mittig auf voller Breite. */
.band { background: var(--violett-nacht); padding-block: clamp(2.6rem, 7vw, 4.6rem); }
.band h1 { margin: 0; text-align: center; }
.band img { display: block; margin-inline: auto; width: min(880px, 92%); height: auto; }

/* Handschrift als Zwischenüberschrift im Fließtext. */
.schriftzug { display: block; margin: clamp(2.2rem, 5vw, 3.4rem) auto clamp(1.2rem, 3vw, 1.8rem); width: min(660px, 92%); height: auto; }

/* Mittig gesetzte Textblöcke wie im Original. */
.mittig { text-align: center; }
.mittig p, .mittig ul { margin-inline: auto; }
.mittig ul { list-style: none; padding: 0; max-width: var(--lese); }
.mittig li { margin-bottom: 0.4rem; }

/* Drei Spalten wie im Original: Text und Bild wechseln sich ab, alles mittig. */
.drei { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); margin-top: 2.75rem; }
@media (min-width: 880px) { .drei { grid-template-columns: repeat(3, 1fr); } }
.drei figure { margin: 0; border-radius: 16px; overflow: hidden; }
.drei img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.drei .sp { text-align: center; display: flex; flex-direction: column; gap: 1.3rem; }
.drei .sp p { margin: 0; color: var(--tinte-leise); max-width: none; }
.drei .sp h2 { font-size: 1.25rem; margin: 0; }


.unter-auf { background: var(--violett-nacht); color: #fff; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.unter-auf h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); max-width: 18ch; }
.unter-auf .marker { color: #C4A9FF; }
.unter-auf .marker::before { background:
    radial-gradient(circle 5.5px at 5.5px 6px, #C4A9FF 98%, transparent 100%),
    radial-gradient(circle 5.5px at 16.5px 6px, #6BD46B 98%, transparent 100%); }
.unter-auf .gross { color: #DCD2F5; margin-bottom: 0; }
.unter-raster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .unter-raster { grid-template-columns: 1.1fr 0.9fr; } }
.unter-bild { margin: 0; border-radius: 18px; overflow: hidden; }
.unter-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Text-Bild-Reihen auf den Angebotsseiten. Das Bild wechselt die Seite. */
.reihe-tb { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; margin-top: 2.75rem; }
@media (min-width: 900px) {
  .reihe-tb { grid-template-columns: 1.1fr 0.9fr; }
  .reihe-tb--getauscht { grid-template-columns: 0.9fr 1.1fr; }
  .reihe-tb--getauscht figure { order: -1; }
}
.reihe-tb figure { margin: 0; border-radius: 18px; overflow: hidden; }
.reihe-tb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.reihe-tb h2, .reihe-tb h3 { margin-top: 0; }
.reihe-tb :last-child { margin-bottom: 0; }

/* Der Leitsatz der Lifestyle-Seite — als ruhige, große Zeile. */
.leitsatz {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); line-height: 1.25;
  color: var(--violett); max-width: 24ch; margin: 0 0 0.6em;
}

.krume { font-family: var(--daten); font-size: 0.76rem; color: var(--tinte-leise); margin-bottom: 1.6rem; }
.krume a { color: var(--tinte-leise); }
.krume a:hover { color: var(--violett); }

.schritte-kurz { list-style: none; counter-reset: kurz; margin: 2rem 0 0; padding: 0; }
.schritte-kurz li { counter-increment: kurz; position: relative; padding-left: 2.6rem; margin-bottom: 1.1rem; }
.schritte-kurz li::before {
  content: counter(kurz, decimal-leading-zero); position: absolute; left: 0; top: 0.06em;
  font-family: var(--display); font-weight: 700; color: var(--violett); font-size: 1.05rem;
}
.schritte-kurz strong { font-family: var(--display); font-weight: 600; }

.weiter { display: grid; gap: 1.2rem; margin-top: 2.4rem; }
@media (min-width: 700px) { .weiter { grid-template-columns: repeat(2, 1fr); } }
.weiter a {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 14px;
  padding: 1rem 1.2rem; transition: border-color .18s ease, transform .18s ease;
}
.weiter a:hover { border-color: var(--violett); transform: translateY(-2px); }
.weiter img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; flex: none; }
.weiter .titel { font-family: var(--display); font-weight: 600; color: var(--tinte); display: block; }
.weiter .zusatz { font-size: 0.9rem; color: var(--tinte-leise); }

/* ---------- Rechtstexte ---------- */

.rechtstext { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rechtstext .inhalt { max-width: var(--lese); }
.rechtstext h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 1.2rem; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2.6rem; }
.rechtstext h3 { font-size: 1.06rem; margin-top: 1.8rem; }
.rechtstext ul { padding-left: 1.3rem; max-width: var(--lese); }
.rechtstext li { margin-bottom: 0.5rem; }
.rechtstext .stand { font-family: var(--daten); font-size: 0.78rem; color: var(--tinte-leise); letter-spacing: 0.06em; }
.rechtstext address { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}