/* ==========================================================================
   DT PM — Basis, Layout, Bausteine, Seitenmuster
   --------------------------------------------------------------------------
   Abschnitte 2 bis 5 des Gestaltungssystems, unveraendert aus dem Entwurf.
   Der Token-Block (Abschnitt 1) steht NICHT hier — er ist die theme.json.

   Einbindung: assets/tokens-bridge.css MUSS vorher geladen sein, sonst sind
   alle Variablen leer.

   Regel: keine Hex-Werte, keine freien Pixelwerte in dieser Datei.
   ========================================================================== */

/* ==========================================================================
   Basis
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { text-wrap: pretty; }

a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}

a:hover { color: var(--color-accent-hover); }
a:active { color: var(--color-accent-active); }

/* Sichtbarer Fokus mit klarem Abstand — nirgends entfernt. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Sprunglink / Skip-Link
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 20;
  transform: translateY(-200%);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--weight-medium);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Produktzusatz neben der Firmenmarke -----------------------------
   Steht nur auf Produktseiten. Die Marke selbst wechselt nie. */
.brand__product {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  border-left: var(--border-thin) solid var(--color-border);
  margin-left: var(--space-1);
  padding-left: var(--space-3);
}

/* ==========================================================================
   Layout-Hilfen
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-8);
  border-top: var(--border-thin) solid var(--color-border);
}

.section:first-of-type { border-top: 0; }

.stack > * + * { margin-top: var(--space-4); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-6 > * + * { margin-top: var(--space-6); }

.eyebrow {
  /* Monospace wie die Sublines der Store-Grafiken. Die Kopfzeile setzt das
     Kuerzel "PM" schon so; damit sprechen Seite und Zeichen dieselbe Sprache. */
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
}

.measure { max-width: var(--measure); }

.muted { color: var(--color-text-muted); }

.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;
}

/* Contain absolutely-positioned .sr-only spans (e.g. inside icon buttons)
   so they anchor to their control, not the viewport, and never inflate the
   document's horizontal scroll width inside scrollable/wide regions. */
.btn {
  position: relative;
}

.section-title {
  font-size: var(--text-xl);
  max-width: var(--measure);
}

/* ==========================================================================
   Kopfbereich der Website
   ========================================================================== */

.site-header {
  background-color: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  min-block-size: var(--target-min);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--color-text);
  text-decoration: none;
}

.brand__mark {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-inline-start: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  border-bottom: var(--border-thick) solid transparent;
}

.nav__link:hover { color: var(--color-text); }

.nav__link[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ==========================================================================
   Schaltflächen / Aktionen
   ========================================================================== */

/* Der Aufladen-Knopf im Kundenkonto steht mit in dieser Liste, statt sein
   Aussehen weiter unten noch einmal zu beschreiben: Er soll sich mitaendern,
   wenn sich die Schaltflaechen aendern.

   Die laengere Auswahl (.woocommerce button.…) ist noetig, weil WooCommerce
   seine eigenen Knoepfe mit .woocommerce button.button anspricht. Kuerzer
   gewaehlt verliert diese Regel, und der Knopf traegt WooCommerce-Grau
   mitten in unserer Gestaltung. */
.btn,
.woocommerce button.dtpm-aufladen__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-5);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}
.btn--primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-on-accent); }
.btn--primary:active { background-color: var(--color-accent-active); border-color: var(--color-accent-active); }

/* Dieselbe Stufe wie der Kaufknopf auf der Preisseite: Aufladen ist ein Kauf,
   und zwei verschiedene Knopfstufen fuer denselben Vorgang lesen sich wie
   zwei verschiedene Vorgaenge. */
.btn--secondary,
.woocommerce button.dtpm-aufladen__knopf,
.woocommerce button.dtpm-kuendigen__knopf {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover,
.woocommerce button.dtpm-aufladen__knopf:hover,
.woocommerce button.dtpm-kuendigen__knopf:hover { background-color: var(--color-surface-muted); color: var(--color-text); }

.btn--ghost {
  background-color: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding-inline: var(--space-3);
}
.btn--ghost:hover { background-color: var(--color-accent-subtle); color: var(--color-accent-hover); }

.btn--danger {
  background-color: var(--color-surface);
  color: var(--color-error);
  border-color: var(--color-error-border);
}
.btn--danger:hover { background-color: var(--color-error-subtle); color: var(--color-error); }

.btn--sm {
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.btn--block { width: 100%; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Startseite: Kopf, Merkmale, Fähigkeiten, Vergleich
   ========================================================================== */

.hero {
  padding-block: var(--space-9) var(--space-8);
}

.hero__title {
  font-size: var(--text-3xl);
  max-width: var(--measure);
}

.hero__lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
}

/* Drei Unterscheidungsmerkmale als Textblöcke (kein Kartenraster). */
.diff {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.diff__item {
  padding-top: var(--space-4);
  border-top: var(--border-thick) solid var(--color-accent);
}

.diff__title { font-size: var(--text-md); }

.diff__body { color: var(--color-text-muted); max-width: var(--measure); }

/* Fähigkeiten als strukturierte Aufzählung. */
.capabilities {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: 1fr;
}

.capability__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}

.feature-list li {
  position: relative;
  padding-left: var(--space-5);
  padding-block: var(--space-2);
}

.feature-list li + li { border-top: var(--border-thin) solid var(--color-border); }

.feature-list .feature-mark {
  position: absolute;
  left: 0;
  top: var(--space-2);
  color: var(--color-accent);
}

/* ==========================================================================
   Tabellen (Vergleich, Preise, Rechnungen)
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  min-inline-size: 40rem;
}

table.data caption {
  text-align: left;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  border-bottom: var(--border-thin) solid var(--color-border);
}

table.data th,
table.data td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin) solid var(--color-border);
  vertical-align: baseline;
}

table.data thead th {
  background-color: var(--color-surface-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }

table.data th[scope="row"] {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.cell-yes { color: var(--color-success); font-weight: var(--weight-medium); }
.cell-no { color: var(--color-text-muted); }

/* ==========================================================================
   Preisseite
   ========================================================================== */

.tier-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.tier {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tier--featured {
  border-color: var(--color-accent);
  border-width: var(--border-thick);
}

.tier__flag {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  border: var(--border-thin) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.tier__name { font-size: var(--text-lg); }

.tier__domains { color: var(--color-text-muted); font-size: var(--text-xs); }

.price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.price__amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.price__period { color: var(--color-text-muted); font-size: var(--text-base); }

.price__monthly {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.price__tax {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* Ruhige Hinweise (Akzentfläche, sparsam eingesetzt). */
.notice {
  background-color: var(--color-accent-subtle);
  border: var(--border-thin) solid var(--color-accent-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.notice__icon { color: var(--color-accent); flex: none; }
.notice__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.notice__body { color: var(--color-text-muted); max-width: var(--measure); }

.notice-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

/* ==========================================================================
   Kundenkonto
   ========================================================================== */

.account {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Verhindert, dass breite Tabellen die Rasterspuren aufblähen —
   die interne Querscrollung der Tabelle bleibt dadurch wirksam. */
.account > * { min-width: 0; }

.panel {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

.panel__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.panel__title { font-size: var(--text-md); }

.panel__body { padding: var(--space-5); }

/* Vertragsübersicht als Definitionsliste. */
.dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.dl > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

.dl dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dl dd { font-size: var(--text-md); font-weight: var(--weight-medium); }
.dl dd .num { font-weight: var(--weight-semibold); }

/* Domainplätze: Belegung als Text + nicht-animierter Balken. */
.usage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.usage__count { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.meter {
  margin-top: var(--space-3);
  height: var(--space-2);
  background-color: var(--color-surface-muted);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  background-color: var(--color-accent);
}

.domain-list { list-style: none; padding: 0; margin-top: var(--space-4); }

.domain-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-3);
  border-top: var(--border-thin) solid var(--color-border);
}

.domain-meta { display: flex; flex-direction: column; gap: var(--space-1); }

.domain-list .host { font-family: var(--font-mono); font-weight: var(--weight-medium); }
.domain-list .since { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Lizenzschlüssel + Kopieren. */
.key-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: stretch;
}

.key {
  flex: 1 1 16rem;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  background-color: var(--color-surface-muted);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  white-space: nowrap;
}

.copy-status {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Die Rueckmeldung steht erst da, wenn es etwas zu melden gibt — sie kommt
   leer und mit hidden aus der Seite. Ohne diese Zeile bliebe sie sichtbar:
   Die display-Angabe oben schlaegt das hidden des Browsers, und uebrig
   bliebe eine leere Zeile mit Abstand darueber. */
.copy-status[hidden] { display: none; }

/* Misslungenes Kopieren ist keine Erfolgsmeldung in Gruen. */
.copy-status--fehler { color: var(--color-error); }

/* Statusabzeichen — Zustand nie allein über Farbe (immer Text). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid transparent;
}

.badge--success { color: var(--color-success); background-color: var(--color-success-subtle); border-color: var(--color-success-border); }
.badge--warning { color: var(--color-warning); background-color: var(--color-warning-subtle); border-color: var(--color-warning-border); }
.badge--neutral { color: var(--color-text-muted); background-color: var(--color-surface-muted); border-color: var(--color-border); }
.badge--error { color: var(--color-error); background-color: var(--color-error-subtle); border-color: var(--color-error-border); }

/* ==========================================================================
   Formularfelder
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label { font-weight: var(--weight-medium); font-size: var(--text-base); }

.input {
  min-block-size: var(--target-min);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  width: 100%;
}

.input::placeholder { color: var(--color-text-muted); }

.input[aria-invalid="true"] { border-color: var(--color-error); }

.field__error {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.form-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row .field { flex: 1 1 18rem; }

/* Dialog: Kündigung bestätigen. */
.confirm {
  margin-top: var(--space-4);
  background-color: var(--color-warning-subtle);
  border: var(--border-thin) solid var(--color-warning-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.confirm__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-warning); }
.confirm__body { color: var(--color-text-muted); margin-top: var(--space-2); max-width: var(--measure); }

.result {
  margin-top: var(--space-4);
  background-color: var(--color-success-subtle);
  border: var(--border-thin) solid var(--color-success-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.result__icon { color: var(--color-success); flex: none; }

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.site-footer {
  border-top: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface);
  padding-block: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.site-footer__inner {
  /* Untereinander statt auseinandergezogen.
     Vorher stand hier justify-content: space-between -- der Firmensatz klebte
     links, die Rechtsverweise am rechten Rand, und dazwischen klaffte die
     ganze Seitenbreite. Auf einem breiten Bildschirm sah das aus, als waeren
     die Verweise ueber die Seite verstreut (Rueckmeldung Dirk, 17.09.2026). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.site-footer__inner p {
  margin: 0;
  max-width: var(--measure);
}

/* Die Verweise bleiben eine Zeile mit ihren Trennpunkten und brechen erst,
   wenn der Platz nicht reicht. */
.site-footer nav {
  line-height: var(--leading-relaxed);
}

.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-text); }

/* ==========================================================================
   Responsiv — mobile-first, ab 360 px nutzbar
   ========================================================================== */

@media (min-width: 40rem) {
  .diff { grid-template-columns: repeat(3, 1fr); }
  .notice-grid { grid-template-columns: repeat(2, 1fr); }
  .dl { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 52rem) {
  h1 { font-size: var(--text-3xl); }
  .capabilities { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: repeat(3, 1fr); }
  .account { grid-template-columns: 20rem 1fr; }
}

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

/* --- Sprachwahl -------------------------------------------------------
   Steht rechts neben der Navigation. Die aktuelle Sprache ist Text und
   kein Verweis: Ein Verweis auf die Seite, auf der man ohnehin steht,
   ist fuer Screenreader-Nutzer eine Sackgasse. */
.sprachwahl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.sprachwahl__aktuell {
  color: var(--color-text);
}

.sprachwahl__wechsel {
  color: var(--color-text-muted);
  text-decoration: none;
  /* Mindestgroesse fuer Zeigegeraete, WCAG 2.1 AA. */
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sprachwahl__wechsel:hover,
.sprachwahl__wechsel:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ==========================================================================
   Shop-Seiten von WooCommerce
   ========================================================================== */

/* Huelle. Die Muster dieses Themes bringen ihre .container selbst mit, die
   Seiten von WooCommerce nicht — sie stehen roh im Inhaltsbereich. Gemessen
   bei 1280 px: Der Inhalt der Anmeldeseite begann bei x=0, waehrend Kopf,
   Fuss und alle uebrigen Seiten bei x=64 mit 1152 px Breite stehen. */
/* Die Auswahl ist bewusst eine Stufe spezifischer als noetig aussieht:
   WooCommerce bringt eine eigene Regel mit (.woocommerce-account main
   .woocommerce, 0-2-1), die seine Seiten auf contentSize begrenzt — 68ch,
   also 1000 px. Der Rest der Website steht bei 72rem. Ohne die zusaetzliche
   Klasse gewinnt WooCommerce, und die Anmeldung stuende 76 px weiter innen
   als Kopf und Fuss. Vom Browser erfragt, nicht geraten. */
/* Rechtstexte der IT-Recht Kanzlei.

   Sie kommen als ein Block aus der Schnittstelle und bringen keine eigene
   Breite mit. Ohne diese Regel liefen sie von Fensterrand zu Fensterrand --
   auf einem breiten Bildschirm ueber 1900 px lange Zeilen, links sogar bis
   unter den Rand geschoben (Rueckmeldung Dirk, 18.09.2026).

   Dieselbe Breite und derselbe Rand wie .container, damit Impressum,
   Datenschutz, AGB und Widerruf genauso stehen wie jede andere Seite. */
/* Nicht "> .agb_content": Auf der englischen Route liegt ein zusaetzliches div
   dazwischen, und die Regel fiel dort aus -- auf Deutsch sassen die Texte im
   Rahmen, auf Englisch liefen sie weiter ueber die volle Breite
   (18.09.2026 im Browser nachgemessen). */
.entry-content.wp-block-post-content .agb_content,
.entry-content.wp-block-post-content > .woocommerce,
.entry-content.wp-block-post-content > .wp-block-woocommerce-cart,
.entry-content.wp-block-post-content > .wp-block-woocommerce-checkout {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
  padding-block: var(--space-8);
}

/* Namenskollision aufloesen.

   Das Gestaltungssystem definiert .form-row als Flex-Zeile — Beschriftung
   und Feld nebeneinander. WooCommerce benutzt denselben Klassennamen fuer
   seine GESTAPELTEN Zeilen. Das Ergebnis war im Anmeldeformular zu
   besichtigen: Das Passwortfeld stand neben seiner Beschriftung und war
   entsprechend schmal, der Knopf "Anmelden" klebte an der Ankreuzbox
   "Angemeldet bleiben".

   In unseren eigenen Mustern kommt .form-row nirgends vor. Die Regel hat
   hier also ausschliesslich Schaden angerichtet. */
.woocommerce .form-row {
  display: block;
}

/* Anmeldung und Registrierung schmal halten. Ein Eingabefeld ueber die
   volle Breite von 72rem ist unbedienbar — das Auge findet den Anfang der
   naechsten Zeile nicht wieder. */
.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 32rem;
  padding: var(--space-5);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.woocommerce-form-login label:not(.woocommerce-form-login__rememberme),
.woocommerce-form-register label {
  display: block;
  margin-block-end: var(--space-1);
  font-weight: var(--weight-medium);
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login .password-input,
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register .password-input {
  width: 100%;
}

/* "Angemeldet bleiben" bleibt eine Zeile, der Knopf kommt darunter. */
.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}

.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
  display: block;
  min-block-size: var(--target-min);
}

/* ==========================================================================
   Lizenzkarte im Kundenkonto
   ========================================================================== */

/* Die Karten stapeln sich; ohne Abstand kleben sie aneinander und lesen sich
   als eine lange Liste statt als einzelne Lizenzen. */
.dtpm-lizenz { margin-block-end: var(--space-6); }

/* Abstaende innerhalb der Karte. Sie stehen hier und nicht als allgemeine
   Regel auf .panel__body: Balken, Domainliste und Rueckmeldung bringen schon
   eigene Abstaende mit, und eine Regel fuer "jedes Geschwister" wuerde sie
   verdoppeln. */
.dtpm-lizenz .dl,
.dtpm-lizenz .usage { margin-block-start: var(--space-5); }

.dtpm-lizenz__hinweis {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
}

/* Auf schmalen Geraeten faellt der Kopierknopf unter den Schluessel. Dort
   soll er die Breite nehmen — wie der Aufladen-Knopf am Fuss derselben
   Karte. Ein halbbreiter Knopf ueber einem breiten sieht aus wie ein
   Versehen. */
@media (max-width: 30rem) {
  .dtpm-lizenz .key-row .btn { flex: 1 0 100%; }
}

/* ==========================================================================
   Guthaben aufladen (Kundenkonto, unter jeder Lizenz)
   ========================================================================== */

/* Das Formular kommt aus dem Shop-Plugin (dtpm-shop, guthaben-aufladen.php)
   und stand zunaechst ohne jede Regel da: Beschriftung, Auswahlfeld und Knopf
   in einer Zeile, wie der Browser sie eben setzt.

   Es sitzt am Fuss der Lizenzkarte und ist gegen sie abgesetzt: heller Grund
   auf weisser Karte. Die Karte sagt "das ist diese Lizenz", der abgesetzte
   Fuss sagt "und das kann man hier tun". Ohne den Unterschied liest sich die
   Auswahl wie eine weitere Angabe zur Lizenz statt wie eine Handlung. */
.dtpm-aufladen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface-muted);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Die Beschriftung nimmt die ganze Zeile. Nebeneinander mit dem Auswahlfeld
   waere sie kuerzer, aber dann steht der Satz "Gespraechsguthaben fuer diese
   Lizenz" auf schmalen Geraeten in zwei Zeilen neben einem eingequetschten
   Feld. */
.dtpm-aufladen__beschriftung {
  flex: 1 0 100%;
  font-weight: var(--weight-medium);
}

/* Das Auswahlfeld darf wachsen, aber nicht unter die Lesbarkeit schrumpfen:
   Die Paketnamen tragen einen Preis mit sich ("Gespraechsguthaben 5.000 —
   249,00 €"), und abgeschnitten ist er wertlos. */
.dtpm-aufladen__auswahl {
  flex: 1 1 18rem;
  min-inline-size: 0;
  min-block-size: var(--target-min);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

/* Sein Aussehen steht bei den Schaltflaechen weiter oben, zusammen mit
   .btn--secondary. Hier nur die Lage: Er schrumpft nicht, wenn das
   Auswahlfeld wachsen will. */
.dtpm-aufladen__knopf {
  flex: 0 0 auto;
}

/* Unter 30rem stapeln beide ueber die volle Breite. Nebeneinander blieben
   bei 320px rund 7rem fuer das Auswahlfeld — zu wenig fuer eine Zahl mit
   Preis. */
@media (max-width: 30rem) {
  .dtpm-aufladen__auswahl,
  .dtpm-aufladen__knopf {
    flex: 1 0 100%;
  }
}

/* ==========================================================================
   Vergleichstabelle der Pakete
   ========================================================================== */

/* Zweispaltige Merkmalsliste, solange Platz ist. */
@media (min-width: 48rem) {
  .feature-list--zwei {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }
}

.vergleich th[scope="row"] {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* Betraege in gleicher Dickte, damit die Spalte ausgerichtet liest. */
.vergleich td:nth-child(5),
.vergleich td:nth-child(6) {
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* --- Fuenf Karten statt sechs Spalten ---------------------------------

   Fuenf Pakete mal sechs Spalten sind auf 375 px keine Tabelle. Unterhalb
   von 48rem wird deshalb jede Zeile zu einer Karte, und die
   Spaltenbeschriftung wiederholt sich in jeder Zelle.

   Warum die Rollen am Markup stehen: Ein geaendertes `display` entzieht
   Tabellen in den meisten Screenreadern die Semantik — aus Zeilen und
   Zellen werden dann blosse Absaetze. Die ausdruecklichen role-Angaben im
   Muster halten die Tabelle zusammen, gleich wie sie aussieht. */
@media (max-width: 47.999rem) {
  /* table.data setzt min-inline-size: 40rem, damit breite Tabellen im
     Wrapper waagerecht scrollen statt zu quetschen. In der Kartenansicht
     ist das falsch: Die Karten waren 640 px breit und wurden bei 375 px
     abgeschnitten — "Ferndiagnose, Eskalation an einen Mensche…". Im
     Bildschirmfoto zu sehen gewesen, vom ersten Test nicht bemerkt, weil
     er nur das Dokument auf Ueberlauf geprueft hat und nicht die Tabelle. */
  .table-wrap--karten {
    overflow: visible;
    border: 0;
    background-color: transparent;
    border-radius: 0;
  }

  /* table.data ist spezifischer als .vergleich (0-1-1 gegen 0-1-0) — mit
     der blossen Klasse blieb die Mindestbreite stehen und die Seite scrollte
     waagerecht. Gemessen: Dokument 656 px breit bei 375 px Fenster. */
  table.data.vergleich {
    min-inline-size: 0;
  }

  /* Die Beschriftung bleibt als caption stehen (sie benennt die Tabelle
     fuer Screenreader), braucht in der Kartenansicht aber die volle
     Breite — sonst quetscht sie sich in eine schmale Spalte. */
  .vergleich caption {
    display: block;
    inline-size: auto;
    text-align: start;
    padding-inline: 0;
    border-block-end: 0;
  }

  .vergleich thead {
    /* Nicht display:none — das nimmt sie auch dem Screenreader. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .vergleich,
  .vergleich tbody,
  .vergleich tr,
  .vergleich th,
  .vergleich td {
    display: block;
    width: auto;
  }

  .vergleich tr {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
  }

  .vergleich th[scope="row"] {
    font-size: var(--text-md);
    padding: 0 0 var(--space-3);
    border-block-end: var(--border-thin) solid var(--color-border);
    margin-block-end: var(--space-3);
  }

  .vergleich td {
    padding: var(--space-1) 0;
    border: 0;
  }

  .vergleich td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: none;
  }
}

/* Fuenf Kacheln statt drei. .tier-grid steht ab 52rem auf drei Spalten —
   fuer fuenf Pakete braucht es eine eigene Staffel, und sie muss
   spezifischer sein als jene Regel. */
.tier-grid.tier-grid--fuenf {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .tier-grid.tier-grid--fuenf { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .tier-grid.tier-grid--fuenf { grid-template-columns: repeat(5, 1fr); }
  /* Fuenf Spalten sind eng. Die Kacheln duerfen deshalb schmaler werden,
     die Schaltflaeche bleibt aber bedienbar gross. */
  .tier-grid--fuenf .tier { padding: var(--space-4); gap: var(--space-3); }
  .tier-grid--fuenf .price__amount,
  .tier-grid--fuenf .tier__price { font-size: var(--text-xl); }
}

/* Die Schaltflaeche ans untere Ende, damit sie ueber alle Kacheln auf einer
   Linie steht. Ohne das haengt sie dort hoeher, wo weniger Text steht — bei
   "Free" fehlt die Zeile "netto, zzgl. USt", bei "Mehrfach" kommt die
   Auszeichnung dazu. */
.tier .btn {
  margin-block-start: auto;
}

/* ==========================================================================
   Fragen und Antworten
   ========================================================================== */

/* Als <details>, nicht als Klapptext mit JavaScript: Tastaturbedienung und
   Vorlesbarkeit bringt das Element mit, und es funktioniert auch ohne
   Skript. Ein Produkt, das Skripte aufhaelt, sollte nicht selbst von einem
   abhaengen. */
.faq {
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  max-width: var(--measure);
}

.faq__eintrag + .faq__eintrag {
  border-block-start: var(--border-thin) solid var(--color-border);
}

.faq__frage {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  /* Mindestgroesse fuer Zeigegeraete. */
  min-block-size: var(--target-min);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.faq__frage:hover {
  background-color: var(--color-surface-muted);
}

.faq__frage:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(var(--focus-offset) * -1);
}

.faq__antwort {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.faq__antwort p { margin: 0; }

/* --- Hinweis ueber einem Rechtstext ----------------------------------
   Steht auf englischen Seiten ueber AGB und Widerrufsbelehrung, solange
   die nur auf Deutsch vorliegen. Bewusst ruhig gehalten: Es ist ein
   Sachhinweis, keine Warnung -- der deutsche Text ist ja der gueltige,
   nicht der Notbehelf. Verschwindet von selbst, sobald die Uebersetzung
   der Kanzlei eintrifft. */
.rechtstext-hinweis {
  color: var(--color-text-muted);
  max-width: var(--measure);
  background: var(--color-surface-muted);
  border-left: var(--border-thick) solid var(--color-border-strong);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

/* Produktzeichen ueber der Rubrikzeile (16.09.2026).
   Die Datei bringt Form und Farbe selbst mit; hier steht nur der Abstand.
   Gehoert hierher und nicht in style.css -- die traegt nur den Themenkopf. */
.produktzeichen {
  /* Nur unten Abstand; oben regelt ihn der umgebende Stapel. Vorher stand hier
     "margin: 0", und im Produktkasten klebte das Zeichen an der Auszeichnung
     darueber (16.09.2026). */
  margin-block-end: var(--space-3);
  line-height: 0;
}

.produktzeichen img {
  width: 64px;
  height: 64px;
}

/* ==========================================================================
   Bruecke zu den Store-Grafiken (16.09.2026)
   --------------------------------------------------------------------------
   Uebernommen sind die Navy-Flaeche und der technische Ton der Beschriftung.
   Eine eigene Farbe je Produktfamilie war am 16.09.2026 kurz eingebaut und auf
   Entscheidung von Dirk wieder entfernt: Die Seite bleibt einfarbig, die
   Wiedererkennung tragen die Zeichen selbst.
   ========================================================================== */

/* Der Fuss traegt die Navy-Flaeche der Zeichen. Weiss erreicht darauf 15,7:1,
   Silber 10,0:1. Die Akzentfarbe taugt hier NICHT (2,3:1) -- deshalb tragen
   die Verweise im Fuss Silber und werden beim Zeigen hell, nicht blau. */
.site-footer {
  background-color: var(--color-marke);
  border-top-color: var(--color-marke);
  color: var(--color-marke-text);
}

.site-footer a { color: var(--color-marke-text); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--wp--custom--color--text-on-accent); }

/* Zeichen und Ueberschrift in einer Zeile -- so stehen die Produkte in den
   Uebersichten von /compliance und /ai (Entscheidung Dirk, 16.09.2026).
   Die verworfene Variante mit dem Banner ueber die ganze Kastenbreite ist
   wieder entfernt; die Bilder liegen noch in assets/marken/. */
.produktzeile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.produktzeile img {
  flex: none;
  width: 48px;
  height: 48px;
}

.produktzeile h3 { margin: 0; }

/* Umschalter der Zahlungsweise ueber den Preiskarten (17.09.2026).
   Vorbild cookieyes.com: eine Wahl fuer alle Karten, in der Karte steht nur
   ein Preis. */
.zeitraum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.zeitraum__vorteil {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-success);
  background-color: var(--color-success-subtle);
  border: var(--border-thin) solid var(--color-success-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
}

.zeitraum__knoepfe {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.zeitraum__knopf {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
}

.zeitraum__knopf.is-aktiv {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.zeitraum-block > * + * { margin-top: var(--space-2); }

/* Der Preis traegt die Entscheidung -- er ist die groesste Zahl in der Karte.
   Gleiche Groesse wie auf der Preisseite von DT Consent (.price__amount),
   damit beide Familien gleich aussehen. Ziffern in gleicher Breite, sonst
   springen die Betraege beim Umschalten (17.09.2026). */
.tier__price {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.tier__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Der Knopf steht in jeder Karte unten auf gleicher Hoehe, egal wie viel
   darueber steht. "auto" schiebt ihn ans Ende der Karte. */
.tier__fuss {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* Innerhalb der Rechtstexte: Zeilenlaenge und Abstaende. Der Text kommt
   fertig formatiert aus der Schnittstelle; gesetzt wird er hier. */
.agb_content h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
}

.agb_content h3 {
  font-size: var(--text-md);
  margin-top: var(--space-5);
}

.agb_content p,
.agb_content li {
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
}

.agb_content p + p { margin-top: var(--space-3); }

.agb_content ul,
.agb_content ol {
  margin-top: var(--space-3);
  padding-inline-start: var(--space-5);
}


/* Der Weg hinaus steht abgesetzt vom Rest der Lizenzkarte: Er gehoert dazu,
   aber er draengt sich nicht auf. */
.dtpm-kuendigen {
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-border);
}