/* ============================================================
   ROOTS OF BIRTH · gemeinsames Stylesheet (1:1-Nachbau Wix)
   Tokens + Nav + Footer + Seiten-Komponenten.
   ROBHead = Marken-Headlinefont (Original von Wix-CDN).
   ============================================================ */
@font-face{
  font-family:'ROBHead';
  font-display:swap; font-style:normal; font-weight:400 800;
  src:url('assets/robhead.woff2') format('woff2'),
      url('assets/robhead.woff') format('woff');
}
:root{
  --espresso:#242121; --ink:#1b1918; --cream:#f6efe9; --sand:#e5d8c9; --sand-2:#efe6da; --linen:#e8e0d4;
  --clay:#c99c86; --clay-deep:#b1837a; --bronze:#936638; --brown:#4a3320; --brown-deep:#3b2a1a;
  --line:rgba(36,33,33,.16); --line-light:rgba(246,239,233,.5);
  --serif:'Caudex',Georgia,serif; --sans:'Assistant','Segoe UI',-apple-system,sans-serif;
  --head:'ROBHead','Assistant','Segoe UI',sans-serif; --wrap:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--espresso); font-family:var(--sans); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3{margin:0; font-family:var(--head); font-weight:400; line-height:1.03; letter-spacing:.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
p{margin:0 0 1em;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 34px;}
.serif-it{font-family:var(--serif); font-style:italic;}
.arrow-link{font-family:var(--serif); font-style:italic; font-size:1.05rem; display:inline-flex; align-items:center; gap:.5em;}
.arrow-link .a{font-family:var(--sans); font-style:normal;}
.kicker{font-family:var(--head); font-size:1.4rem; letter-spacing:.05em; margin-bottom:12px;}
.ph{background:linear-gradient(135deg,var(--sand),var(--clay)); display:flex; align-items:center; justify-content:center; color:rgba(36,33,33,.42); font-family:var(--serif); font-style:italic; font-size:.82rem; text-align:center; padding:14px;}
.imgfill{width:100%; height:100%; object-fit:cover; display:block;}
section.pad{padding:clamp(64px,9vw,130px) 0;}

/* ---------- NAV ---------- */
.topbar{position:sticky; top:0; z-index:60; background:linear-gradient(180deg,rgba(74,51,32,.6),rgba(74,51,32,0) 64%), rgba(246,239,233,.9); border-bottom:1px solid rgba(36,33,33,.08);}
.topbar.on-dark{background:linear-gradient(180deg,rgba(20,15,8,.5),rgba(20,15,8,.14) 55%,rgba(20,15,8,0) 100%); border-bottom-color:transparent;}
.on-dark .nav a,.on-dark .logo .name,.on-dark .burger,.on-dark .nav .login{text-shadow:0 1px 3px rgba(18,14,6,.85);}
.topbar .row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 34px; max-width:1340px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:12px;}
.logo .name{font-family:var(--head); font-weight:700; font-size:1.85rem; letter-spacing:0; text-transform:uppercase; color:var(--espresso); white-space:nowrap;}
.on-dark .logo .name{color:var(--cream);}
.logo .leaf{width:40px; opacity:.92; filter:brightness(0) saturate(100%) invert(30%) sepia(35%) saturate(650%) hue-rotate(345deg);}
.on-dark .logo .leaf{filter:brightness(0) saturate(100%) invert(34%) sepia(40%) saturate(700%) hue-rotate(345deg) drop-shadow(0 1px 2px rgba(255,248,238,.35));}
.nav{display:flex; align-items:center; gap:22px;}
.nav a{position:relative; font-size:1.35rem; font-weight:400; color:var(--espresso); opacity:.95; transition:.2s;}
.on-dark .nav a{color:#fff;}
.nav a:hover{color:var(--bronze);}
.on-dark .nav a:hover{color:var(--clay);}
.nav a.active{color:var(--terracotta);}
.on-dark .nav a.active{color:#ffb98a;}
.nav a.active:before{content:"• "; }
.nav .sep{width:1px; height:22px; background:rgba(36,33,33,.22);}
.on-dark .nav .sep{background:rgba(246,239,233,.4);}
.nav .login .av{display:inline-flex; width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor; align-items:center; justify-content:center; font-size:.7rem; margin-right:6px; vertical-align:middle;}
.burger{display:none; background:none; border:0; font-size:1.7rem; color:var(--espresso); cursor:pointer;}
.on-dark .burger{color:var(--cream);}

/* ---------- HERO (Startseite) ---------- */
.hero{position:relative; min-height:92vh; display:flex; align-items:center; color:var(--cream);
  background:linear-gradient(90deg, rgba(42,35,28,.15), rgba(42,35,28,.02) 40%, rgba(42,35,28,0)), url('assets/hero.jpg') center/cover no-repeat, var(--brown);}
.hero .ph-bg{position:absolute; inset:0;}
.hero .wrap{position:relative; z-index:2; width:100%; padding:60px 34px;}
.hero h1{font-size:clamp(2.2rem,4.7vw,3.6rem); max-width:13.5em; color:var(--cream); text-shadow:0 2px 12px rgba(28,23,18,.5);}
.hero .cta{margin-top:30px;}
.hero .cta .arrow-link{color:var(--cream);}
/* Sitzt im Textfluss direkt unter der Headline (Wunsch Kolja 27.07.), nicht
   frei in der Ecke - dort lag sie auf dem weißen Strickpullover und war unlesbar. */
.hero .booking-box{margin-top:32px; width:min(215px,62vw); border:1px solid rgba(246,239,233,.8); color:var(--cream); text-shadow:0 1px 6px rgba(30,27,25,.5);}
.hero .booking-box .q{font-family:var(--serif); font-style:italic; font-size:1.1rem; padding:18px 20px;}
.hero .booking-box .go{border-top:1px solid rgba(246,239,233,.65); padding:12px 20px; font-family:var(--serif); font-style:italic; display:flex; justify-content:flex-end; gap:.5em; align-items:center;}

/* ---------- PAGE HEADER: Foto-Vollbild mit Titel (Kontakt) ---------- */
.hero-photo{position:relative; min-height:66vh; display:flex; align-items:center; justify-content:center; color:var(--cream);
  background:linear-gradient(rgba(36,33,33,.28),rgba(36,33,33,.44)), url('assets/hero.jpg') center/cover no-repeat, var(--brown);}
.hero-photo h1{font-size:clamp(3rem,10vw,7rem); color:var(--cream); text-align:center; text-shadow:0 2px 30px rgba(36,33,33,.3);}

/* ---------- PAGE HEADER: gerahmt, Titel links + Foto rechts ---------- */
.framehead{color:var(--cream);}
.framehead.brown{background:var(--brown-deep);}
.framehead.bronze{background:var(--bronze);}
.framehead .fr{border:1px solid rgba(246,239,233,.5); display:grid; grid-template-columns:1fr 1fr; min-height:62vh;}
.framehead .l{padding:clamp(34px,5vw,70px); display:flex; flex-direction:column;}
.framehead .eyebrow{font-family:var(--head); font-size:1.3rem; letter-spacing:.05em;}
.framehead h1{font-size:clamp(2.4rem,5vw,4rem); margin:auto 0; color:var(--cream); max-width:11em;}
.framehead .arrow-link{color:var(--cream);}
.framehead .r{border-left:1px solid rgba(246,239,233,.5);}
.framehead .r .ph{width:100%; height:100%; min-height:340px;}

/* ---------- REISE (Collage, Startseite) ---------- */
.reise .collage{max-width:1320px; margin:0 auto; padding:0 clamp(16px,2vw,32px); display:grid; grid-template-columns:clamp(185px,19vw,285px) 1fr clamp(185px,19vw,285px); align-items:center; gap:clamp(20px,4vw,64px);}
.reise .col{display:flex; flex-direction:column; gap:clamp(18px,2.6vw,36px);}
.reise .col.right{margin-top:clamp(44px,8vw,100px);}
.reise .txt{text-align:center; padding:16px 14px;}
.reise h2{font-size:clamp(1.8rem,3.8vw,3rem); margin:4px 0 0;}
.reise .sub{margin:18px auto 0; max-width:22em; font-size:1.04rem; color:#4a423d;}
.reise .branch{width:175px; height:auto; margin:22px auto 0; opacity:.9; filter:brightness(0) saturate(100%) invert(30%) sepia(35%) saturate(650%) hue-rotate(345deg);}
.reise .pic{overflow:hidden; box-shadow:0 22px 46px -30px rgba(36,33,33,.5); aspect-ratio:4/3;}
.reise .pic img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;}

/* ---------- ANGEBOTE / CRANIO (Startseite) ---------- */
.angebot{background:var(--cream);}
.angebot .row2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center;}
.angebot .txt{text-align:center;}
.angebot h2{font-size:clamp(1.8rem,3.8vw,2.9rem);}
.angebot .sub{font-family:var(--serif); font-style:italic; color:var(--clay-deep); font-size:1.2rem; margin:14px 0 22px;}
.angebot .pic{aspect-ratio:4/3; overflow:hidden; box-shadow:0 24px 50px -34px rgba(36,33,33,.55);}
.angebot .pic img{width:100%; height:100%; object-fit:cover; display:block;}
/* Hochkant-Foto im 4:3-Rahmen: nach oben ausrichten, sonst wird der Kopf abgeschnitten */
.angebot .pic.kopf-oben img{object-position:50% 6%;}

/* ---------- MENTORING BAND (Startseite) ---------- */
.ment{background:var(--clay); color:var(--cream);}
.ment .frame{border:1px solid rgba(246,239,233,.55); display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden;}
.ment .left{padding:clamp(30px,4vw,56px);}
.ment .ey{font-family:var(--head); font-size:1.2rem; letter-spacing:.04em;}
.ment h2{font-size:clamp(2rem,4.2vw,3.2rem); margin:14px 0 22px;}
.ment .left p{color:rgba(246,239,233,.92); max-width:34em;}
.ment .form{margin-top:26px; background:rgba(246,239,233,.14); border:1px solid rgba(246,239,233,.4); padding:24px;}
.ment .form .qq{font-weight:600; margin:0 0 14px;}
.ment .opt{display:flex; align-items:center; gap:12px; padding:9px 0; cursor:pointer;}
.ment .opt input{accent-color:var(--cream); width:18px; height:18px;}
.ment .form .weiter{margin-top:18px; text-align:right;}
.ment .btn{display:inline-block; font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.04em; padding:13px 30px; background:rgba(74,51,32,.4); color:var(--cream); border:1px solid rgba(246,239,233,.5); cursor:pointer;}
.ment .btn:hover{background:rgba(74,51,32,.7);}
.ment .pic{min-height:360px;}
.ment .pic .ph{width:100%; height:100%; min-height:340px; background:linear-gradient(135deg,var(--clay-deep),var(--brown));}

/* ---------- TAGLINE / BUCH (Startseite) ---------- */
/* Aufgeschlagenes Buch (Foto aus dem Wix-Original), Text liegt auf der linken Seite */
.tag{background:#ded7cb;}
.tag .book{position:relative; width:100%; aspect-ratio:1440/990;
  background:url('assets/buch.jpg') center/cover no-repeat;}
.tag .book .inner{position:absolute; left:21.9%; top:26%; width:20%; text-align:left;}
.tag .kicker{font-size:min(2.36vw,2.5rem); margin-bottom:.35em;}
.tag h2{font-family:var(--serif); font-style:italic; font-weight:400; font-size:min(1.9vw,2rem); line-height:1.32;}
.tag .arrow-link{margin-top:1.1em; font-size:min(1.11vw,1.15rem);}
.tag .arrow-link .a{margin-left:.1em;}

/* ---------- TESTIMONIALS (Startseite: Kachel) ---------- */
.testi .frame{border:1px solid var(--line);}
.testi .top{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line);}
.testi .top .l{padding:clamp(30px,4vw,54px); display:flex; flex-direction:column; justify-content:center;}
.testi .top h2{font-size:clamp(1.8rem,3.6vw,3rem);}
.testi .top .arrow-link{margin-top:22px;}
.testi .top .r{border-left:1px solid var(--line); min-height:300px;}
.testi .top .r .ph{width:100%; height:100%; min-height:300px;}
.testi .quotes{display:grid; grid-template-columns:1fr 1fr;}
.testi .q{padding:34px clamp(24px,3vw,44px); border-right:1px solid var(--line); border-top:1px solid var(--line);}
.testi .q:nth-child(2n){border-right:0;}
.testi .q:nth-child(-n+2){border-top:0;}
.testi .q p{color:var(--bronze); font-size:1.06rem; margin:0 0 16px;}
.testi .q .name{text-align:right; color:var(--espresso); font-weight:600;}

/* ---------- MAMASTIMMEN (Seite: volle Zitate) ---------- */
.tgrid{background:var(--cream);}
.tgrid .grid{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.tgrid .card{background:var(--sand-2); padding:clamp(28px,3vw,44px); min-height:300px; display:flex; align-items:center;}
.tgrid .card p{color:var(--bronze); font-size:1.05rem; margin:0;}
.neuheit{position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--cream);
  background:linear-gradient(rgba(30,27,25,.58),rgba(30,27,25,.66)), url('/assets/schlafzimmer.jpg') center/cover no-repeat, var(--brown-deep);}
.neuheit .ey{font-family:var(--head); font-size:1rem; letter-spacing:.28em; text-transform:uppercase; margin-bottom:18px;}
.neuheit h2{font-size:clamp(2rem,4.6vw,3.4rem); color:var(--cream); max-width:14em; margin:0 auto;}
.neuheit p{margin:22px auto 0; max-width:32em; color:rgba(246,239,233,.9);}

/* ---------- IMPULSE / BLOG ---------- */
.blog .head{margin-bottom:44px;}
.blog h2.all{font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:34px;}
.postcard{display:grid; grid-template-columns:minmax(0,1fr) 1.3fr; gap:0; border:1px solid var(--line); margin-bottom:30px; background:#fff;}
.postcard .thumb{min-height:300px;}
.postcard .thumb .ph{width:100%; height:100%;}
.postcard .body{padding:clamp(24px,3vw,40px); display:flex; flex-direction:column;}
.postcard .meta{color:var(--bronze); font-size:.86rem; margin-bottom:14px;}
.postcard h3{font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.1;}
.postcard .excerpt{margin:16px 0 0; color:#4a423d;}
.postcard .stats{margin-top:auto; padding-top:20px; border-top:1px solid var(--line); color:var(--bronze); font-size:.85rem; display:flex; gap:20px;}

/* ---------- KONTAKT ---------- */
.contact{background:var(--brown-deep); color:var(--cream);}
.contact .fr{border:1px solid rgba(246,239,233,.4); display:grid; grid-template-columns:1.2fr .8fr;}
.contact .l{padding:clamp(34px,5vw,64px);}
.contact h2{font-size:clamp(1.9rem,4vw,3rem); margin-bottom:24px;}
.contact .info div{margin-bottom:8px;}
.contact .info a{color:var(--cream); text-decoration:underline; text-underline-offset:3px;}
.contact .form{margin-top:52px; max-width:520px;}
.contact .form h3{font-size:1.6rem; margin-bottom:24px;}
.contact .form label{display:block; font-size:.9rem; margin:0 0 6px; color:rgba(246,239,233,.85);}
.contact .form input,.contact .form textarea{width:100%; border:0; border-bottom:1px solid rgba(246,239,233,.7); background:transparent; color:var(--cream); font-family:var(--sans); font-size:1rem; padding:10px 2px; margin-bottom:22px; resize:vertical;}
.contact .form .send{border:1px solid rgba(246,239,233,.7); background:transparent; color:var(--cream); font-family:var(--sans); font-weight:600; padding:15px 40px; cursor:pointer; transition:.25s;}
.contact .form .send:hover{background:rgba(246,239,233,.15);}
.contact .r{border-left:1px solid rgba(246,239,233,.4); display:flex; align-items:center; justify-content:center; padding:40px;}
.contact .r .ph,.contact .r img{width:100%; max-width:360px; aspect-ratio:3/4; object-fit:cover;}

/* ---------- TERMIN BUCHEN ---------- */
.pad.booking{background:var(--linen);}
.booking h1.bh{text-align:center; font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:50px;}
.booking .cards{display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1000px; margin:0 auto;}
.booking .svc{background:var(--brown-deep); color:var(--cream);}
.booking .svc .pic{aspect-ratio:1/1;}
.booking .svc .pic .ph{width:100%; height:100%;}
.booking .svc .b{padding:clamp(24px,3vw,40px);}
.booking .svc h3{font-size:clamp(1.3rem,2.4vw,1.8rem);}
.booking .svc .desc{margin:14px 0; color:rgba(246,239,233,.88);}
.booking .svc .more{color:var(--cream); text-decoration:underline; text-underline-offset:3px; font-size:.95rem;}
.booking .svc .facts{margin:22px 0; padding-top:18px; border-top:1px solid rgba(246,239,233,.3);}
.booking .svc .facts div{margin-bottom:4px;}
.booking .svc .buchen{display:inline-block; background:var(--clay); color:var(--espresso); font-weight:600; padding:12px 32px; cursor:pointer; border:0;}
.booking .svc .buchen:hover{background:var(--clay-deep); color:var(--cream);}

/* ---------- FOOTER ---------- */
footer.site{background:var(--cream); border-top:1px solid var(--line); padding:70px 0 44px;}
footer.site .brandline{margin-bottom:40px;}
footer.site .brandline .bt{font-family:var(--head); font-size:1.5rem;}
footer.site .brandline .bs{color:#4a423d; font-size:.98rem; margin-top:2px;}
footer.site .grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
footer.site .socials .sh{font-family:var(--serif); font-style:italic; color:#4a423d; margin-bottom:14px;}
footer.site .socials .big a{display:inline-block; font-family:var(--head); font-size:clamp(2rem,4vw,3rem); color:var(--bronze); line-height:1.25;}
footer.site .socials .icons{display:flex; gap:14px; margin-top:20px;}
footer.site .socials .icons a{width:44px; height:44px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; color:var(--espresso); font-weight:700;}
footer.site .news .nl{font-family:var(--serif); font-style:italic; font-size:1.2rem; margin-bottom:20px;}
footer.site .news label{display:block; font-size:.9rem; margin-bottom:6px; color:#4a423d;}
footer.site .news input[type=email]{width:100%; border:0; border-bottom:1px solid var(--espresso); background:transparent; padding:10px 2px; font-family:var(--sans); font-size:1rem; color:var(--espresso);}
footer.site .news .consent{display:flex; align-items:flex-start; gap:10px; margin:18px 0; font-size:.9rem; color:#4a423d;}
footer.site .news .submit{width:100%; border:1px solid var(--bronze); background:transparent; color:var(--espresso); font-family:var(--sans); font-weight:700; padding:16px; cursor:pointer; transition:.25s;}
footer.site .news .submit:hover{background:var(--bronze); color:var(--cream);}
footer.site .legal{margin-top:48px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:#6a615b;}
footer.site .legal a{color:#6a615b;}

/* ---------- ÜBER ROOTS ---------- */
.about-hero{position:relative; min-height:82vh; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--cream);
  background:linear-gradient(rgba(36,33,33,.36),rgba(36,33,33,.52)), url('assets/ueber-hero.jpg') center/cover no-repeat, var(--brown);}
.about-hero .in{position:relative; z-index:2; padding:60px 24px;}
/* Typografie nach dem Wix-Original: Headline etwas kleiner und über die Breite
   auf zwei Zeilen gezwungen ("Finde Halt in / deinen Wurzeln"), Fließtext
   deutlich größer - er war mit .98rem nur halb so groß wie im Original. */
.about-hero h1{font-size:clamp(2.4rem,5.4vw,3.9rem); max-width:10em; margin:0 auto; color:var(--cream);}
.about-hero .sub{margin:26px auto 0; max-width:42em; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.05rem,1.75vw,1.56rem); color:rgba(246,239,233,.92); line-height:1.6; text-wrap:balance;}
.pillars{background:var(--cream); text-align:center;}
.pillars h2{font-size:clamp(2rem,4.6vw,3.4rem); margin-bottom:56px;}
/* Symbole + Text 30% größer (Wunsch Kolja 27.07., Original war deutlich größer);
   Raster dafür etwas breiter, sonst wird der größere Text zu schmal umbrochen. */
.pillars .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:56px 46px; max-width:1200px; margin:0 auto;}
/* ACHTUNG: In den Icon-PNGs (Wix-Originale) füllt die Zeichnung nur ~43% der
   Datei, der Rest ist leerer Rand. Der Rahmen muss deshalb deutlich größer sein
   als das, was man am Ende sieht - und er bringt seinen Abstand selbst mit. */
.pillars .p .ic{width:190px; height:auto; margin:0 auto -6px;}
.pillars .p h3{font-size:1.82rem; letter-spacing:.06em; margin-bottom:14px;}
.pillars .p p{font-size:1.27rem; color:#4a423d; max-width:26em; margin:0 auto;}
.reasons{background:var(--sand-2); text-align:center;}
.reasons h2{font-size:clamp(2rem,4.8vw,3.6rem); max-width:16em; margin:0 auto 50px;}
.reasons .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1000px; margin:0 auto;}
.reasons .card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 20px 44px -30px rgba(36,33,33,.5);}
.reasons .card .pic{aspect-ratio:3/4; position:relative;}
.reasons .card .pic .ph{width:100%; height:100%;}
.reasons .card .pic .no{position:absolute; left:18px; bottom:10px; font-family:var(--head); font-size:3rem; color:var(--cream);}
.reasons .card h3{font-size:1.3rem; letter-spacing:.05em; padding:22px 18px 26px;}

/* ---------- BLOG-ARTIKEL ---------- */
.article{background:var(--cream);}
.article .wrap{max-width:820px;}
.article .head{text-align:center; margin-bottom:36px;}
.article .head .meta{color:var(--bronze); font-size:.9rem; letter-spacing:.02em; margin-bottom:16px;}
.article .head h1{font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.06;}
.article .cover{margin:0 auto 40px; aspect-ratio:16/9; overflow:hidden;}
.article .cover img{width:100%; height:100%; object-fit:cover;}
.article .body{font-size:1.1rem; line-height:1.8; color:#2f2a27;}
.article .body h2{font-family:var(--head); font-weight:400; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--espresso); margin:38px 0 12px;}
.article .body p{margin:0 0 1.1em;}
.article .body .quote{font-family:var(--serif); font-style:italic; color:var(--bronze);}
.article .body ul{margin:.2em 0 1.3em; padding-left:1.3em;}
.article .body li{margin:0 0 .5em;}
.article .back{display:inline-block; margin-top:44px; color:var(--bronze); font-family:var(--serif); font-style:italic;}

/* ---------- RECHTSTEXTE ---------- */
.legal{background:var(--cream);}
.legal .wrap{max-width:820px;}
.legal h1{font-size:clamp(2rem,4.4vw,3rem); margin-bottom:10px;}
.legal .lead{color:#4a423d; margin-bottom:26px;}
.legal h2{font-family:var(--head); font-weight:400; font-size:1.45rem; color:var(--espresso); margin:34px 0 10px;}
.legal p{color:#2f2a27; margin:0 0 1em;}
.legal ul{padding-left:1.3em; margin:0 0 1.2em; color:#2f2a27;}
.legal li{margin:0 0 .4em;}
.legal a{color:var(--bronze); text-decoration:underline; text-underline-offset:2px; word-break:break-word;}

/* ---------- INHALT / KURSE / CRANIO / INTAKE ---------- */
.content{background:var(--cream);}
.content .wrap{max-width:820px;}
.content .lead{font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--clay-deep); margin-bottom:24px;}
.content h2{font-family:var(--head); font-weight:400; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--espresso); margin:40px 0 12px;}
.content p{color:#2f2a27; margin:0 0 1em; font-size:1.08rem; line-height:1.75;}
.content ul{padding-left:1.3em; color:#2f2a27; margin:0 0 1.2em;}
.content li{margin:0 0 .5em;}
.offer{border:1px solid var(--line); border-radius:10px; padding:26px 28px; margin:0 0 18px; background:#fff;}
.offer h3{font-size:1.4rem; margin-bottom:6px;}
.offer .tag{font-family:var(--serif); font-style:italic; color:var(--clay-deep); font-size:.98rem; display:block; margin-bottom:8px;}
.offer p{margin:0;}
.faq{margin-top:10px;}
.faq details{border-bottom:1px solid var(--line); padding:16px 0;}
.faq summary{font-family:var(--head); font-size:1.15rem; cursor:pointer; list-style:none; color:var(--espresso);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+ "; color:var(--clay-deep);}
.faq details[open] summary::before{content:"\2013 ";}
.faq .a{padding:12px 0 4px;}
.facts-box{display:flex; gap:40px; flex-wrap:wrap; margin:6px 0 26px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.facts-box .fb span{display:block; font-family:var(--head); font-size:1.4rem; color:var(--espresso);}
.facts-box .fb small{color:var(--bronze); font-size:.9rem;}
.cta-band{text-align:center; margin-top:44px;}
.btn-book{display:inline-block; font-family:var(--head); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem; padding:16px 38px; background:var(--espresso); color:var(--cream); border-radius:4px; transition:.25s;}
.btn-book:hover{background:#000;}
.iform{max-width:560px; margin:26px 0 0;}
.iform label.q{display:block; font-family:var(--head); font-size:1.1rem; margin:22px 0 12px; color:var(--espresso);}
.iform .opt{display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer;}
.iform .opt input{width:18px; height:18px; accent-color:var(--clay-deep);}
.iform .field{margin:16px 0;}
.iform .field label{display:block; font-size:.9rem; color:#4a423d; margin-bottom:6px;}
.iform input[type=text],.iform input[type=email],.iform textarea{width:100%; border:0; border-bottom:1px solid var(--line); background:#fff; padding:12px 12px; font-family:var(--sans); font-size:1rem; color:var(--espresso); border:1px solid var(--line); border-radius:5px;}

/* ---------- ÜBER MICH (Bio) ---------- */
.ueber-me{background:var(--sand);}
.ueber-me .fr{border:1px solid rgba(36,33,33,.2); display:grid; grid-template-columns:1.05fr .95fr;}
.ueber-me .txt{padding:clamp(28px,4vw,60px); display:flex; flex-direction:column; justify-content:center;}
.ueber-me h2{font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:28px;}
.ueber-me .txt p{color:#463f39; margin:0 0 1.05em; font-size:1.02rem; line-height:1.72;}
.ueber-me .pic{min-height:440px; border-left:1px solid rgba(36,33,33,.2);}
.ueber-me .pic img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block;}

.wrap-z2{position:relative; z-index:2;}
/* ---------- MEINE ARBEIT ---------- */
.arbeit{background:var(--cream);}
.arbeit .row{display:grid; grid-template-columns:minmax(230px,.85fr) 1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start;}
.arbeit .big-h{font-family:var(--head); font-weight:400; font-size:clamp(2.8rem,6.4vw,5.5rem); line-height:.95; color:var(--espresso);}
.arbeit .col h3{font-family:var(--head); font-weight:400; font-size:1.18rem; margin-bottom:12px; color:var(--espresso);}
.arbeit .col p{color:#463f39; margin:0 0 1em; font-size:1rem; line-height:1.66;}
.arbeit .col .close{font-family:var(--head); font-size:1.2rem; color:var(--espresso);}

/* Overlay-Scroll: "Über mich" bleibt stehen, "Meine Arbeit" schiebt sich darüber.
   Der Wrapper begrenzt die Sticky-Strecke auf genau diese beiden Sektionen. */
@media(min-width:921px){
  .stack-ueber{position:relative;}
  /* bottom statt top: die Sektion ist höher als der Viewport - so bleibt ihr
     unteres Ende stehen statt abgeschnitten zu werden. */
  .stack-ueber .ueber-me{position:sticky; bottom:0; z-index:1;}
  .stack-ueber .arbeit{position:relative; z-index:2; box-shadow:0 -26px 60px -34px rgba(36,33,33,.5);}
}

/* ---------- RESPONSIVE ---------- */
/* Nav klappt schon ab ~1340px zum Burger, weil die 50% groessere Menueschrift
   darunter nicht mehr in eine Zeile passt (wuerde sonst umbrechen). */
@media(max-width:1340px){
  .nav{display:none;}
  .burger{display:block;}
  .nav.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:16px; background:var(--cream); padding:22px 34px; border-bottom:1px solid var(--line);}
  .nav.open a{color:var(--espresso);}
  .nav.open .sep{display:none;}
}
@media(max-width:920px){
  .hero .booking-box{width:min(260px,72vw);}
  .reise .collage{grid-template-columns:1fr; gap:16px;}
  .reise .col{gap:16px;}
  .reise .col.right{margin-top:0;}
  .reise .txt{order:-1;}
  .ment .frame,.framehead .fr,.contact .fr,.postcard,.tgrid .grid,.booking .cards,.testi .top,.testi .quotes,.pillars .grid,.reasons .grid,.angebot .row2,.ueber-me .fr,.arbeit .row,footer.site .grid{grid-template-columns:1fr;}
  .ueber-me .pic{border-left:0; border-top:1px solid rgba(36,33,33,.2); min-height:340px;}
  .arbeit .big-h{font-size:clamp(2.6rem,12vw,4rem);}
  /* Buch wird hochkant angeschnitten, damit es formatfüllend zoomt (wie Wix mobil) */
  .tag .book{aspect-ratio:1/1.15;}
  .tag .book .inner{left:17.7%; top:33.5%; width:24%;}
  .tag .kicker{font-size:2.7vw;}
  .tag h2{font-size:2.2vw;}
  .tag .arrow-link{font-size:1.5vw;}
  .framehead .r,.contact .r,.testi .top .r{border-left:0; border-top:1px solid rgba(246,239,233,.4);}
  .testi .q{border-right:0;}
  .pillars .grid{gap:44px;}
}
@media(max-width:620px){
  /* Logo passt sonst nicht neben den Burger und bricht um */
  .logo .name{font-size:1.42rem;}
  .logo .leaf{width:30px;}
  /* Headline bekommt rechts etwas Luft (min der clamp war zu groß fürs Handy) */
  .hero h1{font-size:1.95rem;}
  .tag .book{aspect-ratio:420/620;}
  .tag .book .inner{left:8.5%; top:36%; width:32%;}
  .tag .kicker{font-size:4vw;}
  .tag h2{font-size:3.1vw;}
  .tag .arrow-link{font-size:2.9vw;}
}