/* Bereichsseiten von bieberfit.shop.
   Dieselben gemessenen Werte wie die Startseite: Grund #F5F5F7, Text #1D1D1F,
   Basis 17px, Radien 18px fuer Karten und 980px fuer Schaltflaechen. */
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(/schriften/inter-latin-300.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/inter-latin-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/schriften/inter-latin-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/schriften/inter-latin-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/schriften/inter-latin-700.woff2) format("woff2")}

:root{--bg:#f5f5f7;--card:#fff;--ink:#1d1d1f;--body:#333336;--muted:#6e6e73;--line:#d2d2d7;
  --blue:#0071e3;--link:#0066cc;--nav:rgba(255,255,255,.72);--r:18px;--pill:980px;--w:1180px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#000;--card:#1c1c1e;--ink:#f5f5f7;--body:#d6d6d8;--muted:#98989d;--line:#38383a;--link:#2997ff;--nav:rgba(22,22,23,.72)}}
:root[data-theme="dark"]{--bg:#000;--card:#1c1c1e;--ink:#f5f5f7;--body:#d6d6d8;--muted:#98989d;--line:#38383a;--link:#2997ff;--nav:rgba(22,22,23,.72)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.55;
  letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
.breit{max-width:var(--w);margin:0 auto;padding:0 22px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.kopf{position:sticky;top:0;z-index:20;background:var(--nav);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.kopf .breit{display:flex;align-items:center;gap:22px;height:52px}
.marke{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.zeichen{width:22px;height:22px;border-radius:6px;background:var(--blue);display:inline-block;flex:0 0 auto}
.kopf nav{display:flex;gap:18px;flex:1;overflow-x:auto;scrollbar-width:none}
.kopf nav::-webkit-scrollbar{display:none}
.kopf nav a{font-size:13px;color:var(--body);white-space:nowrap}
.kopf nav a.aktiv{color:var(--ink);font-weight:600}
.kopf .shop{font-size:13px;color:var(--body);white-space:nowrap}
/* Sprachumschalter. Er traegt den Namen der ANDEREN Sprache, in dieser
   anderen Sprache geschrieben - "English" auf der deutschen Seite. Wer
   "Englisch" schreibt, hilft genau denen nicht, die es brauchen. */
.kopf .sprache{font-size:12px;color:var(--body);white-space:nowrap;
  border:1px solid var(--line);border-radius:var(--pill);padding:3px 11px}
.kopf .sprache:hover{color:var(--ink);border-color:var(--muted)}
@media(max-width:820px){.kopf .breit{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:12px}}

main{padding:56px 0 20px}
.augenbraue{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.06;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.lead{font-size:1.15rem;color:var(--body);max-width:64ch;margin:18px 0 0}

/* align-items:start ist der Kern: Ohne das dehnt das Raster jede Karte auf
   die Hoehe der laengsten in ihrer Zeile. Bei einem Set mit fuenfzehn
   Vorteilen neben einem Produkt mit zweien klafft dann mitten in der
   kurzen Karte ein leeres Feld, und Preis und Inhalt haengen weit unter
   dem Text. Jetzt ist jede Karte so hoch wie ihr Inhalt. */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;margin:46px 0 0;align-items:start}
.karte{background:var(--card);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.karte .bild{aspect-ratio:1/1;border-radius:12px;background:#fff;overflow:hidden;margin-bottom:18px}
.karte .bild img{width:100%;height:100%;object-fit:contain;display:block}
.karte h2{font-size:1.22rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.kurz{font-size:.94rem;margin:0 0 14px}
.vorteile-titel{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.vorteile{list-style:none;margin:0 0 16px;padding:0}
.vorteile li{position:relative;padding-left:22px;margin-bottom:7px;font-size:.9rem;line-height:1.5;color:var(--body)}
.vorteile li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}
.anwendung{font-size:.86rem;color:var(--muted);margin:0 0 12px}
.preis{font-size:.94rem;color:var(--ink);font-weight:600;margin:0 0 10px}
.kartenfuss{padding-top:4px}
.acts{margin:0}
.verweis{font-size:.94rem}
.beleg{font-size:10.5px;line-height:1.45;color:var(--muted);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}

/* Voelle Breite wie das Produktraster darueber. Mit max-width endete der
   Kasten mitten auf der Seite, waehrend Raster und Abschluss bis zum Rand
   liefen - das las sich wie ein Versatz, nicht wie eine Absicht. */
.hinweis{background:var(--card);border-radius:var(--r);padding:30px 34px;margin:46px 0 0}
.hinweis p{max-width:88ch}
.hinweis p{font-size:.98rem;margin:0 0 12px}
.hinweis p:last-child{margin-bottom:0}
.abschluss{text-align:center;padding:70px 0 40px}
.abschluss h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.abschluss p{max-width:56ch;margin:0 auto}
.knoepfe{margin-top:24px;display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}
.knopf{background:var(--blue);color:#fff;border-radius:var(--pill);padding:12px 26px;font-size:.98rem}
.knopf:hover{text-decoration:none;opacity:.92}

footer{border-top:1px solid var(--line);padding:34px 0 60px;margin-top:30px}
.marke-fuss{font-size:12px;color:var(--muted);margin:0 0 12px}
.links{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 18px}
.links a{font-size:13px}
.klein{font-size:11px;line-height:1.6;color:var(--muted);margin:0;max-width:100ch}

/* Zusatzangaben je Produkt: was drin ist und was die Packung enthaelt. */
.zutaten{font-size:.86rem;color:var(--body);margin:0 0 12px}
.zutaten b{color:var(--ink);font-weight:600}
.fakten{margin:0 0 12px;padding:12px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:4px 20px}
.fakten div{display:flex;gap:7px;align-items:baseline}
.fakten dt{font-size:11px;color:var(--muted);margin:0}
.fakten dd{font-size:12px;color:var(--ink);font-weight:500;margin:0}

/* Zwischenueberschrift in der Vorteile-Liste (nur bei Sets, die nach
   Einzelprodukt gliedern). Kein Haken davor - sie ist kein Vorteil. */
.vorteile li.gruppe{padding-left:0;margin:14px 0 6px;font-size:12px;font-weight:600;
  letter-spacing:.01em;color:var(--ink)}
.vorteile li.gruppe:first-child{margin-top:0}
.vorteile li.gruppe::before{content:none}

/* ---------------------------------------------------------------------
   Stoffwechsel-Konzept: drei Phasen und der Tagesplan.
   --------------------------------------------------------------------- */
.phase{background:var(--card);border-radius:var(--r);padding:30px;margin:26px 0 0}
.phase-kopf{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.phase-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:78px;height:34px;padding:0 14px;border-radius:var(--pill);
  background:var(--blue);color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.phase-kopf h2{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.phase-kopf .dauer{font-size:13px;color:var(--muted);margin:2px 0 0}
.phase-text{font-size:1.02rem;max-width:70ch;margin:0 0 20px}
.phase-liste{margin:0;display:grid;gap:12px}
.phase-liste div{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:baseline;
  padding-top:12px;border-top:1px solid var(--line)}
.phase-liste dt{font-size:.94rem;font-weight:600;color:var(--ink);margin:0}
.phase-liste dd{font-size:.92rem;color:var(--body);margin:0}
@media(max-width:640px){.phase{padding:22px}.phase-liste div{grid-template-columns:1fr;gap:3px}}

.tagesplan{margin:46px 0 0}
.tagesplan h2{font-size:clamp(1.5rem,3.6vw,2rem);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.hinweis-klein{font-size:.95rem;color:var(--muted);margin:8px 0 24px}
.plan{background:var(--card);border-radius:var(--r);padding:8px 26px 18px}
.plan .zeile{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.plan .zeile:last-child{border-bottom:0}
.plan .zeit{font-size:.86rem;color:var(--muted);font-weight:500}
.plan .was{font-size:.98rem;font-weight:600;color:var(--ink)}
.plan .wie{font-size:.9rem;color:var(--body);margin-top:3px}
@media(max-width:640px){.plan{padding:8px 20px 14px}.plan .zeile{grid-template-columns:1fr;gap:4px}}

.wichtig{background:var(--card);border-radius:var(--r);padding:30px;margin:46px 0 0}
.wichtig h2{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 16px}
.wichtig ul{margin:0;padding-left:20px}
.wichtig li{font-size:.95rem;margin-bottom:9px}
.wichtig .belege{font-size:11px;line-height:1.6;color:var(--muted);margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------------
   Partnerseite.
   --------------------------------------------------------------------- */

/* Die Kosten. Der Betrag steht gross, weil eine Seite, die Geld beim
   Einstieg verlangt, ihn nicht kleinreden darf - das faellt sonst genau
   auf den zurueck, der es versucht. */
.kosten{margin:46px 0 0}
.kosten h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0}
.kosten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;margin-top:22px;align-items:start}
.posten{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.posten .betrag{font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.posten .was{font-size:13px;font-weight:600;color:var(--muted);margin:4px 0 12px;
  text-transform:uppercase;letter-spacing:.04em}
.posten p{margin:0;font-size:14px;line-height:1.6;color:var(--body)}

/* Der Abschnitt "Was ich dir nicht verspreche" hebt sich bewusst ab. Er ist
   kein Kleingedrucktes, sondern das Herzstueck der Seite. */
.wichtig.ehrlich{border-left:3px solid var(--blue);padding-left:26px}
.wichtig.ehrlich li{margin-bottom:14px}
.wichtig .quelle{color:var(--muted);font-size:.9em}

/* Auf der Partnerseite tragen die Planzeilen keine Uhrzeit, sondern ein
   Stichwort - das darf umbrechen und braucht mehr Platz. */
.plan .zeit{white-space:normal}