/* ══════════════════════════════════════════════════════════════════════
   MatBuddy · Website

   Neufassung vom 23.10.2026. Dieselbe Formensprache wie ClubBuddy, die
   Dachmarke: weiche Ecken, Pillen-Etiketten, Pastellflächen hinter den
   Produktbildern, grüne Haken, ein hervorgehobenes Wort je Überschrift.
   Dazu zwei Anleihen aus dem Surfshark-System: die dunkle Karte mit
   großem Radius als Ruhepunkt zwischen hellen Abschnitten, und genau
   eine chromatische Aktionsfarbe.

   Vorgänger war eine bewusst flache, eckige Fassung nach Strava und
   Attio. Die war handwerklich sauber und am Markt vorbei — Vereins-
   und Studiosoftware sieht aus wie clubdesk, campai und webling, und
   genau dorthin gehört MatBuddy.
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/bricolage-wdth-latin.9fee080f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/bricolage-wdth-latin-ext.104b9349.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/instrument-latin.6219bc4b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/instrument-latin-ext.21fac8da.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --white:   #ffffff;
  --paper:   #ffffff;
  --bg-soft: #f7f9fc;
  --ink:     #0f2347;
  --ink-2:   #4a6183;
  --ink-3:   #7589a4;
  --line:    #dde5f0;

  /* Die Markenfarbe aus dem App-Icon, als Fläche statt als Verlauf.
     Der Verlauf selbst bleibt der Bildmarke im Logo vorbehalten. */
  --blue:    #3566e8;
  --blue-dk: #2950c4;
  --blue-lt: #edf2ff;

  /* Die Flächen hinter den Produktbildern. Es sind Gürtelfarben, nicht
     beliebige Pastelltöne: lila, grün, blau, gold. */
  --sun:     #f3b824;
  --sun-lt:  #fff6e0;
  --mint-lt: #e7f7ef;
  --rose-lt: #ffeded;
  --lila-lt: #f1ecff;
  --sky-lt:  #e6f4fc;
  --gruen:   #27994f;

  --navy:    #0d1a36;   /* die dunkle Karte */
  --belt-red:#c8102e;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body:    'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--display);
  --font-body: var(--body);
  --shadow:    0 4px 5px rgba(71,103,136,.04), 0 4px 10px rgba(71,103,136,.03), 0 10px 20px rgba(71,103,136,.05);
  --shadow-lg: 0 4px 5px rgba(71,103,136,.04), 0 8px 15px rgba(71,103,136,.03), 0 30px 50px rgba(71,103,136,.10);

  --w: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --r: 8px;
  --r-mat: 16px;
  --akzent: var(--blue);
  --mat-deep: var(--blue);
  --mat-tint: var(--blue-lt);
  --mat: #5bbfed;   /* alter Mattenton, nur noch Restverwendungen */
  --belt-purple: #5e3a9e; --belt-brown: #7a4b2a; --belt-black: #161616;
  --mb-1: #3566e8; --mb-2: #7c3aed; --gold: var(--sun);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: 90px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.07; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.14; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: 18px; line-height: 1.3; }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.hl { color: var(--blue); }

.wrap { max-width: var(--w); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 8vw, 104px); }
.center { text-align: center; }
.head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 60px); display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.head p { color: var(--ink-2); font-size: 18.5px; max-width: 38em; margin: 0; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--blue); background: var(--blue-lt); padding: 6px 14px; border-radius: 99px; }
.kicker-sun  { color: #8a6100; background: var(--sun-lt); }
.kicker-hell { color: #fff; background: rgba(255,255,255,.14); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 36em; }
.small { font-size: 14.5px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; }
}

/* ── Knöpfe ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16.5px/1 var(--body); text-decoration: none; white-space: nowrap; padding: 16px 26px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer; transition: background-color .16s ease, transform .16s ease, border-color .16s ease; }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(53,102,232,.6); }
.btn-primary:hover { background: var(--blue-dk); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .55; cursor: default; transform: none; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { background: var(--blue-lt); }
.btn:active { transform: scale(.985); }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; color: var(--blue); }

.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── Kopfzeile ───────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.93); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { height: 76px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 23px/1 var(--display); letter-spacing: -.02em; }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex: none; background: linear-gradient(135deg, var(--mb-1), var(--mb-2)); }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.top nav { display: flex; gap: 30px; margin-inline: auto; font-weight: 500; font-size: 16px; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover { color: var(--blue); }
.top-actions { display: flex; align-items: center; gap: 18px; }
.top-actions .login { text-decoration: none; font-weight: 600; font-size: 16px; }
.top .btn { padding: 12px 20px; font-size: 15.5px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 2px solid var(--ink); border-radius: var(--r); padding: 9px 14px; font: 700 15px/1 var(--display); cursor: pointer; }
@media (max-width: 960px) {
  .top nav, .top-actions { display: none; }
  .menu-btn { display: inline-block; }
  .top.open .wrap { height: auto; flex-wrap: wrap; padding-bottom: 20px; max-height: calc(100dvh - 12px); overflow-y: auto; }
  .top.open .logo { order: 1; min-height: 76px; }
  .top.open .menu-btn { order: 2; }
  .top.open nav { order: 3; }
  .top.open .top-actions { order: 4; }
  .top.open nav, .top.open .top-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
  .top.open nav a { font-size: 17px; padding: 4px 0; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: clamp(36px, 5vw, 60px) clamp(56px, 7vw, 92px); background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; min-width: 0; }
.hero-copy > p { font-size: clamp(18px, 1.5vw, 20px); color: var(--ink-2); max-width: 32em; margin: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn { padding: 16px 22px; font-size: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 15px; color: var(--ink-2); font-weight: 500; list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .ico { width: 20px; height: 20px; color: #fff; background: var(--gruen); border-radius: 50%; padding: 4px; stroke-width: 3; }

.hero-visual { position: relative; min-width: 0; padding: 4% 6% 10% 8%; }
/* Die weiche Form hinter dem Foto und der gelbe Punkt: dieselbe Geste
   wie bei ClubBuddy, damit die Dachmarke als eine Familie liest. */
.hero-visual::before { content: ""; position: absolute; inset: 0 0 4% 2%; background: var(--blue); border-radius: 42% 58% 52% 48% / 46% 40% 60% 54%; transform: rotate(-4deg); }
.hero-visual::after { content: ""; position: absolute; width: 24%; aspect-ratio: 1; right: -2%; top: -4%; background: var(--sun); border-radius: 50%; }
.hero-photo { position: relative; z-index: 1; border-radius: 28px; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 48% 46%; box-shadow: var(--shadow-lg); }
.float { position: absolute; z-index: 2; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); }
.float-phone { left: -4%; bottom: -2%; width: 25%; border-radius: 22px; border: 5px solid var(--navy); overflow: hidden; padding: 0; }
.float-phone img { width: 100%; }
.float-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; font-size: 14.5px; line-height: 1.35; max-width: 290px; animation: bob 6s ease-in-out infinite; }
.float-card b { display: block; font-weight: 600; color: var(--ink); }
.float-card span { color: var(--ink-3); font-size: 13.5px; }
.float-card .badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.fc-1 { right: 0; top: 12%; }
.fc-1 .badge { background: var(--sun-lt); color: #b07a00; }
.fc-2 { right: 6%; bottom: 2%; animation-delay: -3s; }
.fc-2 .badge { background: var(--blue-lt); color: var(--blue); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { padding: 4% 4% 14% 10%; }
}
@media (max-width: 560px) {
  .fc-1 { top: 2%; right: -2%; }
  .float-card { max-width: 220px; padding: 10px 12px 10px 10px; font-size: 13px; }
  .float-card span { font-size: 12px; }
  .float-card .badge { width: 34px; height: 34px; }
  .fc-2 { display: none; }
}

/* ── Vertrauensleiste ────────────────────────────────────────────────── */
.trust { background: var(--bg-soft); padding-block: 0 clamp(48px, 6vw, 72px); }
.trust-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trust-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-mat); padding: 14px 16px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); min-width: 0; }
.trust-item b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.trust-item .ico { width: 38px; height: 38px; padding: 8px; border-radius: 10px; color: var(--blue); background: var(--blue-lt); }
@media (max-width: 1000px) { .trust-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust-item { padding: 12px; } .trust-item .ico { width: 32px; height: 32px; padding: 6px; } }

/* ── Die dunkle Karte: das Alleinstellungsmerkmal ────────────────────── */
.unterschied { padding-block: clamp(56px, 7vw, 88px); }
.dunkel { background: var(--navy); color: #fff; border-radius: clamp(24px, 3vw, 44px); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dunkel h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); }
.dunkel-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.dunkel-copy > p { color: rgba(255,255,255,.76); font-size: 17.5px; margin: 0; max-width: 34em; }
.ticks { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--blue-lt); color: var(--blue); stroke-width: 3; margin-top: 1px; }
.ticks b { display: block; font-weight: 600; }
.ticks span span, .ticks > li > span > span { display: block; color: var(--ink-2); font-size: 16px; }
.ticks-hell .ico { background: rgba(255,255,255,.16); color: #fff; }
.ticks-hell b { color: #fff; }
.ticks-hell > li > span > span { color: rgba(255,255,255,.66); }

/* Der Gürtelstapel: weiß bis schwarz, Streifen für Streifen. */
.gurte { display: grid; gap: 12px; }
.gurt { height: 34px; border-radius: 5px; position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 16px; }
.gurt i { width: 6px; height: 100%; background: rgba(255,255,255,.9); display: block; }
.g-weiss   { background: #f1f1ea; } .g-weiss i { background: #b9b9ae; }
.g-blau    { background: #2f7fd8; }
.g-lila    { background: #5e3a9e; }
.g-braun   { background: #7a4b2a; }
.g-schwarz { background: #161616; position: relative; }
.g-schwarz::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34%; background: var(--belt-red); border-radius: 0 5px 5px 0; }
.gurte-note { margin: 18px 0 0; font-size: 14.5px; color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .dunkel { grid-template-columns: 1fr; } }

/* ── Funktionen: abwechselnde Reihen ─────────────────────────────────
   Heisst .funkt-band und nicht .features: Die Funktionen-Unterseite
   benutzt .features seit jeher fuer ihr zweispaltiges Verzeichnis. */
.funkt-band { background: var(--bg-soft); }
.rows { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 100px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.row.flip .row-copy { order: 2; }
.row-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.row-copy > p { color: var(--ink-2); font-size: 18px; max-width: 30em; margin: 0; }
.row-copy h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; }
.row-copy ul { display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; list-style: none; margin: 0; padding: 0; }
.row-copy li { display: flex; gap: 10px; align-items: flex-start; }
.row-copy li .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue-lt); color: var(--blue); stroke-width: 3; margin-top: 1px; }
.tile { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.tile .ico { width: 26px; height: 26px; }
.row-visual { position: relative; min-width: 0; padding: 26px; }
.row-visual::before { content: ""; position: absolute; inset: 0; border-radius: 30px; background: var(--wash, var(--blue-lt)); transform: rotate(-2deg); }
.row.flip .row-visual::before { transform: rotate(2deg); }
.shot { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.shot img { width: 100%; }
.app-visual { display: flex; justify-content: center; }
.app-visual .phone-frame { position: relative; z-index: 1; width: min(250px, 62%); border: 7px solid var(--navy); border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.t-blue  { background: var(--blue-lt); color: var(--blue); }
.t-green { background: var(--mint-lt); color: #1e8a4a; }
.t-sun   { background: var(--sun-lt);  color: #b07a00; }
.t-rose  { background: var(--rose-lt); color: #d2434b; }
.t-lila  { background: var(--lila-lt); color: #6b46d8; }
.t-sky   { background: var(--sky-lt);  color: #1d86bc; }

.more { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.more-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.more-item .tile { width: 46px; height: 46px; border-radius: 12px; }
.more-item .tile .ico { width: 23px; height: 23px; }
.more-item h3 { font-size: 18px; margin-bottom: 4px; }
.more-item p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
@media (max-width: 960px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row.flip .row-copy { order: 0; }
  .more { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .more { grid-template-columns: 1fr; } .row-visual { padding: 16px; } }

/* ── Abzeichen ───────────────────────────────────────────────────────── */
.abzeichen { background: linear-gradient(180deg, #fffdf7, #fff7e8); }
.badge-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(10px, 1.6vw, 18px); margin: 0 auto; }
.badge-wall img { width: clamp(72px, 9.6vw, 130px); filter: drop-shadow(0 12px 20px rgba(71,103,136,.22)); }
@media (hover: hover) and (pointer: fine) {
  .badge-wall img { transition: transform .18s cubic-bezier(.23,1,.32,1); }
  .badge-wall img:hover { transform: translateY(-6px) scale(1.04); }
}

/* ── Vorher / Nachher ────────────────────────────────────────────────── */
.vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; background: var(--sun-lt); border-radius: clamp(20px, 2.6vw, 36px); padding: clamp(24px, 3.5vw, 48px); }
.vergleich-bild img { border-radius: var(--r-mat); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.vergleich-copy h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 14px; }
.vergleich-copy > p { color: var(--ink-2); margin-bottom: 24px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.vs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; }
.vs li { display: flex; gap: 9px; align-items: flex-start; }
.vs .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; stroke-width: 3; margin-top: 2px; }
.vs-alt li { color: var(--ink-3); }
.vs-alt .ico { background: var(--rose-lt); color: #d2434b; }
.vs-neu .ico { background: var(--mint-lt); color: var(--gruen); }
@media (max-width: 900px) { .vergleich { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .vs { grid-template-columns: 1fr; } }

/* ── Drei Schritte ───────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.step-no { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-lt); color: var(--blue); display: grid; place-items: center; font: 700 18px/1 var(--display); margin-bottom: 4px; }
.steps p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.preis-teaser { margin-top: 34px; font-size: 17px; color: var(--ink-2); }
.preis-teaser b { color: var(--ink); font-family: var(--display); font-size: 19px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ── Demo-Abschnitt mit Formular ─────────────────────────────────────── */
.demo { background: var(--bg-soft); }
.demo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.demo-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.demo-copy > p { color: var(--ink-2); font-size: 18px; margin: 0; }
.demo-mail { font-size: 15.5px; color: var(--ink-2); }
.demo-mail a { color: var(--blue); font-weight: 600; }
@media (max-width: 900px) { .demo .wrap { grid-template-columns: 1fr; } }

/* ── Formular ────────────────────────────────────────────────────────── */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-lg); }
.form-card h3 { margin-bottom: 8px; font-size: 24px; }
.form-vor { font-size: 14.5px; color: var(--ink-2); margin: 0 0 20px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: 14.5px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r); font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(53,102,232,.16); }
.field textarea { min-height: 96px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@supports (grid-template-rows: subgrid) {
  .field-row { grid-template-rows: auto auto; align-items: start; }
  .field-row > .field { grid-row: span 2; grid-template-rows: subgrid; }
}
.field label { align-self: end; }
.mehr-felder { margin-bottom: 18px; }
.mehr-felder > summary { cursor: pointer; font: 700 15.5px/1 var(--display); padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.mehr-felder > summary::-webkit-details-marker { display: none; }
.mehr-felder > summary::before { content: "+"; font-size: 19px; width: 1em; }
.mehr-felder[open] > summary::before { content: "–"; }
.mehr-felder > summary span { font-family: var(--body); font-weight: 400; color: var(--ink-3); font-size: 14.5px; }
.choice { display: grid; gap: 10px; }
.choice label { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; font-weight: 400; }
.choice label:has(input:checked) { border-color: var(--blue); background: var(--blue-lt); }
.choice input { margin-top: 4px; accent-color: var(--blue); }
.choice b { display: block; font-weight: 600; }
.choice span { font-size: 14.5px; color: var(--ink-2); }
.form-note { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
.form-error { display: none; color: #c8102e; font-weight: 600; margin-top: 12px; }
.form-success { display: none; padding: 18px; background: var(--mint-lt); border-radius: var(--r); font-weight: 600; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ── Mitlaufender Knopf auf dem Handy ────────────────────────────────── */
.sticky-cta { display: none; }
@media (max-width: 620px) {
  .sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: grid; justify-items: center; gap: 2px; padding: 13px 18px; background: var(--blue); color: #fff; border-radius: var(--r); font: 700 16.5px/1.2 var(--display); text-decoration: none; box-shadow: 0 8px 26px rgba(13,26,54,.3); transform: translateY(140%); transition: transform .25s ease-out; }
  .sticky-cta span { font-family: var(--body); font-weight: 400; font-size: 13px; opacity: .85; }
  .sticky-cta.an { transform: none; }
  body:has(.sticky-cta.an) { padding-bottom: 88px; }
}

/* ── Fußzeile ────────────────────────────────────────────────────────── */
.footer { background: var(--navy); color: rgba(255,255,255,.68); padding: 60px 0 32px; font-size: 15px; }
.footer .logo { color: #fff; }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer h4 { font-size: 15px; margin-bottom: 12px; color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .desc { max-width: 38em; margin-top: 14px; }
.footer .store { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.footer .store img { height: 54px; width: auto; }
.footer .store span { font-size: 14px; color: rgba(255,255,255,.52); }
.footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: rgba(255,255,255,.52); }
.footer :focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer .cols { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   Unterseiten (Preise, Funktionen, Fragen, Geschichte, Rechtstexte).
   Übernommen aus der vorherigen Fassung; die Marken- und Formtokens
   oben gelten für sie mit, so dass Knöpfe, Kopfzeile und Fuß überall
   gleich aussehen.
   ══════════════════════════════════════════════════════════════════════ */
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 36em; }
.small { font-size: 14.5px; color: var(--ink-3); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-lg { padding: 16px 24px; font-size: 17px; }
.belt {
  position: relative; display: flex; align-items: stretch; height: 64px;
  background: #f7f8fa;
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, #e1e6ee 7px 8px);
}
.belt-bar { width: clamp(120px, 18vw, 240px); background: var(--belt-black); position: relative; flex: none; }
.belt-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 20px; width: 78px;
  background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 24px);
}
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav { display: flex; gap: 26px; margin-left: 18px; }
.nav a { text-decoration: none; font-weight: 500; color: var(--ink-2); font-size: 15.5px; }
.nav a:hover { color: var(--ink); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.topbar-right .login { text-decoration: none; font-weight: 600; font-size: 15.5px; }
.topbar .btn { padding: 11px 16px; font-size: 15px; }
.hero .lead { margin: 22px 0 28px; }
@media (max-width: 700px) {
  .belt-bar { width: 90px; }
  .belt-bar::after { right: 10px; width: 54px; }
}
.stufe > .wrap > .lead { margin-top: 14px; }
/* Das Abschlussband der Unterseiten: eine blaue Karte mit grossem
   Radius, wie der Aufruf bei ClubBuddy — und in derselben Familie wie
   die dunkle Karte auf der Startseite. */
.abschluss { padding: 0 0 clamp(56px, 7vw, 88px); }
.abschluss .wrap { max-width: var(--w); }
.abschluss > .wrap {
  background: var(--blue); color: #fff;
  border-radius: clamp(20px, 2.6vw, 40px);
  padding: clamp(32px, 5vw, 60px);
  max-width: calc(var(--w) - 2 * var(--gutter)); margin-inline: auto;
}
.abschluss h2 { color: #fff; max-width: 13em; font-size: clamp(28px, 3.2vw, 42px); }
.abschluss > .wrap > p { color: rgba(255,255,255,.84); font-size: 17.5px; margin: 16px 0 0; max-width: 36em; }
.abschluss-tat { margin-top: 28px !important; }
.abschluss-tat .btn { background: #fff; color: var(--blue); border-color: #fff; box-shadow: none; }
.abschluss-tat .btn:hover { background: var(--blue-lt); border-color: var(--blue-lt); }
.abschluss-klein { font-size: 14.5px !important; color: rgba(255,255,255,.76) !important; margin-top: 18px !important; }
.abschluss-klein a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.abschluss :focus-visible { outline-color: #fff; }
.founders { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.founders li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--mat-tint); border-radius: var(--r-mat); }
.founders .init { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; flex: none; }
.founders b { display: block; font-family: var(--font-display); font-size: 17px; }
.founders span { font-size: 14.5px; color: var(--ink-2); }
.rechtsform { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 32px; background: var(--mat-tint); border-radius: var(--r); }
.rf-btn {
  padding: 11px 18px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink-2);
  transition: background-color .15s, color .15s; min-height: 44px;
}
.rf-btn.an { background: var(--ink); color: #fff; }
.rf-btn:not(.an):hover { color: var(--ink); }
.tarife { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.tarif {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px; border: 1.5px solid var(--line); border-radius: var(--r-mat); background: var(--paper);
  position: relative;
}
  .tarife { grid-template-rows: auto auto auto auto auto auto; align-items: stretch; }
  .tarif { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
.tarif-top { border-color: var(--ink); border-width: 2.5px; box-shadow: 0 18px 50px rgba(18,33,58,.12); }
.tarif-marke {
  position: absolute; top: -13px; left: 24px;
  padding: 5px 11px; border-radius: var(--r); background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
}
.tarif h3 { font-size: 27px; }
.tarif-zweck { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.tarif-preis { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-variant-numeric: tabular-nums; }
.tarif-preis b { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.tarif-preis span { font-size: 14.5px; color: var(--ink-3); }
/* Streichpreis unter dem Betrag. Steht im selben Absatz wie der Preis und
   nicht als eigenes Kind der Karte: .tarif ist ein Subgrid mit genau sechs
   Zeilen, ein siebtes Kind schoebe Knopf und Liste uebereinander. */
.tarif-preis .tarif-statt {
  flex: 0 0 100%; margin-top: 2px; font-size: 13.5px; color: var(--ink-3);
}
.tarif-preis .tarif-statt s { text-decoration-thickness: 1px; }
.tarif-cta { justify-content: center; }
.tarif-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; }
.tarif-liste li { position: relative; padding-left: 26px; }
.tarif-liste li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(-45deg);
}
.tarif-dazu { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.p-solo, .nur-solo { display: none; }
.preise.solo .p-solo { display: inline; }
.preise.solo .p-verein { display: none; }
.preise.solo .nur-solo { display: inline; }
.preise.solo .nur-verein { display: none; }
.preis-fuss { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; }
.preis-fuss li { font-size: 15px; color: var(--ink-2); }
.preis-fuss b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.preis-ust { margin-top: 22px; max-width: 58em; }
@media (max-width: 920px) {
  .tarife { grid-template-columns: 1fr; grid-template-rows: none; }
  .tarif { display: flex; grid-row: auto; }
  .tarif-top { order: -1; margin-top: 14px; }
  .preis-fuss { grid-template-columns: 1fr; }
  .rechtsform { display: flex; width: 100%; }
  .rf-btn { flex: 1; }
}
.faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 26px; font-weight: 500; color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); padding-bottom: 22px; max-width: 60ch; }
.faq .more { margin-top: 22px; display: inline-block; }
.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 56px); }
.page-head .lead { margin-top: 18px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 48px 0 14px; }
.prose h3 { margin: 30px 0 10px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--ink); }
.beat { margin-bottom: 44px; }
.beat h3 { margin-bottom: 16px; }
.dialog { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.say { padding: 22px 24px; border-radius: var(--r-mat); position: relative; }
.say.m { background: var(--mat-tint); }
.say.d { background: var(--paper); border: 1.5px solid var(--line); }
.say .who { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-3); margin-bottom: 8px; }
.say p { color: var(--ink); margin: 0; }
.story-quote { margin-top: 24px; padding-top: 40px; border-top: 2px solid var(--ink); max-width: 44em; }
.story-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.story-quote blockquote::before { content: "„"; color: var(--mat); }
.story-quote blockquote::after { content: "“"; color: var(--mat); }
.story-quote cite { display: block; font-style: normal; color: var(--ink-2); margin-top: 16px; font-size: 15.5px; }
.story-quote cite b { color: var(--ink); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.stats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.stats li { border-left: 3px solid var(--paper); padding-left: 14px; font-size: 15.5px; }
.stats li b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.club { background: var(--paper); border-radius: var(--r-mat); padding: 20px 22px; }
.club b { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; }
.club p { color: var(--ink-2); margin: 0; font-size: 15.5px; }
.features-intro { position: sticky; top: 96px; align-self: start; }
.features-intro p { margin-top: 16px; color: var(--ink-2); }
.features-intro .btn { margin-top: 22px; }
.fgroup { margin-bottom: 44px; }
.fgroup:last-child { margin-bottom: 0; }
.fgroup h3 { padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.frow { padding: 18px 0; border-bottom: 1px solid var(--line); }
.frow h4 .tag-neu { margin-left: 8px; position: relative; top: -2px; }
.frow p { color: var(--ink-2); font-size: 16px; }
/* Das „Neu"-Etikett trug var(--mat) als Grund und die dunkle
   Textfarbe darauf. Seit --mat das kraeftige Markenblau ist, stand
   dunkelblaue Schrift auf dunkelblauem Grund. Jetzt wie die Kicker. */
.tag-neu {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; line-height: 1;
  padding: 4px 7px; border-radius: 99px; background: var(--blue-lt); color: var(--blue); vertical-align: middle;
}
.toc { list-style: none; margin: 14px 0 24px; padding: 0; display: grid; gap: 6px; }
.toc a { text-decoration: none; font-weight: 500; color: var(--ink-2); padding: 6px 0; display: block; border-bottom: 1px solid var(--line); }
.toc a:hover { color: var(--ink); }
.fgroup { scroll-margin-top: 90px; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.frow { grid-template-columns: 36px minmax(0, 5fr) minmax(0, 7fr); gap: 8px 18px; align-items: start; }
.frow .ic-box { width: 36px; height: 36px; border-radius: 8px; background: var(--mat-tint); color: var(--ink); display: grid; place-items: center; }
.frow .ic-box .ic { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .frow { grid-template-columns: 36px minmax(0, 1fr); }
  .frow p { grid-column: 2; }
}
.page-head.mat { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); margin-bottom: clamp(40px, 6vw, 72px); }
.page-head.mat .lead { color: var(--ink); }
.page-head .wrap.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.page-head .art { position: relative; min-height: 220px; }
.page-head .art img { display: block; }
.art-badge img { width: min(70%, 260px); margin: 0 auto; transform: rotate(4deg); filter: drop-shadow(0 20px 30px rgba(18,33,58,.25)); }
.art-fan { height: 300px; }
.art-fan img { position: absolute; width: 78%; border-radius: 8px; box-shadow: 0 16px 40px rgba(18,33,58,.3); border: 1px solid rgba(255,255,255,.4); }
.art-fan img:nth-child(1) { left: 0; top: 0; transform: rotate(-4deg); }
.art-fan img:nth-child(2) { left: 14%; top: 22%; transform: rotate(1deg); }
.art-fan img:nth-child(3) { left: 24%; top: 46%; transform: rotate(4deg); }
@media (max-width: 900px) {
  .page-head .wrap.split { grid-template-columns: 1fr; }
  .art-fan { height: 240px; }
}
.showcase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; background: var(--mat-tint); border-radius: var(--r-mat); padding: 26px 28px; margin: 8px 0 22px; }
.showcase .ic-big { width: 52px; height: 52px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }
.showcase .ic-big .ic { width: 26px; height: 26px; }
.showcase p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.showcase img { border-radius: 8px; box-shadow: 0 14px 34px rgba(18,33,58,.2); }
.showcase .phones { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
.showcase .phones img { width: 42%; max-width: 170px; border-radius: 20px; border: 4px solid #000; }
.showcase .mini-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.showcase .mini-badges img { width: 17%; max-width: 84px; box-shadow: none; border-radius: 0; filter: drop-shadow(0 8px 12px rgba(18,33,58,.2)); }
.showcase .mini-badges img:nth-child(odd) { transform: rotate(-3deg); }
.showcase .mini-badges img:nth-child(even) { transform: rotate(3deg); }
.showcase .mini-note { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 10px; }
.art-badge figcaption { text-align: center; font-size: 13px; color: var(--ink); opacity: .8; margin-top: 12px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 6px; border-radius: 3px; background: linear-gradient(180deg, #f4f4f2 0 22%, var(--mat-deep) 22% 60%, var(--belt-purple) 60% 85%, var(--belt-brown) 85%); }
.timeline li { position: relative; padding: 0 0 26px 44px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.timeline li.jetzt::before { background: var(--belt-red); border-color: var(--belt-red); }
.timeline .when { font-size: 13.5px; font-weight: 600; color: var(--ink-3); display: block; margin-bottom: 2px; }
.timeline b { font-family: var(--font-display); font-size: 18px; display: block; }
.timeline p { color: var(--ink-2); font-size: 15.5px; margin: 4px 0 0; max-width: 46em; }
.faq-topic { margin-bottom: 40px; }
.faq-topic h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.faq-topic h2 .ic { width: 26px; height: 26px; }
.faq-side { position: sticky; top: 96px; align-self: start; }
.faq-side .toc { margin-top: 0; }
.contact-card { background: var(--mat-tint); border-radius: var(--r-mat); padding: 20px 22px; margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.contact-card b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.belt-stack { display: grid; gap: 12px; width: 100%; max-width: 420px; justify-self: center; }
.belt-stack .belt { height: 34px; border-radius: 4px; overflow: hidden; border: 0; box-shadow: 0 8px 18px rgba(18,33,58,.18); }
.belt-stack .belt-bar { width: 34%; margin-left: auto; }
.belt-stack .belt-bar::after { right: 10px; width: 54px; background: repeating-linear-gradient(90deg, #fff 0 5px, transparent 5px 17px); }
.belt-stack .weiss { background: #f4f4f2; background-image: repeating-linear-gradient(180deg, transparent 0 5px, #e2e2de 5px 6px); }
.belt-stack .blau  { background: var(--mat-deep); background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.1) 5px 6px); }
.belt-stack .lila  { background: var(--belt-purple); background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.12) 5px 6px); }
.belt-stack .braun { background: var(--belt-brown); background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.12) 5px 6px); }
.belt-stack .schwarz { background: var(--belt-black); background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.07) 5px 6px); }
.belt-stack .schwarz .belt-bar { background: var(--belt-red); }
.belt-stack .belt:nth-child(1) { transform: rotate(-1.5deg); }
.belt-stack .belt:nth-child(3) { transform: rotate(1deg); }
.belt-stack .belt:nth-child(5) { transform: rotate(-1deg); }
.legal-page .wrap.cols2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.legal-page .prose { max-width: 70ch; }
.legal-page .prose h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 40px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal-page .prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-page .prose h3 { font-size: 18px; }
.legal-page .prose p, .legal-page .prose li { font-size: 16px; line-height: 1.6; }
.legal-page .prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal-page .prose th, .legal-page .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-page .prose .small { margin-bottom: 20px; }
.legal-page .prose strong { color: var(--ink); }
.badge-wall.an img { animation: aufnaehen .3s cubic-bezier(.2,.9,.3,1.25) forwards; }
.badge-wall.an img:nth-child(2) { animation-delay: .05s; } .badge-wall.an img:nth-child(3) { animation-delay: .1s; } .badge-wall.an img:nth-child(4) { animation-delay: .15s; }
.badge-wall.an img:nth-child(5) { animation-delay: .2s; } .badge-wall.an img:nth-child(6) { animation-delay: .25s; } .badge-wall.an img:nth-child(7) { animation-delay: .3s; }
@media (hover: hover) and (pointer: fine) {
  .badge-wall.an img { transition: transform .16s cubic-bezier(.23,1,.32,1); }
  .badge-wall.an img:hover { transform: translateY(-6px) rotate(var(--rot)) scale(1.05); }
}
.showcase .mini-badges img { opacity: 0; }
.showcase .mini-badges img:nth-child(odd) { --rot: -3deg; } .showcase .mini-badges img:nth-child(even) { --rot: 3deg; }
.showcase.an .mini-badges img { animation: aufnaehen .3s cubic-bezier(.2,.9,.3,1.25) forwards; }
.showcase.an .mini-badges img:nth-child(2) { animation-delay: .05s; } .showcase.an .mini-badges img:nth-child(3) { animation-delay: .1s; } .showcase.an .mini-badges img:nth-child(4) { animation-delay: .15s; } .showcase.an .mini-badges img:nth-child(5) { animation-delay: .2s; }
.timeline::before { transform: scaleY(0); transform-origin: top; }
.timeline.an::before { animation: binden-senkrecht .5s cubic-bezier(.23,1,.32,1) forwards; }
.timeline li::before { opacity: 0; transform: scale(.5); }
.timeline.an li::before { animation: punkt .3s cubic-bezier(.2,.9,.3,1.3) forwards; }
.timeline.an li:nth-child(2)::before { animation-delay: .06s; } .timeline.an li:nth-child(3)::before { animation-delay: .12s; } .timeline.an li:nth-child(4)::before { animation-delay: .18s; } .timeline.an li:nth-child(5)::before { animation-delay: .24s; } .timeline.an li:nth-child(6)::before { animation-delay: .3s; }
.ic .lebt { animation-play-state: paused; }
.frow.an .ic .lebt { animation-play-state: running; }
.ic .scan { stroke: var(--mat-deep); stroke-width: 2.2; animation: scan 2.4s ease-in-out infinite; }
.ic .glocke { transform-origin: 12px 5px; animation: laeuten 4s ease-in-out infinite; }
.ic .haken { stroke: var(--mat-deep); stroke-width: 2.4; stroke-dasharray: 12; stroke-dashoffset: 12; animation: abhaken 3.2s ease-out infinite; }
.ic .dreh { transform-origin: 12px 12px; animation: drehen 4s cubic-bezier(.6,0,.3,1) infinite; }
.ic .punkt { fill: var(--mat-deep); stroke: none; animation: tippen 1.4s ease-in-out infinite; }
.ic .punkt:nth-of-type(2) { animation-delay: .2s; } .ic .punkt:nth-of-type(3) { animation-delay: .4s; }
.ic .tatze { transform-origin: 12px 14px; animation: tapsen 3s ease-in-out infinite; }
.ic .klappe { transform-origin: 12px 7px; animation: klappen 4s ease-in-out infinite; }
.live-card.an .gurt i { animation: streifen .3s .3s forwards; } .live-card.an .gurt i:nth-child(2) { animation-delay: .38s; } .live-card.an .gurt i:nth-child(3) { animation-delay: .46s; }
.wz-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wasserzeichen { position: absolute; right: -6%; top: 50%; width: min(60vw, 560px); height: min(60vw, 560px); margin-top: calc(-1 * min(30vw, 280px)); fill: none; stroke: rgba(255,255,255,.28); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; animation: marke 40s ease-in-out infinite; will-change: transform; }
.team-grid { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .wasserzeichen { animation: none !important; }
}
@media (max-width: 700px) {
  .fgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }
  .fgroup > h3, .fgroup > .showcase { grid-column: 1 / -1; }
  .fgroup > h3 { margin-bottom: 0; }
  .fgroup > .showcase { margin: 4px 0 6px; }
  .frow { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; position: relative; }
  .frow .ic-box { width: 40px; height: 40px; }
  .frow { min-width: 0; }
  .frow h4 { font-size: 15px; line-height: 1.25; padding-right: 18px; overflow-wrap: anywhere; hyphens: auto; }
  .frow h4 .tag-neu { display: block; width: max-content; margin: 6px 0 0; top: 0; }
  .frow::after { content: "+"; position: absolute; right: 12px; top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink-3); line-height: 1; }
  .frow p { display: none; grid-column: auto; font-size: 15px; }
  .frow.offen { grid-column: 1 / -1; background: var(--mat-tint); border-color: transparent; }
  .frow.offen::after { content: "–"; }
  .frow.offen p { display: block; }
}
@media (max-width: 700px) {
  .faq-topic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
  .faq-topic h2 { grid-column: 1 / -1; margin-bottom: 2px; }
  .faq details { min-width: 0; border: 1px solid var(--line) !important; border-radius: 12px; background: var(--paper); padding: 12px 12px 12px; }
  .faq summary { padding: 0 20px 0 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
  .faq-side { order: 2; }
  .faq summary::after { right: 0; top: -6px; font-size: 22px; }
  .faq details[open] { grid-column: 1 / -1; background: var(--mat-tint); border-color: transparent !important; }
  .faq details p { padding: 10px 0 2px; font-size: 15px; }
  .faq details[open] summary::after { content: "–"; }
}
@media (max-width: 700px) {
  .beat { margin-bottom: 28px; }
  .beat h3 { font-size: 19px; margin-bottom: 10px; }
  .dialog { grid-template-columns: 1fr 1fr; gap: 10px; }
  .say { min-width: 0; padding: 12px 12px 12px; border-radius: 12px; cursor: pointer; }
  .say .who { padding-right: 18px; }
  .say::after { content: "+"; position: absolute; right: 12px; top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink-3); line-height: 1; }
  .say p { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .say.offen { grid-column: 1 / -1; }
  .say.offen p { display: block; -webkit-line-clamp: unset; }
  .say.offen::after { content: "–"; }

  .timeline { grid-template-columns: 1fr 1fr; gap: 10px; }
  .timeline::before { display: none; }
  .timeline li { min-width: 0; padding: 12px 30px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
  .timeline li::before { display: none; }
  .timeline li::after { content: "+"; position: absolute; right: 12px; top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink-3); line-height: 1; }
  .timeline li.jetzt { border-color: var(--belt-red); }
  .timeline b { font-size: 15px; line-height: 1.25; }
  .timeline p { display: none; font-size: 14.5px; }
  .timeline li.offen { grid-column: 1 / -1; background: var(--mat-tint); border-color: transparent; }
  .timeline li.offen p { display: block; }
  .timeline li.offen::after { content: "–"; }
  .story-quote { padding-top: 28px; }
}
.story-time { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
.beat-h { font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.2; }

/* ── Funktionen-Seite: zwei Spalten mit stehendem Verzeichnis ─────────
   Diese Regeln standen im Stylesheet unter „Funktionen" und sind mir am
   22.10.2026 mit weggefallen, als ich die Bereichskarten der Startseite
   entfernt habe — gelöscht wurde nach Kommentarüberschrift, und unter
   dieser stand beides. Ohne sie läuft das Inhaltsverzeichnis der
   Funktionsseite in voller Breite über den Inhalt statt als mitlaufende
   Spalte daneben. Die Startseite hat keinen `.features`-Abschnitt mehr,
   diese Regeln gelten also nur noch für funktionen.html. */
.features .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
.features-intro { position: sticky; top: 96px; align-self: start; }
.features-intro p { margin-top: 16px; color: var(--ink-2); }
.features-intro .btn { margin-top: 22px; }
.fgroup { margin-bottom: 44px; }
.fgroup:last-child { margin-bottom: 0; }
.fgroup h3 { padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.frow { padding: 18px 0; border-bottom: 1px solid var(--line); }
.frow h4 .tag-neu { margin-left: 8px; position: relative; top: -2px; }
.frow p { color: var(--ink-2); font-size: 16px; }

@media (max-width: 900px) {
  .features .wrap { grid-template-columns: 1fr; }
  .features-intro { position: static; }
}


/* Rechtstexte: Abschnitte klappen auf dem Handy zusammen. */
@media (max-width: 700px) {
  /* Vergleichstabelle als Karten */

  /* Wechsel-Paket: drei Kacheln */
  .switch .qa.offen { background: var(--mat-tint); border-color: transparent !important; }
  .switch .qa.offen p { display: block; }
  .switch .qa.offen::after { content: "–"; }

  /* Vorteile der Demo-Anfrage: zweispaltige Kacheln */
  /* Volle Breite, eine Kachel je Zeile. Zweispaltig brachen die
     Überschriften mitten im Wort um, und eine dritte Kachel stand allein
     in der letzten Zeile — das sah nach Versehen aus. Zugeklappt bleiben
     sie, aufgeklappt wird mit einem Tippen. */
  .benefits li.offen span { display: block; }
  .benefits li.offen::after { content: "–"; }

  /* FAQ auf der Startseite: zweispaltig wie auf der FAQ-Seite */
  .faq .wrap > div:last-child:not(:has(.faq-topic)) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Rechtliche Seiten: jeder Abschnitt eine Kachel */
  .legal-page .prose .abschnitt { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; position: relative; }
  .legal-page .prose .abschnitt h2 { border: 0; padding: 0 28px 0 0; margin: 0; font-size: 17px; cursor: pointer; }
  .legal-page .prose .abschnitt h2::after { content: "+"; position: absolute; right: 14px; top: 9px; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink-3); line-height: 1; }
  .legal-page .prose .abschnitt > :not(h2) { display: none; }
  .legal-page .prose .abschnitt.offen { background: var(--mat-tint); border-color: transparent; }
  .legal-page .prose .abschnitt.offen > :not(h2) { display: revert; }
  .legal-page .prose .abschnitt.offen h2 { margin-bottom: 10px; }
  .legal-page .prose .abschnitt.offen h2::after { content: "–"; }
  .legal-page .faq-side { order: 2; }
}

/* ── Auf dem Handy ist alles mittig ───────────────────────────────────
   Abschnittsköpfe waren zentriert, Inhaltsblöcke linksbündig. Auf einem
   breiten Schirm stehen sie nebeneinander und das liest sich als
   Ordnung; auf dem Handy, wo alles untereinander läuft, wird daraus ein
   Wechselspiel ohne Regel.

   Die Regel steht absichtlich umgekehrt: `main` wird komplett zentriert,
   zurückgenommen wird nur, wo eine Blockstruktur das verlangt. Der
   Versuch, stattdessen die betroffenen Blöcke einzeln aufzuzählen, ist
   am 23.10.2026 zweimal unvollständig geblieben — es gibt mehr
   Textblöcke, als man beim Durchsehen findet. */
@media (max-width: 860px) {
  main { text-align: center; }

  .hero-copy, .row-copy, .dunkel-copy, .demo-copy, .vergleich-copy,
  .more-item, .steps li, .wechsel-text, .trust-item { align-items: center; }
  .more-item { grid-template-columns: minmax(0, 1fr); }
  .tile, .step-no, .kicker { margin-inline: auto; }
  .hero-ctas, .vs, .abschluss-tat { justify-content: center; }
  .hero-copy > .btn, .row-copy > .btn, .demo-copy > .btn { align-self: center; }

  /* Aufzählungen mittig als Block, innen linksbündig. `inline-flex`
     schrumpft auf den Inhalt und bleibt in der Breite des
     Elternelements; `width: max-content` tut das nicht und riss
     waagerechten Überlauf auf. */
  .checks, .ticks, .row-copy ul, .wechsel-text ul, .vs ul,
  .sportarten, .produkt-liste, .stufen-liste, .tarif-liste {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    max-width: 100%; text-align: left; }
  .checks { flex-direction: row; flex-wrap: wrap; justify-content: center; }

  /* Was eigenes Layout mitbringt, bleibt linksbündig */
  .form-card, .field, .shot, .screen, .phones, .widget,
  .faq details, .prose, .legal-page { text-align: left; }
}

/* ── Zweispaltige Reste, die auf dem Handy nie umgebrochen sind ───────
   Beim vollständigen Durchgang am 23.10.2026 gefunden: Der Seitenkopf
   mit Beiwerk (`.wrap.split`) und der Produktausschnitt in den
   Funktionsgruppen (`.showcase`) blieben auf jeder Breite zweispaltig.
   Auf EquileBuddys Funktionsseite schob das die Abzeichen-Schilder
   143 Pixel über den Rand — die Seite liess sich dort waagerecht
   schieben. */
@media (max-width: 760px) {
  .page-head .wrap.split { grid-template-columns: minmax(0, 1fr); }
  .page-head .art { min-height: 0; }
  .showcase { grid-template-columns: minmax(0, 1fr); }
}

/* ── Themenseiten: Bärenspiel, Prüfungsprogramm, Gürtel-Reihenfolge ──
   (25.10.2026) Gemeinsame Bausteine der drei Seiten, aufgebaut aus den
   vorhandenen Zeilen, Kacheln und Prosa-Blöcken. */
.baer-kopf img { width: min(78%, 320px); margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(18,33,58,.22)); }
.row-h { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; }
.baer-kaempfe .more { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; margin-top: 0; }
@media (max-width: 600px) { .baer-kaempfe .more { grid-template-columns: 1fr; } }
.huelle { overflow-x: auto; max-width: 100%; }
.baer-tabelle, .grad-tabelle { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.baer-tabelle th, .baer-tabelle td, .grad-tabelle th, .grad-tabelle td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.baer-tabelle th, .grad-tabelle th { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.baer-tabelle td, .grad-tabelle td { color: var(--ink-2); }
.grad-tabelle td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.grad-tabelle { min-width: 34rem; }
.gurt { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.gurt i { width: 34px; height: 12px; border-radius: 3px; border: 1px solid rgba(18,33,58,.25); flex: none; background: var(--f1, #fff); }
.gurt i.zwei { background: linear-gradient(90deg, var(--f1) 0 50%, var(--f2) 50%); }
.gurt i.streifen { background: linear-gradient(180deg, var(--f1) 0 34%, var(--f2) 34% 66%, var(--f1) 66%); }
.quellen-liste { font-size: 14.5px; color: var(--ink-3); display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.quellen-liste a { color: var(--blue); overflow-wrap: anywhere; }
.hinweis-kasten { border-left: 3px solid var(--blue); background: var(--blue-lt); padding: 16px 20px; border-radius: 0 12px 12px 0; color: var(--ink-2); max-width: 68ch; }
.sport-sprung { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sport-sprung a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.sport-sprung a:hover { border-color: var(--ink); }
@media (max-width: 520px) { .footer .familie { gap: 10px 20px; } .footer .familie span { flex-basis: 100%; margin-right: 0; } }
.belt-stack.ohne-bar .belt-bar { display: none; }
.belt-stack .gelb-j   { background: #f5c518; background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.08) 5px 6px); }
.belt-stack .orange-j { background: #f08a24; background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.08) 5px 6px); }
.belt-stack .gruen-j  { background: #2e9e4f; background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.1) 5px 6px); }
.grad-inhalt { min-width: 46rem; font-size: 14.5px; }
.baer-start-bild { position: relative; display: block; width: min(70%, 300px); margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(18,33,58,.22)); }

/* Die Buddy-Familie (25.10.2026): eigenes Band über der Rechtszeile,
   volle Breite, Markup wie auf allen fünf Seiten, eigene Marke hervorgehoben. */
.footer .familie { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.footer .familie h4 { margin: 0; }
.footer .familie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.footer .familie a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); color: rgba(255,255,255,.82); line-height: 1.15; }
.footer .familie a:hover { border-color: rgba(255,255,255,.4); color: #fff; text-decoration: none; }
.footer .familie a[aria-current] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }
.footer .familie img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.footer .familie a:not(:has(img)) { padding-left: 14px; }
.footer .familie b { display: block; font-weight: 600; font-size: 14.5px; }
.footer .familie small { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); }
.footer .familie + .legal { margin-top: 32px; }
@media (max-width: 480px) { .footer .familie ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer .familie a { width: 100%; } }
/* Autoren der Ratgeberseiten (26.10.2026) */
.autoren-band { padding: 0 0 clamp(28px, 4vw, 44px); }
.autoren { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; gap: 8px; max-width: 68ch; }
.autoren-zeile { margin: 0; font-size: 15px; color: var(--ink-2); }
.autoren-zeile a { color: var(--ink); font-weight: 600; }
.autoren-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-3); }
.autoren-liste b { color: var(--ink-2); font-weight: 600; }
.ratgeber-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; }
@media (max-width: 700px) { .ratgeber-liste { grid-template-columns: 1fr; } }
.ratgeber-eintrag { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--ink); }
.ratgeber-eintrag:hover { border-color: var(--ink); }
.ratgeber-eintrag h2 { font-size: 21px; margin: 0; }
.ratgeber-eintrag p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.page-head h1 { hyphens: manual; overflow-wrap: break-word; }
.autoren-band > .wrap { max-width: 68ch; }
.foerder-hinweis { margin-top: 32px; }