/**
 * Copyright (c) 2026 RuppiLab - Peer Drescher
 * KlubHerz — die Produktseite.
 *
 * Ein eigenes Stylesheet und nicht `app.css`. Der Grund ist nicht
 * Geschmack: Die Anwendung hat vier Farbwelten, einen Rechte-Cache und
 * ein Rasterlayout mit Navigationsspalte — davon braucht eine
 * Marketingseite nichts, und alles davon müsste sie mitladen.
 *
 * Was bleibt, ist die MARKE: dieselben Farben, dieselben Abstände,
 * dieselbe Schrift. Wer von der Startseite in die Anwendung wechselt,
 * soll nicht das Gefühl haben, das Produkt gewechselt zu haben.
 *
 * ── Warum kein Framework ────────────────────────────────────────────────
 *
 * Dieselbe Entscheidung wie überall sonst in diesem Projekt. Eine
 * Vereinsseite, die 300 kB CSS lädt, damit ein Vorstand auf einem
 * Landtelefon liest, was das Produkt kostet, hat ihre Aufgabe verfehlt,
 * bevor sie angefangen hat. Diese Datei ist unter 12 kB und lädt keine
 * einzige fremde Schrift.
 */

:root {
  /* Aus marke/LIESMICH.md — drei Abstufungen Rot, nicht eine. Das
     Markenrot ist als kleine Schrift auf Weiß mit 4,74:1 grenzwertig. */
  --navy: #050E1D;
  --navy-weich: #0d1930;
  --rot: #E5111F;
  --rot-text: #C20E19;
  --rot-hell: #FF6069;

  --grund: #ffffff;
  --flaeche: #f6f7f9;
  --flaeche-2: #eef1f5;
  --schrift: #14181f;
  --leise: #55606d;
  --rand: #dfe4ea;

  --breite: 68rem;
  --radius: 14px;
  --radius-klein: 9px;
  --schatten: 0 1px 2px rgba(5, 14, 29, .06), 0 8px 24px rgba(5, 14, 29, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0b0f16;
    --flaeche: #121822;
    --flaeche-2: #18202c;
    --schrift: #e9edf3;
    --leise: #9aa6b4;
    --rand: #232c39;
    --rot-text: var(--rot-hell);
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/*
   `hidden` verliert gegen jede `display`-Regel — und `nav.haupt` ist ein
   Flex-Container. In der Browserprüfung zu 0.29.0 stand deshalb auf dem
   Telefon das komplette Menü als schmale Spalte neben dem Menüknopf, mit
   „Funktion / en" mitten im Wort umgebrochen. Der Knopf tat scheinbar
   nichts.

   Eine Zeile, die das für die ganze Datei erledigt. `!important` ist hier
   ausnahmsweise richtig: `hidden` ist eine Aussage über die Existenz des
   Elements, keine über sein Aussehen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Eine lange URL oder Mailadresse darf die Seite bei 320 Pixeln nicht
     zur Seite schieben (WCAG 1.4.10). Für Überschriften und Knöpfe wird
     das weiter unten wieder zurückgenommen — dort bricht `anywhere`
     mitten im Wort. */
  overflow-wrap: anywhere;
}
h1, h2, h3, .knopf, button, .marke { overflow-wrap: break-word; hyphens: auto; }

/* --- Sprungmarke ------------------------------------------------------- */
.ueberspringen {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-klein) 0;
}
.ueberspringen:focus { left: 0; }

/* --- Grundbausteine ---------------------------------------------------- */
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 1.2rem; }
.eng   { max-width: 46rem; }

a { color: var(--rot-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
  border-radius: 4px;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .7rem; }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.05rem); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .8rem; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .4rem; }
p  { margin: 0 0 1rem; }
.leise { color: var(--leise); }
.klein { font-size: .93rem; }
.gross { font-size: 1.12rem; }

/* --- Kopf -------------------------------------------------------------- */
header.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rand);
}
header.kopf .innen {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 62px;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--schrift);
  text-decoration: none;
  flex: none;
}
.marke svg { width: 26px; height: 26px; color: var(--schrift); }
.marke .kh-herz { fill: var(--rot); }

nav.haupt { margin-left: auto; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
nav.haupt a {
  color: var(--schrift);
  text-decoration: none;
  padding: .5rem .7rem;
  border-radius: var(--radius-klein);
  font-size: .97rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
nav.haupt a:hover { background: var(--flaeche); }
nav.haupt a[aria-current="page"] {
  color: var(--rot-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--rot);
}

/* --- Knöpfe ------------------------------------------------------------ */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.3rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.knopf:hover { filter: brightness(1.25); }
.knopf:active { transform: translateY(1px); }
.knopf.zweit {
  background: transparent;
  color: var(--schrift);
  border-color: var(--rand);
}
.knopf.zweit:hover { background: var(--flaeche); filter: none; }
@media (prefers-color-scheme: dark) {
  .knopf { background: #fff; color: var(--navy); border-color: #fff; }
  .knopf:hover { filter: brightness(.9); }
  .knopf.zweit { background: transparent; color: var(--schrift); border-color: var(--rand); }
}

/* --- Bühne ------------------------------------------------------------- */
.buehne {
  background:
    radial-gradient(1200px 420px at 80% -12%, rgba(229, 17, 31, .16), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-weich) 100%);
  color: #f2f5f9;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
}
.buehne h1 { color: #fff; }
.buehne .vorspann {
  font-size: clamp(1.05rem, 2.3vw, 1.28rem);
  color: #c8d2df;
  max-width: 40rem;
  margin-bottom: 1.8rem;
}
.buehne .knopfreihe { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.buehne .knopf { background: #fff; color: var(--navy); border-color: #fff; }
.buehne .knopf.zweit { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.buehne .knopf.zweit:hover { background: rgba(255,255,255,.1); filter: none; }
.buehne .unterzeile { color: #9fb0c4; font-size: .94rem; }
.augenbraue {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rot-hell);
  margin-bottom: .9rem;
}

/* --- Abschnitte -------------------------------------------------------- */
section { padding: clamp(2.6rem, 6vw, 4.4rem) 0; }
section.getoent { background: var(--flaeche); }
.abschnittskopf { max-width: 42rem; margin-bottom: 2rem; }
.abschnittskopf h2 { position: relative; padding-bottom: .55rem; }
.abschnittskopf h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2.6rem; height: 3px;
  background: var(--rot);
  border-radius: 2px;
}

/* --- Raster ------------------------------------------------------------ */
/*
   `minmax(20rem, 1fr)` und nicht `minmax(min(20rem, 100%), 1fr)` war der
   erste Wurf — und bei 320 Pixeln Breite schob er die ganze Seite um
   19 Pixel zur Seite (WCAG 1.4.10, gefunden in der Browserprüfung zu
   0.29.0).

   Der Grund ist unauffällig: 20rem SIND 320 Pixel. Der Inhaltsbereich
   hat aber links und rechts je 1,2rem Abstand, also bleiben 281. Eine
   feste Mindestbreite in `minmax` schrumpft nicht — die Spalte bleibt
   320 breit, und der Rest der Seite rutscht mit.

   `min(20rem, 100%)` heißt: so breit wie gewünscht, aber nie breiter als
   der Platz. Das ist das einzige Rastermuster, das bei 320 Pixeln hält.
*/
.raster { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr)); }
.raster.zwei  { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.raster.vier  { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.karte {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--schatten);
}
section.getoent .karte { background: var(--grund); }
.karte h3 { display: flex; align-items: center; gap: .55rem; }
.karte p:last-child { margin-bottom: 0; }
.karte a.mehr { font-weight: 600; text-decoration: none; }
.karte a.mehr:hover { text-decoration: underline; }

.symbol {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--flaeche-2);
  font-size: 1.05rem;
}

/* --- Zahlenreihe ------------------------------------------------------- */
.zahlen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.zahl { text-align: center; }
.zahl b { display: block; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; }
.zahl span { color: var(--leise); font-size: .93rem; }

/* --- Listen ------------------------------------------------------------ */
ul.haken { list-style: none; padding: 0; margin: 0; }
ul.haken li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .55rem;
}
ul.haken li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--rot-text);
  font-weight: 700;
}
ul.strich { list-style: none; padding: 0; margin: 0; }
ul.strich li {
  border-top: 1px solid var(--rand);
  padding: .8rem 0;
}
ul.strich li:first-child { border-top: 0; }

/* --- Zitat / Haltung --------------------------------------------------- */
blockquote.haltung {
  margin: 0;
  padding: 1.4rem 1.6rem;
  border-left: 4px solid var(--rot);
  background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.1rem;
}
blockquote.haltung p:last-child { margin-bottom: 0; }

/* --- Bilder ------------------------------------------------------------ */
figure.schirm { margin: 0; }
figure.schirm img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
figure.schirm figcaption {
  color: var(--leise);
  font-size: .9rem;
  margin-top: .55rem;
}

/* --- Tabelle ----------------------------------------------------------- */
.tabellenrahmen { overflow-x: auto; }
.tabellenrahmen:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
table.vergleich {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
}
table.vergleich th, table.vergleich td {
  text-align: left;
  padding: .8rem .7rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
table.vergleich thead th { font-size: .9rem; color: var(--leise); font-weight: 600; }
table.vergleich tbody th { font-weight: 600; }
table.vergleich td.ja  { color: var(--rot-text); font-weight: 600; }

/* --- Preise ------------------------------------------------------------ */
.tarif { display: flex; flex-direction: column; }
.tarif .preis { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: .3rem 0 .1rem; }
.tarif .preis small { font-size: .95rem; font-weight: 400; color: var(--leise); }
.tarif ul { margin-top: 1rem; flex: 1; }
.tarif .knopf { margin-top: 1.2rem; }
.tarif.hervor { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot), var(--schatten); }
.wimpel {
  display: inline-block;
  background: var(--rot);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 5px;
  margin-bottom: .5rem;
}

/* --- Formulare ---------------------------------------------------------
   Bis 0.32.0 gab es auf den Produktseiten keine, und deshalb auch keine
   Regeln dafuer. Mit der Kuendigungs- und der Widerrufsseite kamen zwei
   dazu — und ohne diese Regeln standen Beschriftung und Feld nebeneinander
   in einer Zeile, wie 1996. Die Angaben stimmten, das Formular sah aus wie
   ein Versehen, und ein Formular, das nach Versehen aussieht, fuellt
   niemand aus. */
.feld { margin-bottom: 1.1rem; }
.feld label,
.feld > legend {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  max-width: 32rem;
  font: inherit;
  color: var(--schrift);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: .55rem .7rem;
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 1px;
  border-color: var(--rot);
}
.feld .hinweis {
  color: var(--leise);
  font-size: .88rem;
  margin-top: .3rem;
  max-width: 40rem;
}
/* `hidden` verliert sonst gegen `display:block` — derselbe Fehler wie beim
   Menuekopf in 0.29.0, und er faellt genauso spaet auf. */
.feld[hidden] { display: none; }

form .knopfreihe { margin-top: 1.4rem; }

/* Die Fehlermeldung eines Formulars. Rot reicht nicht: Wer keine Farben
   unterscheidet, braucht den Rahmen. */
p.warnung {
  border-left: 4px solid var(--rot);
  background: var(--flaeche);
  padding: .7rem .9rem;
  border-radius: var(--radius-klein);
  margin-top: 1rem;
}

/* Vorformatiertes — Mustertexte zum Abschreiben. */
pre.karte {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.55;
  overflow-x: auto;
}

/* --- Fragen und Antworten ---------------------------------------------- */
details.faq {
  border-bottom: 1px solid var(--rand);
  padding: .3rem 0;
}
details.faq summary {
  cursor: pointer;
  padding: .85rem 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--rot-text); font-size: 1.4rem; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq > *:not(summary) { padding-bottom: .7rem; }

/* --- Abschluss --------------------------------------------------------- */
.abschluss {
  background: var(--navy);
  color: #f2f5f9;
  text-align: center;
  padding: clamp(2.8rem, 7vw, 4.5rem) 0;
}
.abschluss h2 { color: #fff; }
.abschluss p { color: #c8d2df; max-width: 34rem; margin-left: auto; margin-right: auto; }
.abschluss .knopf { background: #fff; color: var(--navy); border-color: #fff; }

/* --- Fuß --------------------------------------------------------------- */
footer.fuss {
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  padding: 2.4rem 0 1.6rem;
  font-size: .95rem;
}
footer.fuss .spalten {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin-bottom: 1.6rem;
}
footer.fuss h2.fussspalte { font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
footer.fuss ul { list-style: none; padding: 0; margin: 0; }
footer.fuss li { margin-bottom: .1rem; }
/*
   Mindestens 24 Pixel hoch (WCAG 2.5.8). Die Ausnahme für Links „im
   Fließtext" gilt hier nicht: Das sind Listeneinträge, keine Wörter in
   einem Satz. Ohne diese Zeile waren sie 18 Pixel hoch — gefunden in der
   Browserprüfung zu 0.29.0.
*/
footer.fuss a {
  color: var(--schrift);
  text-decoration: none;
  display: inline-block;
  min-height: 24px;
  padding: .18rem 0;
}
footer.fuss a:hover { text-decoration: underline; }
footer.fuss .unten {
  border-top: 1px solid var(--rand);
  padding-top: 1.1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--leise);
}

/* --- Fließtext auf den Unterseiten ------------------------------------- */
.fliess { max-width: 44rem; }
.fliess h2 { margin-top: 2.4rem; }
.fliess h3 { margin-top: 1.6rem; }
.fliess > p:first-of-type { font-size: 1.1rem; color: var(--leise); }

/* --- Schmale Bildschirme ----------------------------------------------- */
@media (max-width: 699px) {
  /* Das Menü kommt unter den Kopf und nicht neben ihn. Sechs Punkte
     nebeneinander in 390 Pixeln sind sechs Punkte, die keiner trifft. */
  header.kopf .innen { flex-wrap: wrap; gap: .6rem; padding-top: .5rem; padding-bottom: .5rem; }
  .menuknopf { margin-left: auto; padding: 0 1rem; }
  nav.haupt {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: .1rem;
    padding-bottom: .4rem;
  }
  nav.haupt a { padding: .6rem .7rem; }
  nav.haupt a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--rot); }

  .buehne .knopfreihe .knopf { width: 100%; }
}