/* Produktseite „Abgehakt“ von Cardo Design. Tokens und Optik aus der App („Ruhiges Werkzeug“, app/src/web/app.css), nach oben erweitert.
   Eine Schrift (Public Sans, lokal), ein Akzent (Signalorange) nur für „Jetzt kostenlos anmelden“, Status als Wort auf getönter Fläche. Kein Reveal beim Scrollen. */

@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('/schrift/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url('/schrift/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url('/schrift/public-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  --farbe-papier: #f3f4f1;
  --farbe-papier-2: #e8eae5;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-2: #f6f7f4;
  --farbe-tinte: #161b22;
  --farbe-tinte-2: #4b535d;
  --farbe-tinte-3: #646c76;
  --farbe-linie: #dcdfd8;
  --farbe-linie-2: #e6e8e3;
  --farbe-rand: #868d95;
  --farbe-signal: #c2410c;
  --farbe-signal-2: #9a3412;
  --farbe-ok: #17663a;       --farbe-ok-hell: #e5f3ea;
  --farbe-info: #1d4f9c;     --farbe-info-hell: #e7eefa;
  --farbe-warn: #8a4f00;     --farbe-warn-hell: #fdf1dc;
  --farbe-rot: #b42318;      --farbe-rot-hell: #fdecea;
  --farbe-ki: #33468f;       --farbe-ki-hell: #ebeefa;
  --farbe-neutral-hell: #eceee9;
  --farbe-fokus: #1d4f9c;
  --schrift: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --groesse-00: 0.875rem;
  --groesse-0: 0.9375rem;
  --groesse-1: 1.0625rem;
  --groesse-2: 1.25rem;
  --groesse-3: 1.75rem;
  --radius: 10px;
  --radius-karte: 14px;
  --radius-blatt: 20px;
  --linie: 1px solid var(--farbe-linie);
  --schatten-1: 0 1px 2px rgb(22 27 34 / 0.06), 0 1px 3px rgb(22 27 34 / 0.04);
  --schatten-2: 0 2px 4px rgb(22 27 34 / 0.05), 0 6px 16px rgb(22 27 34 / 0.07);
  --schatten-signal: 0 1px 2px rgb(154 52 18 / 0.25), 0 4px 12px rgb(194 65 12 / 0.22);
  --dur-0: 80ms;
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --ease-aus: cubic-bezier(0.2, 0, 0, 1);
  --ease-ein: cubic-bezier(0.4, 0, 1, 1);
  --ease-beide: cubic-bezier(0.4, 0, 0.2, 1);
  --kopf: 56px;
  --rand: 16px;
  --inhalt: 1120px;
  --lese: 640px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--farbe-papier); color: var(--farbe-tinte); font-family: var(--schrift); font-size: var(--groesse-1); line-height: 1.45; }
:focus-visible { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
.sprite { position: absolute; }
.zahl { font-variant-numeric: tabular-nums; }
.neben { color: var(--farbe-tinte-2); font-size: var(--groesse-0); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.symbol { width: 20px; height: 20px; flex: none; }

h1 { font-size: clamp(2.125rem, 9vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: var(--groesse-3); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--groesse-2); font-weight: 700; line-height: 1.25; }
@media (min-width: 1024px) {
  h1 { font-size: clamp(2.75rem, 3.6vw, 4rem); }
  h2 { font-size: 2.5rem; }
}

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: var(--farbe-papier); border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-beide); }
.kopf.gescrollt { border-bottom-color: var(--farbe-linie); }
.kopf-innen { max-width: var(--inhalt); margin: 0 auto; height: 100%; padding: 0 var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.marke { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; min-height: 48px; align-self: center; }
.marke .marke-name { font-weight: 700; font-size: 1.125rem; line-height: 48px; }
.marke .marke-haken { width: 22px; height: 22px; flex: none; align-self: center; color: var(--farbe-signal); }
.marke .marke-von { color: var(--farbe-tinte-2); font-size: var(--groesse-00); display: inline-flex; align-items: baseline; gap: 5px; }
.marke .marke-von svg { height: 14px; width: 51px; flex: none; color: var(--farbe-tinte-2); transform: translateY(2px); }
.kopf-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopf-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .kopf-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 48px var(--rand); }
.abschnitt-innen { max-width: var(--inhalt); margin: 0 auto; }
.lese { max-width: var(--lese); }
.abschnitt h2 { margin-bottom: 16px; }
.abschnitt p + p { margin-top: 12px; }
@media (min-width: 768px) { .abschnitt { padding: 72px var(--rand); } }
@media (min-width: 1024px) { .abschnitt { padding: 72px var(--rand); } .abschnitt h2 { margin-bottom: 24px; } }

/* ---------- Knöpfe ---------- */
.knopf-haupt { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--radius); background: var(--farbe-signal); color: #fff; font-weight: 700; font-size: var(--groesse-1); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--schatten-signal); transition: background var(--dur-1) var(--ease-beide), transform var(--dur-1) var(--ease-beide); width: 100%; }
@media (hover: hover) { .knopf-haupt:hover { background: var(--farbe-signal-2); } }
.knopf-haupt:active { transform: translateY(1px); }
.knopf-haupt[disabled] { opacity: 0.7; cursor: default; }
@media (min-width: 640px) { .knopf-haupt { width: auto; min-width: 240px; } }
.knopf-leise { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--farbe-tinte-3); font-size: var(--groesse-00); font-weight: 600; cursor: pointer; border-radius: var(--radius); }
.knopf-leise svg { width: 16px; height: 16px; }
@media (hover: hover) { .knopf-leise:hover { color: var(--farbe-tinte); } }

/* ---------- 1 Einstieg ---------- */
.start { padding-top: 20px; }
/* Handy: Titel, drei echte Ausschnitte aus einem Ablauf, dann Knopf und Kostenzeile; alles im ersten Bildschirm (auch 320 × 568). */
.start-raster { display: grid; grid-template-areas: 'titel' 'bilder' 'aktion'; gap: 16px; max-width: var(--inhalt); margin: 0 auto; }
.start-titel { grid-area: titel; }
.start-absatz { text-wrap: balance; margin-top: 8px; font-size: var(--groesse-1); line-height: 1.4; color: var(--farbe-tinte-2); }
.start-aktion { grid-area: aktion; display: grid; gap: 8px; }
.start-bilder { grid-area: bilder; margin: 0; }
/* Werbefilm im Einstieg (ersetzt die drei Bildschirmfotos), 16:9, stumm in Schleife */
.start-film { grid-area: bilder; margin: 0; }
.film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-karte); box-shadow: var(--schatten-2); background: var(--farbe-papier); }

/* Drei Ausschnitte: Handy in einer Reihe, darunter die gemessene Wartezeit; Desktop leicht versetzt mit der Wartezeit zwischen Sprechen und Prüfen */
.lauf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; }
.lauf-schritt { min-width: 0; }
.lauf-bild { aspect-ratio: 3 / 2; }
.lauf-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lauf-wort { display: block; margin-top: 6px; font-weight: 600; font-size: var(--groesse-00); line-height: 1.25; }
.lauf-warten { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 6px; color: var(--farbe-tinte-2); font-size: var(--groesse-00); line-height: 1.3; }
.lauf-warten svg { flex: none; width: 16px; height: 16px; color: var(--farbe-tinte-3); }
.lauf-warten b { font-weight: 600; color: var(--farbe-tinte); white-space: nowrap; }

@media (min-width: 768px) {
  .lauf { column-gap: 16px; }
  .lauf-wort { font-size: var(--groesse-1); margin-top: 8px; }
}
@media (min-width: 1024px) {
  .start { padding-top: 56px; }
  .start-raster { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'titel aktion' 'bilder bilder'; column-gap: 48px; row-gap: 40px; align-items: end; }
  .start-titel { max-width: 760px; }
  .start-absatz { margin-top: 16px; font-size: var(--groesse-2); line-height: 1.45; }
  .start-aktion { justify-items: start; padding-bottom: 4px; }
  .lauf { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .lauf-warten { grid-column: 2; grid-row: 1; flex-direction: column; text-align: center; gap: 8px; align-self: center; margin-top: -24px; }
  .lauf-warten svg { width: 20px; height: 20px; }
  .lauf-warten b { display: block; margin-top: 2px; }
  .lauf-schritt:nth-child(3) { margin-top: 24px; }
  .lauf-schritt:nth-child(4) { margin-top: 48px; }
  .lauf .bild-karte { border-radius: var(--radius-karte); box-shadow: var(--schatten-2); }
}

/* Positionszeilen (Karte „Dein Testzugang“) in App-Optik */
.pos { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--farbe-linie-2); }
.pos > * { min-width: 0; }
.pos:first-child { border-top: 0; }
.pos .oz { color: var(--farbe-tinte-3); font-size: var(--groesse-00); line-height: 1.5; }
.pos .text { display: block; overflow-wrap: anywhere; font-weight: 600; font-size: var(--groesse-0); line-height: 1.35; }
.pos .gp { font-weight: 600; font-size: var(--groesse-0); line-height: 1.35; white-space: nowrap; }
@media (max-width: 389px) { .marke .marke-von { display: none; } }

/* ---------- Handy: kürzere Seite ---------- */
@media (max-width: 767px) {
  .abschnitt { padding: 36px var(--rand); }
  .abschnitt h2 { margin-bottom: 12px; }
  .abschnitt.start { padding-top: 16px; padding-bottom: 28px; }
}

/* ---------- 2 So einfach geht's / 5 Passt sich an: gleich große Handy-Bilder (3:4) im festen Raster; Handy: Zeilen mit Bild links ---------- */
.abschnitt-unter { margin: -6px 0 20px; color: var(--farbe-tinte-2); font-size: var(--groesse-2, 1.25rem); font-weight: 600; }
.schritte { list-style: none; padding: 0; display: grid; gap: 16px; counter-reset: schritt; }
.schritt { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: 'bild text'; gap: 16px; align-items: center; counter-increment: schritt; }
.schritt-text { grid-area: text; }
.schritt-text::before { content: counter(schritt, decimal-leading-zero); display: block; color: var(--farbe-tinte-3); font-weight: 600; font-size: var(--groesse-00); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ohne-nr .schritt-text::before { content: none; }
.schritt p { color: var(--farbe-tinte-2); margin-top: 2px; }
.bild-karte { background: var(--farbe-flaeche); border: var(--linie); border-radius: 8px; overflow: hidden; box-shadow: var(--schatten-1); }
.schritt .bild-karte { grid-area: bild; margin: 0; }
.bild-karte img { width: 100%; height: auto; }
.handy-bild { aspect-ratio: 3 / 4; }
.handy-bild img { height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 768px) {
  .schritte { gap: 20px; }
  .reihe-fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
  .reihe-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; max-width: 900px; }
  /* Text oben, Bilder beginnen alle auf einer Linie (Unterraster), egal wie lang der Text ist */
  /* Nummer+Überschrift, Text und Bild je eine eigene Zeile im Unterraster: alles beginnt bei allen Spalten auf derselben Höhe */
  .schritt { grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'titel' 'text' 'bild'; row-gap: 8px; align-items: start; }
  .schritt-text { display: contents; }
  .schritt-text::before { content: none; }
  .schritt h3 { grid-area: titel; }
  .schritt h3::before { content: counter(schritt, decimal-leading-zero); display: block; margin-bottom: 4px; color: var(--farbe-tinte-3); font-weight: 600; font-size: var(--groesse-00); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
  .ohne-nr .schritt h3::before { content: none; }
  .schritt p { grid-area: text; margin: 0 0 6px; }
  .schritt .bild-karte { border-radius: var(--radius-karte); box-shadow: var(--schatten-2); }
}
@media (min-width: 1024px) { .schritt h3 { font-size: 1.5rem; } .schritte { column-gap: 32px; } }

/* ---------- 3 So sieht es beim Kunden aus: zwei PDF-Seiten nebeneinander ---------- */
.pdf-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; }
.pdf-karte { margin: 0; }
.pdf-karte picture { display: block; border: var(--linie); border-radius: 6px; overflow: hidden; box-shadow: var(--schatten-2); background: #fff; }
.pdf-karte img { display: block; width: 100%; height: auto; }
.pdf-karte figcaption { margin-top: 10px; font-weight: 600; font-size: var(--groesse-00); color: var(--farbe-tinte); }
@media (min-width: 768px) { .pdf-reihe { gap: 32px; } .pdf-karte figcaption { font-size: var(--groesse-1); } }

/* ---------- 3 Die App denkt mit: Stichpunkte mit Symbol ---------- */
.abschnitt-eng { padding-top: 0; }
.abschnitt-eng > .abschnitt-innen { border-top: var(--linie); padding-top: 28px; }
.kurz-liste { list-style: none; padding: 0; display: grid; gap: 14px; }
.kurz-liste li { display: grid; align-content: start; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; font-weight: 600; }
.kurz-liste svg { width: 24px; height: 24px; color: var(--farbe-tinte-2); }
@media (min-width: 768px) {
  .kurz-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .kurz-liste li { grid-template-columns: minmax(0, 1fr); row-gap: 10px; align-items: start; font-weight: 600; font-size: var(--groesse-1); }
  .kurz-liste svg { width: 32px; height: 32px; }
}

/* ---------- 4 Fragen ---------- */
.fragen { max-width: var(--lese); border-top: var(--linie); }
.fragen details { border-bottom: var(--linie); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary svg { width: 22px; height: 22px; flex: none; color: var(--farbe-tinte-2); transition: transform var(--dur-2) var(--ease-beide); }
.fragen details[open] summary svg { transform: rotate(180deg); }
.fragen details p { padding: 0 0 16px; color: var(--farbe-tinte-2); max-width: 600px; }
.fragen details p a { display: inline-block; padding: 13px 4px; margin: -13px -4px; color: var(--farbe-tinte); font-weight: 600; }

/* ---------- 5 Ich und Testzugang ---------- */
.ich-block p + p { margin-top: 10px; }
.ich-block .unterschrift { margin-top: 12px; color: var(--farbe-tinte-2); line-height: 1.55; }
.ich-block .unterschrift b { color: var(--farbe-tinte); font-weight: 700; }
.ich-block .unterschrift a { display: inline-block; padding: 13px 6px; margin: -13px -6px; font-weight: 600; color: var(--farbe-tinte); white-space: nowrap; }
@media (min-width: 1024px) { .ich-block { font-size: var(--groesse-2); } }
.testen-raster { display: grid; gap: 20px; }
.testen-raster .formular { margin-top: 0; }
@media (min-width: 1024px) { .testen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; } }

.angebot-karte { background: var(--farbe-flaeche); border: var(--linie); border-radius: var(--radius-blatt); box-shadow: var(--schatten-2); padding: 14px 16px 10px; max-width: var(--lese); margin: 0 0 20px; }
.angebot-karte .gruppe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; margin: 0 -8px 2px; background: var(--farbe-papier-2); border-radius: 8px; font-weight: 700; }
.angebot-karte .pos { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px 0; }
.angebot-karte .pos .text { font-weight: 500; font-size: var(--groesse-1); }
.angebot-karte .summe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--farbe-tinte); margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: var(--groesse-2); }
.angebot-karte .summe-klein { color: var(--farbe-tinte-2); font-size: var(--groesse-00); font-weight: 600; text-align: right; margin-top: 2px; }
/* Kostenhinweis direkt über dem Absenden-Knopf: gut lesbar, kein Kleingedrucktes */
.kosten-hinweis { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 14px 16px; background: var(--farbe-ok-hell); border: 1px solid #b7d9c4; border-radius: var(--radius); color: var(--farbe-tinte); font-weight: 600; font-size: var(--groesse-1); line-height: 1.4; }
.kosten-hinweis svg { width: 24px; height: 24px; color: var(--farbe-ok); margin-top: 1px; }
.start-aktion .kosten-zeile { color: var(--farbe-tinte); font-weight: 600; }

/* Formular */
.formular { display: grid; gap: 14px; max-width: var(--lese); margin-top: 24px; }
.feld { display: grid; gap: 6px; }
.feld label, .feld .etikett { font-weight: 600; }
.feld .hilfe { color: var(--farbe-tinte-2); font-size: var(--groesse-0); }
.feld input, .feld select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); font-size: var(--groesse-1); color: var(--farbe-tinte); appearance: none; -webkit-appearance: none; }
.feld select { padding-right: 44px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234b535d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.feld input:focus, .feld select:focus { outline: 3px solid var(--farbe-fokus); outline-offset: 1px; border-color: var(--farbe-fokus); }
.feld.fehlerhaft input, .feld.fehlerhaft select { border-color: var(--farbe-rot); box-shadow: 0 0 0 1px var(--farbe-rot); }
.feld .fehler { display: none; color: var(--farbe-rot); font-size: var(--groesse-0); font-weight: 600; }
.feld.fehlerhaft .fehler { display: block; }
.feld[hidden] { display: none; }
.feld-chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.feld-chips .etikett { margin-bottom: 0; }
/* Fünf Auswahlknöpfe ohne einzelnen Nachzügler: Handy 3 + 2 (Sechser-Raster), 560–1023 px alle in einer Reihe (darüber steht das Formular halb so breit, dann wieder 3 + 2) */
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.chips label { grid-column: span 2; }
.chips label:nth-child(n+4) { grid-column: span 3; }
.chips span { width: 100%; justify-content: center; text-align: center; }
@media (min-width: 560px) and (max-width: 1023px) { .chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } .chips label, .chips label:nth-child(n+4) { grid-column: auto; } .chips span { padding: 0 6px; } }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--farbe-rand); border-radius: 999px; background: var(--farbe-flaeche); font-weight: 600; cursor: pointer; white-space: nowrap; }
.chips input:checked + span { background: var(--farbe-tinte); border-color: var(--farbe-tinte); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--farbe-fokus); outline-offset: 2px; }
.sammel { display: none; padding: 12px 14px; border-radius: var(--radius); background: var(--farbe-rot-hell); color: var(--farbe-rot); font-weight: 600; }
.sammel.da { display: block; }
.honig { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.unter-knopf { color: var(--farbe-tinte-2); font-size: var(--groesse-00); }
.unter-knopf a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
.erfolg { display: grid; gap: 12px; padding: 20px; background: var(--farbe-flaeche); border: var(--linie); border-radius: var(--radius-karte); box-shadow: var(--schatten-1); max-width: var(--lese); margin-top: 28px; }
.erfolg .haken { width: 44px; height: 44px; border-radius: 50%; background: var(--farbe-ok-hell); color: var(--farbe-ok); display: grid; place-items: center; }
.erfolg .haken svg { width: 24px; height: 24px; }
.erfolg h3 { font-size: var(--groesse-2); }
.meldung-fehler { padding: 12px 14px; border-radius: var(--radius); background: var(--farbe-rot-hell); color: var(--farbe-rot); font-weight: 600; }

/* ---------- Fuß ---------- */
.fuss { background: var(--farbe-papier-2); border-top: var(--linie); padding: 40px var(--rand) calc(40px + env(safe-area-inset-bottom)); font-size: var(--groesse-0); color: var(--farbe-tinte-2); }
.fuss-innen { max-width: var(--inhalt); margin: 0 auto; display: grid; gap: 10px; }
.fuss .produkt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--farbe-tinte); }
.fuss .produkt b { font-weight: 700; }
.fuss .produkt a { display: inline-flex; align-items: center; min-height: 44px; }
/* cardo-Credit Variante E (RJDesign/pruefung/credits3/bausteine, 10.10.2026): Schwung 30 px, DESIGN als echte Schrift → scharf */
.fuss .produkt a.cardo-marke { display: inline-grid; justify-items: center; gap: 5px; line-height: 1; text-decoration: none; transition: opacity .2s; }
.fuss .cardo-marke__zug { display: block; width: auto; height: 42px; }
.fuss .cardo-marke__zeile { display: flex; align-items: center; gap: 9px; margin-left: 46px; }
.fuss .cardo-marke__wort { font: 600 12.5px/1 var(--schrift, 'Public Sans', sans-serif); letter-spacing: .36em; margin-right: -.36em; color: #2F2C28; }
.fuss .cardo-marke__strich { display: block; width: 38px; height: 2px; }
@media (hover: hover) { .fuss .cardo-marke:hover { opacity: .8; } }
.fuss a { text-decoration: none; }
.fuss a:not(.logo):focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .fuss a:not(.logo):hover { text-decoration: underline; text-underline-offset: 3px; } }
.fuss .zeile { line-height: 2.4; }
/* Tippfläche mindestens 44 px hoch, ohne dass sich der Abstand ändert (Polster und negativer Außenabstand heben sich auf) */
.fuss .zeile a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
.fuss .trenner { margin: 0 6px; color: var(--farbe-tinte-3); }
.fuss .zeile { display: block; }

/* ---------- Feste Leiste (nur Handy) ---------- */
.leiste-fest { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom)); background: var(--farbe-papier); border-top: var(--linie); transform: translateY(110%); transition: transform var(--dur-3) var(--ease-aus); }
.leiste-fest.da { transform: none; }
.leiste-fest .knopf-haupt { width: 100%; }
@media (min-width: 768px) { .leiste-fest { display: none; } }
@media (prefers-reduced-motion: reduce) { .leiste-fest { transition: none; } }
.js body.leiste-platz { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .js body.leiste-platz { padding-bottom: 0; } }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.rechts { max-width: var(--lese); margin: 0 auto; padding: 32px var(--rand) 64px; }
.rechts h1 { font-size: var(--groesse-3); margin-bottom: 24px; }
.rechts h2 { font-size: var(--groesse-2); margin: 32px 0 10px; }
.rechts p, .rechts address, .rechts ul { margin: 0 0 12px; color: var(--farbe-tinte-2); font-style: normal; }
.rechts ul { padding-left: 20px; }
.rechts a { color: var(--farbe-tinte); }
.rechts .rechts-fuss { margin-top: 32px; }
.rechts .zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.rechts .zurueck:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .rechts .zurueck:hover { text-decoration: underline; text-underline-offset: 3px; } }
.rechts a[href^="tel:"], .fuss a[href^="tel:"] { white-space: nowrap; }