/* =========================================================
   Böhme – Aktiv Zuhause
   Design: warmes Papier, tiefes Waldgrün, Terrakotta-Akzent.
   Ruhig, freundlich, vertrauenswürdig – bewusst kein Gym-Look.
   ========================================================= */

/* ---------- 1. Farb- und Design-Tokens ---------- */
:root{
  /* Flächen */
  --paper:      #FAF6EF;   /* warmes Papierweiß, Hauptuntergrund */
  --paper-2:    #F2ECE0;   /* abgesetzter Abschnitt */
  --paper-3:    #FFFDF9;   /* Karten */

  /* Grün – Ruhe, Gesundheit, Kompetenz */
  --pine:       #1E3A31;
  --pine-2:     #2E5748;
  --sage:       #7FA08D;   /* dekorativ: Linien, Ränder, Icons */
  --sage-label: #9DBCA9;   /* kleiner Text auf dunklem Grün (6:1) */
  --sage-soft:  #DCE7DF;

  /* Terrakotta – Wärme, Menschlichkeit.
     Alle Werte auf WCAG-AA geprüft (kleiner Text ≥ 4.5:1). */
  --clay:       #A54E2F;   /* Buttons + kleiner Text auf Papier */
  --clay-hover: #8F4227;   /* dunkler beim Überfahren */
  --clay-2:     #D2764F;   /* helle Variante – nur auf dunklem Grün */
  --clay-soft:  #F3DFD3;

  /* Text */
  --ink:        #23211D;
  --ink-2:      #55504A;
  --ink-3:      #635D54;   /* leise, aber noch klar lesbar (5.5:1) */
  --line:       #E2D9CA;

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Karla", "Segoe UI", -apple-system, sans-serif;

  /* Maße */
  --wrap: 1180px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;

  --shadow-sm: 0 2px 6px rgba(35,33,29,.05);
  --shadow-md: 0 12px 32px -12px rgba(30,58,49,.18);
  --shadow-lg: 0 30px 70px -30px rgba(30,58,49,.38);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.125rem;          /* 18px – Lesbarkeit ist hier Programm */
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Feine Papierkörnung über der ganzen Seite */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 30, "opsz" 60;
}

p{ margin:0 0 1em; }
a{ color:var(--pine-2); }

.wrap{ width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto; }

:where(a,button,input,textarea,summary):focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:1rem; top:-100px; z-index:1000;
  background:var(--pine); color:#fff; padding:.7rem 1.2rem;
  border-radius:0 0 var(--r-sm) var(--r-sm); text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------- 3. Buttons ---------- */
.btn{
  --btn-bg:var(--pine); --btn-fg:#fff; --btn-bd:var(--pine);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2px solid var(--btn-bd);
  padding:.95rem 1.7rem;
  font-family:var(--font-body); font-size:1.0625rem; font-weight:600;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  border-radius:100px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }

.btn--primary{ --btn-bg:var(--clay); --btn-bd:var(--clay); }
.btn--primary:hover{ --btn-bg:var(--clay-hover); --btn-bd:var(--clay-hover); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--pine); --btn-bd:var(--pine); }
.btn--ghost:hover{ --btn-bg:var(--pine); --btn-fg:#fff; }

.btn--sm{ padding:.6rem 1.25rem; font-size:.98rem; }
.btn--lg{ padding:1.1rem 2rem; font-size:1.125rem; }
.btn--block{ display:flex; width:100%; }
.btn__icon{ width:1.15em; height:1.15em; fill:currentColor; }

/* ---------- 4. Topbar + Header ---------- */
.topbar{
  background:var(--pine);
  color:#CFE0D6;
  font-size:.9rem;
  letter-spacing:.02em;
}
.topbar__inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; min-height:42px; flex-wrap:wrap;
}
.topbar__phone{
  color:#fff; text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:.45rem;
}
.topbar__phone svg{ width:1em; height:1em; fill:var(--sage); }
.topbar__phone:hover{ text-decoration:underline; }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,239,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(30,58,49,.5); }

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:82px;
}

.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; color:inherit; }
.brand__mark{ width:44px; height:44px; flex:none; display:block; }
.brand__mark svg{ width:100%; height:100%; }
.bm-ring{ fill:none; stroke:var(--sage); stroke-width:1.5; }
.bm-arc{ fill:none; stroke:var(--pine); stroke-width:2.4; stroke-linecap:round; }
.bm-dot{ fill:var(--clay); }
.brand__logo{ width:52px; height:auto; }

.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family:var(--font-display); font-size:1.6rem; font-weight:600;
  color:var(--pine); letter-spacing:-.02em;
}
.brand__sub{ font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav__list a{
  position:relative; text-decoration:none; color:var(--ink-2);
  font-size:1.02rem; font-weight:500; padding:.35rem 0;
  transition:color .2s;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--clay); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__list a:hover{ color:var(--pine); }
.nav__list a:hover::after,
.nav__list a.is-current::after{ transform:scaleX(1); }
.nav__list a.is-current{ color:var(--pine); font-weight:600; }

.nav-toggle{
  display:none; align-items:center; gap:.55rem;
  background:none; border:2px solid var(--line); border-radius:100px;
  padding:.5rem .95rem; cursor:pointer;
  font-family:var(--font-body); font-size:.95rem; font-weight:600; color:var(--pine);
}
.nav-toggle__bars{ display:grid; gap:4px; width:18px; }
.nav-toggle__bars i{ display:block; height:2px; background:var(--pine); border-radius:2px; transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero{ position:relative; padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); overflow:hidden; }
.hero__glow{
  position:absolute; top:-25%; right:-15%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle at 50% 50%, rgba(127,160,141,.35), rgba(127,160,141,0) 62%);
  border-radius:50%; pointer-events:none;
  animation:breathe 14s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }

.hero__grid{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.eyebrow{
  font-size:.85rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay); font-weight:700; margin-bottom:1.3rem;
  display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--clay); flex:none; }

.hero__title{
  font-size:clamp(2.1rem, 5.6vw, 4.35rem);
  font-variation-settings:"SOFT" 40, "opsz" 120, "WONK" 1;
  color:var(--pine);
  margin-bottom:1.4rem;
}

/* Farbige Hervorhebung hinter der Schlusszeile.
   Breite Schirme: ein leicht gedrehter Balken, der beim Laden einwischt.
   Schmale Schirme: siehe Media Query – dort darf die Zeile umbrechen. */
.marker{ position:relative; display:inline-block; white-space:nowrap; }
.marker::after{
  content:""; position:absolute; left:-1%; right:-1%; bottom:.02em; height:.42em;
  background:var(--clay-soft); border-radius:.3em;
  transform:rotate(-.6deg) scaleX(0); transform-origin:left;
  z-index:-1;
  animation:swipe 1s .55s var(--ease) forwards;
}
@keyframes swipe{ to{ transform:rotate(-.6deg) scaleX(1); } }

.hero__lead{
  font-size:1.22rem; color:var(--ink-2); max-width:34rem; line-height:1.72;
  margin-bottom:2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.2rem; }
.hero__note{
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  color:var(--pine-2); margin:0;
}

/* Foto-Bogen */
.hero__media{ position:relative; }
.photo{ margin:0; position:relative; }
.photo--arch{
  border-radius:999px 999px 20px 20px;
  overflow:hidden;
  background:var(--sage-soft);
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.photo--arch img{ width:100%; height:100%; object-fit:cover; }
.photo--portrait{ aspect-ratio:4/5; }

.photo__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  color:var(--pine-2);
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, rgba(46,87,72,.05) 0 12px, transparent 12px 24px),
    var(--sage-soft);
  text-align:center; padding:1rem;
}
.photo__ph svg{
  width:44px; height:44px; fill:none; stroke:var(--pine-2); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.6; margin-bottom:.3rem;
}
.photo__ph span{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; }
.photo__ph small{ font-size:.9rem; color:var(--ink-2); opacity:.8; }

.badge-free{
  position:absolute; left:-1.5rem; bottom:2.5rem;
  background:var(--clay); color:#fff;
  width:118px; height:118px; border-radius:50%;
  display:grid; place-content:center; text-align:center; line-height:1.2;
  box-shadow:var(--shadow-md);
  transform:rotate(-9deg);
  border:3px solid var(--paper);
}
.badge-free__big{ display:block; font-family:var(--font-display); font-size:1.28rem; font-weight:600; }
.badge-free__small{ display:block; font-size:.86rem; letter-spacing:.13em; text-transform:uppercase; }

/* Vertrauensleiste */
.trust{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:1.6rem 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.trust li{ display:flex; flex-direction:column; gap:.15rem; }
.trust strong{
  font-family:var(--font-display); font-size:1.7rem; font-weight:600; color:var(--pine);
  line-height:1.1;
}
.trust span{ font-size:.98rem; color:var(--ink-2); }

/* ---------- 6. Abschnitte allgemein ---------- */
.section{ padding:clamp(3.5rem,8vw,7rem) 0; position:relative; }
.section--paper2{ background:var(--paper-2); }

.section__head{ max-width:44rem; margin:0 auto clamp(2.2rem,4vw,3.4rem); text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }

.section__num{
  font-family:var(--font-display); font-style:italic; font-size:1rem;
  color:var(--clay); letter-spacing:.14em; margin:0 0 .6rem;
}
.section__num--light{ color:var(--sage-label); }

.section__title{
  font-size:clamp(1.85rem,3.6vw,2.85rem);
  color:var(--pine);
  font-variation-settings:"SOFT" 35, "opsz" 90;
}
.section__title--light{ color:#fff; }
.section__intro{ font-size:1.14rem; color:var(--ink-2); margin:0; }

/* ---------- 7. Checkliste "Für wen" ---------- */
.checks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:.7rem 2rem;
}
.checks li{
  position:relative; padding:.85rem 0 .85rem 2.6rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-2); font-size:1.06rem;
}
.checks li::before{
  content:""; position:absolute; left:0; top:1.15rem;
  width:1.35rem; height:.72rem;
  border-left:2.5px solid var(--clay); border-bottom:2.5px solid var(--clay);
  transform:rotate(-45deg); border-radius:1px;
}

/* ---------- 8. Über mich ---------- */
.about{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about__media{ position:relative; }
.about__caption{
  margin:1.1rem 0 0; text-align:center;
  font-family:var(--font-display); font-style:italic; color:var(--ink-2); font-size:1rem;
}
.about__text{ font-size:1.14rem; color:var(--ink-2); max-width:38rem; }

.creds{ list-style:none; margin:2.2rem 0 0; padding:0; }
.creds li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-top:1px solid var(--line);
}
.creds li:last-child{ border-bottom:1px solid var(--line); }
.creds__label{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay); font-weight:700;
}
.creds__value{ color:var(--ink); font-weight:500; }

/* ---------- 9. Leistungskarten ---------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.4rem;
}
.card{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) var(--r-md) var(--r-md);
  padding:2rem 1.8rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--sage); }
.card__icon{
  display:grid; place-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--sage-soft); margin-bottom:1.1rem;
}
.card__icon svg{
  width:27px; height:27px; fill:none; stroke:var(--pine); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ font-size:1.32rem; color:var(--pine); margin-bottom:.4rem; }
.card p{ margin:0; color:var(--ink-2); font-size:1.02rem; }

/* ---------- 10. Rücken-Abschnitt ---------- */
.back{ background:var(--pine); color:#E4EDE7; overflow:hidden; }
.back__deco{
  position:absolute; left:-8%; bottom:-45%; width:48vw; height:48vw; max-width:640px; max-height:640px;
  background:radial-gradient(circle, rgba(127,160,141,.22), transparent 65%);
  border-radius:50%; pointer-events:none;
}
.back__grid{
  position:relative;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.back__lead{ font-size:1.16rem; color:#CBDDD2; max-width:34rem; }
.back__hint{
  margin:1.8rem 0 0; padding:1rem 1.3rem;
  border-left:3px solid var(--clay-2);
  background:rgba(255,255,255,.05);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:1rem; color:#DDE8E1;
}
.back__hint strong{ color:#fff; }

.back__list{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);
  padding:2rem 2rem 1.6rem;
  backdrop-filter:blur(3px);
}
.back__list-title{
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sage-label); font-weight:700; margin-bottom:1.1rem;
}
.back__list ul{ list-style:none; margin:0; padding:0; }
.back__list li{
  position:relative; padding:.75rem 0 .75rem 1.9rem;
  border-top:1px solid rgba(255,255,255,.1);
  color:#E4EDE7; font-size:1.04rem;
}
.back__list li:first-child{ border-top:0; }
.back__list li::before{
  content:""; position:absolute; left:0; top:1.35rem;
  width:9px; height:9px; border-radius:50%; background:var(--clay-2);
}

/* ---------- 11. Vorteile ---------- */
.perks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.9rem;
}
.perks li{
  position:relative;
  background:var(--paper-3); border:1px solid var(--line); border-radius:100px;
  padding:.95rem 1.4rem .95rem 3.1rem;
  color:var(--ink); font-size:1.02rem; font-weight:500;
  transition:border-color .25s, transform .25s var(--ease);
}
.perks li:hover{ border-color:var(--sage); transform:translateX(3px); }
.perks li::before{
  content:""; position:absolute; left:1.35rem; top:50%; margin-top:-3px;
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--clay); box-shadow:0 0 0 4px var(--clay-soft);
}

/* ---------- 12. Preise ---------- */
.prices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.3rem;
  align-items:stretch;
}
.price{
  display:flex; flex-direction:column;
  background:var(--paper-3); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2rem 1.7rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.price__tag{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); margin-bottom:.9rem;
}
.price__name{ font-size:1.35rem; color:var(--pine); margin-bottom:.7rem; }
.price__amount{
  font-family:var(--font-display); font-size:2.6rem; font-weight:600; color:var(--pine);
  line-height:1; margin:0 0 .55rem;
  font-variation-settings:"SOFT" 40, "opsz" 100;
}
.price__amount span{ font-size:1.4rem; }
.price__meta{ font-size:.98rem; color:var(--ink-2); margin:0 0 1.2rem; }
.price .btn{ margin-top:auto; }

.price--free{
  background:var(--pine); border-color:var(--pine); color:#E4EDE7;
  position:relative; overflow:hidden;
}
.price--free::before{
  content:""; position:absolute; right:-30%; top:-40%; width:80%; height:120%;
  background:radial-gradient(circle, rgba(127,160,141,.3), transparent 65%);
}
.price--free .price__tag{ color:var(--sage-label); position:relative; }
.price--free .price__name,
.price--free .price__amount{ color:#fff; position:relative; }
.price--free .price__amount{ font-size:2.1rem; font-style:italic; }
.price--free .price__meta{ color:#C6D9CD; position:relative; }
.price--free .btn{ position:relative; }

/* ---------- 13. Ablauf ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem 1.6rem;
  counter-reset:s;
}
.step{ position:relative; padding-top:.4rem; }
/* Verbindungslinie zwischen den Schritten */
.step::after{
  content:""; position:absolute; left:calc(50px + .9rem); top:24px; right:-1.6rem; height:1px;
  background:repeating-linear-gradient(90deg, var(--sage) 0 7px, transparent 7px 14px);
}
.step:last-child::after{ display:none; }
.step__num{
  display:grid; place-content:center;
  width:50px; height:50px; border-radius:50%;
  background:var(--paper-3); border:2px solid var(--pine); color:var(--pine);
  font-family:var(--font-display); font-size:1.35rem; font-weight:600;
  margin-bottom:1.1rem; position:relative; z-index:1;
}
.step h3{ font-size:1.24rem; color:var(--pine); margin-bottom:.35rem; }
.step p{ margin:0; color:var(--ink-2); font-size:1.02rem; }

/* ---------- 14. Kontakt ---------- */
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start;
}
.contact__lead{ font-size:1.12rem; color:var(--ink-2); max-width:32rem; }

.contact__list{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:1.4rem; }
.contact__list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact__ico{
  flex:none; display:grid; place-content:center;
  width:46px; height:46px; border-radius:50%; background:var(--sage-soft);
}
.contact__ico svg{
  width:22px; height:22px; fill:none; stroke:var(--pine); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.contact__k{
  display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
.contact__list a{
  color:var(--pine); font-weight:600; text-decoration:none; font-size:1.1rem;
  display:inline-block; padding:.2rem 0;
}
.contact__list a:hover{ text-decoration:underline; }

/* Formular */
.form{
  background:var(--paper-3); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:var(--shadow-md);
}
.form__title{
  font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--pine);
  margin-bottom:1.4rem;
}
.field{ margin-bottom:1.15rem; }
.field label{
  display:block; font-size:.95rem; font-weight:600; color:var(--ink); margin-bottom:.4rem;
}
.field label span{ color:var(--clay); }
.field input,
.field textarea{
  width:100%; font-family:var(--font-body); font-size:1.05rem; color:var(--ink);
  background:var(--paper); border:2px solid var(--line); border-radius:var(--r-sm);
  padding:.8rem .95rem; transition:border-color .2s, background-color .2s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,
.field textarea:focus{ border-color:var(--pine-2); background:#fff; outline:none; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-3); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:var(--clay); background:#FFF7F3; }

.field--check{ display:flex; gap:.75rem; align-items:flex-start; margin:1.5rem 0; }
.field--check input{ width:1.35rem; height:1.35rem; flex:none; margin-top:.2rem; accent-color:var(--pine); }
.field--check label{ font-size:.95rem; font-weight:400; color:var(--ink-2); line-height:1.55; margin:0; }

.form__hint{ font-size:.88rem; color:var(--ink-3); margin:.8rem 0 0; text-align:center; }
.form__status{ margin:.9rem 0 0; font-size:.98rem; font-weight:600; text-align:center; }
.form__status.is-ok{ color:var(--pine-2); }
.form__status.is-error{ color:var(--clay); }

/* ---------- 15. Hinweis ---------- */
.disclaimer{ background:var(--paper-2); border-top:1px solid var(--line); padding:1.8rem 0; }
.disclaimer p{
  margin:0; font-size:.95rem; line-height:1.65; color:var(--ink-3); max-width:62rem;
}
.disclaimer strong{ color:var(--ink-2); }

/* ---------- 16. Footer ---------- */
.site-footer{ background:var(--pine); color:#BFD2C7; padding:clamp(3rem,6vw,4.5rem) 0 1.5rem; }
.site-footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{
  font-family:var(--font-display); font-size:1.9rem; font-weight:600; color:#fff; margin:0;
}
.footer-sub{
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--sage-label);
  margin:.15rem 0 1rem;
}
.footer-text{ font-size:1rem; max-width:24rem; margin:0; }
.footer-head{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-label);
  font-weight:700; margin-bottom:1rem;
}
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
/* Großzügige Klickflächen – die Zielgruppe tippt nicht immer millimetergenau */
.footer-list a{ color:#BFD2C7; text-decoration:none; display:inline-block; padding:.35rem 0; }
.footer-list a:hover{ color:#fff; text-decoration:underline; }

.site-footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-top:1.5rem; font-size:.9rem; color:#8FAA9B;
}
.site-footer__bottom p{ margin:0; }
.legal{ display:flex; gap:.7rem; align-items:center; }
.legal a{ color:#BFD2C7; text-decoration:none; }
.legal a:hover{ color:#fff; text-decoration:underline; }

/* ---------- 17. Mobile Schnellkontakt ---------- */
.quickbar{ display:none; }

/* ---------- 18. Scroll-Reveal ----------
   Der versteckte Zustand gilt nur mit aktivem JavaScript (.js am <html>),
   damit ohne JS niemals Inhalt unsichtbar bleibt. */
.js .reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
/* Hero direkt beim Laden gestaffelt einblenden */
.hero .reveal.is-in{ transition-delay:calc(var(--i,0) * 110ms); }

/* ---------- 19. Responsive ---------- */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ max-width:420px; margin-inline:auto; }
  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:380px; margin-inline:auto; }
  .back__grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .step::after{ display:none; }
}

@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px -24px rgba(30,58,49,.5);
    padding:.5rem 1.25rem 1.5rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line); }
  .nav__list a{ display:block; padding:1rem 0; font-size:1.1rem; }
  .nav__list a::after{ display:none; }
  .nav__cta{ margin-top:1.2rem; }
}

@media (max-width:640px){
  body{ font-size:1.0625rem; }

  /* Die Überschrift darf hier umbrechen – sonst wird sie abgeschnitten.
     Die Hervorhebung läuft deshalb als Hintergrund mit, Zeile für Zeile. */
  .marker{ display:inline; white-space:normal; }
  .marker::after{ display:none; }
  .marker{
    background:linear-gradient(transparent 58%, var(--clay-soft) 58%, var(--clay-soft) 96%, transparent 96%);
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }

  .topbar__inner{ justify-content:center; min-height:auto; padding:.5rem 0; }
  .topbar__item:first-child{ display:none; }
  .hero{ padding-top:2.2rem; }
  .hero__actions .btn{ width:100%; }
  .badge-free{ width:96px; height:96px; left:-.6rem; bottom:1.2rem; }
  .badge-free__big{ font-size:1.05rem; }
  .badge-free__small{ font-size:.74rem; }
  .trust{ grid-template-columns:repeat(2,1fr); }
  .creds li{ grid-template-columns:1fr; gap:.15rem; }
  .site-footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .site-footer__bottom{ justify-content:center; text-align:center; }

  /* Feste Kontaktleiste unten – wichtig für Telefonanfragen */
  .quickbar{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    box-shadow:0 -8px 24px -12px rgba(30,58,49,.4);
  }
  .quickbar__btn{
    padding:1rem .5rem; text-align:center; text-decoration:none;
    font-weight:700; font-size:1.02rem;
  }
  .quickbar__btn--call{ background:var(--pine); color:#fff; }
  .quickbar__btn--mail{ background:var(--clay); color:#fff; }
  body{ padding-bottom:60px; }
}

/* ---------- 20. Rücksicht auf Nutzerpräferenzen ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .marker::after{ transform:rotate(-.6deg) scaleX(1); }
}

@media print{
  .site-header,.topbar,.quickbar,.hero__glow,.form,body::after{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding:1.5rem 0; page-break-inside:avoid; }
}