@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/open-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/open-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/open-sans-600.woff2") format("woff2");
}

/* Lora (variabel: eine Datei deckt 400–700 ab) */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/lora.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/lora-italic.woff2") format("woff2");
}

/* Passion One */
@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/passion-one-400.woff2") format("woff2");
}

@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/passion-one-700.woff2") format("woff2");
}

@font-face {
  font-family: "Passion One";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./assets/fonts/passion-one-900.woff2") format("woff2");
}

/* Palette: alle Farben aus dem Logo. Keine anderen Blau- oder Goldtöne. */
:root {
  --petrol: #06507a;
  --blau: #0a6895;
  --gold: #9c7a2c;
  --text: #3d3d3d;
  --text-hell: #6b7075;
  --rahmen: #e2e0da;
  --creme: #f6f4ef;
  --weiss: #ffffff;
  --page-bg: var(--weiss);
  --field-bg: rgba(255, 255, 255, 0.88);
  --shadow-color: rgba(6, 80, 122, 0.18);
  --heading-font: "Lora", serif;
  --body-font: "Open Sans", sans-serif;
}

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

html {
  min-height: 100%;
  background: var(--page-bg);
}

@media (min-width: 641px) {
  html {
    font-size: 110%;
  }
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body-font);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at top, rgba(10, 104, 149, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(246, 244, 239, 0.52), transparent 40%);
  pointer-events: none;
}

/* Grundfarben für alles, was keine eigene Regel hat */
a {
  color: var(--blau);
}

a:not(.btn-primary):hover,
a:not(.btn-primary):focus-visible {
  color: var(--petrol);
}

ul li::marker {
  color: var(--blau);
}

h3 {
  color: var(--petrol);
}

::selection {
  background-color: rgba(10, 104, 149, 0.3);
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1150px, calc(100vw - 32px));
  min-height: 100svh;
  margin: 0 auto;
  background: var(--creme);
  box-shadow:
    0 0 0 1px rgba(6, 80, 122, 0.06),
    0 22px 54px -18px rgba(6, 80, 122, 0.24),
    0 46px 90px -42px rgba(6, 80, 122, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-panel {
  position: relative;
  padding: 48px 0 0 0;
  flex: 1 0 auto;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 28px;
}

.brand-lockup {
  width: 100%;
  animation: fade-up 0.8s ease-out 0.12s both;
}

.logo-mark {
  height: auto;
  display: block;
  opacity: 0.75;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  font-weight: 400;
  font-family: var(--heading-font);
  color: var(--petrol);
  padding-left: 15px;
}

.typing-title-shell {
  position: relative;
  display: inline-grid;
  max-width: 100%;
}

.typing-title-shell > span {
  grid-area: 1 / 1;
}

.typing-title-measure {
  visibility: hidden;
}

.typing-title {
  position: relative;
  display: block;
}

.typing-title.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: currentColor;
  animation: caret-blink 0.9s steps(1, end) infinite;
}

.form-section {
  max-width: 700px;
  margin: 0 auto;
  animation: fade-up 0.8s ease-out 0.28s both;
  padding-bottom: 32px;
}

.legal-shell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.legal-panel {
  max-width: 900px;
}

/* Titel in derselben Schrift wie die Sektions-Überschriften der Startseite */
.legal-panel > h1 {
  color: var(--petrol);
  padding-left: 50px;
  padding-bottom: 28px;
  font-family: "Passion One", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 1.1;
}


.legal-panel .legal-content {
  padding-inline: 50px;
}

.legal-panel .legal-content h2,
.legal-panel .legal-content h3,
.legal-panel .legal-content h4 {
  padding-left: 0;
  color: var(--petrol);
  font-family: var(--body-font);
  letter-spacing: 0.01em;
}

.legal-panel .legal-content h2 {
  margin: 28px 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.legal-panel .legal-content h3 {
  margin: 24px 0 10px;
  font-size: 1.15rem;
}

.legal-panel .legal-content h4 {
  margin: 18px 0 8px;
  font-size: 1rem;
}

.legal-panel .legal-content p,
.legal-panel .legal-content ul,
.legal-panel .legal-content ol {
  margin: 0 0 14px;
  line-height: 1.7;
}

.legal-panel .legal-content ul,
.legal-panel .legal-content ol {
  padding-left: 22px;
}

.legal-panel .legal-content li + li {
  margin-top: 8px;
}

/* :not(.btn-primary): sonst gewinnt diese Regel und färbt die Button-Schrift wie den Hintergrund */
.legal-panel .legal-content a:not(.btn-primary),
.legal-panel .legal-content a:not(.btn-primary):visited {
  color: var(--blau);
}

.legal-panel .legal-content a:not(.btn-primary):hover,
.legal-panel .legal-content a:not(.btn-primary):focus-visible {
  color: var(--petrol);
}

.legal-kicker {
  margin: 0 0 10px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.legal-copy {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.legal-copy p {
  margin: 0;
  line-height: 1.7;
}

.legal-backlink {
  margin: 32px 0 0;
  padding-left: 50px;
}

.legal-backlink a,
.legal-backlink a:visited {
  color: var(--blau);
  text-decoration: none;
}

.legal-backlink a:hover,
.legal-backlink a:focus-visible {
  color: var(--petrol);
  text-decoration: underline;
  outline: none;
}

/* Formularseiten: gleiche Breite wie .lp-section__inner; Klasse doppelt gegen die Mobile-Regel */
.legal-panel.legal-panel--narrow {
  max-width: 810px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}

.legal-panel--narrow > h1,
.legal-panel--narrow .legal-content,
.legal-panel--narrow .legal-backlink {
  padding-inline: 35px;
}

@media (max-width: 640px) {
  .legal-panel--narrow > h1,
  .legal-panel--narrow .legal-content,
  .legal-panel--narrow .legal-backlink {
    padding-inline: 18px;
  }
}

h2 {
  margin-bottom: 22px;
  text-align: left;
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2rem);
  color: var(--petrol);
  padding-left: 15px;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
  width: 100%;
  border: 1px solid var(--rahmen);
  border-radius: 18px;
  font: inherit;
}

.contact-form input,
.contact-form textarea {
  padding: 15px 18px;
  background: var(--field-bg);
  color: var(--text);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-hell);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 4px rgba(10, 104, 149, 0.14);
  transform: translateY(-1px);
}

.contact-form textarea {
  resize: vertical;
  min-height: 168px;
}

.contact-form button {
  margin-top: 8px;
  padding: 15px 22px;
  background: var(--blau);
  color: var(--weiss);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(6, 80, 122, 0.6);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease;
}

.contact-form button:hover,
.contact-form button:focus-visible {
  outline: none;
  background: var(--petrol);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -16px rgba(6, 80, 122, 0.9);
}

.form-feedback {
  display: none;
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--petrol);
}

.form-feedback:not(:empty) {
  display: block;
}

.form-feedback.is-success {
  color: #356c43;
}

.form-feedback.is-error {
  color: #8a4b4b;
}

.form-note {
  margin: -4px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-hell);
}

/* Anamnesebogen: lange Fragen brauchen sichtbare Labels statt Platzhalter. */
.form-field {
  display: grid;
  gap: 8px;
}

.form-label {
  font-size: 0.94rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
}

.form-label span {
  color: var(--gold);
}

.anamnese-form textarea {
  min-height: 0;
}

.form-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-hell);
  cursor: pointer;
}

.contact-form .form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  padding: 0;
  border-radius: 5px;
  accent-color: var(--blau);
  cursor: pointer;
}

.form-consent a,
.form-consent a:visited {
  color: var(--blau);
  text-decoration: underline;
}

.form-consent a:hover,
.form-consent a:focus-visible {
  color: var(--petrol);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer {
  background: var(--creme);
  color: var(--text);
  padding: 32px 24px 32px;
}

.footer nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.footer a,
.footer a:visited {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-separator {
  font-size: 1.15em;
  line-height: 1;
  transform: translateY(-0.03em);
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--petrol);
  outline: none;
}

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

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes caret-blink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 640px) {
  body {
    min-height: 100dvh;
  }

  .page-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    box-shadow: none;
  }

  .content-panel {
    padding-top: 22px;
    padding-bottom: 0;
  }

  /* .brand-lockup: mobiler Wert steht im @media-Block am Dateiende */
  .form-section,
  .legal-panel {
    padding-inline: 18px;
  }

  .legal-panel > h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.2rem);
  }

  .footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .footer nav {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* Fußzeile der Rechtstexte mit Trennlinie */
.legal-fusszeile {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rahmen);
}

.legal-stand,
.legal-attribution {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-hell);
}

.legal-stand {
  margin-bottom: 0.35rem;
}

/* Matomo-Opt-out in der Datenschutzerklärung */
.optout-frame {
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--rahmen);
  border-radius: 12px;
  margin: 1rem 0;
}

/* ==========================================================================
   Landingpage – Hero (zentriertes Layout, Logo + Text + CTA)
   ========================================================================== */

.hero {
  padding-top: 8px;
  padding-bottom: 56px;
}

.logo-mark {
  width: min(260px, 60%);
  margin-bottom: 22px;
  margin-inline: auto;
}

.brand-lockup {
  width: min(100%, 810px);
  padding-inline: 5px;
}

.hero-kicker {
  margin: 0 0 14px;
  text-align: center;
  font-size: 17.9px;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.hero-headline {
  margin: 32px 80px 24px;
  padding-left: 0;
  text-align: center;
  font-family: "Passion One";
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--petrol);
}

.hero-subline {
  margin: 0 auto 0;
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

/* Großes, mittiges Portrait unter dem Hero */
.hero-portrait {
  margin: 0 auto;
  width: min(400px, 100%);
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(156, 122, 44, 0.22), transparent 60%),
    linear-gradient(135deg, var(--creme) 0%, var(--rahmen) 100%);
  box-shadow:
    0 0 0 1px rgba(6, 80, 122, 0.06),
    0 16px 32px -22px rgba(6, 80, 122, 0.4);
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Zweite Subline optisch hervorgehoben – gleicher Look wie die lp-package-Karten */
.hero-subline--highlight {
  margin: 24px auto 0;
}

.hero-cta {
  margin: 32px 0 0 !important;
  text-align: center;
}

.cta-note {
  margin: 12px 0 0 !important;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-hell);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Wiederverwendbarer Primary-Button
   ========================================================================== */

.btn-primary {
  display: inline-block;
  padding: 16px 30px;
  background: var(--blau);
  color: var(--weiss);
  border: none;
  border-radius: 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease;
  box-shadow: 0 14px 26px -16px rgba(6, 80, 122, 0.6);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  outline: none;
  background: var(--petrol);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -16px rgba(6, 80, 122, 0.9);
}

/* ==========================================================================
   Sektion-System (alternierende Hintergründe)
   ========================================================================== */

.lp-section {
  position: relative;
  padding: 56px 0;
}
.lp-section--tinted {
  background: var(--weiss);
}

/* Portrait randlos über die volle Spaltenbreite */
.lp-portrait {
  margin: 0;
}

.lp-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* Vision / "Wie es aussehen kann" – emotionaler Höhepunkt */
.lp-section--vision {
  background: var(--weiss);
}

/* "Warum jetzt" – 7-Uhr-Bogen des Logos als blasses Hintergrund-Element (unten links) */
.lp-section[aria-labelledby="warum-jetzt-title"] {
  overflow: hidden;
}

.lp-section[aria-labelledby="warum-jetzt-title_disabled"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/logo-deco.webp?v=3") center / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.lp-section[aria-labelledby="warum-jetzt-title"] .lp-section__inner {
  position: relative;
  z-index: 1;
}

/* Deko-Hintergrund: Ausschnitte aus assets/logo-ring.webp per Übergröße + Eckposition */

/* "Was wir im Erstgespräch machen" – Ausschnitt unten links */
.lp-section[aria-labelledby="kennenlerngespraech-title"] {
  overflow: hidden;
}

.lp-section[aria-labelledby="kennenlerngespraech-title"]::before {
  content: "";
  position: absolute;
  left: -112px;
  bottom: -112px;
  width: 2000px;
  height: 2000px;
  /* Basis (auch mobil): boxbezogener Ausschnitt, scrollt normal mit. */
  background: url(./assets/logo-ring.webp?v=2) left bottom / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.lp-section[aria-labelledby="kennenlerngespraech-title"] .lp-section__inner {
  position: relative;
  z-index: 1;
}

/* "Wie es für euch aussehen kann" (Vision) – gleiche Idee, Ausschnitt rechts oben */
.lp-section[aria-labelledby="vision-title"] {
  overflow: hidden;
}

.lp-section[aria-labelledby="vision-title"]::before {
  content: "";
  position: absolute;
  right: -182px;
  top: -1119px;
  width: 2000px;
  height: 2000px;
  /* Basis (auch mobil): boxbezogener Ausschnitt, scrollt normal mit. */
  background: url("./assets/logo-ring.webp?v=2") right top / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.lp-section[aria-labelledby="vision-title"] .lp-section__inner {
  position: relative;
  z-index: 1;
}

/* Parallax nur auf Desktop (fixed ist mobil unzuverlässig). fixed richtet sich am Fenster aus,
   --rand verschiebt den Ring an den Rand von .page-shell. */
@media (hover: hover) and (pointer: fine) {
  .lp-section[aria-labelledby="kennenlerngespraech-title"]::before,
  .lp-section[aria-labelledby="vision-title"]::before {
    --rand: calc((100vw - min(1150px, 100vw - 32px)) / 2);
  }

  .lp-section[aria-labelledby="kennenlerngespraech-title"]::before {
    background: url(./assets/logo-ring.webp?v=2)
      left calc(var(--rand) - 112px) bottom -112px / 2000px no-repeat fixed;
  }

  .lp-section[aria-labelledby="vision-title"]::before {
    background: url("./assets/logo-ring.webp?v=2")
      right calc(var(--rand) - 182px) top -1119px / 2000px no-repeat fixed;
  }
}

.lp-section--vision .lp-lead {
  font-weight: bold;
}

.lp-section--vision .lp-closer {
  font-family: var(--heading-font);
  font-size: 1.1em;
  font-weight: bold;
  color: var(--petrol);
}

.lp-section--closing {
  padding-bottom: 0px;
}

.lp-section__inner {
  max-width: 810px;
  margin: 0 auto;
  padding-inline: 35px;
}

.lp-section__inner--wide {
  max-width: 1025px;
}

.lp-section h2 {
  padding-left: 0;
  margin-bottom: 24px;
  font-family: "Passion One", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 3rem;
  text-align: center;
}

.lp-section p {
  line-height: 1.72;
  margin: 0 0 16px;
}

.lp-section p:last-child {
  margin-bottom: 0;
}

/* :not(.btn-primary): sonst überschreibt dieser Selektor die Button-Schrift */
.lp-section p a:not(.btn-primary),
.lp-section p a:not(.btn-primary):visited {
  color: var(--blau);
  text-decoration: none;
}

.lp-section p a:not(.btn-primary):hover,
.lp-section p a:not(.btn-primary):focus-visible {
  color: var(--petrol);
  text-decoration: underline;
  outline: none;
}

.lp-lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
}

.lp-closer {
  margin-top: 22px;
  font-weight: 500;
  color: var(--text);
}

.lp-label {
  margin: 22px 0 12px;
  font-weight: 600;
  color: var(--text);
}

.lp-label--center {
  text-align: center;
  margin-top: 40px;
}

.lp-section__hint {
  margin: -10px 0 24px;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.65;
}

/* ==========================================================================
   Listen mit Senfgelb-Marker
   ========================================================================== */

.lp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.lp-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blau);
}

/* ==========================================================================
   Pull-Quote
   ========================================================================== */

.lp-pullquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 3px solid var(--gold);
  background: rgba(156, 122, 44, 0.08);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
  border-radius: 0 16px 16px 0;
}

.lp-pullquote--centered {
  text-align: center;
  border-left: none;
  border-top: 3px solid var(--gold);
  border-radius: 16px;
  padding: 26px 28px;
}

/* ==========================================================================
   Sektion-CTA
   ========================================================================== */

.lp-cta {
  margin: 32px 0 0 !important;
  text-align: center;
}

/* ==========================================================================
   Pakete (8 / 12 Wochen)
   ========================================================================== */

.lp-packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 32px 0 0;
}

.lp-packages + .lp-closer {
  margin-top: 44px;
}

.lp-package {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: var(--creme);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px var(--rahmen),
    0 9px 22px -17px rgba(6, 80, 122, 0.4);
}

.lp-section--tinted .lp-package {
  background: var(--weiss);
}

/* Akut-Karte – volle Breite, sonst visuell identisch zu 8/12 */
.lp-package--acute {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 38px;
}

.lp-package--acute .lp-package__intro,
.lp-package--acute .lp-package__details {
  display: flex;
  flex-direction: column;
}

.lp-package__details {
  margin-top: 15px;
}

.lp-package--acute .lp-package__lead {
  font-size: 1.02rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.lp-package--acute .lp-label {
  margin-top: 0;
}

.lp-package__kicker {
  margin: 0 0 8px;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.lp-package__title {
  margin: 0 0 18px;
  font-family: var(--heading-font);
  font-size: 1.6rem;
  color: var(--petrol);
  font-weight: 500;
  line-height: 1.15;
}

.lp-package__focus {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rahmen);
  font-size: 0.96rem;
  line-height: 1.6;
}

.lp-package__focus span {
  font-weight: 700;
  color: var(--petrol);
}

/* ==========================================================================
   Über mich – „So begleite ich dich": Bild links randlos, Text rechts (4 : 8)
   ========================================================================== */

.begleitung {
  display: grid;
  grid-template-columns: 4fr 8fr;
  padding: 0;
  background: var(--creme);
}

.begleitung__bild {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
  object-position: 50% 30%;
}

.begleitung__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 64px 56px;
  line-height: 1.7;
  color: var(--text);
}

.begleitung__text > * {
  margin: 0;
}

.lp-section.begleitung h2 {
  margin: 0 0 12px;
  text-align: left;
  color: var(--petrol);
}

.begleitung__lead {
  font-size: 1.2rem;
  line-height: 1.55;
  font-weight: 600;
}

.begleitung__zitat {
  margin-top: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--rahmen);
  font-family: var(--heading-font);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--petrol);
}

/* Zweispaltig: kleinere H2, sonst drei Zeilen in der schmalen Textspalte */
@media (min-width: 901px) {
  .lp-section.begleitung h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 900px) {
  .begleitung {
    grid-template-columns: 1fr;
  }

  .begleitung__bild {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .begleitung__text {
    padding: 48px 24px;
  }
}

/* ==========================================================================
   4 Dimensionen (Körper / Rhythmen / Emotionen / Feld)
   ========================================================================== */

.lp-dimensions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 12px 0 36px;
}

.lp-dimension {
  padding: 22px 16px;
  background: rgba(10, 104, 149, 0.07);
  border-radius: 18px;
  text-align: center;
}

.lp-dimension__title {
  margin: 0 0 8px;
  padding-left: 0;
  font-family: "Passion One", sans-serif;
  font-size: 1.55rem;
  color: var(--petrol);
  font-weight: 400;
  text-align: center;
}

.lp-dimension p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

/* ==========================================================================
   FAQ – Accordion (native <details>)
   ========================================================================== */

.lp-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 15px;
}

.lp-faq__item {
  background: var(--weiss);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px var(--rahmen),
    0 9px 22px -17px rgba(6, 80, 122, 0.4);
  overflow: hidden;
}

.lp-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  list-style: none;
  transition: background-color 180ms ease;
}

.lp-faq__item summary::-webkit-details-marker {
  display: none;
}

.lp-faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 2rem;
  color: var(--gold);
  line-height: 0.8;
  transform-origin: center;
  transition: transform 200ms ease;
}

.lp-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.lp-faq__item summary:hover {
  background-color: rgba(10, 104, 149, 0.06);
}

.lp-faq__item summary:focus-visible {
  outline: none;
  background-color: rgba(10, 104, 149, 0.1);
}

.lp-faq__body {
  padding: 0 22px 20px;
}

.lp-faq__body p {
  margin: 0 0 10px;
  line-height: 1.65;
}

.lp-faq__body p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Buchungs-Sektion (Cal.com Lazy-Load)
   ========================================================================== */

.lp-booking__hint {
  text-align: center;
  margin: 0 auto 0 16px;
  color: var(--text);
  line-height: 1.6;
}

/* Rahmen wie bei den FAQ-Items: Haarlinie + weicher Schatten statt harter Border */
.lp-booking {
  margin-top: 18px;
  padding: 12px;
  background: var(--weiss);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px var(--rahmen),
    0 9px 22px -17px rgba(6, 80, 122, 0.4);
  overflow: hidden;
}

.lp-booking__embed {
  margin-top: 6px;
  width: 100%;
  min-height: 620px;
  overflow: auto;
  text-align: left;
}

/* Hinweis außerhalb des Einbettungsbereichs, cal ersetzt dessen Inhalt */
.lp-booking__note {
  margin: 0;
  color: var(--text-hell);
  font-size: 0.92rem;
  line-height: 1.6;
}

.lp-booking__note a,
.lp-booking__note a:visited {
  color: var(--blau);
}

.lp-booking__note a:hover,
.lp-booking__note a:focus-visible {
  color: var(--petrol);
}

/* ==========================================================================
   Kontaktformular in Sektion (statt eigener form-section)
   ========================================================================== */

.lp-section--tinted .contact-form input,
.lp-section--tinted .contact-form textarea {
  background: var(--weiss);
}

/* ==========================================================================
   Mobile (≤ 640 px)
   ========================================================================== */

@media (max-width: 640px) {
  .hero {
    padding-bottom: 40px;
  }

  /* Gleicher Seitenabstand wie .lp-section__inner */
  .brand-lockup {
    padding-inline: 18px;
  }

  .logo-mark {
    width: min(180px, 55%);
  }

  .hero-headline {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }


  .lp-section {
    padding: 44px 0;
  }

  .lp-section--closing {
    padding-bottom: 28px;
  }

  .lp-section__inner,
  .lp-section__inner--wide {
    padding-inline: 18px;
  }

  .lp-section h2 {
    font-size: clamp(1.8rem, 6.5vw, 2.2rem);
  }

  .lp-packages {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lp-package {
    padding: 24px 22px;
  }

  .lp-package--acute {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-left: 22px;
  }


  .lp-dimensions {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .lp-dimension {
    padding: 18px 12px;
  }

  .lp-faq__item summary {
    padding: 16px 18px;
    font-size: 0.97rem;
  }

  .lp-faq__body {
    padding: 0 18px 18px;
  }

  .lp-booking {
    padding: 8px;
    border-radius: 14px;
  }

  .lp-booking__embed {
    min-height: 560px;
  }

  .btn-primary {
    padding: 15px 24px;
    font-size: 0.98rem;
  }
}