/* alethics – gemeinsames Design-System der Funnel-Seiten (ab 23.09.2026)
   Vorlage: Alex' Relaunch-Entwurf. Schwarz ist die Bühne, weiße Karten mit
   28px-Radius liegen darauf, Knöpfe sind Pillen, Pink ist die Marke,
   Neongelb nur Textmarker oder Fläche.
   Benutzt von: kalorienrechner, download, single-download.
   (Der Verpflegungsrechner trägt dieselben Werte noch inline – beim Relaunch
   wandert er als Letztes hierher.)
   Schriften liegen auf dem eigenen Server: kein Google-Fonts-Abruf, sonst
   wandert bei jedem Seitenaufruf eine Besucher-IP zu Google. */

@font-face{font-family:"Archivo Black";src:url("../fonts/archivo-black-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-400-italic.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-700-italic.woff2") format("woff2");font-weight:700 900;font-style:italic;font-display:swap;}

.al-body{
  --schwarz:#000000; --weiss:#FFFFFF; --pink:#FF00B7; --gelb:#FFFF62;
  --hellgrau:#F0F0F0; --mittelgrau:#949494; --text2:rgba(0,0,0,.66); --linie:rgba(0,0,0,.1);
  --auf-dunkel:rgba(255,255,255,.66); --linie-dunkel:rgba(255,255,255,.14);
  --head:"Archivo Black","Arial Black",Arial,sans-serif;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --radius:28px; --radius-s:16px;
  --ease:cubic-bezier(.2,.7,.1,1);
  background:var(--schwarz);color:var(--weiss);font-family:var(--font);
  font-size:17px;line-height:1.55;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.al-body *{box-sizing:border-box;}
.al-body h1,.al-body h2,.al-body h3{font-family:var(--head);font-weight:400;letter-spacing:-.025em;line-height:1;margin:0;text-wrap:balance;}
.al-body p,.al-body li{text-wrap:pretty;}
.al-body :focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px;}
.al-body img{max-width:100%;height:auto;}

/* Kopfleiste: bleibt beim Scrollen oben */
.al-nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linie-dunkel);}
.al-nav .inner{display:flex;align-items:center;justify-content:center;gap:24px;height:76px;max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);position:relative;}
.al-nav img{height:44px;width:auto;display:block;}
.al-nav .zurueck{position:absolute;left:clamp(16px,4vw,40px);font-size:14px;font-weight:700;color:var(--auf-dunkel);text-decoration:none;transition:color .2s;}
.al-nav .zurueck:hover{color:var(--weiss);}
.al-nav .zurueck .lang{margin-left:8px;}
@media (max-width:640px){
  .al-nav .zurueck .lang{display:none;}
  .al-nav .zurueck{font-size:20px;line-height:1;}
  .al-nav img{height:36px;}
  .al-nav .inner{height:64px;}
}

.al-wrap{max-width:1000px;margin:0 auto;padding:clamp(40px,7vw,80px) clamp(16px,4vw,40px) 10px;}
.al-wrap.schmal{max-width:760px;}
.al-eyebrow{font-family:var(--font);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--pink);margin:0 0 22px;}
.al-eyebrow.leise{color:var(--auf-dunkel);}
.al-h1{font-size:clamp(34px,8.6vw,84px);line-height:.9;text-transform:uppercase;margin:0 0 20px;}
.al-h1 span{color:var(--pink);display:block;}
.al-lead{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--auf-dunkel);margin:0 0 36px;max-width:60ch;}
.al-mitte{text-align:center;}
.al-mitte .al-lead{margin-inline:auto;}

/* Laufband */
.al-marquee{margin-inline:calc(50% - 50vw);width:100vw;background:var(--gelb);color:var(--schwarz);
  overflow:hidden;padding-block:16px;border-block:1px solid var(--schwarz);margin-block:0 clamp(32px,5vw,56px);}
.al-marquee .track{display:flex;width:max-content;animation:alscroll 34s linear infinite;}
.al-marquee span{font-family:var(--head);font-size:clamp(18px,2.6vw,28px);letter-spacing:-.01em;padding-inline:20px;white-space:nowrap;}
.al-marquee span::after{content:"\25CF";font-size:.4em;vertical-align:.5em;margin-left:40px;}
@keyframes alscroll{to{transform:translateX(-50%)}}

/* Karten */
.al-card{background:var(--weiss);color:var(--schwarz);border-radius:var(--radius);padding:clamp(24px,4vw,34px);}
.al-card h2{font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;line-height:1.05;}
.al-card p{color:var(--text2);}
.al-card.dunkel{background:transparent;color:var(--weiss);border:1px solid var(--linie-dunkel);}
.al-card.dunkel p{color:var(--auf-dunkel);}
.al-card.pink{background:var(--pink);color:var(--schwarz);}
.al-card.pink p{color:rgba(0,0,0,.72);}
.al-card.pink .al-eyebrow{color:var(--schwarz);}

/* Knöpfe: Pillen, schwarze Schrift auf Pink (5,9:1 – Weiß auf Pink wären nur 3,5:1) */
.al-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:17px 28px;
  background:var(--pink);color:var(--schwarz);border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:16px;text-decoration:none;text-align:center;
  transition:transform .25s var(--ease),background .25s,color .25s;}
.al-btn:hover{transform:translateY(-2px);background:var(--schwarz);color:var(--weiss);}
.al-btn.breit{display:flex;width:100%;}
.al-btn.ghost{background:transparent;color:var(--weiss);border:1px solid var(--linie-dunkel);}
.al-btn.ghost:hover{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss);}
.al-card .al-btn.ghost{color:var(--schwarz);border-color:var(--schwarz);border-width:2px;}
.al-card .al-btn.ghost:hover{background:var(--schwarz);color:var(--weiss);}
.al-card.pink .al-btn{background:var(--schwarz);color:var(--weiss);}
.al-card.pink .al-btn:hover{background:var(--weiss);color:var(--schwarz);}

/* Formularteile */
.al-label{display:block;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.1em;margin:26px 0 10px;}
.al-input,.al-select{width:100%;padding:14px;border:1px solid rgba(0,0,0,.18);border-radius:var(--radius-s);
  outline:none;font-size:16px;font-family:var(--font);background:var(--weiss);color:var(--schwarz);transition:border-color .2s,box-shadow .2s;}
.al-input:focus,.al-select:focus{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,0,183,.25);}
.al-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text2);margin:12px 0;line-height:1.45;}
.al-consent input{margin-top:2px;accent-color:var(--pink);flex:0 0 auto;}
.al-consent a{color:var(--schwarz);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:2px;}
.al-err{color:#c81e1e;font-size:14px;margin:12px 0 0;display:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.al-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:6px 13px;opacity:.75;}

/* Ausklapper */
.al-faq details{border-top:1px solid var(--linie);}
.al-faq details:first-of-type{border-top:0;}
.al-faq details:last-of-type{border-bottom:1px solid var(--linie);}
.al-faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;line-height:1.35;
  display:flex;justify-content:space-between;gap:20px;padding-block:20px;}
.al-faq summary::-webkit-details-marker{display:none;}
.al-faq summary::after{content:"+";font-family:var(--head);color:var(--pink);font-size:22px;line-height:1;transition:transform .3s var(--ease);}
.al-faq details[open] summary::after{transform:rotate(45deg);}
.al-faq details p{padding-bottom:20px;}

.al-disc{max-width:1000px;margin:0 auto;padding:clamp(32px,5vw,56px) clamp(16px,4vw,40px) 10px;font-size:12px;color:var(--mittelgrau);line-height:1.55;text-align:center;}
.al-foot{max-width:1000px;margin:0 auto;padding:18px clamp(16px,4vw,40px) 56px;text-align:center;color:var(--auf-dunkel);font-size:13px;}
.al-foot a{color:var(--auf-dunkel);text-decoration:none;margin:0 11px;}
.al-foot a:hover{color:var(--weiss);}
.al-foot .zeile{margin-top:10px;}

@media (prefers-reduced-motion:reduce){
  .al-body *,.al-body *::before,.al-body *::after{animation:none !important;transition:none !important;}
}
@media print{
  .al-body{background:#fff !important;color:#000 !important;}
  .al-nav,.al-marquee,.al-foot{display:none !important;}
  .al-card{border:1px solid #ccc;border-radius:0;break-inside:avoid;}
}