@font-face{font-family:Roboto;src:url('/fonts/roboto-400.woff2') format('woff2');font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:Roboto;src:url('/fonts/roboto-700.woff2') format('woff2');font-style:normal;font-weight:600 900;font-display:swap}

:root{
  --bg:#f6f8fb;--surface:#fff;--surface2:#eef1f5;
  --text:#343d47;--text2:#667079;--text3:#667079;--muted:#667079;
  --border:#d5dae1;--border2:#e2e6ea;
  --primary:#1857c4;--primary-dark:#14489f;--onprimary:#fff;
  --danger:#b3261e;--danger-soft:#fde3e0;--success:#1a7f37;
  --focus:rgba(24,87,196,.35);
  --radius-entry:7px;--radius-control:12px;--radius-card:16px;--radius-sheet:24px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#151a21;--surface:#1b2028;--surface2:#333b45;
    --text:#e6eaf0;--text2:#a7b0bb;--text3:#a7b0bb;--muted:#a7b0bb;
    --border:#59616b;--border2:#333b45;
    --primary:#9dbdf4;--primary-dark:#bcd2f8;--onprimary:#1b2028;
    --danger:#ffb4ab;--danger-soft:#5f1410;--success:#7ee2a8;
    --focus:rgba(157,189,244,.42);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#151a21;--surface:#1b2028;--surface2:#333b45;
  --text:#e6eaf0;--text2:#a7b0bb;--text3:#a7b0bb;--muted:#a7b0bb;
  --border:#59616b;--border2:#333b45;
  --primary:#9dbdf4;--primary-dark:#bcd2f8;--onprimary:#1b2028;
  --danger:#ffb4ab;--danger-soft:#5f1410;--success:#7ee2a8;
  --focus:rgba(157,189,244,.42);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f8fb;--surface:#fff;--surface2:#eef1f5;
  --text:#343d47;--text2:#667079;--text3:#667079;--muted:#667079;
  --border:#d5dae1;--border2:#e2e6ea;
  --primary:#1857c4;--primary-dark:#14489f;--onprimary:#fff;
  --danger:#b3261e;--danger-soft:#fde3e0;--success:#1a7f37;
  --focus:rgba(24,87,196,.35);
  color-scheme:light;
}

html{font-family:Roboto,'Segoe UI',Helvetica,Arial,sans-serif}
/* Auf schmalen Displays darf sich die Seite nie seitlich verschieben lassen.
   „clip" statt „hidden", damit klebende Kopfzeilen (position:sticky) weiter
   funktionieren; „hidden" bleibt als Rückfall für ältere Browser davor stehen.
   Eigene Scroll-Bereiche (.tablewrap, pre, table) behalten ihr Scrollen. */
html{overflow-x:hidden;overflow-x:clip}
img,video,canvas,iframe{max-width:100%}
/* Lange, ununterbrochene Zeichenketten – Prüfsummen, Fingerabdrücke,
   E-Mail-Adressen – brechen um, statt die Seite breiter zu machen. */
:not(pre)>code{overflow-wrap:anywhere}
body,button,input,select,textarea{font-family:inherit}
body{color:var(--text);background:var(--bg);font-weight:400}
button,.btn,.buy{font-weight:600}
input,select,textarea{
  min-height:46px;border-radius:var(--radius-control);border-color:var(--border);
  color:var(--text);background:var(--surface);
}
textarea{min-height:112px}
::placeholder{color:var(--text2);opacity:.82}

.topbar .brand,.topbar .brand b,.brand-name{font-size:20px;font-weight:600;color:var(--text)}
.topbar .back{min-height:40px;border-radius:var(--radius-control);font-weight:600}
.card,.lead,.notice,.provider,.choice,.price-card,.trust-card{border-radius:var(--radius-card)}
.actions button,form button[type="submit"],.contact-submit{min-height:46px;border-radius:var(--radius-control)}
.btn,.buy{border-radius:var(--radius-control)}
footer,.foot-bottom,.footer-note{color:var(--text2)}

/* Widerruf and cancellation are one clearly named action group. The grouping,
   stronger text and accent line make them stand out from informational links
   without turning them into isolated pills. */
footer .contract-actions{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  margin:4px 0;padding:5px 0 5px 11px;border-left:2px solid var(--primary);
}
footer nav>.contract-actions{
  flex:0 0 100%;box-sizing:border-box;margin-top:8px;
}
footer .contract-actions-label{
  margin-bottom:2px;color:var(--text2);font-size:10px;font-weight:700;
  line-height:1.4;letter-spacing:.08em;text-transform:uppercase;
}
footer .contract-actions a.legal-action{
  display:inline-flex;align-items:center;min-height:28px;padding:2px 0;
  color:var(--text);font-weight:600;text-decoration:none;
}
footer .contract-actions a.legal-action:hover{text-decoration:underline;text-underline-offset:3px}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
}
/* ---------- Nur Touch-Geräte: antippbare Ziele ----------
   Gilt ausdrücklich NICHT für die Desktop-Darstellung. Dort wird mit der Maus
   auf einen Pixel genau geklickt und die Fußzeile soll eng stehen; unter dem
   Finger sind die 21 px hohen Fußzeilen-Links dagegen zu klein (WCAG 2.5.8
   verlangt mindestens 24 px, üblich sind 44 px). Das trifft hier nicht nur die
   Bequemlichkeit: die Fußzeile ist auf jeder öffentlichen Seite der Weg zu
   Kündigung und Widerruf, den § 312k Abs. 2 BGB „unmittelbar und leicht
   zugänglich" verlangt. Die Zeilenlücke schrumpft im Gegenzug, weil die
   Mindesthöhe die Trennung schon selbst herstellt. */
@media(max-width:768px){
  footer nav{gap:0 14px}
  footer nav a{min-height:44px;display:inline-flex;align-items:center}
  footer .contract-actions a.legal-action{min-height:44px}
  /* Kontaktadressen stehen allein in ihrer Zeile (dd), sind also echte
     Schaltflächen und keine Verweise im Fließtext. */
  dd>a[href^="mailto:"]{min-height:44px;display:inline-flex;align-items:center}
  /* Ein 13 px breites Standard-Kästchen ist mit dem Finger kaum zu treffen –
     und hier hängt die Kontolöschung daran. */
  .check input[type=checkbox]{width:24px;height:24px;margin-top:2px;flex:none}
  /* `min-height` weiter oben bleibt an einem <a> wirkungslos, solange es inline
     ist – Mindesthöhen greifen nicht auf inline-Boxen. Auf dem Handy braucht
     dieser Rücksprung eine echte Fläche. */
  .topbar .back{display:inline-flex;align-items:center}
  /* Ein Verweis, der allein einen Absatz füllt, ist eine Schaltfläche und kein
     Fließtext. Das lässt sich in CSS nicht zuverlässig erkennen (`:only-child`
     zählt nur Elemente, nicht Textknoten), deshalb trägt er die Klasse selbst. */
  a.backlink{min-height:44px;display:inline-flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Fotoseiten behalten ihre dunkle Palette auch bei gespeichertem hellem Thema. */
body.page-photo{
  --bg:#0a1220;--surface:#101c2c;--surface2:#1e2b3c;
  --text:#fff;--text2:#d1dae6;--text3:#b8c5d6;--muted:#b8c5d6;
  --border:#596b82;--border2:#34445b;
  --primary:#8fbcf0;--primary-dark:#bcd2f8;--onprimary:#101c2c;
  --danger:#ffb4ab;--danger-soft:#5f1410;--success:#7ee2a8;
  --focus:#bcd2f8;color-scheme:dark;
}

/* Device language controls use language names; flags are not needed for identification. */