/* Entwurf öffentliche Seiten als Verkaufsseiten, Runde 3, 28.10.2026: angelehnt an mind-your-mind.ezycourse.com
   (Seite von Nicolas, nur angesehen; übernommen ist die Wirkung, kein Text, kein Bild, kein Logo).
   Übernommen: klare geometrische Schrift, dunkles Blau für Überschriften, kräftiger Hauptknopf (dort Limette) mit
   dunkler Schrift, Oberzeilen in Großbuchstaben und Taubenblau, helle blaugraue Gründe, große gerundete Flächen
   (40px), Pastellflächen hinter Bildern und Symbolen, Foto im gerundeten Rahmen, feine
   Kreislinien als Schmuck, Fragen in Gruppen. Die Farbe der Praxis (--praxis) bleibt einstellbar; die Vorgabe der
   Plattform ist die Limette. Ohne Skript, ohne fremde Dienste. Gestaltet für 390 px, gut bei 1400 px. */
@font-face { font-family: "Inter"; src: url("../neu/schrift/Inter-Regular.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("../neu/schrift/Inter-Medium.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Inter"; src: url("../neu/schrift/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Inter"; src: url("../neu/schrift/Inter-Bold.woff2") format("woff2"); font-weight: 700; }

:root {
  /* Farbe der Praxis: Hauptknopf, Haken, Schmuck. --auf-praxis wird aus ihr berechnet (Kontrast mindestens 4.5:1) */
  --praxis: #C2D466;
  --praxis-hell: #EEF3D1;
  --auf-praxis: #03275B;
  /* Grundtöne der Plattform */
  --tinte: #1B2B59;            /* Überschriften */
  --text: #2A2A33;
  --grau: #5C6378;
  --taube: #4869BC;            /* Oberzeilen, Zwischentitel (dunkler als das Original, für 4.5:1 auf Weiß, --grund und --praxis-hell) */
  --grund: #F4F6F9;            /* heller Grund für jeden zweiten Abschnitt */
  --flaeche: #DCE6F9;          /* große gerundete Fläche */
  --rose: #F1E4E4;
  --limette-blass: #E8EDC4;
  --blau-blass: #D3DFF5;
  --linie: #E4E8F0;
  --schrift: "Inter", "Segoe UI", system-ui, sans-serif;
  --breite: 72rem;
  --text-breite: 40rem;
  --rand: 1rem;
  --radius: 20px;
  --radius-gross: 40px;
  --ziel-min: 2.75rem;
  --schatten: 0 10px 30px -18px rgba(27, 43, 89, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: #fff;
  -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 6px; }
.i { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; z-index: 50; background: #fff; padding: .5rem .75rem; }
.huelle { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.welle { display: none; }
.nb { white-space: nowrap; }

/* ------------------------------------------------------------------ Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--linie); }
.kopf .huelle { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }
.marke-praxis { display: flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--tinte); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -.01em; margin-right: auto; }
.marke-praxis svg { width: 2.5rem; height: 2.5rem; }
/* Logo der Praxis als Bild (9-10): 40px hoch, Seitenverhältnis bleibt; ein sehr breites Logo wird schmal eingepasst */
.marke-praxis img { display: block; flex: none; height: 2.5rem; width: auto; max-width: 10rem; object-fit: contain;
  object-position: left center; }
/* Sprite mit den Symbolen (svg.sprite wie in plattform_v3.css): unsichtbar, die Symbole wirken über <use> */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kopf nav { display: none; gap: 1.75rem; }
.kopf nav a { color: var(--text); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.kopf nav a:hover { color: var(--taube); }
.kopf .widerruf { display: none; }
.widerruf-zeile .huelle { min-height: 2.5rem; display: flex; align-items: center; justify-content: flex-end; }

/* ------------------------------------------------------------------ Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--ziel-min);
  padding: .625rem 1.375rem; border-radius: 14px; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 1.5px solid transparent; white-space: nowrap; }
.knopf.haupt { background: var(--praxis); color: var(--auf-praxis); }
.knopf.haupt:hover { filter: brightness(.95); }
.knopf.zweit { background: #fff; color: var(--tinte); border-color: #CBD3E3; font-weight: 600; }
.knopf.zweit:hover { border-color: var(--tinte); }
.knopf.leise { min-height: 2.25rem; padding: .375rem .875rem; font-size: .875rem; border-radius: 10px; }
.knopf.gross { min-height: 3.25rem; padding: .875rem 1.75rem; font-size: 1.0625rem; }
.knopf .i { width: 1.125rem; height: 1.125rem; }
.weiterlink { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--tinte);
  text-decoration: none; min-height: var(--ziel-min); }
.weiterlink:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Schrift */
h1, h2, h3 { margin: 0; color: var(--tinte); letter-spacing: -.015em; }
/* Unter 340 px etwas kleiner; ein noch längeres Wort im Namen eines Angebots bricht um und läuft nicht über den Rand */
h1 { font-size: clamp(1.75rem, 10vw, 2.125rem); font-weight: 700; line-height: 1.18; overflow-wrap: anywhere; }
h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.22; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.strich { background: linear-gradient(transparent 62%, var(--praxis-hell) 62%, var(--praxis-hell) 92%, transparent 92%);
  padding-inline: .08em; }
.gruss { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--taube);
  margin: 0 0 .75rem; }
.vorspann { font-size: 1.125rem; line-height: 1.6; color: var(--grau); margin: 1rem 0 0; max-width: var(--text-breite); }
.kopfzeile { max-width: var(--text-breite); margin-bottom: 2rem; }
.kopfzeile p:not(.gruss) { color: var(--grau); margin: .75rem 0 0; }
.kopfzeile.mitte { text-align: center; margin-inline: auto; }

/* ------------------------------------------------------------------ Abschnitte */
.abschnitt { padding: 3.5rem 0; }
.abschnitt.grau, .abschnitt.weiss + .abschnitt.weiss { background: var(--grund); }
/* große gerundete Fläche statt Vollbreite (wie die Fläche „Ratlos?“ der Vorlage) */
.abschnitt.sand > .huelle { background: var(--flaeche); border-radius: var(--radius-gross); padding: 2.5rem 1.25rem;
  margin-inline: var(--rand); }

/* Einstieg: heller Grund, Foto im gerundeten Rahmen mit Kreislinien */
.einstieg { position: relative; overflow: hidden; background: var(--grund); padding: 2rem 0 3.5rem; }
.einstieg .huelle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
/* Die Kreislinien am Foto (.person .buehne::after) ragen über den Rand; die Seite rollt sonst bei 390 px waagerecht */
.einstieg, .abschnitt { overflow-x: clip; }
.einstieg .knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.75rem; }
.vertrauen-zeile { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.75rem 0 0; padding: 0; list-style: none;
  font-size: .9375rem; color: var(--grau); }
.vertrauen-zeile li { display: inline-flex; align-items: center; gap: .4rem; }
.vertrauen-zeile .i { color: var(--tinte); width: 1.0625rem; height: 1.0625rem; }
.buehne { position: relative; justify-self: center; width: min(100%, 28rem); padding: 1.5rem 1.5rem 2.5rem 0; }
.buehne::before, .buehne::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.buehne::before { width: 90%; aspect-ratio: 1; left: -12%; top: 6%; border: 2px solid var(--praxis-hell); }
.buehne::after { width: 70%; aspect-ratio: 1; right: -18%; bottom: -10%; border: 2px solid #E1E5EE; }
.bogen { position: relative; z-index: 1; overflow: hidden; border-radius: 32px; aspect-ratio: 4 / 5; background: var(--rose);
  box-shadow: var(--schatten); }
.bogen img, .rund img { width: 100%; height: 100%; object-fit: cover; }
.platz { position: absolute; left: .875rem; top: .875rem; background: rgba(255, 255, 255, .9); color: var(--grau);
  font-size: .75rem; padding: .2rem .6rem; border-radius: 999px; z-index: 2; }
.notiz { display: none; }
.fakten { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.fakten li { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border-radius: 10px;
  padding: .4rem .8rem; font-size: .9375rem; font-weight: 500; color: var(--tinte); }
.fakten .i { width: 1.0625rem; height: 1.0625rem; }
.pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .875rem; color: var(--grau); margin-bottom: 1.25rem;
  overflow-wrap: anywhere; }
.pfad a { color: var(--grau); }
.pfad .i { width: .875rem; height: .875rem; }

/* Willkommen: persönlicher Satz der Therapeutin */
.willkommen { display: grid; gap: 1.5rem; align-items: center; }
.willkommen .rund { position: relative; width: 7rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--rose);
  box-shadow: 0 0 0 6px var(--praxis-hell); }
.willkommen blockquote { margin: 0; font-size: 1.3125rem; line-height: 1.55; color: var(--tinte); font-weight: 500; }
.willkommen .wer { margin: .875rem 0 0; color: var(--grau); font-size: .9375rem; }
.willkommen .wer strong { color: var(--tinte); }

/* Angebote: Karten mit Pastellfläche oben (wie die drei Elemente der Vorlage) */
.angebote { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.angebot { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten); }
.angebot .kopfbild { aspect-ratio: 16 / 8; min-height: 0; display: grid; place-items: center; }
.angebot:nth-child(3n+1) .kopfbild { background: var(--rose) !important; }
.angebot:nth-child(3n+2) .kopfbild { background: var(--limette-blass) !important; }
.angebot:nth-child(3n) .kopfbild { background: var(--blau-blass) !important; }
.angebot .kopfbild svg { width: 3.5rem; height: 3.5rem; color: var(--tinte); stroke-width: 1.5; }
.angebot .kopfbild img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.angebot .innen { padding: 1.375rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.angebot p { margin: 0; color: var(--grau); }
.angebot .preis { margin-top: auto; padding-top: .875rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.angebot .preis strong { font-size: 1.25rem; color: var(--tinte); }
.angebot .preis span { color: var(--grau); font-size: .9375rem; }

/* Für wen, Was Sie bekommen */
.haken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.haken-liste li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; align-items: start; }
.haken-liste .rund { width: 1.75rem; height: 1.75rem; border-radius: 8px; background: var(--praxis); color: var(--auf-praxis);
  display: grid; place-items: center; }
.haken-liste .rund .i { width: 1rem; height: 1rem; stroke-width: 2.75; }
.kacheln { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.kacheln li { background: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten); }
.kacheln .symbol { width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--praxis-hell); color: var(--tinte);
  display: grid; place-items: center; margin-bottom: 1rem; }
.kacheln p { margin: .375rem 0 0; color: var(--grau); font-size: 1rem; }

/* So läuft es ab: auf der großen Fläche */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: schritt; }
.schritte li { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding-bottom: 1.5rem; }
.schritte li::before { counter-increment: schritt; content: counter(schritt); width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: #fff; color: var(--tinte); font-weight: 700; font-size: 1.125rem; display: grid; place-items: center; }
.schritte li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 3.1rem; bottom: .35rem;
  border-left: 2px dashed #AFC2E6; }
.schritte h3 { margin-top: .5rem; }
.schritte p { margin: .25rem 0 0; color: var(--text); }

/* Preis */
.preiskarte { background: #fff; border-radius: 28px; padding: 2rem 1.5rem; box-shadow: var(--schatten); max-width: 32rem; }
.preiskarte .name { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--taube); margin: 0; }
.preiskarte .betrag { font-size: 2.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin: .75rem 0 .25rem; color: var(--tinte); }
.preiskarte .betrag small { font-size: 1rem; font-weight: 400; color: var(--grau); letter-spacing: 0; }
.preiskarte .haken-liste { margin: 1.5rem 0; }
.preiskarte .knopf { width: 100%; }
.zahlweise { list-style: none; margin: 1.25rem 0 0; padding: 1rem 1.125rem; background: var(--grund); border-radius: 14px;
  display: grid; gap: .5rem; font-size: .9375rem; }
.zahlweise li { display: flex; justify-content: space-between; gap: 1rem; }
.zahlweise span { color: var(--grau); }
.zahlweise strong { white-space: nowrap; }

/* Über mich */
.person { display: grid; gap: 2rem; align-items: center; }
.person .buehne { width: min(100%, 22rem); }
.person .bogen { background: var(--limette-blass); }
.person .text p { color: var(--grau); }
.qualifikation { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .625rem; }
.qualifikation li { display: flex; gap: .625rem; align-items: flex-start; font-size: 1rem; }
.qualifikation .i { color: var(--tinte); margin-top: .2rem; }

/* Praxis */
.ort { display: grid; gap: 1.5rem; }
.ort .bild { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--schatten); }
.ort .bild img { width: 100%; height: 100%; object-fit: cover; }
.ort dl { display: grid; grid-template-columns: auto 1fr; gap: .625rem 1.25rem; margin: 0; }
.ort dt { color: var(--grau); }
.ort dd { margin: 0; font-weight: 500; }

/* Fragen und Antworten */
.fragen { max-width: 52rem; display: grid; gap: .75rem; }
.fragen details { background: #fff; border: 1px solid var(--linie); border-radius: 14px; }
.fragen summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem;
  font-weight: 600; color: var(--tinte); min-height: var(--ziel-min); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .plus { order: -1; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; flex: none;
  transition: transform .2s; color: var(--tinte); }
.fragen details[open] summary .plus { transform: rotate(45deg); }
.fragen details p { margin: 0; padding: 0 1.25rem 1.25rem 3.625rem; color: var(--grau); }

/* Ratgeber, Gutschein */
.neben { display: grid; gap: 1rem; }
.neben a.karte { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; text-decoration: none;
  color: var(--text); background: #fff; border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--schatten); }
.neben .symbol { width: 3rem; height: 3rem; border-radius: 12px; background: var(--praxis-hell); color: var(--tinte);
  display: grid; place-items: center; }
.neben strong { display: block; color: var(--tinte); }
.neben span.leise { color: var(--grau); font-size: .9375rem; }
.neben .weiter { color: var(--tinte); }

/* Schluss: große blaue Fläche mit dem Hauptknopf */
.schluss { position: relative; overflow: hidden; background: var(--flaeche); border-radius: var(--radius-gross);
  padding: 2.75rem 1.5rem; text-align: center; }
.schluss::before { content: ""; position: absolute; width: 16rem; aspect-ratio: 1; right: -6rem; top: -6rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8); }
.schluss h2, .schluss p, .schluss .knopf { position: relative; }
.schluss p { color: var(--text); margin: .75rem auto 1.75rem; max-width: 30rem; }

/* Handy: Preis und Hauptknopf bleiben unten erreichbar. Passen beide nicht in eine Zeile, steht der Knopf in voller
   Breite unter dem Preis */
.kaufleiste { position: sticky; bottom: 0; z-index: 15; background: rgba(255, 255, 255, .97); box-shadow: 0 -1px 0 var(--linie);
  padding: .75rem var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.kaufleiste .preis { flex: 999 1 auto; line-height: 1.2; }
.kaufleiste .preis strong { display: block; font-size: 1.125rem; color: var(--tinte); }
.kaufleiste .preis span { font-size: .8125rem; color: var(--grau); }
.kaufleiste .knopf { flex: 1 0 auto; }

/* Fuß */
.fuss { background: var(--grund); color: var(--grau); font-size: .9375rem; padding: 2.5rem 0 2rem; margin-top: 3.5rem; }
.fuss .huelle { display: grid; gap: 1.25rem; }
.fuss strong { color: var(--tinte); }
.fuss nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.fuss nav a { color: var(--grau); min-height: var(--ziel-min); display: inline-flex; align-items: center; }
.fuss p { margin: 0; }

/* ------------------------------------------------------------------ ab 52rem */
@media (min-width: 52rem) {
  :root { --rand: 2rem; }
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  .abschnitt { padding: 5rem 0; }
  .abschnitt.sand > .huelle { padding: 4rem 3.5rem; margin-inline: auto; max-width: calc(var(--breite) - 2 * var(--rand)); }
  .kopf nav { display: flex; }
  .kopf .widerruf { display: inline-flex; }
  .widerruf-zeile { display: none; }
  .einstieg { padding: 4rem 0 5rem; }
  .einstieg .huelle { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 4rem; }
  /* 9-20: Ohne Bild steht der Einstieg einspaltig */
  .einstieg .huelle:not(:has(.buehne)) { grid-template-columns: minmax(0, 46rem); }
  .buehne::before { width: 100%; left: -14%; top: -8%; }
  .willkommen { grid-template-columns: 7rem 1fr; gap: 2.5rem; max-width: 52rem; margin-inline: auto; }
  .angebote { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
  .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: start; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .schritte.quer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
  .schritte.quer li { grid-template-columns: 1fr; gap: .75rem; padding-bottom: 0; }
  .schritte.quer li:not(:last-child)::after { left: 3.5rem; right: -.75rem; top: calc(1.375rem - 1px); bottom: auto;
    border-left: 0; border-top: 2px dashed #AFC2E6; }
  .person { grid-template-columns: 22rem 1fr; gap: 5rem; }
  .ort { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: center; }
  .neben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schluss { padding: 4.5rem 3rem; }
  .kaufleiste { display: none; }
  .fuss .huelle { grid-template-columns: 1fr auto; align-items: end; }
}
@media (prefers-reduced-motion: reduce) { .fragen summary .plus { transition: none; } }