/* =========================================================
   Katharina Coaching · style.css
   Mobile-first. Farben, Schriften und Größen aus der Canva-Vorlage (PDF).
   Größen in der Vorlage beziehen sich auf eine 1366 px breite Fläche;
   clamp() skaliert sie darunter proportional, mit Untergrenzen für Lesbarkeit.
   Keine Animationen, keine Übergänge.
   ========================================================= */

/* ---------- Schriften, lokal (fonts/) ----------
   Fraunces (weiche Serifen)  = Ersatz für Garbata (nur mit Canva-Lizenz)
   La Belle Aurore            = Ersatz für Amsterdam Four (nur mit Canva-Lizenz)
   Montserrat, Inter          = wie in der Vorlage */
@font-face{font-family:"Fraunces Soft";src:url(fonts/fraunces-soft-latin-wght.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"La Belle Aurore";src:url(fonts/la-belle-aurore-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

/* ---------- Farben und Maße: hier zentral ändern ---------- */
:root{
  /* Farben aus der Vorlage */
  --plum:#a22355;        /* dunkle Blöcke, Überschriften, Hauptbutton auf Hell */
  --cream:#f8f4f0;       /* Seitenhintergrund, Text und Button auf Plum */
  --rose:#e2d1d0;        /* Fließtext auf Plum, Claim */
  --rose-icon:#c08b87;   /* nur Icons (für Text zu wenig Kontrast) */
  --grey:#545454;        /* Nebenüberschriften */
  --ink:#1d1d1d;         /* Rechtstexte */
  /* abgeleitet */
  --plum-dark:#821c44;   /* Footer, Hover auf Plum */
  --white:#ffffff;       /* Kästen, Karten */
  --line:#e6ddd6;        /* feine Linien auf Creme */

  /* Schriften */
  --f-head:"Fraunces Soft",Georgia,"Times New Roman",serif;
  --f-script:"La Belle Aurore","Segoe Script",cursive;
  --f-body:"Montserrat",Arial,Helvetica,sans-serif;
  --f-ui:"Inter",Arial,Helvetica,sans-serif;
  --w-head:360;          /* Garbata Regular */
  --w-head-bold:600;     /* Garbata Bold */

  /* Schriftgrößen: Vorlagenwert bei 1366 px Breite als Obergrenze */
  --fs-h1:clamp(2.1rem, 1.2rem + 3.3vw, 3.75rem);       /* 60 px */
  --fs-h1-sub:clamp(1.25rem, .95rem + 1.2vw, 1.875rem);
  --fs-claim:clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem);     /* Schreibschrift */
  --fs-h2:clamp(1.75rem, 1.2rem + 1.95vw, 2.5rem);      /* 40 px */
  --fs-h3:clamp(1.375rem, .95rem + 1.35vw, 2.25rem);      /* Angebotstitel, 44 px skaliert */
  --fs-statement:clamp(1.3rem, .85rem + 1.8vw, 2.5rem); /* Aussagen 40 px */
  --fs-body:clamp(1rem, .82rem + .72vw, 1.5rem);        /* 24 px */
  --fs-small:clamp(.9375rem, .85rem + .4vw, 1.25rem);   /* 20 px */
  --fs-note:clamp(.8125rem, .78rem + .12vw, .875rem);   /* Hinweis */
  --fs-btn:clamp(1rem, .9rem + .35vw, 1.1875rem);

  --lh-body:1.45;
  --gutter:clamp(1.25rem, 5vw, 5.75rem);
  --section-y:clamp(3.5rem, 7vw, 6.5rem);
  --maxw:72rem;
  --header-h:4.25rem;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + .75rem)}
body{margin:0;background:var(--cream);color:var(--plum);font:400 var(--fs-body)/var(--lh-body) var(--f-body);overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
p,ul,ol,figure,blockquote{margin:0}
p + p{margin-top:1em}
h1,h2,h3{margin:0;font-weight:400;hyphens:manual}
strong{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--cream)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-5rem;z-index:200;background:var(--plum);color:var(--cream);padding:.75rem 1.25rem;font:700 1rem var(--f-ui)}
.skip:focus{top:.75rem}

.wrap{max-width:var(--maxw);margin:0 auto}
.wrap.narrow{max-width:56rem}          /* mittig gesetzte Blöcke: Stimmen, Fragen */
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}
.section{padding:var(--section-y) var(--gutter)}
.dark{background:var(--plum);color:var(--rose)}
.h2{font:var(--w-head) var(--fs-h2)/1.25 var(--f-head);color:var(--plum);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.dark .h2{color:var(--cream)}
.lead{max-width:48rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.5rem;border:2px solid var(--plum);border-radius:999px;background:var(--plum);color:var(--cream);font:700 var(--fs-btn)/1.2 var(--f-body);text-decoration:none;text-align:center;cursor:pointer;white-space:normal}
.btn:hover{background:var(--plum-dark);border-color:var(--plum-dark)}
.btn-light{background:var(--cream);color:var(--plum);border-color:var(--cream)}
.btn-light:hover{background:var(--white);border-color:var(--white)}
.btn-outline{background:transparent;color:var(--plum)}
.btn-outline:hover{background:var(--plum);color:var(--cream)}
.textlink{font-weight:700;text-decoration:underline;display:inline-block;padding:.35rem 0;min-height:44px}

/* ---------- Kopfleiste ---------- */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:var(--cream);border-bottom:1px solid var(--line)}
.site-header .bar{height:100%;max-width:calc(var(--maxw) + 4rem);margin:0 auto;padding:0 clamp(1rem,3vw,2rem);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:clamp(34px,4vw,42px);width:auto}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:48px;min-height:48px;padding:0 .75rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--plum);font:700 1rem var(--f-ui);cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.site-nav{display:none}
.site-nav.open{display:block;position:absolute;left:0;right:0;top:var(--header-h);background:var(--cream);border-bottom:1px solid var(--line);padding:.5rem clamp(1rem,3vw,2rem) 1.25rem;box-shadow:0 12px 24px rgba(60,20,35,.08)}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{display:flex;align-items:center;min-height:48px;padding:0 .25rem;font:400 1.0625rem var(--f-ui);color:var(--plum);text-decoration:none;border-bottom:1px solid var(--line)}
.site-nav a:hover{text-decoration:underline}
.site-nav .btn{margin-top:1rem;width:100%;border-bottom:2px solid var(--plum);color:var(--cream)}
@media (min-width:64em){
  .nav-toggle{display:none}
  .site-nav,.site-nav.open{display:flex;position:static;padding:0;box-shadow:none;border:0;background:none;align-items:center;gap:1.75rem}
  .site-nav ul{display:flex;gap:1.5rem}
  .site-nav a{border:0;min-height:44px;font-size:1rem}
  .site-nav .btn{margin:0;width:auto;font-size:.95rem;padding:.55rem 1.25rem}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) var(--gutter) 0;overflow:hidden}
.hero .wrap{display:grid;gap:2rem;align-items:end}
.hero-text{padding-bottom:clamp(1rem,4vw,4.5rem)}
.hero h1{color:var(--rose)}
.hero h1 .t1{display:block;font:var(--w-head-bold) var(--fs-h1)/1.1 var(--f-head);text-transform:uppercase}
.hero h1 .t2{display:block;margin-top:.9rem;font:var(--w-head) var(--fs-h1-sub)/1.3 var(--f-head);color:var(--cream)}
.claim{margin-top:.6rem;font:400 var(--fs-claim)/1.2 var(--f-script);color:var(--rose)}
.hero .intro{margin-top:1.5rem;max-width:36rem;font:var(--w-head) clamp(1.125rem, .8rem + 1.1vw, 1.625rem)/1.4 var(--f-head);color:var(--rose)}
.hero .actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero .actions .textlink{color:var(--cream)}
.hero picture{justify-self:center;width:min(100%,26rem)}
.hero picture img{width:100%;height:auto}
@media (min-width:52em){
  .hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .hero picture{justify-self:end;width:100%;max-width:30rem}
}

/* ---------- Vertrauensleiste ---------- */
.trust{padding:clamp(1.75rem,3.5vw,2.75rem) var(--gutter);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
.trust li{min-width:0;hyphens:auto}
.trust li{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:0 .5rem;text-align:center;font:400 clamp(.875rem,.8rem + .3vw,1.0625rem)/1.4 var(--f-body)}
.trust svg{flex:none;width:2rem;height:2rem}
@media (min-width:64em){
  .trust ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .trust li{padding:0 1.5rem}
  .trust li + li{border-left:1px solid var(--line)}
}

/* ---------- Anliegen ---------- */
.anliegen .wrap{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
.anliegen picture img{width:100%}
.questions{list-style:none;padding:0;font:var(--w-head) clamp(1.2rem, .8rem + 1.6vw, 2.3rem)/1.25 var(--f-head)}
.questions li + li{margin-top:1em}
.support{margin-top:clamp(2rem,4vw,3rem)}
.support{font-size:clamp(.9375rem, .78rem + .6vw, 1.3125rem)}
.support h3{font:700 1em/1.3 var(--f-body);margin-bottom:.75rem}
.support ul{padding-left:1.2em}
.support li + li{margin-top:.35em}
.anliegen .sticky-media{max-width:28rem}
/* Bild läuft beim Scrollen neben dem Text mit (nur breite Ansicht) */
@media (min-width:52em){
  .anliegen .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .sticky-media{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}
}

/* ---------- Angebote 2 x 2 ---------- */
.cards{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:1fr}
.card{background:var(--cream);border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;text-align:center}
.card h3{font:var(--w-head) var(--fs-h3)/1.2 var(--f-head);color:var(--plum)}
.card .meta{font-size:var(--fs-small);margin:.4rem 0 1.25rem}
.card h3 + p:not(.meta){margin-top:1.25rem}
.card ul{text-align:left;padding-left:1.2em;margin:1.25rem auto;max-width:28rem}
.card li + li{margin-top:.5em}
.card .items p + p{margin-top:.8em}
.card .price{margin-top:1.25rem;font-weight:700}
.card .more{margin-top:auto;padding-top:1.5rem}
.card.featured{background:var(--plum);border-color:var(--plum);color:var(--cream)}
.card.featured h3{color:var(--cream)}
.card.featured .btn-outline{color:var(--cream);border-color:var(--cream)}
.card.featured .btn-outline:hover{background:var(--cream);color:var(--plum)}
.vat{margin-top:1.5rem;font-size:var(--fs-note);color:var(--grey)}
@media (min-width:52em){.cards{grid-template-columns:1fr 1fr}}

/* ---------- Vertiefung: Bild links/rechts im Wechsel ---------- */
.feature .wrap{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
.feature picture img{width:100%}
.figure-note{margin-top:.5rem;font-size:var(--fs-note);color:var(--grey)}
@media (min-width:52em){
  .feature .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feature.img-left picture{order:-1}
}

/* ---------- Ablauf / Anmeldung ---------- */
.ablauf .quote{font:italic 700 var(--fs-body)/1.3 var(--f-body);margin-bottom:1.5rem}
.ablauf .gains{padding-left:1.2em;margin:.75rem 0 1.5rem}
.ablauf .gains li + li{margin-top:.35em}
.steps{list-style:none;padding:0;margin:clamp(2rem,4vw,3rem) 0 0;display:grid;gap:1.25rem;grid-template-columns:1fr}
.steps li{background:var(--white);border:1px solid var(--line);padding:clamp(1.25rem,2.5vw,2rem)}
.steps .num{display:block;font:var(--w-head-bold) var(--fs-h2)/1 var(--f-head);color:var(--plum);margin-bottom:.75rem}
.steps h3{font:700 var(--fs-body)/1.3 var(--f-body);margin-bottom:.5rem}
.ablauf .actions{margin-top:clamp(1.75rem,3vw,2.5rem)}
.note{margin-top:1rem;font-size:var(--fs-note);line-height:1.4}
@media (min-width:52em){.steps{grid-template-columns:repeat(3,1fr)}}

/* ---------- Über mich ---------- */
.about .wrap{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
.about .sticky-media{width:min(100%,22rem)}
.about .text p{text-align:left}
.vita-line{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:var(--fs-small)}
.vita-line strong{display:block;margin-bottom:.35rem}
.about .links{margin-top:1.5rem;font-size:var(--fs-small)}
@media (min-width:52em){
  .about .wrap{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}
  .about .text p{text-align:justify;hyphens:auto}
  .about .text .vita-line,.about .links p{text-align:left}
}

/* ---------- Stimmen: Karussell ---------- */
.carousel{position:relative;background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,4vw,3rem)}
.carousel .slides{list-style:none;margin:0;padding:0}
.carousel .slide[hidden]{display:none}
.carousel blockquote p{font:400 var(--fs-body)/1.5 var(--f-body)}
.carousel blockquote p + p{margin-top:.8em}
.carousel cite{display:block;margin-top:1rem;font:700 var(--fs-small) var(--f-body);font-style:normal}
.carousel .controls{display:flex;gap:.75rem;margin-top:1.5rem;align-items:center}
.carousel .controls button{min-width:48px;min-height:48px;border:1px solid var(--plum);border-radius:999px;background:transparent;color:var(--plum);cursor:pointer;font:700 1rem var(--f-ui);padding:0 1rem}
.carousel .controls button:hover{background:var(--plum);color:var(--cream)}
.carousel .count{margin-left:auto;font:400 .95rem var(--f-ui)}
.reviews-link{margin-top:1.5rem;text-align:center}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0;font:700 var(--fs-body)/1.3 var(--f-ui)}
.faq-q{display:flex;width:100%;min-height:56px;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;background:none;border:0;text-align:left;color:var(--plum);font:inherit;cursor:pointer}
.faq-q .icon{flex:none;width:28px;height:28px;border:1px solid var(--plum);border-radius:50%;display:grid;place-items:center;font:400 20px/1 var(--f-ui)}
.faq-q[aria-expanded="true"] .icon::before{content:"\2212"}
.faq-q[aria-expanded="false"] .icon::before{content:"+"}
.faq-a{padding:0 0 1.5rem;font:400 var(--fs-body)/1.45 var(--f-ui)}
.faq-a ul{padding-left:1.2em}
.faq-a p + ul,.faq-a ul + p{margin-top:.75em}

/* ---------- Kontakt ---------- */
.contact .boxes{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:1fr}
.box{background:var(--white);color:var(--plum);padding:clamp(1.5rem,3vw,2.5rem)}
.box h3{font:var(--w-head) var(--fs-h3)/1.2 var(--f-head);margin-bottom:1rem}
.box .small{font-size:var(--fs-note);line-height:1.45;margin-top:1rem;color:var(--grey)}
.calendly-frame{width:100%;height:720px;border:0;margin-top:1rem}
.contact .direct{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;font:400 var(--fs-small) var(--f-ui);color:var(--cream)}
.contact .direct a{display:inline-flex;align-items:center;gap:.75rem;min-height:44px}
.contact .direct svg{width:36px;height:36px;flex:none}
@media (min-width:60em){.contact .boxes{grid-template-columns:1fr 1fr}}

/* Formular */
.form{display:grid;gap:1.1rem}
.field label{display:block;font:700 1rem/1.3 var(--f-ui);margin-bottom:.35rem}
.field .opt{font-weight:400;color:var(--grey)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .85rem;border:1px solid #b9a9a4;border-radius:4px;background:var(--white);color:var(--ink);font:400 16px/1.4 var(--f-ui)}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--plum);outline-offset:1px}
.check{display:flex;gap:.75rem;align-items:flex-start;font:400 .95rem/1.45 var(--f-ui)}
.check input{flex:none;width:24px;height:24px;margin:.1rem 0 0;accent-color:var(--plum)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{font:700 1rem/1.4 var(--f-ui);min-height:1.4em}
.form-status.ok{color:#1d6b3a}
.form-status.err{color:#a3241f}

/* ---------- Footer ---------- */
.site-footer{background:var(--plum-dark);color:var(--rose);padding:clamp(2.5rem,5vw,4rem) var(--gutter) 2rem;font:400 1rem/1.6 var(--f-ui)}
.site-footer .wrap{display:grid;gap:2rem;grid-template-columns:1fr}
.site-footer img{height:40px;width:auto}
.site-footer h2{font:700 1rem var(--f-ui);color:var(--cream);margin-bottom:.5rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.site-footer .legal-row{max-width:var(--maxw);margin:2.5rem auto 0;padding-top:1.25rem;border-top:1px solid rgba(226,209,208,.35);display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center}
.linkbtn{background:none;border:0;padding:0;min-height:44px;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
@media (min-width:52em){.site-footer .wrap{grid-template-columns:1.4fr 1fr 1fr}}

/* ---------- Cookie-Hinweis ---------- */
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:300;max-width:40rem;margin:0 auto;background:var(--white);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 40px rgba(40,10,25,.22);padding:1.25rem 1.25rem 1.1rem;font:400 .95rem/1.5 var(--f-ui)}
.cookie[hidden]{display:none}
.cookie h2{font:700 1.05rem var(--f-ui);color:var(--plum);margin-bottom:.4rem}
.cookie a{color:var(--plum)}
.cookie .row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.cookie .btn{font-size:1rem;flex:1 1 12rem}

/* ---------- Rechtsseiten ---------- */
.legal{max-width:52rem;margin:0 auto;padding:var(--section-y) var(--gutter);color:var(--ink);font:400 1.0625rem/1.6 var(--f-ui)}
.legal h1{font:var(--w-head) clamp(1.4rem, 1rem + 2vw, 2.5rem)/1.2 var(--f-head);color:var(--plum);margin-bottom:2rem}
.legal h2{font:700 1.2rem/1.35 var(--f-ui);color:var(--plum);margin:2.25rem 0 .6rem}
.legal h3{font:700 1.0625rem/1.4 var(--f-ui);margin:1.5rem 0 .4rem}
.legal p,.legal ul{margin:0 0 .85rem}
.legal ul{padding-left:1.3em}
.legal a{color:var(--plum)}
.legal .highlight{border:2px solid var(--plum);background:var(--white);padding:1.25rem 1.25rem .5rem;margin:1.5rem 0}
.legal .stand{margin-top:2.5rem;color:var(--grey);font-size:.95rem}