/* Sprechinsel: Seitenlayout (aus Layout 5) */
/* ===== System: one grid, one type scale, one rule language ===== */
:root{
  --fs-h1:clamp(2.7rem,1.2rem + 3.4vw,4.6rem);
  --fs-h2:clamp(2.2rem,1.4rem + 2.2vw,3.4rem);
  --fs-h3:clamp(1.5rem,1.25rem + .6vw,1.75rem);
  --fs-h4:22px;
  --fs-lead:clamp(1.1rem,1rem + .4vw,1.3rem);
  --fs-body:18px;
  --fs-ui:16px;
  --fs-small:15px;
  --fs-micro:14px;
  --col-gap:clamp(32px,5vw,96px);
  --sec-y:clamp(88px,10vw,144px);
  --head-gap:clamp(40px,5vw,64px);
  --div-gap:clamp(32px,4vw,56px);
  --rose-light:#f1d3d3;
}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}
main h2{font-size:var(--fs-h2);line-height:1.08}
main p{font-size:var(--fs-body);text-wrap:pretty}
.muted{color:var(--muted)}
main strong{font-weight:600;color:var(--ink)}
.close strong{color:#fff}
.dnote strong strong{font-weight:inherit}

/* Split: left = what (title / image), right = details. Same 5:7 everywhere */
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--col-gap);align-items:start}
.sticky{position:sticky;top:120px}

/* Section shell + header */
.sec{padding:var(--sec-y) 0}
.sec.tint{background:var(--surface)}
.sh{display:grid;grid-template-columns:5fr 7fr;gap:var(--col-gap);align-items:end;margin-bottom:var(--head-gap)}
.sh p{color:var(--muted);max-width:36em}

/* Rule language: 2px Tiefblau opens a structure, 1px line separates rows */
.opener{border-top:2px solid var(--primary)}
.rows li{padding:15px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.rows.two-col{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.rows.opener li:first-child,.rows.two-col.opener li:nth-child(2){border-top:0}

/* Images: one radius, captions in micro */
.ph{width:100%;object-fit:cover;border-radius:4px;background:var(--surface)}
figcaption{font-size:var(--fs-micro);color:var(--muted);margin-top:10px}

/* Header */
.hd{position:sticky;top:0;z-index:50;background:#fff;transition:box-shadow .22s var(--ease)}
.hd.scrolled{box-shadow:0 1px 0 var(--line),0 12px 28px -24px rgba(20,33,61,.5)}
.hd .wrap{display:flex;align-items:center;gap:36px;height:88px}
.hd .btn{white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:48px;height:48px;object-fit:contain}
.brand strong{display:block;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.05}
.brand small{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav{display:flex;gap:22px;font-weight:500;font-size:var(--fs-ui);white-space:nowrap}
.nav a{text-decoration:none;padding:6px 0;background:linear-gradient(var(--rose),var(--rose)) left bottom/0 1.5px no-repeat;transition:background-size .22s var(--ease)}
.nav a:hover{background-size:100% 1.5px}
.tel{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--primary);text-decoration:none;font-size:var(--fs-ui);white-space:nowrap}
@media (max-width:1360px){.tel span{display:none}.nav{gap:20px}}

/* Hero */
.hero-grid{display:grid;grid-template-columns:calc(max(0px,(100vw - 1360px) / 2) + var(--gutter)) minmax(0,1fr) clamp(32px,4vw,64px) 48vw;align-items:center;min-height:min(calc(100vh - 88px),820px)}
.hero-copy{grid-column:2;padding:48px 0}
.hero h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero .lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);max-width:31em;margin-top:28px}
.actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:36px}
.hero .wait-face{margin-top:28px;max-width:30em}
.hero .wait-face span{font-size:var(--fs-small)}
.hero-photo{grid-column:4;align-self:stretch;position:relative;min-height:560px}
.hero-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dnote{position:absolute;right:calc(max(0px,(100vw - 1360px) / 2) + var(--gutter));bottom:40px;width:min(360px,calc(100% - 2 * var(--gutter)));background:#fbf5f4;color:var(--ink);border-top:3px solid var(--rose);border-radius:0;padding:22px 26px 22px;box-shadow:0 24px 48px -28px rgba(20,33,61,.45);text-decoration:none;display:block;transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.dnote:hover{box-shadow:0 28px 56px -26px rgba(20,33,61,.5);transform:translateY(-2px)}
.dnote strong{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--serif);font-weight:500;font-size:var(--fs-h3);line-height:1.2;color:var(--ink)}
.dnote strong em{font-style:normal;font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);letter-spacing:.01em;color:var(--rose-ink);white-space:nowrap}
.dnote > span{display:block;margin-top:8px;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.dnote .more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;font-size:var(--fs-small);color:var(--primary)}
.dnote .more .icon{width:16px;height:16px;transition:transform .22s var(--ease)}
.dnote:hover .more .icon{transform:translateX(3px)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--div-gap);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(28px,3vw,40px)}
.strip li{position:relative;padding:22px 0;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.strip li + li::before,.door + .door::before,.steps li + li::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--div-gap) / -2);border-left:1px solid var(--line)}
.strip b{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-ui);margin-bottom:2px}

/* Wegweiser */
.doors{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--div-gap)}
.door{position:relative;display:flex;flex-direction:column;text-decoration:none}
.door img{height:clamp(200px,17vw,250px);transition:opacity .22s var(--ease)}
.door:hover img{opacity:.92}
.door .txt{padding-top:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.door h3{font-size:var(--fs-h3);line-height:1.15}
.door:hover h3{text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:1.5px;text-underline-offset:.18em}
.door p{color:var(--muted);font-size:var(--fs-small)}
.go{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:600;text-decoration:none}
.go .icon{width:18px;height:18px;transition:transform .22s var(--ease)}
.go:hover .icon,.door:hover .go .icon{transform:translateX(4px)}
.door .go{margin-top:auto;padding-top:14px}

/* Leistungen */
.index{display:grid;gap:56px}
.intro{color:var(--muted);margin-top:18px;max-width:24em}
.leist-detail{margin-top:44px}
.leist-detail .ph{aspect-ratio:4/5;object-position:center 55%}
.group{scroll-margin-top:110px}
.group h3{font-size:var(--fs-h3);padding-bottom:14px}
.group .gi{color:var(--muted);font-size:var(--fs-small);margin:0 0 4px;padding-top:14px;max-width:40em}
.group .go{margin-top:16px}


/* Anzeichen */
.signs{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--div-gap)}
.sign-col h3{font-size:var(--fs-h4);font-weight:600;padding-bottom:12px}
.sign-col .rows li{font-size:var(--fs-small)!important;line-height:1.5;padding:13px 0}
.signs-note{margin-top:32px}

/* Schwerpunkt */
.spread{align-items:center}
.spread .ph{aspect-ratio:4/5}
.prose p{color:var(--muted);line-height:1.7;max-width:36em}
.prose p + p{margin-top:16px}
.spread h2{margin-bottom:26px}
.nest{margin-top:40px}
.nest h3{font-size:var(--fs-h4);font-weight:600;padding-bottom:12px}
.nest > p{color:var(--muted);font-size:var(--fs-small);padding-top:14px;max-width:40em}
.nest .net{margin-top:18px}

/* Leitgedanke */
.statement{padding:0 0 clamp(72px,8vw,112px)}
.statement .wrap{padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--line);max-width:calc(1360px - 2 * var(--gutter));margin:0 auto;padding-left:0;padding-right:0}
@media (max-width:1440px){.statement .wrap{margin:0 var(--gutter)}}
.statement .wrap{text-align:center}
.statement p{font-family:var(--serif);font-weight:500;font-size:var(--fs-h2)!important;line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:22em;margin:0 auto;text-wrap:balance}
.statement p::before{content:"";display:block;width:56px;height:3px;background:var(--rose);margin:0 auto 32px}
.statement em{font-style:normal;color:var(--primary)}
.statement.js .w{color:#9c8f8f;transition:color .35s var(--ease)}
.statement.js .w.on{color:var(--ink)}
.statement.js em .w.on{color:var(--primary)}

/* Dentosophie */
.dento h2 span{display:block;font-size:clamp(1.3rem,1.05rem + .9vw,1.9rem);margin-top:8px;color:var(--rose-ink)}
.pillars{display:grid;grid-template-columns:1fr 1fr;margin-top:36px}
.pillars li{font-family:var(--serif);font-size:var(--fs-h3);padding:20px 0 20px 24px;border-bottom:1px solid var(--line)}
.pillars li:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}
.dento .go{margin-top:28px}
.fine{font-size:var(--fs-small)!important;color:var(--muted);margin-top:18px;max-width:36em}

/* Alexia */
.about .ph{aspect-ratio:4/5;object-position:center 35%}
.about blockquote{margin:32px 0 0;padding-top:28px;position:relative}
.about blockquote::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--rose)}
.lead-quote{font-family:var(--serif);font-weight:500;font-size:clamp(1.55rem,1.15rem + 1.2vw,2.25rem)!important;line-height:1.25;letter-spacing:-.012em;color:var(--ink);max-width:22em}
.about .prose{margin-top:22px}
.sign{margin-top:24px;font-weight:600;font-size:var(--fs-ui)!important}
.sign span{display:block;font-weight:600;color:var(--rose-ink);font-size:var(--fs-small);margin-top:2px}
.quals{margin-top:40px}
.quals h3{font-size:var(--fs-h4);font-weight:600;padding-bottom:12px}

/* Team */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px)}
.trio .ph{aspect-ratio:4/5}
.trio h3{font-size:var(--fs-h4);font-weight:600;margin-top:16px}
.role{color:var(--rose-ink);font-weight:600;font-size:var(--fs-small)!important;margin-top:4px}
.where{font-size:var(--fs-micro)!important;color:var(--muted);margin-top:6px}

/* Standorte */
.places{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap)}
.place .ph{aspect-ratio:3/2}
.place h3{font-size:var(--fs-h3);margin-top:22px}
.place address{font-style:normal;font-size:var(--fs-body);margin:6px 0 16px}
.place .meta-tel{margin:-8px 0 16px;font-size:var(--fs-body)!important}
.place .meta-tel a{color:var(--primary);font-weight:600;text-decoration:none}
.place .meta-tel a:hover{text-decoration:underline}
.place .arr-h{font-family:var(--serif);font-size:var(--fs-h4);font-weight:600;margin:28px 0 12px}
.arrive li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.arrive .k{font-weight:600;color:var(--ink)}
.arrive .v{color:var(--muted)}
.check{display:inline-block;background:var(--rose-soft);color:var(--rose-ink)!important;font-weight:600;font-size:var(--fs-micro);padding:1px 8px;border-radius:3px}
.map{margin:24px 0 20px}
.map > a{position:relative;display:block;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.map img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.map > a:hover img{transform:scale(1.02)}
.map-open{position:absolute;right:12px;bottom:12px;background:#fff;color:var(--primary);font-weight:600;font-size:var(--fs-micro);padding:6px 12px;border-radius:4px;box-shadow:0 8px 20px -12px rgba(20,33,61,.5)}
.map figcaption{font-size:12px;color:var(--muted);margin-top:8px}
.map figcaption a{color:inherit;text-underline-offset:.2em}
.place .meta{font-size:var(--fs-small)!important;color:var(--muted);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--div-gap)}
.steps li{position:relative;padding-top:26px}
.steps h3{font-size:var(--fs-h4);font-weight:600;margin:10px 0}
.steps p{color:var(--muted);font-size:var(--fs-small)}
.faq{margin-top:var(--sec-y)}
.faq-side h3{font-size:var(--fs-h3)}
.faq-side p{margin:14px 0 18px;max-width:22em}
.faq-side .go{display:flex;width:max-content;margin-top:8px}
.faq-group + .faq-group{margin-top:40px}
.faq-group h4{font-family:var(--serif);font-size:var(--fs-h4);font-weight:600;padding-bottom:12px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-weight:600;font-size:var(--fs-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--primary);transition:transform .22s var(--ease)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 22px;max-width:40em}

/* Kontakt */
.close{background:var(--primary);color:#fff;padding:var(--sec-y) 0}
.close .split{align-items:center}
.close h2{color:#fff}
.close p{color:var(--on-primary-muted);margin:22px 0 34px;max-width:28em}
.ch li a{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.18);text-decoration:none;font-size:var(--fs-body)}
.ch li:first-child a{border-top:2px solid rgba(255,255,255,.5)}
.ch .icon{color:var(--rose-light)}
.ch-note{font-size:var(--fs-micro)!important;color:var(--on-primary-faint);margin-top:16px;max-width:none!important}
.ch small{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-primary-faint)}

/* Footer */
.ft{padding:clamp(48px,6vw,72px) 0 40px;font-size:var(--fs-small);color:var(--muted)}
.ft-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--col-gap);align-items:start}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ft .ft-h{font:600 13px var(--sans)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.ft address{font-style:normal;line-height:1.6}
.ft a{text-decoration:none}
.ft-cols a{display:block;line-height:1.6;padding:0}
.ft .brand strong{color:var(--ink)}
.ft a:hover{text-decoration:underline;color:var(--ink)}
.ft-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-micro)}
.ft-legal nav{display:flex;gap:22px}
.ft-legal a{display:inline-block;padding:4px 0}


/* ===== Motion: quiet, meaningful, scroll-triggered only ===== */
.zoom{display:block;overflow:hidden;border-radius:4px}
.zoom img{transition:transform .6s var(--ease),opacity .6s var(--ease)}
.door:hover .zoom img,.trio article:hover .zoom img{transform:scale(1.035)}
.door:hover img{opacity:1}
.steps{position:relative;--p:1}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.steps::before{background:var(--line-strong)}
.steps::after{background:var(--primary);transform:scaleX(var(--p));transform-origin:left center;transition:transform .25s linear}
.steps li::after{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--primary);border:2px solid var(--primary);transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.steps.js li::after{background:var(--bg);border-color:var(--line-strong)}
.steps.js li.on::after{background:var(--primary);border-color:var(--primary)}
.steps.js li.now::after{box-shadow:0 0 0 5px var(--rose-soft)}
.steps.js li > *{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.steps.js li:not(.on) > *{opacity:.32;transform:translateY(6px)}
.journey.pin .journey-in{position:sticky;top:120px}
.pillars li{position:relative}
.pillars li::after{content:"";position:absolute;left:0;bottom:12px;width:44px;height:2px;background:var(--rose);transform:scaleX(0);transform-origin:left center}
.pillars li:nth-child(even)::after{left:24px}
@media (prefers-reduced-motion:no-preference){
  img.ph{transition:opacity .7s var(--ease),transform .7s var(--ease),clip-path .9s var(--ease)}
  img.ph.pre{opacity:0;transform:translateY(16px);clip-path:inset(0 0 12% 0 round 4px)}
  .pillars.breathe li{animation:breath 1.9s var(--ease) both}
  .pillars.breathe li::after{animation:breathLine 1.9s var(--ease) both}
  .pillars.breathe li:nth-child(2),.pillars.breathe li:nth-child(2)::after{animation-delay:.6s}
  .pillars.breathe li:nth-child(3),.pillars.breathe li:nth-child(3)::after{animation-delay:1.2s}
  .pillars.breathe li:nth-child(4),.pillars.breathe li:nth-child(4)::after{animation-delay:1.8s}
  .faq details[open] > p{animation:faqIn .3s var(--ease)}
}
@keyframes breath{0%{color:var(--ink)}30%{color:var(--rose-ink)}100%{color:var(--ink)}}
@keyframes breathLine{0%{transform:scaleX(0);opacity:1}30%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:1200px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .tel span{display:none}
}
@media (max-width:900px){
  .hd .wrap{height:72px;gap:16px}
  .hd .btn{display:none}
  .split,.sh,.places,.ft-grid,.signs{grid-template-columns:1fr}
  .sign-col + .sign-col{margin-top:36px}
  .ft-cols{grid-template-columns:1fr 1fr}
  .sticky{position:static}
  .hero-grid{display:flex;flex-direction:column;min-height:0}
  .hero-photo{display:contents}
  .hero-photo > img{position:static;order:1;height:auto;aspect-ratio:4/3.3}
  .hero-copy{order:2;padding:32px var(--gutter) 8px}
  .dnote{position:static;order:3;margin:0 var(--gutter) 16px;width:auto;box-shadow:none;border-radius:0;border:1px solid var(--line);border-top:3px solid var(--rose)}
  .dnote:hover{transform:none}
  .strip{grid-template-columns:1fr 1fr;margin-top:24px}
  .strip li{padding:16px 0}
  .strip li:nth-child(3)::before{display:none}
  .strip li:nth-child(n+3){border-top:1px solid var(--line)}
  .doors{grid-template-columns:1fr}
  .door{flex-direction:row;gap:16px;padding:16px 0}
  .door + .door::before{display:none}
  .door + .door{border-top:1px solid var(--line)}
  .door .zoom{width:38%;flex:none;align-self:flex-start}
  .door img{width:100%;height:auto;aspect-ratio:4/3}
  .door .txt{padding:0}
  .leist-detail{display:none}
  .about .ph{aspect-ratio:4/4.2}
  .steps{grid-template-columns:1fr 1fr}
  .steps{row-gap:26px}
  .steps li:nth-child(3)::before{display:none}
  .steps li:nth-child(n+3){border-top:1px solid var(--line)}
  .ft-legal{margin-top:28px}
}
@media (max-width:560px){
  :root{--fs-body:17px}
  .brand small{font-size:11px;letter-spacing:.03em;white-space:nowrap}
  .tel{display:none}
  .rows.two-col{grid-template-columns:1fr}
  .rows.two-col.opener li:nth-child(2){border-top:0}
  .steps{grid-template-columns:1fr}
  .steps{row-gap:0}
  .steps li{padding:22px 0 18px}
  .steps li + li{border-top:1px solid var(--line)}
  .steps li + li::before{display:none}
  /* Handy: senkrechte Zeitleiste, Punkt neben "Schritt n" (Mitte 33px unter Oberkante, siehe journey-Skript) */
  .steps{padding-left:30px}
  .steps::before,.steps::after{left:5px;right:auto;top:33px;bottom:18px;width:2px;height:auto}
  .steps::after{transform:scaleY(var(--p));transform-origin:center top;transition:none}
  .steps li::after{left:-30px;top:27px}
  .steps.js li:not(.on) > *{transform:none}
  .trio{gap:14px}
  .trio h3{font-size:17px}
  .role{font-size:13.5px!important}
}

/* ===== Impressum & Datenschutz ===== */
.legal-hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px)}
.legal-hero h1{font-size:var(--fs-h2);line-height:1.08}
.legal-hero .lead{margin-top:18px;color:var(--muted);max-width:34em}
.legal{padding-bottom:var(--sec-y)}
.toc{display:flex;flex-direction:column;border-top:2px solid var(--primary);padding-top:14px}
.toc a{padding:7px 0;text-decoration:none;color:var(--muted);font-size:var(--fs-small)}
.toc a:hover{color:var(--ink)}
.toc .toc-h{font-family:var(--serif);font-weight:600;font-size:var(--fs-h4);color:var(--ink);margin:18px 0 4px}
.toc .toc-h:first-child{margin-top:0}
.legal-body h2{font-size:var(--fs-h3)!important;font-weight:500;padding-bottom:14px;border-bottom:2px solid var(--primary);scroll-margin-top:110px}
.legal-body h2 + h3{margin-top:28px}
.legal-body section + section{margin-top:clamp(64px,7vw,96px)}
.legal-body h3{font-size:var(--fs-h4);font-weight:600;margin:32px 0 10px;scroll-margin-top:110px}
.legal-body p{color:var(--muted);font-size:17px!important;line-height:1.7;max-width:44em}
.legal-body p + p{margin-top:12px}
.legal-body a{color:var(--primary)}