/* ============================================================
   Medbase Apotheken · Laboranalysen
   Design-System aus dem HTML-Entwurf, erweitert um Katalog-
   auswahl und Laborauftrag. Schrift: Palanquin, auf Latein-1 und
   Latein-Ext-A reduziert und als WOFF2 eingebunden (4 x ~29 KB).
   ============================================================ */

@font-face{font-family:Palanquin;src:url('assets/fonts/Palanquin-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Palanquin;src:url('assets/fonts/Palanquin-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Palanquin;src:url('assets/fonts/Palanquin-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Palanquin;src:url('assets/fonts/Palanquin-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --green:#65B32E;--mid:#4E8A24;--deep:#0A2A1F;--pale:#EEF9E7;--bg:#F8F9FA;
  --ink:#2D3436;--muted:#68726D;--line:#DDE5DE;--line-deep:#C3D4C6;--white:#fff;
  --warm:#8A4A12;--warm-bg:#FCF1E4;--warm-line:#E7CBA9;
  --alert:#B24A3A;
  --lift:0 6px 22px rgba(10,42,31,.06);
  --lift-lg:0 10px 28px rgba(10,42,31,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Palanquin,Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
body,button,select,input{font-family:Palanquin,Arial,sans-serif}
button,select,input{font-size:inherit}
a{color:inherit;text-decoration:none}
button,a,select,summary{outline-offset:4px}
:focus-visible{outline:3px solid #397D0F;outline-offset:4px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{color:var(--deep);line-height:1.08}
h2{font-size:clamp(2.5rem,4vw,3.5rem);letter-spacing:-.045em;font-weight:700}
h3,h4{font-weight:700}
.tnum{font-variant-numeric:tabular-nums}

.container{width:min(100% - 96px,1290px);margin-inline:auto}
.section{padding:100px 0}
.eyebrow{font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--mid);margin-bottom:31px;line-height:1.3}
.eyebrow:before{content:"";display:inline-block;width:2.1em;height:2px;margin-right:.78em;vertical-align:.24em;background:currentColor}
.eyebrow-bright{color:var(--green)}
.section-lead{font-size:1.13rem;line-height:1.6;max-width:75ch}
.skip-link{position:absolute;z-index:1000;top:-100px;left:12px;padding:10px 16px;background:var(--deep);color:var(--white)}
.skip-link:focus{top:12px}
[id]{scroll-margin-top:94px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Pfeile und Häkchen als SVG-Maske statt Schriftzeichen. Palanquin hat
   diese Zeichen nicht; der Browser nahm dafür je nach System eine andere
   Ersatzschrift – in Firefox und Edge sahen sie deshalb anders aus.
   Die Maske übernimmt die Textfarbe (currentColor). */
.ico{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ico-ne{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5 12.5 3.5M5 3.5h7.5V11'/%3E%3C/svg%3E")}
.ico-se{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5 12.5 12.5M12.5 5v7.5H5'/%3E%3C/svg%3E")}
.ico-e{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3 14 8 9 13'/%3E%3C/svg%3E")}
.ico-w{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8H2M7 3 2 8 7 13'/%3E%3C/svg%3E")}
.ico-n{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14V2M3 7 8 2 13 7'/%3E%3C/svg%3E")}
.ico-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E")}
.pick .box .ico-check{width:11px;height:11px}
.order-undo>.ico{margin-top:.18em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(10,42,31,.08);backdrop-filter:blur(14px)}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;width:133px;flex:none}
.brand img{width:100%;height:auto}
.main-nav{display:flex;align-items:center;gap:37px;margin-left:auto;margin-right:26px}
.main-nav a{font-size:.98rem;font-weight:500;white-space:nowrap;transition:color .2s}
.main-nav a:hover{color:var(--mid)}

.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:49px;padding:10px 19px;border-radius:7px;font-weight:700;font-size:1rem;line-height:1.2;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(10,42,31,.12)}
/* Weisse Schrift auf Limettengrün – wie auf medbase-apotheken.ch.
   Weicht bewusst von der Kontrastregel im Briefing ab. */
.button-primary{background:var(--green);color:var(--white)}
.button-primary:hover{background:#70c638}
.button-outline{border-color:var(--deep);background:transparent;color:var(--deep)}
.button-outline:hover{background:rgba(10,42,31,.04)}
.button-large{min-height:58px;min-width:218px;padding-inline:22px}
.header-button{min-width:191px;flex:none}
.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--deep);font-weight:700;min-height:44px}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}

/* Zähler im Header-CTA, sobald etwas gewählt ist */
/* Palanquin setzt die Ziffern tiefer, als die Zeilenbox vermuten lässt:
   zentriert man nur die Zeilenbox, sitzt die Zahl im Kreis 2 px zu tief.
   Das Padding unten hebt sie auf die optische Mitte. */
.count-pill{display:none;min-width:23px;height:23px;padding:0 6px 3.5px;border-radius:100px;background:var(--white);color:var(--mid);font-size:.79rem;font-weight:700;align-items:center;justify-content:center;line-height:1}
.has-selection .count-pill{display:inline-flex}
.has-selection .header-button .arrow{display:none}
/* Option A: Solange nichts gewählt ist, tritt der Header-Button zurück
   (Outline = sekundärer Button). Mit der ersten Analyse wird er grün und
   zeigt die Zahl – einmaliger, ruhiger Übergang, kein Pulsieren. */
.header-button{transition:transform .2s,background-color .35s,color .35s,border-color .35s,box-shadow .2s}
body.cta-calm .header-button{background:transparent;border-color:var(--deep);color:var(--deep)}
body.cta-calm .header-button:hover{background:rgba(10,42,31,.04)}
@keyframes pill-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.has-selection .header-button .count-pill{animation:pill-in .3s cubic-bezier(.2,.8,.3,1.2)}

/* ---------- Hero ---------- */
.hero{background:var(--pale)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.07fr);gap:56px;align-items:center;padding-top:42px;padding-bottom:50px}
.hero-copy{padding:32px 0 28px}
.hero h1{font-size:clamp(3.5rem,5.15vw,4.65rem);letter-spacing:-.055em;line-height:1.01;margin-bottom:25px}
.hero h1 span{color:var(--mid)}
.hero-intro{max-width:590px;font-size:1.17rem;line-height:1.58;margin-bottom:29px}
.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hero-image-wrap{position:relative;min-width:0}
.hero-image-wrap>img{width:100%;height:550px;object-fit:cover;object-position:57% center}
.image-note{position:absolute;bottom:-18px;left:32px;min-width:250px;background:var(--deep);color:var(--white);padding:17px 22px;border-radius:5px}
.image-note span,.image-note strong{display:block}
.image-note span{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:4px}
.image-note strong{font-size:1.18rem}
.hero-trust{display:flex;align-items:center;gap:0;border-top:1px solid #cbdccb;min-height:69px;color:var(--deep);font-weight:600;font-size:.95rem}
.hero-trust>div{padding:0 28px;border-left:1px solid #cbdccb;line-height:1.2}
.hero-trust>div:first-child{padding-left:0;border-left:0;display:flex;align-items:center;gap:14px}
.hero-trust span{font-weight:400;color:var(--muted)}
.hero-trust strong{font-size:1.25rem}
.partner-logo{width:auto;height:25px;display:block}

/* ---------- Angebot / Vorteile / Ablauf ---------- */
.offer-section{background:var(--white)}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.offer-section h2{margin-bottom:0}
.offer-copy p{font-size:1.17rem;line-height:1.62;max-width:60ch;margin-bottom:20px}
.info-box{margin-top:37px;padding:20px 23px;background:var(--pale);border-radius:7px;color:var(--deep);font-weight:600}

.benefits-section{background:var(--deep);color:var(--white)}
.benefits-section h2{color:var(--white);margin-bottom:8px}
.benefits-section .section-lead{color:#d4e3d5;margin-bottom:46px}
.benefits-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.benefit-card{min-height:190px;background:#143b2e;border:1px solid #315443;border-radius:9px;padding:22px 18px}
.benefit-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(101,179,46,.14);color:var(--green);margin-bottom:16px}
.benefit-icon svg{width:22px;height:22px;display:block}
.benefit-card h3{color:var(--white);font-size:1.15rem;line-height:1.25;margin-bottom:18px}
.benefit-card p{color:#d3e4d6;font-size:.91rem;line-height:1.55;margin:0}

.process-section h2{margin-bottom:82px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.steps:before{content:"";position:absolute;top:22px;left:20px;right:20px;height:2px;background:#b6d5ac}
.steps li{position:relative;min-width:0}
.step-number{display:grid;place-items:center;width:45px;height:45px;background:var(--green);border-radius:50%;color:var(--white);font-weight:700;margin-bottom:27px;position:relative;z-index:1}
.steps h3{font-size:1.26rem;margin-bottom:9px}
.steps p{line-height:1.5;max-width:27ch;margin-bottom:0}
.time-bar{display:flex;gap:70px;margin-top:65px;background:var(--pale);border-radius:7px;padding:18px 22px;color:var(--deep)}
.time-bar strong{white-space:nowrap}

/* ============================================================
   Analysen: Filter, Katalog, Laborauftrag
   ============================================================ */
.analyses-section h2{margin-bottom:10px}
.analyses-section .section-lead{margin-bottom:30px}

.catalog-filters{display:flex;flex-wrap:wrap;gap:14px 13px;margin-bottom:38px;padding-top:7px}
.filter-chip{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:8px 17px;border-radius:100px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:.94rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.filter-chip:hover{border-color:#a7cb9e}
.filter-chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--white)}
/* Varianten B und C: statt einer Pille „Alle anzeigen" trägt die aktive
   Pille oben rechts ein × im dunklen Kreis. Der Kreis ragt über die Pille
   hinaus, gehört aber zum Button – ein Klick darauf löst ihn also mit aus.
   Ein eigener Button im Button wäre weder gültiges HTML noch gross genug
   für den Daumen; so bleibt die ganze Pille die Klickfläche. */
.chip-x{display:none;position:absolute;top:-7px;right:-7px;width:21px;height:21px;box-sizing:border-box;padding:4px;border:2px solid var(--bg);border-radius:50%;background:var(--deep);fill:none;stroke:var(--white);stroke-width:1.8;stroke-linecap:round}
body.no-rail .filter-chip[data-filter="alle"]{display:none}
body.no-rail .filter-chip[aria-pressed="true"] .chip-x{display:block}
body.no-rail .filter-chip[aria-pressed="true"]:hover .chip-x{background:#000}

.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:34px;align-items:start}
.catalog-main{min-width:0}

.catalog-heading{margin:0 0 20px}
.catalog-heading h3{font-size:1.9rem;margin:0}
.catalog-note{color:var(--muted);font-size:.95rem;line-height:1.5;margin:0 0 20px;max-width:62ch}
.second-heading{margin-top:54px}
.catalog-empty{border:1px dashed var(--line-deep);border-radius:9px;padding:26px;text-align:center;color:var(--muted);font-size:.95rem}

/* --- Karten für gebündelte Checks --- */
.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.analysis-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:18px 22px 16px;min-width:0;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.analysis-card:hover{border-color:#a7cb9e;box-shadow:var(--lift-lg)}
.analysis-card:target{border-color:var(--green);box-shadow:0 0 0 3px rgba(101,179,46,.2)}
.analysis-card.is-selected{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset,var(--lift)}
.analysis-card.is-blocked{background:#FBFCFB;border-color:var(--line);box-shadow:none;opacity:.62}
.analysis-card.is-blocked:hover{border-color:var(--line);box-shadow:none;transform:none}

.analysis-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.analysis-type{display:inline-flex;align-items:center;min-height:27px;padding:4px 10px;border-radius:100px;background:var(--pale);color:#326319;font-size:.72rem;font-weight:700;letter-spacing:.04em;line-height:1.2}
.analysis-count{color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.analysis-card h4{font-size:1.28rem;line-height:1.2;letter-spacing:-.018em;margin:0 0 8px}


.disclose{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:0;background:none;border:0;color:var(--mid);font-size:.88rem;font-weight:700;cursor:pointer;text-align:left;align-self:flex-start}
.disclose:hover .disclose-mark{background:var(--mid);border-color:var(--mid);color:var(--white)}
.disclose:hover{text-decoration:underline;text-underline-offset:4px}
.disclose-mark{display:grid;place-items:center;width:21px;height:21px;flex:none;border:1px solid var(--line-deep);border-radius:50%;background:var(--white);color:var(--mid);font-size:.78rem;line-height:1;transition:background .2s,color .2s,border-color .2s}
.disclose[aria-expanded="true"] .disclose-mark{background:var(--mid);border-color:var(--mid);color:var(--white)}
.disclose-body{border-top:1px solid var(--line);margin-top:4px;padding-top:14px}
.disclose-body dl,.pop-body dl{margin:0;display:grid;gap:12px}
.disclose-body dt,.pop-body dt{font-size:.92rem;font-weight:700;color:var(--deep);line-height:1.3}
.disclose-body dd,.pop-body dd{margin:3px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.disclose-who{margin:14px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink);background:var(--pale);border-radius:6px;padding:11px 13px}

/* Tooltip über der Karte */
.pop{position:fixed;z-index:150;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 48px rgba(10,42,31,.2);max-height:min(70vh,540px);overflow:auto;overscroll-behavior:contain}
.pop-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;background:var(--pale);border-bottom:1px solid var(--line);padding:12px 14px}
.pop-head strong{font-size:1rem;color:var(--deep);line-height:1.25}
.pop-close{margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-deep);border-radius:50%;background:var(--white);color:var(--deep);font-size:1.05rem;line-height:1;cursor:pointer}
.pop-close:hover{background:var(--bg)}
.pop-body{padding:15px 16px 17px}
.pop-arrow{position:absolute;top:-7px;left:var(--arrow-x,28px);margin-left:-6px;width:12px;height:12px;background:var(--pale);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.pop.is-above .pop-arrow{top:auto;bottom:-7px;background:var(--white);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pop.is-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:74vh;border-radius:12px 12px 0 0;border-bottom:0}
.pop.is-sheet .pop-arrow{display:none}

.blocked-note{display:block;background:var(--pale);border-radius:6px;padding:8px 11px;color:#326319;font-size:.84rem;line-height:1.4;margin:0 0 10px;font-weight:600}

.analysis-card-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.analysis-price{color:var(--deep);font-size:1.06rem;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Auswahl-Schalter, in beiden Katalogen identisch */
.pick{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px;border-radius:7px;border:1px solid var(--line-deep);background:var(--white);color:var(--deep);font-size:.9rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.pick:hover{border-color:var(--green);background:#FAFDF7}
.pick .box{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid var(--line-deep);border-radius:4px;color:transparent;font-size:11px;line-height:1;transition:background .2s,border-color .2s,color .2s}
.pick[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--white)}
.pick[aria-pressed="true"] .box{background:var(--white);border-color:var(--white);color:var(--green)}
.pick[disabled]{background:transparent;border-style:dashed;border-color:var(--line-deep);color:var(--muted);cursor:default}
.pick[disabled] .box{display:none}

/* --- Zeilen für Einzelanalysen --- */
.single-list{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.single-row{border-bottom:1px solid var(--line);position:relative;cursor:pointer;transition:background .2s}
.single-row:last-child,.single-row.v-nobottom{border-bottom:0}
.single-row:hover{background:#FCFDFB}
.single-row.is-selected{background:var(--pale)}
.single-row.is-selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.single-row.is-blocked,.analysis-card.is-blocked{cursor:default}
.single-row.is-blocked{background:#FBFCFB;opacity:.62}
.single-main{display:flex;align-items:center;gap:16px;padding:14px 20px}
.single-text{flex:1;min-width:0}
.single-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:1.04rem;font-weight:700;color:var(--deep);line-height:1.25}
.single-tag{background:var(--pale);color:#326319;border-radius:100px;padding:2px 8px;font-size:.68rem;font-weight:700;letter-spacing:.04em;line-height:1.4}
.single-row.is-selected .single-tag{background:var(--white)}
.single-sub{color:var(--muted);font-size:.88rem;line-height:1.4;margin-top:3px}
.single-price{color:var(--deep);font-size:1.06rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- Laborauftrag (rechte Spalte) --- */
.order-rail{position:sticky;top:96px}
.order-panel{background:var(--white);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--lift)}
.order-head{background:var(--pale);padding:16px 20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.order-head strong{font-size:1.08rem;color:var(--deep)}
.order-head span{color:var(--mid);font-size:.82rem;font-weight:700;white-space:nowrap}
.order-loc{padding:13px 20px;border-bottom:1px solid var(--line);background:var(--white)}
.order-loc span{display:block;color:var(--mid);font-size:.71rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.order-loc strong{display:block;font-size:.99rem;color:var(--deep);line-height:1.3}
.order-loc a{display:inline-block;margin-top:3px;color:var(--mid);font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.order-loc.is-empty{background:var(--warm-bg);border-bottom-color:var(--warm-line)}
.order-loc.is-empty span{color:var(--warm)}
.order-loc.is-empty a{color:var(--warm)}
.order-body{padding:4px 20px;max-height:42vh;overflow:auto}
.order-empty{color:var(--muted);font-size:.93rem;line-height:1.55;padding:18px 0 20px;margin:0}
.order-item{display:flex;gap:10px;align-items:flex-start;padding:13px 0;border-bottom:1px dashed var(--line)}
.order-item:last-child{border-bottom:0}
.order-item-text{flex:1;min-width:0}
.order-item-name{font-size:.96rem;font-weight:600;color:var(--deep);line-height:1.3}
.order-item-meta{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.order-item-price{font-size:.94rem;font-weight:700;color:var(--deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.order-remove{flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;background:none;border-radius:6px;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.order-remove:hover{background:var(--warm-bg);color:var(--warm)}
.order-foot{border-top:1px solid var(--line);background:var(--bg);padding:16px 20px}
.order-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px}
.order-total span{color:var(--muted);font-size:.9rem}
.order-total strong{font-size:1.5rem;color:var(--deep);font-variant-numeric:tabular-nums}
.order-note{color:var(--muted);font-size:.83rem;line-height:1.5;margin:0}
/* Offen = gedämpftes Ziegelrot (5,3:1 auf Weiss), erledigt = Dunkelgrün */
.order-note.is-pending,.booking-hint.is-pending{color:var(--alert);font-weight:600}
.order-note.is-ready,.booking-hint.is-ready{color:var(--mid);font-weight:600}
/* „Erst in der Apotheke bezahlen" – überall dort, wo die Frage aufkommt:
   Laborauftrag, Buchungspanel, Leiste und Overlay. */
.pay-note{color:var(--mid);font-size:.83rem;font-weight:600;line-height:1.5;margin:9px 0 0}
.dialog-aside .pay-note{margin:14px 0 0}
.pay-note-bar{margin:9px 0 0;text-align:center}
.order-foot .button{width:100%;justify-content:center;margin-top:14px}
.order-undo{position:relative;display:flex;gap:9px;background:var(--pale);border-radius:7px;padding:11px 36px 11px 13px;font-size:.84rem;line-height:1.45;color:#2f5f1c;margin-bottom:13px}
.note-close{position:absolute;top:7px;right:7px;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#4f7a3a;font-size:1rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.note-close:hover{background:rgba(10,42,31,.09);color:var(--deep)}
.order-suggest{background:#EAF6FF00;background:var(--pale);color:#2f5f1c}
.order-undo button{background:none;border:0;padding:0;margin-top:3px;color:var(--mid);font-weight:700;font-size:.84rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:block;text-align:left}
/* Alle entfernen: Textlink in der gedämpften Linkfarbe, kein Button,
   damit er nicht mit Termin buchen konkurriert. Erst ab 2 Analysen. */
.clear-all{display:flex;justify-content:flex-end;padding:6px 0 10px}
.clear-all.in-summary{padding:0 16px 10px}
.link-clear{background:none;border:0;padding:4px 0;color:var(--muted);font:inherit;font-size:.83rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-clear:hover{color:var(--warm)}

/* ============================================================
   Varianten (body.no-rail ist die Hauptversion und steht im HTML)
   index.html               – keine Laborauftrag-Kachel, Katalog volle Breite
   index.html?panel=on      – Vergleich: Laborauftrag-Kachel rechts
   index.html?mittelweg     – Hauptversion plus schlanke Leiste, sobald
                              etwas gewählt ist
   ============================================================ */
body.no-rail .order-rail{display:none}
body.no-rail .order-bar{display:none!important}
body.no-rail .catalog-layout{grid-template-columns:minmax(0,1fr)}
body.no-rail .analysis-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.no-rail:not(.mid-bar){padding-bottom:0!important}

/* Einzelanalysen zweispaltig, wenn der Katalog die volle Breite hat.
   Hier steht jede Analyse als eigene Kachel im Raster, nicht als Zeile in
   einer gemeinsamen Liste – dadurch bleibt bei zwei Spalten genug Luft. */
body.no-rail .single-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:none;border:0;border-radius:0;overflow:visible}
body.no-rail .single-row{background:var(--white);border:1px solid var(--line);border-radius:10px}
body.no-rail .single-row.is-selected{border-color:var(--green)}
body.no-rail .single-row.is-selected:before{top:1px;bottom:1px;left:0;border-radius:9px 0 0 9px}

/* Variante C: schlanke Leiste statt Kachel */
body.mid-bar.has-selection{padding-bottom:132px}
body.no-rail.mid-bar .order-bar.is-visible{display:block!important}
@media(min-width:1101px){
  body.mid-bar .order-bar{left:50%;right:auto;transform:translateX(-50%);bottom:20px;width:min(100% - 96px,1290px);border:1px solid var(--line-deep);border-radius:12px;box-shadow:0 14px 40px rgba(10,42,31,.16);padding:12px 14px 12px 20px}
  body.mid-bar .order-bar-row{gap:18px}
  body.mid-bar .order-bar-list{padding-inline:6px}
}

/* ---------- Standorte ---------- */
.selection-section{background:var(--bg)}
.selection-step + .selection-step{margin-top:78px;border-top:1px solid var(--line);padding-top:58px}
.selection-step h2{margin-bottom:12px;text-wrap:balance;max-width:none}
.selection-step .section-lead{margin-bottom:28px}
.location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.location-card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:22px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.location-card:hover{border-color:#a7cb9e;box-shadow:var(--lift)}
.location-card.is-chosen{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset,var(--lift)}
.location-choose{margin-top:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;color:var(--deep);font-weight:700;font-size:.93rem}
.location-choose input{width:20px;height:20px;margin:0;accent-color:var(--mid);cursor:pointer;flex:none}
.location-card.is-chosen .location-choose span{color:var(--mid)}
.location-card h3{font-size:1.65rem;margin-bottom:13px;margin-top:2px}
.location-card address{font-style:normal;line-height:1.45}
.phone{display:inline-block;margin:13px 0 22px;color:var(--mid);font-weight:700}
.phone:hover{text-decoration:underline}
.location-hours{display:flex;flex-direction:column;gap:5px;font-size:.92rem;line-height:1.5;margin-bottom:27px}
.location-hours strong{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.location-link{margin-top:auto;border:0;background:none;padding:0;cursor:pointer;color:var(--mid);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;min-height:44px;display:inline-flex;align-items:center;gap:7px}
.location-link:hover{text-decoration:underline;text-underline-offset:4px}
.location-footnote{font-size:.87rem;color:var(--muted);margin:20px 0 0}
.catalog-footnote{font-size:.87rem;line-height:1.55;color:var(--muted);margin:26px 0 0;max-width:72ch}
.catalog-footnote a{color:var(--mid);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Buchungs-Sektion ---------- */
.booking-section{background:var(--deep);color:var(--white)}
.booking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:72px;align-items:start}
.booking-copy h2{color:var(--white);font-size:clamp(3.1rem,4.7vw,4rem);margin-bottom:31px}
.booking-copy>p:not(.eyebrow){font-size:1.14rem;line-height:1.65;color:#dce9df;max-width:48ch}
.booking-info{margin-top:58px;background:#183d30;border-radius:7px;padding:20px 23px;line-height:1.55;max-width:510px}
.booking-info p{margin:0}
.booking-info p+p{margin-top:10px}
.booking-panel{background:var(--white);color:var(--deep);border-radius:11px;overflow:hidden}
.booking-panel-head{background:var(--pale);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.booking-panel-head strong{font-size:1.15rem}
.booking-panel-head span{color:var(--mid);font-weight:700}
.booking-panel-body{padding:28px}
.booking-panel label{display:block;color:var(--mid);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:7px}
.booking-panel select{display:block;width:100%;min-height:55px;padding:10px 17px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--deep);font-size:1.05rem;cursor:pointer}
.booking-summary{border:1px solid var(--line);border-radius:8px;margin-bottom:24px;overflow:hidden}
.booking-summary-head{background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.booking-summary-head strong{font-size:.98rem}
.booking-summary-head a{color:var(--mid);font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.booking-summary ul{list-style:none;margin:0;padding:6px 16px}
.booking-summary li{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.95rem;line-height:1.35}
.booking-summary li span{flex:1;min-width:0}
.booking-summary li .order-remove{margin-right:-6px}
.booking-summary li:last-child{border-bottom:0}
.booking-summary li strong{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.booking-summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid var(--line);padding:13px 16px;background:var(--bg)}
.booking-summary-total span{color:var(--muted);font-size:.9rem}
.booking-summary-total strong{font-size:1.32rem;font-variant-numeric:tabular-nums}
.booking-empty{padding:16px;color:var(--muted);font-size:.93rem;line-height:1.55;margin:0}
.booking-panel-body>.button{width:100%;justify-content:space-between;min-height:56px;margin-top:22px}
.booking-hint{color:var(--muted);font-size:.86rem;line-height:1.5;margin:14px 0 0}
.booking-fallback{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);margin-top:20px;padding-top:16px;font-size:.91rem}
.booking-fallback span{color:var(--muted)}
.booking-fallback a{color:var(--mid);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq-section{background:var(--white)}
.faq-grid{display:grid;grid-template-columns:410px minmax(0,1fr);gap:100px}
.faq-grid h2{margin-bottom:15px}
.faq-grid>div:first-child>p:not(.eyebrow){font-size:1.1rem;line-height:1.55;margin-bottom:35px}
.faq-grid .button{min-width:220px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;position:relative;cursor:pointer;color:var(--deep);font-weight:600;font-size:1.12rem;padding:22px 34px 22px 0;min-height:69px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';position:absolute;right:4px;top:19px;color:var(--mid);font-size:1.5rem;line-height:1}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{color:var(--ink);line-height:1.58;margin:0 0 22px;max-width:68ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--deep);color:var(--white)}
.footer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;padding-top:46px;padding-bottom:42px}
.footer-main img{width:166px;height:auto}
.footer-main p{margin:18px 0 0;font-size:.95rem}
.footer-main nav{display:flex;gap:34px;flex-wrap:wrap;margin-top:13px}
.footer-main nav a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid #3d6051;display:flex;justify-content:space-between;gap:15px;padding-top:20px;padding-bottom:27px;color:#c7d7cb;font-size:.84rem}

/* ---------- Mobile Auftragsleiste ---------- */
.order-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(10,42,31,.12);padding:11px 20px calc(11px + env(safe-area-inset-bottom,0px))}
.order-bar-row{display:flex;align-items:center;gap:14px}
.order-bar-toggle{flex:none;min-height:44px;padding:8px 14px;border:1px solid var(--line-deep);border-radius:7px;background:var(--white);color:var(--deep);font-weight:700;font-size:.88rem;cursor:pointer}
.order-bar-sum{flex:1;min-width:0;line-height:1.2}
.order-bar-sum span{display:block;color:var(--muted);font-size:.8rem}
.order-bar-sum strong{font-size:1.16rem;color:var(--deep);font-variant-numeric:tabular-nums}
.order-bar .button{flex:none;min-height:46px;padding:9px 16px;font-size:.92rem;gap:12px}
.order-bar-list{max-height:44vh;overflow:auto;border-top:1px solid var(--line);margin-top:11px;padding-top:2px}
.order-bar-list .order-item{padding-inline:0}

/* ---------- Buchungs-Overlay ---------- */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(6,24,17,.62);display:grid;place-items:center;padding:24px}
.dialog{background:var(--bg);border-radius:12px;width:min(1020px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 34px 90px rgba(4,18,11,.45)}
.dialog-head{display:flex;align-items:center;gap:16px;background:var(--pale);padding:17px 24px}
.dialog-head strong{font-size:1.2rem;color:var(--deep)}
.dialog-head .dialog-sub{color:var(--mid);font-weight:700;font-size:.88rem}
.dialog-close{margin-left:auto;width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--line-deep);border-radius:50%;background:var(--white);color:var(--deep);font-size:1.15rem;line-height:1;cursor:pointer;transition:background .2s}
.dialog-close:hover{background:var(--bg)}
.dialog-body{display:grid;grid-template-columns:326px minmax(0,1fr);overflow:auto;flex:1}
.dialog-aside{background:var(--white);border-right:1px solid var(--line);padding:22px 24px}
.dialog-aside h3{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin:0 0 14px}
.dialog-loc{background:var(--pale);border-radius:7px;padding:12px 14px;margin-bottom:16px}
.dialog-loc>span{display:block;color:var(--mid);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
.dialog-loc strong{font-size:1rem;color:var(--deep);line-height:1.3}
.dialog-loc-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dialog-loc-row .order-remove{margin:-4px -6px -4px 0}
.dialog-loc.is-empty{background:var(--warm-bg);border:1px solid var(--warm-line)}
.dialog-loc.is-empty>span{color:var(--warm);margin-bottom:8px}
.dialog-radio{display:flex;align-items:center;gap:10px;min-height:38px;cursor:pointer;color:var(--deep);font-size:.93rem;font-weight:600}
.dialog-radio input{width:18px;height:18px;margin:0;accent-color:var(--mid);flex:none;cursor:pointer}
.widget-box.is-waiting:before{content:none}
.dialog-list{list-style:none;margin:0;padding:0}
.dialog-list li{display:flex;gap:12px;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.95rem;line-height:1.35}
.dialog-list li:last-child{border-bottom:0}
.dialog-list strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.dialog-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid var(--line-deep);margin-top:14px;padding-top:14px}
.dialog-total span{color:var(--muted);font-size:.92rem}
.dialog-total strong{font-size:1.38rem;color:var(--deep);font-variant-numeric:tabular-nums}
.dialog-note{background:var(--pale);border-radius:7px;padding:12px 14px;margin:16px 0 0;color:var(--deep);font-size:.88rem;line-height:1.55}
.dialog-note span{display:block;color:var(--mid);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px}
.dialog-note p{margin:0}
.dialog-main{padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-height:470px}
.dialog-main>p{color:var(--muted);font-size:.93rem;line-height:1.55;margin:0}
.widget-box:before{content:"Buchungsfenster wird geladen …";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.9rem}
.widget-box{position:relative;flex:1;min-height:420px;border:1px solid var(--line);border-radius:8px;background:var(--white);overflow:hidden}
.widget-box iframe{position:relative;display:block;background:var(--white);width:100%;height:100%;min-height:420px;border:0}
.widget-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;background:var(--white)}
.widget-fallback p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55;max-width:44ch}
.widget-fallback strong{color:var(--deep)}
.code-carry{display:inline-block;background:var(--pale);border:1px solid var(--line-deep);border-radius:7px;padding:9px 16px;color:var(--deep);font-size:1.05rem;font-weight:700;letter-spacing:.09em}
.dialog-foot{border-top:1px solid var(--line);background:var(--white);padding:13px 24px;font-size:.87rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 10px}
.dialog-foot a{color:var(--mid);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- Detailseiten ---------- */
.detail-hero{background:var(--pale);padding:48px 0 65px}
.detail-back{display:inline-flex;align-items:center;min-height:44px;color:var(--mid);font-weight:700;margin-bottom:31px}
.detail-back:hover{text-decoration:underline;text-underline-offset:4px}
.detail-hero .eyebrow{margin-bottom:18px}
.detail-hero h1{font-size:clamp(2.75rem,5.5vw,4.8rem);letter-spacing:-.05em;max-width:18ch;margin-bottom:20px;overflow-wrap:anywhere;hyphens:auto}
.detail-lead{font-size:1.22rem;line-height:1.55;max-width:62ch;margin:0}
.detail-section{background:var(--white)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,370px);gap:clamp(45px,8vw,125px);align-items:start}
.detail-main .eyebrow{margin-bottom:15px}
.detail-main h2{font-size:clamp(2.2rem,3.4vw,3rem);margin-bottom:28px}
.detail-main>p:not(.eyebrow){font-size:1.09rem;line-height:1.65;max-width:65ch}
.detail-values,.detail-process{border-top:1px solid var(--line);padding-top:27px;margin-top:35px}
.detail-values h3,.detail-process h3{font-size:1.43rem;margin-bottom:17px}
.detail-values ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 20px}
.detail-values li{background:var(--pale);padding:11px 14px;border-radius:6px;color:var(--deep);font-weight:600}
.detail-values li small{display:block;font-weight:400;color:var(--muted);font-size:.84rem;line-height:1.45;margin-top:3px}
.detail-process ol{padding-left:24px;margin:0;line-height:1.65}
.detail-process li{padding-left:6px;margin-bottom:9px}
.detail-note{background:var(--pale);border-radius:6px;padding:18px 20px;margin-top:34px;font-size:.96rem!important}
.detail-sidebar{position:sticky;top:95px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:25px}
.detail-price-label{color:var(--mid);text-transform:uppercase;letter-spacing:.08em;font-size:.77rem;font-weight:700}
.detail-price{color:var(--deep);font-size:2.35rem;font-weight:700;line-height:1.2;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.detail-sidebar>p{font-size:.93rem;line-height:1.5;color:var(--muted)}
.detail-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0;padding:13px 0;display:grid;gap:12px}
.detail-facts div{display:flex;justify-content:space-between;gap:15px;font-size:.87rem;line-height:1.35}
.detail-facts span{color:var(--muted)}
.detail-facts strong{max-width:62%;text-align:right;color:var(--deep)}
.detail-book{display:flex;width:100%;min-height:53px;justify-content:space-between}
.detail-added{display:none;background:var(--pale);border-radius:7px;padding:12px 14px;margin:14px 0 0;color:#2f5f1c;font-size:.9rem;line-height:1.45;font-weight:600}
.detail-added.is-visible{display:block}
.detail-sidebar .detail-insurance{margin:16px 0 0;font-size:.83rem}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1250px){
  .catalog-layout{grid-template-columns:minmax(0,1fr) 312px;gap:26px}
  .analysis-grid{grid-template-columns:1fr}
}
@media(max-width:1180px){
  body.no-rail .analysis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Dreispaltig auf schmaleren Notebooks: Titel dürfen zweizeilig werden,
   die Zeile darunter soll trotzdem auf gleicher Höhe stehen. */
@media(min-width:1181px) and (max-width:1400px){
  body.no-rail .analysis-card h4{min-height:2.4em}
}
@media(max-width:1100px){
  .container{width:min(100% - 64px,1290px)}
  .main-nav{gap:20px;margin-right:4px}
  .hero-grid{gap:32px}
  .hero h1{font-size:clamp(3.15rem,5.2vw,4rem)}
  .hero-image-wrap>img{height:510px}
  .benefits-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .booking-grid{gap:38px}
  .faq-grid{grid-template-columns:35% 1fr;gap:50px}
  .catalog-layout{grid-template-columns:1fr}
  .order-rail{display:none}
  .order-bar.is-visible{display:block}
  body.has-selection{padding-bottom:126px}
  .analysis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  body.no-rail .analysis-grid{grid-template-columns:1fr}
  body.no-rail .single-list{grid-template-columns:1fr;gap:10px}
  .main-nav{display:none}
  .header-inner{min-height:64px}
  .hero-grid{grid-template-columns:1fr;gap:30px;padding-top:45px}
  .hero-copy{padding:0}
  .hero h1{font-size:clamp(3.3rem,8vw,4.3rem)}
  .hero-image-wrap>img{height:400px}
  .hero-trust{flex-wrap:wrap;gap:0;padding-block:15px}
  .hero-trust>div{padding:8px 18px}
  .hero-trust>div:first-child{padding-left:0}
  .two-column{grid-template-columns:1fr;gap:24px}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}
  .steps:before{display:none}
  .process-section h2{margin-bottom:48px}
  .analysis-grid{grid-template-columns:1fr}
  .location-grid{grid-template-columns:1fr}
  .booking-grid{grid-template-columns:1fr}
  .booking-info{margin-top:30px}
  .faq-grid{grid-template-columns:1fr;gap:35px}
  .dialog-body{grid-template-columns:1fr}
  .dialog-aside{border-right:0;border-bottom:1px solid var(--line)}
  .overlay{padding:0;place-items:end stretch}
  .dialog{max-height:94vh;border-radius:12px 12px 0 0}
}
@media(max-width:640px){
  body{font-size:16px}
  .container{width:min(100% - 40px,1290px)}
  .section{padding:70px 0}
  h2{font-size:clamp(2.1rem,9vw,2.75rem)}
  .eyebrow{font-size:.76rem;margin-bottom:23px}
  .header-inner{min-height:56px}
  .brand{width:103px}
  /* Mobile: Beschriftung bleibt sichtbar – ein Kasten mit nur „↗" ist kein
     erkennbarer CTA. Dafür entfällt der Pfeil. */
  .header-button{min-width:0;min-height:40px;padding:8px 14px;font-size:.9rem;gap:10px}
  .header-button .arrow,.has-selection .header-button .arrow{display:none}
  [id]{scroll-margin-top:68px}
  .hero-grid{padding-top:35px;padding-bottom:32px;gap:25px}
  .hero h1{font-size:clamp(2.65rem,11vw,3.4rem);line-height:1.01;margin-bottom:22px}
  .hero-intro{font-size:1.02rem;line-height:1.55;margin-bottom:28px}
  .hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .button-large{width:100%;min-height:52px}
  .hero-actions .text-link{width:max-content}
  .hero-image-wrap>img{height:190px;object-position:50% 42%}
  .image-note{display:none}
  .hero-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;min-height:100px;padding-block:14px}
  .hero-trust>div,.hero-trust>div:first-child{border:0;padding:0;font-size:.82rem}
  .hero-trust>div:first-child{display:flex;gap:8px;align-items:center}
  .hero-trust strong{font-size:1rem}
  .partner-logo{height:19px}
  .offer-copy p{font-size:1.04rem}
  .info-box{font-size:.9rem;padding:15px;margin-top:25px}
  .benefits-section .section-lead{font-size:1rem;margin-bottom:20px}
  .benefits-grid{grid-template-columns:1fr;gap:0}
  .benefit-card{background:none;border:0;border-bottom:1px solid #315443;border-radius:0;min-height:auto;padding:14px 0 15px;display:grid;grid-template-columns:28px 1fr;column-gap:10px}
  .benefit-card>span{grid-row:1/3;margin:0;padding-top:2px;font-size:.86rem}
  .benefit-card h3{margin:0;font-size:1.12rem}
  .benefit-card p{grid-column:2;margin-top:4px;font-size:.91rem}
  .process-section h2{margin-bottom:28px}
  .steps{grid-template-columns:1fr;gap:18px}
  .steps li{display:grid;grid-template-columns:34px 1fr;column-gap:12px}
  .step-number{grid-row:1/3;width:31px;height:31px;font-size:.78rem;margin:0}
  .steps h3{font-size:1.08rem;margin:0}
  .steps p{font-size:.9rem;max-width:none}
  .time-bar{margin-top:34px;padding:17px;display:block;font-size:.92rem}
  .time-bar strong{display:block;margin-bottom:2px}
  .catalog-filters{gap:13px 11px;margin-bottom:28px}
  .filter-chip{min-height:38px;padding:7px 13px;font-size:.86rem}
  .catalog-heading h3{font-size:1.5rem}
  .catalog-note{font-size:.88rem;margin-bottom:16px}
  .second-heading{margin-top:38px}
  .analysis-grid{gap:10px}
  .analysis-card{padding:15px 16px 13px}
  .analysis-card h4{font-size:1.14rem}
    .analysis-card-bottom{padding-top:12px}
    .analysis-price{font-size:1rem}
    .single-main{flex-wrap:wrap;gap:9px 12px;padding:13px 15px}
  .single-text{flex:1 1 100%}
  .single-name{font-size:.99rem}
  .single-sub{font-size:.83rem}
  .single-price{font-size:1rem}
    .single-main .pick{margin-left:auto}
    .location-card{padding:19px}
  .location-card h3{font-size:1.45rem}
  .location-grid{gap:13px}
  .booking-copy h2{font-size:2.55rem}
  .booking-copy>p:not(.eyebrow){font-size:1.03rem}
  .booking-info{font-size:.92rem;padding:15px}
  .booking-panel-body{padding:16px}
  .booking-panel-head{padding:14px 16px}
  .booking-panel-head strong{font-size:1rem}
  .booking-panel select{font-size:.95rem}
  .booking-fallback{font-size:.84rem}
  .faq-grid h2{margin-bottom:8px}
  .faq-grid>div:first-child>p:not(.eyebrow){font-size:1rem;margin-bottom:20px}
  .faq-list summary{font-size:1rem;padding:17px 26px 17px 0;min-height:56px}
  .faq-list summary:after{top:15px}
  .faq-list details p{font-size:.93rem}
  .footer-main,.footer-bottom{display:block}
  .footer-main nav{gap:18px;margin-top:32px;font-size:.87rem}
  .footer-bottom span{display:block;margin-bottom:8px}
  .order-bar{padding-inline:16px}
  .order-bar .button span.arrow{display:none}
  .dialog-head{padding:14px 16px}
  .dialog-head strong{font-size:1.05rem}
  .dialog-aside,.dialog-main{padding:16px}
  .dialog-foot{padding:12px 16px;font-size:.82rem}
  .detail-hero{padding:28px 0 45px}
  .detail-back{margin-bottom:18px}
  .detail-hero h1{font-size:clamp(2.3rem,10vw,3.3rem)}
  .detail-lead{font-size:1.05rem}
  .detail-values ul{grid-template-columns:1fr}
  .detail-sidebar{padding:20px}
  .detail-facts div{display:block}
  .detail-facts strong{display:block;max-width:none;text-align:left;margin-top:3px}
}
@media(max-width:900px){
  .detail-grid{grid-template-columns:1fr;gap:35px}
  .detail-sidebar{position:static;max-width:620px}
}
@media(max-width:360px){
  .header-button{padding:8px 11px;gap:8px;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .has-selection .header-button .count-pill{animation:none}
  *{transition:none!important}
  .button:hover{transform:none}
}

/* ============================================================
   MEDBASE-SKIN
   Diese Variante zeigt die Landing Page eingebettet in den
   Auftritt von medbase-apotheken.ch. Inhalt und Logik sind
   dieselben; Kopf, Headerbild, Typografie, Farben und Bausteine
   folgen der Markenseite (Referenz: Angebotsseite AllergieCheck
   und Modellcheck auf medbase.ch).
   ============================================================ */
:root{
  --mb-green:#65B32E;      /* Limettengrün, Primärfarbe */
  --mb-green-dark:#4E8A24; /* Dunkelgrün, Text-Akzent */
  --mb-green-hover:#569A27;
  --mb-tint:#F1F9EA;       /* Hellgrün, Flächen */
  --mb-text:#787878;       /* Fliesstext */
  --mb-ink:#555;           /* kräftigerer Text */
  --mb-line:#E0E0E0;
  --mb-grey:#F5F5F5;       /* helle Bänder und Kacheln */
  --mb-yellow:#F2D338;
  --mb-alert:#B24A3A;
}

body{background:#fff;color:var(--mb-text);font-size:16px;line-height:1.4}
h1,h2,h3,h4{color:var(--mb-green);font-weight:500;letter-spacing:0;line-height:1.15}
a{color:var(--mb-green-dark)}
::selection{background:var(--mb-tint);color:var(--mb-green-dark)}
:focus-visible{outline:2px solid var(--mb-green-dark);outline-offset:3px}

.mb-container{width:min(100% - 48px,1014px);margin-inline:auto}

/* ---------- Kopf ---------- */
.mb-header{background:#fff;border-bottom:0}
.mb-header-inner{width:min(100% - 48px,1290px);margin-inline:auto;display:flex;align-items:center;gap:26px;min-height:90px}
.mb-logo{flex:none;display:block}
.mb-logo img{width:132px;height:auto;display:block}
.mb-nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.mb-nav a{color:var(--mb-green);font-size:16px;font-weight:500;text-decoration:none}
.mb-nav a:hover,.mb-nav a.is-active{color:var(--mb-green-dark)}
.mb-meta{display:flex;align-items:center;gap:16px;flex:none}
.mb-lang{font-size:12px;color:var(--mb-green);display:flex;gap:5px}
.mb-lang b{font-weight:700}
.mb-lang i{font-style:normal;opacity:.5}
.mb-lang a{color:var(--mb-green);text-decoration:none}
.mb-icon-btn{background:none;border:0;padding:4px;cursor:pointer;color:var(--mb-green);display:grid;place-items:center}
.mb-icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mb-social{display:flex;gap:7px}
.mb-social-badge{width:24px;height:24px;border-radius:4px;background:var(--mb-green);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1}

/* ---------- Headerbild (Dreierband) ---------- */
.mb-hero{display:grid;grid-template-columns:1fr 1fr 1fr;height:349px;overflow:hidden}
.mb-hero-panel{position:relative}
.mb-hero-yellow{background:var(--mb-yellow)}
.mb-hero-green{background:var(--mb-green)}
.mb-hero-yellow:after,.mb-hero-green:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.22),transparent 62%)}
.mb-hero-photo{overflow:hidden}
.mb-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Brotkrumen und Einstieg ---------- */
.mb-crumb{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--mb-green);padding:22px 0 14px}
.mb-crumb a{color:var(--mb-green);text-decoration:none}
.mb-crumb a:hover{text-decoration:underline}
.mb-crumb span[aria-hidden]{opacity:.6}

.mb-intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;padding-bottom:10px}
.mb-intro h1{font-size:26px;margin:0 0 14px}
.mb-intro p{margin:0 0 16px;max-width:62ch}
.mb-intro h3{font-size:20px;margin:28px 0 10px}
.mb-intro-side{position:sticky;top:20px}
.mb-facts{margin:22px 0 0;display:grid;gap:12px;font-size:14px}
.mb-facts div{display:grid;gap:2px;border-top:1px solid var(--mb-line);padding-top:10px}
.mb-facts dt{color:#9a9a9a;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.mb-facts dd{margin:0;color:var(--mb-ink)}
.mb-partner{width:104px;height:auto;display:block;margin-top:4px}

/* ---------- Buttons ---------- */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--mb-green);color:#fff;border:0;border-radius:4px;padding:13px 22px;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .2s}
.mb-btn:hover{background:var(--mb-green-hover);color:#fff}
.mb-btn-block{display:flex;width:100%;text-align:center}
.mb-btn-lg{min-height:52px;padding:14px 26px;font-size:16px}
.mb-btn-ghost{background:#fff;color:var(--mb-green-dark);border:1.5px solid var(--mb-green)}
.mb-btn-ghost:hover{background:var(--mb-tint);color:var(--mb-green-dark)}

/* ---------- Blöcke ---------- */
.mb-block{padding:46px 0 0}
.mb-block>h2{font-size:26px;margin:0 0 10px}
.mb-lead{margin:0 0 22px;max-width:70ch}
.mb-note{font-size:13px;line-height:1.5;color:#9a9a9a;margin:14px 0 0}
.mb-note a{color:var(--mb-green-dark)}


.mb-steps{counter-reset:s;list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mb-steps li{counter-increment:s;display:grid;gap:6px;align-content:start;border-top:3px solid var(--mb-tint);padding-top:14px}
/* Nummer, Titel und Text teilen sich die Zeilen über alle Spalten: bricht
   ein Titel um, rutschen alle Texte gemeinsam nach unten, die Titel bleiben
   auf einer Höhe. Ohne subgrid stehen die Inhalte immerhin oben bündig. */
@supports (grid-template-rows:subgrid){
  .mb-steps{row-gap:0}
  .mb-steps li{grid-row:span 3;grid-template-rows:subgrid;margin-bottom:18px}
}
.mb-steps li:before{content:"0" counter(s);color:var(--mb-green);font-weight:700;font-size:13px;letter-spacing:.06em}
.mb-steps strong{color:var(--mb-ink);font-size:16px;align-self:start}
.mb-steps span{font-size:14px;line-height:1.5}

/* ---------- Auswahlmodul ---------- */
.mb-module{border:1.5px solid var(--mb-line);border-radius:8px;padding:26px 28px 30px;margin-top:20px;background:#fff}
/* Schritt-Titel in derselben Schrift wie die Titel der Check-Kacheln */
.mb-step{font-size:17px;font-weight:700;line-height:1.25;color:var(--mb-ink);margin:0 0 14px}
.mb-module .mb-step+*{margin-top:0}
.mb-module>*+.mb-step{margin-top:34px;padding-top:26px;border-top:1px solid var(--mb-line)}

/* Standortwahl als Zeilen im Stil der Apothekenliste */
.location-grid{display:grid;gap:10px;grid-template-columns:1fr}
.location-card{display:grid;grid-template-columns:minmax(0,1fr) 1fr auto;gap:22px;align-items:center;background:var(--mb-grey);border:1.5px solid transparent;border-radius:6px;padding:13px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.location-card:hover{border-color:#c9e2b6;box-shadow:none}
.location-card.is-chosen{background:var(--mb-tint);border-color:var(--mb-green);box-shadow:none}
.location-card h3{font-size:18px;margin:0 0 4px;color:var(--mb-green)}
.location-card address{font-style:normal;font-size:14px;line-height:1.45;color:var(--mb-text)}
.location-card .phone{display:inline-block;margin:4px 0 0;font-size:14px;font-weight:600;color:var(--mb-green-dark)}
.location-hours{font-size:13px;line-height:1.5;margin-bottom:0;gap:0}
.location-hours strong{display:block;color:var(--mb-ink);font-size:13px;margin-bottom:2px}
/* Die Auswahl steht auf der Mittelachse der Zeile, nicht am unteren Rand –
   so bestimmt allein der Inhalt die Höhe der Kachel. */
.location-choose{margin-top:0;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--mb-ink);white-space:nowrap;cursor:pointer}
.location-card.is-chosen .location-choose{color:var(--mb-green-dark)}
.location-choose input{width:18px;height:18px;accent-color:var(--mb-green);cursor:pointer}

/* Katalog */
.catalog-heading{margin:0 0 14px}
.catalog-heading h3{font-size:20px;color:var(--mb-green)}
body.no-rail .analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.analysis-card{border:1.5px solid var(--mb-line);border-radius:6px;padding:16px 18px 14px;box-shadow:none}
.analysis-card:hover{border-color:#c9e2b6;box-shadow:none;transform:none}
.analysis-card h4{font-size:17px;color:var(--mb-ink);font-weight:700;line-height:1.25;margin:0 0 8px}
.analysis-type{background:#fff;border:1px solid var(--mb-line);color:var(--mb-green-dark);border-radius:100px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:none}
.analysis-types{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.analysis-price{font-size:16px;font-weight:700;color:var(--mb-ink)}
.disclose{color:var(--mb-green-dark);font-size:13px;font-weight:600}
.disclose-mark{border-color:var(--mb-green);color:var(--mb-green-dark)}

/* Ein Check pro Termin: die Kachel selbst ist nicht klickbar, der Button
   „Termin buchen" öffnet das Overlay. */
.analysis-card{cursor:default}
.analysis-card:hover{border-color:var(--mb-line)}

/* Kompakte Kachel: links Thema, Titel und „Was wird gemessen", rechts Preis
   über dem Button. Spart gegenüber der gestapelten Fassung rund ein Drittel
   Höhe. Auf schmalen Bildschirmen rutschen Preis und Button wieder unter den
   Text (siehe @media weiter unten). */
.analysis-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-content:center;padding:13px 14px 11px 16px}
.analysis-card .mb-btn-sm{padding:9px 13px}
.analysis-card-top,.analysis-card h4,.analysis-card .disclose{grid-column:1}
.analysis-card-top{margin-bottom:7px}
/* Die Hauptversion reserviert zwischen 1181 und 1400 px zwei Titelzeilen;
   hier nicht nötig und der Grund für unnötig hohe Kacheln auf Laptops. */
body.no-rail .analysis-card h4{min-height:0;margin:0 0 3px}
.analysis-card .disclose{min-height:30px;justify-self:start}
.analysis-card-bottom{grid-column:2;grid-row:1 / span 3;margin:0;padding:0;border:0;flex-direction:column;flex-wrap:nowrap;align-items:flex-end;justify-content:center;gap:8px}
.mb-btn-sm{min-height:40px;padding:9px 16px;font-size:14px}
.mb-single-hint{margin:20px 0 0;padding:14px 16px;background:var(--mb-grey);border-radius:6px;font-size:14px;line-height:1.5;color:var(--mb-ink)}
.mb-single-hint a{color:var(--mb-green-dark);font-weight:600}

/* Beratungsgespräch: eigene Kachel über die ganze Breite, flacher als die
   Checks und hellgrün abgesetzt – eine Wahl für alle, die noch nicht wissen,
   welcher Test passt. */
.mb-consult{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;margin-top:12px;padding:12px 14px 12px 16px;background:var(--mb-tint);border:1.5px solid #cfe6bd;border-radius:6px}
.mb-consult h4{font-size:17px;font-weight:700;line-height:1.25;color:var(--mb-ink);margin:0 0 3px}
.mb-consult p{margin:0;font-size:14px;line-height:1.45;color:var(--mb-ink)}
.mb-consult-action{display:flex;align-items:center;gap:16px}
.mb-consult .mb-btn-sm{padding:9px 13px}
.mb-single-line{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--mb-ink)}
.mb-single-line a{color:var(--mb-green-dark);font-weight:600}

/* ---------- Häufige Fragen ---------- */
.faq-list{border-top:1px solid var(--mb-line);margin-top:6px}
.faq-list details{border-bottom:1px solid var(--mb-line);padding:0}
.faq-list summary{color:var(--mb-ink);font-size:16px;font-weight:600;padding:16px 34px 16px 0}
.faq-list summary:hover{color:var(--mb-green-dark)}
.faq-list summary:after{color:var(--mb-green);right:6px}
.faq-list details p{font-size:15px;line-height:1.55;color:var(--mb-text);padding-right:34px;margin:0 0 14px}
.faq-list details>:last-child{margin-bottom:20px}
.faq-singles{margin:0 0 14px;padding:0 34px 0 20px;columns:2;column-gap:32px;font-size:15px;line-height:1.55;color:var(--mb-ink)}
.faq-singles li{break-inside:avoid;margin:0 0 3px}
.faq-singles li::marker{color:var(--mb-green)}

/* ---------- Popover ---------- */
.pop{border:1.5px solid var(--mb-green);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.pop-head{background:var(--mb-tint);border-bottom:1px solid #d9e9cd}
.pop-head strong{color:var(--mb-green-dark);font-size:15px}
.pop-body dt{color:var(--mb-ink);font-size:14px}
.pop-body dd{color:var(--mb-text);font-size:13px}
.disclose-who{background:var(--mb-tint);color:var(--mb-ink);font-size:13px}

/* ---------- Overlay ---------- */
.dialog{border-radius:8px;background:#fff}
.dialog-head{background:#fff;border-bottom:1px solid var(--mb-line)}
.dialog-head strong{color:var(--mb-green);font-size:18px;font-weight:500}
.dialog-aside{background:var(--mb-grey);border-right:1px solid var(--mb-line)}
.dialog-aside h3{color:#888;font-size:13px;letter-spacing:.06em}
.dialog-loc{background:var(--mb-tint);border-radius:6px}
.dialog-loc>span{color:var(--mb-green-dark)}
.dialog-loc strong{color:var(--mb-ink);font-size:15px}
.dialog-note{background:var(--mb-tint);border-radius:6px;color:var(--mb-ink)}
.dialog-note span{color:var(--mb-green-dark)}
.widget-box{border:1px solid var(--mb-line);border-radius:6px}

/* ---------- nach oben und Footer ---------- */
.mb-top{text-align:center;margin:54px 0 46px;font-size:12px}
.mb-top a{color:var(--mb-green);text-decoration:none;display:inline-grid;justify-items:center;gap:2px}
.mb-footer{background:var(--mb-green);color:#fff;padding:36px 0 26px}
.mb-footer-inner{display:grid;grid-template-columns:200px repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.mb-footer-logo{width:150px;height:auto}
.mb-footer nav{display:grid;gap:7px;align-content:start}
.mb-footer nav strong{font-size:15px;font-weight:700;margin-bottom:3px}
.mb-footer a{color:#fff;text-decoration:none;font-size:13px;opacity:.92}
.mb-footer a:hover{text-decoration:underline}
.mb-footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;opacity:.85;margin-top:30px;border-top:1px solid rgba(255,255,255,.3);padding-top:14px}

/* ---------- Responsiv ---------- */
@media(max-width:1100px){
  .mb-intro{grid-template-columns:minmax(0,1fr) 260px;gap:34px}
  .mb-hero{height:280px}
  .mb-nav{gap:16px}
  .mb-nav a{font-size:15px}
}
@media(max-width:900px){
  .mb-nav,.mb-meta{display:none}
  .mb-header-inner{min-height:70px}
  .mb-hero{height:220px}
  .mb-intro{grid-template-columns:1fr;gap:28px}
  .mb-intro-side{position:static}
  .mb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .location-card{grid-template-columns:1fr;gap:10px}
  body.no-rail .analysis-grid{grid-template-columns:1fr}
  .mb-module{padding:20px 18px 24px}
}
@media(max-width:640px){
  .mb-container{width:min(100% - 32px,1014px)}
  .mb-hero{grid-template-columns:1fr;height:200px}
  .mb-hero-panel{display:none}
  .mb-steps{grid-template-columns:1fr}
  .faq-singles{columns:1}
  .mb-consult{grid-template-columns:1fr;row-gap:10px;padding:13px 16px}
  .mb-consult-action{justify-content:space-between;border-top:1px solid #cfe6bd;padding-top:11px}
  .analysis-card{grid-template-columns:minmax(0,1fr);padding:13px 16px}
  .analysis-card-bottom{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between;border-top:1px solid var(--mb-line);margin-top:6px;padding-top:11px}
  .mb-btn-lg{width:100%}
  .mb-footer-inner{grid-template-columns:1fr 1fr}
  .mb-intro h1{font-size:23px}
  .mb-block>h2,.mb-intro h3{font-size:20px}
}

/* Mobile: Menü-Symbol wie auf der Markenseite (Attrappe) */
.mb-burger{display:none;margin-left:auto;background:none;border:0;padding:6px;cursor:pointer;gap:5px;flex-direction:column}
.mb-burger span{display:block;width:28px;height:3px;border-radius:2px;background:var(--mb-green)}
@media(max-width:900px){.mb-burger{display:flex}}