/* ══════════════════════════════════════════════════════════════════════
   Buddy Solution · Website

   Neufassung vom 23.10.2026. Die Firmenseite stand als dunkle
   Tech-Startup-Seite neben vier hellen Produktseiten — und trug noch
   „Beta Q3 2026", „Launch Q1 2027" und zehn Early-Adopter-Plätze,
   während MatBuddy seit über einem Jahr im Echtbetrieb läuft.

   Jetzt dieselben Bauteile wie MatBuddy, ClubBuddy und RasenBuddy, in
   der Hausfarbe der Dachmarke (Blau, Verlauf nur im Logo).
   ══════════════════════════════════════════════════════════════════════ */

@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:    #0b1226;   /* 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; }
/* Das Zeichen ist querformatig (1,48:1) und bringt seinen eigenen
   Verlauf mit. Deshalb keine Kachel und kein Hintergrund darunter —
   die alte Fassung war ein 34×34-Quadrat mit blauem Verlauf, gebaut
   für das MatBuddy-Icon, das hier fälschlich stand. */
.logo-mark { width: 46px; height: 31px; flex: none; }
.logo-mark svg, .logo-mark img { 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; }
/* Die Leiste klappt frueher ins Menue als das uebrige Layout umbricht:
   Mit dem Punkt "Die Buddys" sind es sieben Eintraege plus Logo und Knopf,
   und bei 1020 Punkten brachen "Buddy Solution" und "Wie wir arbeiten"
   jeweils in zwei Zeilen. Die beiden anderen 960er-Regeln (Hero, Reihen)
   bleiben, wo sie sind. */
@media (max-width: 1080px) {
  .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; } }
/* Zwei Spalten lassen auf einem Telefon rund 120 Punkte für den Text —
   darin steht "MatBuddy führt einen ganzen Vereinsbetrieb" in Ein-Wort-
   Zeilen. Untereinander liest es sich. */
@media (max-width: 620px) { .trust-row { grid-template-columns: minmax(0, 1fr); } }

/* ── 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 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; } }


/* ── Produktlisten in den Funktionsreihen ────────────────────────────── */
.produkt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.produkt-liste li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow); }
.produkt-liste b { display: block; font-family: var(--display); font-size: 17px; }
.produkt-liste span { font-size: 15px; color: var(--ink-2); }

/* Das Team nutzt das Stufenraster, aber mit Initialen statt Nummern. */
.steps .step-no { font-size: 15px; letter-spacing: .02em; }
.sportarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sportarten li { background: rgba(255,255,255,.07); border-radius: 12px; padding: 14px 18px; }
.sportarten b { display: block; font-family: var(--display); font-size: 17px; color: #fff; }
.sportarten span { font-size: 14.5px; color: rgba(255,255,255,.62); }

/* ── 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; }
}

/* ── Produktfoto in der Programmreihe ────────────────────────────────────
   Die Dachseite zeigt je Programm die Sportart, nicht einen Bildschirm:
   Wer hier landet, sucht erst das richtige Programm. Die Fakten stehen
   darunter als Leiste, damit das Bild nicht allein für sich steht. */
.produkt-foto { position: relative; margin: 0; }
.produkt-foto img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; object-position: 50% 42%; border-radius: 22px; box-shadow: var(--shadow-lg); }
.produkt-marke { right: -4%; bottom: -14px; max-width: 250px; animation: none; }
.produkt-marke .badge { background: var(--white); color: var(--gruen); box-shadow: inset 0 0 0 1px var(--line); }
.row-visual .produkt-liste { position: relative; z-index: 1; margin: 30px 0 0; }

/* ── Kachelraster für den gemeinsamen Unterbau ───────────────────────── */
.bg-soft { background: var(--bg-soft); }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.kacheln article { background: var(--white); border-radius: var(--r-mat); padding: 26px 24px 24px; box-shadow: var(--shadow); }
.kacheln h3 { margin: 16px 0 8px; }
.kacheln p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }

/* ── Logo im Fuß ─────────────────────────────────────────────────────────
   Die helle Fassung, weil der Fuß dunkel ist. Breite begrenzt statt fest:
   auf dem Telefon ginge ein 260 px breites Logo über den Rand hinaus. */
.footer-logo { width: min(250px, 72%); aspect-ratio: 1232 / 300; height: auto; margin-bottom: 18px; }

@media (max-width: 760px) {
  .produkt-marke { right: 0; bottom: -10px; max-width: 220px; font-size: 13.5px; }
}

/* Der Vorher/Nachher-Kasten trägt hier zwei Listen statt Bild und Liste.
   Mit zwei gleichen Spalten blieben für jede Zeile keine fünf Wörter —
   deshalb bekommt der Vergleich die größere Hälfte. */
#geschichte .vergleich { grid-template-columns: 0.82fr 1.18fr; align-items: start; }
#geschichte .vs { gap: 26px 30px; }
#geschichte .vs h4 { margin: 0 0 12px; }
@media (max-width: 900px) {
  #geschichte .vergleich { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  #geschichte .vs { grid-template-columns: minmax(0, 1fr); }
}

/* ── Die Buddys als Familie ──────────────────────────────────────────────
   Der Abschnitt erklärt den Namen. Gezeigt wird nur, was es gibt: der Bär
   aus MatBuddy. Für die anderen Sportwelten ist offen, wie ihr Buddy
   aussieht, und erfundene Figuren wären ein Versprechen. */
.buddys { background: var(--blue-lt); }
.buddy-band {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .buddy-band { grid-template-columns: 1.1fr 0.9fr; } }
.buddy-copy h2 { margin-bottom: 14px; }
.buddy-copy > p { color: var(--ink-2); margin-bottom: 16px; }
.buddy-bild { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.buddy-bild img {
  width: min(300px, 72%); height: auto;
  /* Der Bär steht frei, ohne Rahmen und ohne Fläche: Er ist freigestellt,
     und ein Kasten darum nähme ihm genau das. */
  filter: drop-shadow(0 18px 24px rgba(15, 35, 71, .14));
}
.buddy-bild figcaption {
  font-size: 13px; color: var(--ink-3); text-align: center; max-width: 34ch; line-height: 1.5;
}

/* ── Die Buddy-Familie im Fuß ───────────────────────────────────────────
   Dasselbe Markup wie auf rasenbuddy.de, damit die fünf Seiten denselben
   Fuß tragen. Die eigene Seite trägt aria-current und wird nicht verlinkt
   wie die anderen. */
/* Die eigene Marke ist nicht ausgegraut, sie ist markiert: ein Punkt in
   der Hausfarbe davor, Schrift wie bei den anderen. Grau allein liest sich
   wie "abgeschaltet". */

/* 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%; } }