/* ============================================================
   Müller & Monnerjahn — gemeinsames Design-System (alle Seiten)
   Konzept „Ruhiger Aufbau" · Farben/Fonts/Tokens siehe BAUAUFTRAG.md
   ============================================================ */
:root{
  --bg:#F6F2EA; --surface:#FFFFFF; --surface-2:#EFE9DD;
  --fg:#16231F; --muted:#5C6B64;
  --brand:#0F4C45; --brand-2:#2E7D6E; --sage:#A7C0B5;
  --accent:#C28B4C; --accent-soft:#E7C9A0; --border:#E2DACB;
  --radius:14px; --radius-lg:22px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgb(15 35 31 / .06);
  --shadow:0 10px 40px -12px rgb(15 76 69 / .20);
  --shadow-lg:0 26px 70px -24px rgb(15 76 69 / .34);
  --ease:cubic-bezier(.16,1,.3,1); --dur:.5s;
  --maxw:1200px; --header-h:78px;
}
html.dark{
  --bg:#11201C; --surface:#17302A; --surface-2:#1E3B34;
  --fg:#E8EEEA; --muted:#9CB2AA; --border:#2A4842;
  --brand:#2E7D6E; --brand-2:#3E9A88; --accent:#D29B5C; --accent-soft:#E7C9A0;
  --shadow:0 14px 44px -16px rgb(0 0 0 / .5);
  --shadow-lg:0 30px 80px -28px rgb(0 0 0 / .6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Mulish',system-ui,sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  transition:background .5s var(--ease), color .5s var(--ease);
}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
ul{margin:0}
::selection{background:var(--accent-soft); color:#16231F}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem}
@media (max-width:640px){ .wrap{padding-inline:1.15rem} }
.eyebrow{font-family:'Mulish'; font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; color:var(--brand-2)}
html.dark .eyebrow{color:var(--sage)}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted)}
.h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.h2{font-size:clamp(1.7rem,4vw,2.7rem)}
.h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.prose p{color:var(--muted); margin-bottom:1.1rem; font-size:1.05rem}
.prose p:last-child{margin-bottom:0}

.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.98rem;
  padding:.92rem 1.5rem; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s; will-change:transform; font-family:'Mulish'}
.btn-primary{background:var(--accent); color:#231406; box-shadow:0 8px 24px -8px rgb(194 139 76 / .55)}
.btn-primary:hover{background:#b07d40}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--brand-2); color:var(--brand-2)}
.btn-light{background:rgba(255,255,255,.12); color:#F6F2EA; border-color:rgba(255,255,255,.32); backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.22)}
.btn:active{transform:scale(.97)}

.site-header{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
  display:flex; align-items:center; color:#F6F2EA; background:transparent;
  transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s, height .4s}
.site-header.scrolled{background:var(--bg); color:var(--fg);
  box-shadow:var(--shadow-sm); height:66px; border-bottom:1px solid var(--border)}
.site-header.solid{background:var(--bg); color:var(--fg); border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem}
.brandmark{display:flex; align-items:center; gap:.7rem; font-family:'Fraunces'; font-weight:600; font-size:1.12rem; letter-spacing:-.01em}
.brandmark .bm-ico{width:38px; height:38px; flex:none}
.nav-links{display:flex; align-items:center; gap:.35rem}
.nav-links a{position:relative; padding:.5rem .8rem; border-radius:8px; font-weight:600; font-size:.96rem; transition:color .25s}
.nav-links a::after{content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex; align-items:center; gap:.5rem}
.dropdown{position:relative}
.dropdown-panel{position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:.5rem; min-width:248px; opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease)}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dropdown-panel a{display:flex; gap:.65rem; align-items:center; padding:.62rem .7rem; border-radius:9px; font-size:.94rem; font-weight:600; color:var(--fg)}
.dropdown-panel a::after{display:none}
.dropdown-panel a:hover{background:var(--surface-2); color:var(--brand-2)}
.dropdown-panel svg{color:var(--accent); flex:none}
.icon-btn{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:999px; cursor:pointer;
  background:transparent; border:1.5px solid currentColor; opacity:.85; transition:opacity .25s, transform .35s var(--ease); color:inherit}
.icon-btn:hover{opacity:1; transform:translateY(-1px)}
.burger{display:none}

.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%, #14564e 0%, #0F4C45 42%, #0a3a35 100%); color:#F4EFE4}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; width:100%; padding-block:8rem 4rem}
.hero h1{color:#FBF7EE}
.hero .lead{color:#D8E4DC}
.hero-meta{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.2rem; font-size:.95rem; color:#C7D6CD}
.hero-meta a{display:inline-flex; gap:.5rem; align-items:center; font-weight:600}
.hero-meta svg{color:var(--accent-soft)}
.hero-art{position:relative}
.hero-stage{position:relative; width:100%; max-width:480px; margin-inline:auto; aspect-ratio:1/1.06}

/* sub-page hero (compact) */
.subhero{position:relative; overflow:hidden; padding-top:calc(var(--header-h) + 3.5rem); padding-bottom:3.5rem;
  background:radial-gradient(120% 120% at 85% 0%, #14564e 0%, #0F4C45 48%, #0a3a35 100%); color:#F4EFE4}
.subhero .crumb{font-size:.85rem; color:#9fc1b6; margin-bottom:1rem}
.subhero .crumb a{color:#bfd6cd}
.subhero h1{color:#FBF7EE; font-size:clamp(2rem,5vw,3.4rem); max-width:18ch}
.subhero p{color:#D8E4DC; max-width:46ch; margin-top:1rem; font-size:clamp(1rem,1.6vw,1.15rem)}
.subhero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center}

section{position:relative}
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec-sm{padding-block:clamp(3rem,6vw,5rem)}
.sec-head{max-width:680px; margin-bottom:3rem}
.sec-head .h2{margin-top:.7rem}
.sec-head p{margin-top:1rem; color:var(--muted); font-size:clamp(1rem,1.5vw,1.12rem)}

.bow{display:block; width:140px; height:26px; color:var(--accent)}

.values{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.value{display:flex; gap:1rem; align-items:flex-start; padding:1.4rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)}
.value .vi{width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--surface-2); color:var(--brand-2)}
html.dark .value .vi{color:var(--sage)}
.value h3{font-size:1.1rem; margin-bottom:.3rem}
.value p{font-size:.95rem; color:var(--muted)}

.photo{position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#0F4C45,#2E7D6E 55%,#C28B4C); box-shadow:var(--shadow)}
.photo::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(255,255,255,.18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cpath d='M30 70 Q120 130 210 70' fill='none' stroke='%23F6F2EA' stroke-opacity='.35' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/60% no-repeat}
.photo img{position:relative; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), opacity .6s}
.photo:hover img{transform:scale(1.05)}

.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; grid-auto-rows:minmax(170px,auto)}
.card{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.6rem; overflow:hidden; transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s}
.card:hover{box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 50%, var(--border)); transform:translateY(-4px)}
.card .ci{width:50px; height:50px; display:grid; place-items:center; border-radius:13px; background:var(--surface-2); color:var(--brand-2); margin-bottom:1rem}
html.dark .card .ci{color:var(--sage)}
.card h3{font-size:1.25rem; margin-bottom:.45rem}
.card p{color:var(--muted); font-size:.96rem}
.card .more{margin-top:auto; padding-top:1.1rem; color:var(--brand-2); font-weight:700; font-size:.92rem; display:inline-flex; gap:.4rem; align-items:center}
html.dark .card .more{color:var(--sage)}
.card .more svg{transition:transform .35s var(--ease)}
.card:hover .more svg{transform:translateX(4px)}
.card.feat{grid-column:span 3; grid-row:span 2}
.card.wide{grid-column:span 3}
.card.third{grid-column:span 2}
.card .feat-photo{position:absolute; inset:auto -10% -30% auto; width:62%; aspect-ratio:1; opacity:.9; pointer-events:none}

.proc-wrap{position:relative}
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; z-index:1}
.proc.three{grid-template-columns:repeat(3,1fr)}
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; height:100%; display:flex; flex-direction:column}
.step .num{font-family:'Fraunces'; font-size:1.05rem; font-weight:700; color:#fff; background:var(--brand); width:40px; height:40px; border-radius:999px; display:grid; place-items:center; margin-bottom:1rem}
html.dark .step .num{color:#0b1c18}
.step h3{font-size:1.12rem; margin-bottom:.35rem}
.step p{color:var(--muted); font-size:.93rem}
.proc-line{position:absolute; left:0; right:0; top:54px; height:2px; z-index:0}

.ba{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; box-shadow:var(--shadow); background:#0F4C45}
.ba .ba-after, .ba .ba-before{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba .ba-after{clip-path:inset(0 50% 0 0)}
.ba-label{position:absolute; top:1rem; padding:.3rem .8rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.06em; background:rgba(15,35,31,.6); color:#F6F2EA; backdrop-filter:blur(4px)}

.team{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem}
.team.three{grid-template-columns:repeat(3,1fr)}
.doc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column}
.doc .photo{border-radius:0; aspect-ratio:4/3}
.doc-body{padding:1.6rem}
.doc-body h3{font-size:1.3rem}
.doc-body .role{color:var(--accent); font-weight:700; font-size:.9rem; margin:.25rem 0 .7rem}
.doc-body p{color:var(--muted); font-size:.96rem}

.praxis-cta{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:440px; display:flex; align-items:flex-end; box-shadow:var(--shadow-lg)}
.praxis-cta .photo{position:absolute; inset:0; border-radius:0}
.praxis-cta .scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,30,27,.86) 0%, rgba(8,30,27,.25) 60%, rgba(8,30,27,.4) 100%)}
.praxis-cta .pc-body{position:relative; padding:2.5rem; color:#F6F2EA; max-width:640px}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.gallery .photo{aspect-ratio:4/3}
.gallery .photo.tall{grid-row:span 2; aspect-ratio:auto}

.calm{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,3rem)}
.breath-stage{position:relative; aspect-ratio:1; max-width:330px; margin-inline:auto; width:100%}

.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem}
.hours{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem}
.hours table{width:100%; border-collapse:collapse}
.hours td{padding:.6rem 0; border-bottom:1px dashed var(--border); font-size:.97rem}
.hours td:last-child{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.hours tr:last-child td{border-bottom:none}
.map-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); min-height:320px; display:flex}
.map-card iframe{border:0; width:100%; height:100%; min-height:320px; filter:saturate(.9)}

/* FAQ accordion */
.faq{max-width:780px; margin-inline:auto}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.9rem; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:1.2rem 1.4rem; font-family:'Fraunces'; font-weight:600; font-size:1.08rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:22px; height:22px; position:relative; transition:transform .35s var(--ease)}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.faq summary .pm::before{left:0; right:0; top:10px; height:2px}
.faq summary .pm::after{top:0; bottom:0; left:10px; width:2px; transition:opacity .3s}
.faq details[open] summary .pm::after{opacity:0}
.faq details[open] summary .pm{transform:rotate(180deg)}
.faq .faq-body{padding:0 1.4rem 1.3rem; color:var(--muted); font-size:1rem}

/* contact form */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.5rem)}
.field{margin-bottom:1.1rem}
.field label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%; padding:.85rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--fg); font-family:'Mulish'; font-size:1rem; transition:border-color .25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--brand-2)}
.field textarea{min-height:130px; resize:vertical}
.check{display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--muted)}
.check input{width:auto; margin-top:.2rem}
.form-note{font-size:.85rem; color:var(--muted); margin-top:.6rem}

.cta-band{position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(2.5rem,6vw,4.5rem);
  background:radial-gradient(120% 140% at 10% 0%, #14564e, #0F4C45 60%, #0a3a35); color:#F6F2EA; text-align:center}
.cta-band h2{color:#FBF7EE}
.cta-band .btns{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem}

footer.site{background:#0c1f1b; color:#cdd9d2; padding-block:4rem 2rem; margin-top:5rem}
html.dark footer.site{background:#0a1814}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem}
footer.site h4{font-family:'Mulish'; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:#88a297; margin-bottom:1.1rem}
footer.site a{color:#cdd9d2; font-size:.95rem; display:block; padding:.28rem 0; transition:color .25s}
footer.site a:hover{color:var(--accent-soft)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.86rem; color:#7f968c}
.foot-bottom a{display:inline; color:#7f968c}
.foot-bottom span{white-space:nowrap}
.foot-bottom span:first-child{white-space:normal}
.foot-bottom a:hover{color:var(--accent-soft)}

canvas.bg{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5}
.aurora{position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:.5; filter:blur(60px);
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(167,192,181,.4), transparent 60%),
    radial-gradient(35% 35% at 80% 20%, rgba(194,139,76,.22), transparent 60%),
    radial-gradient(45% 45% at 60% 80%, rgba(46,125,110,.3), transparent 60%);
  animation:drift 22s ease-in-out infinite}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-3%,0) scale(1.05)}100%{transform:translate3d(0,0,0) scale(1)}}
@media (prefers-reduced-motion: reduce){ .aurora{animation:none} }
main, .site-header, footer.site{position:relative; z-index:1}
.hero canvas.bg, .subhero canvas.bg{position:absolute; opacity:.6}

#preloader{position:fixed; inset:0; z-index:200; background:#0F4C45; display:grid; place-items:center}
#preloader .pl-mark{width:min(60vw,260px); color:#F6F2EA}
#preloader .pl-bow{color:var(--accent-soft)}

.skip{position:absolute; left:-999px; top:0; z-index:300; background:var(--accent); color:#231406; padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:700}
.skip:focus{left:0}

.no-anim [data-reveal] > *, .no-anim [data-split] .char, .no-anim [data-depth], .no-anim [data-draw] path{opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important}
.no-js [data-reveal] > *, .no-js [data-split] .char{opacity:1 !important}
[data-tilt]{transform-style:preserve-3d}
[data-spin],[data-grow]{transform-box:fill-box; transform-origin:50% 50%}

.mobile-menu{position:fixed; inset:0; z-index:90; background:var(--bg); transform:translateY(-100%);
  transition:transform .5s var(--ease); display:flex; flex-direction:column; padding:6rem 1.5rem 2rem; overflow-y:auto}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:'Fraunces'; font-size:1.5rem; padding:.7rem 0; border-bottom:1px solid var(--border); color:var(--fg)}
.mobile-menu .mm-sub a{font-family:'Mulish'; font-size:1.05rem; color:var(--muted); border:none; padding:.4rem 0 .4rem 1rem}
.mm-close{position:fixed; top:1.1rem; right:1.1rem; z-index:95}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:2rem; padding-block:7rem 3rem}
  .hero-art{order:-1; max-width:360px; margin-inline:auto}
  .subhero-grid{grid-template-columns:1fr; gap:1.6rem}
  .subhero-grid .hero-art{max-width:320px}
  .values{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card.feat{grid-column:span 2; grid-row:auto}
  .card.wide,.card.third{grid-column:span 1; grid-row:auto}
  .proc, .proc.three{grid-template-columns:repeat(2,1fr)}
  .proc-line{display:none}
  .team, .team.three{grid-template-columns:1fr}
  .calm{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .photo.tall{grid-row:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .split-2{grid-template-columns:1fr !important}
}
@media (max-width:560px){
  .nav-links{display:none}
  .burger{display:inline-grid}
  .nav-cta .btn{display:none}
  .bento{grid-template-columns:1fr}
  .card.feat,.card.wide,.card.third{grid-column:span 1}
  .proc, .proc.three{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-meta{gap:.9rem}
}

/* shared layout helpers */
.split-2{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.split-asym{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.tick{display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.8rem; color:var(--muted)}
.tick svg{flex:none; color:var(--brand-2); margin-top:.15rem}
html.dark .tick svg{color:var(--sage)}


/* ---- responsive grid utilities (ersetzen inline repeat(...)) ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.grid-3>.card,.grid-2>.card,.grid-6>.card{grid-column:auto;grid-row:auto}
@media(max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-6{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   HERO „Diagnostik-Orb" — komplett neuer Kopfbereich (grün bleibt)
   ============================================================ */
.hero{isolation:isolate}
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none}
.hero-bg .hero-blob{position:absolute; border-radius:50%; filter:blur(64px); opacity:.55; mix-blend-mode:screen; will-change:transform}
.hero-bg .b1{width:48%; aspect-ratio:1; left:-8%; top:-12%; background:radial-gradient(circle,#2E7D6E,transparent 70%); animation:floatA 19s ease-in-out infinite}
.hero-bg .b2{width:42%; aspect-ratio:1; right:-10%; top:14%; background:radial-gradient(circle,#1f7064,transparent 70%); animation:floatB 24s ease-in-out infinite}
.hero-bg .b3{width:36%; aspect-ratio:1; left:26%; bottom:-16%; background:radial-gradient(circle,rgba(194,139,76,.55),transparent 70%); animation:floatA 28s ease-in-out infinite reverse}
.hero-waves{position:absolute; inset:0; width:100%; height:100%; opacity:.45}
.hero-waves path{fill:none; stroke-width:1.5; will-change:transform}
.hero-waves .w1{stroke:rgba(167,192,181,.55); animation:waveX 20s linear infinite}
.hero-waves .w2{stroke:rgba(231,201,160,.40); animation:waveX 30s linear infinite}
.hero-waves .w3{stroke:rgba(255,255,255,.18); animation:waveX 40s linear infinite}
.hero-gridlines{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask:radial-gradient(circle at 72% 42%,#000,transparent 72%); mask:radial-gradient(circle at 72% 42%,#000,transparent 72%)}
.hero .wrap{position:relative; z-index:2}
.hero-sweep{position:absolute; top:0; bottom:0; left:0; width:45%; z-index:3; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent); transform:skewX(-12deg); opacity:0}

/* Orb */
.orb-stage{position:relative; width:min(440px,94%); aspect-ratio:1; margin-inline:auto; will-change:transform}
.orb-glow{position:absolute; inset:5%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(167,192,181,.55), rgba(46,125,110,.22) 46%, transparent 72%);
  filter:blur(9px); animation:orbBreathe 6.5s ease-in-out infinite}
.orb-glow::after{content:""; position:absolute; inset:18%; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%); animation:orbBreathe 4.5s ease-in-out infinite reverse}
.orb-rings{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.orb-core{position:absolute; inset:18%; z-index:2; display:grid; place-items:center}
.orb-core svg{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 14px 30px rgba(0,0,0,.35))}

/* real-smile lens */
.hero-photo{position:absolute; right:-2%; bottom:2%; width:34%; max-width:160px; aspect-ratio:1; margin:0; z-index:4;
  border-radius:50%; overflow:hidden; border:4px solid rgba(246,242,234,.92); box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg,#0F4C45,#2E7D6E)}
.hero-photo img{width:100%; height:100%; object-fit:cover}
.photo-ring{position:absolute; right:-2%; bottom:2%; width:34%; max-width:160px; aspect-ratio:1; z-index:3; pointer-events:none;
  transform:scale(1.28); transform-origin:center}
@media(max-width:980px){
  .hero-photo,.photo-ring{right:0; bottom:-6%; width:30%; max-width:130px}
}
@media(max-width:560px){ .hero-photo,.photo-ring{display:none} }

.scroll-hint{position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3; color:rgba(246,242,234,.7);
  display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase}
.scroll-hint .mouse{width:22px; height:36px; border:1.5px solid rgba(246,242,234,.5); border-radius:12px; position:relative}
.scroll-hint .mouse::after{content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:2px; background:var(--accent-soft); transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite}
@media(max-width:560px){ .scroll-hint{display:none} }

@keyframes floatA{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(6%,8%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes floatB{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7%,5%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes waveX{from{transform:translateX(0)}to{transform:translateX(-360px)}}
@keyframes orbBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
@media (prefers-reduced-motion: reduce){
  .hero-blob,.hero-waves path,.orb-glow,.orb-glow::after,.hero-sweep,.scroll-hint .mouse::after{animation:none !important}
}