html{color-scheme:light only;scroll-behavior:smooth}
html,body,input,button{forced-color-adjust:none}
:root{
color-scheme:light only;
--ink:#6C2803;
--body:#54453A;
--mute:#7A6250;
--orange:#A94E0C; /* die einzige Markenfarbe der Seite */
/* Aufhellung fuer dunkle Flaechen - identischer Farbton, nur heller */
--orange-lt:#DA9A6C; /* dieselbe Farbe, fuer dunkle Flaechen aufgehellt */
--red:#7B2118;
--red-d:#5A1710;
--green:#2D3D26;
--green-mid:#495E3E;
--green-soft:#C2D1BA;
--greige:#FAF5EC; /* warmes Elfenbein - Grundton der Marke */
--greige-lt:#FFFCF6;
--paper:#FFFCF7;
--sand:#F2E9DB;
--tint:#F6EBDD;
--line:rgba(108,40,3,.16);
--peach:#DEDBD2;
--white:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;
background:var(--greige);color:var(--body);font-size:17px;line-height:1.65;
-webkit-font-smoothing:antialiased;overflow-x:hidden;scrollbar-gutter:stable}
button,a{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{width:100%;padding:0 clamp(20px,4.2vw,80px)}
h1,h2,h3{font-family:'Aboreto',Georgia,serif;font-weight:400;color:var(--ink);
text-transform:uppercase;letter-spacing:.035em;line-height:1.16}
h1{font-size:clamp(32px,6.6vw,60px)}
h2{font-size:clamp(26px,5.2vw,40px)}
h3{font-size:clamp(18px,3.4vw,23px);letter-spacing:.025em}
p{max-width:64ch}
section{padding:104px 0}
.eyebrow{font-size:12px;font-weight:400;color:var(--ink);letter-spacing:.26em;
text-transform:uppercase;display:flex;align-items:center;gap:11px;justify-content:center}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:none;
border-radius:2px}
.head .eyebrow,.center .eyebrow{justify-content:center}
.dtxt .kicker,.pkg .tag,.jbody .tag{color:var(--orange)}
.lead{font-size:clamp(17px,3.6vw,20px);color:var(--body);margin-top:15px;line-height:1.55}
.center{text-align:center;max-width:740px;margin:0 auto 52px}
.center p{margin-left:auto;margin-right:auto}
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
margin:0 auto 48px;max-width:780px}
.head p{font-size:17px;margin:14px auto 0;line-height:1.55}
.head h2,.head h3{margin-top:12px}
.rv{opacity:0;transform:translateY(24px);
transition:opacity .75s cubic-bezier(.33,1,.68,1),transform .75s cubic-bezier(.33,1,.68,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
.rv{opacity:1;transform:none}}
/* buttons */
.btn{background:var(--orange);color:#fff;border:none;border-radius:999px;
padding:13px 24px;font-size:12.5px;font-weight:500;letter-spacing:.11em;
text-transform:uppercase;transition:.2s;white-space:nowrap;display:inline-block}
.btn:hover{filter:brightness(.88)}
.btn.lg{padding:16px 32px;font-size:13px}
.btn.line{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.btn.line:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.btn.line:hover{border-color:var(--orange);color:var(--orange)}
.btn.green{background:var(--green)}
.btn.green:hover{background:var(--green-mid)}
.btn.white{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
/* nav */
nav.top{position:fixed;top:0;left:0;right:0;z-index:70;padding:14px 0;transition:.3s;
background:rgba(250,245,236,.93);backdrop-filter:saturate(180%) blur(16px);
border-bottom:1px solid var(--line)}
nav.top.solid{box-shadow:0 2px 18px rgba(108,40,3,.07)}
.nav-in{display:flex;align-items:center;gap:22px}
.logo{font-family:'Aboreto',Georgia,serif;font-size:21px;letter-spacing:.24em;
color:var(--ink);padding-left:.24em;flex:none}
.logo small{display:block;font-size:8.5px;letter-spacing:.34em;padding-left:.34em;
margin-top:3px;color:var(--mute)}
.nav-links{display:none;gap:24px;margin-left:8px}
.nav-links a{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--body)}
.nav-links a:hover{color:var(--orange)}
nav.top .btn{margin-left:auto}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;
background:var(--orange);transition:width .1s linear}
/* hero */
.hero{position:relative;min-height:0;display:flex;align-items:center;
padding:150px 0 84px;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
background:url('https://framerusercontent.com/images/hFd3W8A3GVpYtD7vFCTf00oqmM.jpg') center 38%/cover,
linear-gradient(150deg,#EFEDE6,#C2D1BA)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(40,26,14,.34),rgba(40,26,14,.2) 40%,rgba(40,26,14,.52))}
.hero-grid{display:block;max-width:900px;margin:0 auto}
.hero .eyebrow{color:#DEDBD2}
.hero h1{color:#fff;max-width:16ch;margin:14px auto 0;font-size:clamp(30px,4.8vw,52px);
text-shadow:0 2px 24px rgba(35,22,12,.35)}
.hero .claim{font-size:clamp(16px,2.6vw,19px);color:rgba(255,255,255,.94);margin:18px auto 0;
max-width:46ch;line-height:1.5}
.hero-cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.hero .eyebrow{color:#F2E4D6;justify-content:center}
.hero .eyebrow::before{background:var(--orange);width:34px}
.hero h1::after{background:var(--orange);width:56px;margin-top:24px}
.hero .badge{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.92);
background:rgba(255,255,255,.1);backdrop-filter:blur(6px);margin-top:22px}
.hero .badge b{color:#fff}
.hero .stars{color:#DEDBD2}
.badge{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px}
.badge b{font-weight:500;color:var(--ink)}
.stars{color:var(--orange);letter-spacing:.1em}
@keyframes drift{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1.03) rotate(-2deg)}}
/* topic cards */
.tgrid{display:grid;grid-template-columns:1fr;gap:12px}
.tcard{border:1px solid var(--line);border-radius:20px;padding:22px 20px;background:transparent;
transition:.25s;display:block}
.tcard:hover{border-color:var(--orange);transform:translateY(-4px);background:rgba(255,252,247,.75)}
.tcard h3{font-size:17px;letter-spacing:.03em}
.tcard p{font-size:14.5px;margin-top:9px;line-height:1.5}
.tcard .more{display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange)}
.tcard .more::after{content:" →"}
/* list chips */
.lchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.lchip{border:1px solid var(--line);border-radius:999px;padding:10px 17px;font-size:13.5px;
color:var(--body);background:transparent;transition:.2s;display:inline-block}
.lchip:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,252,247,.8)}
/* package cards */
.pkgs{display:grid;grid-template-columns:1fr;gap:14px}
.pkg{border:1px solid var(--line);border-radius:22px;padding:24px 22px;background:transparent;
display:flex;flex-direction:column;transition:.25s}
.pkg:hover{border-color:var(--orange);transform:translateY(-4px);background:rgba(255,252,247,.75)}
.pkg .tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.pkg h3{margin-top:9px;font-size:19px}
.pkg p{font-size:14.5px;margin-top:10px;flex:1;line-height:1.5}
.pkg .pr{margin-top:16px;font-size:15px;color:var(--ink)}
.pkg .btn{margin-top:16px;align-self:flex-start}
/* rails */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
margin-left:calc(-1*clamp(20px,4.2vw,80px));margin-right:calc(-1*clamp(20px,4.2vw,80px));
padding:0 clamp(20px,4.2vw,80px) 10px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none}
.arrows{display:none;gap:10px;justify-content:flex-end;margin-top:18px}
.arw{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;
display:grid;place-items:center;color:var(--ink);font-size:17px;transition:.2s}
.arw:hover{border-color:var(--orange);color:var(--orange)}
/* infusion card */
.icard{width:258px;border-radius:22px;padding:22px 20px 20px;position:relative;
display:flex;flex-direction:column;min-height:286px;transition:.3s}
.icard:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(108,40,3,.12)}
.icard .ghost{position:absolute;right:12px;top:-14px;font-size:92px;line-height:1;
color:rgba(255,255,255,.34);letter-spacing:-.06em;pointer-events:none;
font-family:'Aboreto',Georgia,serif}
.icard .cat{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:rgba(108,40,3,.6);position:relative;z-index:1}
.icard .ing,.icard .nm,.icard .tg,.icard .pr{position:relative;z-index:1}
.icard .ing{font-size:12.5px;color:rgba(108,40,3,.72);margin-top:auto;line-height:1.5}
.icard .nm{font-family:'Aboreto',Georgia,serif;font-size:20px;color:var(--ink);margin-top:8px;
text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.icard .tg{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.icard .tg span{font-size:11px;background:rgba(255,252,247,.8);border-radius:999px;
padding:4px 10px;color:rgba(108,40,3,.75)}
.icard .pr{margin-top:14px;font-size:16px;color:var(--ink)}
.icard.dark .cat{color:rgba(255,255,255,.75)}
.icard.dark .ing{color:rgba(255,255,255,.85)}
.icard.dark .nm,.icard.dark .pr{color:#fff}
.icard.dark .tg span{background:rgba(255,255,255,.2);color:#fff}
.icard.dark .ghost{color:rgba(255,255,255,.2)}
.note{background:rgba(169,78,12,.07);border:1px solid rgba(169,78,12,.32);color:var(--red);font-size:13.5px;
line-height:1.55;padding:14px 17px;border-radius:14px;margin-top:18px}
.note b{font-weight:500}
/* feature blocks */
.feats{display:grid;gap:14px}
.feat{border-radius:26px;padding:32px 24px;min-height:300px;display:flex;flex-direction:column;
justify-content:flex-end;position:relative;overflow:hidden;background-size:cover;
background-position:center;background-color:var(--sand)}
.feat::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(45,25,10,.05) 26%,rgba(45,25,10,.62) 70%,rgba(45,25,10,.86) 100%)}
.feat>*{position:relative;z-index:1}
.feat h3,.feat .pr{color:#fff}
.feat p{color:rgba(255,255,255,.92);font-size:15px;margin-top:10px;max-width:34ch}
.feat .eyebrow{color:var(--peach)}
.feat .btn{margin-top:20px;align-self:flex-start}
/* detail rows */
.detail{display:grid;gap:24px;padding:48px 0;border-top:1px solid var(--line)}
.detail:first-of-type{border-top:none}
.dart{border-radius:24px;min-height:280px;background-size:cover;background-position:center;
background-color:var(--sand);position:relative;overflow:hidden}
.dart span{position:absolute;left:18px;bottom:18px;background:rgba(242,241,236,.94);
border-radius:999px;padding:8px 15px;font-size:12.5px;color:var(--ink)}
.dtxt .kicker{font-size:12.5px;font-weight:500;color:var(--orange);letter-spacing:.14em;
text-transform:uppercase}
.dtxt h3{margin-top:9px}
.dsum{font-size:17px;color:var(--ink);margin-top:12px;max-width:52ch;line-height:1.5}
.dlist{list-style:none;margin-top:20px;display:grid;gap:0}
.dlist li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:15.5px;line-height:1.5}
.dlist li svg{flex:none;margin-top:5px}
.dfoot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.dprice{font-size:16.5px;color:var(--ink)}
.dprice small{display:block;font-size:13.5px;color:var(--mute);margin-top:3px}
/* prices */
.ptable{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:transparent}
.pgroup{border-top:1px solid var(--line)}
.pgroup:first-child{border-top:none}
.pgroup > summary{list-style:none;padding:20px 24px;display:flex;align-items:center;gap:16px;
font-family:'Aboreto',Georgia,serif;font-size:16px;text-transform:uppercase;
letter-spacing:.08em;color:var(--ink);background:transparent}
.pgroup > summary::-webkit-details-marker{display:none}
.pgroup > summary i{margin-left:auto;font-style:normal;font-size:20px;color:var(--orange);
transition:.25s;flex:none}
.pgroup[open] > summary i{transform:rotate(45deg)}
.prow{display:flex;gap:18px;align-items:baseline;padding:14px 24px;
border-top:1px solid rgba(108,40,3,.13);font-size:15.5px}
.prow .nm{flex:1}
.prow .nm small{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.prow .amt{color:var(--ink);white-space:nowrap}
/* steps */
.step{width:280px}
.step .img{height:196px;border-radius:20px;margin-bottom:14px;background-size:cover;
background-position:center;background-color:var(--sand)}
.step .lbl{font-size:13.5px;font-weight:500;color:var(--orange)}
.step h3{font-size:20px;margin-top:6px}
.step p{font-size:15px;margin-top:9px;line-height:1.55}
/* team */
.crew{display:grid;grid-template-columns:1fr;gap:22px;margin-top:44px}
.pcard{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:transparent;
display:grid;grid-template-columns:1fr;transition:.25s;align-content:start}
.pcard:hover{border-color:var(--orange)}
.pimg{aspect-ratio:4/5;background-size:cover;background-position:center 18%;background-color:var(--sand)}
.pbody{padding:24px 24px 26px;display:flex;flex-direction:column}
.pbody b{font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:19px;color:var(--ink);
text-transform:uppercase;letter-spacing:.03em;display:block;line-height:1.25}
.prole{display:block;font-size:11.5px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange);margin-top:7px}
.pfield{display:block;font-size:14px;color:var(--ink);margin-top:12px}
.pbio{display:block;font-size:14.5px;line-height:1.6;margin-top:11px;flex:1}
.pqual{display:block;font-size:13px;color:var(--mute);line-height:1.55;margin-top:16px;
padding-top:14px;border-top:1px solid var(--line)}
.pimg.ph-empty{display:grid;place-items:center;background:linear-gradient(155deg,#E4E2DA,#E3D5C2);
position:relative}
.pimg.ph-empty span{font-family:'Aboreto',Georgia,serif;font-size:38px;color:rgba(108,40,3,.5);
letter-spacing:.08em}
.pimg.ph-empty em{position:absolute;left:12px;right:12px;bottom:12px;font-style:normal;
background:rgba(242,241,236,.93);border-radius:10px;padding:7px 10px;font-family:'Jost',sans-serif;
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:center}
.pcard.founder{border-color:var(--orange)}
.pcard.lead-doc .pimg.ph-empty{background:linear-gradient(155deg,#EFEDE6,#E5D8C6)}
.dart.phonebox{display:grid;place-items:center;background:transparent;overflow:hidden;
position:relative;padding:30px 0;min-height:520px}
.dart.phonebox .glow{position:absolute;inset:-14%;opacity:.5;
background:radial-gradient(42% 40% at 26% 30%,#E8E5DC 0,transparent 64%),
radial-gradient(38% 36% at 76% 26%,#DEDBD2 0,transparent 62%),
radial-gradient(48% 44% at 62% 80%,#C2D1BA 0,transparent 66%),#E4E2DA;
filter:blur(26px);animation:drift 32s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1.03) rotate(-2deg)}}
/* ══ Orange als durchgehende Handschrift ══ */
::selection{background:var(--orange);color:#fff}
.eyebrow::before{width:34px;height:1.5px}
.head h2::after,.center h2::after,.band h2::after{content:"";display:block;width:44px;
height:2px;background:var(--orange);margin:20px auto 0;border-radius:2px}
.tcard{position:relative}
.tcard::before{content:"";position:absolute;left:20px;top:0;width:0;height:2px;
background:var(--orange);transition:width .35s cubic-bezier(.33,1,.68,1)}
.tcard:hover::before{width:calc(100% - 40px)}
.pkg .tag{display:inline-flex;align-items:center;gap:8px}
.pkg .tag::before{content:"";width:14px;height:1.5px;background:var(--orange);flex:none}
.dlist li svg path{stroke:var(--orange)}
.prow:hover{background:rgba(255,252,247,.72)}
.prow .amt{color:var(--orange)}
.pgroup[open] > summary{color:var(--orange)}
.stat:first-child b,.stat:nth-child(3) b{color:var(--orange)}
.step .lbl{display:inline-flex;align-items:center;gap:9px}
.step .lbl::before{content:"";width:18px;height:1.5px;background:var(--orange);flex:none}
.pcard.founder,.pcard.lead-doc{position:relative}
.pcard.founder::after,.pcard.lead-doc::after{content:"";position:absolute;left:0;top:0;bottom:0;
width:3px;background:var(--orange)}
.qt{border-left:2px solid var(--orange);padding-left:20px}
.badge .stars{color:var(--orange)}
.faq[open] summary{color:var(--orange)}
.jcard:hover .jbody h3{color:var(--orange)}
.mnav a:hover{color:var(--orange-lt)}
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
background:var(--orange);transition:right .3s}
.nav-links a:hover::after{right:0}
.wafloat{background:var(--orange);box-shadow:0 10px 26px rgba(169,78,12,.34)}
.wafloat:hover{background:var(--orange);filter:brightness(.88)}
.mbar .wa{background:var(--orange)}
footer{border-top:3px solid var(--orange)}
.fmark small{color:var(--orange-lt)}
.imprint h4{color:var(--orange-lt)}
.band{background:linear-gradient(150deg,#3B4E31 0,#2D3D26 55%,#1E2A19 100%)}
.band::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:80px;height:3px;background:var(--orange);z-index:2}
/* stats + quote */
.stats{border:1px solid var(--line);border-radius:24px;display:grid;grid-template-columns:1fr 1fr;
overflow:hidden;background:transparent}
.stat{padding:26px 18px;text-align:center;border-bottom:1px solid var(--line)}
.stat:nth-child(odd){border-right:1px solid var(--line)}
.stat:nth-last-child(-n+2){border-bottom:none}
.stat b{font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:40px;color:var(--ink);
display:block;line-height:1}
.stat span{font-size:14px;color:var(--mute);margin-top:7px;display:block}
.quote{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qt{font-size:clamp(19px,4.2vw,26px);color:var(--ink);line-height:1.4;max-width:28ch;
transition:opacity .45s}
.qm{margin-top:14px;font-size:14px;color:var(--mute);transition:opacity .45s}
.qbox.fade .qt,.qbox.fade .qm{opacity:0}
.dots{display:flex;gap:7px;margin-top:22px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;padding:0;transition:.3s}
.dot.on{background:var(--orange);width:24px;border-radius:99px}
/* journal */
.jgrid{display:grid;gap:16px}
.jcard{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:transparent;transition:.25s}
.jcard:hover{border-color:var(--orange);transform:translateY(-4px)}
.jimg{height:180px;background:linear-gradient(150deg,#E5D8C6,#C2A98C);position:relative}
.jimg img{width:100%;height:100%;object-fit:cover;display:block}
.jdate{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute)}
.jbody{padding:20px 22px 24px}
.jbody .tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.jbody h3{font-size:18px;margin-top:9px}
/* faq */
.faq{border:1px solid var(--line);border-radius:18px;margin-bottom:10px;overflow:hidden;
transition:.2s;background:transparent}
.faq[open]{border-color:var(--orange);background:rgba(255,252,247,.8)}
.faq summary{list-style:none;padding:20px 22px;display:flex;align-items:center;gap:16px;
font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{margin-left:auto;font-style:normal;font-size:21px;color:var(--orange);
transition:.25s;flex:none}
.faq[open] summary i{transform:rotate(45deg)}
.faq .ans{padding:0 22px 22px;font-size:16px;line-height:1.6}
/* band + footer */
.tintsec{background:transparent}
.band{background:linear-gradient(150deg,#3B4E31 0,#2D3D26 55%,#1E2A19 100%);border-radius:28px;
padding:56px 26px;text-align:center;color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:-30%;pointer-events:none;
background:radial-gradient(38% 40% at 22% 22%,rgba(194,209,186,.22),transparent 62%),
radial-gradient(42% 44% at 82% 78%,rgba(252,126,32,.18),transparent 64%)}
.band>*{position:relative;z-index:1}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.85);margin:14px auto 0;font-size:16px}
footer{background:var(--green);color:#E4E2DA;border-radius:64px 64px 0 0;padding:64px 0 44px;
margin-top:80px}
footer a{color:#E4E2DA}
footer a:hover{color:var(--orange)}
.fgrid{display:grid;gap:30px;margin-top:26px}
.fgrid h4{font-family:'Aboreto',Georgia,serif;font-size:13px;text-transform:uppercase;
letter-spacing:.13em;margin-bottom:14px;opacity:.75}
.fgrid a{display:block;font-family:'Aboreto',Georgia,serif;font-size:14px;margin-bottom:11px;
text-transform:uppercase;letter-spacing:.07em;opacity:.9}
.fgrid p{font-size:15px;margin-bottom:9px;opacity:.9}
.imprint{border-top:1px solid rgba(243,237,228,.22);margin-top:44px;padding-top:32px;
display:grid;gap:26px;font-size:14.5px;color:rgba(243,237,228,.82)}
.imprint h4{font-family:'Aboreto',Georgia,serif;font-size:12px;letter-spacing:.15em;
text-transform:uppercase;color:#BCAA95;margin-bottom:12px}
.imprint p,.imprint a{line-height:1.75;display:block}
.fbot{margin-top:52px;padding-top:34px;border-top:1px solid rgba(243,237,228,.18);text-align:center}
.fmark{font-family:'Aboreto',Georgia,serif;font-size:clamp(52px,11vw,104px);color:#E4E2DA;
letter-spacing:.14em;padding-left:.14em;line-height:1;display:block}
.fmark small{display:block;font-size:.2em;letter-spacing:.4em;padding-left:.4em;margin-top:10px}
.fcopy{display:block;margin-top:16px;font-size:clamp(15px,2.4vw,19px);color:#BCAA95}
.fcopy a{color:#BCAA95}
.stage{position:relative;z-index:2;width:246px;display:flex;justify-content:center}
.phone{position:relative;width:246px;background:var(--paper);border:8px solid #2D1A0C;border-radius:38px;
box-shadow:0 22px 50px rgba(108,40,3,.22);overflow:hidden;z-index:2;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:64px;height:17px;
background:#2D1A0C;border-radius:99px;z-index:5}
.ph-in{padding:32px 16px 16px;min-height:456px;position:relative;display:flex;flex-direction:column}
.ph-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding:0 2px}
.ph-top b{font-size:12.5px;color:var(--ink);font-weight:500}
.ph-top span{font-size:10px;color:var(--mute)}
.panels{position:relative;flex:1}
.panel{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .55s,transform .55s;
pointer-events:none;display:flex;flex-direction:column}
.panel.on{opacity:1;transform:none;pointer-events:auto}
.ringwrap{position:relative;width:150px;height:150px;margin:8px auto 0}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .bg{stroke:#E4E2DA;stroke-width:11}
.ring .fg{stroke:url(#gr);stroke-width:11;stroke-dasharray:352;stroke-dashoffset:352;
transition:stroke-dashoffset 1.9s cubic-bezier(.22,1,.36,1)}
.ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;gap:4px}
.ringtxt b{font-family:'Aboreto',Georgia,serif;font-size:36px;font-weight:400;color:var(--ink);line-height:1}
.ringtxt span{font-size:9px;color:var(--mute);letter-spacing:.05em;text-transform:uppercase;
max-width:12ch;line-height:1.25}
.younger{margin:16px auto 0;background:#E6EDE2;color:#2D3D26;border-radius:999px;padding:7px 14px;
font-size:11.5px;width:max-content;opacity:0;transform:scale(.85);transition:.5s .9s}
.younger.on{opacity:1;transform:none}
.bmrow{padding:8px 2px;border-bottom:1px solid rgba(108,40,3,.13)}
.bmrow:last-child{border-bottom:none}
.bmhead{display:flex;align-items:center;gap:8px}
.bmhead .dot2{width:7px;height:7px;border-radius:50%;flex:none}
.bmhead .nm{font-size:11px;color:var(--ink);flex:1}
.bmhead .vl{font-size:10.5px;color:var(--mute);white-space:nowrap}
.track{height:4px;border-radius:99px;background:#E4E2DA;margin-top:6px;overflow:hidden}
.fillbar{display:block;height:100%;border-radius:99px;width:0;transition:width 1.3s cubic-bezier(.22,1,.36,1)}
.legend{display:flex;gap:12px;margin-top:auto;padding-top:12px;justify-content:center}
.legend i{display:flex;align-items:center;gap:5px;font-style:normal;font-size:9px;color:var(--mute)}
.legend i b{width:6px;height:6px;border-radius:50%;display:block}
.pdots{display:flex;gap:5px;justify-content:center;margin-top:14px}
.pdots i{width:5px;height:5px;border-radius:99px;background:#CFCDC4;transition:.3s;display:block}
.pdots i.on{background:var(--orange);width:16px}
.lchip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#E4E2DA}
/* sticky Kontakt */
.wafloat{position:fixed;right:20px;bottom:22px;z-index:65;width:54px;height:54px;
border-radius:50%;background:var(--green);color:#E4E2DA;display:grid;place-items:center;
box-shadow:0 10px 26px rgba(45,61,38,.32);transition:.25s}
.wafloat:hover{background:var(--green-mid);transform:translateY(-3px)}
.wafloat svg{width:26px;height:26px}
/* mobiles Menü */
.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
border-radius:50%;background:var(--paper);margin-left:auto;flex:none;gap:4px;padding:0}
.burger i{display:block;width:16px;height:1.5px;background:var(--ink);transition:.25s}
.burger.on i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:75;background:var(--green);
padding:92px 26px calc(32px + env(safe-area-inset-bottom));transform:translateX(102%);
transition:transform .36s cubic-bezier(.4,0,.2,1);overflow-y:auto;border-radius:38px 0 0 38px}
.mnav.on{transform:none}
.mnav a{display:block;font-family:'Aboreto',Georgia,serif;font-size:16px;color:#E4E2DA;
text-transform:uppercase;letter-spacing:.08em;padding:13px 0;
border-bottom:1px solid rgba(243,237,228,.16)}
.mnav .mcta{margin-top:24px;background:var(--orange);color:#fff;text-align:center;
border-radius:999px;padding:16px;border:none;font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:500;width:100%}
.mscrim{position:fixed;inset:0;background:rgba(45,61,38,.5);z-index:74;opacity:0;
pointer-events:none;transition:.3s}
.mscrim.on{opacity:1;pointer-events:auto}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:66;background:rgba(250,245,236,.97);
backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--line);display:flex;
gap:10px;align-items:center;padding:11px 18px calc(11px + env(safe-area-inset-bottom));
transform:translateY(105%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mbar.up{transform:none}
.mbar .btn{flex:1;text-align:center}
.mbar .wa{width:48px;height:48px;border-radius:50%;background:var(--green);color:#E4E2DA;
display:grid;place-items:center;flex:none}
.mbar .wa svg{width:23px;height:23px}
@media(min-width:900px){
.burger,.mnav,.mscrim,.mbar{display:none!important}
.nav-links{display:flex}
.wrap{max-width:1560px;margin:0 auto}
.hero{padding:154px 0 96px}
.hero-grid{grid-template-columns:1.05fr 1fr;gap:64px}
.tgrid{grid-template-columns:repeat(3,1fr);gap:16px}
.pkgs{grid-template-columns:repeat(3,1fr);gap:18px}
.feats{grid-template-columns:repeat(3,1fr);gap:16px}
.feats .feat.wide{grid-column:span 3;min-height:400px;padding:52px 46px}
.detail{grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding:60px 0}
.detail.flip .dart{order:2}
.dart{min-height:420px}
.dlist{grid-template-columns:1fr 1fr;gap:0 28px}
.crew{grid-template-columns:repeat(2,1fr);gap:24px}
.pcard{grid-template-columns:190px 1fr}
.pimg{aspect-ratio:auto;min-height:250px;height:100%}
.stats{grid-template-columns:repeat(4,1fr)}
.stat{border-bottom:none!important;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.jgrid{grid-template-columns:repeat(3,1fr)}
.qgrid{display:grid;grid-template-columns:260px 1fr;gap:50px;align-items:center}
.arrows{display:flex}
.rail{margin-left:0;margin-right:calc(-1*clamp(20px,4.2vw,80px));padding-left:0}
.rail.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;overflow:visible;
margin-right:0;padding-right:0}
.rail.grid4 .step{width:auto}
.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}
.imprint{grid-template-columns:repeat(4,1fr);gap:36px}
.band{padding:88px 40px}
.wafloat{right:28px;bottom:28px;width:58px;height:58px}
}
@media(max-width:899px){
section{padding:56px 0}
.hero{padding:96px 0 44px}
h1{font-size:clamp(28px,8vw,42px);line-height:1.2}
h2{font-size:clamp(23px,6.2vw,32px);line-height:1.22}
.lead{font-size:16.5px}
body{padding-bottom:76px}
.wafloat{display:none}
footer{border-radius:38px 38px 0 0;padding:48px 0 34px;margin-top:56px}
.band{padding:44px 22px;border-radius:26px}
.icard{width:232px}
.step{width:252px}
.detail{padding:34px 0;gap:20px}
.dart{min-height:220px}
}
@media(max-width:560px){
.tgrid{grid-template-columns:1fr}
.pkgs{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════════════════════════
Automatische Umschaltung Handy / Tablet / Desktop
Kein Geraetetest, sondern Media Queries: sie greifen live nach der
verfuegbaren Breite und damit auch bei gedrehtem Handy, auf dem
Tablet und im verkleinerten Browserfenster.
══════════════════════════════════════════════════════════════════ */
/* Die Linkleiste der Kopfzeile braucht mit Logo und Termin-Button rund
1270px. Darunter uebernimmt das Burger-Menue - sonst schiebt die
Leiste den Burger aus dem Bild und das Menue ist nicht erreichbar. */
@media(max-width:1269px){
.nav-links{display:none!important}
.burger{display:grid!important}
.mnav{display:block!important}
.mscrim{display:block!important}
}
@media(min-width:1270px){
.nav-links{display:flex}
.burger,.mnav,.mscrim{display:none!important}
}
/* Auf dem Handy ersetzt die untere Leiste den Button in der Kopfzeile:
Logo, Burger und Termin-Button passen dort nicht nebeneinander. */
@media(max-width:899px){
.deskcta{display:none}
.nav-in{gap:14px}
}
/* Tablet und Handy im Querformat: zwei Journal-Karten pro Reihe */
@media(min-width:600px) and (max-width:899px){
.jgrid{grid-template-columns:1fr 1fr}
}
/* sehr schmale Geraete */
@media(max-width:400px){
.logo{font-size:19px;letter-spacing:.2em}
.wrap{padding:0 18px}
}
/* Handy im Querformat: flache Bildschirme, damit im Menue weniger
gescrollt werden muss und die Kopfzeile nicht die halbe Hoehe frisst */
@media(max-height:480px) and (max-width:1269px){
.mnav{padding-top:74px}
.mnav a{padding:10px 0;font-size:15px}
.mnav .mcta{margin-top:16px;padding:13px}
}
/* ==================================================================
Mehrseitige Struktur
================================================================== */
/* Aufklappmenue "Services" in der Kopfzeile.
Ohne Pfeilchen hinter der Beschriftung: der Punkt daneben stoerte.
Das Menue selbst bleibt, es klappt bei Maus und Tastatur auf. */
.navdrop{position:relative;display:flex;align-items:center}
.navmenu{position:absolute;top:100%;left:-18px;min-width:252px;padding:10px 0;
background:var(--paper);border:1px solid var(--line);border-radius:18px;
box-shadow:0 18px 44px rgba(108,40,3,.13);opacity:0;visibility:hidden;
transform:translateY(8px);transition:.22s cubic-bezier(.33,1,.68,1);z-index:90}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu,.navdrop.offen .navmenu{
opacity:1;visibility:visible;transform:none}
.navmenu a{display:block;padding:10px 22px;font-size:13.5px;letter-spacing:.04em;
text-transform:none;color:var(--body)}
.navmenu a::after{display:none}
.navmenu a:hover{color:var(--orange);background:rgba(169,78,12,.055)}
.navmenu a[aria-current="page"]{color:var(--orange)}
.nav-links a[aria-current="page"]{color:var(--orange)}
.nav-links a[aria-current="page"]::after{right:0}
/* Gruppentitel im mobilen Menue */
.mgroup{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--orange-lt);margin:20px 0 4px}
.mgroup:first-child{margin-top:0}
.mnav a{padding:12px 0}
.mnav a.mcta{padding:16px}
/* Brotkrumen */
.krumen{padding:104px 0 0;font-size:12px;letter-spacing:.06em}
.krumen .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--mute)}
.krumen a{color:var(--mute)}
.krumen a:hover{color:var(--orange)}
.krumen b{font-weight:400;color:var(--ink)}
.krumen span{opacity:.5}
/* erste Sektion einer Unterseite */
.firstsec{padding-top:34px!important}
.krumen+.firstsec{padding-top:26px!important}
/* Einstiegskarten */
.lgrid{display:grid;gap:14px;grid-template-columns:1fr}
.lcard{border:1px solid var(--line);border-radius:22px;padding:26px 24px;
display:flex;flex-direction:column;transition:.25s;position:relative;overflow:hidden}
.lcard:hover{border-color:var(--orange);transform:translateY(-4px);background:rgba(255,252,247,.75)}
.lcard::before{content:"";position:absolute;left:24px;top:0;width:0;height:2px;
background:var(--orange);transition:width .35s cubic-bezier(.33,1,.68,1)}
.lcard:hover::before{width:calc(100% - 48px)}
.lcard .num{font-family:'Aboreto',Georgia,serif;font-size:12px;letter-spacing:.2em;color:var(--orange)}
.lcard h3{margin-top:12px;font-size:19px}
.lcard p{font-size:14.5px;margin-top:10px;line-height:1.55;flex:1}
.lcard .more{margin-top:16px;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange)}
.lcard .more::after{content:" \2192"}
/* Kontaktseite */
.kgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
.kcard{border:1px solid var(--line);border-radius:22px;padding:26px 24px}
.kcard h3{font-size:17px}
/* Zeichen in Karten und Aufklapptiteln. Dieselbe Form wie ueberall
sonst, nur kleiner - hier steht es neben dem Text, nicht darueber. */
.ksym{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
background:var(--beige);border:1px solid var(--line);margin-bottom:14px;
transition:background .22s,border-color .22s}
.ksym svg{width:21px;height:21px;fill:none;stroke:var(--orange);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s}
.kcard:hover .ksym{background:var(--orange);border-color:var(--orange)}
.kcard:hover .ksym svg{stroke:#fff}
.ksym.klein{width:32px;height:32px;margin-bottom:0;flex:none}
.ksym.klein svg{width:17px;height:17px}
.pgroup > summary:hover .ksym.klein{background:var(--orange);border-color:var(--orange)}
.pgroup > summary:hover .ksym.klein svg{stroke:#fff}
.pgroup[open] > summary .ksym.klein{background:var(--orange);border-color:var(--orange)}
.pgroup[open] > summary .ksym.klein svg{stroke:#fff}
.kcard p,.kcard a{display:block;font-size:15.5px;line-height:1.7;margin-top:8px}
.kcard a{color:var(--ink)}
.kcard a:hover{color:var(--orange)}
.kmap{border-radius:24px;overflow:hidden;border:1px solid var(--line);margin-top:20px;
aspect-ratio:16/9;background:var(--sand)}
.kmap iframe{width:100%;height:100%;border:0;display:block}
/* Rechtstexte */
.legal{max-width:760px;margin:0 auto}
.legal h2{margin-top:44px;font-size:clamp(20px,4vw,26px)}
.legal h3{margin-top:28px;font-size:clamp(16px,3vw,19px)}
.legal p{max-width:none;margin-top:14px;font-size:16.5px;line-height:1.7}
.legal ul{margin-top:14px;padding-left:22px}
.legal li{font-size:16.5px;line-height:1.7;margin-top:6px}
.legal .hinweis{background:rgba(169,78,12,.07);border:1px solid rgba(169,78,12,.32);
color:var(--red);font-size:14.5px;line-height:1.6;padding:16px 18px;
border-radius:14px;margin-top:22px}
.legal .hinweis b{font-weight:500}
/* == Journal == */
.jimg{position:relative}
.jimg img{width:100%;height:100%;object-fit:cover;display:block}
.jcard{display:flex;flex-direction:column}
.jcard .jbody{display:flex;flex-direction:column;flex:1}
.jbody h3{line-height:1.24}
.jdate{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute)}
.jbody .more{display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange)}
.jbody .more::after{content:" \2192"}
.jtop{padding:26px 0 0}
.jtop .head{margin-bottom:44px}
/* Der Name des Blogs traegt den Markenton - auf der Uebersicht und im
Abschnitt auf der Startseite. Nicht #FF6F00, sondern der dunkle Ton
der Marke: das reine Orange kommt auf hellem Grund nur auf 2,8:1 und
bleibt fuer Text unter der Schwelle, auch bei grosser Schrift. */
.jtop .head h1,#journal .head h2{color:var(--orange-text)}
.jtop .head h1::after,#journal .head h2::after{background:var(--orange-text)}
.jcount{font-size:13.5px;color:var(--mute)}
.apage{padding:26px 0 0}
.aback{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--orange)}
.aback::before{content:"";width:18px;height:1.5px;background:var(--orange);flex:none}
.ahead{max-width:820px;margin:0 auto;text-align:center}
.ahead h1{margin-top:16px;font-size:clamp(28px,5.4vw,46px)}
.ahead .lead{margin-top:18px}
.ameta{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
margin-top:22px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.ameta i{font-style:normal;width:4px;height:4px;border-radius:50%;background:var(--orange)}
.ahero{margin:40px auto 0;max-width:1100px;border-radius:28px;overflow:hidden;
background:var(--sand);aspect-ratio:16/9}
.ahero img{width:100%;height:100%;object-fit:cover;display:block}
.abody{max-width:760px;margin:0 auto;padding:52px 0 8px}
.abody p{max-width:none;margin-top:18px;font-size:17.5px;line-height:1.72}
.abody h2{margin-top:46px;font-size:clamp(21px,4.2vw,29px)}
.abody h2+p{margin-top:14px}
.abody h3{margin-top:34px;font-size:clamp(17px,3.2vw,20px)}
.abody h3+p,.abody h3+ul{margin-top:12px}
.abody .dlist{margin-top:16px}
.abody .dlist li{font-size:16.5px}
.abody>*:first-child{margin-top:0}
figure.afig{margin:40px 0 0;border-radius:24px;overflow:hidden;background:var(--sand)}
figure.afig img{width:100%;height:auto;display:block}
figure.afig figcaption{font-size:13px;color:var(--mute);padding:12px 4px 0;line-height:1.5}
.aend{max-width:760px;margin:44px auto 0;padding-top:26px;border-top:1px solid var(--line);
font-size:13.5px;color:var(--mute);line-height:1.6}
/* Bilder skalieren mit, aber nie ueber die eigene Aufloesung hinaus */
img{max-width:100%}
.abody .dlist{grid-template-columns:1fr}
@media(min-width:900px){
.lgrid{grid-template-columns:repeat(var(--ln,3),minmax(0,1fr));gap:18px}
.kgrid{grid-template-columns:repeat(3,1fr);gap:20px}
}
/* Vier Spalten erst weiter unten, siehe naechster Block - dazwischen
bleiben es drei. */
@media(min-width:900px) and (max-width:1179px){
.lgrid[style*="--ln:4"]{grid-template-columns:repeat(3,1fr)}
}
/* Zwei Karten sollen nicht ueber die ganze Breite laufen. */
.lgrid[style*="--ln:2"]{max-width:780px;margin-left:auto;margin-right:auto}
/* Acht Karten geben in drei Spalten 3+3+2 und lassen die Reihe unten
offen. Wo --ln:4 gesetzt ist, stehen sie ab dieser Breite als 4+4.
Erst ab 1180px: darunter wird die einzelne Karte zu schmal fuer die
Beschreibung. */
@media(min-width:1180px){
.lgrid[style*="--ln:4"] .lcard{padding:22px 20px!important}
.lgrid[style*="--ln:4"] .lcard h3{font-size:19px}
.lgrid[style*="--ln:4"] .lcard p{font-size:14.5px}
}
@media(min-width:600px) and (max-width:899px){
.lgrid{grid-template-columns:1fr 1fr}
.kgrid{grid-template-columns:1fr 1fr}
}
/* -- Letzte Reihe mittig ------------------------------------------- */
/* Geht eine Reihe nicht auf, standen die uebrigen Karten bisher links
und liessen rechts ein Loch - bei vier Karten in drei Spalten sogar
eine ganz allein. Der Kniff: doppelt so viele Spuren wie Spalten und
jede Karte ueber zwei davon. Dann laesst sich der Rest um eine halbe
Spalte einruecken, und die Karten bleiben exakt gleich breit
(2 Spuren + 1 Abstand ist rechnerisch dasselbe wie 1 Spalte).
Die Marken setzt RestKlasse in lib-bloecke.ps1:
r31/r32 Rest bei drei Spalten
r41..r43 Rest bei vier Spalten
s31/s32 Rest, wenn ein Viererblock auf drei Spalten faellt */
@media(min-width:900px){
.lgrid.r31,.lgrid.r32,.tgrid.r31,.tgrid.r32{grid-template-columns:repeat(6,minmax(0,1fr))}
.lgrid.r31 > *,.lgrid.r32 > *,.tgrid.r31 > *,.tgrid.r32 > *{grid-column:span 2}
.lgrid.r31 > *:last-child,.tgrid.r31 > *:last-child{grid-column:3 / span 2}
.lgrid.r32 > *:nth-last-child(2),.tgrid.r32 > *:nth-last-child(2){grid-column:2 / span 2}
.lgrid.r32 > *:last-child,.tgrid.r32 > *:last-child{grid-column:4 / span 2}
}
@media(min-width:900px) and (max-width:1179px){
.lgrid[style*="--ln:4"].s31,.lgrid[style*="--ln:4"].s32{grid-template-columns:repeat(6,minmax(0,1fr))}
.lgrid[style*="--ln:4"].s31 > *,.lgrid[style*="--ln:4"].s32 > *{grid-column:span 2}
.lgrid[style*="--ln:4"].s31 > *:last-child{grid-column:3 / span 2}
.lgrid[style*="--ln:4"].s32 > *:nth-last-child(2){grid-column:2 / span 2}
.lgrid[style*="--ln:4"].s32 > *:last-child{grid-column:4 / span 2}
}
@media(min-width:1180px){
.lgrid.r41,.lgrid.r42,.lgrid.r43{grid-template-columns:repeat(8,minmax(0,1fr))}
.lgrid.r41 > *,.lgrid.r42 > *,.lgrid.r43 > *{grid-column:span 2}
.lgrid.r41 > *:last-child{grid-column:4 / span 2}
.lgrid.r42 > *:nth-last-child(2){grid-column:3 / span 2}
.lgrid.r42 > *:last-child{grid-column:5 / span 2}
.lgrid.r43 > *:nth-last-child(3){grid-column:2 / span 2}
.lgrid.r43 > *:nth-last-child(2){grid-column:4 / span 2}
.lgrid.r43 > *:last-child{grid-column:6 / span 2}
}
/* Sachkarten: zwei Spalten bis 1099, darueber drei oder vier. */
@media(min-width:1100px){
.fkgrid.r31,.fkgrid.r32{grid-template-columns:repeat(6,minmax(0,1fr))}
.fkgrid.r31 > *,.fkgrid.r32 > *{grid-column:span 2}
.fkgrid.r31 > *:last-child{grid-column:3 / span 2}
.fkgrid.r32 > *:nth-last-child(2){grid-column:2 / span 2}
.fkgrid.r32 > *:last-child{grid-column:4 / span 2}
.fkgrid.r41,.fkgrid.r42,.fkgrid.r43{grid-template-columns:repeat(8,minmax(0,1fr))}
.fkgrid.r41 > *,.fkgrid.r42 > *,.fkgrid.r43 > *{grid-column:span 2}
.fkgrid.r41 > *:last-child{grid-column:4 / span 2}
.fkgrid.r42 > *:nth-last-child(2){grid-column:3 / span 2}
.fkgrid.r42 > *:last-child{grid-column:5 / span 2}
.fkgrid.r43 > *:nth-last-child(3){grid-column:2 / span 2}
.fkgrid.r43 > *:nth-last-child(2){grid-column:4 / span 2}
.fkgrid.r43 > *:last-child{grid-column:6 / span 2}
/* Dieselbe Mittigstellung fuer die Symbolkarten. */
.acgrid.r31,.acgrid.r32{grid-template-columns:repeat(6,minmax(0,1fr))}
.acgrid.r31 > *,.acgrid.r32 > *{grid-column:span 2}
.acgrid.r31 > *:last-child{grid-column:3 / span 2}
.acgrid.r32 > *:nth-last-child(2){grid-column:2 / span 2}
.acgrid.r32 > *:last-child{grid-column:4 / span 2}
.acgrid.r41,.acgrid.r42,.acgrid.r43{grid-template-columns:repeat(8,minmax(0,1fr))}
.acgrid.r41 > *,.acgrid.r42 > *,.acgrid.r43 > *{grid-column:span 2}
.acgrid.r41 > *:last-child{grid-column:4 / span 2}
.acgrid.r42 > *:nth-last-child(2){grid-column:3 / span 2}
.acgrid.r42 > *:last-child{grid-column:5 / span 2}
.acgrid.r43 > *:nth-last-child(3){grid-column:2 / span 2}
.acgrid.r43 > *:nth-last-child(2){grid-column:4 / span 2}
.acgrid.r43 > *:last-child{grid-column:6 / span 2}
}
/* Bleibt in einer zweispaltigen Reihe eine Karte uebrig, steht sie
mittig statt links. Gilt fuer die mittleren Breiten. */
@media(min-width:600px) and (max-width:899px){
.lgrid.u2 > *:last-child{grid-column:1 / -1;max-width:calc(50% - 7px);margin:0 auto;width:100%}
}
@media(min-width:700px) and (max-width:1099px){
.fkgrid.u2 > *:last-child{grid-column:1 / -1;max-width:calc(50% - 7px);margin:0 auto;width:100%}
}
/* Eine einzelne Karte steht mittig und nicht in Vollbreite. */
.tgrid.einzeln{max-width:380px;margin-left:auto;margin-right:auto;grid-template-columns:1fr}
.lgrid.einzeln{max-width:400px;margin-left:auto;margin-right:auto;grid-template-columns:1fr}
@media(max-width:899px){
.krumen{padding-top:86px}
.firstsec,.krumen+.firstsec{padding-top:20px!important}
.jtop,.apage{padding-top:16px}
.abody{padding:34px 0 4px}
.abody p{font-size:16.5px}
.ahero{margin-top:26px;border-radius:20px;aspect-ratio:4/3}
figure.afig{border-radius:18px;margin-top:28px}
}
/* ==================================================================
Farbwelt nach der Framer-Vorlage (ivilounge.framer.website)
Die Werte sind aus deren Design-Token uebernommen, nicht geschaetzt.
Der Termin-Knopf dort ist ein Radialverlauf, keine Flaechenfarbe.
================================================================== */
:root{
/* Der "Book Now"-Knopf der Vorlage ist ein Radialverlauf mit zwei
identischen Stopps, also eine Flaeche: rgb(255,111,0) = #FF6F00.
Das ist der Markenton. */
--orange:#FF6F00;
/* Fuer kleinen Text auf hellem Grund zu schwach (2,8:1), dort der
dunkle Ton - die Vorlage haelt es genauso: Text #6C2803, Knopf orange */
--orange-text:#9B3102;
--orange-lt:#FEA969;
/* grosser Marken-Verlauf fuer dunkle Flaechen */
--grad-warm-gross:radial-gradient(150% 142% at 76.5% -6.2%,#FFD5B5 0%,#FEA969 12%,
#FC7E20 28%,#A03402 52%,#742802 78%,#6C2803 100%);
/* helle, ruhige Flaeche des Einstiegs */
--grad-ruhig:radial-gradient(120% 120% at 100% 0%,#FFF9F2 0%,#F3EDE4 46%,#E7DCCD 100%);
--ink:#6C2803;
--beige:#F3EDE4;
--taupe:#BCAA95;
--grau-kuehl:#CAD1DB;
--paper:#FFF9F2;
--greige:#FFF9F2;
--line:rgba(108,40,3,.15);
}
/* Knoepfe: flaches Orange und Pillenform wie in der Vorlage */
.btn{background:var(--orange);border-radius:999px;color:#fff}
.btn:hover{background:#E86200;filter:none}
.btn.line,.btn.ghost{background:transparent}
.btn.white{background:#fff;color:var(--ink)}
.btn.green{background:var(--green)}
.btn.green:hover{background:var(--green-mid)}
.mnav .mcta,.mbar .btn{background:var(--orange)}
.wafloat{background:var(--orange)}
.wafloat:hover{background:#E86200;filter:none}
/* Grafische Akzente tragen den Markenton, kleiner Text den dunklen:
#FF6F00 kommt auf hellem Grund nur auf 2,8:1 und ist als Text
schlecht lesbar. */
.eyebrow::before,.head h2::after,.center h2::after,.band h2::after,
.tcard::before,.pkg .tag::before,.step .lbl::before,.aback::before,
.lcard::before,.dot.on,.pdots i.on,.ameta i{background:var(--orange)}
.dlist li svg path{stroke:var(--orange)}
.stars,.badge .stars{color:var(--orange)}
.dtxt .kicker,.pkg .tag,.jbody .tag,.tcard .more,.lcard .more,.jbody .more,
.prow .amt,.faq summary i,.pgroup > summary i,.pgroup[open] > summary,
.faq[open] summary,.aback,.jcard:hover .jbody h3,.nav-links a:hover,
.navmenu a:hover,.nav-links a[aria-current="page"],
.navmenu a[aria-current="page"],.lchip:hover,.arw:hover,.stat b{color:var(--orange-text)}
.nav-links a::after{background:var(--orange)}
footer{border-top:3px solid var(--orange)}
.progress{background:var(--orange)}
::selection{background:var(--orange);color:#fff}
.faq[open]{border-color:var(--orange)}
.tcard:hover,.pkg:hover,.jcard:hover,.lcard:hover{border-color:var(--orange)}
/* == Ruhiger Einstieg: grosse Wortmarke statt Foto == */
.hero.ruhig{background:var(--grad-ruhig);text-align:center;overflow:hidden;
padding:132px 0 92px;min-height:0}
.hero.ruhig::before,.hero.ruhig::after{display:none}
/* die Grundregel .hero h1{color:#fff} ist spezifischer als .wortmarke
und muss hier ueberschrieben werden, sonst steht weiss auf beige */
.hero.ruhig h1,.hero.ruhig .wortmarke,.hero.ruhig .wortmarke i{color:var(--ink)}
.hero.ruhig h1::after{display:none}
.hero.ruhig .eyebrow{color:var(--mute);justify-content:center}
.hero.ruhig .eyebrow::before{background:var(--orange)}
.hero.ruhig .claim{color:var(--body);max-width:44ch;margin:22px auto 0;
text-shadow:none;font-size:clamp(16px,2.5vw,19px)}
.hero.ruhig .badge{border-color:var(--line);background:rgba(255,255,255,.6);
color:var(--body);backdrop-filter:none;margin-top:26px}
.hero.ruhig .badge b{color:var(--ink)}
.hero.ruhig .stars{color:var(--orange)}
.hero.ruhig .hero-cta{justify-content:center;margin-top:30px}
.hero.ruhig .btn.line{border-color:var(--line);color:var(--ink)}
.hero.ruhig .btn.line:hover{border-color:var(--orange);color:var(--orange);
background:rgba(255,255,255,.5)}
/* Die Grundregel .hero h1{max-width:16ch} begrenzte die Wortmarke auf
534 px. "LOUNGE" braucht bei 196 px aber 864 px und lief nach rechts
aus dem Kasten - die Zeile stand dadurch 165 px neben der Mitte.
Gemessen mit einem Range-Rechteck ueber die Glyphen.
Die Begrenzung muss mit .hero.ruhig h1 aufgehoben werden: .hero h1
ist spezifischer als .wortmarke allein und gewinnt sonst. */
.wortmarke{font-family:'Aboreto',Georgia,serif;color:var(--ink);
text-transform:uppercase;margin:18px auto 0;font-weight:400}
/* Kein Schatten unter der Wortmarke. Die Grundregel .hero h1 setzt einen
fuer Schrift auf einem Bild; auf hellem Grund macht er das Zeichen nur
weich und sieht nach Schlagschatten aus. */
.hero.ruhig h1.wortmarke{max-width:none;width:100%;text-shadow:none}
.wortmarke i{display:block;font-style:normal;line-height:.86;
font-size:clamp(52px,14vw,196px);letter-spacing:.02em}
.wortmarke i+i{margin-top:.04em}
/* Nur sichtbar fuer Vorleseprogramme, nicht auf dem Bildschirm */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* IVI im Markenorange, CLINIC darunter gross in Tinte.
Beide Zeilen laufen aus einer Maske herein, nicht aus dem Nichts:
der Kasten hat overflow:hidden, die Zeile faehrt von unten hoch.
Das ist die Bewegung, die grosse Wortmarken bei Apple haben. */
.hero.ruhig h1.wortmarke i,.hero.ruhig h1.wortmarke small{color:var(--orange)}
.wortmarke small{display:block;font-family:'Aboreto',Georgia,serif;font-weight:400;
/* so bemessen, dass CLINIC nicht breiter wirkt als das kurze IVI:
gemessen 257 px gegen 274 px bei 1280 px Fensterbreite */
font-size:clamp(20px,4.8vw,64px);letter-spacing:.16em;line-height:1;margin-top:.12em}
.maske{display:block;overflow:hidden;padding-bottom:.05em}
.js .maske>*{display:block;transform:translateY(106%);
transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.js .maske.in>*{transform:none}
.js .wortmarke .maske+.maske>*{transition-delay:.13s}
@media(max-width:899px){
.hero.ruhig{padding:104px 0 62px}
.wortmarke small{letter-spacing:.12em}
}
/* Kopfzeile traegt nur noch "IVI" */
.logo{line-height:1;padding-top:1px;color:var(--orange)}
.logo:hover{color:var(--orange-text)}
/* == Beige-Grau fuer die aesthetische Medizin, wie in der Vorlage == */
.thema-beige .tintsec{background:var(--beige)}
.thema-beige .phero{background:var(--beige)}
.thema-beige .lcard,.thema-beige .kcard{border-color:rgba(135,105,82,.22)}
.thema-beige .lcard:hover{border-color:var(--taupe);background:rgba(255,255,255,.55)}
.thema-beige .dtxt .kicker{color:#876952}
.thema-beige .anlass .dlist li{border-color:rgba(135,105,82,.2)}
.thema-beige .stats{border-color:rgba(135,105,82,.22)}
/* == Bildrhythmus: Kopfbild, Bild-Text-Zeilen, Anlass-Block == */
.phero{margin-top:6px;border-radius:28px;overflow:hidden;position:relative;
background:var(--sand);aspect-ratio:21/9}
.phero img{width:100%;height:100%;object-fit:cover;display:block}
/* Ganzes Bild statt Ausschnitt. Kein festes Seitenverhaeltnis, keine
Vergroesserung - sonst faellt oben und unten weg, was den Sinn des
Motivs ausmacht. Die Breite ist begrenzt, damit ein 3:2-Bild die
Seite nicht auf eine Bildschirmhoehe aufblaeht. */
.phero.voll{aspect-ratio:auto;background:transparent;max-width:940px;
margin-left:auto;margin-right:auto}
.phero.voll img{height:auto}
/* Produktbilder auf weissem Grund brauchen keine Bildbreite. Klein
gesetzt schmuecken sie, gross gesetzt schieben sie den Inhalt weg. */
.phero.voll.klein{max-width:440px}
.phero.voll.mittel{max-width:700px}
/* Hochformate: schmal gesetzt, sonst wird die Seite eine Bildschirm-
hoehe hoch, bevor der erste Satz kommt. */
.phero.voll.hoch{max-width:540px}
.dart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* -- Fotos auf weissem Grund --------------------------------------
Die Aufnahmen aus dem Shooting auf weisser Flaeche standen als
weisses Rechteck auf dem warmen Seitenton - ein harter Absatz, den
nichts rechtfertigt. Multiplizieren loest das an der Wurzel: Weiss
ist beim Multiplizieren neutral, es nimmt genau den Ton an, der
dahinter liegt. Darum darf der Behaelter auch keinen eigenen Grund
haben, sonst mischt das Bild mit dem statt mit der Seite. */
.dart.weiss,.hsbild.weiss,.gbild.weiss{background:transparent}
.dart.weiss img,.hsbild.weiss img,.gbild.weiss img{mix-blend-mode:multiply}
/* -- Seitenkopf mit Bild daneben ----------------------------------
Ersetzt das freistehende Bildband unter der Ueberschrift. Der Text
steht links und behaelt seine volle Breite fuer Titel und Lead, das
Bild steht rechts in der Spalte, die vorher leer war. Auf dem Handy
steht das Bild unter dem Text und flacher, damit die Seite nicht mit
einem Bildschirm Bild anfaengt. */
.hsgrid{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
.hstext .eyebrow{margin-bottom:12px}
.hstext .lead{margin-top:18px}
.hsbild{position:relative;overflow:hidden;border-radius:26px;background:var(--sand);
height:clamp(230px,56vw,320px)}
/* Auf dem Handy ist die Bildspalte breit und flach. Einem Hochformat
nimmt dieser Zuschnitt oben und unten zu viel, darum steht es hier
fast quadratisch. */
.hsbild.hoch{height:clamp(300px,84vw,400px)}
.hsbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:900px){
.hsgrid{grid-template-columns:1.04fr .96fr;gap:52px}
.hsbild{height:clamp(380px,40vw,500px)}
/* Hochformate duerfen hoeher stehen, sonst schneidet der Zuschnitt
oben und unten genau das weg, wofuer das Motiv gewaehlt wurde. */
.hsbild.hoch{height:clamp(430px,46vw,580px)}
}
.anlass{max-width:760px;margin:0 auto;text-align:center}
.anlass .eyebrow{justify-content:center}
.anlass .dlist{margin-top:24px;text-align:left;display:grid;gap:0}
.anlass .dlist li{font-size:16.5px;padding:10px 0;border-bottom:1px solid var(--line)}
.anlass .dlist li:last-child{border-bottom:none}
.stat b{font-variant-numeric:tabular-nums}
.bildband{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px}
.bildband>div{border-radius:22px;overflow:hidden;position:relative;background:var(--sand);aspect-ratio:4/5}
.bildband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Bild in der Leistungskarte */
.lcard{padding:0}
.lcard .limg{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sand);
border-radius:22px 22px 0 0;margin:-1px -1px 0}
.lcard .limg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.33,1,.68,1)}
.lcard:hover .limg img{transform:scale(1.04)}
.lcard .num{display:block;padding:22px 24px 0}
.lcard h3,.lcard p{padding:0 24px}
.lcard .more{padding:0 24px 26px}
.lcard::before{left:0;top:auto;bottom:0}
.lcard:hover::before{width:100%}
@media(min-width:900px){
.anlass .dlist{grid-template-columns:1fr 1fr;gap:0 32px}
.bildband{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media(min-width:600px) and (max-width:899px){
.bildband{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:899px){
.phero{aspect-ratio:3/2;border-radius:20px}
}
/* -- Sprachumschalter --------------------------------------------- */
.lang{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
border-radius:999px;padding:3px;font-size:10.5px;letter-spacing:.12em;flex:none}
.lang span{padding:5px 9px;border-radius:999px;text-transform:uppercase;line-height:1}
.lang .on{background:var(--orange);color:#fff}
.lang .off{color:var(--mute);cursor:not-allowed}
.nav-in .lang{margin-left:12px}
@media(max-width:1269px){.nav-in .lang{display:none}}
.mnav .lang{margin:6px 0 0}
/* -- Merkmal-Pillen im Einstieg ----------------------------------- */
.pillen{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.pille{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13px;
color:var(--body);background:rgba(255,255,255,.62);display:inline-flex;
align-items:center;gap:7px;line-height:1.2}
.pille b{color:var(--ink);font-weight:500}
.pille .stars{font-size:10.5px;letter-spacing:.06em}
.bi{opacity:0;filter:blur(6px);animation:pille-ein .7s cubic-bezier(.33,1,.68,1) forwards}
.pillen .bi:nth-child(1){animation-delay:.30s}
.pillen .bi:nth-child(2){animation-delay:.42s}
.pillen .bi:nth-child(3){animation-delay:.54s}
@keyframes pille-ein{to{opacity:1;filter:blur(0)}}
/* -- Laufband ----------------------------------------------------- */
.laufband{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--paper);display:grid;gap:8px;overflow:hidden}
.lauf{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.laufin{display:flex;width:max-content;animation:lauf 64s linear infinite}
.lauf.rev .laufin{animation-direction:reverse;animation-duration:82s}
.laufin span{flex:none;padding:0 20px;font-family:'Aboreto',Georgia,serif;font-size:13.5px;
letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap;
display:inline-flex;align-items:center;gap:20px}
.laufin span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.laufband:hover .laufin{animation-play-state:paused}
/* -- Kachelreihe -------------------------------------------------- */
.kachelsec{padding:40px 0}
.kacheln{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.kachel{border:1px solid var(--line);border-radius:20px;padding:20px 18px;background:var(--paper)}
.ksym{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:12px;background:rgba(255,111,0,.1);color:var(--orange-text)}
.ksym svg{width:18px;height:18px}
.kachel p{font-size:14.5px;line-height:1.45;margin-top:14px;color:var(--ink);max-width:none}
@media(min-width:900px){.kachelsec{padding:56px 0}.kacheln{grid-template-columns:repeat(4,1fr);gap:16px}
.kachel{padding:24px 22px}.kachel p{font-size:15.5px}}
/* -- Zahlenkarten ------------------------------------------------- */
.zgrid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:34px}
.zkarte{border:1px solid var(--line);border-radius:22px;padding:26px 22px;background:var(--paper);
display:flex;flex-direction:column}
.zahl{display:block;font-family:'Aboreto',Georgia,serif;font-weight:400;line-height:1;
font-size:clamp(38px,8.5vw,58px);color:var(--ink);font-variant-numeric:tabular-nums}
.zkarte p{margin-top:14px;font-size:15px;line-height:1.5;flex:1;max-width:none}
.quelle{display:block;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media(min-width:600px){.zgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.zgrid{grid-template-columns:repeat(4,1fr);gap:18px}}
/* -- Festgehaltene Stufen ----------------------------------------- */
/* ohne eigene Polsterung, sonst beginnt der festgehaltene Inhalt versetzt */
.stufen{position:relative;padding:0;height:calc(var(--n,4) * 100vh)}
@supports(height:100svh){.stufen{height:calc(var(--n,4) * 100svh)}}
.stufen-in{position:sticky;top:0;height:100vh;min-height:620px;display:flex;
flex-direction:column;justify-content:center;overflow:hidden;background:var(--grad-ruhig)}
@supports(height:100svh){.stufen-in{height:100svh}}
.stufen-kopf{text-align:center;max-width:660px;margin:0 auto}
.stufen-kopf .eyebrow{justify-content:center}
.stufen-kopf .lead{margin:14px auto 0}
.stufen-bahn{position:relative;min-height:340px;margin-top:34px}
.stufe{position:absolute;inset:0;display:grid;gap:22px;align-content:center;
opacity:0;visibility:hidden;transform:translateY(14px);
transition:opacity .5s ease,transform .5s cubic-bezier(.33,1,.68,1)}
.stufe.on{opacity:1;visibility:visible;transform:none}
.sbild{position:relative;border-radius:24px;overflow:hidden;background:var(--sand);aspect-ratio:16/10}
.sbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.snum{font-family:'Aboreto',Georgia,serif;font-size:12px;letter-spacing:.2em;color:var(--orange-text)}
.stext h3{margin-top:10px;font-size:clamp(21px,3.6vw,30px)}
.stext p{margin-top:12px;font-size:16px;line-height:1.6;max-width:46ch}
.sliste{list-style:none;padding:0;margin-top:16px;display:grid;gap:6px}
.sliste li{position:relative;padding-left:17px;font-size:14.5px;line-height:1.5;color:var(--body)}
.sliste li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
border-radius:50%;background:var(--orange)}
.stufen-punkte{display:flex;gap:7px;justify-content:center;margin-top:26px}
.stufen-punkte i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.3s}
.stufen-punkte i.on{background:var(--orange);transform:scale(1.4)}
@media(min-width:900px){
.stufe{grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.stufen-bahn{min-height:400px}
}
@media(max-width:899px){
.stufen{height:auto}
.stufen-in{position:static;height:auto;min-height:0;padding:56px 0}
.stufen-bahn{position:static;min-height:0;display:grid;gap:34px;margin-top:30px}
.stufe{position:static;opacity:1;visibility:visible;transform:none;transition:none}
.stufen-punkte{display:none}
}
/* -- Ziehbare Bahn ------------------------------------------------ */
.bahn{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;padding:4px 2px 18px;margin-top:30px;cursor:grab;
scrollbar-width:none;-ms-overflow-style:none}
.bahn::-webkit-scrollbar{display:none}
.bahn.zieht{cursor:grabbing;scroll-snap-type:none}
.bahn>*{scroll-snap-align:start;flex:0 0 78%;max-width:330px}
@media(min-width:900px){.bahn>*{flex:0 0 316px;max-width:none}}
.bkarte{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);
display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.bkarte:hover{border-color:var(--orange);transform:translateY(-3px)}
.bimg{position:relative;aspect-ratio:16/10;background:var(--sand);overflow:hidden}
.bimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.33,1,.68,1)}
.bkarte:hover .bimg img{transform:scale(1.04)}
.bbody{padding:20px;display:flex;flex-direction:column;flex:1}
.bbody h3{font-size:18px;line-height:1.28}
.bbody p{font-size:14.5px;line-height:1.5;margin-top:9px;flex:1;max-width:none}
.messfeld{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;
background:rgba(255,255,255,.55)}
.mlbl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mval{display:block;font-family:'Aboreto',Georgia,serif;font-size:23px;color:var(--ink);margin-top:5px}
.mtag{display:inline-block;margin-top:7px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange-text);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.bbody .more{display:inline-block;margin-top:16px;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange-text)}
.bbody .more::after{content:" \2192"}
.headnav{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pfeile{display:flex;gap:8px}
/* -- Instagram-Wand ----------------------------------------------- */
.instasec{background:var(--beige)}
.ikarte{border:1px solid var(--line);border-radius:20px;background:var(--paper);
overflow:hidden;display:flex;flex-direction:column;
transition:border-color .25s,transform .25s;flex:0 0 72%;max-width:288px}
@media(min-width:900px){.ikarte{flex:0 0 254px;max-width:none}}
.ikarte:hover{border-color:var(--orange);transform:translateY(-3px)}
.ikopf{display:flex;align-items:center;gap:9px;padding:11px 13px}
.iav{width:28px;height:28px;border-radius:50%;background:var(--grad-warm-gross);color:#fff;
font-family:'Aboreto',Georgia,serif;font-size:8px;letter-spacing:.04em;
display:flex;align-items:center;justify-content:center;flex:none}
.ihandle{font-size:12.5px;color:var(--ink)}
.ihandle::before{content:"@"}
.ibild{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
background:repeating-linear-gradient(45deg,rgba(108,40,3,.05) 0 11px,transparent 11px 22px),var(--sand)}
.iplay{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
background:rgba(255,255,255,.72);position:relative}
.iplay::after{content:"";position:absolute;left:calc(50% - 4px);top:calc(50% - 7px);
border-left:12px solid var(--orange);border-top:7px solid transparent;border-bottom:7px solid transparent}
.ifuss{display:flex;flex-direction:column;gap:7px;padding:12px 13px}
.iicons{display:flex;gap:8px;height:14px}
.iicons::before,.iicons::after{content:"";width:13px;height:13px;flex:none;
border:1.4px solid var(--taupe);border-radius:50% 50% 50% 2px;transform:rotate(-45deg)}
.iicons::after{border-radius:50%;transform:none}
.ihint{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* -- Einstiegskarten mit Preis ------------------------------------ */
.pgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(3,1fr);gap:20px}}
.plan{border:1px solid var(--line);border-radius:24px;padding:28px 24px;background:var(--paper);
display:flex;flex-direction:column;transition:border-color .25s}
.plan:hover{border-color:var(--orange)}
.ptag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text)}
.plan h3{margin-top:12px;font-size:22px}
.plan p{margin-top:11px;font-size:15px;line-height:1.55;max-width:none}
.pfor{display:block;margin-top:22px;font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mute)}
.plan .dlist{margin-top:12px;flex:1;grid-template-columns:1fr}
.plan .dlist li{font-size:14.5px}
.pfuss{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;
align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ppreis{font-family:'Aboreto',Georgia,serif;font-size:18px;color:var(--ink)}
.mknopf{display:flex;gap:8px;flex-wrap:wrap}
/* -- Mitgliedschaften --------------------------------------------- */
/* Der Monatsbetrag steht gross oben, der Jahresbetrag klein darunter:
monatlich ist die Zahl, mit der man rechnet, jaehrlich die, die man
vergleicht. Unten am Fuss steht der Listenwert daneben, damit der
Vorteil nachrechenbar bleibt. */
.plan.mit{position:relative}
.plan.mit .mpreis{display:block;margin-top:16px;font-family:'Aboreto',Georgia,serif;
font-size:clamp(26px,3.4vw,32px);line-height:1;color:var(--ink)}
.plan.mit .mpreis small{font-family:inherit;font-size:14px;color:var(--mute)}
.plan.mit .mjahr{display:block;margin-top:7px;font-size:13px;color:var(--mute)}
.plan.mit p{margin-top:16px}
.plan.empfohlen{border-color:var(--orange);box-shadow:0 18px 44px -30px rgba(108,40,3,.5)}
.mband{position:absolute;top:0;right:24px;transform:translateY(-50%);
background:var(--orange);color:#fff;border-radius:999px;padding:6px 13px;
font-size:10px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.plan.mit .pfuss{flex-wrap:wrap;gap:12px}
.plan.mit .ppreis{font-size:14px;color:var(--mute);font-family:inherit}
/* -- Anlaesse ----------------------------------------------------- */
.agrid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:600px){.agrid{grid-template-columns:1fr 1fr}}
.akarte{border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--paper);
transition:border-color .25s}
.akarte:hover{border-color:var(--orange)}
.aort{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.akarte h3{margin-top:10px;font-size:21px}
.adat{display:block;margin-top:10px;font-size:14.5px;color:var(--orange-text)}
.agrid.einzeln{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
/* Vorbei, aber wiederkehrend: eine ruhige Marke, kein Warnhinweis. */
.amarke{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px;
background:var(--beige);border:1px solid var(--line);color:var(--mute);
font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.fussnote{margin-top:20px;font-size:13px;color:var(--mute)}
/* -- Team --------------------------------------------------------- */
.tgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:600px){.tgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.tgrid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:600px) and (max-width:899px){
.tgrid.u2 > *:last-child{grid-column:1 / -1;max-width:calc(50% - 8px);margin:0 auto;width:100%}
}
.tgrid.paar{max-width:760px;margin-left:auto;margin-right:auto}
@media(min-width:900px){.tgrid.paar{grid-template-columns:1fr 1fr}}
/* Ohne Rahmen. Der Kasten stammt aus der Zeit vor dem Bogen, und ein
Rechteck um eine Nische herum kaempft gegen genau die Form, um die es
geht - oben blieb ueber der Rundung eine leere Ecke im Rahmen stehen.
Jetzt steht der Bogen frei auf dem Seitengrund, der Name darunter.
Beim Zeigen holt das Bild leicht heran, das ersetzt die Rahmenfarbe. */
.tkarte{background:none;border:none;padding-bottom:0}
/* Der Rundbogen kommt aus dem Moodboard fuer den Umbau: die beiden
groessten Kacheln dort sind Bogendurchgaenge in Terrakotta. Die Form
laesst sich uebernehmen, die fremden Fotos nicht. Sie steht nur an den
Portraets, wo sie hingehoert - eine Nische, in der ein Mensch steht.
Die zweite Radiusgruppe nach dem Schraegstrich ist die senkrechte:
waagrecht die halbe Breite, senkrecht 36 Prozent der Hoehe, das ergibt
bei 4:5 einen leicht gedrueckten Bogen statt eines Halbkreises - so
bleiben die Gesichter oben ganz. */
.tbild{position:relative;aspect-ratio:4/5;background:var(--sand);overflow:hidden;
margin:0;border-radius:50% 50% 16px 16px / 36% 36% 16px 16px}
.tbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.33,1,.68,1)}
.tkarte:hover .tbild img{transform:scale(1.04)}
.tbild.leer{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;background:var(--grad-ruhig)}
.tbild.leer span{font-family:'Aboreto',Georgia,serif;font-size:34px;letter-spacing:.08em;color:var(--taupe)}
.tbild.leer small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
/* Ohne Kasten steht der Text buendig unter dem Bogen, nicht eingerueckt. */
.tkarte h3{margin:18px 2px 0;font-size:18px}
.trolle{display:block;margin:6px 2px 0;font-size:11.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--orange-text)}
.tkarte p{margin:12px 2px 0;font-size:14.5px;line-height:1.55;max-width:none}
.tquali{display:block;margin:14px 2px 0;padding-top:12px;border-top:1px solid var(--line);
font-size:12px;line-height:1.5;color:var(--mute)}
/* -- Fussbereich kompakter ---------------------------------------
Gemessen: 1043 px hoch. Der grosse Teil davon war die Wortmarke unten
mit bis zu 104 px Schriftgroesse plus 52 px Abstand darueber, dazu
fuenf Spalten Kleingedrucktes und viel Polsterung. Jetzt: kleinere
Marke, drei Spalten, engere Abstaende, flacherer Bogen. */
footer{padding:44px 0 26px;margin-top:56px;border-radius:40px 40px 0 0}
/* Fuenf Spalten statt vier: die Spalte "Clinic" hatte acht Verweise und
gab damit die Hoehe des ganzen Blocks vor. */
.fgrid{gap:26px;margin-top:20px}
@media(min-width:900px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.imprint{grid-template-columns:1fr}
@media(min-width:760px){.imprint{grid-template-columns:repeat(3,1fr);gap:30px}}
.fgrid h4{margin-bottom:10px}
.fgrid a{font-size:13px;margin-bottom:8px}
.fgrid p{font-size:14px;margin-bottom:7px}
.fsocial{margin-top:10px}
.imprint{margin-top:30px;padding-top:24px;gap:22px;font-size:13.5px}
.imprint h4{margin-bottom:9px}
.imprint p,.imprint a{line-height:1.6}
.fbot{margin-top:28px;padding-top:20px;display:flex;flex-direction:column;
align-items:center;gap:12px;text-align:center}
.fmark{font-size:clamp(30px,7vw,52px);letter-spacing:.12em;padding-left:.12em}
.fmark small{font-size:.24em;letter-spacing:.34em;padding-left:.34em;margin-top:7px}
.fcopy{margin-top:0;font-size:13px}
@media(min-width:900px){
footer{padding:52px 0 28px}
.fbot{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left}
.fcopy{text-align:right}
}
/* -- Kleinteile --------------------------------------------------- */
.mitte{text-align:center}
.fsocial{display:flex;gap:16px;margin-top:14px}
.fsocial a{font-size:13.5px}
.qtop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.qstars{font-size:13px;color:var(--body);display:inline-flex;align-items:center;gap:8px}
.qstars b{color:var(--ink);font-weight:500}
/* -- Rezensionswand ------------------------------------------------
Die Anordnung stammt aus dem gelieferten Baustein, das Aussehen aus
dieser Website: Papiergrund, Haarlinie, oranger Stern, dieselbe
Kartenrundung wie ueberall. Kein Kasten mit Schlagschatten und kein
fremdes Blau. */
.rwtop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rwstand{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.rwgrid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:26px}
@media(min-width:700px){.rwgrid{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1100px){.rwgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Ungerade Anzahl im Zweispalter: letzte Karte mittig, siehe die
gleichlautende Regel bei den uebrigen Gittern. */
@media(min-width:700px) and (max-width:1099px){
.rwgrid:has(> :last-child:nth-child(odd)) > :last-child:not(:first-child){
grid-column:1 / -1;max-width:calc(50% - 8px);margin:0 auto;width:100%}
}
.rwkarte{border:1px solid var(--line);border-radius:22px;background:var(--paper);
padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .25s}
.rwkarte:hover{border-color:var(--orange)}
.rwkopf{display:flex;align-items:center;gap:12px}
/* Kein Bild: Google zeigt bei den meisten Rezensierenden selbst nur
einen Buchstabenkreis. Die Farbe kommt aus dem Namen, damit dieselbe
Person immer denselben Kreis bekommt. */
.rwrund{width:42px;height:42px;border-radius:50%;flex:none;display:flex;
align-items:center;justify-content:center;font-family:'Aboreto',Georgia,serif;
font-size:15px;letter-spacing:.04em;color:#fff}
.rwwer{display:flex;flex-direction:column;min-width:0}
.rwname{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwmeta{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rwsterne{color:var(--orange);font-size:13px;letter-spacing:.14em;line-height:1}
.rwtext{margin:0;font-size:15px;line-height:1.6;color:var(--body);max-width:none}
.rwquelle{margin-top:auto;padding-top:4px;font-size:11.5px;color:var(--mute)}
/* -- Rechtstext ----------------------------------------------------
Ein Vertrag wird nicht gelesen wie ein Werbetext, sondern gesucht:
jemand will Ziffer 2.1 finden, weil er absagen muss. Darum das
Verzeichnis oben, die Ziffer in der Marginalspalte und ein Anker an
jedem Abschnitt. Die Zeile bleibt kurz, damit man beim Springen die
Zeile nicht verliert. */
.agbnav{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:16px;overflow:hidden;margin:30px 0 44px}
@media(min-width:700px){.agbnav{grid-template-columns:1fr 1fr}}
.agbnav a{display:flex;gap:12px;align-items:baseline;padding:12px 16px;background:var(--paper);
font-size:14.5px;color:var(--ink);text-decoration:none;transition:background .2s}
.agbnav a:hover{background:var(--beige)}
.agbnav a span{font-size:12px;color:var(--orange-text);min-width:22px;
font-variant-numeric:tabular-nums}
.agbteil{padding-top:34px}
.agbteil.unter{padding-top:22px}
.agbteil h2{display:flex;gap:14px;align-items:baseline;font-size:clamp(19px,2.4vw,23px);
line-height:1.25;margin:0 0 12px;scroll-margin-top:100px}
.agbteil.unter h2{font-size:clamp(16.5px,2vw,18.5px)}
.agbteil h2::after{display:none}
.agbnr{font-size:13px;color:var(--orange-text);min-width:34px;flex:none;
font-variant-numeric:tabular-nums}
.agbtext p{margin-top:11px;max-width:70ch;font-size:15.5px;line-height:1.68}
.agbtext ul{margin:12px 0 0 0;padding-left:20px;max-width:70ch}
.agbtext li{margin-top:7px;font-size:15.5px;line-height:1.6}
.agbkopf{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:16px;overflow:hidden;margin-top:26px}
.agbkopf > div{background:var(--paper);padding:14px 18px}
.agbkopf dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
.agbkopf dd{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--body)}
.bandcta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.faqbox{max-width:820px;margin:32px auto 0}
.instasec .bahn{cursor:grab}
/* -- Einlauf feiner ----------------------------------------------
Vorher: 24 px nach oben, lineares Ease. Das wirkt mechanisch, weil
alle Elemente gleich schnell ankommen. Jetzt weniger Weg, dazu eine
Spur Groesse und Unschaerfe, und die Kurve laeuft lang aus - so
bremsen die Bewegungen bei Apple.
Alle Startzustaende haengen an .js, das ein Einzeiler im Kopf setzt.
Ohne JavaScript steht damit alles sichtbar da, statt unsichtbar zu
bleiben - der Fehler waere sonst eine leere Seite. */
.js .rv{opacity:0;transform:translateY(16px) scale(.985);filter:blur(3px);
transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),
filter .8s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none;filter:blur(0)}
/* Der Unterstrich unter den Ueberschriften faehrt aus, statt da zu sein */
.js .head h2::after,.js .center h2::after,.js .band h2::after{
width:0;transition:width .9s cubic-bezier(.16,1,.3,1) .2s}
.js .head.in h2::after,.js .center.in h2::after,.js .band.in h2::after{width:44px}
/* -- Abschluss-Aufforderung nicht mehr gruen ----------------------
Der Kasten stand direkt ueber dem Fussbereich, und beide waren im
selben Dunkelgruen: zwei gleiche Bloecke uebereinander. Der
Fussbereich bleibt gruen, der Kasten wird hell. Damit endet die Seite
ruhig wie sie beginnt, und das Gruen unten schliesst sie ab. */
.band{background:var(--grad-ruhig);color:var(--ink);border:1px solid var(--line)}
.band::after{background:
radial-gradient(40% 42% at 20% 18%,rgba(255,111,0,.10),transparent 64%),
radial-gradient(44% 46% at 84% 82%,rgba(188,170,149,.22),transparent 66%)}
.band h2{color:var(--ink)}
.band p{color:var(--body)}
.band .btn.white{background:var(--orange);color:#fff}
.band .btn.white:hover{background:#E86200}
.band .btn.line{border-color:var(--line);color:var(--ink)}
.band .btn.line:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,255,255,.5)}
/* -- Orange Striche links vor Beschriftungen weg ------------------
Betroffen waren vier Stellen: die Rubrik ueber jeder Ueberschrift, der
Ruecklink im Journal, die Schrittnummern im Ablauf und die
Paketkennzeichen. Alle vier waren Flexkaesten mit Strich, Abstand und
justify-content:center - ohne Strich stand die Beschriftung dadurch
mittig statt links. Darum hier auf Blocksatz umgestellt und nur dort
zentriert, wo der ganze Abschnitt zentriert ist. */
.eyebrow::before,.aback::before,.step .lbl::before,.pkg .tag::before{content:none;display:none}
/* text-align:inherit statt links: so folgt die Beschriftung der
Ausrichtung ihres Abschnitts. Mit festem links stand die Rubrik links,
waehrend die Ueberschrift darunter zentriert blieb. */
.eyebrow,.aback,.step .lbl,.pkg .tag{display:block;gap:0;text-align:inherit}
/* -- Laufband-Beschriftung ---------------------------------------- */
.laufkopf{text-align:center;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--mute);margin:0 0 14px;max-width:none}
/* -- Zwei Wege: Kasse oder Selbstzahler --------------------------- */
.wahlsec{padding-top:52px}
.wahl{display:grid;gap:16px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:760px){.wahl{grid-template-columns:1fr 1fr;gap:20px}}
/* Vier Einstiege: bis 1180 px zwei mal zwei, darueber eine Reihe. In
einer Reihe liest sich das als eine Wahl, nicht als zwei Paare. */
@media(min-width:1180px){
.wahl.vier{grid-template-columns:repeat(4,1fr);gap:16px}
.wahl.vier .wkarte{padding:26px 22px}
.wahl.vier .wkarte h3{font-size:22px}
.wahl.vier .wkarte p{font-size:14.5px}
}
/* Die Karten laufen versetzt herein, nicht alle vier zugleich. */
.js .wahl.vier.in .wkarte{animation:kartenauf .7s cubic-bezier(.16,1,.3,1) both}
.js .wahl.vier.in .wkarte:nth-child(2){animation-delay:.07s}
.js .wahl.vier.in .wkarte:nth-child(3){animation-delay:.14s}
.js .wahl.vier.in .wkarte:nth-child(4){animation-delay:.21s}
@keyframes kartenauf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wkarte{border:1px solid var(--line);border-radius:24px;padding:30px 26px;background:var(--paper);
display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.wkarte:hover{border-color:var(--orange);transform:translateY(-3px)}
.wtag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text)}
.wkarte h3{margin-top:14px;font-size:clamp(22px,3.4vw,30px)}
.wkarte p{margin-top:12px;font-size:15.5px;line-height:1.55;flex:1;max-width:none}
.wkarte .more{margin-top:22px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--orange-text)}
.wkarte .more::after{content:" \2192"}
.wtrust{display:grid;gap:12px;grid-template-columns:1fr;margin-top:20px}
@media(min-width:760px){.wtrust{grid-template-columns:repeat(3,1fr);gap:18px}}
.wtrust>div{border-top:2px solid var(--orange);padding-top:14px}
.wtrust b{display:block;font-weight:500;font-size:14.5px;color:var(--ink)}
.wtrust span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--body)}
/* -- Suchfeld ----------------------------------------------------- */
/* Ohne JavaScript verborgen: ein Feld, das nichts tut, ist schlimmer als
kein Feld. Die Karten darunter tragen die Seite dann allein. */
.suchbox{display:none}
/* Der Kasten traegt bewusst kein rv: die Einblendung setzt filter, und ein
Element mit Filter macht einen eigenen Stapelkontext auf - die
Trefferliste lag dadurch hinter den Karten darunter. Dazu ein eigenes
z-index, damit sie in jedem Fall obenauf liegt. */
.js .suchbox{display:block;max-width:560px;margin:26px auto 0;position:relative;z-index:50}
/* -- Kopfzeile ueber die ganze Breite -----------------------------
Vorher schob ein margin-left:auto den Termin-Knopf ganz nach rechts
und alles andere klebte links zusammen - auf einem breiten Bildschirm
stand dazwischen ein leeres Feld von mehreren hundert Pixeln.
Jetzt nimmt die Verweisreihe den freien Platz und liegt mittig; links
Marke und Suche, rechts Sprache und Termin. */
@media(min-width:1330px){
.nav-in{gap:clamp(16px,1.6vw,30px)}
.nav-links{flex:1;justify-content:center;gap:clamp(14px,1.3vw,28px);margin-left:0}
.nav-links a{font-size:12.5px}
nav.top .btn{margin-left:0}
}
/* Die Umschaltung auf das Burger-Menue liegt in der Vorlage bei 1270px.
Seit "Events" als achter Punkt in der Leiste steht, reicht das nicht
mehr: bei 1270 schob die Leiste den Terminknopf 68 Pixel aus dem
Bild - nachgemessen, nicht geschaetzt. Darum hier auf 1330 gezogen.
Die Vorlage bleibt unangetastet, diese Regeln stehen spaeter und
gewinnen. */
@media(max-width:1329px){
.nav-links{display:none!important}
.burger{display:grid!important}
.mnav,.mscrim{display:block!important}
.nav-in .lang{display:none}
}
@media(min-width:1330px){
.nav-links{display:flex!important}
.burger,.mnav,.mscrim{display:none!important}
.nav-in .lang{display:flex}
}
/* Bis dahin bleibt der Knopf rechts aussen, dort gibt es nichts zu
verteilen: die Verweise liegen im aufklappbaren Menue. */
/* In der Kopfzeile: schmal, direkt neben der Wortmarke. Erst ab 1330 px,
darunter blendet die Kopfzeile ohnehin auf den Burger um und das Feld
steht oben im Menue. */
.js .suchnav{display:none}
@media(min-width:1330px){
.js .suchnav{display:block;margin:0;width:clamp(190px,16vw,280px);flex:none}
.js .suchnav .sfeld{padding:0 14px;border-radius:999px;background:rgba(255,249,242,.75)}
.js .suchnav .sfeld input{padding:9px 0;font-size:13.5px}
.js .suchnav .sfeld svg{width:15px;height:15px}
/* Die Liste haengt unter der Kopfzeile und muss ueber allem liegen. */
.js .suchnav .strefferliste{top:calc(100% + 12px);min-width:330px;left:0;right:auto}
}
/* Im aufklappbaren Menue: ueber allen Verweisen, volle Breite. */
.js .suchmenu{display:block;margin:0 0 18px;max-width:none}
.js .suchmenu .sfeld{background:#fff}
@media(min-width:1330px){.js .suchmenu{display:none}}
.sfeld{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
border-radius:999px;background:var(--paper);padding:0 20px;
transition:border-color .2s,box-shadow .2s}
.sfeld:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,111,0,.12)}
.sfeld svg{width:18px;height:18px;color:var(--orange);flex:none}
.sfeld input{flex:1;border:0;background:none;outline:none;padding:15px 0;
font-family:inherit;font-size:15.5px;color:var(--ink);min-width:0}
.sfeld input::placeholder{color:var(--mute)}
.sfeld input::-webkit-search-cancel-button{-webkit-appearance:none}
.strefferliste{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
list-style:none;margin:0;padding:6px;background:var(--paper);
border:1px solid var(--line);border-radius:20px;
box-shadow:0 26px 60px -34px rgba(108,40,3,.5);text-align:left}
.strefferliste li{margin:0}
.strefferliste a{display:flex;align-items:baseline;gap:10px;padding:11px 14px;
border-radius:14px;font-size:15px;color:var(--ink)}
.strefferliste a small{font-size:12px;color:var(--mute);margin-left:auto;flex:none}
.strefferliste a:hover,.strefferliste a.an{background:var(--beige);color:var(--orange-text)}
.strefferliste .leer{padding:12px 14px;font-size:14.5px;color:var(--mute);line-height:1.5}
.strefferliste .leer a{display:inline;padding:0;color:var(--orange-text);text-decoration:underline}
/* -- Warum es die Praxis gibt ------------------------------------- */
/* 78 statt 56: stammt aus der Zeit vor der Abstandsregel und stand auf
demselben Grund wie die Nachbarn - also Leerraum ohne Anlass. */
.warumsec{padding:56px 0}
.wgrid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:900px){.wgrid{grid-template-columns:minmax(320px,.9fr) 1.1fr;gap:60px;align-items:start}}
.wslogan{margin-top:14px;font-size:clamp(34px,6vw,62px);line-height:1.02}
.wlinks .lead{margin-top:20px;max-width:38ch}
.wpunkte{display:grid;gap:0}
/* Zeichen links neben dem Punkt, nicht darueber: vier Kreise
untereinander wuerden die Spalte doppelt so hoch machen. */
.wpunkt{padding:22px 0;border-top:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
.wpunkt .ksym{width:38px;height:38px;margin-bottom:0;grid-row:1 / span 2}
.wpunkt .ksym svg{width:19px;height:19px}
.wpunkt b,.wpunkt p{grid-column:2}
.wpunkt:hover .ksym{background:var(--orange);border-color:var(--orange)}
.wpunkt:hover .ksym svg{stroke:#fff}
.wpunkt:first-child{border-top:0;padding-top:0}
@media(min-width:900px){.wpunkt:first-child{padding-top:6px}}
.wpunkt b{display:block;font-family:'Aboreto',Georgia,serif;font-weight:400;
font-size:clamp(19px,2.4vw,23px);color:var(--ink);letter-spacing:.01em}
.wpunkt p{margin-top:9px;font-size:15.5px;line-height:1.62;max-width:52ch}
/* Die Punkte laufen einzeln herein, von links, wie eine Aufzaehlung, die
sich selbst schreibt. */
.js .wpunkt{transition-delay:.06s}
.js .wpunkt:nth-child(2){transition-delay:.14s}
.js .wpunkt:nth-child(3){transition-delay:.22s}
.js .wpunkt:nth-child(4){transition-delay:.3s}
/* -- Chipwand: kurze Fragen --------------------------------------- */
.fitsec{padding:56px 0}
.fitsec .lead.mitte{margin:16px auto 0;max-width:58ch;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.chip{border:1px solid var(--line);border-radius:999px;padding:11px 18px;
font-size:15px;line-height:1.2;color:var(--body);background:var(--paper);
transition:border-color .22s,color .22s,transform .22s,background .22s}
.chip:hover{border-color:var(--orange);color:var(--orange-text);
transform:translateY(-2px);background:#fff}
/* Jeder zweite Chip etwas anders gewichtet, damit die Wand nicht wie ein
Formular aussieht. */
.chip:nth-child(3n){font-family:'Aboreto',Georgia,serif;letter-spacing:.02em}
@media(min-width:700px){.chip{font-size:16px;padding:12px 20px}}
.fitfuss{margin:30px auto 0;max-width:46ch;text-align:center;font-size:15.5px;
line-height:1.6;color:var(--mute)}
/* -- Anklickbare Pille im Einstieg -------------------------------- */
.pille.pklick{transition:border-color .22s,transform .22s}
.pille.pklick:hover{border-color:var(--orange);transform:translateY(-2px)}
.pille.pklick b{color:var(--orange-text)}
/* -- Ablauf als Kacheln ------------------------------------------- */
.wegsec{padding:56px 0}
.wegsec .lead.mitte{margin:16px auto 0;max-width:60ch;text-align:center}
.wegkacheln{display:grid;gap:14px;grid-template-columns:1fr;margin-top:38px}
@media(min-width:700px){.wegkacheln{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1180px){.wegkacheln{grid-template-columns:repeat(4,1fr)}}
.wegkachel{border:1px solid var(--line);border-radius:26px;overflow:hidden;
background:var(--paper);display:flex;flex-direction:column;
transition:border-color .24s,transform .24s}
.wegkachel:hover{border-color:var(--orange);transform:translateY(-2px)}
.wkbild{aspect-ratio:16/11;overflow:hidden;background:var(--sand);position:relative}
.wkbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wkbody{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.wkbody h3{margin-top:2px;font-size:clamp(18px,2.2vw,21px);line-height:1.25}
.wkbody p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--body)}
.wkbody .sliste{margin-top:14px}
/* Die vier laufen versetzt herein, wie die Karten weiter oben. */
.js .wegkacheln.in .wegkachel{animation:kartenauf .7s cubic-bezier(.16,1,.3,1) both}
.js .wegkacheln.in .wegkachel:nth-child(2){animation-delay:.08s}
.js .wegkacheln.in .wegkachel:nth-child(3){animation-delay:.16s}
.js .wegkacheln.in .wegkachel:nth-child(4){animation-delay:.24s}
/* -- Willkommen mit dem Zeichen ----------------------------------- */
.willkommen{padding-bottom:64px}
.wkmitte{max-width:860px;margin:0 auto;text-align:center}
.wkmitte .eyebrow{justify-content:center;margin-top:8px}
/* Gruss und Zeichen sind eine Ueberschrift, aber sie sind nicht
gleich wichtig. "Welcome to" ist die Anrede, das Zeichen ist die
Aussage - darum steht das Wort deutlich kleiner als eine normale
Seitenueberschrift. Vorher trugen beide dasselbe Gewicht: 60 px
Versalien fuer zwei Fuellwoerter neben einem 335 px breiten
Schriftzug, und der Einstieg nahm 74 Prozent des ersten Bildschirms. */
.wkgruss{margin-top:14px;display:block;font-size:clamp(23px,2.7vw,36px)}
/* 38vw, nicht 32: sonst ist das Zeichen auf dem Tablet kleiner als auf
dem Handy, weil dort die eigene Regel darunter groesser rechnet. */
/* Das Zeichen bleibt das groesste Element, aber es muss den Bildschirm
nicht fuellen: rund sieben Mal die Schriftgroesse des Grusses ist das
Verhaeltnis, in dem beides zusammengehoert, ohne zu konkurrieren. */
.wklogo{width:clamp(185px,21vw,262px);height:auto;display:block;margin:16px auto 0}
.wkmitte .lead{margin:26px auto 0;max-width:56ch}
@media(max-width:599px){
.wklogo{width:min(52vw,190px);margin-top:12px}
}
/* -- Gruenblock: die Gruenderin ----------------------------------- */
.gruenblock{background:var(--green);color:#E4E2DA;padding:78px 0}
.gbin{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:900px){.gbin{grid-template-columns:1fr 1fr;gap:60px;align-items:center}}
.gruenblock h2{color:#fff;margin-top:12px}
.gruenblock .lead{color:var(--green-soft);margin-top:18px;max-width:44ch}
.gruenblock .eyebrow{color:var(--green-soft)}
.gruenblock .eyebrow::before{background:var(--orange-lt)}
.gbbilder{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* Nur ein Bild im gruenen Block: das zweite steht unten in der Gruppe. */
.gbbilder.eins{grid-template-columns:minmax(0,320px)}
/* Derselbe Bogen wie an den Teamkarten - die Gruenderin steht sonst als
einzige in einem Rechteck, waehrend alle anderen in der Nische stehen. */
.gbbild{border-radius:50% 50% 16px 16px / 36% 36% 16px 16px;overflow:hidden;
aspect-ratio:4/5;position:relative;background:rgba(255,255,255,.08)}
.gbbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Der Platzhalter sagt, was fehlt, statt einfach leer zu sein. */
.gbbild.leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
border:1px dashed rgba(226,226,218,.45)}
.gbbild.leer span{font-family:'Aboreto',Georgia,serif;font-size:19px;color:var(--green-soft)}
.gbbild.leer small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(226,226,218,.6)}
.gbname{grid-column:1/-1;margin-top:4px}
.gbname b{display:block;font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:20px;color:#fff}
.gbname span{display:block;margin-top:3px;font-size:12.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--orange-lt)}
/* Vier Teamgruppen hintereinander: mit dem vollen Abschnittsabstand
standen zwischen der letzten Karte und der naechsten Ueberschrift
208 px. Innerhalb der Gruppen reicht die Haelfte, sie gehoeren ja
zusammen. */
.teamsec{padding:56px 0}
.teamsec .head{margin-bottom:0}
/* -- Spur: Stationen auf einer Linie ------------------------------ */
.spur{list-style:none;padding:0;margin:38px 0 0;display:grid;gap:24px;
grid-template-columns:1fr;position:relative}
@media(min-width:900px){
.spur{grid-template-columns:repeat(var(--sn,5),minmax(0,1fr));gap:0}
/* Die Linie liegt hinter den Nummern, auf ihrer Hoehe. */
.spur::before{content:"";position:absolute;left:10%;right:10%;top:19px;height:1px;
background:var(--line)}
}
.spurpunkt{position:relative;padding-right:18px}
@media(min-width:900px){.spurpunkt{text-align:center;padding:0 12px}}
.spnum{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:var(--orange);color:#fff;font-family:'Aboreto',Georgia,serif;font-size:16px;
position:relative;z-index:1}
@media(min-width:900px){.spnum{margin:0 auto}}
.spurpunkt b{display:block;margin-top:14px;font-family:'Aboreto',Georgia,serif;font-weight:400;
font-size:18px;color:var(--ink)}
.sptext{display:block;margin-top:7px;font-size:14.5px;line-height:1.55;color:var(--body)}
.spurnote{margin:34px auto 0;max-width:70ch;text-align:center;font-size:14px;line-height:1.6;
color:var(--mute)}
/* -- Infusionskarten in unserer Kartensprache --------------------- */
/* Ueberschreibt die Vorlage: heller Grund, Haarlinie, oranger Strich
oben - wie .fkkarte, .wkarte und .paddon. Die dunkle Fassung und die
sechs Farbverlaeufe entfallen. */
.icard{background:var(--paper);border:1px solid var(--line);overflow:hidden}
.icard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--orange)}
.icard:hover{border-color:var(--orange);box-shadow:0 18px 40px -26px rgba(108,40,3,.45)}
/* Die grosse Nummer im Hintergrund ist weg. Sie zaehlte eine Reihenfolge,
die es nicht gibt - die Bahn wird gefiltert, dann stimmt 001, 002, 003
ohnehin nicht mehr. Die Regel dazu steht noch in der Vorlage oben und
greift nun ins Leere. */
/* Die Inhaltsstoffzeile ist einem Zeichen gewichen. Sie stand oben und
hielt mit margin-top:auto den Abstand nach unten - das macht jetzt
die Kategoriezeile, sonst kleben Name und Preis am Zeichen. */
.icard .isym{position:relative;z-index:1;width:52px;height:52px;display:grid;place-items:center;
border-radius:50%;background:var(--beige);border:1px solid var(--line);
transition:background .22s,border-color .22s}
.icard .isym svg{width:26px;height:26px;fill:none;stroke:var(--orange);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s}
.icard:hover .isym{background:var(--orange);border-color:var(--orange)}
.icard:hover .isym svg{stroke:#fff}
.icard .cat{color:var(--orange-text);margin-top:auto;padding-top:22px}
.icard .tg span{background:var(--beige);color:var(--body);border:1px solid var(--line)}
/* Die Lieblinge tragen den Markenton, damit man sie in der Bahn sieht,
ohne den Filter zu benutzen. */
.icard .tg span.fav{background:var(--orange);color:#fff;border-color:var(--orange)}
.icard .pr{color:var(--ink);font-weight:500}
/* -- Zusammenspiel: eine Messung, vier Anschluesse ---------------- */
.verbund{display:grid;gap:16px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:900px){.verbund{grid-template-columns:minmax(0,320px) 1fr;gap:26px;align-items:start}}
.vquelle{border:1px solid var(--orange);border-radius:22px;padding:24px 22px;
background:var(--paper);box-shadow:0 0 0 3px rgba(255,111,0,.12)}
.vlbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text)}
.vquelle b{display:block;margin-top:8px;font-family:'Aboreto',Georgia,serif;font-weight:400;
font-size:clamp(20px,2.6vw,25px);color:var(--ink)}
.vquelle p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--body)}
.vziele{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.vziele{grid-template-columns:1fr 1fr}}
/* Der Strich links ist die Verbindung zur Quelle: er sagt "kommt von
dort", ohne dass eine Linie gezeichnet werden muesste. */
.vziel{border:1px solid var(--line);border-left:3px solid var(--orange);
border-radius:6px 18px 18px 6px;padding:18px 18px 20px;background:var(--paper);
transition:border-color .22s,transform .22s}
.vziel:hover{border-color:var(--orange);transform:translateX(3px)}
.vziel b{display:block;font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:17.5px;
color:var(--ink)}
.vziel span{display:block;margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--body)}
.vziel:hover b{color:var(--orange-text)}
/* -- Programme zum Aufklappen ------------------------------------- */
.proggitter{display:grid;gap:10px;margin-top:34px}
.prog{border:1px solid var(--line);border-radius:20px;background:var(--paper);
overflow:hidden;transition:border-color .22s}
.prog[open]{border-color:var(--orange)}
.prog>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:8px 16px;flex-wrap:wrap;padding:18px 22px}
.prog>summary::-webkit-details-marker{display:none}
.prog>summary:hover .pname{color:var(--orange-text)}
.ptag2{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text);
flex:none;min-width:96px}
.pname{font-family:'Aboreto',Georgia,serif;font-size:clamp(17px,2.2vw,20px);color:var(--ink);
flex:1;min-width:200px;transition:color .2s}
.pbetrag{font-size:15px;color:var(--ink);flex:none}
.prog>summary>i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
display:grid;place-items:center;font-style:normal;font-size:15px;color:var(--orange-text);
flex:none;transition:transform .25s}
.prog[open]>summary>i{transform:rotate(45deg)}
.pinhalt{padding:2px 22px 24px}
.pinhalt>p{font-size:15.5px;line-height:1.6;max-width:62ch}
.penth{display:block;margin-top:20px;font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--orange-text)}
.pinhalt .dlist{margin-top:12px}
/* Zusatzangebote als waehlbare Kaesten, nicht als Zeilenliste: das
Ankreuzen ist eine Wahl, und eine Wahl liest sich als Flaeche besser
als als Zeile. Dasselbe Muster wie die Ortswahl bei der Buchung. */
.paddons{display:grid;gap:10px;grid-template-columns:1fr;margin-top:14px}
@media(min-width:640px){.paddons{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.paddons{grid-template-columns:repeat(3,1fr)}}
.paddon{position:relative;display:flex;flex-direction:column;gap:6px;
border:1px solid var(--line);border-radius:16px;padding:16px 16px 15px;
background:#fff;cursor:pointer;
transition:border-color .2s,box-shadow .2s,transform .2s}
.paddon:hover{border-color:var(--orange);transform:translateY(-2px)}
/* Das echte Feld bleibt bedienbar, ist aber unsichtbar - der Haken
rechts oben zeigt den Zustand. Ohne Farbe erkennbar, weil sich die
Flaeche aendert. */
.paddon input{position:absolute;opacity:0;width:0;height:0;margin:0}
.pahaken{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;
border:1px solid var(--line);background:var(--paper);transition:.2s}
.paddon input:focus-visible~.pahaken{outline:2px solid var(--orange);outline-offset:2px}
.paname{font-size:14.5px;line-height:1.4;color:var(--body);padding-right:26px}
.papreis{font-size:13.5px;color:var(--mute);margin-top:auto}
.paddon.an{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,111,0,.14)}
.paddon.an .pahaken{background:var(--orange);border-color:var(--orange);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size:13px;background-position:center;background-repeat:no-repeat}
.paddon.an .paname{color:var(--ink)}
.paddon.an .papreis{color:var(--orange-text)}
/* Die Summe als eigener Kasten, nicht als Zeile unter dem Strich. */
.pgesamt{margin-top:16px;border:1px solid var(--orange);border-radius:16px;
padding:14px 18px;background:var(--paper);font-size:15.5px;color:var(--body)}
.pgesamt[hidden]{display:none}
.pgesamt b{font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:19px;
color:var(--orange-text)}
/* Die enthaltenen Leistungen zweispaltig, sonst wird die Spalte sehr
lang und das Auge verliert die Zeile. */
@media(min-width:820px){
.pinhalt .dlist{grid-template-columns:1fr 1fr;column-gap:26px}
}
.pknopf{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* -- Sachkarten: Stichwort mit einem Satz -------------------------- */
.fkgrid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:700px){.fkgrid{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:1100px){.fkgrid{grid-template-columns:repeat(var(--fn,3),minmax(0,1fr))}}
/* Bei vier Spalten wird die Karte schmaler, darum etwas knapper gesetzt. */
@media(min-width:1100px){
.fkgrid[style*="--fn:4"] .fkkarte{padding:20px 18px 22px}
.fkgrid[style*="--fn:4"] .fkkarte h3{font-size:18px}
.fkgrid[style*="--fn:4"] .fkkarte p{font-size:14.5px}
}
.fkkarte{border:1px solid var(--line);border-radius:22px;padding:24px 22px 26px;
background:var(--paper);transition:border-color .24s,transform .24s}
.fkkarte:hover{border-color:var(--orange);transform:translateY(-2px)}
/* Der Balken oben ist der einzige Schmuck: er richtet die Karten
optisch aus, ohne dass jede eine Ueberschriftfarbe braucht. */
.fkkarte h3{position:relative;padding-top:16px;font-size:clamp(18px,2.2vw,20px);
line-height:1.25;color:var(--ink)}
.fkkarte h3::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;
background:var(--orange)}
.fkkarte p{margin-top:11px;font-size:15px;line-height:1.6;color:var(--body)}
/* Karten mit Zeichen: das Symbol ersetzt den Balken ueber der Zeile.
Dasselbe runde Feld wie auf den Infusions- und Nachsorgekarten,
damit die ganze Website eine Handschrift hat. */
.fkkarte.mitzeichen h3{padding-top:16px}
.fkkarte.mitzeichen h3::before{display:none}
.fksym{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
background:var(--beige);border:1px solid var(--line);
transition:background .22s,border-color .22s}
.fksym svg{width:23px;height:23px;fill:none;stroke:var(--orange);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s}
.fkkarte:hover .fksym{background:var(--orange);border-color:var(--orange)}
.fkkarte:hover .fksym svg{stroke:#fff}
@media(min-width:1100px){
.fkgrid[style*="--fn:4"] .fksym{width:42px;height:42px}
.fkgrid[style*="--fn:4"] .fksym svg{width:21px;height:21px}
}
/* -- Bilderreihe zum Durchwischen ---------------------------------- */
/* Seitwaerts statt untereinander: sechs Fotos hintereinander machen
die Seite sonst doppelt so lang, und keines wird angeschaut. Die
Reihe rastet ein, damit sie nicht zwischen zwei Bildern stehen
bleibt. */
.gbandrahmen{margin-top:34px}
.gband{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;padding:4px 0 14px;
scrollbar-width:thin;scrollbar-color:var(--orange) transparent}
.gband::-webkit-scrollbar{height:6px}
.gband::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.gband::-webkit-scrollbar-thumb{background:var(--orange);border-radius:99px}
.gband:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:24px}
/* Solange die Reihe von allein laeuft, darf sie nicht einrasten - sonst
zieht das Einrasten gegen die Bewegung. Ab dem ersten Wisch haelt sie
an und rastet wieder ein. */
.gband.autolauf{scroll-snap-type:none;scrollbar-width:none}
.gband.autolauf::-webkit-scrollbar{height:0}
.gband.autolauf>*{scroll-snap-align:none}
.gband.autolauf.haelt{scroll-snap-type:x mandatory;scrollbar-width:thin}
.gband.autolauf.haelt::-webkit-scrollbar{height:6px}
.gband.autolauf.haelt>*{scroll-snap-align:center}
.gbild{flex:0 0 auto;width:clamp(230px,74vw,340px);margin:0;scroll-snap-align:center;
position:relative}
@media(min-width:900px){.gbild{width:340px;scroll-snap-align:start}}
/* Feste Hoehe statt Seitenverhaeltnis: die Bilder tragen im Markup
ihre eigene Hoehe als Attribut, und dagegen kommt aspect-ratio nicht
an - die Reihe wurde dadurch stellenweise 1160 Pixel hoch. */
.gbild img{width:100%;height:clamp(300px,78vw,420px);object-fit:cover;
border-radius:22px;display:block;border:1px solid var(--line)}
.gbild figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--mute)}
.gbandnote{margin:2px 0 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--mute)}
@media(min-width:900px){.gbandnote{display:none}}
/* -- Nachsorgekarten: Zeichen, Stichwort, ein Satz ----------------- */
/* Kartensprache wie ueberall: heller Grund, Haarlinie, oranger Strich
oben. Das Zeichen ist dasselbe Bildprinzip wie auf den Infusions-
karten - Strichgrafik in einem runden Feld, das beim Ueberfahren
umschlaegt. */
.acgrid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:700px){.acgrid{grid-template-columns:1fr 1fr;gap:14px}}
/* -- Ungerade Anzahl im Zweispalter --------------------------------
Die Regeln weiter oben stellen die letzte Reihe erst ab 1100 px
mittig. Dazwischen laufen dieselben Gitter zweispaltig, und bei
ungerader Anzahl stand die letzte Karte links mit einem Loch daneben
- gemessen auf der Startseite, bei Partner und bei Massage.
:last-child:nth-child(odd) trifft genau den Fall "ungerade
Gesamtzahl", ohne dass der Erzeuger etwas mitgeben muss;
:not(:first-child) nimmt Gitter mit nur einer Karte aus, die ihre
Breite selbst setzen. Die Bereiche sind je Gitter verschieden, weil
sie an verschiedenen Punkten dreispaltig werden. */
@media(min-width:600px) and (max-width:899px){
.lgrid:has(> :last-child:nth-child(odd)) > :last-child:not(:first-child){
grid-column:1 / -1;max-width:calc(50% - 7px);margin:0 auto;width:100%}
}
@media(min-width:700px) and (max-width:999px){
.ogrid:has(> :last-child:nth-child(odd)) > :last-child:not(:first-child){
grid-column:1 / -1;max-width:calc(50% - 8px);margin:0 auto;width:100%}
}
@media(min-width:700px) and (max-width:1099px){
.fkgrid:has(> :last-child:nth-child(odd)) > :last-child:not(:first-child),
.acgrid:has(> :last-child:nth-child(odd)) > :last-child:not(:first-child){
grid-column:1 / -1;max-width:calc(50% - 7px);margin:0 auto;width:100%}
}
/* Die Spaltenzahl kommt jetzt vom Erzeuger, sonst stehen drei Karten in
einem Vierergitter und lassen rechts eine Spalte leer. */
@media(min-width:1100px){.acgrid{grid-template-columns:repeat(var(--acn,4),minmax(0,1fr))}}
.ackarte{position:relative;overflow:hidden;background:var(--paper);
border:1px solid var(--line);border-radius:22px;padding:24px 22px 26px;
transition:border-color .24s,transform .24s}
.ackarte::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--orange)}
.ackarte:hover{border-color:var(--orange);transform:translateY(-2px)}
.acsym{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
background:var(--beige);border:1px solid var(--line);
transition:background .22s,border-color .22s}
.acsym svg{width:26px;height:26px;fill:none;stroke:var(--orange);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s}
.ackarte:hover .acsym{background:var(--orange);border-color:var(--orange)}
.ackarte:hover .acsym svg{stroke:#fff}
.ackarte h3{margin-top:18px;font-size:clamp(18px,2.2vw,20px);line-height:1.25;
color:var(--ink)}
.ackarte p{margin-top:11px;font-size:15px;line-height:1.6;color:var(--body)}
/* -- Bild mit Kacheln daneben --------------------------------------
Preisseite: das Foto links, die drei Kacheln zur Kostenuebernahme
rechts uebereinander. Die Hoehe gibt der Stapel vor; das Bild hat
darum ab 900 px keine eigene Hoehe, sondern wird vom Gitter auf die
Zeilenhoehe gezogen (align-items: stretch ist die Vorgabe). So
schliessen beide Spalten unten buendig ab, auch wenn die Texte
spaeter laenger werden. */
.kassegrid{display:grid;gap:16px;grid-template-columns:1fr}
.kassebild{position:relative;overflow:hidden;border-radius:26px;background:var(--sand);
height:clamp(230px,56vw,320px)}
.kassebild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kassekarten{display:flex;flex-direction:column;gap:14px}
/* Bild rechts, Kacheln links. Die Reihenfolge im Quelltext bleibt
Bild-dann-Kacheln, weil sie auf dem Handy so richtig ist; getauscht
wird nur die Spalte, und das erst ab 900 px. */
@media(min-width:900px){
.kassegrid{grid-template-columns:1.18fr .82fr;gap:24px}
.kassebild{height:auto;min-height:100%;grid-column:2;grid-row:1}
.kassekarten{grid-column:1;grid-row:1}
}
/* Die drei Kacheln teilen sich die Hoehe gleichmaessig und setzen das
Zeichen neben den Text statt darueber - untereinander waeren drei
Kreise ueber drei Absaetzen eine sehr hohe Spalte. */
.ackarte.kk{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;flex:1}
.ackarte.kk .acsym{flex:none;width:44px;height:44px}
.ackarte.kk .acsym svg{width:22px;height:22px}
.ackarte.kk h3{margin-top:0;font-size:17px}
.ackarte.kk p{margin-top:7px;font-size:14.5px;line-height:1.55}
@media(max-width:599px){
.ackarte.kk{flex-direction:column;gap:0}
.ackarte.kk h3{margin-top:14px}
}
.fkschluss{margin:30px auto 0;max-width:62ch;font-size:16.5px;line-height:1.62;
color:var(--ink);text-align:center}
/* Der Ablauf sass mittig in einem Bildschirm voller Hoehe. Ueber der
Ueberschrift stand dadurch ein leeres Band von rund 200 px, direkt
nach dem Partnerlaufband. Jetzt sitzt die Ueberschrift oben, die
Stufen bleiben optisch mittig, die Punkte stehen unten. */
@media(min-width:900px){
.stufen-in{justify-content:flex-start;padding:clamp(28px,6vh,64px) 0 clamp(22px,4vh,44px)}
.stufen-bahn{margin-top:auto;margin-bottom:auto}
}
/* -- Ablauf je Bereich -------------------------------------------- */
.ablaufsec{padding:74px 0}
.bgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:34px}
@media(min-width:700px){.bgrid{grid-template-columns:repeat(3,1fr);gap:14px}}
/* Alle Bereiche in einer Reihe: die Spaltenzahl ist die Anzahl der
Kacheln, nicht eine feste Sechs - sonst rutscht die siebte nach
unten. Schrift und Abstand werden dabei etwas knapper. */
@media(min-width:1100px){
.bgrid{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:10px}
.bkname{padding:10px 12px 12px;font-size:14px}
.bkachel.an .bkbild::after{height:3px}
}
.bkachel{padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;
background:var(--paper);cursor:pointer;font-family:inherit;display:block;text-align:left;
transition:border-color .24s,transform .24s,box-shadow .24s}
.bkachel:hover{border-color:var(--orange);transform:translateY(-3px)}
.bkachel.an{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,111,0,.14)}
.bkbild{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sand);position:relative}
.bkbild img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.16,1,.3,1);filter:saturate(.86)}
.bkachel:hover .bkbild img{transform:scale(1.05)}
.bkachel.an .bkbild img{filter:none}
/* Der gewaehlte Bereich bekommt einen Balken in Markenfarbe unter dem
Bild - erkennbar auch ohne Farbsehen, weil er die Flaeche veraendert. */
.bkachel.an .bkbild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
background:var(--orange)}
.bkname{display:block;padding:12px 14px 14px;font-family:'Aboreto',Georgia,serif;
font-size:15px;letter-spacing:.02em;color:var(--ink);line-height:1.25}
.bkachel.an .bkname{color:var(--orange-text)}
/* Die Tafel mit den vier Schritten */
.js .btafel{display:none}
.js .btafel.an{display:block;animation:tafelauf .55s cubic-bezier(.16,1,.3,1) both}
@keyframes tafelauf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.btafel{margin-top:38px}
.btkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;
border-top:1px solid var(--line);padding-top:22px}
.btkopf h3{font-size:clamp(24px,3.4vw,32px);flex:none}
.btkopf p{font-size:15.5px;line-height:1.55;color:var(--body);flex:1;min-width:240px;max-width:52ch}
.btkopf .btn{flex:none}
.skacheln{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:700px){.skacheln{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1180px){.skacheln{grid-template-columns:repeat(4,1fr)}}
.skachel{border:1px solid var(--line);border-radius:26px;padding:28px 26px 30px;
background:var(--paper);display:flex;flex-direction:column;min-height:250px;
transition:border-color .24s,transform .24s}
.skachel:hover{border-color:var(--orange);transform:translateY(-2px)}
/* Die Nummer traegt die Kachel: gross, in Markenfarbe, mit Haarlinie
darunter - so liest man die Reihenfolge, bevor man den Text liest. */
.sknum{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-text);
padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.skachel h4{font-family:'Aboreto',Georgia,serif;font-weight:400;letter-spacing:.01em;
font-size:clamp(18px,2.2vw,21px);line-height:1.24;color:var(--ink)}
.skachel p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--body)}
/* Die vier Kacheln laufen versetzt herein, nicht alle zugleich. */
.js .btafel.an .skachel{animation:kartenauf .65s cubic-bezier(.16,1,.3,1) both}
.js .btafel.an .skachel:nth-child(2){animation-delay:.08s}
.js .btafel.an .skachel:nth-child(3){animation-delay:.16s}
.js .btafel.an .skachel:nth-child(4){animation-delay:.24s}
/* -- Ortswahl vor der Buchung ------------------------------------- */
.ortwahl{margin-top:34px}
.owgrid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:20px}
@media(min-width:640px){.owgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.owgrid{grid-template-columns:repeat(4,1fr)}}
.owkarte{text-align:left;font-family:inherit;cursor:pointer;
border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px;
background:var(--paper);display:flex;flex-direction:column;gap:4px;
transition:border-color .22s,transform .22s,box-shadow .22s;position:relative}
.owkarte:hover{border-color:var(--orange);transform:translateY(-2px)}
/* Der gewaehlte Ort traegt den Markenton als Rahmen und einen Haken.
Farbe allein reicht nicht: das Zeichen sagt es auch ohne Farbsehen. */
.owkarte.an{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,111,0,.14)}
.owkarte.an::after{content:"";position:absolute;top:14px;right:14px;width:18px;height:18px;
border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.owart{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text)}
.owkarte b{font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:19px;
color:var(--ink);letter-spacing:.01em;padding-right:24px}
.owadr{font-size:14px;line-height:1.45;color:var(--body)}
.owweg{margin-top:6px;font-size:12.5px;color:var(--mute)}
/* Mitgebrachte Terminart. Steht ueber dem Fenster, in Markenfarbe
abgesetzt, damit die Zuordnung nicht untergeht. */
.buchart{margin-top:22px;border:1px solid var(--orange);border-radius:20px;
padding:16px 20px;background:var(--paper);display:flex;flex-wrap:wrap;
align-items:baseline;gap:4px 14px}
.buchart[hidden]{display:none}
.buchart b{font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:20px;color:var(--ink)}
.buchart span:not(.bzlbl){font-size:14.5px;line-height:1.5;color:var(--body)}
.buchart em{font-style:normal;color:var(--orange-text)}
/* Der naechste freie Termin kommt erst nach der Abfrage dazu und
bekommt eine eigene Zeile, damit nichts springt, wenn er ausbleibt. */
.buchart .bfrei{flex-basis:100%;margin-top:4px;font-size:14.5px;color:var(--orange-text);
font-weight:500}
.buchart .bfrei[hidden]{display:none}
/* Zeile ueber dem Buchungsfenster: fuer welche Adresse der Termin gilt */
.buchziel{margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
border-left:3px solid var(--orange);padding:4px 0 4px 16px}
.bzlbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text);
flex-basis:100%}
.buchziel b{font-family:'Aboreto',Georgia,serif;font-weight:400;font-size:19px;color:var(--ink)}
.buchziel span:not(.bzlbl){font-size:14.5px;color:var(--body)}
.buchbox{margin-top:14px}
/* .buchziel und .buchfuss setzen display:flex - das schlaegt die
Browserregel [hidden]{display:none}, sonst blieben sie beim Wechsel
auf einen anderen Ort stehen. */
.buchziel[hidden],.buchfuss[hidden],.buchbox[hidden]{display:none}
/* Orte ohne Online-Kalender. Ohne JavaScript stehen sie alle da, mit
JavaScript zeigt die Seite genau den gewaehlten. */
.buchalt{margin-top:26px;border:1px solid var(--line);border-radius:24px;
padding:26px 24px;background:var(--paper)}
.js .buchalt{display:none}
.js .buchalt.an{display:block}
.baltkopf{border-left:3px solid var(--orange);padding-left:16px}
.baltkopf b{display:block;margin-top:3px;font-family:'Aboreto',Georgia,serif;font-weight:400;
font-size:21px;color:var(--ink)}
.baltkopf span:not(.bzlbl){display:block;font-size:14.5px;color:var(--body)}
.buchalt p{margin-top:16px;font-size:15.5px;line-height:1.6;max-width:60ch}
.baltknopf{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.baltnote{font-size:13.5px;color:var(--mute);margin-top:16px}
/* -- Sprechblase am WhatsApp-Knopf -------------------------------- */
.wablase{position:fixed;right:20px;bottom:88px;z-index:66;max-width:250px;
background:var(--paper);border:1px solid var(--line);border-radius:20px 20px 6px 20px;
box-shadow:0 22px 50px -26px rgba(108,40,3,.5);
opacity:0;transform:translateY(10px) scale(.96);transition:opacity .45s cubic-bezier(.16,1,.3,1),
transform .45s cubic-bezier(.16,1,.3,1)}
.wablase.auf{opacity:1;transform:none}
.wablase>a{display:block;padding:16px 18px 15px;font-size:15px;line-height:1.4;color:var(--ink)}
.wablase>a b{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;font-weight:500;color:var(--orange-text)}
.wablase>a:hover b{text-decoration:underline}
.wazu{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;
border:1px solid var(--line);background:var(--paper);color:var(--mute);
font-size:14px;line-height:1;cursor:pointer;padding:0}
.wazu:hover{color:var(--ink);border-color:var(--ink)}
/* Unter 900 px ist der schwebende Knopf verborgen, dort steht das
WhatsApp-Zeichen links in der unteren Leiste - die Blase zeigt dorthin. */
@media(max-width:899px){
.wablase{right:auto;left:14px;bottom:86px;max-width:230px;
border-radius:20px 20px 20px 6px}
}
/* -- Dunkles Zahlenband ------------------------------------------- */
/* Zweiter Anlauf, minimalistisch. Vorher eine dunkle Flaeche ueber die
ganze Breite, 658 px hoch, mit Verlauf, Rubrik, Ueberschrift und
Fliesstext ueber vier grossen Zahlen - viel Aufwand fuer vier Angaben.
Jetzt eine ruhige Zeile: Ueberschrift links, Zahlen rechts, Haarlinien
statt Farbflaeche. Keine Quellenzeile mehr, die Angabe steht in der
Beschriftung. Von 658 auf etwa 250 px. */
.zband{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--paper)}
.zin{display:grid;gap:30px}
.zkopf{max-width:320px}
.zband h2{margin-top:10px;font-size:clamp(21px,3.4vw,27px);line-height:1.24}
.zband h2::after{display:none}
.zreihe{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
.zband .zahl{display:block;font-family:'Aboreto',Georgia,serif;font-weight:400;line-height:1;
font-size:clamp(30px,6.5vw,46px);color:var(--ink);font-variant-numeric:tabular-nums}
.ztext{display:block;margin-top:9px;font-size:13.5px;line-height:1.45;color:var(--mute)}
@media(min-width:760px){
.zband{padding:64px 0}
.zin{grid-template-columns:minmax(220px,300px) 1fr;gap:44px;align-items:start}
.zreihe{grid-template-columns:repeat(4,1fr);gap:0}
.zpost{padding-left:22px;border-left:1px solid var(--line)}
.zpost:first-child{padding-left:0;border-left:none}
}
/* Kopfbild etwas hoeher als der Rahmen, damit der Nachlauf keine Kante
zeigt. Der Versatz kommt aus dem Skript. */
.phero img,.ahero img{transform:scale(1.06)}
.phero.voll img{transform:none}
/* -- Standorte ---------------------------------------------------- */
.ogrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:700px){.ogrid{grid-template-columns:1fr 1fr}}
/* Vier Orte stehen auf breiten Schirmen nebeneinander: die Seite soll
auf einen Blick sagen, wie viele es gibt. */
/* Ab 1000px, nicht erst ab 1180: dazwischen griff sonst die Dreier-
regel weiter unten und die vierte Karte stand allein in einer Reihe.
Zwei Klassen schlagen eine, darum gewinnt diese Zeile trotz der
spaeteren Regel. */
@media(min-width:1000px){.ogrid.vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Oeffnungszeiten und Anfahrt nebeneinander statt untereinander. */
.ozeiten{display:grid;gap:16px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:800px){.ozeiten{grid-template-columns:1fr 1fr;gap:20px}}
.ozbox{background:var(--paper);border:1px solid var(--line);border-radius:22px;
padding:26px 24px;position:relative;overflow:hidden}
.ozbox::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--orange)}
.ozbox h3{font-size:17px;margin-bottom:12px}
.ozbox .dlist li{font-size:15px}
/* -- Abstand zwischen den Abschnitten ------------------------------ */
/* Die Vorlage gibt jedem Abschnitt 104 px oben und unten. Zwischen
zwei Abschnitten stehen damit 208 px Leere - auf einem Notebook
fast ein halber Bildschirm, in dem nichts passiert.
Neue Regel: der volle Abstand bleibt dort, wo der Untergrund
wechselt - die getoente Flaeche braucht Luft, sonst klebt die
Farbe am Text. Folgen zwei Abschnitte mit demselben Grund
aufeinander, reicht gut die Haelfte.
Nachgemessen und korrigiert: .tintsec bekommt ihren Grund erst
unter .thema-beige. Auf allen anderen Seiten ist sie durchsichtig,
und die Regel oben zahlte trotzdem an jeder Sektionsgrenze den
vollen Abstand fuer einen Farbwechsel, den niemand sieht - auf der
Seite Innere Medizin viermal 164 px statt 96. Darum jetzt
umgekehrt: eng ist der Normalfall, weit nur dort, wo wirklich
Farbe wechselt. */
section{padding:82px 0}
section+section{padding-top:48px}
.thema-beige section:not(.tintsec)+.tintsec,
.thema-beige .tintsec+section:not(.tintsec){padding-top:82px}
/* Der obere Abstand allein reicht nicht: unten stand weiter der volle
Wert, zusammen 130 px. Wo eng gesetzt wird, gehoert beides gekuerzt.
Browser ohne :has() bleiben beim alten, groesseren Wert - das ist
haesslicher, aber nie kaputt. */
section:has(+ section){padding-bottom:56px}
.thema-beige section:not(.tintsec):has(+ .tintsec),
.thema-beige .tintsec:has(+ section:not(.tintsec)){padding-bottom:82px}
/* Ein Abschnitt, der nur ein Bild traegt, setzt seinen Abstand selbst
auf 0 - der folgende soll dann trotzdem nicht kleben. */
section[style*="padding-top:0"]+section{padding-top:62px}
@media(max-width:899px){
section{padding:52px 0}
section+section{padding-top:34px}
.thema-beige section:not(.tintsec)+.tintsec,
.thema-beige .tintsec+section:not(.tintsec){padding-top:52px}
section:has(+ section){padding-bottom:38px}
.thema-beige section:not(.tintsec):has(+ .tintsec),
.thema-beige .tintsec:has(+ section:not(.tintsec)){padding-bottom:52px}
section[style*="padding-top:0"]+section{padding-top:40px}
}
/* Die Ueberschrift hatte 48 px bis zum Inhalt. Zusammen mit dem
Abschnittsabstand darueber wurde daraus ein Loch. */
.head{margin-bottom:40px}
@media(max-width:899px){.head{margin-bottom:30px}}
@media(min-width:1000px){.ogrid{grid-template-columns:repeat(3,1fr);gap:20px}}
.okarte{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);
display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.okarte:hover{border-color:var(--orange);transform:translateY(-3px)}
.oimg{position:relative;aspect-ratio:16/10;background:var(--sand);overflow:hidden}
.oimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.33,1,.68,1)}
.okarte:hover .oimg img{transform:scale(1.04)}
.obody{padding:22px;display:flex;flex-direction:column;flex:1}
.oart{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.obody h3{margin-top:9px;font-size:19px}
.obody p{margin-top:9px;font-size:14.5px;line-height:1.55;flex:1;max-width:none}
.ozeit{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
font-size:13px;line-height:1.5;color:var(--orange-text)}
/* -- Karte --------------------------------------------------------
Sichtbar, auf die Strasse gezoomt, farblich in unsere Welt gezogen:
weniger Saettigung, ein Hauch Sepia, dazu ein warmer Schleier. Die
Karte nimmt keine Klicks an, damit das Scrollen nicht darin
haengenbleibt - der Klick liegt auf der Flaeche darueber. */
.kartebox{position:relative;margin-top:24px;border:1px solid var(--line);border-radius:24px;
overflow:hidden;background:var(--sand);height:340px}
@media(min-width:900px){.kartebox{height:420px}}
.kartebild{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
pointer-events:none;filter:saturate(.72) sepia(.14) contrast(1.02) brightness(1.02)}
.karteschleier{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(255,249,242,.28),rgba(108,40,3,.10) 62%,rgba(108,40,3,.26))}
.kartenadel{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;
flex-direction:column;align-items:center;gap:10px;text-align:center;color:#fff}
.knadel{width:16px;height:16px;border-radius:50% 50% 50% 0;background:var(--orange);
transform:rotate(-45deg);box-shadow:0 0 0 5px rgba(255,111,0,.24)}
.kartebox .kadr{font-size:15px;line-height:1.5;color:#fff;max-width:none;
text-shadow:0 1px 12px rgba(56,20,4,.6)}
.kbtn{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;
padding:10px 20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
transition:background .25s}
.kartenadel:hover .kbtn{background:#E86200}
/* -- Buchungsfenster ----------------------------------------------
Der Inhalt des Fensters kommt von onedoc.ch und liegt in einem
fremden Rahmen. Aus unserer Seite ist dort nichts erreichbar, weder
mit CSS noch mit JavaScript - das ist eine Grenze des Browsers, keine
Einstellungssache. Angepasst wird darum alles um das Fenster herum.
Der Kasten nimmt den Grundton des Widgets (#f4f4f4) auf, damit die
Kante des Rahmens nicht als Fremdkoerper im warmen Papierton steht.
Die Rundung, der Rand und der Schatten kommen von uns. */
/* Ein Wert, eine Stelle: sobald die Farben im OneDoc-Konto auf unsere
umgestellt sind (--od-theme-background auf #F3EDE4), hier denselben
Wert eintragen, dann ist die Naht wieder unsichtbar. */
:root{--buch-grund:#F4F4F4}
.buchbox{margin-top:30px;border:1px solid var(--line);border-radius:24px;overflow:hidden;
background:var(--buch-grund);box-shadow:0 20px 50px -30px rgba(108,40,3,.35);position:relative}
.buchbox::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--orange);z-index:2}
.buchbox iframe{width:100%;min-height:660px;border:0;display:block}
@media(max-width:599px){.buchbox iframe{min-height:780px}}
.buchfuss{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
align-items:baseline;margin-top:12px;font-size:12.5px;color:var(--mute)}
.buchfuss a{color:var(--orange-text)}
/* -- Oeffnungszeiten --------------------------------------------- */
.zeiten{margin-top:14px;display:grid;gap:0}
.zeiten div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
border-bottom:1px solid var(--line);font-size:15px}
.zeiten div:last-child{border-bottom:none}
.zeiten span:last-child{color:var(--ink)}
/* -- Instagram ----------------------------------------------------
Zurueck zur eigenen Karte: Kopfzeile mit Marke, Bild, Fusszeile. Der
Klick tauscht sie gegen den Einbettungsrahmen, der Beitrag laeuft in
der Karte. Karten etwas groesser als zuvor, 300 statt 254 px. */
.ikarte{flex:0 0 min(300px,80vw);max-width:300px}
@media(min-width:900px){.ikarte{flex:0 0 300px;max-width:300px}}
.ibild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ikarte:hover .ibild img{transform:scale(1.05)}
/* Profilbild ist die Marke: IVI weiss auf Markenorange */
.iav{background:var(--orange)}
.ilink{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
.ilink::after{content:" \2192"}
.ibild{appearance:none;border:0;padding:0;margin:0;width:100%;display:block;cursor:pointer;
font:inherit;color:inherit;background:none;position:relative;aspect-ratio:4/5}
/* Beim Abspielen wird die Karte breiter und hoeher: der Rahmen von
Instagram schneidet unter etwa 326 px ab. */
.ikarte.laeuft{flex:0 0 326px;max-width:326px;border-color:var(--orange);padding-bottom:12px}
.ikarte .iframe-insta{width:100%;min-height:580px;border:0;display:block;background:var(--sand)}
.iaussen{display:block;padding:10px 14px 0}
/* die selbstlaufende Bahn darf nicht einrasten, sonst ruckelt sie */
.bahn.autolauf{scroll-snap-type:none}
.bahn.autolauf>*{scroll-snap-align:none}
.bahn.insta{align-items:flex-start}
/* Bewegung abschalten, wenn das System es verlangt */
@media(prefers-reduced-motion:reduce){
.laufin{animation:none}
.bi{animation:none;opacity:1;filter:none}
.rv{opacity:1!important;transform:none!important;transition:none!important}
.stufe{transition:none}
.bkarte:hover,.ikarte:hover,.lcard:hover{transform:none}
}
/* -- Bewegter Grund im Einstieg -----------------------------------
Zwei sehr grosse, sehr weiche Farbwolken in den Markentoenen, die
langsam gegeneinander wandern. Kein Video, kein Bild, keine Datei -
zwei Farbverlaeufe, die die Grafikkarte bewegt.
Bewusst sehr langsam (48 und 62 Sekunden) und sehr blass: ein
Hintergrund, den man bemerkt, waehrend man ihn ansieht, ist auf einer
Arztseite ein Fehler. Er soll nur verhindern, dass die Flaeche tot
wirkt.
Der Grund liegt hinter allem (z-index 0) und faengt keine Klicks ab.
Wer im System "weniger Bewegung" eingestellt hat, bekommt dieselben
Wolken, nur stehend. */
.hero{position:relative;isolation:isolate}
.hero > *{position:relative;z-index:1}
.heroglut{position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;
overflow:hidden;border-radius:inherit}
.heroglut::before,.heroglut::after{content:"";position:absolute;border-radius:50%;
filter:blur(70px);opacity:.5}
.heroglut::before{width:62%;padding-bottom:62%;left:-6%;top:-14%;
background:radial-gradient(circle,rgba(255,111,0,.30),rgba(255,111,0,0) 68%);
animation:glutA 48s ease-in-out infinite alternate}
.heroglut::after{width:56%;padding-bottom:56%;right:-8%;bottom:-18%;
background:radial-gradient(circle,rgba(169,78,12,.24),rgba(169,78,12,0) 68%);
animation:glutB 62s ease-in-out infinite alternate}
@keyframes glutA{
0% {transform:translate3d(0,0,0) scale(1)}
50% {transform:translate3d(14%,8%,0) scale(1.12)}
100%{transform:translate3d(4%,18%,0) scale(1.04)}
}
@keyframes glutB{
0% {transform:translate3d(0,0,0) scale(1.06)}
50% {transform:translate3d(-12%,-10%,0) scale(1)}
100%{transform:translate3d(-4%,-20%,0) scale(1.1)}
}
@media(prefers-reduced-motion:reduce){
.heroglut::before,.heroglut::after{animation:none}
}
@media(max-width:599px){
.heroglut::before,.heroglut::after{filter:blur(46px);opacity:.42}
}
/* -- Die Schritte als Bahn ----------------------------------------
Vorher ein Gitter, in dem jede Kachel zwischen zwei Fotos hin und her
blendete. Der Wechsel ist entfallen: die Reihe wandert jetzt selbst,
und zwei Bewegungen uebereinander sind eine zu viel. */
.wkbild{position:relative}
/* Freisteller auf weissem Grund: multiplizierend auf den Sandgrund der
Kachel gelegt, damit kein weisses Rechteck darin steht. Die Vorlage
ist bereits auf 16:11 um die Hand herum beschnitten, darum fuellt sie
den Rahmen wie die anderen auch. */
/* Gilt jetzt ueberall, auch in Karten: die Liste der Aufnahmen auf
weisser Flaeche steht in lib-images.ps1, und BildTag haengt die
Klasse selbst an. */
img.weiss{mix-blend-mode:multiply}
/* Freisteller ganz zeigen statt fuellen, siehe FREISTELLER in
lib-images.ps1. Etwas Luft ringsum, damit der Gegenstand nicht an
der Kante klebt. */
img.ganz{object-fit:contain;padding:10px}
/* Die Bahnbreiten gewinnen gegen das alte Gitter, das noch als
Grundregel dasteht - darum hier ausdruecklich. */
.wegkacheln.bahn{display:flex;grid-template-columns:none;margin-top:30px}
.pfeile.mittig{justify-content:center;margin-top:26px}
/* -- Haeuserliste auf der Concierge-Seite -------------------------
Keine Logos, keine Bilder: eine Liste von Namen, die fuer sich steht.
Der Ort als kleine Zeile darueber macht sie ohne Landkarte lesbar. */
.hgrid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:700px){.hgrid{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1100px){.hgrid{grid-template-columns:repeat(var(--hn,4),minmax(0,1fr))}}
@media(min-width:700px) and (max-width:1099px){
.hgrid:has(> :last-child:nth-child(odd)) > :last-child:not(:first-child){
grid-column:1 / -1;max-width:calc(50% - 8px);margin:0 auto;width:100%}
}
.hkarte{border:1px solid var(--line);border-radius:22px;background:var(--paper);
padding:22px;transition:border-color .25s}
.hkarte:hover{border-color:var(--orange)}
.hort{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--orange-text)}
.hsym{width:16px;height:16px;flex:none}
.hsym svg{width:16px;height:16px;fill:none;stroke:var(--orange);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.hkarte h3{margin-top:12px;font-size:19px;line-height:1.28}
.hkarte h3::after{display:none}
.hkarte p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--body)}
/* -- Schriftstaerke ----------------------------------------------- */
body{font-weight:400}
.lead,.dsum{font-weight:400}
/* -- Kartentext auf einen Wert ------------------------------------ */
.tkarte p,.bbody p,.obody p,.wkarte p,.fkkarte p,.ackarte p,.wkbody p,
.pinhalt p,.wpunkt p,.lcard p,.jbody p,.rwtext{font-size:15px;line-height:1.6}
/* -- Kartentitel auf zwei Stufen ---------------------------------- */
.tkarte h3,.bbody h3,.obody h3,.fkkarte h3,.ackarte h3,.lcard h3,
.jbody h3,.akarte h3,.ozbox h3,.plan h3,.hinweis h3{font-size:19px}
.wkbody h3,.wkarte h3,.dtxt h3,.pkopf h3{font-size:22px}
/* Die letzten Ausreisser: Kartentext, der noch bei 14,5 px stand. */
.wkarte p,.plan p,.hinweis p{font-size:15px}
/* -- Aufzaehlungen ------------------------------------------------- */
.dlist li{font-size:15.5px}
.anlass .dlist li,.abody .dlist li{font-size:16.5px}
/* Ganze Saetze statt Stichworten: zweispaltig waeren das gut 200 px
Satzbreite und acht Zeilen je Punkt. Einspaltig, mit Luft dazwischen. */
.dlist.satz{grid-template-columns:1fr;gap:12px}
/* -- Menueknopf ---------------------------------------------------- */
/* Drei gleich lange Haarstriche in einem Ring: das ist das Zeichen,
das jede Website hat, und bei 1,5 px sieht es auch noch duenn aus.
Jetzt zwei Striche verschiedener Laenge, rechts gebuendig, auf einer
ruhigen Flaeche statt in einem Ring - und beim Oeffnen werden aus den
beiden ein Kreuz, wofuer sie im offenen Zustand gleich lang werden. */
/* align-content: ohne das dehnen sich die Rasterzeilen auf die vollen
44 px und die Striche stehen 23 px auseinander statt 6 - genau das
liess das alte Zeichen so auseinandergefallen aussehen. */
.burger{border:none;background:rgba(108,40,3,.07);gap:6px;align-content:center;
justify-items:end;padding-right:12px;transition:background .2s}
.burger:hover{background:rgba(108,40,3,.13)}
.burger i{height:2px;border-radius:2px}
.burger i:nth-child(1){width:18px}
.burger i:nth-child(2){width:11px}
.burger.on{background:rgba(108,40,3,.13)}
.burger.on i{width:18px}
.burger.on i:nth-child(1){transform:translateY(4px) rotate(45deg)}
/* opacity ausdruecklich: die Vorlage blendet den zweiten Strich aus,
weil dort drei standen und der mittlere verschwinden musste. */
.burger.on i:nth-child(2){opacity:1;transform:translateY(-4px) rotate(-45deg)}
/* -- Handy-Menue --------------------------------------------------- */
/* Die Vorlage brachte eine dunkelgruene Tafel mit, aus einer Zeit, in
der die Seite gruen war. Auf dem heutigen Papiergrund wirkte sie wie
ein Fremdkoerper - und zwanzig gleich aussehende Grossbuchstaben-
zeilen untereinander sind keine Navigation, sondern eine Liste. */
/* Die Innenabstaende sitzen an den Abschnitten, nicht an der Tafel:
nur so reichen der stehende Kopf und der stehende Fuss bis an beide
Raender und bis an die Unterkante. Mit Abstand an der Tafel blieb
unter dem Fuss ein Streifen, durch den die Zeilen durchliefen. */
.mnav{width:min(92vw,420px);background:var(--paper);padding:0;
border-radius:38px 0 0 38px;box-shadow:-30px 0 70px rgba(45,20,4,.20);
display:flex;flex-direction:column;overscroll-behavior:contain}
/* Ein Hauch Orange entlang der gebogenen Kante, damit die Flaeche nicht
flach dasteht. Links und auf halber Hoehe, also da, wo weder der
stehende Kopf noch der stehende Fuss darueberliegt - sonst sieht man
die Kante ihrer Milchglasflaeche. Rein dekorativ, ohne Mausfang. */
.mnav::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(85% 50% at 0% 45%,rgba(255,111,0,.12),transparent 64%)}
.mnav>*{position:relative;z-index:1;padding-left:22px;padding-right:22px}
.mscrim{background:rgba(45,20,4,.42);backdrop-filter:blur(2px)}
/* Kopf und Fuss bleiben stehen, damit Schliesskreuz und Termin nicht
davonscrollen. Beide milchig statt deckend: sonst wuerden sie den
Orangeschimmer in der Ecke zudecken, und die Zeilen laufen huebscher
darunter durch, wenn man sie noch ahnt. */
.mkopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
position:sticky;top:0;z-index:2;padding:18px 22px 8px;
background:rgba(255,249,242,.86);backdrop-filter:saturate(150%) blur(12px)}
.mnav .mmark{font-family:'Aboreto',Georgia,serif;font-size:21px;letter-spacing:.18em;
color:var(--ink);padding:0;border:none;text-transform:none}
.mzu{width:38px;height:38px;border-radius:50%;border:none;background:rgba(108,40,3,.07);
color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
display:grid;place-items:center;transition:background .2s}
.mzu:hover{background:rgba(108,40,3,.13)}
.mnav .mgroup{display:block;margin:16px 0 2px;font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--orange);font-weight:500}
.mliste{display:grid}
/* Zweispaltig: zehn kurze Klinikeintraege werden so fuenf Zeilen, und
das Menue passt auf einen Bildschirm statt auf anderthalb. */
.mliste.zwei{grid-template-columns:1fr 1fr;column-gap:16px}
.mnav .mliste a{display:block;font-family:'Aboreto',Georgia,serif;text-transform:none;
font-size:16.5px;letter-spacing:.02em;color:var(--ink);padding:11px 0;
border-bottom:1px solid var(--line);transition:color .18s}
.mnav .mliste.zwei a{font-size:14.5px;padding:10px 0}
.mnav .mliste a:hover{color:var(--orange)}
.mnav .mliste a[aria-current]{color:var(--orange)}
/* Einundzwanzig Ziele passen auf keinem Telefon auf einen Bildschirm.
Statt die Schrift dafuer zu verkleinern, bleibt der Fuss stehen: die
Liste laeuft darunter durch, der Termin ist immer erreichbar. */
.mfuss{margin-top:auto;position:sticky;bottom:0;
padding:18px 22px calc(20px + env(safe-area-inset-bottom));
background:rgba(255,249,242,.86);backdrop-filter:saturate(150%) blur(12px)}
.mfuss::before{content:'';position:absolute;left:0;right:0;top:-26px;height:26px;
pointer-events:none;background:linear-gradient(to top,rgba(255,249,242,.86),transparent)}
.mnav .mcta{margin-top:0}
.mnebst{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.mnav .mtel{font-family:'Jost',sans-serif;font-size:13.5px;letter-spacing:.04em;
color:var(--ink);opacity:.72;padding:0;border:none;text-transform:none}
/* Die Zeilen laufen gestaffelt ein, sobald die Tafel offen ist. */
@keyframes mzeile{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.mnav.on .mliste a{animation:mzeile .42s cubic-bezier(.4,0,.2,1) both;
animation-delay:calc(var(--i,0)*22ms + 80ms)}
.mnav.on .mgroup,.mnav.on .mfuss{animation:mzeile .42s cubic-bezier(.4,0,.2,1) both;
animation-delay:60ms}
@media(prefers-reduced-motion:reduce){
.mnav.on .mliste a,.mnav.on .mgroup,.mnav.on .mfuss{animation:none}
}
/* Sehr niedrige Telefone: lieber scrollen als quetschen. */
@media(max-height:660px){
.mnav .mliste a{padding:9px 0;font-size:15.5px}
.mnav .mgroup{margin-top:12px}
.mfuss{padding-top:16px}
}
/* -- Eckenradien: Flaechen auf 22 --------------------------------- */
.phero,.hsbild,.kassebild,.akarte,.gbild img,.bildband>div,.limg,
.agbnav,.agbkopf,.navmenu,.wablase{border-radius:22px}
.lcard .limg{border-radius:22px 22px 0 0}
.wablase{border-radius:22px 22px 6px 22px}
@media(max-width:899px){.phero{border-radius:18px}}