/* =============================================================================
   Vitamoure, Startseite
   Struktur und Elemente wie das Original, handwerklich gehoben.
   Alle Werte als Variablen, Aenderungen hier wirken auf die ganze Seite.
   ========================================================================== */

/* ---------- Schriften, lokal, nur latin und latin-ext ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-stretch:100% 125%;
  font-display:swap;src:url('../fonts/k3kQo8UDI-1M0wlSfdfoLmvDIaK18A.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-stretch:100% 125%;
  font-display:swap;src:url('../fonts/k3kQo8UDI-1M0wlSfdnoLmvDIaI.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* CI unveraendert */
  --navy:#0B1023;
  --navy-2:#141A31;
  --lime:#9BE42B;
  --lime-2:#8AD41C;          /* Hover */
  --lime-wash:#EDFADD;       /* Original-Tint */
  --lime-line:#D3EFA0;
  --dark:#1C1C1E;            /* dunkle Sektionen, exakt Original */
  --black:#070707;           /* Footer, exakt Original-Theme */

  /* Neutrals wie im Original: kuehles Off-White und Blaugrau */
  --paper:#FCFCFC;
  --paper-2:#F4F5F9;
  --paper-3:#EDEEF2;
  --ink:#1C1C1E;
  --ink-2:#4F5561;
  --ink-3:#6A7080;
  --line:#EDEEF2;
  --line-2:#C9CDD6;
  --white:#fff;
  --star:#E0A93A;
  --wa:#25D366;

  /* Typo */
  --fd:'Archivo',system-ui,sans-serif;
  --fb:'DM Sans',system-ui,sans-serif;

  /* Abstaende, kompakt wie im Original */
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:38px; --s7:56px; --s8:80px;
  --sec:clamp(46px,4.6vw,80px);        /* Sektionspolster */
  --gut:clamp(18px,3.4vw,40px);
  --wrap:1240px;

  /* Radien, ein System */
  --r1:8px; --r2:14px; --r3:22px; --rp:999px;

  /* Schatten, drei Stufen, geschichtet */
  --sh1:0 1px 2px rgba(11,16,35,.05),0 2px 5px rgba(11,16,35,.04);
  --sh2:0 2px 4px rgba(11,16,35,.05),0 10px 24px rgba(11,16,35,.07);
  --sh3:0 4px 8px rgba(11,16,35,.07),0 26px 52px rgba(11,16,35,.13);

  --ez:cubic-bezier(.22,1,.36,1);
  --d1:200ms; --d2:420ms; --d3:720ms;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--fb);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);margin:0;font-weight:700;
  letter-spacing:-.032em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.038em;line-height:1.02}
h2{font-size:clamp(1.9rem,3.5vw,3.05rem)}
h3{font-size:1.16rem;letter-spacing:-.02em;line-height:1.2}
h4{font-size:1rem;letter-spacing:-.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:var(--r1)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:#fff;
  padding:14px 20px;border-radius:0 0 var(--r1) 0}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Signature des Originals: zweifarbige Headline */
.g{color:var(--lime)}
.dark .g,.hero .g{color:var(--lime)}

/* Signature des Originals: Pill-Eyebrow */
.pill{display:inline-block;font-family:var(--fb);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
  background:var(--lime-wash);border:1px solid var(--lime-line);
  padding:7px 16px;border-radius:var(--rp);margin-bottom:var(--s4)}
.dark .pill{color:var(--lime);background:rgba(155,228,43,.1);border-color:rgba(155,228,43,.3)}
/* Variante fuer Split-Sektionen: Strich statt Pille */
.kick{display:flex;align-items:center;gap:11px;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--lime);margin-bottom:var(--s4);
  width:fit-content}
.kick::before{content:"";width:26px;height:2px;background:var(--lime);flex:none}
.dark .kick{color:var(--lime)}

.head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:var(--s6)}
.head p{margin:var(--s4) auto 0;max-width:60ch;color:var(--ink-2)}
.head-l{max-width:560px;text-align:left;margin-inline:0}
.lede{font-size:1.08rem;line-height:1.58}

.dark{background:var(--dark);color:#A6A6AA;position:relative;isolation:isolate}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 74% at 18% 8%,rgba(155,228,43,.06),transparent 62%)}
.dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url('../img/noise.png');background-size:96px 96px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fb);font-size:.94rem;font-weight:700;letter-spacing:-.005em;
  padding:14px 26px;min-height:46px;border:1px solid transparent;border-radius:var(--rp);
  cursor:pointer;transition:background var(--d1) var(--ez),color var(--d1) var(--ez),
  border-color var(--d1) var(--ez),box-shadow var(--d2) var(--ez),transform var(--d2) var(--ez)}
.btn-p{background:var(--lime);color:var(--navy);box-shadow:var(--sh1)}
.btn-p:hover{background:var(--lime-2);box-shadow:var(--sh3);transform:translateY(-1px)}
.btn-o{border-color:var(--line-2);color:var(--ink)}
.btn-o:hover{border-color:var(--ink);background:var(--white);box-shadow:var(--sh2)}
.btn-w{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-w:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn-s{padding:9px 17px;min-height:38px;font-size:.83rem}
.ar{transition:transform var(--d1) var(--ez)}
.btn:hover .ar,.mr:hover .ar{transform:translateX(3px)}

/* ---------- 1 Topbar, Original-Marquee mit Lime-Icons ---------- */
.vitamoure-topbar{background:#0E1425;width:100%;height:38px;display:flex;align-items:center;
  overflow:hidden;position:relative;font-family:var(--fb);z-index:60}
.vtb-track{flex:1;overflow:hidden;display:flex;align-items:center;min-width:0}
.vtb-scroll{display:flex;align-items:center;animation:vtb-marquee 28s linear infinite;
  will-change:transform}
.vtb-scroll:hover{animation-play-state:paused}
@keyframes vtb-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.vtb-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12px;font-weight:500;color:#fff;letter-spacing:.01em}
.vtb-item strong{color:var(--lime);font-weight:700}
.vtb-item svg{width:13px;height:13px;stroke:var(--lime);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.vtb-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);
  opacity:.5;flex-shrink:0;margin:0 14px}

/* ---------- 3 Header ---------- */
.hd{position:sticky;top:0;z-index:90;background:rgba(252,252,252,.88);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--d1),box-shadow var(--d1)}
.hd.stuck{border-bottom-color:var(--line);box-shadow:0 6px 22px -20px rgba(11,16,35,.7)}
.hd-in{display:flex;align-items:center;gap:var(--s6);height:70px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.logo{flex:none}
.logo img{height:29px;width:auto;max-width:none;object-fit:contain}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:6px;padding:10px 13px;font-size:.93rem;
  font-weight:500;color:var(--ink);border-radius:var(--r1);
  transition:background var(--d1),color var(--d1)}
.nav>li>a:hover{background:var(--paper-2)}
.cr{width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.45;transition:transform var(--d1) var(--ez)}
.nav>li:hover .cr{transform:translateY(1px) rotate(225deg)}
.nav ul{position:absolute;top:calc(100% + 7px);left:0;min-width:274px;padding:8px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--d1) var(--ez),transform var(--d1) var(--ez),visibility var(--d1)}
.nav>li:hover>ul,.nav>li:focus-within>ul{opacity:1;visibility:visible;transform:none}
.nav ul a{display:block;padding:9px 12px;font-size:.875rem;color:var(--ink-2);border-radius:var(--r1);
  transition:background var(--d1),color var(--d1)}
.nav ul a:hover{background:var(--lime-wash);color:var(--navy)}
.hd-r{display:flex;align-items:center;gap:var(--s4);flex:none}
.hd-tel{display:inline-flex;align-items:center;gap:7px;font-size:.93rem;font-weight:700;
  color:var(--ink);white-space:nowrap}
.hd-tel:hover{color:var(--lime)}
.hd-tel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.bg{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r1);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;flex:none}
.bg span{display:block;width:18px;height:1.8px;background:var(--ink);position:relative;
  transition:background var(--d1)}
.bg span::before,.bg span::after{content:"";position:absolute;left:0;width:18px;height:1.8px;
  background:var(--ink);transition:transform var(--d1) var(--ez),top var(--d1) var(--ez)}
.bg span::before{top:-6px}.bg span::after{top:6px}
.bg[aria-expanded="true"] span{background:transparent}
.bg[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.bg[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1080px){.nav,.hd-tel{display:none}.bg{display:flex}.nav{margin-left:0}
  .hd-r{margin-left:auto}}
/* Schmale Geraete: Header muss in den Viewport passen, sonst verbreitert
   Mobile-Safari die Seite (weisser Streifen rechts neben dem Burger). */
@media(max-width:480px){
  .hd-in{gap:var(--s3)}
  .hd-r{gap:var(--s3)}
  .logo img{height:24px}
  .hd-r .btn-s{padding:8px 13px;min-height:38px;font-size:.8rem}
  .bg{width:40px;height:40px}
}
@media(max-width:360px){
  .hd-in{gap:var(--s2)}
  .hd-r{gap:var(--s2)}
  .logo img{height:21px}
  .hd-r .btn-s{padding:8px 10px;font-size:.76rem}
}

/* Off-Canvas */
.oc{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;overflow:hidden}
.oc-b{position:absolute;inset:0;background:rgba(11,16,35,.5);opacity:0;transition:opacity var(--d2) var(--ez)}
.oc-p{position:absolute;inset:0 0 0 auto;width:min(410px,88vw);background:var(--paper);
  padding:var(--s5) var(--s5) var(--s8);overflow-y:auto;transform:translateX(100%);
  transition:transform var(--d2) var(--ez);box-shadow:var(--sh3)}
.oc.open{visibility:visible;pointer-events:auto}
.oc.open .oc-b{opacity:1}
.oc.open .oc-p{transform:none}
.oc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}
.oc-h img{height:26px;width:auto;max-width:none}
.oc-x{width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r1);
  background:transparent;cursor:pointer;font-size:22px;line-height:1;color:var(--ink)}
.oc-n>li{border-bottom:1px solid var(--line)}
.oc-n>li>a,.oc-t{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:15px 4px;font-size:1.04rem;font-weight:500;color:var(--ink);background:none;border:0;
  cursor:pointer;text-align:left;min-height:46px;font-family:var(--fb)}
.oc-t .cr{width:7px;height:7px;transform:rotate(45deg)}
.oc-t[aria-expanded="true"] .cr{transform:rotate(225deg)}
.oc-s{display:none;padding:0 0 var(--s3) var(--s4)}
.oc-s.open{display:block}
.oc-s a{display:block;padding:11px 4px;font-size:.93rem;color:var(--ink-2);min-height:44px}
.oc-f{display:grid;gap:var(--s2);margin-top:var(--s6)}

/* ---------- 4 Hero ----------
   Das Motiv ist ein Hochformat und wuerde bei voller Breite den ganzen Rahmen
   fuellen, der Text lag dann auf dem Gesicht. Deshalb sitzt das Bild rechts und
   wird nach links in die Navy-Flaeche gemischt. Wirkt weiter randlos, ist aber
   sicher lesbar. */
.hero{position:relative;background:var(--navy);min-height:100vh;   /* wie das Original: voller Viewport */
  display:flex;align-items:center;padding-block:var(--s8) clamp(var(--s8),10vh,120px);isolation:isolate;overflow:hidden}
.hero>.wrap{width:100%}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 24%}
/* Vollbild: Verlauf traegt links den Text, rechts bleibt das Gesicht frei */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,16,35,.93) 0%,rgba(11,16,35,.82) 30%,
             rgba(11,16,35,.42) 56%,rgba(11,16,35,.08) 82%,rgba(11,16,35,.04) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 62% at 8% 18%,rgba(155,228,43,.1),transparent 64%)}
.hero-c{position:relative;max-width:560px;color:#C3C9D6}
.hero h1{color:#fff;margin-bottom:var(--s5)}
.hero .lede{color:#C9CEDA;max-width:48ch}
.hero-a{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.rate{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 12px;
  background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--rp);font-size:.83rem;color:#D6DAE4;
  margin-bottom:var(--s5);width:fit-content}
.rate b{color:#fff;font-weight:700;font-size:.94rem}
.stars{display:inline-flex;gap:1.5px}
.stars svg{width:13px;height:13px;fill:var(--lime)}
/* Immer einzeilig: nowrap plus fluide Groessen und Abstaende, damit die drei
   Vorteile auf jeder Breite in einer Reihe stehen und nie umbrechen. */
.mini{display:flex;flex-wrap:nowrap;align-items:flex-start;margin-top:var(--s7);
  border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s4)}
.mini div{flex:0 0 auto;min-width:0;
  padding-right:clamp(.5rem,1.9vw,var(--s6));margin-right:clamp(.5rem,1.9vw,var(--s6));
  border-right:1px solid rgba(255,255,255,.18)}
.mini div:last-child{border:0;margin:0;padding:0}
.mini dt{font-family:var(--fd);font-weight:700;font-size:clamp(.8rem,.55vw + .7rem,1rem);
  color:#fff;letter-spacing:-.02em;white-space:nowrap}
.mini dd{margin:2px 0 0;font-size:clamp(.64rem,.5vw + .55rem,.81rem);color:#9BA3B4;
  white-space:nowrap;letter-spacing:-.01em}
@media(max-width:1100px){
  .hero-bg::after{background:linear-gradient(90deg,rgba(11,16,35,.94) 0%,rgba(11,16,35,.86) 34%,
                  rgba(11,16,35,.5) 62%,rgba(11,16,35,.12) 100%)}
}
@media(max-width:820px){
  .hero{min-height:100vh;min-height:100svh;
    padding-block:var(--s8) clamp(64px,12vh,104px);align-items:stretch}
  .hero-bg{inset:0;width:100%}
  /* Gesicht liegt im Quellbild rechts: Ausschnitt folgt ihm auf schmalen Breiten */
  .hero-bg img{object-position:62% 16%}
  /* dezente Abdunklung: oben bleibt das Gesicht klar, Text unten sicher lesbar */
  .hero-bg::after{background:linear-gradient(180deg,rgba(11,16,35,.34) 0%,
                  rgba(11,16,35,.68) 44%,rgba(11,16,35,.93) 100%)}
  .hero-c{max-width:none}
  .mini{margin-top:var(--s6)}
}
@media(max-width:560px){.hero-a .btn{flex:1 1 100%}}

/* ---------- 5 Zahlen-Leiste, dunkel mit Icons ---------- */
.nums{background:var(--dark);border-top:1px solid rgba(255,255,255,.08)}
.nums ul{display:grid;grid-template-columns:repeat(4,1fr)}
.nums li{padding:var(--s6) var(--s5);text-align:center;border-right:1px solid rgba(255,255,255,.09)}
.nums li:last-child{border-right:0}
.nums .ic{width:34px;height:34px;margin:0 auto var(--s3);display:grid;place-items:center;
  border-radius:var(--r1);background:rgba(155,228,43,.11)}
.nums .ic svg{width:17px;height:17px;stroke:var(--lime);fill:none;stroke-width:1.7}
.nums .v{font-family:var(--fd);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.4rem);
  line-height:1;letter-spacing:-.035em;color:#fff}
.nums .l{font-size:.81rem;color:#9A9A9E;margin-top:6px}
@media(max-width:780px){.nums ul{grid-template-columns:1fr 1fr}
  .nums li:nth-child(2){border-right:0}
  .nums li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.09)}}

/* ---------- Karten, gemeinsame Basis ---------- */
.card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez),border-color var(--d1)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh3);border-color:var(--line-2)}
.card-i{overflow:hidden;aspect-ratio:16/10;background:var(--paper-3)}
.card-i picture{display:block;width:100%;height:100%}
.card-i img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--d3) var(--ez)}
.card:hover .card-i img{transform:scale(1.04)}
.card-b{padding:var(--s5);display:flex;flex-direction:column;flex:1;min-width:0}
.card-t{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.card-p{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap}
.card-b p{margin:var(--s2) 0 var(--s5);font-size:.92rem;color:var(--ink-2)}
.mr{display:inline-flex;align-items:center;gap:7px;margin-top:auto;width:fit-content;
  background:var(--lime);color:var(--navy);font-size:.84rem;font-weight:700;
  padding:9px 15px;border-radius:9px;transition:filter var(--d1),transform var(--d1)}
.card:hover .mr{filter:brightness(1.06);transform:translateY(-1px)}
.mr::after{content:"";position:absolute;inset:0}

/* ---------- 6 Behandlungen, Karussell ---------- */
.car{position:relative}
.car-v{overflow:hidden;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.car-tr{display:flex;gap:var(--s5);transition:transform var(--d3) var(--ez)}
.car-tr>li{flex:0 0 calc((100% - var(--s5) * 2) / 3);min-width:0}
.car-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  margin-top:var(--s5)}
.car-btns{display:flex;gap:var(--s2)}
.car-btns button{width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;
  background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:background var(--d1),border-color var(--d1),opacity var(--d1)}
.car-btns button:hover:not(:disabled){background:var(--ink);border-color:var(--ink)}
.car-btns button:hover:not(:disabled) svg{stroke:var(--white)}
.car-btns button:disabled{opacity:.3;cursor:default}
.car-btns svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8;
  transition:stroke var(--d1)}
.dots{display:flex;gap:7px}
.dots button{width:22px;height:4px;border:0;border-radius:var(--rp);background:var(--line-2);
  cursor:pointer;padding:0;transition:background var(--d1),width var(--d2) var(--ez)}
.dots button[aria-current="true"]{background:var(--lime);width:34px}
.tr-ft{margin-top:var(--s6);text-align:center}
@media(max-width:980px){.car-tr>li{flex:0 0 calc((100% - var(--s5)) / 2)}}
@media(max-width:640px){.car-tr>li{flex:0 0 100%}.car-nav{justify-content:center}
  .car-btns{display:none}}

/* ---------- 7 USP, hell, zweispaltig ---------- */
.usp{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(var(--s6),4vw,var(--s8));
  align-items:start}
.chk{display:grid;gap:var(--s2)}
.chk li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.chk li:first-child{border-top:1px solid var(--line)}
.chk .ic{width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;
  place-items:center;flex:none;margin-top:2px}
.chk .ic svg{width:11px;height:11px;stroke:var(--navy);fill:none;stroke-width:2.6}
.chk h3{font-size:1rem;margin-bottom:3px}
.chk p{margin:0;font-size:.92rem}
@media(max-width:900px){.usp{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- 8 und 10 Splits mit Preiskarten ---------- */
.sp{display:grid;gap:clamp(var(--s6),4vw,var(--s8));align-items:center}
.sp-a{grid-template-columns:1.04fr .96fr}
.sp-b{grid-template-columns:.96fr 1.04fr}
.sp-b .sp-m{order:-1}
.sp-m img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--r3);box-shadow:var(--sh2)}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.pg li{border:1px solid var(--line);border-radius:var(--r2);background:var(--white);
  transition:border-color var(--d1),box-shadow var(--d2) var(--ez),transform var(--d2) var(--ez)}
.pg li>a{display:block;padding:var(--s4);height:100%}
.pg li:hover{border-color:var(--lime);box-shadow:var(--sh2);transform:translateY(-3px)}
.dark .pg li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark .pg li:hover{border-color:var(--lime);background:rgba(255,255,255,.07)}
.pg .t{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.pg .n{font-family:var(--fd);font-weight:700;font-size:.96rem;color:var(--ink);letter-spacing:-.02em}
.dark .pg .n{color:#fff}
.pg .p{font-family:var(--fd);font-weight:700;font-size:.94rem;color:var(--lime);white-space:nowrap}
.dark .pg .p{color:var(--lime)}
.pg .d{margin:5px 0 0;font-size:.85rem;line-height:1.45;color:var(--ink-3)}
.dark .pg .p{color:var(--lime)}
.dark .pg .d{color:#8F98AC}
.sp-ft{margin-top:var(--s5)}
@media(max-width:900px){.sp-a,.sp-b{grid-template-columns:1fr}
  .sp-a .sp-m{order:-1}   /* Infusionen: Bild oben, wie im Original */
  .sp-b .sp-m{order:2}    /* Blutanalysen: Bild unten, wie im Original */
  .sp-m img{aspect-ratio:4/4.4}}
@media(max-width:520px){.pg{grid-template-columns:1fr}}

/* ---------- 9 Video, Hochformat im Tint-Rahmen wie im Original ---------- */
.vid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--s6),4vw,var(--s8));align-items:center}
.vl{display:grid;gap:var(--s3);margin-top:var(--s5)}
.vl li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;font-size:.94rem}
.vl .ic{width:20px;height:20px;border-radius:50%;background:var(--lime);display:grid;
  place-items:center;flex:none;margin-top:2px}
.vl .ic svg{width:10px;height:10px;stroke:var(--navy);fill:none;stroke-width:2.8}
.vw-wrap{position:relative;width:min(380px,100%);justify-self:center}
.vw-frame{background:var(--lime-wash);border:1px solid var(--lime-line);border-radius:28px;
  padding:16px}
.vw{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--sh2);background:var(--dark)}
.vw video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.vw-p{position:absolute;inset:0;border:0;background:rgba(7,7,7,.22);cursor:pointer;
  display:grid;place-items:center;padding:0;transition:background var(--d1)}
.vw-p:hover{background:rgba(7,7,7,.1)}
.vw-c{width:64px;height:64px;border-radius:50%;background:var(--lime);display:grid;place-items:center;
  box-shadow:var(--sh3);transition:transform var(--d2) var(--ez)}
.vw-p:hover .vw-c{transform:scale(1.08)}
.vw-c svg{width:20px;height:20px;fill:var(--navy);margin-left:3px}
/* Badge oben links ueberlappt den Rahmen, Standort-Pill unten rechts */
.vw-rate{position:absolute;top:-16px;left:-18px;z-index:4;background:var(--white);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);
  padding:9px 14px 9px 9px;display:flex;align-items:center;gap:10px}
.vw-rate .vw-st{width:30px;height:30px;border-radius:50%;background:var(--lime-wash);
  border:1px solid var(--lime-line);display:grid;place-items:center;flex:none}
.vw-rate .vw-st svg{width:14px;height:14px;fill:var(--lime)}
.vw-rate .tx{display:grid;line-height:1.25}
.vw-rate .tx b{font-size:.86rem;color:var(--ink)}
.vw-rate .tx span{font-size:.73rem;color:var(--ink-3)}
.vw-loc{position:absolute;bottom:-12px;right:-10px;z-index:4;display:inline-flex;align-items:center;
  gap:7px;background:var(--lime);color:var(--navy);font-size:.78rem;font-weight:700;
  padding:8px 14px;border-radius:999px;box-shadow:var(--sh2)}
.vw-loc i{width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none}
@media(max-width:900px){.vid{grid-template-columns:1fr}
  .vw-wrap{order:-1;justify-self:center;margin-top:26px;margin-bottom:var(--s4)}
  .vw-rate{left:-4px;top:-18px}
  .vw-loc{right:2px;bottom:-12px}}

/* ---------- 11 Warum, Karten mit Icon-Quadrat ---------- */
.wy{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.wy li{background:var(--white);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5);box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
.wy li:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.wy .ic{width:60px;height:60px;border-radius:16px;background:var(--lime-wash);
  display:grid;place-items:center;margin-bottom:var(--s4);transition:background var(--d1)}
.wy li:hover .ic{background:var(--lime)}
.wy .ic svg{width:26px;height:26px;stroke:var(--ink);fill:none}
.wy h3{margin-bottom:var(--s2)}
.wy p{margin:0;font-size:.92rem}
@media(max-width:940px){.wy{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.wy{grid-template-columns:1fr}}

/* ---------- 12 Ablauf: weisse Karten mit Lime-Kreisnummer, grauer Band ---------- */
.st{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  margin-top:var(--s5)}
.st li{counter-increment:step;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4);box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
.st li:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.st li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:var(--lime);color:var(--navy);font-family:var(--fd);
  font-weight:800;font-size:.86rem;margin-bottom:var(--s3)}
.st h3{font-size:1rem;margin-bottom:var(--s2)}
.st p{margin:0;font-size:.88rem}
@media(max-width:940px){.st{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.st{grid-template-columns:1fr}}

/* ---------- 13 Bewertungen, statisch statt Trustindex-CDN ---------- */
.rev{display:grid;grid-template-columns:230px 1fr;gap:clamp(var(--s5),3vw,var(--s7));
  align-items:center}
.rev-sum{text-align:center}
.rev-t{font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:var(--s2)}
.rev-sum .gstars{justify-content:center;margin-bottom:var(--s2)}
.rev-sum p{font-size:.9rem;margin:0 0 var(--s2);color:var(--ink-2)}
.gword{font-family:var(--fb);font-weight:500;font-size:1.6rem;letter-spacing:-.02em}
.gword i{font-style:normal}
.gstars{display:inline-flex;gap:2px}
.gstars svg{width:19px;height:19px;fill:#F1A93B}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.rv-card{position:relative;height:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4);box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
.rv-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.rv-hd{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;
  margin-bottom:var(--s3)}
.rv-av{width:40px;height:40px;border-radius:50%;color:#fff;display:grid;place-items:center;
  font-family:var(--fb);font-weight:700;font-size:1.05rem}
.rv-hd b{display:block;color:var(--ink);font-size:.95rem;line-height:1.25}
.rv-hd span{font-size:.79rem;color:var(--ink-3)}
.rv-st{display:flex;align-items:center;gap:7px;margin-bottom:var(--s3)}
.rv-st .gstars svg{width:16px;height:16px}
.rv-ok{width:15px;height:15px;border-radius:50%;background:#4285F4;display:inline-grid;
  place-items:center;flex:none}
.rv-card p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.rv-more{display:inline-block;margin-top:var(--s2);font-size:.85rem;color:var(--ink-3)}
.rv-lnk{position:absolute;inset:0;border-radius:var(--r2)}
@media(max-width:980px){.rev{grid-template-columns:1fr}.rv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rv-grid{grid-template-columns:1fr}}

/* ---------- 14 Final-CTA, helle Karte wie im Original ---------- */
.cta-card{position:relative;overflow:hidden;border-radius:2.5rem;
  border:1px solid rgba(155,228,43,.45);
  background:linear-gradient(135deg,rgba(155,228,43,.2),#fcfcfc,#fcfcfc);
  padding:clamp(var(--s7),7vw,4rem) var(--s5);text-align:center}
.cta-card h2{margin-bottom:var(--s4)}
.cta-card p{max-width:52ch;margin:0 auto var(--s6);color:var(--ink-2)}
@media(max-width:640px){.cta-card{border-radius:var(--r3)}}

/* ---------- 15 Kontaktwege: dunkler Strip, optisch Teil des Footers ---------- */
.pf{background:var(--black);border-bottom:1px solid rgba(255,255,255,.1);padding-block:var(--s6)}
.pf-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.pf a{display:flex;align-items:center;gap:var(--s3)}
.pf .ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;flex:none;transition:background var(--d1),border-color var(--d1)}
.pf a:hover .ic{background:var(--lime);border-color:var(--lime)}
.pf .ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.6;transition:stroke var(--d1)}
.pf a:hover .ic svg{stroke:var(--navy)}
.pf b{display:block;font-family:var(--fd);font-weight:600;font-size:.9rem;color:#F5F6FF;
  letter-spacing:-.015em;line-height:1.35}
.pf i{font-style:normal;font-size:.78rem;color:rgba(245,246,255,.74)}
.pf-tel b{color:var(--lime)}                      /* Hotline gruen, wie im Original */
@media(max-width:940px){.pf-g{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}}
@media(max-width:560px){.pf-g{grid-template-columns:1fr}}

/* ---------- 14 Footer ----------
   Aufbau, Reihenfolge und Groessen wie im Original: vier gleiche Spalten,
   Ueberschriften gemischt gesetzt (nicht als Kapitaelchen), Oeffnungszeiten als
   Zeilen mit Haarlinie, Standorte vor den weiteren Links. */
.ft{background:var(--black);color:#F5F6FF;font-size:1rem}
.ft-t{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s6) clamp(var(--s4),2.4vw,30px);padding-block:var(--s7)}
.ft-h{color:#fff;font-family:var(--fd);font-size:1.125rem;font-weight:600;letter-spacing:-.015em;
  text-transform:none;margin:0 0 22px;line-height:1.2}
.ft a{color:#F5F6FF;transition:color var(--d1)}
.ft a:hover{color:var(--lime)}
.ft-lg{height:44px;width:auto;max-width:none;margin-bottom:var(--s4)}
.ft-ab{max-width:31ch;line-height:1.6;font-size:.94rem;color:rgba(245,246,255,.86)}
.ft ul{display:grid;gap:0}
/* Weitere Links: Zeilenabstand aus dem Original, Klickflaeche ueber Padding */
.ft-nav a{display:block;padding:5px 0;line-height:1.6}
.ft-hrs{max-width:360px}
.ft-hr{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  line-height:2;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.ft-hr span:first-child{font-weight:500;white-space:nowrap}
.ft-hr span:last-child{text-align:right;color:rgba(245,246,255,.9)}
.ft ul.ft-loc{gap:16px}   /* Eintragsabstand wie im Original: Raster 61px */
.ft-loc strong{display:block;color:#fff;font-weight:600;font-size:.94rem;letter-spacing:-.02em}
.ft-loc span{display:block;font-size:.76rem;line-height:1.45;color:rgba(245,246,255,.66);margin-top:3px}
.ft-loc a:hover strong{color:var(--lime)}
.soc{display:flex;gap:10px;margin-top:var(--s4)}
.soc a{width:28px;height:28px;background:var(--lime);border-radius:50%;
  display:grid;place-items:center;transition:transform var(--d1),background var(--d1)}
.soc a:hover{background:var(--lime-2);transform:translateY(-2px)}
.soc svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ft-b{padding-block:var(--s4);border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem;color:rgba(245,246,255,.55)}
@media(max-width:1000px){.ft-t{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s6)}}
@media(max-width:620px){.ft-t{grid-template-columns:1fr}}

/* ---------- 17 Vitbar, Original-Verhalten: Slide-in nach 200px, weg am Footer ----------
   1:1 aus dem Original uebernommen, zwei Aenderungen: Schrift lokal statt
   Google-Request, Doctolib-Logo im CTA auf Wunsch entfernt. */
.vitbar{position:fixed;bottom:0;left:0;right:0;z-index:80;font-family:var(--fb);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  background:#fff;border-top:1px solid #e8e8e8;box-shadow:0 -8px 32px rgba(0,0,0,.10);
  padding-bottom:env(safe-area-inset-bottom)}
.vitbar.visible{transform:translateY(0)}
.vitbar-inner{max-width:1200px;margin:0 auto;padding:10px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.vitbar-brand{display:flex;align-items:center;gap:12px;min-width:0}
.vitbar-pin{width:36px;height:36px;background:#f0f9e8;border-radius:9px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.vitbar-pin svg{color:var(--lime)}
.vitbar-brand-texts{display:flex;flex-direction:column;min-width:0;justify-content:center}
.vitbar-brand-name{font-size:14px;font-weight:800;color:#111;letter-spacing:-.01em;
  white-space:nowrap;line-height:1.3}
.vitbar-brand-sub{font-size:12px;color:#666;font-weight:500;white-space:nowrap;
  display:flex;align-items:center;gap:6px;line-height:1.3}
.vitbar-dot{width:4px;height:4px;background:#ccc;border-radius:50%;display:inline-block;flex-shrink:0}
.vitbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.vitbar-icon-btn{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;text-decoration:none;transition:transform .15s,opacity .15s;
  flex-shrink:0;position:relative}
.vitbar-icon-btn:hover{transform:scale(1.07)}
.vitbar-icon-btn.phone{background:#111}
.vitbar-icon-btn.phone svg{color:#fff}
.vitbar-icon-btn.whatsapp{background:#25D366}
.vitbar-icon-btn.whatsapp svg{color:#fff}
.vitbar-icon-btn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);
  left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:11px;
  font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity .15s}
.vitbar-icon-btn:hover::after,.vitbar-icon-btn:focus-visible::after{opacity:1}
.vitbar-divider{width:1px;height:30px;background:#e5e5e5;flex-shrink:0;margin:0 2px}
.vitbar-cta{display:inline-flex;align-items:center;background:var(--lime);color:var(--navy);
  text-decoration:none;border-radius:12px;overflow:hidden;
  transition:filter .2s,transform .15s;flex-shrink:0}
.vitbar-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.vitbar-cta-left{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;
  font-weight:700;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:640px){
  .vitbar-inner{padding:10px 16px;justify-content:center;gap:10px}
  .vitbar-brand{display:none}
  .vitbar-icon-btn{width:44px;height:44px;border-radius:12px}
  .vitbar-icon-btn::after{display:none}
  .vitbar-cta-left{font-size:13px;padding:11px 14px;gap:7px}
}

/* ---------- Back to top ---------- */
.top{position:fixed;right:var(--gut);bottom:80px;z-index:75;width:42px;height:42px;
  border-radius:50%;background:var(--white);border:1px solid var(--line-2);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sh2);opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity var(--d2),visibility var(--d2),transform var(--d2) var(--ez)}
.top.on{opacity:1;visibility:visible;transform:none}
.top svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.9}

/* ---------- Cookie-Banner ---------- */
.cb{position:fixed;right:var(--gut);bottom:80px;z-index:120;width:min(420px,calc(100vw - var(--gut)*2));
  background:var(--white);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh3);
  padding:var(--s5);font-size:.87rem;line-height:1.55;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--d2) var(--ez),visibility var(--d2),transform var(--d2) var(--ez)}
.cb.on{opacity:1;visibility:visible;transform:none}
.cb-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s3)}
.cb-h img{height:22px;width:auto;max-width:none}
.cb-x{width:32px;height:32px;border:0;background:transparent;cursor:pointer;font-size:19px;
  line-height:1;color:var(--ink-3);border-radius:var(--r1)}
.cb-x:hover{background:var(--paper-2);color:var(--ink)}
.cb h2{font-size:1rem;margin-bottom:var(--s2)}
.cb-a{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.cb-a .btn{flex:1 1 auto}
.cb-cats{display:grid;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line)}
.cb-cats:not(.open){display:none}
.cb-cat{display:flex;align-items:flex-start;gap:var(--s3);font-size:.83rem}
.cb-cat input{margin-top:3px;accent-color:var(--lime);width:16px;height:16px;flex:none}
.cb-cat b{display:block;color:var(--ink);font-weight:700}
.cb-more{background:none;border:0;padding:0;color:var(--ink-2);font-weight:700;
  font-size:.83rem;cursor:pointer;text-decoration:underline;margin-top:var(--s3)}
.cb-lnk{display:flex;gap:var(--s4);margin-top:var(--s4);font-size:.79rem}
.cb-lnk a{color:var(--ink-2);text-decoration:underline}

/* ---------- Reveal, nur mit JS aktiv ---------- */
html.js [data-rv]{opacity:0;transform:translateY(14px)}
html.js .rv[data-rv]{opacity:1;transform:none;
  transition:opacity var(--d2) var(--ez),transform var(--d2) var(--ez)}
[data-rv="1"]{transition-delay:60ms}[data-rv="2"]{transition-delay:120ms}
[data-rv="3"]{transition-delay:180ms}[data-rv="4"]{transition-delay:240ms}
[data-rv="5"]{transition-delay:300ms}[data-rv="6"]{transition-delay:360ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important}
  html.js [data-rv]{opacity:1!important;transform:none!important}
  .vtb-scroll{animation:none!important}
}

/* =============================================================================
   UNTERSEITEN-BAUSTEINE
   Aufbau, Raster und Groessen nach dem Original der Behandlungsseiten.
   Wird von /hyaluron/ und den weiteren Aesthetik-Seiten genutzt.
   Flaechenwechsel wie im Original: --paper-3 und --paper-2 im Wechsel,
   Karten immer weiss.
   ========================================================================== */
.sub-hero{background:var(--paper-3);padding-block:var(--s7)}
/* Spaltenverhaeltnis wie im Original: Text 55, Bild 45 */
.sh-g{display:grid;grid-template-columns:55% 45%;gap:var(--s5);align-items:center}
/* Lange Komposita wie "Hyaluronunterspritzungen" sind breiter als ein Handy-Display
   und wuerden die Spalte aufblaehen. Darum kleinere Mindestgroesse, Silbentrennung
   und min-width:0 an den Rasterkindern. */
.sh-txt h1{font-size:clamp(1.55rem,5.4vw,3.4rem);margin-bottom:var(--s4);
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.sh-g>*{min-width:0}
.sh-lede{max-width:46ch;margin-top:var(--s4)}
.sh-a{margin-top:var(--s5)}
/* Bild: Desktop nahezu quadratisch (536x499), Mobil flacher (370x250), wie im Original */
.sh-img picture{display:block;width:100%}
.sh-img img{width:100%;height:auto;aspect-ratio:536/499;object-fit:cover;object-position:50% 50%;
  border-radius:var(--r3);box-shadow:var(--sh2)}

/* Bewertungs-Pille im Hero */
.rate-pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 var(--s3);
  background:var(--lime-wash);border:1px solid var(--lime-line);border-radius:var(--rp);
  padding:7px 15px;font-size:.83rem;color:var(--ink-2)}
.rate-pill b{color:var(--ink);font-family:var(--fd);font-size:.95rem}
.rate-pill i{width:3px;height:3px;border-radius:50%;background:var(--line-2)}

/* Vertrauenszeile: Ort, Erfahrung, Kunden */
.trust{display:flex;flex-wrap:wrap;gap:9px var(--s5);margin:0 0 var(--s2);
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2)}   /* auf der hellgrauen Flaeche braucht Kleintext 4,5:1 */
.trust li{display:flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;stroke:var(--lime);fill:none;flex:none}

/* Kennzahlen unter dem Hero-Text: Linie oben, keine Trennstriche, helle Flaeche */
.sh-mini{margin-top:var(--s6);border-top-color:rgba(11,16,35,.14)}
.sh-mini div{border-right:0;padding-right:clamp(var(--s5),3.6vw,var(--s7));margin-right:0}
.sh-mini dt{color:var(--ink)}
.sh-mini dd{color:var(--ink-2)}

/* ---------- Fakten-Leiste: vier weisse Karten ---------- */
.fk-sec{background:var(--paper-3);padding-bottom:var(--sec)}
.fk{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.fk li{background:var(--white);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5) var(--s4);text-align:center;box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
.fk li:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.fk-i{width:46px;height:46px;border-radius:50%;background:var(--paper-3);
  display:grid;place-items:center;margin:0 auto var(--s3);
  transition:background var(--d1) var(--ez)}
.fk li:hover .fk-i{background:var(--lime-wash)}
.fk-i svg{width:21px;height:21px;stroke:var(--lime);fill:none;stroke-width:1.7}
.fk-l{margin:0;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.fk-v{margin:3px 0 0;font-family:var(--fd);font-size:1.06rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}

/* ---------- Fliesstext-Sektion ---------- */
.pr-sec{background:var(--paper-3)}
.prose{max-width:66ch;margin-inline:auto;text-align:center}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:var(--s4)}
.prose p{margin:0;font-size:1.02rem;line-height:1.68}

/* ---------- Preis- und Arealkarten ---------- */
.pc-sec{background:var(--paper-2)}
.vt-sec{background:var(--paper-3)}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pcard{height:100%;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);
  box-shadow:var(--sh1);transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez),
  border-color var(--d1) var(--ez)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--lime-line)}
.pcard h3{margin-bottom:var(--s2)}
.pc-d{margin:0;font-size:.92rem;color:var(--ink-2)}
.pc-f{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  margin-top:auto;padding-top:var(--s5)}
.pc-meta{display:grid;gap:4px}
.pc-meta li{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-3)}
.pc-i{display:inline-grid;place-items:center;flex:none}
.pc-i svg{width:14px;height:14px;stroke:var(--ink-3);fill:none}
.pc-price{margin:0;text-align:right;line-height:1}
.pc-price span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.pc-price b{font-family:var(--fd);font-size:1.45rem;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap}
/* Staffelpreise, wie im Original als eigener grauer Block */
.pc-tiers{margin-top:var(--s4);background:var(--paper-2);border-radius:var(--r2);
  padding:var(--s3) var(--s4);display:grid;gap:6px}
.pc-tiers li{display:flex;justify-content:space-between;gap:var(--s4);font-size:.88rem;
  color:var(--ink-2)}
.pc-tiers b{font-family:var(--fd);color:var(--ink);letter-spacing:-.02em}

/* ---------- Bewertungskarten auf Unterseiten ---------- */
.rv-3{margin-bottom:var(--s6)}
.rv-av-l{background:var(--lime-wash);color:var(--ink);border:1px solid var(--lime-line)}
.rv-src{margin-top:var(--s4)!important;font-size:.78rem;color:var(--ink-3)}
.rv-3 .rv-hd{grid-template-columns:auto 1fr}
.rv-3 .rv-hd .gstars svg{width:14px;height:14px}

/* ---------- Zwei Karten: geeignet und Gegenanzeigen ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.tw{border:1px solid var(--line);border-radius:var(--r3);padding:var(--s6);
  background:var(--white);box-shadow:var(--sh1)}
.tw-ok{border-color:rgba(155,228,43,.45);
  background:linear-gradient(135deg,rgba(155,228,43,.22),#fcfcfc 62%,#fcfcfc)}
.tw h3{font-size:1.12rem;margin-bottom:var(--s5)}
.tw ul{display:grid;gap:var(--s3)}
.tw li{display:flex;align-items:flex-start;gap:11px;font-size:.94rem;color:var(--ink-2)}
.ck,.cx{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  margin-top:1px}
.ck{background:var(--lime)}
.ck svg{width:11px;height:11px;stroke:var(--navy);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.cx{background:#FDE7E7}
.cx svg{width:10px;height:10px;stroke:#C0392B;stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- Haeufige Fragen, native details ---------- */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:var(--s3)}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh1);transition:box-shadow var(--d2) var(--ez),border-color var(--d1) var(--ez)}
.faq details:hover{border-color:var(--lime-line);box-shadow:var(--sh2)}
.faq details[open]{border-color:var(--lime-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);cursor:pointer;list-style:none;
  font-family:var(--fd);font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r2)}
/* Plus, das sich beim Oeffnen zum Minus dreht */
.fq-i{position:relative;width:16px;height:16px;flex:none}
.fq-i::before,.fq-i::after{content:"";position:absolute;inset:50% 0 auto 0;height:2px;
  background:var(--lime);border-radius:2px;transform:translateY(-50%);
  transition:transform var(--d2) var(--ez),opacity var(--d1)}
.fq-i::after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] .fq-i::after{transform:translateY(-50%) rotate(0);opacity:0}
.fq-a{padding:0 var(--s5) var(--s5)}
.fq-a p{margin:0;font-size:.94rem;line-height:1.62;color:var(--ink-2)}

/* ---------- Unterseiten: Mobil ----------
   Reihenfolge wie im Original: Bild oben, Text darunter zentriert;
   alle Raster einspaltig, Kennzahlen bleiben dreispaltig. */
@media(max-width:1040px){
  .pcards{grid-template-columns:repeat(2,1fr)}
  .fk{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sh-g{grid-template-columns:1fr}
  .sh-img{order:-1}
  .sh-img img{aspect-ratio:370/250}
  .sh-txt{text-align:center}
  .sh-lede{margin-inline:auto}
  .trust{justify-content:center}
  .sh-a{justify-content:center}
  .sh-mini{max-width:420px;margin-inline:auto;text-align:left}
  .sh-mini div{padding-right:var(--s4)}
  .two{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pcards{grid-template-columns:1fr}
  .fk{grid-template-columns:1fr}
  .prose{text-align:left}
  .st.st-4{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pc-f{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .pc-price{text-align:left}
}

/* ---------- Varianten der Aesthetik-Unterseiten ----------
   Biobotox, Hautverjuengung, Injektionslipolyse und Zahnbleaching zeigen im Hero
   ein Hochformat-Bild (514 x 642, Verhaeltnis 0,80) auf allen Breiten, und die
   Bewertungs-Pille steht unter den Buttons statt unter der Ueberschrift. */
.sh-p .sh-img img{aspect-ratio:514/642}
.sh-a + .rate-pill{margin:var(--s5) 0 0}
.st-3{grid-template-columns:repeat(3,1fr)}
.fk-note{margin:var(--s4) 0 0;font-size:.78rem;color:var(--ink-2)}
@media(max-width:760px){.st.st-3{grid-template-columns:1fr}}

/* ---------- Blutanalyse-Seiten ----------
   Detailseiten: Preis-Pille ueber der H1, quadratisches Bild rechts,
   Chips-Sektion mit den untersuchten Werten. Uebersicht: weisser Hero,
   sechs Produktkarten mit Grafik, Warum-Split mit Symptomliste. */
.price-pill{display:inline-block;font-family:var(--fd);font-size:1.02rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);background:var(--lime-wash);
  border:1px solid var(--lime-line);padding:8px 20px;border-radius:var(--rp);
  margin-bottom:var(--s4)}
.sh-q .sh-img img{aspect-ratio:1/1}
.sub-hero.hero-w{background:var(--paper)}

/* Chips: untersuchte Werte */
.chips-sec{background:var(--paper-2)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);max-width:1080px;
  margin-inline:auto}
.chips li{background:var(--white);border:1px solid var(--line);border-radius:var(--rp);
  padding:9px 20px;font-size:.9rem;color:var(--ink);box-shadow:var(--sh1)}

/* Uebersicht: Produktkarten */
.bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.bk{position:relative;height:100%;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
.bk:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.bk-img{position:relative}
.bk-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.bk-badge{position:absolute;top:14px;right:14px;background:var(--lime);color:var(--navy);
  font-family:var(--fb);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 14px;border-radius:var(--rp)}
.bk-body{display:flex;flex-direction:column;flex:1;padding:var(--s5)}
.bk h3{font-size:1.22rem;margin-bottom:var(--s2)}
.bk-price{margin:0 0 var(--s3);font-family:var(--fd);font-weight:700;font-size:1rem;
  color:var(--lime)}
.bk p{margin:0;font-size:.92rem;color:var(--ink-2)}
.bk .mr{margin-top:auto;padding-top:var(--s4);display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.9rem;color:var(--ink)}
.bk:hover .mr{color:var(--lime-2)}
.bk-lnk{position:absolute;inset:0;border-radius:var(--r3)}

/* Warum-Split: links Text, rechts Symptomliste */
.why-b{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s6),4vw,72px);
  align-items:center}
.why-b h2{margin-bottom:var(--s4)}
.symp{display:grid;gap:var(--s4)}
.symp li{display:flex;gap:12px;align-items:flex-start}
.symp .ck{margin-top:2px}
.symp b{display:block;color:var(--ink);font-size:.97rem;line-height:1.35}
.symp span:not(.ck){font-size:.88rem;color:var(--ink-3)}
@media(max-width:1040px){.bk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.why-b{grid-template-columns:1fr}}
@media(max-width:700px){.bk-grid{grid-template-columns:1fr}}

/* ---------- Infusions-Seiten ----------
   Rechtshinweis unter dem Ablauf, wortgleich auf allen Detailseiten. */
.legal-note{max-width:880px;margin-inline:auto;font-size:.8rem;line-height:1.6;
  color:var(--ink-3);text-align:center;padding-block:0 var(--sec)}
.chips-l{margin-top:var(--s2)}

/* ---------- Restliche Seiten ----------
   Aesthetik-Uebersicht (16:9-Karten), Preisliste (Kategorie-Tabellen),
   Ueber uns (Partner-Logos), Rechtsseiten (.doc). */
.sh-169 .sh-img img{aspect-ratio:16/9}
.bk .bk-price-top{margin:0 0 var(--s2);font-family:var(--fd);font-weight:700;
  font-size:.95rem;color:var(--lime)}

/* Preisliste: eine weisse Karte je Kategorie */
.pl{display:grid;gap:var(--s5);max-width:880px;margin-inline:auto}
.pl-cat{background:var(--white);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5) var(--s6);box-shadow:var(--sh1)}
.pl-cat h2{font-size:1.28rem;margin-bottom:var(--s4)}
.pl-cat ul{display:grid}
.pl-cat li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:10px 0;border-bottom:1px solid var(--line)}
.pl-cat li:last-child{border-bottom:0;padding-bottom:0}
.pl-cat li span:first-child{color:var(--ink-2)}
.pl-cat li b{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap}
.pl-sub{padding-left:var(--s4)!important;font-size:.92rem}
.pl-note{max-width:880px;margin:var(--s5) auto 0;font-size:.8rem;color:var(--ink-3);
  text-align:center}

/* Ueber uns: Partner-Logos */
.partners{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4) var(--s6);
  margin-top:var(--s5)}
.partners li{display:flex;align-items:center;gap:12px}
.partners img{width:58px;height:58px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:#fff}
.partners b{display:block;font-size:.9rem;color:var(--ink);line-height:1.3}
.partners span{font-size:.78rem;color:var(--ink-3)}

/* Rechtsseiten: ruhiger Dokumentsatz */
.doc{max-width:800px;margin-inline:auto}
.doc h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:var(--s5)}
.doc h2{font-size:1.3rem;margin:var(--s6) 0 var(--s3)}
.doc h3{font-size:1.05rem;margin:var(--s5) 0 var(--s2)}
.doc h4{font-size:.95rem;margin:var(--s4) 0 var(--s2)}
.doc p{margin:0 0 var(--s3);font-size:.97rem;line-height:1.66}
.doc ul,.doc ol{margin:0 0 var(--s3);padding-left:1.2em;display:grid;gap:6px;
  font-size:.97rem;color:var(--ink-2)}
.doc ul{list-style:disc}
.doc ol{list-style:decimal}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--lime-2)}
.doc dl{display:grid;gap:var(--s3);margin:0 0 var(--s4)}
.doc dt{font-weight:700;color:var(--ink)}
.doc dd{margin:0;color:var(--ink-2)}
.doc-stand{font-size:.85rem;color:var(--ink-3);margin-bottom:var(--s5)}
.doc-hinweis{background:var(--lime-wash);border:1px solid var(--lime-line);
  border-radius:var(--r2);padding:var(--s4) var(--s5);margin-bottom:var(--s6);
  font-size:.92rem;color:var(--ink)}
/* Aesthetik-Uebersicht: Kartenbilder 16:9 statt quadratisch */
.bk-169 .bk-img img{aspect-ratio:16/9}

/* ---------- Verlinkte Preiskarten und Unterlinks auf Uebersichtskarten ---------- */
.pcard{position:relative}
.pc-more{margin:var(--s3) 0 0;display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.88rem;color:var(--ink)}
.pcard:hover .pc-more{color:var(--lime-2)}
.bk-sub{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3);position:relative;z-index:1}
.bk-sub a{display:inline-block;padding:6px 14px;border:1px solid var(--line);
  border-radius:var(--rp);font-size:.8rem;font-weight:700;color:var(--ink);
  background:var(--paper);transition:border-color var(--d1),background var(--d1)}
.bk-sub a:hover{border-color:var(--lime);background:var(--lime-wash)}


/* ============================================================ MAGAZIN
   Lesespalte fuer Artikel plus Beitragskarten fuer die Uebersicht. */
.art-col{max-width:760px;margin-inline:auto}
.art-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding-bottom:var(--s7)}
.art-bc{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-3);
  margin-bottom:var(--s5)}
.art-bc a{color:var(--ink-3)}
.art-bc a:hover{color:var(--ink)}
.art-bc .ar{opacity:.55}
.art-cat{display:inline-block;margin:0 0 var(--s4);padding:6px 14px;border-radius:var(--rp);
  background:var(--lime-wash);border:1px solid var(--lime-line);font-family:var(--fb);
  font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4C7A0B}
.art-hero h1{font-size:clamp(1.72rem,3.4vw,2.6rem);line-height:1.14;letter-spacing:-.02em;
  margin:0 0 var(--s4)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--s3);margin:0 0 var(--s5);
  font-size:.85rem;color:var(--ink-3)}
.art-meta>*+*{display:flex;align-items:center;gap:var(--s3)}
.art-meta>*+*::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.art-lede{margin:0;font-size:1.08rem;line-height:1.7;color:var(--ink-2)}
.art-lede strong{color:var(--ink)}
/* Links im Vorspann brauchen die gleiche Auszeichnung wie im Artikel, sonst
   sind sie nicht als Link erkennbar. */
.art-lede a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--lime);text-underline-offset:3px;
  transition:color var(--d1),text-decoration-color var(--d1)}
.art-lede a:hover{color:var(--lime-2);text-decoration-color:var(--lime-2)}
.art-toc{margin-top:var(--s6);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--s5) var(--s5) var(--s4);box-shadow:var(--sh1)}
.art-toc-h{margin:0 0 var(--s3);font-family:var(--fb);font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.art-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:2px}
.art-toc li{counter-increment:toc}
.art-toc a{display:flex;gap:var(--s3);padding:7px 0;font-size:.95rem;color:var(--ink);
  border-bottom:1px solid var(--line)}
.art-toc li:last-child a{border-bottom:0}
.art-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--fb);
  font-size:.78rem;font-weight:700;color:#4C7A0B;padding-top:2px}
.art-toc a:hover{color:var(--lime-2)}

.art-body{padding-top:var(--s7)}
.art>h2{font-size:clamp(1.4rem,2.5vw,1.85rem);line-height:1.2;letter-spacing:-.02em;
  margin:var(--s8) 0 var(--s4)}
.art>*:first-child{margin-top:0}
.art h3{font-size:1.08rem;line-height:1.35;margin:var(--s6) 0 var(--s3)}
.art p{margin:0 0 var(--s4);font-size:1.02rem;line-height:1.72;color:var(--ink-2)}
.art p strong,.art li strong{color:var(--ink);font-weight:700}
.art a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--lime);text-underline-offset:3px;
  transition:color var(--d1),text-decoration-color var(--d1)}
.art a:hover{color:var(--lime-2);text-decoration-color:var(--lime-2)}
.art-ul{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.art-ul li{position:relative;padding-left:var(--s5);font-size:1.02rem;line-height:1.68;
  color:var(--ink-2)}
.art-ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--lime)}

/* Das Wichtigste in Kuerze und Take-Aways */
.kern{margin:var(--s6) 0;background:var(--lime-wash);border:1px solid var(--lime-line);
  border-radius:var(--r3);padding:var(--s5)}
.kern h2{font-size:1.14rem;letter-spacing:-.01em;margin:0 0 var(--s4)}
.kern ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.kern li{display:flex;gap:var(--s3);font-size:.98rem;line-height:1.62;color:var(--ink)}
.kern .hk{flex:0 0 16px;margin-top:4px;color:#4C7A0B}
.kern a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:#7FB524;text-underline-offset:3px}
.kern a:hover{color:#3F6608}

/* Infokasten. Der Titel steht als Text, der Marker aus dem Quelldokument nie. */
.art-box{margin:var(--s5) 0;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--lime);border-radius:var(--r2);padding:var(--s5);box-shadow:var(--sh1)}
.art-box-h{margin:0 0 var(--s3)!important;font-family:var(--fb);font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.art-box p:last-child{margin-bottom:0}

.art-tbl{margin:var(--s5) 0}
.art-tbl-s{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--white)}
.art-tbl table{width:100%;border-collapse:collapse;font-size:.96rem}
.art-tbl th,.art-tbl td{text-align:left;padding:13px var(--s4);border-bottom:1px solid var(--line)}
.art-tbl thead th{background:var(--navy);color:#fff;font-family:var(--fb);font-size:.82rem;
  font-weight:700;letter-spacing:.02em;white-space:nowrap;border-bottom:0}
.art-tbl tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.art-tbl tbody td{color:var(--ink-2)}
.art-tbl tbody tr:last-child th,.art-tbl tbody tr:last-child td{border-bottom:0}
.art-tbl figcaption{margin-top:var(--s3);font-size:.82rem;color:var(--ink-3)}

.art-faq{margin:var(--s8) 0 0}
.art-faq h2{font-size:clamp(1.4rem,2.5vw,1.85rem);line-height:1.2;letter-spacing:-.02em;
  margin:0 0 var(--s5)}
.art-faq .faq{max-width:none}
.art-faq .fq-a p{margin:0}

/* Uebersicht */
.bl-hero{background:var(--paper-2);border-bottom:1px solid var(--line)}
.bl-hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;letter-spacing:-.03em;
  margin:0 0 var(--s4)}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);list-style:none;
  margin:0;padding:0}
.bl-card{height:100%;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);box-shadow:var(--sh1);
  transition:border-color var(--d1),box-shadow var(--d1),transform var(--d1)}
.bl-card:hover{border-color:var(--lime-line);box-shadow:var(--sh2);transform:translateY(-2px)}
.bl-cat{margin:0 0 var(--s3);font-family:var(--fb);font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#4C7A0B}
.bl-card h2,.bl-card h3{font-size:1.16rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 var(--s3)}
.bl-card h2 a,.bl-card h3 a{color:var(--ink)}
.bl-card:hover h2 a,.bl-card:hover h3 a{color:var(--lime-2)}
.bl-te{margin:0 0 var(--s4);font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.bl-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--s3);margin:auto 0 0;
  font-size:.82rem;color:var(--ink-3)}
.bl-m span{display:flex;align-items:center;gap:var(--s3)}
.bl-m span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.bl-more{margin:var(--s4) 0 0;display:inline-flex;align-items:center;gap:7px;font-weight:700;
  font-size:.88rem;color:var(--ink)}
.bl-card:hover .bl-more{color:var(--lime-2)}
.bl-all{margin:var(--s6) 0 0;text-align:center}
/* Steht nur ein Beitrag im Raster, wirkt Drittelbreite verloren. */
.bl-eins{grid-template-columns:minmax(0,480px);justify-content:center}

@media (max-width:1040px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .bl-grid{grid-template-columns:1fr}
  .art>h2{margin-top:var(--s7)}
  .art-faq{margin-top:var(--s7)}
  .kern,.art-box{padding:var(--s4)}
  .art-toc{padding:var(--s4)}
}