/* CILI Member-Sites — Design-System „Editorial Apotheke" (09/2026)
   Kernfarbe Wasser-Petrol, Akzent Messing (nur Linien/Ziffern), Paper/Ink-Neutrale.
   Typo: Newsreader (Display, editorial) + Archivo (Text, Neo-Grotesk). Kein Glas, keine Pillen, keine Schatten. */
:root{
  --paper:#F6F2EA; --paper-2:#EFE9DE; --paper-3:#E6DFD2; --ink:#16201D; --ink-2:#3C4744; --muted:#6B7572; --line:#D9D2C4; --line-2:#C8BFAE;
  --core:#0E3B3A; --core-2:#155553; --core-3:#E4ECEA; --brass:#A8834A; --brass-2:#7E6136;
  --w:1180px; --gutter:clamp(20px,4vw,48px); --r:6px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-feature-settings:"ss01","cv11"}
img{max-width:100%;height:auto;display:block}
a{color:var(--core);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.05;margin:0 0 .45em;color:var(--ink)}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);font-optical-sizing:auto}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:0}
h3{font-size:1.35rem;line-height:1.2}
p{margin:0 0 1.1em}
strong{font-weight:600}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px}
/* Hinweisbalken */
.disclaimer-top{background:var(--ink);color:var(--paper);font-size:.74rem;letter-spacing:.02em;text-align:center;padding:8px 16px}
.disclaimer-top a{color:var(--paper);text-decoration:underline}
/* Header */
header.site{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.logo{font-family:var(--serif);font-weight:500;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.logo b{font-weight:500;color:var(--core)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex:1}
.nav ul a{color:var(--ink-2);font-size:.92rem;letter-spacing:.01em;padding:6px 0;border-bottom:1px solid transparent}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink);border-bottom-color:var(--ink);text-decoration:none}
.nav .cta{margin-left:auto}
.nav-toggle-input{display:none}
.nav-toggle{display:none;margin-left:auto;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:8px 0;color:var(--ink)}
/* Buttons: rechteckig, ruhig */
.btn{display:inline-block;background:var(--core);color:var(--paper);font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.01em;padding:13px 22px;border-radius:var(--r);border:1px solid var(--core);cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--core-2);border-color:var(--core-2);text-decoration:none}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:var(--paper)}
.btn.big{padding:15px 26px;font-size:.98rem}
.btn.gold{background:var(--brass-2);border-color:var(--brass-2)}
/* Eyebrow */
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;color:var(--brass-2);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass)}
/* Hero */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px)}
.hero p.lead{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;color:var(--ink-2);max-width:620px;font-weight:400}
.hero-grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-grid > div > p:last-child{margin:26px 0 0;display:flex;gap:12px;flex-wrap:wrap}
figure{margin:0}
.hero-img{position:relative;padding:0 0 26px}
.hero-img img{width:100%;border:1px solid var(--line-2);background:#fff}
.hero-img::after{content:attr(data-caption);position:absolute;left:0;bottom:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prod-img{border:1px solid var(--line-2);background:#fff;padding:clamp(18px,3vw,40px);display:grid;place-items:center;min-height:320px}
.prod-img img{max-height:460px;width:auto}
/* Fakten-Zeile */
.trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin:clamp(28px,4vw,56px) 0 0;padding:0}
.trustbar span{padding:18px 18px 18px 0;font-size:.9rem;color:var(--muted);border-right:1px solid var(--line);margin-right:18px;line-height:1.4}
.trustbar span:last-child{border-right:0}
.trustbar b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:2px}
/* Sections */
section{padding:clamp(36px,6vw,80px) 0}
section + section{padding-top:0}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:end;border-top:1px solid var(--ink);padding-top:22px;margin-bottom:clamp(24px,4vw,44px)}
.section-head .num{font-family:var(--serif);font-size:1rem;color:var(--brass-2);letter-spacing:.05em}
.section-head h2{margin:0}
.section-head p{margin:0;color:var(--muted);max-width:520px}
/* Einstiege (statt Karten-Raster) */
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.entries li{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.entries .num{font-family:var(--serif);font-size:1.6rem;color:var(--brass-2);line-height:1}
.entries h3{margin:0 0 6px}
.entries p{margin:0;color:var(--muted);max-width:640px}
.entries a.more{font-weight:600;white-space:nowrap;color:var(--ink);border-bottom:1px solid var(--ink)}
.entries a.more:hover{color:var(--core);border-color:var(--core);text-decoration:none}
/* Produkt-Raster */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--paper);padding:26px;display:flex;flex-direction:column;position:relative}
.card h3{margin:14px 0 6px}
.card p{color:var(--muted);flex:1;font-size:.95rem}
.card .btn{align-self:flex-start;margin-top:10px}
.card.prod{padding:0 0 22px}
.card.prod img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-bottom:1px solid var(--line);transition:transform .35s ease}
.card.prod:hover img{transform:scale(1.035)}
.card.prod h3,.card.prod p,.card.prod .tag,.card.prod .btn{margin-left:22px;margin-right:22px}
.card.prod .btn.alt{border:0;padding:0;background:none;color:var(--ink);font-weight:600;border-bottom:1px solid var(--ink);border-radius:0;margin-top:6px}
.card.prod .btn.alt::after{content:" →"}
a.card:hover{text-decoration:none}
.icon{display:none}
/* Split (Text + Bild) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split figure{border:1px solid var(--line-2);background:#fff;padding:clamp(18px,3vw,36px);display:grid;place-items:center}
.split figure img{max-height:420px;width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid2 .card{padding:28px}
/* Text-Elemente */
.tag{display:inline-block;border:1px solid var(--line-2);color:var(--ink-2);font-size:.78rem;letter-spacing:.02em;padding:5px 11px;border-radius:var(--r);margin:0 6px 6px 0;background:var(--paper)}
.answer{font-family:var(--serif);font-size:1.22rem;line-height:1.45;color:var(--ink);border-left:2px solid var(--brass);padding:4px 0 4px 20px;margin:0 0 22px}
table.spec{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95rem}
table.spec td{border-bottom:1px solid var(--line);padding:12px 8px 12px 0;vertical-align:top}
table.spec td:first-child{color:var(--muted);width:32%;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
details{border-bottom:1px solid var(--line);padding:4px 0;margin:0}
details:first-of-type{border-top:1px solid var(--ink)}
details summary{cursor:pointer;font-family:var(--serif);font-size:1.18rem;font-weight:500;padding:16px 36px 16px 0;list-style:none;position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:0;top:12px;font-family:var(--sans);font-weight:300;font-size:1.6rem;color:var(--brass-2)}
details[open] summary::after{content:"–"}
details p{color:var(--ink-2);margin:0 0 18px}
.note{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:22px 0}
.steps{counter-reset:s;list-style:none;padding:0;margin:8px 0 24px;border-top:1px solid var(--ink)}
.steps li{position:relative;padding:18px 0 18px 64px;border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:18px;font-family:var(--serif);font-size:1.3rem;color:var(--brass-2)}
/* CTA-Band */
.band{background:var(--core);color:var(--paper);padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.band h2{color:var(--paper);margin:0 0 10px;font-size:clamp(1.8rem,3.2vw,2.5rem)}
.band p{color:#CFDCD9;margin:0}
.band > div{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.band .btn:hover{background:#fff}
.band .btn.alt{background:transparent;color:var(--paper);border-color:rgba(246,242,234,.55)}
.band .btn.alt:hover{background:rgba(246,242,234,.12)}
/* Footer */
footer.site{border-top:1px solid var(--ink);margin-top:clamp(40px,7vw,90px);padding:48px 0 32px;color:var(--muted);font-size:.9rem;background:var(--paper-2)}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:32px}
footer.site a{color:var(--ink-2)}
footer.site a:hover{color:var(--ink)}
footer.site strong{color:var(--ink);font-family:var(--serif);font-weight:500;font-size:1.05rem}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fineprint{border-top:1px solid var(--line-2);padding-top:18px;font-size:.78rem;line-height:1.55}
/* Finder */
.finder-opt{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:18px 40px 18px 0;cursor:pointer;font-family:var(--serif);font-size:1.15rem;color:var(--ink);position:relative}
.finder-opt::after{content:"→";position:absolute;right:0;color:var(--brass-2)}
.finder-opt:hover{color:var(--core)}
#finder-q{border-top:1px solid var(--ink);margin-top:20px}
#finder-result{display:none;margin-top:28px}
/* Reveal */
/* keine Scroll-Einblendung: Inhalt muss ohne JS sichtbar sein */
/* Responsive */
@media(max-width:980px){.prod-grid{grid-template-columns:repeat(2,1fr)}.trustbar{grid-template-columns:repeat(2,1fr)}.trustbar span:nth-child(2){border-right:0}}
@media(max-width:820px){
  .hero-grid,.split,.grid2,.band,.section-head,footer.site .cols{grid-template-columns:1fr}
  .hero-img{order:-1;padding-bottom:22px}
  .band > div{justify-content:flex-start}
  .entries li{grid-template-columns:48px 1fr;row-gap:8px}.entries a.more{grid-column:2}
  .nav{height:64px}.nav ul{display:none}.nav .cta{display:none}.nav-toggle{display:block}
  .nav-toggle-input:checked ~ ul{display:grid;position:absolute;left:0;right:0;top:64px;background:var(--paper);border-bottom:1px solid var(--line);padding:12px var(--gutter) 18px;gap:4px}
  .nav-toggle-input:checked ~ ul a{display:block;padding:10px 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}.trustbar{grid-template-columns:1fr}.trustbar span{border-right:0}}
/* Dunkles Feature-Band */
section.full{padding:0;margin:clamp(36px,6vw,80px) 0}
.feature-dark{background:var(--core);color:var(--paper);padding:clamp(48px,7vw,96px) 0}
.fd-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,72px);align-items:center}
.feature-dark h2{color:var(--paper);font-size:clamp(2rem,4vw,3rem)}
.feature-dark h3{color:var(--paper);font-size:1.15rem;margin:8px 0 6px}
.feature-dark p{color:#CFDCD9;font-size:.95rem}
.eyebrow.light{color:#C9B27F}.eyebrow.light::before{background:#C9B27F}
.fd-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:26px 0 8px;border-top:1px solid rgba(246,242,234,.25);padding-top:22px}
.fd-cols .num{font-family:var(--serif);color:#C9B27F;font-size:1.1rem}
.feature-dark figure{background:var(--paper);padding:clamp(18px,3vw,40px);display:grid;place-items:center}
.feature-dark figure img{max-height:440px;width:auto}
a.more.light{color:var(--paper);border-bottom:1px solid rgba(246,242,234,.6);font-weight:600}
a.more.light:hover{text-decoration:none;border-color:var(--paper)}
/* Quickshot-Strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.strip a{background:#fff;padding:26px 18px 18px;display:grid;justify-items:center;gap:12px;color:var(--ink);transition:background .2s}
.strip a:hover{background:var(--paper-2);text-decoration:none}
.strip img{height:220px;width:auto;transition:transform .35s ease}
.strip a:hover img{transform:translateY(-4px)}
.strip span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
@media(max-width:980px){.fd-cols{grid-template-columns:1fr}.strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.fd-grid{grid-template-columns:1fr}.feature-dark figure{order:-1}}
/* Mobile-Härtung: kein horizontaler Überlauf, lange Wörter brechen */
html,body{overflow-x:hidden;max-width:100%}
.wrap,.hero-grid > *,.split > *,.fd-grid > *{min-width:0}
h1,h2{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:560px){
  h1{font-size:clamp(2.1rem,11vw,2.8rem)}
  .card.prod img{aspect-ratio:auto;max-height:240px}
  .strip{grid-template-columns:repeat(2,1fr)}.strip img{height:150px}
  .trustbar span{padding:12px 0}
  .btn.big{padding:13px 20px;font-size:.92rem}
}