/* Abschluss-Baustein für die Inhaltsseiten.
   Bis 09.2026 endeten 22 von 24 Seiten ohne einen einzigen Store-Link — wer über
   eine Suche auf einem Guide landete, fand am Ende nur weitere Textseiten.
   Farben kommen aus den Variablen der jeweiligen Seite, hell wie dunkel. */
.holen{
  margin:56px 0 8px;padding:30px 32px;border:1px solid var(--border);border-radius:14px;
  background:var(--panel);
}
.holen h2{font-size:24px;line-height:1.25;margin:0 0 10px;letter-spacing:-.01em}
.holen p{color:var(--sub);margin:0 0 22px;max-width:62ch}
.holen .badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.holen .badges a{display:inline-flex;line-height:0;border-radius:9px;
  transition:transform .15s ease,opacity .15s ease}
.holen .badges a:hover{transform:translateY(-1px);opacity:.88}
.holen .badges img{height:44px;width:auto;display:block}
.holen .hinweis{color:var(--faint);font-size:14px;margin:16px 0 0}
@media (max-width:560px){
  .holen{padding:24px 20px}
  .holen .badges img{height:40px}
}

/* Guide-Kacheln auf der Startseite. Die drei Fachseiten waren bis 09.2026 nur
   über die FAQ erreichbar — zwei Klicks tief, für Suchende praktisch unsichtbar. */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:26px}
.guides .guide{display:block;padding:22px 24px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease}
.guides .guide:hover{border-color:var(--accent);transform:translateY(-2px)}
.guides .guide h3{font-size:18px;margin:0 0 8px;color:var(--accent);letter-spacing:-.01em}
.guides .guide p{color:var(--sub);font-size:15px;margin:0;line-height:1.55}

/* Drei Top-Fragen gleich unter dem Einstieg. Die Guide-Kacheln (#fragen) stehen
   weit unten — wer mit einer Frage kommt, soll sie ohne Scrollen sehen. */
.topfragen{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin:0 0 30px;
  padding:14px 18px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.topfragen .sec-head{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.topfragen ul{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0}
.topfragen a{font-size:15px}
.topfragen .alle{margin-left:auto;color:var(--sub);font-size:14px}
@media (max-width:560px){
  .topfragen ul{flex-direction:column}
  .topfragen .alle{margin-left:0}
}

/* Tabelle «What runs where»: Link auf die Neu-Seite unter der Versionsnummer.
   Steht hier und nicht inline, weil die CSP (style-src 'self') Inline-Styles
   verwirft; holen.css laden beide Startseiten. 30.09.2026 */
.plattform .naechste{display:inline-block;margin-top:4px;font-size:12px;font-weight:500;line-height:1.3}

/* ---- Tabelle «What runs where» / «Was wo läuft» (30.09.2026) ----------------
   Übersicht zuerst: Karte mit Rand, Plattformköpfe mit Symbol, Gruppen als
   Bänder, Haken als runde Marken, «ab 6.9» als Neu-Pille. Alles hier, weil die
   CSP (style-src 'self') Inline-Styles verwirft. Symbole sind neutrale
   Geräteumrisse, keine Hersteller-Logos. */
.plattform-huelle{border:1px solid var(--border);border-radius:14px;background:var(--card);margin:18px 0}
.plattform{margin:0}
.plattform th,.plattform td{vertical-align:middle}
.plattform thead th{padding:16px 8px 12px;border-bottom:2px solid var(--border);text-transform:none;letter-spacing:0}
.plattform thead th.pf{text-align:center;color:var(--text)}
.plattform .pf-ico{display:block;width:26px;height:26px;margin:0 auto 6px;color:var(--accent)}
.plattform .pf-name{display:block;font-size:14px;font-weight:700}
.plattform .pf-sub{display:block;font-size:11px;font-weight:500;color:var(--faint);margin-top:2px}
.plattform tbody th{color:var(--text);font-weight:500;width:40%}
.plattform tbody tr:not(.gruppe):hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.plattform tr.kopfzeile td{font-size:16px;font-weight:700;color:var(--text)}
.plattform tr.kopfzeile td .naechste{font-size:11.5px}
.plattform tr.gruppe th{text-align:left;padding:18px 12px 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-bottom:1px solid var(--border)}
.plattform .ja span[aria-hidden]{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:13px;line-height:1}
.plattform .nein span[aria-hidden]{opacity:.55}
.plattform .neu-pille{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:12px;font-weight:600;line-height:1.35}
.plattform tbody tr:last-child th,.plattform tbody tr:last-child td{border-bottom:0}
@media (max-width:620px){
  .plattform tbody th{width:auto}
  .plattform thead th{padding:12px 3px 10px}
  .plattform .pf-ico{width:22px;height:22px;margin-bottom:4px}
  .plattform .pf-name{font-size:11.5px;word-break:normal;hyphens:manual}
  .plattform .pf-sub{display:none}
  .plattform td{word-break:normal;overflow-wrap:normal;hyphens:manual}
  .plattform .neu-pille{padding:2px 6px;font-size:10.5px}
  .plattform tr.kopfzeile td{font-size:14px}
  .plattform tr.gruppe th{font-size:10.5px;padding:14px 8px 6px}
}
@media (min-width:621px){.plattform .neu-pille{white-space:nowrap}}
/* Handy: vier Spalten sind auf 375 px zu eng. Jede Zeile wird zur Karte —
   oben die Funktion über die volle Breite, darunter die drei Plattformen. */
@media (max-width:620px){
  .plattform,.plattform thead,.plattform tbody{display:block;width:100%}
  .plattform thead tr,.plattform tbody tr:not(.gruppe){display:grid;grid-template-columns:repeat(3,1fr)}
  .plattform thead th:first-child{display:none}
  .plattform tbody tr:not(.gruppe) th{grid-column:1/-1;border-bottom:0;padding:10px 10px 2px;font-size:12.5px;word-break:normal}
  .plattform tbody tr:not(.gruppe) td{padding:4px 4px 10px;font-size:12px;overflow-wrap:anywhere}
  .plattform tr.gruppe{display:block}
  .plattform tr.gruppe th{display:block}
  .plattform tbody tr:not(.gruppe){border-bottom:1px solid var(--hair)}
  .plattform tbody tr:not(.gruppe) th,.plattform tbody tr:not(.gruppe) td{border-bottom:0}
  .plattform tr.kopfzeile td{font-size:13px}
  .plattform .neu-pille{white-space:normal}
}
/* Kopfmenü: «Plattformen / Fassungen» als ein Punkt über zwei Zeilen. */
nav .links a.zweizeilig{line-height:1.15;text-align:left}
/* «Neu»-Marke in den Funktionskarten der Startseite. */
.feature .neu-badge{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:999px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;vertical-align:2px;color:var(--on-accent,#fff);background:var(--accent)}
/* Bildstrecke «Neu, in Bildern». */
.bilderstrecke figure{margin:0 0 10px}
.bilderstrecke figure img{border-radius:14px;border:1px solid var(--border)}
.bilderstrecke .shot-caption{margin:6px 0 34px}
/* DeepSeek, der neunte Dienst (Windows 1.5, Mac 7.0, iPhone 2.11). Farben wie in der Mac-App. */
:root{--deepseek:#ecacd9}
:root[data-theme="light"]{--deepseek:#864666}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--deepseek:#864666}}
.panel{--deepseek:#ecacd9}
.prov .mark.m-deepseek{background:var(--deepseek);font-size:12px;letter-spacing:-0.5px}
.feature.c-deepseek{border-top-color:var(--deepseek)}
/* Codeblöcke der Ratgeber: waagrecht scrollen statt überlaufen (ersetzt ein Inline-Style, das die CSP verwarf). */
main pre{overflow-x:auto}

/* Vertrauensblock direkt unter dem Kopfbild der Startseite (E3, 08.10.2026):
   «Keine Browser-Cookies · Keine Datenerhebung · Schlüssel im Schlüsselbund».
   Farben aus den Variablen der Seite, hell wie dunkel. */
.vertrauen{
  margin:22px 0 6px;padding:18px 22px;border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:12px;background:var(--panel);
}
.vertrauen ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px}
.vertrauen li{font-weight:600;color:var(--text);font-size:16px;line-height:1.4}
.vertrauen li::before{content:"\2713";color:var(--accent);font-weight:700;margin-right:8px}
.vertrauen p{margin:0;color:var(--sub);font-size:15px;line-height:1.55;max-width:74ch}
@media (max-width:560px){
  .vertrauen{padding:16px 16px}
  .vertrauen ul{flex-direction:column;gap:4px}
}

/* Download-Knopf und Download-Seite (seit 19.10.2026).
   Gefuellter Akzentknopf mit Pfeil nach unten; der Pfeil ist eine SVG-Datei als
   Maske (img/dl-pfeil.svg), kein Inline-Style. Schriftfarbe je Thema, weil nicht
   jede Seite --on-accent kennt. */
.dl-btn{--dl-on:#0b1622;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 18px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);
  color:var(--dl-on);font-weight:700;font-size:15px;line-height:1.15;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,opacity .15s ease}
:root[data-theme="light"] .dl-btn{--dl-on:#fcfbf9}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .dl-btn{--dl-on:#fcfbf9}}
.dl-btn::before{content:"";flex:none;width:1.15em;height:1.15em;background:currentColor;
  -webkit-mask:url(../img/dl-pfeil.svg) center/contain no-repeat;mask:url(../img/dl-pfeil.svg) center/contain no-repeat}
.dl-btn:hover{transform:translateY(-1px);opacity:.92;color:var(--dl-on)}
.dl-btn:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.dl-btn--gross{padding:15px 26px;font-size:18px;border-radius:12px}
.dl-btn--klein{background:transparent;color:var(--accent);padding:8px 14px;font-size:14px}
.dl-btn--klein:hover{color:var(--accent)}
nav a.dl-btn,nav .links a.dl-btn{padding:8px 15px;font-size:14px;color:var(--dl-on)}
nav .links a.dl-btn:hover{color:var(--dl-on)}
nav .logo + a:not(.dl-btn){margin-left:auto}
nav > .dl-btn{margin-left:14px}
nav .links .dl-btn{margin-left:0}
/* Startseite: Knopf ueber dem Video, auf jedem Bildschirm vor der Falz */
.dl-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin:0 0 20px;padding:22px 16px 0}
.dl-hero span{color:var(--sub);font-size:14px}
/* Download-Seite */
.dl-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:28px 0 8px}
.dl-karte{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border:1px solid var(--border);
  border-radius:14px;background:var(--panel)}
.dl-karte h2{margin:0;font-size:22px;line-height:1.2}
.dl-karte p{margin:0;color:var(--sub)}
.dl-karte .dl-meta{color:var(--faint);font-size:14px}
.dl-karte--erkannt{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.dl-erkannt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.dl-erkannt[hidden]{display:none}
.dl-karte .dl-store{display:inline-flex;line-height:0;border-radius:9px;transition:transform .15s ease,opacity .15s ease}
.dl-karte .dl-store:hover{transform:translateY(-1px);opacity:.9}
.dl-karte .dl-store:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dl-karte .dl-store img{height:56px;width:auto;display:block}
.dl-karte details{width:100%;color:var(--sub);font-size:14px}
.dl-karte summary{cursor:pointer;color:var(--accent)}
.dl-karte summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dl-karte code{display:block;margin:6px 0 0;font-size:12px;word-break:break-all;color:var(--text)}
.dl-karte .dl-note{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;color:var(--sub)}
.dl-alt{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 0}
.dl-alt th,.dl-alt td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
.dl-alt th{color:var(--faint);font-weight:600}
.dl-scroll{overflow-x:auto}
.dl-bild{margin:18px 0;max-width:520px}
.dl-bild img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--border)}
.dl-bild figcaption{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:8px}
@media (max-width:560px){
  .dl-hero .dl-btn--gross{width:100%}
  .dl-karte{padding:20px}
}
.dl-karte[data-os="windows"]{grid-column:1/-1}
.dl-btn--klein{white-space:normal;text-align:left}
.dl-btn--gross{max-width:100%;white-space:normal;text-align:left}
/* Bewertung auf der Startseite (unter «Feedback & feature requests»), seit 19.10.2026.
   Sterne, Formular und Knoepfe kommen aus css/bewerten.css. */
.bewerten-teil{margin-top:44px;padding-top:30px;border-top:1px solid var(--border)}
.bewerten-teil h3{margin:0 0 6px;font-size:22px;line-height:1.25}
.bewerten-teil .danke h3{margin-top:0}
.bewerten-teil .store-karte h3{font-size:18px}