/* NOTENFANG – gemeinsames Stylesheet
   Keine externen Schriften, keine Drittanbieter, keine Skripte.
   Farbwelt und Formensprache übernommen von der bisherigen Startseite. */

:root {
  --text:   #14233f;
  --muted:  #617089;
  --bg:     #f5f7fb;
  --card:   #ffffff;
  --sunk:   #eef1f7;
  --line:   rgba(20, 35, 63, .10);
  --accent: #4b41c9;
  --schatten:      0 12px 35px rgba(20, 35, 63, .07);
  --schatten-tief: 0 24px 60px rgba(20, 35, 63, .12);
  --radius: 22px;
  --breite: 1120px;
  --verlauf: linear-gradient(90deg, #1877d2 0%, #7654d8 42%, #e83f9b 62%, #f28a28 86%, #f4b83d 100%);
  --ja:     #1b8a57;
  --eigen-feld: rgba(75, 65, 201, .06);
  --eigen-kopf: rgba(75, 65, 201, .12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:  #eef1f7;
    --muted: #9aa6bb;
    --bg:    #0d1220;
    --card:  #151c2e;
    --sunk:  #111726;
    --line:  rgba(255, 255, 255, .10);
    --accent:#a9a2ff;
    --schatten:      0 12px 35px rgba(0, 0, 0, .35);
    --schatten-tief: 0 24px 60px rgba(0, 0, 0, .45);
    --ja:     #5fd6a0;
    --eigen-feld: rgba(169, 162, 255, .10);
    --eigen-kopf: rgba(169, 162, 255, .18);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(var(--breite), calc(100% - 44px)); margin-inline: auto; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.kopf-inner { display: flex; align-items: center; gap: 22px; height: 62px; }

.marke { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: 0 0 auto; }
.marke img { width: 30px; height: 30px; border-radius: 8px; }
.marke span { font-weight: 700; letter-spacing: .04em; font-size: 16px; }

.hauptnav { margin-left: auto; }
.hauptnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.hauptnav a {
  display: block; padding: 7px 12px; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-size: 15px;
}
.hauptnav a:hover { background: var(--sunk); color: var(--text); }
.hauptnav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---------- Typografie ---------- */

h1, h2, h3 { letter-spacing: -.03em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(38px, 6vw, 62px); letter-spacing: -.045em; }
h2 { font-size: clamp(27px, 3.6vw, 38px); }
h3 { font-size: 19px; letter-spacing: -.01em; }
p  { margin: 0; }

.verlauf {
  background: var(--verlauf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}

.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 62ch; }

.klein { font-size: 15px; color: var(--muted); }

/* ---------- Abschnitte ---------- */

.abschnitt { padding: clamp(56px, 8vw, 96px) 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--line); }
.abschnitt-kopf { max-width: 68ch; margin-bottom: clamp(30px, 4vw, 48px); }
.abschnitt-kopf p { margin-top: 16px; }

/* ---------- Held ---------- */

.held { padding: clamp(50px, 7vw, 84px) 0 clamp(40px, 5vw, 60px); }
.held-raster { display: grid; gap: clamp(34px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .held-raster { grid-template-columns: 1fr 1.08fr; } }
.held h1 { margin-bottom: 22px; }
.held .lead { margin-bottom: 28px; }

.dreiklang { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.dreiklang li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.dreiklang .nr {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%;
  background: var(--sunk); color: var(--muted);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
  align-self: center;
}

/* ---------- Geräterahmen für Screenshots ---------- */

.geraet {
  border-radius: 20px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--schatten-tief);
}
.geraet img { width: 100%; }
figure { margin: 0; }
figcaption { margin-top: 14px; font-size: 14.5px; color: var(--muted); }

/* ---------- Karten ---------- */

.karten { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.karte {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--schatten);
}
.karte h3 { margin-bottom: 9px; }
.karte p { color: var(--muted); font-size: 15.5px; }

.punkt { width: 30px; height: 4px; border-radius: 3px; background: var(--verlauf); margin-bottom: 18px; }

/* ---------- Wechselnde Bild/Text-Reihen ---------- */

.reihe { display: grid; gap: clamp(28px, 4.5vw, 54px); align-items: center; }
@media (min-width: 900px) {
  .reihe { grid-template-columns: 1fr 1.15fr; }
  .reihe.gedreht .reihe-text { order: 2; }
}
.reihe + .reihe { margin-top: clamp(50px, 7vw, 86px); }
.reihe-text h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 14px; }
.reihe-text p { color: var(--muted); }
.reihe-text p + p { margin-top: 13px; }

/* ---------- Liste mit Haken ---------- */

.haken { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.haken li { padding-left: 27px; position: relative; color: var(--muted); font-size: 15.5px; }
.haken li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 9px; height: 5px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

/* ---------- Hinweiskarte / Status ---------- */

.hinweis {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px; box-shadow: var(--schatten);
}
.hinweis strong { display: block; margin-bottom: 6px; }
.hinweis p { color: var(--muted); font-size: 15.5px; }

.status-band {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line);
  font-size: 14px; color: var(--muted); margin-bottom: 20px;
}
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: #f28a28; flex: 0 0 auto; }

/* ---------- Abgrenzung „ist / ist nicht" ---------- */

.gegenueber { display: grid; gap: 18px; }
@media (min-width: 760px) { .gegenueber { grid-template-columns: 1fr 1fr; } }
.gegenueber ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.gegenueber li { color: var(--muted); font-size: 15.5px; padding-left: 24px; position: relative; }
.ist li::before      { content: "+"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.ist-nicht li::before{ content: "–"; position: absolute; left: 4px; color: var(--muted); font-weight: 700; }

/* ---------- Bezugsblock ---------- */

.bezug { text-align: center; }
.bezug h2 { margin-bottom: 16px; }
.bezug .lead { margin-inline: auto; }
.bezug-karte {
  margin: 30px auto 0; max-width: 560px; padding: 30px 28px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.bezug-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 20px; font-size: 14.5px; color: var(--muted); }

/* ---------- FAQ ---------- */

.faq { max-width: 78ch; }
.faq h3 { margin: 34px 0 8px; }
.faq h3:first-of-type { margin-top: 0; }
.faq p { color: var(--muted); }
.faq p + p { margin-top: 9px; }

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: 74ch; }
.rechtstext h2 { font-size: 21px; margin: 36px 0 10px; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p, .rechtstext li { color: var(--muted); }
.rechtstext p + p { margin-top: 12px; }
.rechtstext .stand { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; }

/* ---------- Fußzeile ---------- */

.fuss { border-top: 1px solid var(--line); padding: 44px 0 52px; margin-top: clamp(40px, 6vw, 70px); }
.fuss-raster { display: grid; gap: 30px; }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h4 { margin: 0 0 12px; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss a { color: var(--muted); text-decoration: none; font-size: 15px; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss-unten { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Kopfzeile auf schmalen Bildschirmen ----------
   Sechs Navigationspunkte passen neben der Marke nicht in eine Zeile. Statt sie
   umbrechen zu lassen (die Kopfzeile würde überlaufen), rückt die Navigation in
   eine eigene, waagerecht scrollbare Zeile. Ohne Skript, ohne Aufklappmenü. */

@media (max-width: 760px) {
  .kopf-inner { flex-wrap: wrap; height: auto; gap: 0; padding-top: 11px; }
  .marke { width: 100%; padding-bottom: 10px; }
  .hauptnav {
    margin-left: 0; width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hauptnav::-webkit-scrollbar { display: none; }
  .hauptnav ul { flex-wrap: nowrap; padding-bottom: 9px; }
  .hauptnav a { white-space: nowrap; padding-inline: 10px; }
}

@media (max-width: 420px) {
  .wrap { width: min(var(--breite), calc(100% - 32px)); }
  .karte { padding: 22px 20px; }
  .hinweis, .bezug-karte { padding: 22px 20px; }
}

/* Preisaussage im Held-Bereich der Startseite. */
.preis { font-size: clamp(17px, 2vw, 19px); margin-bottom: 24px; color: var(--muted); }
.preis strong { color: var(--text); font-weight: 700; }

/* Handlungsaufforderung zum App Store. */
.cta {
  display: inline-block; padding: 13px 24px; border-radius: 13px;
  background: var(--text); color: var(--bg);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.cta:hover { opacity: .88; }

/* Offizielles Apple-Badge „Laden im App Store". Beide SVG-Dateien sind unverändert
   so eingebunden, wie Apple sie bereitstellt – keine Farbanpassung, kein Nachbau.
   Feste Höhe bei automatischer Breite: Das Seitenverhältnis (2,99:1) bleibt damit
   immer erhalten, das Badge wird nie verzerrt. 48 px liegen über Apples Mindesthöhe
   von 40 px und entsprechen der optischen Höhe der bisherigen Schaltfläche.

   Hell- und Dunkelmodus: Apple stellt für dunkle Hintergründe eine eigene weiße
   Variante bereit. Beide liegen als <img> in EINEM Link, sichtbar ist immer genau
   eine. Bewusst per CSS umgeschaltet und nicht per <picture>: Ein <picture>-Element
   wählt die Quelle nur beim Laden aus und wechselt sie nicht mehr, wenn das
   Farbschema während des Besuchs umgestellt wird – dann stünde das weiße Badge auf
   hellem Grund. Die CSS-Variante wechselt sofort mit.

   Das dunkle Badge trägt zusätzlich style="display:none" direkt im Markup. Grund:
   Sollte diese Datei einmal fehlen oder veraltet aus einem Cache kommen, würden
   sonst BEIDE Badges gleichzeitig erscheinen. Das Inline-display schließt das aus,
   deshalb braucht die Dunkelmodus-Regel unten !important, um es zu überstimmen. */
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { display: block; height: 48px; width: auto; }
.store-badge .badge-dunkel { display: none; }
.store-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 9px; }

@media (prefers-color-scheme: dark) {
  .store-badge .badge-hell { display: none; }
  .store-badge .badge-dunkel { display: block !important; }
}

.store-reihe { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- Ratgeber ---------- */

/* Plus-/Minus-Listen auch ausserhalb von .gegenueber (dort bereits definiert) */
.karte .ist, .karte .ist-nicht,
.wrap > .ist-nicht { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.karte .ist li, .karte .ist-nicht li,
.wrap > .ist-nicht li { color: var(--muted); font-size: 15px; padding-left: 22px; position: relative; }

/* Tagesablauf des Praxisbeispiels */
/* Fließtext des Ratgebers: die Website setzt Absatzabstände sonst über
   Kontextklassen, der Ratgeber braucht sie für schlichte <p>. */
.ratgeber .wrap > p + p { margin-top: 14px; }

.ablauf { margin: 22px 0 0; display: grid; }
.ablauf-tag {
  display: grid; gap: 4px 20px; padding: 15px 0;
  border-top: 1px solid var(--line);
}
.ablauf-tag:first-child { border-top: 0; padding-top: 0; }
.ablauf-tag dt { font-weight: 600; }
.ablauf-tag dt span { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.ablauf-tag dd { margin: 0; color: var(--muted); font-size: 15.5px; }
@media (min-width: 620px) { .ablauf-tag { grid-template-columns: 148px 1fr; align-items: baseline; } }

/* Im unteren Abschnitt ist die Karte mittig gesetzt. */
.bezug-karte .store-reihe { justify-content: center; }

/* ---------------------------------------------------------------------------
   Vergleichstabelle (vergleich.html)

   Auf schmalen Displays waagerecht scrollbar – dasselbe Muster, das die
   Hauptnavigation oben schon verwendet. Ohne Skript, ohne Aufklappmenü.
   Die erste Spalte bleibt beim Scrollen stehen, sonst verliert man die Zeile.
--------------------------------------------------------------------------- */
.tabelle-rahmen {
  /* position: relative ist hier kein Gestaltungsmittel, sondern notwendig:
     Die Tabelle enthaelt in jeder Symbolzelle eine .sr-only-Spanne, und .sr-only
     ist absolut positioniert. Ohne positionierten Vorfahren ist der Bezugsrahmen
     dieser Spannen der Viewport - sie entkommen dadurch dem overflow-Clipping
     dieses Containers und ziehen die Scrollbreite des GESAMTEN Dokuments auf
     (gemessen bis zu 658 px Ueberlauf bei 320 px Viewport). Mit relative ist
     dieser Container ihr Bezugsrahmen, und overflow-x greift auch fuer sie. */
  position: relative;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--schatten);
}
.tabelle-rahmen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Merkmalsmatrix: Zeilen sind Merkmale, Spalten die Apps.
   Erste Spalte bleibt stehen, die eigene App ist dezent unterlegt. */
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1010px; font-size: .94rem; }
.matrix th, .matrix td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.matrix thead th {
  position: sticky; top: 0; z-index: 2; background: var(--sunk);
  font-size: .82rem; letter-spacing: .02em; color: var(--muted); font-weight: 600;
  text-align: center; white-space: nowrap; padding: 13px 10px;
}
.matrix thead th:first-child { z-index: 3; left: 0; text-align: left; }
.matrix tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  text-align: left; font-weight: 500; white-space: normal;
  min-width: 236px; width: 236px; box-shadow: 1px 0 0 var(--line);
}
.matrix tbody td { text-align: center; white-space: nowrap; font-size: 1.02rem; }
.matrix tr.gruppe th {
  position: static; background: var(--sunk); text-align: left; box-shadow: none;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 9px 14px; width: auto; min-width: 0;
}
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix .eigen { background: var(--eigen-feld); }
.matrix thead th.eigen { background: var(--eigen-kopf); color: var(--text); box-shadow: inset 0 3px 0 var(--accent); }
.matrix .spalten-zusatz {
  display: block; margin-top: 3px; font-size: .67rem; font-weight: 500;
  letter-spacing: .02em; text-transform: none; color: var(--muted);
}
.matrix .ja    { color: var(--ja); font-weight: 700; }
.matrix .nein  { color: var(--text); font-weight: 600; }
.matrix .offen { color: var(--muted); }
.matrix .ja .klein { color: var(--muted); font-weight: 500; font-size: .7rem; }
.matrix tr.preis td, .matrix tr.textzeile td { white-space: normal; font-size: .84rem; color: var(--muted); min-width: 132px; }
.matrix tr.preis th[scope="row"], .matrix tr.textzeile th[scope="row"] { font-weight: 600; }

/* Legende über der Tabelle */
.legende { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .86rem; color: var(--muted); margin-bottom: 15px; }
.legende .sym { display: inline-block; width: 1.2em; font-weight: 700; }
.legende .sym.ja { color: var(--ja); }
.legende .sym.nein { color: var(--text); }
.legende-text { max-width: 78ch; margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.legende-text + .tabelle-rahmen { margin-top: 16px; }

.held-schmal { padding-bottom: clamp(22px, 3vw, 32px); }
.abschnitt-eng { padding-top: clamp(26px, 3vw, 36px); }
.tabelle-hinweis { font-size: .86rem; color: var(--muted); margin-top: 10px; }

/* App-Steckbriefe */
.app-block { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 26px; }
.app-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.app-block h3 { margin-bottom: 4px; }
.app-meta { font-size: .88rem; color: var(--muted); margin: 0 0 14px; }
.app-meta a { color: inherit; }
.eigene-app { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }

@media (max-width: 760px) {
  .matrix { font-size: .9rem; }
  .matrix th, .matrix td { padding: 10px 9px; }
  .matrix tbody th[scope="row"] { min-width: 186px; width: 186px; }
}

/* Auf dem Telefon muss neben der Merkmalsspalte mehr als eine App sichtbar sein. */
@media (max-width: 480px) {
  .matrix { font-size: .84rem; min-width: 880px; }
  .matrix th, .matrix td { padding: 9px 7px; }
  .matrix tbody th[scope="row"] { min-width: 144px; width: 144px; }
  .matrix thead th { font-size: .74rem; padding: 10px 7px; }
  .matrix tr.preis td, .matrix tr.textzeile td { font-size: .76rem; min-width: 108px; }
  .legende { gap: 4px 16px; font-size: .8rem; }
}