/* Achtsam mit Herz – einziges Stylesheet.
   Bildet den Aufbau des Originals (WordPress + Kadence + Elementor) nach. Die Kommentare mit
   siebenstelligen IDs (z. B. 4d6bfc8) verweisen auf das Element in
   docs/original/referenz-css/post-496-lesbar.txt, dort stehen die Originalwerte.
   Breakpoints wie Elementor: Tablet bis 1024px, Handy bis 767px. */

/* ---------- Schriften (die Latin-Dateien, die Google Fonts dem Original ausliefert) ----------
   Nur noch zwei Familien: Roboto für alle Texte, Sorts Mill Goudy als Akzent (Menü, Fußzeile,
   Seitentitel). Rubik, Roboto Slab, Roboto Flex und der Ersatz für „PT Sans“ sind entfallen. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/Roboto.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; }
@font-face { font-family: 'Sorts Mill Goudy'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/SortsMillGoudy-Regular.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; }
@font-face { font-family: 'Sorts Mill Goudy'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/SortsMillGoudy-Italic.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; }

/* ---------- Farben (Kadence-Palette) ---------- */
:root {
  --rosa: #c85082;        /* palette1, Elementor „accent“ */
  --dunkel: #181415;      /* palette3 */
  --grundtext: #656464;   /* palette4 */
  --sand: #f0e9e3;        /* palette7 */
  --hell: #f7f4f1;        /* palette8 */
  --weiss: #ffffff;       /* palette9 */
  /* Kontrast (WCAG AA): Elementors #7a7a7a hatte nur 4,29 : 1 auf Weiß und 3,57 : 1 auf Sand.
     #656464 (palette4) hat 5,90 : 1 auf Weiß, 5,38 auf Hell, 4,91 auf Sand. */
  --text: #656464;
  --sekundaer: #54595f;   /* Elementor „secondary“ */
  /* Etwas dunkleres Rosa für Buttons und Links: weiß darauf 5,02 : 1 (mit #c85082 nur 4,26).
     Überschriften, Linien und Icons bleiben #c85082, passend zu Logo und Schriftzug. */
  --rosa-dunkel: #b84678;
  --knopf-verlauf: linear-gradient(180deg, var(--rosa-dunkel) 0%, var(--rosa-dunkel) 100%);
}

/* ---------- Grundlage (Kadence) ---------- */
html { box-sizing: border-box; }
/* Weiches Scrollen erst nach dem ersten Klick auf einen Anker-Link (setzt main.js), sonst scrollt
   der Browser beim Aufruf von /#kontakt (z. B. nach dem Absenden des Formulars) sichtbar von oben */
html.weich { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--hell);
  font-family: Roboto, sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.6;
  color: var(--grundtext);
  overflow-wrap: break-word; /* bricht zu lange Wörter um, z. B. „Program m“ in der Folie */
}
/* Kadence #wrapper: Fußzeile bleibt auch auf kurzen Seiten unten */
.seite { background: var(--weiss); min-height: 100vh; display: flex; flex-direction: column; }
.seite > main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: 'Sorts Mill Goudy', serif; font-weight: normal; color: var(--dunkel); }
h1 { font-size: 50px; line-height: 1.2; }
h2 { font-size: 34px; line-height: 1.2; }
h3 { font-size: 28px; line-height: 1.2; }
h4 { font-size: 25px; line-height: 1.2; }
p { margin: 0 0 2rem; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: bold; }
a { color: var(--rosa-dunkel); text-underline-offset: .1em; transition: all .1s linear; }
a:hover, a:focus, a:active { color: var(--dunkel); text-underline-offset: .25em; }
img { display: block; height: auto; max-width: 100%; border: 0; }
button, input, textarea { font-size: 100%; margin: 0; }
button { cursor: pointer; }

/* Kadence .screen-reader-text */
.nur-sr { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; }

/* Sprunglink und Fokusrahmen (eigene Ergänzung, nur bei Tastaturbedienung sichtbar) */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200000;
  padding: 10px 16px; background: var(--rosa-dunkel); color: var(--weiss);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--weiss); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; box-shadow: 0 0 0 2px var(--weiss); }

/* ---------- Header (Kadence) ---------- */
.kopf { position: relative; z-index: 11; background: var(--weiss); }
.kopf__zeile {
  display: flex; align-items: center;
  max-width: 1290px; min-height: 80px; margin: 0 auto; padding: 0 1.5rem;
}
.kopf__logo { display: flex; align-items: center; padding-right: 40px; margin-right: 10px; }
.kopf__logo img { width: 79px; max-width: 79px; }
.kopf__nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.kopf__nav a {
  display: block; padding: .6em calc(1.3em / 2);
  font-family: 'Sorts Mill Goudy', serif; font-style: italic; font-size: 21px; line-height: 1em;
  color: var(--grundtext); text-decoration: none; transition: all .2s ease-in-out;
  transform: translate3d(0, 0, 0); /* wie Kadence: eigene Ebene, ändert die Kantenglättung der Schrift */
}
.kopf__nav a:hover, .kopf__nav a:focus { color: var(--dunkel); }
/* Auf der Startseite gelten im Original alle Menüpunkte als aktuelle Seite (alles Anker auf /):
   Desktop dunkel, Handy rosa. Auf den Unterseiten ist keiner aktiv. */
body:has(main.start) .kopf__nav a { color: var(--dunkel); }

/* Menüknopf (nur Tablet/Handy). Rosa durch die globale Button-Regel des Elementor-Kits. */
.menuknopf {
  display: none; align-items: center; margin-left: auto;
  padding: .4em .6em; border: 0; border-radius: 50px;
  font-size: 14px; color: var(--dunkel);
  background-color: transparent; background-image: var(--knopf-verlauf);
  box-shadow: none;
}
.menuknopf svg { width: 30px; height: 30px; display: block; }
.menuknopf:hover, .menuknopf:focus-visible { color: var(--rosa); background-color: var(--rosa); background-image: none; }

/* Handy-Menü: Seitenpanel von rechts (Kadence popup-drawer sidepanel) */
.mobilmenue { position: fixed; inset: 0; z-index: 100000; }
.mobilmenue[hidden] { display: none; }
.mobilmenue__schatten { position: fixed; inset: 0; background-color: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .2s ease-in-out; cursor: pointer; }
.mobilmenue__panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 90%; overflow: auto;
  display: flex; flex-direction: column;
  background: var(--sand); color: var(--weiss);
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .1);
  transform: translateX(100%); opacity: 0;
  transition: transform .3s cubic-bezier(.77, .2, .05, 1), opacity .25s cubic-bezier(.77, .2, .05, 1);
}
.mobilmenue.ist-offen .mobilmenue__schatten { opacity: 1; }
.mobilmenue.ist-offen .mobilmenue__panel { opacity: 1; transform: translateX(0); }
body.menue-offen { overflow: hidden; }
.mobilmenue__kopf { display: flex; justify-content: flex-end; min-height: calc(1.2em + 24px); padding: 0 1.5em; }
.mobilmenue__zu {
  position: relative; display: flex; width: 1em; height: 1em; box-sizing: content-box;
  padding: .6em .15em; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-size: 30px; line-height: 1; color: var(--dunkel);
}
.mobilmenue__zu span {
  position: absolute; left: 50%; top: 50%;
  width: .75em; height: .08em; margin-left: -.375em; margin-top: -.04em;
  border-radius: .08em; background: currentColor; opacity: 0;
  transform-origin: center center; transform: rotate(45deg) translateX(-50%);
  transition: transform .3s cubic-bezier(.77, .2, .05, 1), opacity .3s cubic-bezier(.77, .2, .05, 1);
  transition-delay: .2s;
}
.mobilmenue__zu span:last-child { transform: rotate(-45deg) translateX(50%); }
.mobilmenue.ist-offen .mobilmenue__zu span { transform: rotate(45deg); opacity: 1; }
.mobilmenue.ist-offen .mobilmenue__zu span:last-child { transform: rotate(-45deg); }
.mobilmenue__nav { padding: 0 1.5em 1.5em; }
.mobilmenue__nav ul { margin: 0; padding: 0; list-style: none; }
.mobilmenue__nav li { font-family: 'Sorts Mill Goudy', serif; font-style: italic; font-size: 24px; line-height: 1; }
.mobilmenue__nav a {
  display: block; padding: 1em .5em;
  color: var(--dunkel); text-decoration: none; border-bottom: 1px solid #e2d8d7;
}
.mobilmenue__nav a:hover, body:has(main.start) .mobilmenue__nav a { color: var(--rosa); }

/* ---------- Fußzeile (Kadence) ---------- */
.fuss { background: var(--sand); }
.fuss__zeile { display: grid; column-gap: 30px; max-width: 1290px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.fuss__oben .fuss__zeile { grid-template-columns: 1fr 2fr; row-gap: 30px; padding-top: 30px; padding-bottom: 30px; }
.fuss__spalte { display: flex; }
.fuss__nav { display: flex; justify-content: flex-end; }
.fuss__nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.fuss__nav a {
  display: block; padding: calc(.6em / 2) calc(1.6em / 2);
  font-family: 'Sorts Mill Goudy', serif; font-style: italic; font-size: 22px; line-height: 1;
  color: var(--grundtext); text-decoration: none; transition: all .2s ease-in-out;
}
.fuss__nav a:hover, .fuss__nav a[aria-current="page"] { color: var(--dunkel); }
.fuss__html { margin: 1em 0; color: var(--dunkel); }

/* ---------- Elementor-Gerüst ---------- */
/* Sektion > Box (boxed: max. 1140px) > Spalte > Spalteninhalt (10px Innenabstand) > Widgets */
.sek { position: relative; }
.sek__box { display: flex; position: relative; margin-left: auto; margin-right: auto; max-width: 1140px; }
.sek--voll > .sek__box { max-width: none; }
.sp { display: flex; position: relative; min-height: 1px; width: 100%; }
.sp__in { display: flex; flex-wrap: wrap; align-content: flex-start; position: relative; width: 100%; padding: 10px; }
.sp__in > * { width: 100%; }
@media (min-width: 768px) {
  .sp--50 { width: 50%; }
  .sp--100 { width: 100%; }
}

/* Widgets: Elementor setzt 20px Abstand nach jedem Widget außer dem letzten in einer Spalte.
   Eigene Margins einzelner Widgets kommen dazu (--mt, --mb usw.), genau wie
   calc(var(--kit-widget-spacing, 0px) + x) im Original. */
.w {
  position: relative;
  margin: var(--mt, 0px) var(--mr, 0px) calc(var(--abstand, 0px) + var(--mb, 0px)) var(--ml, 0px);
}
.sp__in > .w:not(:last-child) { --abstand: 20px; }

/* Container (e-con): 10px Innenabstand, 20px Lücke, Inhalt max. 1140px */
.ec { display: flex; flex-direction: column; padding: 10px; --ec-breite: 1140px; }
.ec__in { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: min(100%, var(--ec-breite)); margin: 0 auto; }
.ec--voll { gap: 20px; }

/* Überschriften-Widget */
.titel { margin: 0 0 .5em; font-family: Roboto, sans-serif; font-weight: 600; line-height: 1; color: var(--text); }
/* Text-Widget */
.text { font-family: Roboto, sans-serif; font-weight: 400; color: var(--text); }
/* Bild-Widget */
.bild { text-align: center; }
.bild img { display: inline-block; vertical-align: middle; }
/* Button-Widget */
.knopf {
  display: inline-block; padding: 12px 24px; border-radius: 3px;
  font-family: Roboto, sans-serif; font-size: 15px; font-weight: 500; line-height: 1; text-align: center;
  color: var(--weiss); background-color: var(--rosa-dunkel); background-image: var(--knopf-verlauf);
  text-decoration: none; transition: all .3s;
  box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
}
.knopf:hover, .knopf:focus { color: var(--weiss); box-shadow: 0 15px 25px -7px rgba(0, 0, 0, .1); }

/* ---------- Leere Container oben und unten (2dd5015, d9adf93) ---------- */
.ec--leer { min-height: 0; }

/* ---------- Hero (4d6bfc8) ---------- */
.hero { z-index: 3; padding: 60px 20px 40px; background-color: var(--hell); }
.hero__links > .sp__in { margin: 0 30px 0 0; }                      /* 70cbefe */
.hero__innen { margin-top: 23px; margin-bottom: 23px; }              /* 104444a */
/* Textblock senkrecht mittig neben dem Porträt */
@media (min-width: 1025px) { .hero__links > .sp__in { align-content: center; } }
@media (min-width: 768px) {
  .hero__leer { width: 20.981%; }                                    /* 765b56f */
  .hero__linie { width: 79.019%; }                                   /* a1abd37 */
}
.hero__linie > .sp__in { border-left: 1px solid var(--rosa); padding: 0 0 0 60px; }
.hero__schriftzug { --mt: -60px; }                                   /* 077f683 */
.hero__titel .titel { font-size: 50px; }                             /* 3627935 */
.hero__text { --mt: -10px; --mb: 20px; }                             /* ed80fad */
.hero__rechts > .sp__in { margin: 0 0 0 80px; }                      /* c150d70 */
/* Im Original -140px unten, das Porträt ragte in den weißen Abschnitt */
.hero__portraet { --mt: -20px; }                                     /* 443b5f2 */
.hero__portraet img { border-radius: 0 215px 0 200px; }

/* ---------- Online Programme (f91687b) ---------- */
.programme { padding: 0 20px 50px; background-color: var(--weiss); }
.programme__links > .sp__in { margin: -82px 0 0 0; }                 /* 299b8c3 */
.programme__bild { order: 99999; }                                   /* 9720d41 */
.programme__bild img { border-radius: 0 0 0 80px; }
.programme__kopf { margin-top: 100px; margin-bottom: 60px; padding: 0; }  /* 68a459a */
.programme__kopf > .sek__box { max-width: 1002px; }
.programme__kopfspalte > .sp__in { margin: -100px 0 0 0; }           /* cd7ae8f */
.programme__titel { --mt: 80px; text-align: start; }                 /* f7e8fa7 */
.programme__titel .titel { font-size: 70px; color: var(--rosa); }
.programme__rechts > .sp__in { align-content: center; align-items: center; margin: 0 0 0 30px; }  /* 8ba4ca0 */
.acht-wochen { margin-top: 300px; margin-bottom: 0; }                /* 004bebb */
.acht-wochen__spalte > .sp__in { margin: 0 40px 0 30px; }            /* ee7eebf */
.acht-wochen__titel { --mb: -10px; }                                 /* aff9025 */
.acht-wochen__knopf { --mt: 20px; }                                  /* e3c7bcc */
.acht-wochen .text p { margin-bottom: 0; } /* die zwei Sätze wie im Original ohne Absatzabstand */

/* ---------- Rendezvous (962809d) ---------- */
.rendezvous { padding: 0 0 80px; background-color: var(--weiss); }
.rendezvous__links > .sp__in { align-content: center; align-items: center; margin: 0 20px 0 0; }  /* 5c20527 */
.rendezvous__innen { margin-top: -70px; margin-bottom: 0; }          /* 2407651 */
.rendezvous__spalte > .sp__in { margin: 0 60px 0 30px; }             /* 030ea54 */
.rendezvous__titel { --mb: -10px; }                                  /* bf99a9b */
.rendezvous__knopf { --mt: 20px; }                                   /* 9ad74d1 */
.rendezvous__bild img { border-radius: 0 80px 0 0; }                 /* d93aa33 */

/* ---------- Coaching (b27f163) ---------- */
.coaching { padding: 0 20px 80px; background-color: var(--sand); }
.coaching__spalte > .sp__in { margin: 0 0 30px 0; }                  /* ba2d2ad */
.coaching__kopf { margin-top: 0; margin-bottom: 60px; padding: 30px 0 0; }  /* d33c972 */
.coaching__kopf > .sek__box { max-width: 1002px; }
.coaching__titel { --mb: -40px; text-align: start; }                 /* e336fae */
.coaching__titel .titel { font-size: 70px; color: var(--rosa); }
@media (min-width: 768px) {
  .coaching__boxen { width: 37.484%; }                               /* c03dbfc */
  .coaching__text { width: 62.516%; }                                /* 9b4600c */
}
.coaching__boxen > .sp__in { border-right: 1px solid var(--rosa); margin: 0; padding: 0 80px 0 0; }
.coaching__text > .sp__in { margin: 0 0 0 60px; padding: 0; }
.coaching__untertitel { text-align: start; }                         /* 20252a6 */
.coaching__untertitel .titel { font-size: 25px; line-height: 1px; }
.coaching__knopf { --mt: 20px; }                                     /* 64936e9 */

/* Icon-Boxen (4cac255, 29a0a35, 4b75f67) */
.icon-box--1 { padding: 0 0 50px; border-bottom: 1px solid var(--sand); }
.icon-box--2 { --mt: 40px; padding: 0 0 50px; border-bottom: 1px solid var(--sand); }
.icon-box--3 { --mt: 40px; padding: 0; }
.icon-box__rahmen { display: flex; flex-direction: row; align-items: start; gap: 30px; text-align: start; }
.icon-box__icon { display: inline-block; flex: 0 0 auto; line-height: 0; }
.icon-box__icon img {
  display: inline-block; width: 1em; height: 1em; box-sizing: content-box;
  font-size: 20px; padding: 16px; border-radius: 50%; background-color: var(--rosa);
}
.icon-box__inhalt { flex-grow: 1; width: 100%; }
.icon-box__titel { margin: 0 0 10px; font-family: Roboto, sans-serif; font-weight: 600; color: var(--text); }
.icon-box__text { margin: 0; font-family: Roboto, sans-serif; font-weight: 400; color: var(--text); }

/* ---------- Angebote als Karten (ersetzen die Slider 887aa2b) ---------- */
.angebote { padding: 50px 20px; }
.angebote__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: 100%; padding: 10px; }
.karte {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 40px 30px; text-align: center;
  background: var(--sand); border-top: 4px solid var(--rosa); border-radius: 0 0 40px 0;
}
.karte__titel { margin: 0; font-family: Roboto, sans-serif; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--text); }
.karte__text { margin: 0 0 auto; font-family: Roboto, sans-serif; color: var(--text); }
.karte .knopf { margin-top: 10px; }

/* ---------- Über mich (8f6c2e4) ---------- */
.ueber { padding: 0 20px 70px; background-color: var(--hell); }
@media (min-width: 768px) {
  .ueber__links { width: 57.515%; }                                  /* cc916c0 */
  .ueber__rechts { width: 42.485%; }                                 /* 33882af */
}
.ueber__links > .sp__in { margin: -69px 0 0 0; }
.ueber__bild { --mt: 18px; --ml: -54px; flex-grow: 1; flex-shrink: 0; padding: 0; }  /* 844de7d */
.ueber__bild img { border-radius: 0 100px 0 0; }
.ueber__vita {                                                       /* bdf4c6e */
  --mt: -5px; padding: 60px 0 60px 60px; column-gap: 1px;
  background-color: var(--weiss); border-radius: 80px 0 0 0;
}
.ueber__rechts > .sp__in { margin: 60px 0; padding: 60px; background-color: var(--weiss); border-radius: 0 0 80px 0; }
/* Inhalt senkrecht mittig, im Original blieb unter dem Text ein großer leerer Bereich */
@media (min-width: 1025px) { .ueber__rechts > .sp__in { align-content: center; } }
.ueber__titel { --mb: -20px; }                                       /* 7c7f539 */
.ueber__text { --mt: 10px; --mb: 10px; }                             /* 809b959 */

/* ---------- Kontakt (f7c1ecc, a7b6ecc, 73fb9d1) ---------- */
.kontakt__titel { --mt: 40px; padding: 0 0 0 100px; }
.kontakt__titel .titel { font-size: 34px; }
.kontakt__formular { --mb: 40px; padding: 20px 0 0 100px; }
.formular__felder { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.formular__gruppe { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 0 5px; margin-bottom: 10px; }
.formular__gruppe label { flex-basis: 100%; padding-bottom: 0; font-family: Roboto, sans-serif; font-weight: 400; color: var(--text); }
.formular input[type="text"], .formular input[type="email"], .formular textarea {
  -webkit-appearance: none; appearance: none;
  flex-basis: 100%; width: 100%; max-width: 100%; min-height: 40px;
  font-family: Roboto, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.4;
  color: var(--text); background-color: var(--weiss);
  border: 1px solid #69727d; border-radius: 3px; box-shadow: none;
  transition: all .3s;
}
.formular input[type="text"], .formular input[type="email"] { padding: .4em .5em; }
.formular textarea { padding: 5px 14px; }
.formular input:focus, .formular textarea:focus { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); outline: 0; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; }
/* Fallenfeld gegen Spam-Bots: für Menschen unsichtbar */
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__gruppe--senden { align-items: flex-end; }
.formular__senden {
  flex-basis: 100%; min-height: 40px; padding: 0 24px; border: 0; border-radius: 3px;
  font-family: Roboto, sans-serif; font-size: 15px; font-weight: 500; line-height: 1; text-transform: capitalize;
  color: var(--weiss); background-color: var(--weiss); background-image: var(--knopf-verlauf);
  transition: all .3s; box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
}
.formular__senden:hover, .formular__senden:focus { background-color: var(--rosa-dunkel); box-shadow: 0 15px 25px -7px rgba(0, 0, 0, .1); }
.formular__senden-innen { display: flex; flex-direction: row; gap: 5px; justify-content: center; }
.formular__senden-icon { display: flex; align-items: center; }
/* Herz wie in den Icon-Boxen (im Original eine SVG, von der nur ein winziger Fleck zu sehen war) */
.formular__senden-icon img { width: 18px; height: 18px; }
.formular__meldung { margin: 0 0 20px; padding: 10px 15px; font-family: Roboto, sans-serif; color: var(--text); background: var(--hell); border-left: 3px solid var(--rosa); }

/* ---------- Rechtstexte: Kadence-Seitenlayout (Impressum, Datenschutzerklärung) ---------- */
.recht { background: var(--hell); }
.recht__container { max-width: 1290px; margin: 0 auto; padding: 0 1.5rem; }
.recht__kopf { background-color: var(--sand); }
.recht__titelzeile { display: flex; align-items: center; justify-content: center; min-height: 200px; text-align: center; }
.recht__titel { font-size: 50px; line-height: 1.2; }
.recht__bereich { margin: 5rem 0; }
.recht__karte { background: var(--weiss); border-radius: .25rem; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, .05); }
.recht__inhalt { padding: 2rem; }
/* Kadence .single-content */
.recht__inhalt h1, .recht__inhalt h2, .recht__inhalt h3, .recht__inhalt h4, .recht__inhalt h5, .recht__inhalt h6 { margin: 1.5em 0 .5em; }
.recht__inhalt :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.recht__inhalt :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0; }
.recht__inhalt ul, .recht__inhalt ol { margin: 0 0 2rem; padding-left: 2em; }
.recht__inhalt li > ul, .recht__inhalt li > ol { margin: 0; }
.recht__inhalt :is(ul, ol):last-child { margin-bottom: 0; }

/* ---------- Gemeinsame Kanten ----------
   Alle Blöcke stehen auf derselben Inhaltsbreite von 1120px wie Porträt, Gräserbild und Karten
   (bei 1440px von x = 160 bis 1280). Vorher begannen Texte bei 99, 150, 160, 170, 200, 229 und 250px.
   Header, Fußzeile und Rechtsseiten: Kadence-Rahmen auf dieselbe Breite, Seitenrand 30px wie
   die meisten Abschnitte. Das „Über mich“-Foto ragt weiter bewusst 54px nach links hinaus. */
.kopf__zeile, .fuss__zeile, .recht__container { max-width: 1180px; padding-left: 30px; padding-right: 30px; }
@media (min-width: 1025px) {
  .programme__kopf > .sek__box, .coaching__kopf > .sek__box { max-width: 1140px; }
  .programme__kopfspalte > .sp__in { padding-left: 0; }
  .rendezvous__spalte > .sp__in { margin-left: 0; padding-left: 0; }
  .rendezvous { padding-left: 20px; padding-right: 20px; }
  .coaching { padding-left: 10px; padding-right: 10px; }
  .fuss__nav ul { margin-right: -17.6px; } /* Innenabstand des letzten Links (0.8em bei 22px) */
  .coaching__boxen > .sp__in { padding-left: 10px; }
  .coaching__text > .sp__in { padding-right: 10px; }
}

/* ---------- Formular: kurzer Block, also mittig und höchstens 700px breit ----------
   Vorher 1040px breit mit 100px Einzug, auf dem Handy nur 10px Rand. */
.kontakt { padding-left: 30px; padding-right: 30px; }
.kontakt__titel { padding-left: 0; text-align: center; }
.kontakt__formular { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }

/* ---------- Tablet (bis 1024px) ---------- */
@media (max-width: 1024px) {
  .kopf__nav { display: none; }
  .menuknopf { display: flex; }
  .recht__bereich { margin: 3rem 0; }

  /* Fußzeile einspaltig, Inhalte zentriert (Kadence content-tablet-align-center, gilt auch auf dem Handy) */
  .fuss__oben .fuss__zeile { grid-template-columns: minmax(0, 1fr); }
  .fuss__nav, .fuss__nav ul { justify-content: center; }
  .fuss__html { flex: 1; text-align: center; }

  .sek__box { flex-wrap: wrap; max-width: 1024px; }
  .ec { --ec-breite: 1024px; }
  /* Buttons behalten ihre Breite wie auf dem Desktop (im Original hier volle Breite, bis 880px) */
  /* Karten untereinander, so breit wie die anderen Abschnitte auf dem Tablet */
  .angebote > .sek__box { max-width: 500px; }
  .angebote__raster { grid-template-columns: minmax(0, 1fr); }

  .hero > .sek__box,
  .programme > .sek__box,
  .rendezvous > .sek__box,
  .ueber > .sek__box { max-width: 500px; }

  .hero__links > .sp__in { margin: 0; }
  .hero__linie > .sp__in { border-width: 0; padding: 0; }
  .hero__titel, .hero__text { text-align: center; }
  .hero__rechts > .sp__in { margin: 60px 0 0 0; }

  .programme { margin-bottom: 0; }
  /* Im Original zieht -82px den Titel unter das überstehende Porträt, „Online“ war verdeckt */
  .programme__links > .sp__in { margin-top: 0; }
  .programme__titel { --mt: 0px; --mb: -30px; text-align: center; }
  .programme__titel .titel { font-size: 50px; }
  .programme__rechts > .sp__in { margin: 0; padding: 0; }
  .acht-wochen { margin-top: 20px; }
  .acht-wochen__spalte > .sp__in { margin: 0 0 0 30px; }

  .rendezvous { padding: 0 20px 60px; }
  .rendezvous__links > .sp__in { margin: 0; padding: 0; }
  .rendezvous__innen { margin-top: 0; margin-bottom: 40px; }
  .rendezvous__spalte > .sp__in { margin: 0 0 0 30px; }
  .rendezvous__rechts > .sp__in { margin: 0; }

  .coaching { padding: 170px 0 80px; }
  .coaching__titel { --mb: -30px; text-align: center; }
  .coaching__titel .titel { font-size: 50px; }
  .coaching__boxen > .sp__in { border-width: 0; margin: 0; padding: 0; }
  .icon-box__rahmen { flex-direction: column; align-items: unset; text-align: center; }
  .coaching__text > .sp__in { margin: 60px 0 0 0; }
  .coaching__untertitel { --mb: -30px; text-align: center; }
  /* Im Original bleibt hier die Zeilenhöhe 1px, die zwei Zeilen lagen übereinander */
  .coaching__untertitel .titel { font-size: 50px; line-height: 1.2; }
  .coaching__absaetze { text-align: center; }

  .ueber__links > .sp__in { margin: 0; padding: 0; }
  .ueber__bild { --mt: 0px; --ml: 0px; }
  .ueber__rechts > .sp__in { margin: 0; padding: 40px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__links, .hero__linie, .hero__rechts,
  .programme__links, .programme__kopfspalte, .programme__rechts,
  .rendezvous__links, .rendezvous__rechts,
  .coaching__kopfspalte, .coaching__boxen, .coaching__text,
  .ueber__links, .ueber__rechts { width: 100%; }
}

/* ---------- Handy (bis 767px) ---------- */
@media (max-width: 767px) {
  .ec { --ec-breite: 767px; }
  .sek__box { max-width: 767px; }

  .hero { padding: 40px 20px; }
  .hero__rechts > .sp__in { margin: 50px 0 0 0; }
  .hero__portraet img { border-radius: 0 100px 0 100px; }

  .programme__titel { --mb: -20px; }
  .programme__titel .titel { font-size: 40px; }
  .acht-wochen__spalte > .sp__in { margin: 20px 0 0 0; }
  .rendezvous__spalte > .sp__in { margin: 20px 0 0 0; }

  .coaching { padding: 160px 20px 60px; }
  .coaching__titel { --mb: -20px; }
  .coaching__titel .titel { font-size: 40px; }
  .coaching__untertitel {
    --mb: -20px; padding: 0; z-index: 0; text-align: center;
    align-self: flex-start; order: -99999; flex-grow: 1; flex-shrink: 0;
  }
  .coaching__untertitel .titel { font-size: 27px; line-height: 1.3em; }


  .ueber { padding: 0 20px 60px; }
  .kontakt__formular { padding: 0; }

  /* „Datenschutzerklärung“ war bei 50px 474px breit, die Seite ließ sich seitlich verschieben.
     Bei 34px ist es 322px breit; unter 378px schrumpft die Schrift mit, damit es in den Innenabstand passt */
  .recht__titel { font-size: min(34px, 9vw); }
  .recht__bereich { margin: 2rem 0; }
  .recht__karte { margin: 0 -1rem; }
  .recht__inhalt { padding: 1.5rem; }
}

/* ---------- Ausrichtung auf Tablet und Handy ----------
   Mittig: kurze Blöcke und alles, was unter einem Bild steht (Überschrift, Text und Button gemeinsam).
   Links: lange Texte. Vorher war der lange Coaching-Text mittig, „8 Wochen Programm“ und
   „Rendezvous“ unter den Bildern dagegen links. */
@media (max-width: 1024px) {
  .acht-wochen__spalte > .sp__in, .rendezvous__spalte > .sp__in { margin-left: 0; text-align: center; }
  .coaching__untertitel, .coaching__absaetze { text-align: start; }
  .kontakt__titel { padding-left: 0; }
}
@media (max-width: 767px) {
  .coaching__untertitel { text-align: start; }
}

/* ---------- Abstände zwischen den Sektionen ----------
   Zwischen dem letzten Inhalt einer Sektion und dem ersten der nächsten lagen 29 bis 290px.
   Jetzt an Farbwechseln rund 150px (Desktop) bzw. 120px (Tablet/Handy). Unter den Karten bleibt
   Platz für das nach oben überstehende „Über mich“-Foto. */
.kontakt__titel { --mt: 0px; }
.kontakt__formular { --mb: 0px; }
.angebote { padding-bottom: 120px; }
.coaching__spalte > .sp__in { margin-bottom: 0; }
@media (max-width: 1024px) {
  .coaching { padding: 60px 20px; }
  .coaching__kopf { padding-top: 0; }
  .angebote { padding-bottom: 60px; }
}

/* ---------- Fußzeile in einer Zeile ----------
   Vorher Menü rechts oben, darunter Trennlinie und © in einer eigenen Zeile.
   Jetzt am Desktop © links und Menü rechts auf einer Linie, auf Tablet/Handy
   untereinander zentriert, Menü oben. */
.fuss__oben .fuss__zeile { align-items: center; }
.fuss__html { margin: 0; }
@media (max-width: 1024px) {
  .fuss__oben .fuss__zeile { row-gap: 16px; }
  .fuss__nav { order: -1; }
}

/* ---------- Bild über dem Text (Tablet/Handy) ----------
   Bei „8 Wochen“ stand das Bild über dem Text, bei „Rendezvous“ darunter. Dadurch folgten die
   beiden Texte direkt aufeinander. Jetzt steht auch hier das Bild oben, mit demselben Abstand
   zum Titel wie bei „8 Wochen“ (60px Tablet, 80px Handy). */
@media (max-width: 1024px) {
  .rendezvous__rechts { order: -1; }
  .rendezvous__rechts > .sp__in { margin-bottom: 40px; }
  .rendezvous__innen { margin-bottom: 0; }
}

/* ---------- „Über mich“ auf Tablet/Handy ----------
   Vorher Foto, Vita, „Ich bin Katrin“, und die Vita stand 20px weiter rechts. Jetzt erst die
   Vorstellung, dann die Vita, beide in einer weißen Karte mit 40px Innenabstand. „Vita“ ist so
   groß wie „Ich bin Katrin“. Die linke Spalte wird dafür aufgelöst (display: contents), damit
   Foto und Vita einzeln angeordnet werden können. Desktop unverändert. */
@media (max-width: 1024px) {
  .ueber__links, .ueber__links > .sp__in { display: contents; }
  .ueber__bild { order: 1; width: 100%; }
  .ueber__rechts { order: 2; }
  .ueber__vita { order: 3; width: 100%; --mt: 0px; padding: 0 40px 40px; border-radius: 0 0 80px 0; }
  .ueber__rechts > .sp__in { padding-bottom: 40px; border-radius: 80px 0 0 0; }
  .ueber__vita > p:first-child { margin-bottom: 24px; font-size: 28px; line-height: 1; }
  .ueber__vita > p:first-child strong { font-weight: 600; }
}

/* ---------- Kontaktformular als Karte ----------
   Vorher klebte „Schreib mir“ 10px unter „Über mich“ (unten 20px bis zur Fußzeile), Titel klein
   und grau, Felder mit harten blaugrauen Rahmen, Button über die ganze Breite. Jetzt eigener
   Abschnitt mit Luft, rosa Titel mit Einladung, Formular in einer Karte wie die Angebote (Sand,
   rosa Linie oben, Ecke unten rechts). Rahmen warmgrau mit 3,3 : 1 auf Weiß (WCAG 1.4.11),
   Fokus in Rosa. Name und E-Mail ab Tablet nebeneinander, Button in normaler Größe. */
.kontakt { padding: 120px 30px; }
.kontakt__titel .titel { font-size: 50px; color: var(--rosa); }
.kontakt__einladung { max-width: 560px; margin: 0 auto; font-family: Roboto, sans-serif; color: var(--text); }
.kontakt__formular {
  max-width: 760px; margin-top: 20px; padding: 44px 50px 40px;
  background: var(--sand); border-top: 4px solid var(--rosa); border-radius: 0 0 40px 0;
}
.formular__gruppe { margin-bottom: 18px; }
.formular__gruppe label { margin-bottom: 6px; font-size: 15px; font-weight: 500; }
.formular input[type="text"], .formular input[type="email"], .formular textarea {
  min-height: 48px; padding: 12px 14px; font-size: 16px; border-color: #958b83;
}
.formular textarea { min-height: 150px; }
.formular input:focus, .formular textarea:focus,
.formular input:focus-visible, .formular textarea:focus-visible {
  border-color: var(--rosa-dunkel); box-shadow: 0 0 0 3px rgba(184, 70, 120, .25); outline: 0;
}
.formular__gruppe--senden { flex-direction: column; align-items: center; margin-top: 6px; }
.formular__senden { flex-basis: auto; min-height: 0; padding: 14px 32px; font-size: 16px; }
.formular__hinweis { margin: 14px 0 0; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); text-align: center; }
/* Rosa-dunkel hätte auf Sand nur 4,17 : 1, deshalb Textgrau (4,91), unterstrichen */
.formular__hinweis a { color: var(--text); }
.formular__hinweis a:hover, .formular__hinweis a:focus { color: var(--dunkel); }
@media (min-width: 768px) {
  .formular__felder > .formular__gruppe:nth-child(-n+2) { width: 50%; }
}
@media (max-width: 1024px) {
  .kontakt { padding: 100px 30px; }
}
@media (max-width: 767px) {
  .kontakt { padding: 80px 30px; }
  .kontakt__titel .titel { font-size: 40px; }
  .kontakt__formular { padding: 30px 20px; }
}

/* ---------- Coaching: Herzen enger zusammen ----------
   Zwischen den drei Icon-Boxen lagen je rund 110px (50px Innenabstand, 40px Rand, 20px Lücke)
   mit einer Trennlinie in Sand auf Sand, also unsichtbar. Jetzt ohne Linie und etwa 55px. */
.icon-box--1, .icon-box--2 { padding-bottom: 25px; border-bottom: 0; }
.icon-box--2, .icon-box--3 { --mt: 10px; }

/* Bewegung reduzieren: kein weiches Scrollen */
@media (prefers-reduced-motion: reduce) {
  html.weich { scroll-behavior: auto; }
}