/* Lokal eingebundene Schriften — kein Google-Server, kein Datenabfluss.
   Variable Schriften: eine Datei deckt alle Schnitte von 300 bis 700 ab. */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/schriften/cormorant-garamond.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/schriften/cormorant-garamond-italic.woff2') format('woff2');
  font-weight:300 700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/schriften/inter.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --tinte:#262428;
  --tinte-tief:#1C1B1F;
  --pink:#B83080;
  --pink-tief:#8E2263;
  --grau:#6B6870;
  --nebel:#E9E4EA;
  --papier:#F5F2F5;
  --linie:rgba(38,36,40,.13);
  --linie-hell:rgba(255,255,255,.2);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.eng{max-width:660px}
@media (max-width:700px){.wrap{padding:0 24px}}
:focus-visible{outline:1px solid var(--pink);outline-offset:4px}

/* Kopf */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid rgba(255,255,255,.18);transition:background .3s,border-color .3s}
.kopf.fest{background:rgba(26,24,28,.93);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.12)}
.kopf-in{display:flex;align-items:center;gap:20px;max-width:1160px;margin:0 auto;padding:16px 40px}
.wortmarke{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;flex:none}
.lg-marke{width:40px;height:34px;flex:none;color:#fff}
.lg-name{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:.03em;color:#fff;line-height:1}
@media (max-width:520px){.lg-marke{width:32px;height:27px}.lg-name{font-size:23px}}
.nav{display:flex;gap:30px;margin-left:auto;font-size:14px;font-weight:400}
.nav a{color:rgba(255,255,255,.74);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--pink)}
.kopf .stift{font-size:14px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.74);text-decoration:none;transition:color .2s}
.kopf-tel{margin-left:auto;font-size:14px;color:rgba(255,255,255,.85);text-decoration:none;white-space:nowrap;transition:color .2s}
.kopf-tel:hover{color:var(--pink)}
.nav+.kopf-tel{margin-left:30px}
@media (max-width:860px){.kopf-tel{font-size:13.5px}}
.kopf .stift:hover{color:var(--pink)}
@media (max-width:860px){.nav{display:none}.kopf-in{padding:16px 24px}}

/* Marken */
.marke{display:block;font-size:11.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--pink-tief);margin:0 0 26px}
.hell .marke{color:var(--pink)}

/* Typografie */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--tinte);margin:0;letter-spacing:.005em}
h1{font-size:clamp(44px,6.4vw,78px);line-height:1.04}
h2{font-size:clamp(31px,4.2vw,50px);line-height:1.14;margin-bottom:26px}
h3{font-size:26px;line-height:1.24;margin-bottom:12px}
p{margin:0 0 22px;max-width:58ch}
.gross{font-size:clamp(17.5px,1.7vw,19.5px);line-height:1.75;font-weight:400;color:rgba(38,36,40,.9)}
.klein{font-size:14.5px;color:var(--grau)}
.breit p{max-width:none}
.breit h2{max-width:none}
/* Angebot im dunklen Verlauf */
.dunkel-verlauf{background:linear-gradient(168deg,#2E2B31 0%,#262428 45%,#1C1B1F 100%)}
.dunkel-verlauf h2,.dunkel-verlauf h3{color:#fff}
.dunkel-verlauf p{color:rgba(255,255,255,.78)}
.dunkel-verlauf .marke{color:var(--pink)}
.dunkel-verlauf .reihe{border-top-color:rgba(255,255,255,.14)}
.dunkel-verlauf .reihe ul{color:rgba(255,255,255,.7)}
.dunkel-verlauf .reihe li{border-bottom-color:rgba(255,255,255,.14)}
.dunkel-verlauf .reihe .preis{color:var(--pink)}
.dunkel-verlauf .bildfeld{background:rgba(255,255,255,.07);color:rgba(255,255,255,.45)}
.bildfeld svg{width:100%;height:100%;display:block}
.bildfeld img{width:100%;height:100%;object-fit:cover;display:block}
.dunkel-verlauf .bildfeld{background:rgba(255,255,255,.04);padding:0;border:none;overflow:hidden}
.dunkel-verlauf .stiller{color:var(--pink);border-bottom-color:rgba(184,48,128,.6)}
.dunkel-verlauf .stiller:hover{color:#fff;border-bottom-color:#fff}

/* Knöpfe */
.knopf{display:inline-block;background:var(--pink);color:#fff;font-family:var(--sans);font-weight:400;font-size:12.5px;line-height:1.7;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:16px 34px;text-decoration:none;border:none;cursor:pointer;transition:background .22s}
.knopf:hover{background:var(--pink-tief);color:#fff}
.stiller{display:inline-block;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);text-decoration:none;border-bottom:1px solid rgba(184,48,128,.55);padding-bottom:5px;transition:border-color .22s,color .22s}
.stiller:hover{border-color:var(--pink);color:var(--pink-tief)}
.hell .stiller{color:#fff;border-color:var(--linie-hell)}
.hell .stiller:hover{border-color:var(--pink);color:var(--pink-tief)}

/* Abschnitte */
/* Streifen unter dem Hero */
.streifen{background:#fff;border-bottom:1px solid var(--linie)}
.streifen-in{max-width:1160px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.streifen div{padding:34px 34px 34px 34px;border-left:1px solid var(--linie)}
.streifen div:first-child{border-left:none;padding-left:0}
.streifen div:last-child{padding-right:0}
.streifen b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;color:var(--tinte);margin-bottom:7px}
.streifen span{display:block;font-size:14.5px;line-height:1.6;color:var(--grau)}
@media (max-width:820px){
  .streifen-in{grid-template-columns:1fr;padding:0 24px}
  .streifen div{padding:26px 0;border-left:none;border-top:1px solid var(--linie)}
  .streifen div:first-child{border-top:none;padding-left:0}
}
.streifen{background:var(--tinte);border-bottom:none}
.streifen div{border-left-color:rgba(255,255,255,.15)}
.streifen b{color:#fff}
.streifen span{color:rgba(255,255,255,.62)}
@media (max-width:820px){.streifen div{border-top-color:rgba(255,255,255,.15)}}
section{padding:120px 0}
.dunkel{background:var(--tinte);color:rgba(255,255,255,.78)}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel p{color:rgba(255,255,255,.76)}
.dunkel .gross{color:rgba(255,255,255,.88)}
.dunkel .marke{color:var(--pink)}
.dunkel .klein{color:rgba(255,255,255,.55)}
.weiss{background:#FBF9FB}
@media (max-width:700px){section{padding:76px 0}}

/* Hero */
.hero{position:relative;padding:0;background:var(--tinte);min-height:min(88vh,780px);display:flex;align-items:center;overflow:hidden}
.hero-bild{position:absolute;inset:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:76% 22%}
.hero-schleier{position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,27,32,.95) 0%,rgba(30,27,32,.88) 26%,rgba(30,27,32,.62) 46%,rgba(30,27,32,.24) 66%,rgba(30,27,32,.06) 100%)}
.hero-text{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding:155px 40px 96px}
.hero-inhalt{max-width:640px}
.hero h1{color:#fff}
.hero .unter{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2.3vw,27px);line-height:1.4;color:rgba(255,255,255,.78);margin:22px 0 0;max-width:30ch}
.hero .zeile{font-size:13.5px;letter-spacing:.06em;color:rgba(255,255,255,.62);margin:40px 0 0;padding-top:22px;border-top:1px solid var(--linie-hell);max-width:none}
.hero .zeile b{color:var(--pink);font-weight:400;white-space:nowrap}
.hero .zeile .orte{white-space:nowrap}
.hero-tasten{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:42px}
@media (max-width:900px){
  .hero{min-height:0}
  .hero-bild img{object-position:72% 14%}
  .hero-schleier{background:linear-gradient(178deg,rgba(30,27,32,.62) 0%,rgba(30,27,32,.86) 38%,rgba(30,27,32,.95) 100%)}
  .hero-text{padding:230px 24px 64px}
}

/* Leistungen als Reihen */
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:64px 0;border-top:1px solid var(--linie)}
.reihe:first-of-type{border-top:none;padding-top:20px}
.reihe.gedreht .bildfeld{order:2}
.bildfeld{aspect-ratio:4/3;background:var(--nebel);display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);text-align:center;padding:20px}
.reihe .preis{font-size:14px;letter-spacing:.06em;color:var(--pink-tief);margin:0 0 26px}
.reihe ul{list-style:none;padding:0;margin:0 0 24px;font-size:16px;color:var(--grau)}
.reihe li{padding:7px 0;border-bottom:1px solid var(--linie)}
@media (max-width:900px){.reihe{grid-template-columns:1fr;gap:28px;padding:48px 0}.reihe.gedreht .bildfeld{order:0}}

/* Zitat */
.zitat{text-align:center}
.zitat p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(26px,3.6vw,42px);line-height:1.34;color:#fff;max-width:19ch;margin:0 auto 26px}
.zitat .zitat-wer{font-family:var(--sans);font-style:normal;font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:52ch;margin:0 auto 40px}

/* Über mich */
.ueber{display:grid;grid-template-columns:.78fr 1.22fr;gap:72px;align-items:stretch}
.portraet{width:100%;height:100%;min-height:520px;background:var(--nebel);overflow:hidden}
.portraet img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.beleg{font-size:15px;line-height:1.7;color:var(--grau);border-left:1px solid var(--pink);padding-left:22px;margin:34px 0}
@media (max-width:900px){.ueber{grid-template-columns:1fr;gap:34px}.portraet{height:auto;min-height:0;aspect-ratio:3/4}}

/* Ablauf */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:56px;margin-top:16px}
.ziffer{font-family:var(--serif);font-size:46px;font-weight:300;color:var(--pink);line-height:1;margin-bottom:14px}

/* Formular */
.formular{display:grid;gap:20px;max-width:440px;margin-top:34px}
.formular label{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau);margin-bottom:7px}
.formular input,.formular textarea{width:100%;font-family:var(--sans);font-size:16px;padding:12px 0;border:none;border-bottom:1px solid var(--linie);background:transparent;color:var(--tinte)}
.formular input:focus,.formular textarea:focus{outline:none;border-bottom-color:var(--pink)}

/* FAQ */
.auf-bild{margin:10px 0 34px}
.auf-bild img{width:100%;aspect-ratio:24/9;object-fit:cover;object-position:50% 42%;display:block}
.faq{max-width:780px;margin-top:20px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{font-family:var(--serif);font-size:25px;font-weight:400;color:var(--tinte);padding:26px 40px 26px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:38px;width:13px;height:1px;background:var(--pink)}
.faq summary::before{content:"";position:absolute;right:14px;top:32px;width:1px;height:13px;background:var(--pink);transition:opacity .2s}
.faq details[open] summary::before{opacity:0}
.faq p{font-size:16.5px;padding-bottom:16px;max-width:64ch}
.themen{list-style:none;padding:0;margin:8px 0 0;max-width:62ch;font-size:16.5px}
.themen li{padding:11px 0;border-bottom:1px solid var(--linie)}
.praxisbild{max-width:1160px;margin:0 auto;padding:0 40px 70px}
.kopf-raster{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
.kopf-portraet img{width:100%;height:auto;display:block;max-width:290px;margin-left:auto}
@media (max-width:820px){.kopf-raster{grid-template-columns:1fr;gap:34px}.kopf-portraet img{max-width:200px;margin:0}}
.praxisbild img{width:100%;height:auto;display:block}
@media (max-width:700px){.praxisbild{padding:0 24px}}
.reihe-titel{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.reihe-titel:hover{border-bottom-color:var(--pink)}
.mehr{font-size:14.5px;margin:22px 0 0}
.mehr a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:border-color .2s,color .2s}
.mehr a:hover{color:var(--pink);border-bottom-color:var(--pink)}
.dunkel .themen li{border-bottom-color:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
.krise{font-size:14.5px;line-height:1.7;color:var(--grau);border-left:2px solid var(--pink);padding-left:20px;margin-top:44px;max-width:70ch}
.dunkel .krise{color:rgba(255,255,255,.66)}

/* Termin */
.buchung{border:1px solid var(--linie);padding:64px 26px;text-align:center;color:var(--grau);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:34px 0 56px}
.kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:34px}
.kontakt span{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--pink-tief);margin-bottom:10px}
.kontakt a{color:var(--tinte);text-decoration:none}
.kontakt a:hover{color:var(--pink-tief)}
.preis-auf{font-size:15px;letter-spacing:.02em;color:var(--pink);margin:0 0 26px}
.falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formular label.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--grau);margin:6px 0 0;max-width:52ch}
.zustimmung input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--pink)}
.dunkel .formular label.zustimmung{color:rgba(255,255,255,.6)}
.dunkel .formular label.zustimmung a{color:var(--pink)}
.anfahrt{margin-top:52px;padding-top:34px;border-top:1px solid var(--linie)}
.dunkel .anfahrt{border-top-color:rgba(255,255,255,.16)}
.anfahrt h3{font-size:21px;margin-bottom:16px}
.anfahrt p{font-size:15.5px;max-width:56ch;margin-bottom:16px}
.anfahrt b{font-weight:500}

/* Fuß */
/* Soziale Netzwerke */
.sozial{display:flex;justify-content:center;gap:26px;margin:0 0 34px}
.sozial a{display:inline-flex;color:rgba(255,255,255,.55);transition:color .22s}
.sozial a:hover{color:var(--pink)}
.sozial svg{width:21px;height:21px;display:block}
footer{background:var(--tinte-tief);color:rgba(255,255,255,.7);padding:110px 0 44px;text-align:center}
footer h2{color:#fff;margin-bottom:38px}
.fuss-marke-block{margin:70px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.fuss-logo{width:52px;height:45px;color:#fff;opacity:.9;margin-bottom:12px}
.fuss-marke{font-family:var(--serif);font-size:25px;color:#fff;margin:0}
.fuss-claim{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--pink);margin:0 0 26px}
.fuss-zeile{font-size:13.5px;color:rgba(255,255,255,.5);margin:0 0 22px}
footer a{color:rgba(255,255,255,.5);text-decoration:none}
footer a:hover{color:#fff}

/* Feine Körnung über der ganzen Seite */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-size:200px 200px;
}
@media (prefers-reduced-motion:reduce){body::after{opacity:.03}}

/* Weiche Verläufe statt flacher Flächen */
body{background-image:linear-gradient(180deg,#F7F4F7 0%,#F3EFF3 100%);background-attachment:fixed}
.weiss{background:linear-gradient(178deg,#FCFAFC 0%,#F8F5F8 100%)}
.nebel{background:linear-gradient(178deg,#EBE7EC 0%,#E5E0E7 100%)}
.dunkel{background:radial-gradient(115% 75% at 18% 0%, rgba(184,48,128,.11) 0%, rgba(184,48,128,0) 58%), #262428}
.dunkel .gross{color:rgba(255,255,255,.86)}
.dunkel .klein{color:rgba(255,255,255,.6)}
.dunkel .beleg{color:rgba(255,255,255,.62)}
.dunkel .portraet{background:rgba(255,255,255,.06)}
.dunkel .formular label{color:var(--pink)}
.dunkel .formular input,.dunkel .formular textarea{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.dunkel .formular input:focus,.dunkel .formular textarea:focus{border-bottom-color:var(--pink)}
.dunkel .faq details{border-bottom-color:rgba(255,255,255,.16)}
.dunkel .faq summary{color:#fff}
.dunkel .buchung{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.6)}
.dunkel .kontakt a{color:rgba(255,255,255,.9)}
.dunkel .kontakt a:hover{color:var(--pink)}
.dunkel .kontakt div{color:rgba(255,255,255,.82)}
.dunkel .auf-bild{opacity:.92}
.streifen{background:radial-gradient(90% 130% at 80% 0%, rgba(184,48,128,.08) 0%, rgba(184,48,128,0) 60%), var(--tinte)}
.dunkel-verlauf{background:radial-gradient(90% 60% at 85% 8%, rgba(184,48,128,.10) 0%, rgba(184,48,128,0) 55%), linear-gradient(168deg,#2E2B31 0%,#262428 45%,#1C1B1F 100%)}
footer{background:radial-gradient(100% 70% at 50% 0%, rgba(184,48,128,.09) 0%, rgba(184,48,128,0) 60%), var(--tinte-tief)}