/* Rikas Fotografie · Website im Look der Social-Media-Guides
   Schriften: Lora (Gefühl), DM Sans (Praktisches), Josefin Sans (nur Logo).
   Farbthemen je Shooting: <body data-theme="babybauch|newborn|boudoir|model">, Start = Rosé. */

:root{
  --bg:#F6F3F3; --surface:#FFFFFF; --white:#FFFFFF; --sand:#ECE5E1;
  --ink:#272727; --muted:#5A5555; --line:#E2D9D4; --field:#D5CAC4; --line-strong:#958580;
  --action:#363636; --action-hover:#272727; --on-action:#FFFFFF;
  --night:#2E2A2B; --on-night:#F6F3F3; --on-night-muted:#CFC6C3;
  --rust:#A9573F; --blush:#D9C2C4; --error:#9B3B3B;
  --panel:#DCC3C3; --panel-ink:#2E2226; --deep:#7E5F65; --deep-hover:#5C4348; --tint:#F3E9E7;
  --serif:"Lora",Georgia,serif; --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --gutter:24px; --max:1280px; --text:720px; --section-y:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:900px){ :root{ --section-y:110px; --gutter:40px; } }
[data-theme="babybauch"]{ --panel:#DCC3C3; --panel-ink:#2E2226; --deep:#7E5F65; --deep-hover:#5C4348; --tint:#F3E9E7; }
[data-theme="newborn"]{ --panel:#CBD1C4; --panel-ink:#232A20; --deep:#55604F; --deep-hover:#3B4437; --tint:#EEF0EA; }
[data-theme="model"]{ --panel:#B9A99A; --panel-ink:#221C19; --deep:#5E5048; --deep-hover:#3F352F; --tint:#EFE9E3; }
[data-theme="boudoir"]{ --panel:#33262A; --panel-ink:#F3E9E7; --deep:#D1A9AE; --deep-hover:#E6C4C8; --tint:#2C2124; }
body[data-theme="boudoir"]{ --bg:#241B1E; --surface:#33262A; --sand:#2C2124; --ink:#F3E9E7; --muted:#D9CBCD; --line:#4A3438; --field:#5A4247; --line-strong:#8E7377; --action:#D1A9AE; --action-hover:#E6C4C8; --on-action:#241B1E; --night:#1A1316; }

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:light; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:var(--deep); text-underline-offset:3px; }
a:hover{ color:var(--deep-hover); }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--deep); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--action); color:var(--on-action); padding:10px 16px; z-index:100; }
.skip:focus{ left:8px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:var(--section-y) 0; position:relative; }
.section--tint{ background:var(--tint); }
.section--sand{ background:var(--sand); }
.section--night{ background:var(--night); color:var(--on-night); --muted:var(--on-night-muted); --deep:var(--panel); }
body[data-theme="boudoir"] .section--night{ --deep:#D1A9AE; }
.split{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:72px; } }
.head{ max-width:760px; margin-bottom:44px; }
.head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.head--row{ max-width:none; display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end; justify-content:space-between; }
.stack>*+*{ margin-top:16px; }

/* ---------- Typografie (Guide) ---------- */
.label{ display:inline-flex; align-items:center; gap:12px; font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:var(--deep); line-height:1.2; margin:0 0 14px; }
.label::before{ content:""; width:28px; height:1px; background:currentColor; }
.head--center .label::before{ display:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; }
.display{ font-size:clamp(42px,5.4vw,72px); line-height:1.04; letter-spacing:-.5px; }
.h2{ font-size:clamp(34px,4vw,52px); line-height:1.08; }
.h3{ font-size:clamp(26px,2.6vw,34px); line-height:1.15; }
.display i,.h2 i,.h3 i{ color:var(--deep); }
.lead{ font-size:19px; line-height:1.55; color:var(--muted); margin:0; max-width:56ch; }
.muted{ color:var(--muted); }
.small{ font-size:15px; }
p{ margin:0; }
.signature{ font-family:var(--serif); font-style:italic; font-size:28px; color:var(--deep); }

/* Buchstaben steigen auf wie im Guide */
.rise .ch{ display:inline-block; }
.rise.is-in .ch{ animation:chr .7s var(--ease) both; animation-delay:calc(var(--i) * 18ms); }
.rise .w{ display:inline-block; white-space:nowrap; }
@keyframes chr{ from{ opacity:0; transform:translateY(.5em); } }

/* ---------- Knöpfe ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 28px; border:1px solid transparent; font-size:14px; letter-spacing:2px; text-transform:uppercase; font-weight:600; text-decoration:none; transition:background-color .2s,color .2s,border-color .2s; border-radius:0; }
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.btn--primary{ background:var(--action); color:var(--on-action); }
.btn--primary:hover{ background:var(--action-hover); color:var(--on-action); }
.btn--ghost{ border-color:currentColor; color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:color-mix(in srgb,var(--ink) 6%,transparent); color:var(--ink); }
.section--night .btn--ghost{ color:var(--on-night); }
.btn--block{ width:100%; }
.quiet{ font-size:13px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:var(--deep); text-decoration:none; }
.quiet:hover{ text-decoration:underline; }
.btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Kopfzeile ---------- */
.site-head{ position:fixed; inset:0 0 auto; z-index:40; padding-top:env(safe-area-inset-top,0px); transition:background-color .3s,box-shadow .3s,padding .3s; padding:14px 0; color:var(--ink); }
.site-head.is-solid{ background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--line); padding:6px 0; }
.head-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.logo{ display:block; color:inherit; line-height:0; justify-self:center; }
.logo svg{ width:150px; height:auto; transition:width .3s; }
.is-solid .logo svg{ width:118px; }
.logo .ink{ fill:currentColor; }
.nav{ display:none; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:26px; align-items:center; }
.nav a,.nav button{ font-size:13px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:inherit; text-decoration:none; background:none; border:0; padding:6px 0; }
.nav a[aria-current="page"]{ box-shadow:inset 0 -1px 0 currentColor; }
.nav-left{ justify-self:start; } .nav-right{ justify-self:end; }
.head-cta{ justify-self:end; }
.head-cta .btn{ min-height:42px; padding:0 18px; font-size:12px; }
.menu-toggle{ justify-self:start; width:44px; height:44px; display:grid; place-items:center; border:0; background:none; }
.menu-toggle svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; }
@media (min-width:1080px){
  .nav{ display:block; } .menu-toggle{ display:none; }
}
@media (max-width:1079px){ .nav-right{ display:none; } .head-cta .btn span{ display:none; } .head-cta .btn{ padding:0 14px; } }
.has-sub{ position:relative; }
.submenu{ position:absolute; top:calc(100% + 10px); left:-18px; background:var(--surface); border:1px solid var(--field); padding:10px; display:grid; gap:2px; min-width:250px; list-style:none; margin:0; }
.submenu[hidden]{ display:none; }
.submenu a{ display:flex; align-items:center; gap:12px; padding:10px 12px !important; color:var(--ink) !important; }
.submenu a:hover{ background:var(--bg); }
.swatch{ width:14px; height:14px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
/* Über Fotos (Startseite): helle Schrift bis zum Scrollen */
.on-photo .site-head:not(.is-solid){ color:#fff; }
body:not(.on-photo) .site-head{ background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--line); }
.trip-page .site-head:not(.is-solid),.gift-page .site-head:not(.is-solid){ background:transparent; box-shadow:none; backdrop-filter:none; }

/* Mobiles Menü */
.drawer{ position:fixed; inset:0; z-index:60; background:var(--bg); padding:20px var(--gutter) 40px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; animation:fade .25s ease; }
.drawer[hidden]{ display:none; }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; }
.drawer ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.drawer li a{ display:flex; align-items:center; gap:14px; padding:12px 0; font-family:var(--serif); font-size:28px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.drawer li.sub a{ font-size:22px; padding-left:4px; }
@keyframes fade{ from{ opacity:0 } }
.drawer-legal{ margin:auto 0 0; padding-top:8px; font-size:13px; color:var(--muted); }
.drawer-legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:8px 2px; }

/* Schwebende Leiste unten (Handy): Anfragen + Wunschbilder */
.dock{ position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translate(-50%,140%); z-index:35; display:flex; gap:8px; transition:transform .45s var(--ease); }
.dock.is-on{ transform:translate(-50%,0); }
.dock .btn{ box-shadow:0 8px 30px rgba(0,0,0,.18); }
.wishpill{ display:none; align-items:center; gap:8px; min-height:50px; padding:0 18px; background:var(--surface); color:var(--ink); border:1px solid var(--field); font-size:13px; font-weight:600; letter-spacing:1px; box-shadow:0 8px 30px rgba(0,0,0,.14); }
.wishpill.has{ display:inline-flex; }
@media (min-width:1080px){ .dock .btn{ display:none; } .dock{ left:auto; right:24px; transform:translateY(140%); } .dock.is-on{ transform:none; } }
.wishpill b{ background:var(--deep); color:var(--bg); min-width:22px; height:22px; border-radius:11px; display:grid; place-items:center; font-size:12px; padding:0 6px; }

/* ---------- Hero Startseite: Diashow mit Ken Burns ---------- */
.hero-home{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#2E2A2B; }
.slides{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.slides li{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.slides li.is-active{ opacity:1; }
.slides img{ width:100%; height:100%; object-fit:cover; }
.slides li.is-active img{ animation:kb 9s ease-out forwards; }
@keyframes kb{ from{ transform:scale(1.02) } to{ transform:scale(1.12) } }
.hero-home::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,15,16,.45) 0,rgba(20,15,16,0) 30%,rgba(20,15,16,0) 45%,rgba(20,15,16,.7) 100%); }
.hero-home .wrap{ position:relative; z-index:2; padding-bottom:64px; padding-top:160px; }
.hero-home .label{ color:#fff; }
.hero-home .display{ max-width:14ch; }
.hero-home .display i{ color:#F3E9E7; }
.hero-home .lead{ color:rgba(255,255,255,.88); margin-top:18px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-top:28px; }
.progress{ display:flex; gap:6px; width:min(280px,60vw); }
.progress button{ flex:1; height:3px; border:0; padding:0; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.progress button::after{ content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }
.progress button.done::after{ transform:none; }
.progress button.now::after{ animation:bar var(--dur,6s) linear forwards; }
.progress.paused button.now::after{ animation-play-state:paused; }
@keyframes bar{ to{ transform:none } }
.hero-kind{ font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; }
.hero-kind a{ color:#fff; }

/* Bewertungs-Pille (Google) */
.rating{ display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:0 16px 0 12px; border-radius:20px; background:rgba(255,255,255,.94); color:#272727; text-decoration:none; font-size:14px; font-weight:600; }
.rating .g{ width:18px; height:18px; }
.rating .st{ color:#C9A227; letter-spacing:1px; }
.rating:hover{ color:#272727; background:#fff; }
.rating--line{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--field); }

/* ---------- Hero Leistungsseiten: Bild + Farbfläche ---------- */
.hero-split{ display:grid; min-height:100svh; background:var(--panel); color:var(--panel-ink); }
.hero-img{ position:relative; overflow:hidden; min-height:62svh; }
.hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kb 14s ease-out forwards; }
.hero-panel{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:48px var(--gutter) 56px; }
.hero-panel .label{ color:var(--panel-ink); }
.hero-panel .display i{ color:var(--panel-ink); opacity:.78; }
.hero-panel .lead{ color:var(--panel-ink); opacity:.85; margin-top:18px; }
.hero-panel .hero-meta{ margin-top:28px; }
.vlabel{ position:absolute; right:22px; top:120px; writing-mode:vertical-rl; font-size:11px; letter-spacing:4px; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:14px; opacity:.7; }
.vlabel::after{ content:""; width:1px; height:64px; background:currentColor; }
.scrollhint{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:inherit; text-decoration:none; }
.scrollhint i{ width:1px; height:28px; background:currentColor; position:relative; overflow:hidden; }
.scrollhint i::after{ content:""; position:absolute; left:0; top:-28px; width:1px; height:28px; background:var(--bg); animation:drip 1.8s ease-in-out infinite; }
@keyframes drip{ to{ top:28px } }
@media (min-width:900px){
  .hero-split{ grid-template-columns:1.05fr 1fr; }
  .hero-img{ min-height:100svh; }
  .hero-panel{ padding:120px 72px 80px; justify-content:center; }
}
body[data-theme="boudoir"] .hero-split{ background:#33262A; }
body[data-theme="boudoir"] .hero-panel .label{ color:#D1A9AE; }

/* ---------- Punkte-Liste ---------- */
.dots{ list-style:none; margin:0; padding:0; display:grid; gap:18px; font-size:19px; line-height:1.5; }
.dots li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding-bottom:18px; border-bottom:1px solid var(--line); }
.h2+.lead,.h2+p{ margin-top:16px; }
.dots li::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--deep); transform:translateY(-2px); }

/* ---------- Guide-Strecke: Story-Karten zum Wischen ---------- */
.guide{ position:relative; }
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:min(320px,82vw); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px var(--gutter) 10px; margin:0 calc(var(--gutter) * -1); scroll-padding:0 var(--gutter); }
.rail::-webkit-scrollbar{ display:none; }
.rail>*{ scroll-snap-align:start; }
@media (min-width:1360px){ .rail{ margin:0; padding-left:0; padding-right:0; scroll-padding:0; } }
.rail-ctrl{ display:flex; gap:10px; }
.rbtn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--field); background:var(--surface); color:var(--ink); display:grid; place-items:center; transition:transform .2s,opacity .2s; }
.rbtn:hover{ transform:scale(1.06); }
.rbtn:disabled{ opacity:.35; cursor:default; transform:none; }
.rbtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.story{ position:relative; min-height:590px; background:var(--surface); border:1px solid var(--field); overflow:hidden; display:flex; flex-direction:column; }
.story .bars{ position:absolute; top:12px; left:12px; right:12px; z-index:3; display:flex; gap:4px; }
.story .bars i{ flex:1; height:2px; background:rgba(255,255,255,.45); }
.story .bars i.on{ background:#fff; }
.story .ph{ position:relative; height:250px; overflow:hidden; flex:none; }
.story .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 6s ease-out; }
.story:hover .ph img,.story.is-in .ph img{ transform:scale(1.07); }
.story .ph::after{ content:""; position:absolute; inset:0 0 auto; height:60px; background:linear-gradient(rgba(0,0,0,.35),transparent); }
.story .body{ padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; }
.story .label{ margin:0; font-size:11px; }
.story h3{ font-size:27px; line-height:1.05; }
.story .cap{ font-size:14px; line-height:1.5; color:var(--muted); margin-top:auto; }
.story .handle{ font-size:12px; font-weight:600; color:var(--ink); }
.story--full .ph{ position:absolute; inset:0; height:auto; }
.story--full .ph::after{ inset:auto 0 0; height:75%; top:auto; background:linear-gradient(transparent,rgba(20,15,16,.82)); }
.story--full .body{ position:relative; z-index:2; margin-top:auto; color:#fff; flex:none; padding-top:120px; }
.story--full .v-vs div{ background:rgba(255,255,255,.14); }
.story--full .label{ color:#fff; }
.story--full .cap{ color:rgba(255,255,255,.86); }
.story--full .handle{ color:#fff; }
.story--full .v-quote{ color:#fff; border-color:rgba(255,255,255,.6); }
.story--full .pill{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4); }
/* Visuals */
.v-big b{ display:block; font-family:var(--serif); font-weight:400; font-size:58px; line-height:1; color:var(--deep); }
.v-big span{ font-size:14px; font-weight:600; letter-spacing:1px; }
.v-big small{ display:block; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4; }
.pills{ display:flex; flex-wrap:wrap; gap:6px; }
.pill{ font-size:12.5px; padding:5px 11px; border-radius:16px; border:1px solid var(--field); background:var(--tint); color:var(--ink); line-height:1.3; }
.v-quote{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.3; border-left:2px solid var(--deep); padding-left:12px; }
.v-tl{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.v-tl li{ display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:13.5px; line-height:1.35; }
.v-tl li b{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--deep); padding-top:2px; min-width:86px; }
.v-sw{ display:flex; gap:8px; }
.v-sw span{ flex:1; display:flex; flex-direction:column; gap:5px; font-size:11.5px; text-align:center; }
.v-sw i{ display:block; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.v-vs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12.5px; }
.v-vs div{ background:var(--tint); padding:10px; }
.v-vs b{ display:block; font-family:var(--serif); font-weight:400; font-size:17px; margin-bottom:4px; }
.v-vs ul{ margin:0; padding-left:15px; }
.v-words{ font-family:var(--serif); font-size:30px; line-height:1.1; }
.v-words span{ display:block; }
.v-voices{ display:grid; gap:8px; }
.v-voices p{ font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.35; }
.v-voices small{ display:block; font-family:var(--sans); font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; }
.story-end{ min-height:590px; background:var(--panel); color:var(--panel-ink); padding:28px 22px; display:flex; flex-direction:column; justify-content:flex-end; gap:16px; border:1px solid var(--field); }
.story-end h3{ font-size:34px; line-height:1.05; }
.story-end .btn--primary{ background:#363636; color:#fff; }
body[data-theme="boudoir"] .story-end .btn--primary{ background:#D1A9AE; color:#241B1E; }

/* ---------- Kurze Frage + Checkliste ---------- */
.duo{ display:grid; gap:20px; }
@media (min-width:900px){ .duo{ grid-template-columns:1.2fr 1fr; gap:28px; } }
.card{ background:var(--surface); border:1px solid var(--field); padding:30px 26px; }
.card h3{ font-size:30px; line-height:1.1; margin-bottom:18px; }
.quiz-opts{ display:grid; gap:8px; }
.quiz-opts button{ text-align:left; border:1px solid var(--field); background:var(--bg); padding:14px 16px; font-size:16px; display:flex; justify-content:space-between; gap:12px; align-items:center; transition:border-color .2s,background-color .2s; }
.quiz-opts button::after{ content:"→"; color:var(--line-strong); }
.quiz-opts button:hover{ border-color:var(--ink); }
.quiz-opts button[aria-pressed="true"]{ background:var(--deep); border-color:var(--deep); color:var(--bg); }
.quiz-opts button[aria-pressed="true"]::after{ content:"✓"; color:inherit; }
.answer{ margin-top:16px; padding:16px 18px; background:var(--tint); border-left:3px solid var(--deep); font-size:16px; line-height:1.55; animation:rise2 .4s var(--ease); }
.answer[hidden]{ display:none; }
.answer .btn{ margin-top:12px; min-height:44px; padding:0 18px; font-size:12.5px; }
@keyframes rise2{ from{ opacity:0; transform:translateY(8px) } }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.checks button{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; border:0; background:none; padding:9px 0; font-size:16.5px; border-bottom:1px solid var(--line); }
.checks .bx{ width:24px; height:24px; flex:none; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:background-color .2s,border-color .2s; }
.checks .bx svg{ width:14px; height:14px; fill:none; stroke:var(--bg); stroke-width:2.4; opacity:0; }
.checks button[aria-pressed="true"] .bx{ background:var(--deep); border-color:var(--deep); }
.checks button[aria-pressed="true"] .bx svg{ opacity:1; }
.checks button[aria-pressed="true"] span:last-child{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-strong); }
.check-meter{ height:3px; background:var(--line); margin-top:18px; }
.check-meter i{ display:block; height:100%; width:0; background:var(--deep); transition:width .4s var(--ease); }
.check-note{ font-size:14px; color:var(--muted); margin-top:10px; }

/* ---------- Ablauf als Weg (aus dem Entwurf) ---------- */
.weg{ position:relative; --p:0; }
.weg-stops{ list-style:none; margin:0; padding:0; position:relative; z-index:1; display:grid; gap:34px; }
.weg-stop{ position:relative; padding-left:76px; min-height:64px; }
.weg-phase{ display:block; font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:var(--deep); margin-bottom:6px; }
.weg-dot{ position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--muted); box-shadow:0 0 0 1px var(--field); transition:background-color .6s,color .6s,box-shadow .6s,transform .6s cubic-bezier(.2,.8,.2,1.2); }
.weg-icon{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.weg-title{ font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2; margin:0 0 6px; transition:opacity .6s,transform .6s; }
.weg-text{ font-size:16px; color:var(--muted); margin:0; transition:opacity .6s .1s,transform .6s .1s; }
.js .weg-stop:not(.is-on) .weg-title{ opacity:.45; transform:translateY(8px); }
.js .weg-stop:not(.is-on) .weg-text{ opacity:.25; transform:translateY(8px); }
.weg-stop.is-on .weg-dot{ background:var(--panel); color:var(--panel-ink); box-shadow:0 0 0 6px color-mix(in srgb,var(--panel) 35%,transparent); transform:scale(1.06); }
.weg-line{ display:none; }
.weg::before,.weg::after{ content:""; position:absolute; left:27px; top:28px; bottom:28px; width:2px; }
.weg::before{ background:var(--field); }
.weg::after{ background:var(--deep); transform-origin:top; transform:scaleY(var(--p)); }
@media (min-width:900px){
  .weg::before,.weg::after{ display:none; }
  .weg{ padding-top:28px; }
  .weg-line{ display:block; position:absolute; left:0; right:0; top:28px; width:100%; height:120px; overflow:visible; }
  .weg-line path{ fill:none; stroke-linecap:round; }
  .weg-track{ stroke:var(--field); stroke-width:2; }
  .weg-draw{ stroke:var(--deep); stroke-width:2.5; stroke-dasharray:1 2; stroke-dashoffset:calc(1 - var(--p)); }
  .weg-stops{ grid-template-columns:repeat(5,1fr); gap:0 24px; }
  .weg-stop{ padding:0; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .weg-dot{ position:relative; width:64px; height:64px; margin-bottom:18px; order:-1; }
  .weg-phase{ position:absolute; top:-28px; left:0; right:0; margin:0; }
  .weg-text{ max-width:22ch; }
  .weg-stop:nth-child(odd) .weg-dot{ margin-top:-2px; }
  .weg-stop:nth-child(even) .weg-dot{ margin-top:63px; }
}

/* ---------- Galerie mit Wunschbildern ---------- */
.gallery{ columns:1; column-gap:18px; }
@media (min-width:640px){ .gallery{ columns:2; } }
@media (min-width:1000px){ .gallery{ columns:3; column-gap:24px; } }
.gitem{ position:relative; break-inside:avoid; margin:0 0 18px; overflow:hidden; background:var(--sand); }
@media (min-width:1000px){ .gitem{ margin-bottom:24px; } }
.gitem>button.open{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.gitem img{ width:100%; height:auto; transition:transform .8s var(--ease); }
.gitem:hover img{ transform:scale(1.04); }
.wish{ position:absolute; right:12px; top:12px; z-index:2; height:38px; min-width:38px; padding:0 12px; border-radius:19px; border:0; background:rgba(255,255,255,.94); color:#272727; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; box-shadow:0 2px 12px rgba(0,0,0,.14); transition:background-color .2s,color .2s,transform .2s; }
.wish svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.wish .t{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .3s var(--ease); }
.gitem:hover .wish .t,.wish:focus-visible .t{ max-width:120px; }
.wish[aria-pressed="true"]{ background:var(--deep); color:var(--bg); }
.wish[aria-pressed="true"] .plus{ display:none; } .wish .ok{ display:none; } .wish[aria-pressed="true"] .ok{ display:block; }
.wish.pop{ animation:pop .35s ease; }
@keyframes pop{ 50%{ transform:scale(1.18) } }
.wishhint{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.wishhint i{ width:28px; height:28px; border-radius:50%; background:var(--surface); box-shadow:0 0 0 1px var(--field); display:grid; place-items:center; font-style:normal; font-weight:600; color:var(--ink); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.chip{ min-height:40px; padding:0 16px; border:1px solid var(--field); background:var(--surface); font-size:13px; font-weight:600; letter-spacing:1px; display:inline-flex; align-items:center; gap:8px; }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:80; background:rgba(18,13,14,.94); display:grid; grid-template-rows:auto 1fr auto; color:#fff; animation:fade .2s; }
.lb[hidden]{ display:none; }
.lb-top{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-size:13px; letter-spacing:2px; }
.lb-top button,.lb-nav{ width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; }
.lb-top svg,.lb-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.lb-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 64px; }
.lb-stage img{ max-height:100%; max-width:100%; object-fit:contain; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); }
.lb-nav.prev{ left:10px; } .lb-nav.next{ right:10px; }
.lb-foot{ display:flex; justify-content:center; gap:10px; padding:14px 16px 22px; }
.lb-foot .wish{ position:static; height:46px; padding:0 18px; }
.lb-foot .wish .t{ max-width:none; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px 0; font-family:var(--serif); font-size:21px; line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:12px; height:12px; flex:none; border-right:1.5px solid var(--deep); border-bottom:1.5px solid var(--deep); transform:rotate(45deg) translateY(-4px); transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details p{ padding:0 0 22px; color:var(--muted); max-width:68ch; }

/* ---------- Bewertungen ---------- */
.reviews{ grid-auto-columns:min(380px,84vw); }
.review{ margin:0; background:var(--surface); border:1px solid var(--field); padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
.review-top{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
.stars{ color:#C9A227; letter-spacing:2px; }
.review blockquote{ margin:0; font-family:var(--serif); font-size:18px; line-height:1.5; }
.review blockquote::before{ content:"“"; display:block; font-size:54px; line-height:.6; color:var(--panel); margin-bottom:6px; }
body[data-theme="boudoir"] .review blockquote::before{ color:#D1A9AE; }
.review figcaption{ font-size:14px; color:var(--muted); margin-top:auto; }
.label-chip{ display:inline-block; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:600; padding:3px 9px; background:var(--tint); color:var(--deep); }
.review-note{ font-size:13px; color:var(--muted); margin-top:22px; max-width:90ch; }
.bignum{ display:flex; align-items:baseline; gap:14px; }
.bignum b{ font-family:var(--serif); font-weight:400; font-size:76px; line-height:1; }

/* ---------- Kontakt / Anfrage ---------- */
.contact{ display:grid; gap:40px; }
@media (min-width:980px){ .contact{ grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start; } .contact-aside{ position:sticky; top:110px; } }
.promise{ display:flex; gap:14px; align-items:flex-start; padding:18px; background:var(--tint); border-left:3px solid var(--deep); margin-top:24px; }
.promise .clock{ width:46px; height:46px; flex:none; border-radius:50%; background:var(--surface); display:grid; place-items:center; position:relative; }
.promise .clock::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:conic-gradient(var(--deep) 0 30deg,transparent 30deg); animation:sweep 5s linear infinite; opacity:.35; }
.promise .clock b{ position:relative; font-family:var(--serif); font-size:18px; color:var(--deep); }
@keyframes sweep{ to{ transform:rotate(360deg) } }
.promise strong{ display:block; font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.25; }
.promise span{ font-size:15px; color:var(--muted); }
.aside-links{ display:grid; gap:10px; margin-top:24px; }
.aside-links a{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line); }
.aside-links a svg{ width:20px; height:20px; fill:none; stroke:var(--deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.aside-links a span{ margin-left:auto; color:var(--line-strong); }
.form{ background:var(--surface); border-top:4px solid var(--deep); padding:30px 24px; display:grid; gap:18px; }
@media (min-width:640px){ .form{ grid-template-columns:1fr 1fr; padding:40px 36px; } .full{ grid-column:1/-1; } }
.field{ display:grid; gap:7px; }
.field>span,.legend{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600; color:var(--ink); }
.opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted); }
.input{ width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:0; background:var(--bg); color:var(--ink); font:inherit; font-size:16px; }
textarea.input{ min-height:110px; resize:vertical; }
.input:focus{ outline:2px solid var(--deep); outline-offset:0; border-color:var(--deep); }
.input[aria-invalid="true"]{ border-color:var(--error); }
.field-error{ font-size:14px; color:var(--error); min-height:0; }
.field-error:empty{ display:none; }
fieldset{ border:0; padding:0; margin:0; }
.picks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.pick{ position:relative; }
.pick input{ position:absolute; opacity:0; inset:0; }
.pick span{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--field); background:var(--bg); font-size:15px; cursor:pointer; transition:background-color .2s,color .2s,border-color .2s; }
.pick input:checked+span{ background:var(--deep); border-color:var(--deep); color:var(--bg); }
.pick input:focus-visible+span{ outline:2px solid var(--deep); outline-offset:2px; }
.toggle-row{ display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--field); background:var(--bg); cursor:pointer; }
.toggle-row input{ width:22px; height:22px; accent-color:var(--deep); flex:none; margin:1px 0 0; }
.toggle-row b{ display:block; font-weight:600; font-size:15.5px; }
.toggle-row small{ display:block; color:var(--muted); font-size:14px; line-height:1.45; }
.mood{ display:grid; gap:10px; }
.mood:empty{ display:none; }
.mood .strip{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.mood .strip span{ position:relative; width:58px; height:72px; flex:none; overflow:hidden; }
.mood .strip img{ width:100%; height:100%; object-fit:cover; }
.mood .strip button{ position:absolute; right:3px; top:3px; width:20px; height:20px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#272727; font-size:12px; line-height:1; display:grid; place-items:center; padding:0; }
.form-foot{ display:grid; gap:14px; }
.privacy{ font-size:14px; color:var(--muted); }
.form-status{ padding:18px; background:var(--tint); border-left:3px solid var(--deep); font-size:16px; }
.form-status[hidden]{ display:none; }
.form-status strong{ display:block; font-family:var(--serif); font-weight:400; font-size:22px; margin-bottom:4px; }

/* ---------- Anfrage-Sheet ---------- */
.sheet-back{ position:fixed; inset:0; z-index:70; background:rgba(20,15,16,.5); animation:fade .25s; }
.sheet-back[hidden],.sheet[hidden]{ display:none; }
.sheet{ position:fixed; z-index:71; left:50%; bottom:0; transform:translateX(-50%); width:min(560px,100%); max-height:92svh; overflow-y:auto; background:#F6F3F3; color:#272727; padding:14px 22px calc(26px + env(safe-area-inset-bottom)); animation:up .4s var(--ease); --deep:#7E5F65; --muted:#5A5555; --field:#D5CAC4; --bg:#F6F3F3; --ink:#272727; }
@media (min-width:700px){ .sheet{ bottom:auto; top:50%; transform:translate(-50%,-50%); animation:fade .3s; padding:22px 30px 30px; } }
@keyframes up{ from{ transform:translate(-50%,40%) } }
.sheet .grab{ width:42px; height:4px; border-radius:2px; background:#D5CAC4; margin:0 auto 16px; }
.sheet h2{ font-size:32px; line-height:1.1; }
.sheet p.sub{ color:#5A5555; margin:8px 0 18px; font-size:15.5px; }
.sheet .x{ position:absolute; right:14px; top:14px; width:40px; height:40px; border-radius:50%; border:0; background:#fff; display:grid; place-items:center; }
.sheet .x svg{ width:18px; height:18px; fill:none; stroke:#272727; stroke-width:1.8; }
.choices{ display:grid; gap:8px; }
.choice{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:8px 14px 8px 8px; background:#fff; border:1px solid #D5CAC4; text-decoration:none; color:#272727; text-align:left; width:100%; }
.choice:hover{ border-color:#272727; color:#272727; }
.choice img{ width:64px; height:64px; object-fit:cover; }
.choice .ic{ width:64px; height:64px; display:grid; place-items:center; }
.choice .ic svg{ width:26px; height:26px; fill:none; stroke:#272727; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.choice b{ display:block; font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.2; }
.choice small{ display:block; font-size:13px; color:#5A5555; }
.choice .arr{ color:#958580; }
.choice-bar{ width:6px; height:64px; justify-self:start; }
.sheet .promise{ margin-top:16px; background:#F3E9E7; }
.sheet .promise .clock{ background:#fff; }

/* ---------- Startseite ---------- */
.about-img{ position:relative; }
.about-img .frame{ aspect-ratio:4/5; overflow:hidden; }
.about-img .frame img{ width:100%; height:100%; object-fit:cover; }
.about-img .tag{ position:absolute; left:-1px; bottom:28px; background:var(--bg); padding:14px 18px; font-family:var(--serif); font-style:italic; font-size:19px; }
.creds{ display:flex; flex-wrap:wrap; gap:8px; }
.shoot-grid{ display:grid; gap:18px; }
@media (min-width:700px){ .shoot-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .shoot-grid{ grid-template-columns:repeat(4,1fr); } }
.shoot{ position:relative; display:flex; flex-direction:column; background:var(--surface); text-decoration:none; color:var(--ink); border-bottom:4px solid var(--deep); transition:transform .4s var(--ease); }
.shoot:hover{ transform:translateY(-4px); color:var(--ink); }
.shoot .ph{ aspect-ratio:3/4; overflow:hidden; }
.shoot .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.shoot:hover .ph img{ transform:scale(1.06); }
.shoot .body{ padding:20px 20px 22px; display:grid; gap:8px; background:var(--tint); flex:1; }
.shoot .label{ margin:0; font-size:11px; }
.shoot h3{ font-size:28px; line-height:1.1; }
.shoot p{ font-size:15.5px; color:var(--muted); line-height:1.5; }
.shoot .more{ font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:var(--deep); margin-top:6px; }
.shoot[data-theme="boudoir"]{ --ink:#F3E9E7; --muted:#D9CBCD; background:#33262A; }
.shoot[data-theme="boudoir"] .body{ background:#2C2124; }
.finder{ background:var(--surface); border:1px solid var(--field); padding:30px 26px; }
@media (min-width:900px){ .finder{ padding:44px; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; } }
.finder-result{ margin-top:18px; display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:12px; background:var(--tint); animation:rise2 .4s var(--ease); }
.finder-result[hidden]{ display:none; }
.finder-result img{ width:96px; height:120px; object-fit:cover; }
.finder-result b{ font-family:var(--serif); font-weight:400; font-size:24px; display:block; line-height:1.15; }
.finder-result p{ font-size:15px; color:var(--muted); margin:4px 0 10px; }

/* Teaser: Anreise und Gutschein */
.teasers{ display:grid; gap:18px; }
@media (min-width:900px){ .teasers{ grid-template-columns:1fr 1fr; } }
.teaser{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:420px; overflow:hidden; text-decoration:none; color:var(--ink); border:1px solid var(--field); background:#F8F1EE; }
.teaser:hover{ color:var(--ink); }
.teaser .art{ position:absolute; inset:0 0 150px; }
.teaser:not(.teaser--gift) .art{ inset:0; }
.teaser .art svg{ width:100%; height:100%; display:block; }
.teaser .txt{ position:relative; z-index:2; padding:28px; background:linear-gradient(transparent,rgba(248,241,238,.96) 30%); display:grid; gap:10px; }
.teaser h3{ font-size:34px; line-height:1.08; }
.teaser p{ color:#5A5555; font-size:16px; max-width:40ch; }
.teaser .more{ font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:#7E5F65; }
.teaser--gift{ background:#ECE5E1; }
.teaser--gift .art{ display:grid; place-items:center; }
.teaser--gift .txt{ background:none; }

/* Fußzeile */
.site-foot{ background:var(--night); color:var(--on-night); padding:72px 0 calc(40px + env(safe-area-inset-bottom)); font-size:15px; }
/* Platz unter der Fußzeile, damit das schwebende Anfragen-Dock Impressum und Datenschutz nicht verdeckt */
.site-foot{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
body[data-theme="boudoir"] .site-foot{ background:#1A1316; }
.foot-grid{ display:grid; gap:36px; }
@media (min-width:900px){ .foot-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.site-foot .logo{ justify-self:start; color:#F6F3F3; }
.site-foot .logo svg{ width:170px; }
.site-foot h2{ font-family:var(--sans); font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:#CFC6C3; margin-bottom:14px; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.site-foot a{ color:#F6F3F3; text-decoration:none; }
.site-foot a:hover{ text-decoration:underline; color:#fff; }
.site-foot address{ font-style:normal; display:grid; gap:6px; color:#CFC6C3; }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px; font-size:13px; color:#CFC6C3; }

/* Instagram-Leiste */
.posts{ grid-auto-columns:min(280px,72vw); }
.post{ margin:0; }
.post .ph{ aspect-ratio:4/5; overflow:hidden; }
.post img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.post:hover img{ transform:scale(1.05); }
.post .kind{ font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:var(--on-night-muted); margin-top:10px; }

/* Toast */
.toast{ position:fixed; left:50%; top:20px; visibility:hidden; transform:translate(-50%,-200%); z-index:90; background:#272727; color:#fff; padding:12px 18px; font-size:14.5px; transition:transform .4s var(--ease); max-width:calc(100% - 32px); }
.toast.on{ transform:translate(-50%,0); visibility:visible; }

/* Einblenden */
.js .reveal.is-in{ animation:rv .9s var(--ease) both; }
@keyframes rv{ from{ opacity:.25; transform:translateY(18px); } }

/* Rechtstexte */
.legal{ padding:160px 0 90px; }
.legal .wrap{ max-width:820px; }
.legal h2{ font-size:26px; margin:40px 0 10px; }
.legal p,.legal li{ color:var(--muted); }
.draftnote{ padding:14px 16px; border:1px dashed var(--line-strong); font-size:14.5px; margin:20px 0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rise .ch{ opacity:1; transform:none; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- Tipps zum Scrollen (ersetzt die Story-Karten) ---------- */
.tips{ display:grid; gap:28px; }
.tips-media{ display:none; }
.tip{ display:grid; gap:14px; padding:26px 0; border-top:1px solid var(--field); }
.tip .label{ margin:0; }
.tip-ph{ aspect-ratio:16/10; overflow:hidden; }
.tip-ph img{ width:100%; height:100%; object-fit:cover; }
.tip .v-big b{ font-size:72px; }
.tip .pill{ font-size:14px; padding:7px 14px; background:var(--surface); }
.tip .v-tl li{ font-size:16px; } .tip .v-tl li b{ font-size:11px; min-width:120px; }
.tip .v-quote{ font-size:26px; }
.tip .v-sw{ max-width:360px; } .tip .v-sw span{ font-size:13px; }
.tip .v-vs{ font-size:14.5px; max-width:460px; } .tip .v-vs div{ background:var(--surface); }
@media (min-width:900px){
  .tips{ grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
  .tips-media{ display:block; position:sticky; top:110px; aspect-ratio:4/5; overflow:hidden; }
  .tm{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
  .tm.on{ opacity:1; }
  .tm img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 6s ease-out; }
  .tm.on img{ transform:scale(1); }
  .tip{ min-height:46vh; align-content:center; padding:40px 0; }
  .tip-ph{ display:none; }
  .tip:first-child{ border-top:0; }
}
.freeguide{ display:grid; grid-template-columns:auto 1fr; gap:18px 24px; align-items:center; margin-top:48px; padding:22px; background:var(--panel); color:var(--panel-ink); text-decoration:none; }
.freeguide:hover{ color:var(--panel-ink); }
.freeguide .phone{ position:relative; width:74px; aspect-ratio:9/16; border-radius:12px; overflow:hidden; border:3px solid #272727; background:#272727; }
.freeguide .phone img{ width:100%; height:100%; object-fit:cover; }
.freeguide .phone i{ position:absolute; top:6px; left:12px; right:12px; height:2px; background:rgba(255,255,255,.7); }
.freeguide .label{ color:inherit; margin:0 0 4px; }
.freeguide b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,32px); line-height:1.15; }
.freeguide small{ display:block; font-size:15px; opacity:.8; margin-top:4px; }
.freeguide .btn{ grid-column:1/-1; background:#363636; color:#fff; }
body[data-theme="boudoir"] .freeguide .btn{ background:#D1A9AE; color:#241B1E; }
@media (min-width:760px){ .freeguide{ grid-template-columns:auto 1fr auto; padding:26px 32px; } .freeguide .btn{ grid-column:auto; } }
.quiz-solo{ display:grid; gap:20px; }
@media (min-width:900px){ .quiz-solo{ grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; padding:40px; } }

/* ---------- Online-Galerie zum Durchklicken ---------- */
.og{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .og{ grid-template-columns:1fr auto; gap:80px; } }
.og-txt .lead{ margin-top:16px; }
.og-steps{ list-style:none; margin:28px 0 22px; padding:0; display:grid; gap:6px; max-width:420px; }
.og-steps button{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; padding:12px 0; font-size:16.5px; color:var(--muted); transition:color .2s; }
.og-steps .n{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--serif); font-size:15px; border:1px solid var(--field); background:var(--surface); color:var(--ink); transition:background-color .3s,color .3s,border-color .3s; }
.og-steps button:hover{ color:var(--ink); }
.og-steps button[aria-pressed="true"]{ color:var(--ink); font-weight:600; }
.og-steps button[aria-pressed="true"] .n{ background:var(--deep); border-color:var(--deep); color:var(--bg); }
.og-phone{ justify-self:center; display:grid; gap:12px; justify-items:center; }
.og-frame{ --w:min(312px, calc(100vw - 2 * var(--gutter) - 24px)); width:calc(var(--w) + 24px); padding:12px; border-radius:44px; background:#272727; box-shadow:0 30px 60px -24px rgba(46,42,43,.5); }
.og-screen{ position:relative; width:var(--w); height:calc(var(--w) * 844 / 390); border-radius:32px; overflow:hidden; background:#F6F3F3; }
.og-screen iframe{ position:absolute; left:0; top:0; width:390px; height:844px; border:0; transform-origin:0 0; }
.og-note{ font-size:13px; color:var(--muted); letter-spacing:1px; }

/* ---------- Preispaket ---------- */
.pkg{ display:grid; background:var(--surface); border:1px solid var(--field); border-top:4px solid var(--deep); }
@media (min-width:900px){ .pkg{ grid-template-columns:minmax(260px,.8fr) 1.2fr; } }
.pkg-head{ display:grid; gap:6px; align-content:start; padding:32px 28px; background:var(--tint); }
.pkg-name{ font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:var(--deep); }
.pkg-count{ font-family:var(--serif); font-size:28px; line-height:1.15; }
.pkg-price{ font-family:var(--serif); font-weight:400; font-size:72px; line-height:1; margin-top:14px; font-variant-numeric:tabular-nums; }
.pkg-head small{ font-size:13px; color:var(--muted); margin-bottom:18px; }
.pkg-body{ padding:32px 28px; }
.pkg-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
@media (min-width:640px){ .pkg-list{ grid-template-columns:1fr 1fr; gap:14px 28px; } }
.pkg-list li{ display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:16px; line-height:1.45; }
.pkg-list svg{ width:18px; height:18px; fill:none; stroke:var(--deep); stroke-width:2; margin-top:2px; }
/* Hinweis auf Printprodukte unter dem Paket */
.print-hint{ margin:18px 0 0; font-size:16px; color:var(--muted); }
.print-hint a{ font-weight:600; white-space:nowrap; }

/* Agent 5 */
/* H1 als ruhige Label-Zeile über dem großen Satz */
h1.label{ font-family:var(--sans); text-wrap:balance; }
p.display{ font-family:var(--serif); font-weight:400; text-wrap:balance; }
.card .h3{ margin-bottom:14px; }
/* Boudoir: helle Teaser-Karten brauchen dunkle Schrift */
body[data-theme="boudoir"] .teaser{ --ink:#272727; --deep:#7E5F65; color:#272727; }
/* Startseite: Babybauch groß, Boudoir zweit, Newborn und Porträt kleiner */
.shoot--small{ flex-direction:row; }
.shoot--small .ph{ aspect-ratio:auto; width:38%; min-height:210px; flex:none; }
.shoot--small h3{ font-size:24px; }
.shoot--main h3{ font-size:clamp(30px,3vw,40px); }
@media (min-width:700px){
  .shoot-grid--focus .shoot--main,.shoot-grid--focus .shoot--second{ grid-column:span 2; }
  .shoot-grid--focus .shoot--main .ph,.shoot-grid--focus .shoot--second .ph{ aspect-ratio:3/2; }
}
@media (min-width:1100px){
  .shoot-grid--focus{ grid-template-columns:repeat(6,1fr); }
  .shoot-grid--focus .shoot--main{ grid-column:span 4; }
  .shoot-grid--focus .shoot--second{ grid-column:span 2; }
  .shoot-grid--focus .shoot--small{ grid-column:span 3; }
  .shoot-grid--focus .shoot--main .ph{ aspect-ratio:4/3; }
  .shoot-grid--focus .shoot--second .ph{ aspect-ratio:3/4; }
}
/* Ratgeber-Teaser mit drei Karten */
.shoot-grid--three .ph{ aspect-ratio:4/3; }
.shoot-grid--three h3{ font-size:26px; }
@media (min-width:1000px){ .shoot-grid--three{ grid-template-columns:repeat(3,1fr); } }

/* Integration: senkrechtes Seitenlabel überlappt auf schmalen Displays den Hero-Text */
@media (max-width:600px){ .vlabel{ display:none; } }
.promise .clock svg{ position:relative; width:22px; height:22px; fill:none; stroke:var(--deep); stroke-width:1.6; stroke-linecap:round; }
/* Hinweis Studio-Eröffnung 2027 (Startseite) */
.studio27{ padding-bottom:0; }
.note27{ max-width:760px; margin:0 auto; text-align:center; padding:28px 22px; border-top:1px solid var(--line, #D5CAC4); border-bottom:1px solid var(--line, #D5CAC4); display:flex; flex-direction:column; align-items:center; gap:12px; }
.note27 .h3{ margin:0; text-wrap:balance; }
.note27 .muted{ margin:0; max-width:52ch; }
.note27 .quiet{ margin-top:4px; }