/* =====================================================================
   Grundlagen: Reset, Typografie, Layout-Huellen, Zugaenglichkeit
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* Ein <dialog> ist die Ausnahme. Der Browser stellt ihn mit
   `margin: auto` in die Mitte des Fensters - der Reset eine Zeile
   darueber nimmt ihm genau das wieder weg, und dann klebt JEDER Dialog
   der Seite in der linken oberen Ecke. Gemessen bei 1400x900: Mitte des
   Dialogs bei 280/102 statt bei 700/450.

   Das ist nie aufgefallen, weil die Dialoge breit sind und oben am Rand
   noch passabel aussehen. Beim Einstellungsfenster eines Modems, das
   fast die ganze Hoehe braucht, faellt es sofort auf.

   Die Lade am unteren Rand fuer Telefone (weiter unten, `margin: auto
   auto 0`) ist staerker und bleibt davon unberuehrt.               */
dialog { margin: auto; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
li { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  font-weight: 650;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.028em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .18em;
}

a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: color-mix(in srgb, var(--primary) 26%, transparent);
}

/* --- Bildschirmleser --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: var(--s-4); }

[hidden] { display: none !important; }

/* --- Layout --- */
.shell {
  width: min(100% - 2 * var(--s-5), var(--content));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .shell { width: min(100% - 2 * var(--s-4), var(--content)); }
}

.section {
  padding-block: clamp(var(--s-8), 6vw, var(--s-10));
  position: relative;
}

.section--tight { padding-block: clamp(var(--s-7), 4vw, var(--s-8)); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--s-7);
  display: grid;
  gap: var(--s-3);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-eyebrow);
  font-weight: 640;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .6;
}

.section-head--center .eyebrow { justify-content: center; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 62ch;
}

.muted { color: var(--text-muted); }
.klein { font-size: .9rem; }
.mittig { justify-content: center; }
.mono { font-family: var(--font-mono); font-size: .9em; letter-spacing: -.01em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* --- Einblenden beim Scrollen --- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- Hilfsklassen --- */
.stack { display: grid; gap: var(--s-4); }
.stack-sm { display: grid; gap: var(--s-2); }
.stack-lg { display: grid; gap: var(--s-5); }
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------
   Raster- und Flexkinder duerfen schmaler werden als ihr Inhalt

   Die automatische Mindestbreite eines Raster- oder Flexkindes ist
   seine min-content-Breite. Ein einziger langer, unbrechbarer Wortlaut
   macht damit die ganze Spalte breiter als der Bildschirm - und weil
   body{overflow-x:hidden} das abschneidet, scrollt die Seite nicht
   einmal: Der Text ist rechts einfach weg.

   Gemessen am 08.09.2026 auf einem 390 px breiten Bildschirm:

     pages/widerruf.html   18 px zu breit, 32 Stellen abgeschnitten
     pages/agb.html         5 px
     redaktion.html        21 px, ueber 470 Stellen

   Schuld war auf den Rechtstextseiten die Unterschriftslinie im
   Muster-Widerrufsformular der Kanzlei: 55 Unterstriche am Stueck.
   Aendern koennen wir den Text nicht - er ist lizenziert -, und der
   naechste Push braechte ihn ohnehin zurueck. Also muss das Raster
   nachgeben.

   Bewusst nur an den Behaeltern, nicht an beliebigen Flexkindern:
   min-width:0 an einem Knopf hiesse, dass sein Text abgeschnitten
   wird, sobald es eng wird.                                        */
.shell > *,
.stack > *,
.stack-sm > *,
.stack-lg > *,
.prose > * { min-width: 0; }

/* =====================================================================
   Handy-Feinschliff
   ---------------------------------------------------------------------
   Getestet gegen die üblichen Engstellen: Notch und Home-Indikator,
   Daumenreichweite, Tippziele, Tabellen und der iOS-Zoom bei Eingaben.
   ===================================================================== */

/* Sichere Bereiche: unter dem Notch und über dem Home-Indikator. */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

.site-header .header-inner {
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}

@media (max-width: 720px) {
  :root {
    --header-h: 62px;
    --s-9: 64px;
    --s-10: 80px;
  }

  /* Tippziele: mindestens 44 Pixel, auch bei den kleinen Varianten. */
  .btn.sm,
  .chip,
  .icon-btn { min-height: 44px; }

  .btn { padding-inline: var(--s-4); }

  /* Eingaben mit 16 Pixel, sonst zoomt iOS beim Antippen hinein. */
  .field input,
  .field select,
  .field textarea,
  .input { font-size: 16px; }

  /* Zwei Spalten sind auf dem Handy eine. */
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }

  .section-head { margin-bottom: var(--s-6); }

  /* Dialoge füllen die Breite und sitzen unten - besser für den Daumen. */
  dialog.modal,
  dialog.modal.wide {
    width: 100%;
    max-width: none;
    margin: auto auto 0;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal-body { max-height: 62dvh; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }

  .toast-stack { inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom)); }
}

@media (max-width: 460px) {
  .kv { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* Grobe Zeiger, also Finger statt Maus: alles etwas großzügiger. */
@media (pointer: coarse) {
  .btn.quiet { min-height: 44px; padding-inline: var(--s-4); }
  .filter-list label { min-height: 44px; }
  .main-nav a { padding-block: var(--s-3); }
}

/* Tabellen werden auf schmalen Bildschirmen zu Karten. Die Kopfzeile
   wandert dabei in ein data-Attribut vor jede Zelle.                   */
@media (max-width: 720px) {
  table.data.stacked { min-width: 0; }
  table.data.stacked thead { display: none; }

  table.data.stacked tbody tr {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-4);
    border-bottom: 1px solid var(--line-soft);
  }

  table.data.stacked td {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 2px 0;
    border: 0;
    text-align: right;
  }

  table.data.stacked td::before {
    content: attr(data-label);
    font-size: .74rem;
    font-weight: 680;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    flex: none;
  }

  table.data.stacked td.num { text-align: right; }
  table.data.stacked td:empty { display: none; }
}

/* =====================================================================
   Darstellung im eingebetteten Browser der App
   Die App bringt eigene Navigation mit - Kopf- und Fußzeile entfallen.
   ===================================================================== */
:root.in-app .site-header,
:root.in-app .site-footer,
:root.in-app .floating,
:root.in-app .cookiebar,
:root.in-app .scroll-progress,
:root.in-app .breadcrumb,
:root.in-app .skip-link { display: none !important; }

:root.in-app { --header-h: 0px; }
:root.in-app body { background: var(--canvas); }
:root.in-app .page-hero { padding-top: var(--s-5); }
:root.in-app .shop-layout,
:root.in-app .cart-layout,
:root.in-app .checkout-layout,
:root.in-app .account-layout { padding-block: var(--s-5) var(--s-8); }

/* Ein Abschnittskopf, dem der Inhalt unmittelbar folgt — der Abstand
   kommt dann aus dem Raster darüber und nicht zweimal. */
.section-head.anschluss { margin-bottom: 0; }

/* Fließtext auf einer eingefärbten Fläche. */
.auf-farbe { color: var(--on-primary-container); }

/* Eine Spalte, die nur so breit ist wie ihr Knopf — Aktionsspalte am
   rechten Rand einer Tabelle. */
th.eng { width: 1%; }