/* Holi Biohack – Stylesheet
   Farben: Nachtblau #2B3340, Nachtblau dunkel #232A35, Karten #343E4D,
   Mint #E4EFEC, Petrol #1F766E, Gold #D4A961
   Schriften: Libre Baskerville (Überschriften), Open Sans (Text), lokal eingebunden */

@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/libre-baskerville-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/libre-baskerville-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/open-sans-latin-700-normal.woff2") format("woff2")}

:root{
  --nacht:#2B3340; --nacht-dunkel:#232A35; --karte:#343E4D; --karte-hell:#3D4859;
  --mint:#E4EFEC; --petrol:#1F766E; --gold:#D4A961;
  --serif:"Libre Baskerville",Georgia,serif;
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --breit:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--mint);font-family:var(--sans);font-size:19px;line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--gold)}
a:hover{color:#E8C37F}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--mint)}
em.gold{font-style:italic;color:var(--gold)}

.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--nacht);padding:10px 16px;z-index:10}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--breit);margin:0 auto;padding:0 24px}
.wrap.schmal{max-width:880px}
.wrap.mittel{max-width:1000px}
.abschnitt{padding:104px 0}
.abschnitt.dunkel{background:var(--nacht-dunkel)}
.text-schmal{max-width:68ch}

.kicker{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.h1{font-size:clamp(54px,9vw,118px);line-height:1.02;letter-spacing:-.01em}
.h2{font-size:clamp(36px,4.6vw,56px);line-height:1.12;margin-bottom:28px}
.h3{font-size:25px;line-height:1.3;margin-bottom:12px}
.lead{font-size:21px;max-width:62ch}
.linie{width:96px;height:3px;background:var(--gold);margin:34px 0 30px;border:0}
.hinweis{font-size:17px;line-height:1.6}
.klein{font-size:16px}

/* Buttons */
.btn{display:inline-flex;flex-direction:column;justify-content:center;font-weight:700;font-size:19px;line-height:1.25;padding:16px 30px;border-radius:999px;text-decoration:none;min-height:56px}
.btn small{font-weight:400;font-size:16px}
.btn-gold{background:var(--gold);color:var(--nacht)}
.btn-gold:hover{background:#E8C37F;color:var(--nacht)}
.btn-rand{border:1.5px solid var(--mint);color:var(--mint)}
.btn-rand:hover{background:rgba(228,239,236,.08);color:var(--mint)}
.btn-reihe{display:flex;flex-wrap:wrap;gap:14px}
.textlink{font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* Kopfbereich */
.kopf{background:var(--nacht-dunkel);border-bottom:1px solid rgba(212,169,97,.35)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 32px;padding-top:16px;padding-bottom:16px}
.logo{text-decoration:none;color:var(--mint);display:flex;flex-direction:column;line-height:1.1}
.logo span:first-child{font-family:var(--serif);font-size:24px;letter-spacing:.06em}
.logo span:last-child{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.logo:hover{color:var(--mint)}
.nav{display:flex;align-items:center;gap:6px 26px}
.nav a{color:var(--mint);text-decoration:none;font-size:17px;padding:10px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold)}
.nav a.btn{padding:12px 24px;font-size:17px;min-height:0;color:var(--nacht)}
.menue{display:none}
.menue summary{list-style:none;cursor:pointer;color:var(--mint);font-weight:600;font-size:17px;border:1.5px solid rgba(228,239,236,.5);border-radius:999px;padding:10px 20px}
.menue summary::-webkit-details-marker{display:none}
.menue nav{display:flex;flex-direction:column;gap:4px;padding:16px 0 6px}
.menue nav a{color:var(--mint);text-decoration:none;font-size:19px;padding:10px 0;border-bottom:1px solid rgba(228,239,236,.1)}
.menue nav a.btn{margin-top:10px;border:0;color:var(--nacht);text-align:center}
@media (max-width:860px){
  .nav{display:none}
  .menue{display:block}
  .kopf .wrap{flex-wrap:wrap}
  .menue[open]{flex-basis:100%}
}

/* Startbereich */
.hero{padding:72px 0 96px}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-text{flex:1 1 460px;min-width:0}
.hero-text .zeile{margin:0 0 26px;font-size:18px;font-weight:600;color:var(--gold);max-width:560px}
.hero-bild{flex:0 1 340px;min-width:260px;margin:0 auto}
.bogen{position:relative;padding:14px 14px 0 0}
.bogen::before{content:"";position:absolute;top:0;right:0;bottom:40px;left:14px;border:1.5px solid var(--gold);border-radius:160px 160px 6px 6px}
.bogen img{position:relative;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;border-radius:160px 160px 6px 6px}
.bogen p{position:relative;margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:17px}

/* Seitenkopf der Unterseiten */
.seitenkopf{padding:80px 0 72px}
.seitenkopf .h1{font-size:clamp(46px,7vw,92px)}

/* Spalten */
.spalten{display:flex;flex-wrap:wrap;gap:56px}
.spalten > *{flex:1 1 340px;min-width:0}
.spalten > .breit{flex:2 1 520px}

/* Nummerierte Liste */
.nliste{list-style:none;margin:0;padding:0;background:var(--karte);border-radius:6px;counter-reset:n}
.nliste li{display:flex;gap:20px;padding:18px 26px;border-bottom:1px solid rgba(228,239,236,.12);counter-increment:n}
.nliste li:last-child{border-bottom:0}
.nliste li::before{content:counter(n,decimal-leading-zero);font-family:var(--serif);color:var(--gold);min-width:32px}

.zitat{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.6;max-width:440px}

/* Fass */
.fass-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:64px}
.fass-zeile > div{flex:1 1 440px;min-width:0}
.fass{flex:0 1 380px;min-width:260px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.tropfen{width:28px;height:28px;background:var(--gold);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.tropfen-text{margin-top:10px;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-align:center}
.fass-koerper{width:100%;border:2px solid var(--mint);border-top-style:dashed;border-radius:4px 4px 28px 28px;padding:22px 14px 14px;display:flex;flex-direction:column;gap:6px;background:var(--nacht-dunkel)}
.fass-koerper div{padding:12px 16px;border-radius:4px;font-size:17px;line-height:1.4}
.s1{background:var(--karte-hell);color:var(--mint)}
.s2{background:var(--petrol);color:#fff}
.s3{background:var(--mint);color:var(--nacht);border-radius:4px 4px 18px 18px!important}
.fass figcaption{font-size:17px;text-align:center}
.gross-satz{font-family:var(--serif);font-size:clamp(27px,2.8vw,32px);line-height:1.3;color:var(--gold);margin:0}

/* Ausblick */
.grosszitat{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,48px);line-height:1.3}
.drei{display:flex;flex-wrap:wrap;gap:22px}
.drei > div{flex:1 1 250px;border-top:2px solid var(--gold);padding-top:18px}

/* Karten */
.karten{display:flex;flex-wrap:wrap;gap:22px}
.karte{flex:1 1 300px;background:var(--karte);border-radius:6px;padding:32px 30px}
.karte .nr{margin:0 0 14px;font-family:var(--serif);font-size:40px;line-height:1;color:var(--gold)}
.karte p:last-child{margin-bottom:0}

/* Schritte */
.schritte{display:flex;flex-wrap:wrap;gap:36px}
.schritte > div{flex:1 1 260px}
.schritte .nr{margin:0 0 16px;font-family:var(--serif);font-size:60px;line-height:1;color:var(--gold)}

/* Über mich kurz */
.person{display:flex;flex-wrap:wrap;align-items:center;gap:52px}
.person img{width:240px;height:240px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);margin:0 auto}
.person > div{flex:1 1 420px;min-width:0}

/* Fragen */
.fragen{display:flex;flex-direction:column;gap:10px}
.fragen details{background:var(--karte);border-radius:6px;padding:20px 26px}
.fragen summary{cursor:pointer;font-weight:700;font-size:20px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--gold);font-weight:400;font-size:26px;line-height:1}
.fragen details[open] summary::after{content:"–"}
.fragen details p{margin:12px 0 0}

/* Vergleich */
.vergleich{width:100%;border-collapse:collapse;background:var(--karte);border-radius:6px;overflow:hidden}
.tabelle-box{overflow-x:auto}
.vergleich th,.vergleich td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(228,239,236,.12)}
.vergleich thead th{font-family:var(--serif);font-weight:400;font-size:22px}
.vergleich thead th.empf{color:var(--gold)}
.vergleich tbody th{font-weight:600;color:var(--gold);font-size:17px;white-space:nowrap}

/* Liste mit Strichen */
.strich{list-style:none;margin:0 0 1em;padding:0}
.strich li{padding-left:28px;position:relative;margin-bottom:10px}
.strich li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:2px;background:var(--gold)}

/* Abschluss */
.abschluss{text-align:center}
.abschluss .wrap{display:flex;flex-direction:column;align-items:center}
.abschluss .linie{margin:0 0 26px}

/* Blog */
.artikel-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.artikel-karte{background:var(--karte);border-radius:6px;padding:30px;text-decoration:none;color:var(--mint);display:flex;flex-direction:column;gap:10px}
.artikel-karte[hidden]{display:none}
.artikel-karte:hover{color:var(--mint);background:var(--karte-hell)}
.artikel-karte .datum{font-size:15px;color:var(--gold);font-weight:600}
.leer{background:var(--karte);border-radius:6px;padding:40px;text-align:center}
.artikel{max-width:68ch;margin:0 auto}
.artikel h2{font-size:30px;line-height:1.25;margin:44px 0 16px}
.artikel .h1{font-size:clamp(36px,5vw,60px);line-height:1.12}
.artikel .gross-satz{margin:36px 0}
.artikel-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:16px;color:var(--gold);font-weight:600;margin:0 0 6px}
.artikel-karte h2{margin:0;font-size:24px;line-height:1.3}
.artikel-karte p{margin:0;font-size:17px}
.artikel-karte .weiter{margin-top:auto;padding-top:8px;color:var(--gold);font-weight:600;font-size:16px}
.kat-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.kat-filter button{font:inherit;font-size:16px;font-weight:600;color:var(--mint);background:transparent;border:1.5px solid rgba(228,239,236,.35);border-radius:999px;padding:8px 18px;cursor:pointer;min-height:44px}
.kat-filter button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--nacht-dunkel)}
.cta-box{background:var(--karte);border-radius:6px;padding:34px 32px;margin:56px 0 0}
.cta-box h2{margin-top:0}
.zurueck{display:inline-block;margin:0 0 26px;font-size:16px}

/* Rechtstexte */
.recht h2{font-size:26px;margin:36px 0 12px}
.platzhalter{background:var(--karte);border-left:0;border-radius:6px;padding:20px 24px;color:var(--gold)}

/* Fuß */
.fuss{background:var(--nacht-dunkel);border-top:1px solid rgba(212,169,97,.35);font-size:16px;line-height:1.6}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;padding-top:36px;padding-bottom:44px}
.fuss-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss-links a{color:var(--mint)}
.fuss-text{flex:1 1 420px;max-width:640px}
.fuss-text p{margin:0 0 6px}

@media (max-width:600px){
  .abschnitt{padding:72px 0}
  .hero{padding:48px 0 72px}
  .seitenkopf{padding:56px 0 48px}
  .nliste li,.fragen details{padding-left:20px;padding-right:20px}
  .karte{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}