/* Studiumtools – Vergleichsportal für Uni-Apps.
   Salbeigrün, weiße Flächen, viel Luft. Eine App ist eine ZEILE, die
   aufklappt: Was man auf einen Blick braucht (Logo, Name, ein Satz, Preis,
   Bewertung), steht in der Zeile; Beschreibung, Fakten, Punkte und Quellen
   einen Tipp tiefer.
   Dieselben Lehren wie die statischen Seiten von SemBan (`public/seo.css`):
   keine fremden Schriften oder Skripte (Schrift und Logos liegen auf diesem
   Server), Trefferflächen von 44 px unter 640 px, `:hover` nur mit Zeiger,
   Umbruchgrenzen in `em`, genau EINE Sekundärfarbe. Die Kontraste rechnet
   `pruefe.mjs` nach. */
@font-face {
  font-family: 'DM Serif Display';
  src: url('/schriften/dm-serif-display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --papier: #f6f7f2;       /* Seitengrund */
  --weiss: #ffffff;        /* Flächen */
  --tinte: #1c2a20;        /* Überschriften und Fließtext */
  --zweit: #4d5a51;        /* die EINE Sekundärfarbe */
  --marke: #2e5e3e;        /* Knöpfe, Links, aktive Pille */
  --marke-dunkel: #224a30; /* Knopf beim Überfahren */
  --banner-hell: #3d6e4b;  /* hellstes Grün im Banner – Weiß darauf muss tragen */
  --toenung: #e9efe6;      /* Salbei hell: Kopfbereiche, Kreise */
  --salbei: #dbe6d5;       /* Salbei kräftiger: Verlauf */
  --gold: #f1cf73;         /* nur FLÄCHE (Unsere Wahl), Schrift darauf --tinte */
  --chip: #eef2eb;         /* Grund der Merkmal-Chips */
  --chip-gruen: #dcebd9;   /* Grund des Chips „Kostenlos“ */
  --linie: #e2e8de;        /* Haarlinien, nie Umriss eines Bedienelements */
  --umriss: #6a776d;       /* Umriss von Bedienelementen */
  --minus: #a1301c;        /* Zeichen „–“ an einer Schwäche */
  --stern: #8a5a00;        /* Stern der App-Store-Bewertung (Zeichen neben Text) */
  --f0: #2e5e3e; --f1: #1f4e8c; --f2: #7a2e5c; --f3: #8a4b08; --f4: #34495e; --f5: #5b3a96;
  --serif: 'DM Serif Display', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --schatten: 0 1px 2px rgba(28, 42, 32, 0.05), 0 8px 24px rgba(28, 42, 32, 0.07);
  --rund: 18px;
  color-scheme: only light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.mit-vergleichsleiste { padding-bottom: 5rem; }
.wrap { max-width: 74rem; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 40em) { .wrap { padding-inline: 24px; } }
a { color: var(--marke); text-underline-offset: 0.15em; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.zeichen { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.zeichen.klein { width: 1em; height: 1em; }
.zeichen.gross { width: 26px; height: 26px; }
.klein { font-size: 0.875rem; color: var(--zweit); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--tinte); letter-spacing: 0; }
h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 12px; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; margin: 0 0 10px; }
h3 { font-size: 1.2rem; line-height: 1.2; margin: 0; }
p { margin: 0 0 14px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
/* Der Pfeil eines Aufklappers dreht sich mit – Form statt Farbe sagt „offen“. */
.pfeil-unten { width: 20px; height: 20px; color: var(--zweit); transition: transform 0.15s ease; }
details[open] > summary .pfeil-unten { transform: rotate(180deg); }

/* ---------- Kopf ---------- */
header.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); position: relative; z-index: 15; }
header.kopf .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 10px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--tinte); text-decoration: none; min-width: 0; margin-right: auto; }
.marke svg { display: block; flex-shrink: 0; }
.marke span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marke b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
.marke small { font-size: 0.8125rem; color: var(--zweit); }
nav.haupt { display: none; gap: 4px 24px; }
nav.haupt a { color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 0.9375rem; display: inline-block; padding-block: 6px; }
nav.haupt a[aria-current='page'] { color: var(--marke); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
/* Das Menü hängt am KOPF, nicht am Knopf: Bricht der Knopf bei großer Schrift
   in eine eigene Zeile um, bliebe ein am Knopf verankertes Feld links aus dem Bild. */
details.menue { position: static; }
details.menue > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--umriss); border-radius: 12px; font-weight: 700; font-size: 0.9375rem;
}
details.menue > summary::before { content: ''; width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; box-shadow: inset 0 4px 0 -2px var(--weiss), inset 0 6px 0 -2px currentColor; }
details.menue nav { position: absolute; right: 16px; left: max(16px, calc(100% - 16px - 18rem)); top: calc(100% - 4px); background: var(--weiss); border-radius: 16px; box-shadow: var(--schatten), 0 0 0 1px var(--linie); padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); }
details.menue nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--tinte); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 60em) {
  nav.haupt { display: flex; }
  details.menue { display: none; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%;
  background: var(--marke); color: var(--weiss); text-decoration: none; text-align: center;
  padding: 11px 20px; border-radius: 12px; border: 0; font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer;
  box-shadow: 0 6px 16px rgba(46, 94, 62, 0.22);
}
.knopf.gross { padding: 14px 24px; font-size: 1.0625rem; }
.knopf.hell { background: var(--weiss); color: var(--marke); box-shadow: none; }
.nebenknopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%;
  background: var(--weiss); color: var(--tinte); border: 1px solid var(--umriss); border-radius: 12px;
  padding: 9px 16px; font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf, .nebenknopf { hyphens: auto; overflow-wrap: anywhere; }
.textknopf { display: inline-flex; align-items: center; gap: 12px; color: var(--tinte); font-weight: 700; text-decoration: none; min-height: 44px; }
.textknopf .kreis { width: 44px; height: 44px; border-radius: 50%; background: var(--weiss); display: grid; place-items: center; color: var(--marke); box-shadow: var(--schatten); }

/* ---------- Startseite: Kopfbereich ---------- */
.held { background: linear-gradient(115deg, var(--toenung) 0%, var(--salbei) 100%); padding: 28px 0 76px; overflow: hidden; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.held .vorspann { font-size: 1.0625rem; color: var(--tinte); max-width: 34rem; }
.held-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 18px 0 0; }
/* Am Handy kein Bild: Es kostete dort einen ganzen Bildschirm vor der ersten Auskunft. */
.held-bild { display: none; }
@media (min-width: 56em) {
  .held { padding: 60px 0 108px; }
  .held .vorspann { font-size: 1.1875rem; }
  .held-raster { grid-template-columns: 1.05fr 1fr; gap: 40px; }
  .held-bild { display: block; width: 100%; max-width: 34rem; justify-self: center; }
}

/* Zahlen, die in den Kopfbereich ragen. Am Handy eine Reihe aus vier. */
ul.kennzahlen { list-style: none; padding: 0; margin: -52px 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; }
ul.kennzahlen li { background: var(--weiss); border-radius: 14px; box-shadow: var(--schatten); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
ul.kennzahlen .zeichen { display: none; }
ul.kennzahlen b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
ul.kennzahlen span { font-size: 0.75rem; line-height: 1.25; color: var(--zweit); hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 22em) { ul.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48em) {
  ul.kennzahlen { gap: 18px; margin-bottom: 12px; }
  ul.kennzahlen li { border-radius: 18px; padding: 18px 12px; }
  ul.kennzahlen .zeichen { display: block; color: var(--marke); width: 26px; height: 26px; margin-bottom: 6px; }
  ul.kennzahlen b { font-size: 2rem; }
  ul.kennzahlen span { font-size: 0.875rem; }
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { background: linear-gradient(115deg, var(--toenung) 0%, var(--salbei) 100%); padding: 18px 0 22px; margin-bottom: 18px; }
.seitenkopf h1 { max-width: 48rem; }
.seitenkopf .vorspann { font-size: 1rem; max-width: 46rem; margin-bottom: 8px; color: var(--tinte); }
@media (min-width: 40em) { .seitenkopf { padding: 30px 0 34px; margin-bottom: 24px; } .seitenkopf .vorspann { font-size: 1.125rem; } }
.krumen { font-size: 0.875rem; color: var(--zweit); margin-bottom: 6px; }
.krumen a { color: var(--zweit); }
.stand { font-size: 0.8125rem; color: var(--zweit); margin: 0; }
.stand.mitte { text-align: center; margin: 4px 0 0; }

/* ---------- Kurz gesagt, Offenlegung, Hinweis ---------- */
/* Der Satz, den Suchmaschinen und KI-Antworten herausziehen. Er trägt die
   Offenlegung IN sich („unser eigenes Produkt“) – ein Zitat nimmt die Zeile
   über der Liste nicht mit (`pruefe.mjs`). */
p.kurz { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); padding: 16px 18px; margin: 0 auto 14px; max-width: 56rem; }
/* Offenlegung direkt über der Liste, in der SemBan steht: leise, aber vor
   der ersten App und in normaler Lesegröße – nicht im Kleingedruckten. */
.transparenz, .vertrauen { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; color: var(--zweit); margin: 0 0 14px; max-width: 56rem; }
.transparenz .zeichen, .vertrauen .zeichen { margin-top: 0.2em; color: var(--marke); }
.transparenz span, .vertrauen span { min-width: 0; }
details.hinweis { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); margin: 0 0 18px; }
details.hinweis > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 44px; }
details.hinweis > summary h2 { font-size: 1.25rem; margin: 0; min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
details.hinweis > p { padding: 0 18px; }
details.hinweis > p.quellen { padding-bottom: 16px; }

/* ---------- Abschnitte ---------- */
section.extra { margin-top: 44px; }
section.extra.erster { margin-top: 28px; }
@media (min-width: 40em) { section.extra { margin-top: 56px; } }
.titelzeile { text-align: center; margin: 0 auto 18px; max-width: 40rem; }
.titelzeile h2 { margin-bottom: 4px; }
.titelzeile p { color: var(--zweit); margin: 6px 0 0; font-size: 0.9375rem; }

/* ---------- Kacheln (Kategorien) ---------- */
/* Am Handy eine Liste aus Zeilen, am Rechner ein Raster. */
.kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 40em) { .kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 14px; } }
.kachel {
  display: flex; align-items: center; gap: 14px;
  background: var(--weiss); border-radius: 14px; padding: 10px 14px; box-shadow: var(--schatten);
  color: var(--tinte); text-decoration: none; min-width: 0; min-height: 60px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kachel > .zeichen:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--toenung); color: var(--marke); }
.kachel-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.kachel-titel { font-weight: 700; hyphens: auto; overflow-wrap: anywhere; }
.kachel-unter { font-size: 0.8125rem; color: var(--zweit); }
.kachel-pfeil { width: 18px; height: 18px; color: var(--zweit); }
@media (min-width: 40em) { .kachel { border-radius: var(--rund); padding: 16px 18px; } }

/* ---------- Warum Studiumtools ---------- */
.gruende { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.gruende-spalte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 14px; }
.gruende-bild { display: none; }
.grund { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.grund .zeichen { grid-row: span 2; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--salbei); color: var(--marke); }
.grund h3 { font-size: 1.1rem; margin-top: 2px; }
.grund p { margin: 2px 0 0; color: var(--zweit); font-size: 0.9375rem; }
@media (min-width: 56em) {
  .gruende { grid-template-columns: 1fr 240px 1fr; gap: 36px; }
  .gruende-spalte { grid-template-columns: 1fr; gap: 36px; }
  .gruende-bild { display: block; width: 240px; }
  .grund .zeichen { width: 52px; height: 52px; padding: 13px; }
}

/* ---------- Banner ---------- */
.band { padding: 44px 0 0; }
.banner { background: linear-gradient(115deg, var(--marke) 0%, var(--banner-hell) 100%); color: var(--weiss); border-radius: 22px; padding: clamp(20px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.banner h2 { color: var(--weiss); }
.banner p { color: var(--weiss); }
.banner-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 10px; }
.banner-karte { background: var(--weiss); color: var(--tinte); border-radius: 14px; padding: 12px 14px; text-decoration: none; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.banner-karte > span { display: flex; flex-direction: column; min-width: 0; }
.banner-karte > span > span { font-size: 0.875rem; color: var(--zweit); }
@media (min-width: 56em) { .banner { grid-template-columns: 0.9fr 1.1fr; } }

/* ---------- Unsere Wahl (Favoriten) ---------- */
.favoriten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 48em) { .favoriten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 14px; } }
.favorit { background: var(--weiss); border-radius: 14px; box-shadow: var(--schatten); color: var(--tinte); text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; transition: transform 0.15s ease; }
.favorit-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.favorit-kat { font-size: 0.75rem; font-weight: 700; color: var(--zweit); }
.favorit-name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.favorit-urteil { font-size: 0.875rem; color: var(--zweit); }

/* ---------- Pillen ---------- */
nav.pillen { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 0 14px; }
nav.pillen::-webkit-scrollbar { display: none; }
nav.pillen a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--weiss); color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 0.9375rem; box-shadow: 0 0 0 1px var(--linie); white-space: nowrap; }
nav.pillen a[aria-current='page'] { background: var(--marke); color: var(--weiss); box-shadow: none; }
@media (min-width: 64em) { nav.pillen { flex-wrap: wrap; overflow: visible; } }

/* ---------- Vergleich: Filter und Ergebnisse ---------- */
.vergleich { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 64em) {
  .vergleich { grid-template-columns: 16rem minmax(0, 1fr); gap: 28px; align-items: start; }
  .filter { position: sticky; top: 16px; }
  .filterkasten > summary { pointer-events: none; }
}
details.filterkasten { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); }
.filterkasten > summary { font-weight: 700; padding: 12px 16px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.filterkasten > summary::after { content: '+'; margin-left: auto; font-size: 1.25rem; line-height: 1; color: var(--zweit); }
.filterkasten[open] > summary::after { content: '–'; }
@media (min-width: 64em) { .filterkasten > summary::after { display: none; } }
.filterinhalt { padding: 0 16px 16px; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
legend { font-weight: 700; font-size: 0.875rem; padding: 0; margin-bottom: 4px; }
fieldset label { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 0.9375rem; cursor: pointer; }
/* Der Text steht in einem eigenen Kasten: Als nackter Textknoten wäre er ein
   anonymes Flex-Kind mit `min-width: auto` und schöbe auf 320 px bei 200 %
   Schrift die Seite auf (SemBan, „Schrumpfen, Umbrechen, Überlaufen“). */
fieldset label span { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
input[type='checkbox'] { width: 20px; height: 20px; margin: 0; accent-color: var(--marke); flex-shrink: 0; }
.werkzeugleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.anzahl { margin: 0; font-weight: 700; }
.sortierung { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.9375rem; max-width: 100%; }
select { font: inherit; font-size: 0.9375rem; padding: 8px 12px; border: 1px solid var(--umriss); border-radius: 12px; background: var(--weiss); color: var(--tinte); min-height: 40px; max-width: 100%; min-width: 0; }
.leer { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); padding: 18px; }

/* ---------- Eine App: Zeile, die aufklappt ---------- */
section.kategorie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
/* Auch am Rechner EINE Spalte: Zeilen untereinander lassen sich vergleichen,
   zwei schmale Spalten nebeneinander nicht (der Name brach dort um). */
article.app { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); scroll-margin-top: 16px; min-width: 0; }
article.app.sieger { box-shadow: 0 0 0 2px var(--gold), var(--schatten); }
.app-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 14px 14px 10px; }
.app-zeile > .pfeil-unten { grid-column: 3; grid-row: 1; margin-top: 4px; }
.app-logo { position: relative; grid-row: 1 / span 2; }
.logo { display: block; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px var(--linie); flex-shrink: 0; object-fit: cover; background: var(--weiss); }
/* Wo kein Logo vorliegt, ein Monogramm. Schrift in PIXELN: zwei Zeichen in
   einem festen Feld, rein schmückend. */
.monogramm { display: grid; place-items: center; color: var(--weiss); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; box-shadow: none; }
.monogramm.f0 { background: var(--f0); } .monogramm.f1 { background: var(--f1); } .monogramm.f2 { background: var(--f2); }
.monogramm.f3 { background: var(--f3); } .monogramm.f4 { background: var(--f4); } .monogramm.f5 { background: var(--f5); }
.rang {
  position: absolute; top: -7px; left: -7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 800; background: var(--weiss); color: var(--tinte); box-shadow: 0 0 0 1px var(--umriss); z-index: 1;
}
.rang.eins { background: var(--gold); box-shadow: 0 0 0 2px var(--weiss); }
.app-titel { display: flex; flex-direction: column; min-width: 0; }
.app-ueber { font-size: 0.75rem; color: var(--zweit); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.wahl { background: var(--gold); color: var(--tinte); font-weight: 800; padding: 0 8px; border-radius: 999px; }
.app-titel h3 { font-size: 1.25rem; }
.urteil { margin: 2px 0 0; color: var(--zweit); font-size: 0.9375rem; line-height: 1.45; }
.eigenes {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; vertical-align: 0.25em;
  background: var(--tinte); color: var(--weiss); white-space: nowrap;
}
.eck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 0.8125rem; color: var(--zweit); }
.preis { background: var(--chip); color: var(--tinte); font-size: 0.8125rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.preis.p0 { background: var(--chip-gruen); }
.sterne { display: inline-flex; align-items: center; gap: 3px; color: var(--tinte); font-weight: 700; }
.sterne .stern { width: 14px; height: 14px; color: var(--stern); fill: currentColor; stroke: none; }
.geraete { min-width: 0; }
/* Die Punkte stehen in der Zeile: rechts neben dem Namen, am Handy darunter. */
.punkte { grid-column: 2 / span 2; display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.punkte b { font-size: 1.35rem; font-family: var(--serif); font-weight: 400; white-space: nowrap; line-height: 1; }
.punkte b small { font-size: 0.8125rem; color: var(--zweit); font-family: var(--sans); }
/* Der Balken ist ein SVG und kein `style="width: …"`: Die CSP erlaubt keine
   Stil-Attribute (`style-src 'self'`), Präsentations-Attribute eines SVG schon. */
.balken { display: block; flex: 1 1 auto; min-width: 0; max-width: 12rem; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.balken .rinne { fill: var(--linie); }
.balken .wert { fill: var(--marke); }
.app-mehr { padding: 0 14px 6px; border-top: 1px solid var(--linie); margin-inline: 14px; padding-inline: 0; padding-top: 12px; }
.beschreibung { margin: 0 0 8px; }
.gut-fuer { margin: 0 0 10px; font-size: 0.9375rem; }
.app-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; padding: 0 14px 12px; }
.vergleichen { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; font-size: 0.875rem; cursor: pointer; margin-right: auto; }
.website { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.mehr-titel { font-weight: 700; margin: 14px 0 4px; font-size: 0.9375rem; }
ul.abzeichen { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
ul.abzeichen li { background: var(--chip); color: var(--tinte); border-radius: 999px; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; }
dl.fakten { margin: 6px 0 0; }
dl.fakten > div { padding: 7px 0; border-bottom: 1px solid var(--linie); }
dl.fakten dt { font-size: 0.8125rem; color: var(--zweit); }
dl.fakten dd { margin: 0; font-size: 0.9375rem; }
@media (min-width: 30em) {
  dl.fakten > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; }
}
ul.plusminus { list-style: none; padding: 0; margin: 12px 0 0; }
ul.plusminus li { padding-left: 22px; position: relative; margin-bottom: 6px; font-size: 0.9375rem; }
ul.plusminus li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
ul.plusminus li.plus::before { content: '+'; color: var(--marke); }
ul.plusminus li.minus::before { content: '–'; color: var(--minus); }
.quellen { font-size: 0.8125rem; color: var(--zweit); margin: 12px 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--linie); }
th { font-size: 0.8125rem; color: var(--zweit); font-weight: 600; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
table.punktetabelle { font-size: 0.8125rem; }
table.punktetabelle td:first-child, table.punktetabelle th:first-child { padding-left: 0; }
/* `anywhere`, nicht `break-word`: Nur so sinkt die Mindestbreite einer
   Tabellenzelle – mit `break-word` lief die Punktetabelle auf 320 px bei
   200 % Schrift bis x = 425. */
table.punktetabelle td, table.punktetabelle th { overflow-wrap: anywhere; }
@media (min-width: 40em) {
  .app-zeile { padding: 16px 18px 10px; column-gap: 16px; }
  .logo { width: 56px; height: 56px; border-radius: 14px; }
  .monogramm { font-size: 20px; }
  .app-mehr { margin-inline: 18px; }
  .app-fuss { padding: 0 18px 14px; }
}
/* Bei großer Schrift auf schmalem Schirm (320 px bei 200 % sind 10 em) steht
   das Logo ÜBER dem Text: Daneben blieben dem Satz zwei Wörter je Zeile, und
   „Aufgabenliste“ brach mitten im Wort. */
@media (max-width: 24em) {
  .app-zeile { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .app-logo { grid-row: auto; grid-column: 1; justify-self: start; }
  .app-zeile > .pfeil-unten { grid-column: 2; grid-row: 1; }
  .app-titel { grid-column: 1 / span 2; }
  .punkte { grid-column: 1 / span 2; }
  .favorit { flex-wrap: wrap; }
  .favorit-text { flex-basis: 12em; }
}
/* Ab genug Breite stehen die Punkte rechts neben dem Namen. */
@media (min-width: 34em) {
  .app-zeile:has(.punkte) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .punkte { grid-column: 3; grid-row: 1; margin-top: 2px; flex-direction: column; align-items: flex-end; gap: 6px; }
  .punkte .balken { width: 5.5rem; }
  .app-zeile:has(.punkte) > .pfeil-unten { grid-column: 4; }
}

/* ---------- Tabelle iPad & Mac ---------- */
table.geraete { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); overflow: hidden; }
table.geraete th, table.geraete td { padding-inline: 14px; }
table.geraete td:first-child a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
table.geraete .logo { width: 28px; height: 28px; border-radius: 8px; }
table.geraete .monogramm { font-size: 11px; }
@media (max-width: 30em) {
  table.geraete thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.geraete, table.geraete tbody, table.geraete tr, table.geraete td { display: block; }
  table.geraete tr { padding: 10px 14px; border-bottom: 1px solid var(--linie); }
  table.geraete td { border: 0; padding: 0; }
  table.geraete td[data-label]::before { content: attr(data-label) ': '; color: var(--zweit); }
}

/* ---------- Rabatte ---------- */
.rabattkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 10px; }
.rabattkarte { display: flex; gap: 12px; align-items: flex-start; background: var(--weiss); border-radius: 14px; box-shadow: var(--schatten); padding: 14px; color: var(--tinte); text-decoration: none; min-width: 0; }
.rabattkarte .logo, .banner-karte .logo { width: 40px; height: 40px; border-radius: 10px; }
.rabattkarte .monogramm, .banner-karte .monogramm { font-size: 15px; }
.rabattkarte > span:last-child { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.rabattkarte > span:last-child span { font-size: 0.9375rem; color: var(--zweit); }

/* ---------- Ratgeber ---------- */
ol.ratgeber { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 10px; counter-reset: punkt; }
ol.ratgeber li { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); padding: 14px 16px; counter-increment: punkt; }
/* Die Nummer steht absolut, nicht als Flex-Kind: Der Text daneben wäre sonst ein
   anonymes Flex-Kind und bräche bei 200 % Schrift nicht um (320 px: bis x = 352). */
ol.ratgeber h3 { font-size: 1.1rem; position: relative; padding-left: 34px; hyphens: auto; overflow-wrap: anywhere; }
ol.ratgeber h3::before { content: counter(punkt); position: absolute; left: 0; top: -1px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 800; color: var(--marke); background: var(--toenung); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
ol.ratgeber p { margin: 6px 0 0; color: var(--zweit); font-size: 0.9375rem; }

/* ---------- Fragen ---------- */
.fragen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 52rem; margin: 0 auto; }
details.frage { background: var(--weiss); border-radius: 14px; box-shadow: var(--schatten); }
details.frage > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 44px; }
details.frage h3 { font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1.35; min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
details.frage > p { margin: 0; padding: 0 16px 14px; color: var(--zweit); font-size: 0.9375rem; }

/* ---------- Vergleichsleiste und Dialog ---------- */
.vergleichsleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--weiss); box-shadow: 0 -6px 24px rgba(28, 42, 32, 0.12); padding-bottom: env(safe-area-inset-bottom); }
.vergleichsleiste .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-block: 10px; }
.vergleichsleiste p { margin: 0 auto 0 0; font-weight: 700; }
dialog.vergleichsdialog { width: min(66rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 22px; padding: 0; color: var(--tinte); }
dialog.vergleichsdialog::backdrop { background: rgba(28, 42, 32, 0.5); }
.dialogkopf { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--weiss); border-bottom: 1px solid var(--linie); padding: 12px 20px; }
.dialogkopf h2 { margin: 0; font-size: 1.5rem; }
.dialogkopf form { margin: 0; }
.dialoginhalt { overflow-x: auto; padding: 4px 20px 20px; }
table.vergleichstabelle th[scope='row'] { width: 8rem; color: var(--zweit); }
table.vergleichstabelle thead th { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--tinte); }
table.vergleichstabelle td, table.vergleichstabelle thead th { min-width: 12rem; }
table.vergleichstabelle ul { margin: 0; padding-left: 1.1em; }

/* ---------- Textseiten (Methodik, Rechtliches) ---------- */
.textseite { max-width: 50rem; padding-top: 28px; }
.textseite h2 { font-size: 1.6rem; margin-top: 32px; }
ol.kriterien { padding-left: 1.3em; }
ol.kriterien li { margin-bottom: 14px; }
ol.kriterien li::marker { font-weight: 700; }
.gewicht { font-weight: 700; white-space: nowrap; }
.stufen { font-size: 0.9375rem; color: var(--zweit); margin: 4px 0 0; }
.vorspann { color: var(--zweit); }

/* ---------- Fuß ---------- */
footer.fuss { margin-top: 64px; padding: 36px 0 40px; background: var(--weiss); border-top: 1px solid var(--linie); }
.fuss-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 40px; margin-bottom: 22px; }
@media (min-width: 48em) { .fuss-spalten { grid-template-columns: 1.2fr 1fr 1fr; } }
.fuss-marke p { color: var(--zweit); font-size: 0.9375rem; margin: 12px 0 0; }
footer.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-content: start; }
.fuss-titel { width: 100%; margin: 0 0 4px; font-weight: 700; }
footer.fuss nav a { display: inline-block; color: var(--tinte); font-size: 0.9375rem; }
.fuss-hinweis { font-size: 0.8125rem; color: var(--zweit); margin: 0; max-width: 52rem; border-top: 1px solid var(--linie); padding-top: 16px; }
.fuss-hinweis a { padding-block: 5px; }

/* Überfahren NUR mit einem Zeiger – auf einem Telefon bliebe `:hover` nach
   dem Antippen stehen (SemBan, `check:hover`). */
@media (hover: hover) {
  .knopf:hover { background: var(--marke-dunkel); }
  .knopf.hell:hover { background: var(--toenung); }
  .nebenknopf:hover { border-color: var(--tinte); }
  .kachel:hover, .favorit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28, 42, 32, 0.12); }
  .app-zeile:hover h3, details.frage > summary:hover h3 { color: var(--marke); }
  .website:hover { text-decoration: underline; }
  nav.haupt a:hover, footer.fuss nav a:hover { color: var(--marke); }
  nav.pillen a:hover { box-shadow: 0 0 0 1px var(--marke); }
  details.menue nav a:hover { background: var(--toenung); }
}

/* Trefferflächen am Handy: 44 px, in PIXELN – ein Finger wächst nicht mit
   der Grundschrift (SemBan, siebenunddreißigste Strava-Runde). */
@media (max-width: 639.98px) {
  footer.fuss nav a, .krumen a { min-height: 44px; min-width: 44px; padding-block: 11px; line-height: 22px; }
  .marke { min-height: 44px; }
  .knopf, .nebenknopf, select, .vergleichen, .website, fieldset label, nav.pillen a { min-height: 44px; }
  .filterkasten > summary { min-height: 44px; }
  main p a, main li a, main td a, main dd a, .quellen a { padding-block: 6px; }
  .transparenz a, .vertrauen a { padding-block: 12px; }
  .fuss-hinweis a { padding-block: 16px; }
}