@import url("../../fonts/fonts.css");
/* Ihr kleines persönliches Wellness – Sitehold-Vorlage (Modell A „Atelier“). Erzeugt von make_plantilla.py. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(100% - 40px,1240px);margin-inline:auto}
.ic{width:20px;height:20px;flex:none}
.burger{display:none;width:46px;height:46px;border:0;background:transparent;color:inherit;place-items:center;padding:0}
.burger .ic{width:26px;height:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
s{opacity:.55}
@media (max-width:960px){.nav{display:none!important}.burger{display:grid}}

:root{--bg:#F6F1EA;--paper:#FFFDF9;--ink:#1D2235;--muted:#5F6274;--blue:#2B46A8;--clay:#B5865F;
--line:rgba(29,34,53,.13);--serif:'Instrument Serif',Georgia,serif;--body:'Manrope',system-ui,sans-serif}
.topbar{border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.topbar .wrap{display:flex;gap:28px;align-items:center;min-height:42px}
.topbar span{display:inline-flex;gap:8px;align-items:center}.topbar .ic{width:16px;height:16px;color:var(--clay)}
.topbar .r{margin-left:auto;font-weight:600;color:var(--ink)}
.head .wrap{display:flex;align-items:center;gap:40px;min-height:96px}
.logo img{height:66px;width:auto}
.nav{display:flex;gap:30px;font-size:15px;font-weight:500;margin-left:auto}
.nav a{padding:6px 0;border-bottom:1.5px solid transparent}.nav a.on,.nav a:hover{border-color:var(--blue);color:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:15px;
  background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.btn.o{background:transparent;color:var(--ink)}
.btn{white-space:nowrap}
.btn.s{padding:12px 20px;font-size:14px}
.eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--clay)}
.hero{padding:56px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero h1{font-family:var(--serif);font-size:clamp(46px,5.5vw,82px);line-height:.98;letter-spacing:-.015em;margin:22px 0 28px}
.hero h1 em{display:block;color:var(--blue)}
.hero p{font-size:19px;color:var(--muted);max-width:540px}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 46px}
.facts{display:flex;gap:44px;border-top:1px solid var(--line);padding-top:26px}
.facts b{display:block;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1}
.facts span{font-size:14px;color:var(--muted)}
.arch{position:relative}
.arch>img{width:100%;height:640px;object-fit:cover;object-position:62% 50%;border-radius:999px 999px 28px 28px}
.seal{position:absolute;left:-58px;bottom:70px;width:150px;height:150px;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;box-shadow:0 18px 40px -18px rgba(29,34,53,.35)}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
.seal text{font:600 10.5px var(--body);letter-spacing:.32em;fill:var(--ink)}
.seal b{font-size:15px;letter-spacing:.12em;color:var(--blue)}
.strip{background:var(--ink);color:#F6F1EA;overflow:hidden}
.strip p{margin:0;white-space:nowrap;font-family:var(--serif);font-size:30px;padding:20px 0;text-align:center}
.strip i{color:var(--clay);font-style:normal;margin:0 22px;font-size:18px;vertical-align:middle}
.sec{padding:110px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:50px}
.sec-head h2,.h2{font-family:var(--serif);font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-.01em}
.sec-head p{max-width:420px;color:var(--muted);margin:0}
.rows a{display:grid;grid-template-columns:70px 1fr 1.1fr 210px 54px;gap:30px;align-items:center;padding:26px 0;
  border-top:1px solid var(--line)}
.rows a:last-child{border-bottom:1px solid var(--line)}
.rows .n{font-family:var(--serif);font-size:24px;color:var(--clay)}
.rows h3{font-family:var(--serif);font-size:44px;line-height:1}
.rows p{margin:0;color:var(--muted);font-size:15.5px}
.rows img{width:210px;height:120px;object-fit:cover;border-radius:16px}
.rows .go{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.rows .meta{display:block;margin-top:10px;font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.offer{background:var(--paper)}
.offer .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.offer .ph{position:relative}
.offer .ph img{width:100%;height:560px;object-fit:cover;border-radius:28px}
.offer .tag{position:absolute;top:24px;left:24px;background:var(--paper);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700}
.offer h2{margin:14px 0 30px}
.olist li{display:grid;grid-template-columns:1fr auto;gap:6px 30px;padding:22px 0;border-top:1px solid var(--line)}
.olist h3{font-family:var(--serif);font-size:28px;line-height:1.1}
.olist p{margin:0;color:var(--muted);font-size:15px;grid-column:1}
.olist .pr{grid-row:1/3;grid-column:2;text-align:right;align-self:center;white-space:nowrap}
.olist .pr b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;color:var(--blue);line-height:1}
.olist .pr s{font-size:14px}
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pcard img{width:100%;height:250px;object-fit:cover;border-radius:22px;margin-bottom:22px}
.pcard h3{font-family:var(--serif);font-size:30px;line-height:1.08;margin:8px 0 10px}
.pcard p{color:var(--muted);font-size:15.5px}
.pcard .lk{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:14.5px;border-bottom:1px solid var(--ink);padding-bottom:3px}
.contact{background:var(--ink);color:#EDE6DC;padding:110px 0 0}
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:80px}
.contact h2{color:#fff}.contact h2 em{color:#C9B39A}
.clist{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.clist div{display:flex;gap:14px}.clist .ic{color:#C9B39A;margin-top:4px}
.clist b{display:block;color:#fff;font-weight:600}.clist span{font-size:15.5px;opacity:.85}
.pros{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.pros img{width:100%;aspect-ratio:3/4.2;object-fit:cover;border-radius:10px}
.pros span{display:block;font-size:13.5px;margin-top:10px;opacity:.85}
.foot{border-top:1px solid rgba(255,255,255,.12);margin-top:100px;padding:30px 0;font-size:13.5px;color:#B9B3AB}
.foot .wrap{display:flex;gap:30px;align-items:center;grid-template-columns:none}
.foot img{height:46px;width:auto}.foot nav{margin-left:auto;display:flex;gap:24px}
/* Unterseite */
.phero{padding:40px 0 70px}
.crumb{font-size:13.5px;color:var(--muted)}.crumb a{color:var(--blue)}
.phero .wrap>div{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-top:26px}
.phero h1{font-family:var(--serif);font-size:clamp(64px,9vw,140px);line-height:.9;letter-spacing:-.02em}
.phero h1 em{display:block;font-size:.42em;color:var(--blue);margin-top:14px;letter-spacing:0}
.phero p{font-size:19px;color:var(--muted);margin:0}
.wide{width:100%;height:470px;object-fit:cover;border-radius:28px 28px 28px 28px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:50px 0 10px}
.chips a{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;background:var(--paper)}
.menu li{display:grid;grid-template-columns:300px 1fr 360px;gap:46px;padding:44px 0;border-top:1px solid var(--line);align-items:start}
.menu img{width:300px;height:220px;object-fit:cover;border-radius:20px}
.menu h3{font-family:var(--serif);font-size:38px;line-height:1.05;margin:10px 0 14px}
.menu p{color:var(--muted);margin:0}
.opts div{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.opts div::after{content:"";order:1;flex:1}
.opts span{order:0}.opts b{order:2;font-family:var(--serif);font-weight:400;font-size:30px;color:var(--blue);white-space:nowrap}
.cta{background:var(--paper);border-radius:32px;padding:70px;display:flex;align-items:center;gap:40px;margin:40px auto 110px}
.cta h2{flex:1}
@media (max-width:1100px){.rows a{grid-template-columns:50px 1fr 160px 48px}.rows a>p{display:none}.rows img{width:160px}
  .menu li{grid-template-columns:240px 1fr}.menu .opts{grid-column:2}.menu img{width:240px;height:190px}}
@media (max-width:960px){.topbar{display:none}.head .wrap{min-height:78px}.logo img{height:52px}.head .btn{display:none}.burger{margin-left:auto}
  .hero{padding:20px 0 70px}.hero .wrap,.offer .wrap,.contact .wrap,.phero .wrap>div{grid-template-columns:1fr;gap:44px}
  .arch>img{height:460px}.seal{left:auto;right:16px;bottom:-40px;width:122px;height:122px}
  .partners{grid-template-columns:1fr}.sec{padding:80px 0}.offer .ph img{height:360px}}
@media (max-width:640px){body{font-size:16px}.hero .acts .btn{flex:1;justify-content:center}
  .facts{gap:22px}.facts b{font-size:26px}.hero .eyebrow{font-size:11.5px}.strip p{font-size:22px}
  .sec-head{display:block}.sec-head p{margin-top:16px}
  .rows a{grid-template-columns:1fr 54px;gap:14px}.rows .n,.rows img{display:none}.rows h3{font-size:34px}
  .clist{grid-template-columns:1fr}.foot .wrap{flex-wrap:wrap}.foot nav{margin-left:0}
  .menu li{grid-template-columns:1fr;gap:18px}.menu .opts{grid-column:auto}.menu img{width:100%;height:220px}
  .wide{height:280px}.cta{flex-direction:column;align-items:flex-start;padding:40px 26px}
  .olist .pr b{font-size:30px}}
@media (max-width:380px){.btn{white-space:normal}}

.i-tel{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
.i-pin{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.i-clock{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-mail{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.i-doc{--maske:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E")}
:root{--pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
:root{--pfeil-blau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B46A8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* ── Sitehold-Vorlage: Anpassungen an Modell A (make_plantilla.py) ── */
/* Farben. Wunsch der Kundin: alle Überschriften blau, kein Schwarz. Die zweite Titelzeile (em) in hellerem Blau,
   damit sie sich weiter abhebt (#4A5FBA: 5,1:1 auf Elfenbein; #5A6FC6 hatte nur 4,1:1, zu wenig für die 22-px-Untertitel).
   Kleine Schrift braucht 4,5:1 (WCAG AA): Ton #B5865F hat auf Elfenbein nur 2,9:1 →
   für Text #8A6142 (4,8:1). */
:root{--blue:#2B46A8;--blue-hell:#4A5FBA;--blue-tief:#22388A;--ton:#8A6142;--tint:#EEF0F8}
h1,h2,h3,h4,.h2{color:var(--blue)}
.hero h1 em,.phero h1 em,.h2 em{color:var(--blue-hell);font-style:italic}
.eyebrow{color:var(--ton)}
.btn{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.o{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn:hover{background:var(--blue-tief);border-color:var(--blue-tief);color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
/* Icons per Maske (Klasse i-…) */
.i-tel::before,.i-pin::before,.i-clock::before,.i-mail::before,.i-doc::before{content:"";flex:none;width:18px;height:18px;
 background:currentColor;-webkit-mask:var(--maske) center/contain no-repeat;mask:var(--maske) center/contain no-repeat}
/* PDF-Links: kleiner Hinweis „PDF“ */
.nav a[href$=".pdf"]::after{content:"PDF";margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.08em;
 padding:2px 5px;border-radius:4px;background:var(--tint);color:var(--blue);vertical-align:2px}
/* Kopf: bleibt beim Scrollen oben (die obere Leiste scrollt weg); .kompakt setzt das JS */
header.kopf{position:sticky;top:-43px;z-index:50;background:var(--bg);transition:box-shadow .3s ease}
header.kopf.kompakt{box-shadow:0 8px 28px -14px rgba(29,34,53,.28)}
.topbar p{margin:0;display:inline-flex;gap:8px;align-items:center}
.topbar p::before{color:var(--ton)}
.topbar .r{display:inline-flex;gap:8px;align-items:center}
.logo{display:block;line-height:0}
.nav a{white-space:nowrap}
.nav a[aria-current="page"]{border-color:var(--blue);color:var(--blue)}
.tel-btn::before{background:#fff}
.menu-extra{display:none}
.burger{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:50%}
.burger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--blue);transition:transform .3s ease,opacity .2s}
/* Startseite: Bogen mit Foto und Siegel */
.arch>img{height:620px;object-position:38% 60%}
.seal b{color:var(--blue)}
.hero .acts .btn.o::before{background:var(--blue)}
.facts p{margin:0}
.facts b{color:var(--blue)}
/* Behandlungswelten: Zeilen als Links; Kurztext unter dem Titel, Pfeil als ::after */
/* Ohne Nummern (01, 02 …) auf Wunsch von Bild (5. Nov. 2026): keine Spalte „n“ mehr. */
.rows a{grid-template-columns:1fr 210px 54px;grid-template-areas:"t img go" "d img go";row-gap:6px;
 transition:background .3s ease}
.rows h3{grid-area:t;align-self:end}.rows .d{grid-area:d;align-self:start;margin:0;color:var(--muted);font-size:15.5px}
.rows img{grid-area:img;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rows a::after{content:"";grid-area:go;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);
 background:var(--pfeil-blau) center/20px no-repeat;transition:transform .3s ease,border-color .3s ease}
.rows a:hover{background:rgba(255,255,255,.55)}
.rows a:hover img{transform:scale(1.04)}
.rows a:hover::after{transform:translateX(4px);border-color:var(--blue)}
/* Angebote: Block mit Link auf das PDF */
.offer .ph img{height:520px}
.offer h2{margin:14px 0 22px}
.offer p.text{color:var(--muted);font-size:18px;max-width:520px}
.offer .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.offer .btn.i-doc::before{background:#fff}
/* Partner („Unser Tipp!“) */
.pcard .lk{color:var(--blue);border-color:var(--blue)}
.pcard .lk::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--pfeil) center/contain no-repeat;mask:var(--pfeil) center/contain no-repeat}
.pcard .unter{margin:-4px 0 10px;font-size:14px;font-weight:600;color:var(--ton);letter-spacing:.02em}
/* Kontakt: hell statt dunkel (kein Schwarz); darunter ein blauer Fuß mit dem weißen Logo */
.contact{background:var(--tint);color:var(--ink);padding:100px 0 0}
.contact h2{color:var(--blue)}.contact h2 em{color:var(--blue-hell)}
.clist>div{display:flex;gap:14px}
.clist>div::before{color:var(--ton);margin-top:4px;width:20px;height:20px}
.clist p{margin:0}
.clist b{color:var(--ink)}.clist span{opacity:1;color:var(--muted)}
.clist a{color:var(--blue);font-weight:600}
.clist .karte{display:inline-block;margin-top:6px;font-size:14px;color:var(--blue);border-bottom:1px solid currentColor}
.contact .eyebrow{color:var(--ton)}
.pros a{display:block;color:var(--ink)}
.pros img{box-shadow:0 14px 30px -18px rgba(29,34,53,.45);transition:transform .3s ease}
.pros a:hover img{transform:translateY(-3px)}
.pros span{opacity:1;color:var(--muted);font-weight:600}
.foot{background:var(--blue);color:#E4E8F6;border-top:0;margin-top:90px}
.foot p{margin:0}
.foot nav a{color:#fff}.foot nav a:hover{text-decoration:underline}
.foot .foot-logo{line-height:0}
/* Unterseiten: Kopf mit Titel links und Foto rechts. Die Fotos der WordPress-Website sind nur 720 px breit: kein
   Bild über die volle Breite wie im Entwurf (wäre unscharf). */
.phero{padding:34px 0 60px}
.phero .wrap>div{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px}
.phero h1{font-size:clamp(42px,8.5vw,104px);overflow-wrap:break-word;hyphens:auto}
.phero h1 em{font-size:.4em;line-height:1.15}
.phero .intro{margin-top:24px}.phero .intro p{font-size:18px;color:var(--muted)}
.phero-bild{width:100%;height:420px;object-fit:cover;border-radius:999px 999px 28px 28px}
.chips{margin:0 0 10px}
.chips a{color:var(--blue)}.chips a:hover{border-color:var(--blue)}
/* Behandlungen: Foto | Text | Preise. Ohne eigenes Foto: helle Karte, der Text nimmt den Platz des Fotos ein. */
/* Der Behälter heißt .liste, nicht .menu: A_CSS hat noch Regeln für „.menu li“ (Entwurf mit ul.menu > li), die sonst
   auch die Aufzählungen in den Karten treffen würden. */
.item{display:grid;grid-template-columns:300px minmax(0,1fr) 360px;gap:46px;padding:44px 0;border-top:1px solid var(--line);align-items:start}
.item>*{min-width:0}
.item>img{width:300px;height:220px;object-fit:cover;border-radius:20px}
.item h3{font-family:var(--serif);font-size:38px;line-height:1.05;margin:0 0 10px}
.item .unter{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2;color:var(--blue-hell);margin:-4px 0 14px}
.item p{color:var(--muted)}
.item .punkte{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.item .punkte li{padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--blue-tief);font-size:13.5px;font-weight:600}
.item.ohne-foto{grid-template-columns:minmax(0,1fr) 360px;background:var(--paper);border:0;border-radius:24px;padding:40px 44px;margin:22px 0}
.item.ohne-foto+.item{border-top:0}
.opts .zeile{display:flex;align-items:baseline;gap:12px;padding:12px 0;margin:0;border-bottom:1px dashed var(--line);font-size:15.5px;color:var(--ink)}
.opts .zeile::after{content:"";order:1;flex:1}
.opts .zeile span{order:0}
.opts .zeile b{order:2;font-family:var(--serif);font-weight:400;font-size:30px;color:var(--blue);white-space:nowrap}
.opts .zeile:has(span:empty)::after{display:none}
/* Infoblöcke („Bei uns im Haus“, „Infos für Sie“, „Jetzt schon bewerben?“, Verweis auf Schlank, Fit und Schön) */
.info{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:center;background:var(--tint);border-radius:28px;padding:44px 50px;margin:30px 0}
.info .marke{margin:0;font-family:var(--serif);font-style:italic;font-size:34px;line-height:1.05;color:var(--blue)}
.info h3{font-family:var(--serif);font-size:34px;line-height:1.1;margin:0 0 12px}
.info p{color:var(--muted)}
.info .punkte{margin:0 0 18px;padding-left:20px;list-style:disc;color:var(--muted)}
.info .btn::before{background:#fff}
.info .btn{white-space:normal}
.info>div{min-width:0}
.cta{background:var(--tint)}
.cta .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.cta .btn.o.i-mail::before{background:var(--blue)}
.cta .btn.i-tel::before{background:#fff}
/* Seite „Schlank, Fit und Schön“ und rechtliche Seiten */
.artikel{padding:30px 0 100px}
.artikel .wrap{max-width:860px}
.artikel h1{font-family:var(--serif);font-size:clamp(38px,6vw,68px);line-height:1.02;margin:22px 0 34px}
.artikel h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:1.4em 0 .5em}
.artikel h3{font-family:var(--body);font-weight:700;font-size:18px;margin:1.6em 0 .4em}
.artikel h4{font-family:var(--body);font-weight:600;font-size:16px;color:var(--ink);margin:1.2em 0 .3em}
.artikel p{color:var(--muted)}
.artikel a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.artikel .btn{text-decoration:none;margin-top:16px;color:#fff}
.artikel .lead{font-size:20px;color:var(--ink)}
.legal{overflow-wrap:anywhere}
/* Erscheinen beim Scrollen (Klassen setzt das JS; ohne JS bleibt alles sichtbar) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.sichtbar{opacity:1;transform:none}
.js .hero .wrap>div:first-child>*{animation:auftauchen .8s cubic-bezier(.2,.7,.2,1) both}
.js .hero .wrap>div:first-child>:nth-child(2){animation-delay:.08s}.js .hero .wrap>div:first-child>:nth-child(3){animation-delay:.16s}
.js .hero .wrap>div:first-child>:nth-child(4){animation-delay:.24s}.js .hero .wrap>div:first-child>:nth-child(5){animation-delay:.32s}
.js .arch{animation:auftauchen 1s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes auftauchen{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (max-width:1100px){
 .rows a{grid-template-columns:1fr 160px 48px}.rows a>.d{display:block}
 .item{grid-template-columns:240px 1fr}.item .opts{grid-column:2}.item>img{width:240px;height:190px}
 .item.ohne-foto{grid-template-columns:1fr}.item.ohne-foto .opts{grid-column:auto}}
/* Handy-Menü (≤ 960 px): Panel unter dem Kopf, öffnet kreisförmig vom Burger aus */
@media (max-width:960px){
 header.kopf{top:0}
 /* BASE setzt den Burger auf display:grid; als Raster verteilten sich die drei Striche über die ganze Höhe, und das
    „ד des offenen Menüs wurde zu „>“. Als Flex-Spalte mit festem Abstand (5 px) passen die Verschiebungen (7 px). */
 .burger{display:flex}
 .head .tel-btn{display:none}
 .js .nav{display:flex!important;position:fixed;left:0;right:0;top:var(--kopf,79px);bottom:0;flex-direction:column;gap:0;margin:0;
  overflow-y:auto;overscroll-behavior:contain;padding:18px 24px calc(26px + env(safe-area-inset-bottom));background:var(--bg);
  clip-path:circle(0 at calc(100% - 43px) -36px);visibility:hidden;transition:clip-path .6s cubic-bezier(.65,0,.25,1),visibility 0s .6s}
 .js .kopf.menu-offen .nav{clip-path:circle(150% at calc(100% - 43px) -36px);visibility:visible;transition:clip-path .6s cubic-bezier(.65,0,.25,1)}
 .nav>a{display:block;padding:14px 0;border-bottom:1px solid var(--line)!important;font-family:var(--serif);font-size:32px;font-weight:400;color:var(--blue)}
 .nav>a[aria-current="page"]{color:var(--blue-hell);font-style:italic}
 .nav>a[aria-current="page"]::before{content:"";display:inline-block;width:22px;height:1px;margin-right:12px;
  background:currentColor;vertical-align:10px}
 /* Variante H3 (Wahl von Bild, 5. Nov. 2026): Elfenbeinton, klein unten rechts das Ölfläschchen mit Lavendel, zwischen
    dem letzten Link und den Knöpfen. „multiply“ färbt den weißen Fotorand in den Elfenbeinton ein (wirkt durchsichtig).
    Das Foto endet 148 px über dem unteren Rand: Der Lavendel liegt über den Knöpfen, Öffnungszeiten und Adresse
    stehen auf sauberem Grund. Der E-Mail-Knopf
    bekommt den Elfenbeinton als Fläche, damit das Foto hinter ihm verschwindet statt durchzuscheinen.
    „local“: Auf niedrigen Handys scrollt das Menü; das Foto hängt dann am Ende des Inhalts (bei den Knöpfen) statt am
    Bildschirmrand, wo es hinter die mittleren Links geriet. */
 .js .nav{background:url(../../images/menu-hintergrund.webp) right bottom 148px / 195px auto no-repeat local,var(--bg);
  background-blend-mode:multiply,normal}
 @media (max-width:360px){.js .nav{background-size:170px auto,auto}}
 .menu-knoepfe .i-mail{background:var(--bg)}
 .nav>a{border-bottom-color:rgba(43,70,168,.14)!important}
 .nav a[href$=".pdf"]::after{vertical-align:8px;font-family:var(--body)}
 .menu-extra{display:block;margin-top:auto;padding-top:26px}
 .menu-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
 .menu-knoepfe a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:999px;font-weight:700;font-size:15px}
 .menu-knoepfe .i-tel{background:var(--blue);color:#fff}
 .menu-knoepfe .i-mail{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
 .menu-info{margin:0 0 4px;font-size:14.5px;color:var(--muted)}
 .js .nav>*{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
 .js .menu-offen .nav>*{opacity:1;transform:none}
 .js .menu-offen .nav>:nth-child(2){transition-delay:.05s}.js .menu-offen .nav>:nth-child(3){transition-delay:.1s}
 .js .menu-offen .nav>:nth-child(4){transition-delay:.15s}.js .menu-offen .nav>:nth-child(5){transition-delay:.2s}
 .js .menu-offen .nav>:nth-child(6){transition-delay:.25s}.js .menu-offen .nav>:nth-child(7){transition-delay:.3s}
 body.menu-offen{overflow:hidden}
 .menu-offen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .menu-offen .burger span:nth-child(2){opacity:0}
 .menu-offen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .arch>img{height:440px}
 .phero .wrap>div{grid-template-columns:1fr;gap:30px}.phero-bild{height:300px}
 .info{grid-template-columns:1fr;gap:14px;padding:34px 30px}
 .foot .wrap{flex-wrap:wrap}}
@media (max-width:640px){
 .rows a{grid-template-columns:1fr 48px;grid-template-areas:"t go" "d go";gap:4px 14px}
 .rows a::after{width:48px;height:48px}
 .item,.item.ohne-foto{grid-template-columns:1fr;gap:18px}.item .opts{grid-column:auto}.item>img{width:100%;height:220px}
 .item.ohne-foto{padding:30px 24px;margin:16px -8px}
 .item h3{font-size:32px}
 .opts .zeile b{font-size:26px}
 .offer .ph img{height:300px}
 .phero-bild{height:240px}
 .info .marke,.info h3{font-size:28px}
 .artikel .lead{font-size:18px}}
@media (max-width:380px){.logo img{height:44px}.nav>a{font-size:28px}.cta{padding:34px 20px}}
/* „Bewegung reduzieren“: keine Animationen */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}