/* Offtimism – Website-Styles nach CI-Handbuch v1 (12.10.2026).
   Schriften: Nunito (Überschriften) und Inter (Text), selbst gehostet unter assets/fonts/ (SIL OFL, keine Anfragen an Google).
   Farben, Abstände (4-px-Raster), Radien und Schatten = CI-Tokens. Grün nur für Logo, Erfolg und den einen CTA pro Bildschirm. */

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2?v=7306d111f2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2?v=72d6b29df0") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --off-white: #F8F8F8; --white: #FFFFFF; --grey-light: #E3E5E8; --grey-dark: #4A4A4A; --night: #14181C;
  --green-light: #8FC93A; --green-dark: #2F6F2A; --orange: #E18335; --orange-text: #A95B19;
  --yellow: #E4CC37; --blue-light: #1E91D6; --blue-dark: #0072BB;
  --night-raised: #1F252B; --night-line: #2F363D; --blue-soft: #4FA8E0;

  --surface: var(--off-white); --surface-raised: var(--white); --text-strong: var(--night); --text: var(--grey-dark);
  --border: var(--grey-light); --link: var(--blue-dark); --focus: var(--blue-dark); --success: var(--green-dark);

  --font-display: "Nunito", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 28, .06), 0 2px 8px rgba(20, 24, 28, .06);
  --shadow-md: 0 4px 16px rgba(20, 24, 28, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font-family: var(--font-sans); font-size: 18px; line-height: 28px;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--text-strong); }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.num { font-variant-numeric: tabular-nums; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 20;
  background: var(--night); color: var(--white); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-4); color: var(--white); }

.container { max-width: 1180px; margin: 0 auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-16); }
.section--white { background: var(--white); }
.section--night { background: var(--night); color: var(--grey-light); }
.section--night h2, .section--night h3 { color: var(--off-white); }
.section--night a { color: var(--blue-soft); }
.section--night :focus-visible { outline-color: var(--blue-soft); }
.stack { display: flex; flex-direction: column; gap: var(--space-12); }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 760px; }

/* Typografie (CI: H1 48/56, H2 32/40, H3 22/30, Text 18/28 – mobil kleiner) */
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 56px; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 40px; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px; }
.lead { font-size: 18px; line-height: 28px; color: var(--text); max-width: 600px; }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--text); }

/* Badges (CI-Komponente) */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: var(--radius-pill);
  font: 600 13px/1 var(--font-sans); letter-spacing: .01em; white-space: nowrap;
}
.badge svg { width: 16px; height: 16px; margin-left: -3px; flex: none; }
.badge--neutral { background: var(--surface-raised); color: var(--text-strong); border: 1.5px solid var(--border); }
.badge--highlight { background: var(--yellow); color: var(--night); }
.badge--info { background: var(--blue-dark); color: var(--white); }
.section--night .badge--neutral { background: var(--night-raised); color: var(--off-white); border-color: var(--night-line); }

/* Buttons (CI: Pille, 48 px, Inter SemiBold 16; genau eine Hauptaktion pro Bildschirm) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 600 16px/20px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--cta { background: var(--green-light); color: var(--night); }
.btn--cta:hover { box-shadow: var(--shadow-md); }
.btn--primary { background: var(--night); color: var(--white); }
.btn--primary:hover { background: var(--night-line); color: var(--white); }
.btn--secondary { background: var(--surface-raised); color: var(--text-strong); border-color: var(--border); }
.btn--secondary:hover { border-color: var(--grey-dark); color: var(--text-strong); }
.btn:hover { text-decoration: none; }

/* Icons (CI: 24er-Raster, 2 px Strich, runde Enden) */
.icon { width: 24px; height: 24px; flex: none; }
.icon-tile {
  width: 48px; height: 48px; border-radius: 25%; background: var(--night);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icon-tile .icon { width: 28px; height: 28px; }

/* Karten */
.card {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.nav__logo img { height: 36px; width: auto; }
.nav__links { display: flex; gap: var(--space-6); font-size: 16px; font-weight: 500; }
.nav__links a { color: var(--text-strong); text-decoration: none; }
.nav__links a:hover { color: var(--link); }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__back { font-size: 16px; font-weight: 600; color: var(--text-strong); text-decoration: none; }
.nav__back:hover { color: var(--link); }
.lang { display: flex; padding: 3px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); }
.lang a, .lang span {
  min-width: 44px; height: 36px; display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--font-sans); border-radius: var(--radius-pill); text-decoration: none; color: var(--text-strong);
}
.lang [aria-current] { background: var(--night); color: var(--white); }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding-block: var(--space-16); }
.hero__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__meta { font-size: 14px; line-height: 20px; color: var(--text); }

/* App-Vorschau im Hero */
.preview { flex: 1 1 360px; min-width: 0; max-width: 440px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.stat-card { display: flex; flex-direction: column; gap: var(--space-2); }
.stat-card__label { font: 500 14px/20px var(--font-sans); color: var(--text); }
.stat-card__value { font: 600 40px/44px var(--font-sans); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.delta { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 16px/24px var(--font-sans); }
.delta--good { color: var(--success); }
.group-card { display: flex; flex-direction: column; gap: var(--space-4); }
.group-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.group-card__title { font: 700 18px/24px var(--font-display); color: var(--text-strong); }
.member { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--space-3); }
.member__avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--night); color: var(--white);
  display: flex; align-items: center; justify-content: center; font: 800 14px/1 var(--font-display);
}
.member__name { font: 500 16px/20px var(--font-sans); color: var(--text-strong); }
.member__time { font: 600 14px/20px var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.member__bar { grid-column: 2 / 4; height: 8px; border-radius: var(--radius-pill); background: var(--grey-light); overflow: hidden; }
.member__bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--blue-light); }
.member__bar .w-72 { width: 72%; } .member__bar .w-81 { width: 81%; } .member__bar .w-94 { width: 94%; }
.group-card__foot { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); font: 500 16px/24px var(--font-sans); color: var(--text-strong); }
.preview__caption { text-align: center; font-size: 14px; line-height: 20px; color: var(--text); }

/* Warum */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.stat { border-top: 1px solid var(--night-line); padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.stat__value { font: 600 40px/44px var(--font-sans); color: var(--off-white); font-variant-numeric: tabular-nums; }
.stat__text { font-size: 16px; line-height: 26px; }
.fails { display: flex; flex-direction: column; gap: var(--space-6); }
.fails__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.fail {
  background: var(--night-raised); border: 1px solid var(--night-line); border-radius: var(--radius-md);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
}
.fail .icon { color: var(--grey-light); }
.fail__title { font: 700 20px/28px var(--font-display); color: var(--off-white); }
.fail__text { font-size: 16px; line-height: 26px; }
.fails__intro, .fails__outro { font: 700 22px/30px var(--font-display); color: var(--off-white); }

/* Idee, So geht's, Topf, Team: Kartenraster */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.feature { display: flex; flex-direction: column; gap: var(--space-4); }
.feature p, .step p, .person p { font-size: 16px; line-height: 26px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { display: flex; flex-direction: column; gap: var(--space-4); }
.step__num {
  width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--night); color: var(--white);
  display: flex; align-items: center; justify-content: center; font: 800 22px/1 var(--font-display);
}
.pot { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.pot__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.pot__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-size: 16px; line-height: 26px; }
.note .icon { color: var(--blue-dark); margin-top: 1px; }
.side-item { display: flex; gap: var(--space-4); align-items: center; }
.side-item p { font: 500 16px/24px var(--font-sans); color: var(--text-strong); }
.person { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.avatar {
  width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--night); color: var(--white);
  display: flex; align-items: center; justify-content: center; font: 800 28px/1 var(--font-display);
}

/* Fahrplan */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.milestone { position: relative; border-top: 2px solid var(--border); padding-top: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.milestone::before {
  content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: var(--radius-pill);
  background: var(--white); border: 2px solid var(--grey-dark);
}
.milestone--now { border-top-color: var(--night); }
.milestone--now::before { background: var(--yellow); border-color: var(--night); }
.milestone__when { font: 500 14px/20px var(--font-sans); color: var(--text); }
.milestone__what { font: 700 22px/30px var(--font-display); color: var(--text-strong); }
.milestone p { font-size: 16px; line-height: 26px; }

/* Warteliste */
.waitlist {
  background: var(--night); color: var(--grey-light); border-radius: var(--radius-lg);
  padding: var(--space-12); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12);
}
.waitlist h2 { color: var(--off-white); }
.waitlist a { color: var(--blue-soft); }
.waitlist :focus-visible { outline-color: var(--blue-soft); }
.waitlist__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.waitlist__mark { width: 56px; height: auto; }
.waitlist__action { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.waitlist__action p { font-size: 14px; line-height: 20px; }
.wl-label { font: 500 14px/20px var(--font-sans); color: var(--off-white); }
.wl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wl-row input {
  flex: 1 1 260px; min-width: 0; height: 48px; padding: 0 var(--space-4); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font: 400 16px/20px var(--font-sans); color: var(--night); background: var(--white);
}
.wl-row input::placeholder { color: var(--grey-dark); }
.wl-device { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.wl-device legend { float: left; margin-right: var(--space-2); padding: 0; font: 500 14px/20px var(--font-sans); color: var(--off-white); }
.wl-device legend span { color: var(--grey-light); font-weight: 400; }
.wl-device label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 16px; color: var(--off-white); cursor: pointer; }
.wl-device input { width: 20px; height: 20px; margin: 0; accent-color: var(--green-light); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Ergebnisseiten (Warteliste) und 404 */
.result, .notfound { max-width: 680px; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-16); }
.result .lead { color: var(--text-strong); }
.result .hero__cta, .notfound .hero__cta { margin-top: var(--space-4); }
.icon-tile--lg { width: 64px; height: 64px; }
.icon-tile--lg .icon { width: 36px; height: 36px; }

/* Footer */
.site-footer { background: var(--night); color: var(--grey-light); font-size: 14px; line-height: 20px; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-12); }
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.footer__brand img { height: 36px; width: auto; }
.footer__claim { font: 600 16px/24px var(--font-sans); color: var(--off-white); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.site-footer a { color: var(--grey-light); }
.site-footer a:hover { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--blue-soft); }

/* Rechtstexte */
.legal { max-width: 800px; padding-block: var(--space-16); color: var(--text); }
.legal h1 { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 56px; margin-bottom: var(--space-8); }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 34px; margin: var(--space-12) 0 var(--space-3); scroll-margin-top: 96px; }
.legal h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; margin: var(--space-6) 0 var(--space-2); }
.legal p { margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.legal li { margin-bottom: var(--space-2); }
.legal ul.index { columns: 2 260px; column-gap: var(--space-8); }
.legal ul.index li { break-inside: avoid; }
.legal .glossary li { margin-bottom: var(--space-3); }
.legal .seal, .legal .note { margin-top: var(--space-12); font-size: 14px; line-height: 20px; }
.legal p.note { display: block; }
.legal .lines { line-height: 30px; }
.legal-trans { font-size: 14px; line-height: 20px; margin: calc(-1 * var(--space-4)) 0 var(--space-6); }
.legal-hint {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6); font-size: 16px; line-height: 26px; margin-bottom: var(--space-8); box-shadow: var(--shadow-sm);
}

/* Mobil (CI: H1 32/40, H2 24/32, H3 20/28, Text 16/26, Seitenrand 16, Abschnitte 48) */
@media (max-width: 860px) {
  .nav__links { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 26px; }
  .container { padding-inline: var(--space-4); }
  .section, .hero { padding-block: var(--space-12); }
  .h1, .legal h1 { font-size: 32px; line-height: 40px; }
  .h2 { font-size: 24px; line-height: 32px; }
  .h3, .milestone__what { font-size: 20px; line-height: 28px; }
  .lead { font-size: 16px; line-height: 26px; }
  .legal h2 { font-size: 22px; line-height: 30px; }
  .waitlist { padding: var(--space-8) var(--space-6); gap: var(--space-8); }
  .wl-row .btn { flex: 1 1 100%; }
  .wl-device legend { width: 100%; margin: 0; }
  .nav__actions .btn { display: none; }
  .fails__intro, .fails__outro { font-size: 20px; line-height: 28px; }
}
.milestone--now .milestone__when { font-weight: 600; color: var(--text-strong); }

/* Footer bleibt auch bei kurzen Seiten unten */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.stats__source { font-size: 14px; line-height: 20px; color: var(--grey-light); margin-top: calc(-1 * var(--space-2)); }

/* Fröhlicher Teil der CI: eigene Offtimism-Emojis (nur auf hellem Grund), Gelb für Highlights, Grün für das Positive */
.emoji { display: block; flex: none; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.claim { font: 700 24px/32px var(--font-display); color: var(--text-strong); margin-top: calc(-1 * var(--space-2)); }
.stat-card { position: relative; }
.stat-card__emoji { position: absolute; top: calc(-1 * var(--space-4)); right: calc(-1 * var(--space-4)); width: 64px; height: 64px; }
.group-card__foot .emoji { width: 28px; height: 28px; }
.real-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-6); }
.real { display: flex; flex-direction: column; gap: var(--space-3); }
.real .emoji { width: 64px; height: 64px; margin-bottom: var(--space-1); }
.real p { font-size: 16px; line-height: 26px; }
.feature .emoji { width: 56px; height: 56px; }
.step__num { background: var(--yellow); color: var(--night); }
.stat:last-child .stat__value { color: var(--green-light); }
.result__emoji { width: 80px; height: 80px; }
@media (max-width: 640px) {
  .claim { font-size: 20px; line-height: 28px; }
  .stat-card__emoji { width: 56px; height: 56px; top: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-2)); }
}

/* Hero: großes Querlogo zuerst, darunter der Slogan (Schutzzone unter dem Logo ≥ Höhe des „O“) */
.hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.hero__logo { height: 128px; width: auto; }
.hero__claim { font: 800 48px/56px var(--font-display); color: var(--text-strong); max-width: 600px; }
.preview { position: relative; }
@media (max-width: 640px) {
  .hero__title { gap: var(--space-8); }
  .hero__logo { height: 72px; }
  .hero__claim { font-size: 32px; line-height: 40px; }
}

/* Bild rechts im Hero: Gruppen-Screen wie in der App (Rangliste, Heute/Woche, Aktivität) */
.preview--group { max-width: 440px; }
.group-app { display: flex; flex-direction: column; gap: var(--space-4); }
.group-app__head { display: flex; flex-direction: column; padding-right: var(--space-12); }
.group-app__name { display: block; font: 800 24px/32px var(--font-display); color: var(--text-strong); }
.group-app__sub { display: block; font-size: 14px; line-height: 20px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-1); border-radius: var(--radius-pill); background: var(--grey-light); }
.seg__item { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font: 500 14px/20px var(--font-sans); color: var(--grey-dark); }
.seg__item.is-active { background: var(--white); color: var(--text-strong); font-weight: 600; box-shadow: var(--shadow-sm); }
.group-app__meta { font-size: 13px; line-height: 20px; margin-top: calc(-1 * var(--space-1)); }
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: 16px 36px 1fr auto; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-2) var(--space-3); margin-inline: calc(-1 * var(--space-3)); border-radius: var(--radius-sm); }
.rank-row.is-me { background: var(--off-white); }
.rank-row__pos { grid-row: span 2; font: 600 16px/20px var(--font-sans); color: var(--grey-dark); text-align: center; }
.rank-row:first-child .rank-row__pos { color: var(--success); }
.rank-row__avatar { grid-row: span 2; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--grey-light); color: var(--text-strong); display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-sans); }
.rank-row.is-me .rank-row__avatar { background: var(--green-dark); color: var(--white); }
.rank-row__name { font: 500 16px/20px var(--font-sans); color: var(--text-strong); }
.rank-row.is-me .rank-row__name { font-weight: 600; }
.rank-row__time { font: 500 14px/20px var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.rank-row .member__bar { grid-column: 3 / 5; height: 6px; }
.member__bar .w-31 { width: 31%; } .member__bar .w-46 { width: 46%; } .member__bar .w-62 { width: 62%; } .member__bar .w-100 { width: 100%; }
.week__sticker { position: absolute; top: calc(-1 * var(--space-6)); right: calc(-1 * var(--space-6)); width: 72px; height: 72px; z-index: 1; }
@media (max-width: 640px) {
  .week__sticker { right: calc(-1 * var(--space-2)); width: 56px; height: 56px; }
}

/* Footer: „Folge uns“ mit den wichtigsten Kanälen */
.footer__social { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--night-line); }
.footer__social-label { font-weight: 600; color: var(--off-white); }
.footer__social a { display: inline-flex; align-items: center; gap: var(--space-2); }
.social-logo { width: 24px; height: 24px; border-radius: 6px; }
.footer__social-all { font-weight: 600; }

/* Link-Seite (links.offtimism.com) */
.lt { width: 100%; max-width: 1000px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.lt__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 520px; }
.lt__avatar { width: 96px; height: 96px; border-radius: 25%; box-shadow: var(--shadow-sm); margin-bottom: var(--space-2); }
.lt__name { font: 800 32px/40px var(--font-display); color: var(--text-strong); }
.lt__claim { font: 700 20px/28px var(--font-display); color: var(--text-strong); }
.lt__bio { font-size: 16px; line-height: 26px; margin-bottom: var(--space-2); }
.lt__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 520px; }
.lt__actions .btn { width: 100%; }
.lt__h2 { font: 700 22px/30px var(--font-display); color: var(--text-strong); margin-top: var(--space-4); }
/* Kacheln als umbrechende Reihe: unvollständige letzte Zeile steht mittig */
.lt-grid { --cols: 8; --gap: var(--space-4); list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.lt-grid > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (max-width: 900px) { .lt-grid { --cols: 4; } }
.lt-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); height: 100%;
  padding: var(--space-6) var(--space-3); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-strong); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lt-tile:hover { border-color: var(--grey-dark); box-shadow: var(--shadow-md); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .lt-tile:hover { transform: translateY(-2px); } }
.lt-tile__logo { width: 56px; height: 56px; }
.lt-tile__name { font: 600 15px/20px var(--font-sans); }
@media (max-width: 760px) { .lt-grid { --gap: var(--space-3); } }
@media (max-width: 640px) { .lt-tile { padding: var(--space-4) var(--space-1); gap: var(--space-2); } .lt-tile__logo { width: 44px; height: 44px; } .lt-tile__name { font-size: 13px; line-height: 16px; } }
@media (max-width: 380px) { .lt-tile { padding-inline: 0; } .lt-tile__name { font-size: 12px; } }
@media (max-width: 350px) { .lt-grid { --cols: 3; } }
.lt-mail { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 16px; }
.lt-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); font-size: 14px; line-height: 20px; color: var(--text); padding-top: var(--space-6); border-top: 1px solid var(--border); width: 100%; }
.lt-foot a { color: var(--text); }

/* offtimism.app: Übersicht der Rechtstexte */
.legal ul.app-legal { list-style: none; padding-left: 0; margin: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-4); }
.legal ul.app-legal li { margin: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-sm); }
.legal ul.app-legal strong { font: 700 20px/28px var(--font-display); }
.legal .legal-date { font-size: 14px; line-height: 20px; }
.legal-toc { margin: var(--space-8) 0 var(--space-4); }
.legal .legal-toc h2 { margin-top: 0; }