/* Bau-Ticker – eine Datei, keine Abhängigkeit, nichts von fremden Hosts. */

:root {
  --ink: #111a2b;
  --ink-soft: #566173;
  --paper: #f6f8fb;
  --paper-raised: #ffffff;
  --line: #e1e6ee;
  --accent: #0b63f6;
  --accent-ink: #ffffff;
  --accent-soft: #e6efff;
  --warn: #b7791f;
  --danger: #b3261e;
  --danger-text: #b3261e;
  --ok: #2b7a4b;
  --success: #1a7340;
  --success-soft: #e2f3e9;
  --radius: 10px;
  --measure: 62ch;
}

/* Dunkel: automatisch nach dem System, ausser jemand hat „hell" gewählt – oder von Hand
   „dunkel" (data-theme vom Server, siehe ColourScheme). Die Tokens stehen deshalb zweimal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ebf1;
    --ink-soft: #9aa3b2;
    --paper: #10141b;
    --paper-raised: #181e28;
    --line: #29313e;
    --accent: #4d9fff;
    --accent-ink: #0d1626;
    --accent-soft: #15284a;
    --success: #5fd394;
    --success-soft: #15301f;
    --danger-text: #ff8a80;
  }
}

:root[data-theme="dark"] {
  --success: #5fd394;
  --success-soft: #15301f;
  --danger-text: #ff8a80;
  --ink: #e8ebf1;
  --ink-soft: #9aa3b2;
  --paper: #10141b;
  --paper-raised: #181e28;
  --line: #29313e;
  --accent: #4d9fff;
  --accent-ink: #0d1626;
  --accent-soft: #15284a;
}

/* Etiketten im Dunkeln: Grund aus der Fläche, Schrift im Gewerkton */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.trade-chip, .crew-more-chips li) { background: color-mix(in srgb, var(--trade) 22%, var(--paper-raised)); color: var(--trade-night); }
}
:root[data-theme="dark"] :is(.trade-chip, .crew-more-chips li) { background: color-mix(in srgb, var(--trade) 22%, var(--paper-raised)); color: var(--trade-night); }

/* Scrollbalken und Formularfelder folgen der Wahl. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

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

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 0; }
h3 { font-size: 1.1rem; }

p, li { max-width: var(--measure); }
/* Nur Fliesstext: In kurzen Karten gleicht „pretty“ die Zeilen aus und bricht zu früh um. */
section > p { text-wrap: pretty; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
/* Seiten mit Text: eine mittige Spalte, die der Text ganz ausfüllt – statt einer
   Zeilenlänge, die in der breiten Fläche links hängen bleibt. */
.wrap-narrow { width: min(800px, 100% - 32px); }
.wrap-narrow p, .wrap-narrow li { max-width: none; }

/* Kopf und Fuss */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper-raised); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.1rem; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.nav a:hover { color: var(--ink); }
.nav a.button { color: var(--accent-ink); }
.nav a.button-secondary { color: var(--accent); }
.nav-account { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.header-end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--paper-raised); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.site-footer { border-top: 1px solid var(--line); margin-top: 64px; font-size: .9rem; color: var(--ink-soft); }
.footer-row { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; flex-wrap: wrap; }
.footer-row nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-row a { color: var(--ink-soft); }

/* Bausteine */
.button {
  display: inline-block; padding: 12px 20px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
  cursor: pointer; font-size: 1rem; font-family: inherit;
}
.button:hover { filter: brightness(1.08); }
.button-small { padding: 8px 14px; font-size: .95rem; }
.button-secondary { background: var(--accent-soft); color: var(--accent); }
.button-danger { background: var(--danger); color: #fff; }
/* Zurückhaltend gefährlich: rot umrandet statt rot gefüllt – „Konto löschen …“ führt erst zur Rückfrage.
   Der Rand als Schatten, damit der Knopf so hoch bleibt wie die anderen. */
.button-danger-quiet { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.button-danger-quiet:hover { filter: none; background: color-mix(in srgb, var(--danger-text) 8%, transparent); }

.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 8px; }
.lede { font-size: 1.15rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.note { font-size: .9rem; color: var(--ink-soft); }

section { padding-block: 40px; }

/* Startseite: Abschnittsköpfe mittig über der ganzen Breite */
.section-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.section-head p, .center-note { margin-inline: auto; text-wrap: balance; }
.center-note { text-align: center; margin: 20px auto 0; }

/* Text neben Überschrift – füllt die Breite, ohne die Zeilen zu überdehnen */
.split { display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px 56px; align-items: start; }
.split p { max-width: none; }
section + section { border-top: 1px solid var(--line); }

/* Hero: links der Text, rechts die App, darunter die Handwerker über die ganze Breite */
.hero {
  padding-block: 24px 0; display: grid; column-gap: 40px; row-gap: 0;
  grid-template-columns: 1.25fr 1fr; grid-template-areas: "head phones" "body phones" "crew crew";
}
.hero-head { grid-area: head; align-self: end; }
.hero-body { grid-area: body; }
.hero-phones { grid-area: phones; }
.crew { grid-area: crew; }
.hero-text h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); margin-bottom: .35em; }
.hero-text .lede { margin-block: 0 20px; }

/* Zwei Geräte, leicht versetzt – Rahmen und Schatten sind im Bild */
.hero-phones { position: relative; min-height: 400px; }
.hero-phone { position: absolute; width: 52%; height: auto; }
.hero-phone-front { left: 6%; bottom: -4%; z-index: 1; }
.hero-phone-back { right: 0; top: -2%; transform: rotate(5deg); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button-cta {
  font-size: 1.15rem; padding: 16px 30px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
.button-cta:hover { transform: translateY(-1px); }
.cta-note { font-size: .92rem; color: var(--ink-soft); margin: 12px 0 0; }

.store-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  border-radius: 10px; background: var(--ink); color: var(--paper); line-height: 1.1; font-weight: 600;
}
.store-badge small { display: block; font-size: .72rem; font-weight: 500; opacity: .75; }
.store-badge-muted { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }

/* Geräte in „So funktioniert's": freigestellt, Rahmen und Schatten sind im Bild */
.device { display: block; width: 100%; max-width: 260px; height: auto; }

/* Die Handwerker: jede Person in einem Bogenfenster in der Farbe ihres Gewerks, das Bild
   genau auf den Bogen zugeschnitten; das Etikett wie in der App. */
.crew { list-style: none; margin: 20px auto 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr) 1.55fr; gap: 10px; max-width: 1040px; width: 100%; }
.crew-member { position: relative; max-width: none; border-radius: 999px 999px 0 0; overflow: hidden; background: color-mix(in srgb, var(--trade) 45%, var(--paper)); }
.crew-member img { display: block; width: 100%; height: auto; }

.trade-chip {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 12px); text-align: center; line-height: 1.3;
  padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: color-mix(in srgb, var(--trade) 24%, #fff); color: var(--trade-ink);
  box-shadow: 0 2px 8px rgba(17, 26, 43, .16);
}
/* Die Töne aus TradePalette.swift – base, ink und night (Schrift im Dunkeln). Mindestens
   6.5 : 1 auf dem getönten Grund, nachgerechnet 02.10.2026 – TradePaletteTests hält es in der App. */
.trade-electrical { --trade: #ffc93d; --trade-ink: #705200; --trade-night: #ffcf45; }
.trade-plumbing { --trade: #5c9cf5; --trade-ink: #1a4aa1; --trade-night: #9ec4fa; }
.trade-roofing { --trade: #f2705c; --trade-ink: #8c2b1c; --trade-night: #f7ada1; }
.trade-timber { --trade: #e0a359; --trade-ink: #734a17; --trade-night: #ebc28f; }
.trade-painting { --trade: #f282c7; --trade-ink: #8c2b66; --trade-night: #f7b0db; }
.trade-structural { --trade: #70a8db; --trade-ink: #1f5287; --trade-night: #a6c9eb; }
.trade-facade { --trade: #40c7b5; --trade-ink: #0f5c54; --trade-night: #7ad9cc; }
.trade-windows { --trade: #63c4f5; --trade-ink: #125980; --trade-night: #8fd6fa; }
.trade-heating { --trade: #ff9c4a; --trade-ink: #854000; --trade-night: #ffba80; }
.trade-solar { --trade: #a8d44f; --trade-ink: #405c0a; --trade-night: #bade70; }
.trade-interiors { --trade: #b58cf2; --trade-ink: #5c30a3; --trade-night: #d4bafa; }
.trade-kitchen { --trade: #8c94f0; --trade-ink: #3840a3; --trade-night: #bdbff7; }
.trade-landscaping { --trade: #6bcc78; --trade-ink: #145e26; --trade-night: #96db9e; }
.trade-civil { --trade: #c7a87d; --trade-ink: #664f29; --trade-night: #dbc7a8; }
.trade-demolition { --trade: #f07a82; --trade-ink: #8c2b36; --trade-night: #f7b0b5; }

/* Die sechste Kachel: neutral und ohne Bogen – dort steht keine Person –, darin die übrigen
   Gewerke als Etiketten */
.crew-more {
  max-width: none; border-radius: 18px 18px 0 0; background: var(--paper-raised);
  border: 1px solid var(--line); border-bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 12px 10px 14px; text-align: center;
}
.crew-more-title { margin: 0 0 8px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.crew-more-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.crew-more-chips li {
  max-width: none; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; line-height: 1.5;
  background: color-mix(in srgb, var(--trade) 24%, #fff); color: var(--trade-ink);
}

/* Abdeckung: Kantone und Arten des Vorhabens, gleich nach dem Hero */
.coverage { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding-block: 28px; }
.coverage-block { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.coverage-block .eyebrow { margin-bottom: 12px; }
.coverage-block .note { margin: 14px 0 0; }
.canton-list, .worktype-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.canton-list li { max-width: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; }
.canton-code {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 30px; padding: 0 8px;
  border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 700; letter-spacing: .04em;
}
.canton-list li + li { margin-left: 10px; }
.worktype-list li {
  max-width: none; padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
}

/* Schritte mit Bildschirmen */
.steps { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.step-shot { margin: 0; display: grid; gap: 18px; justify-items: center; align-content: start; }
.step-shot figcaption { max-width: 300px; }
.step-shot .num { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .9rem; margin-bottom: 6px; }

/* Abschluss */
.cta-band { text-align: center; background: var(--accent-soft); border-radius: 18px; padding: 44px 24px; margin-top: 40px; border-top: 0; }
.cta-band p { margin: 0 auto 22px; color: var(--ink-soft); }
section + .cta-band { border-top: 0; }
.cta-band .cta-tip { margin: 22px auto 0; font-size: .9rem; max-width: 52ch; display: flex; gap: 10px; align-items: flex-start; justify-content: center; text-align: left; }
.cta-tip-icon { flex: none; color: var(--accent); margin-top: 1px; }
.cta-tip strong { color: var(--ink); font-weight: 600; }

/* Schritte, Preise */
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.step { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.step .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.plan { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan .price { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
.plan ul { padding-left: 18px; margin: 12px 0 18px; flex: 1; }
.plan .button { align-self: flex-start; }

/* Formulare */
.form { max-width: 480px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .95rem; }
.field input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink); }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field .hint { font-size: .85rem; color: var(--ink-soft); }
.field .error, .validation-summary-errors { color: var(--danger); font-size: .9rem; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.callout { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.callout.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--paper-raised)); }

/* Konto */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; max-width: 640px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; }

/* Konto-Übersicht: Begrüssung, darunter Karten wie die Abdeckung auf der Startseite */
.account { padding-top: 32px; }
.account-head { margin-bottom: 24px; }
.account-head h1 { margin-bottom: .3em; overflow-wrap: anywhere; }
.account-head .lede { margin: 0; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
  display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere;
}
.account-card-form { margin-bottom: 16px; }
.account-card-featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.account-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.account-card-head h2 { font-size: 1.15rem; margin: 0; }
/* Icon-Kachel: Schmuck, nicht klickbar – deshalb grau statt blau (Blau heisst „hier kannst du etwas tun“). */
.account-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line);
}
.account-card p { margin: 0 0 10px; }
.account-card .account-card-action { margin: auto 0 0; padding-top: 8px; }
.account-card .account-card-foot { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.account-card .callout { margin: 14px 0 0; }

/* Die Stufe als Preisschild: Name gross und fett in Textfarbe, darunter gedämpft der Preis –
   ein Zustand, kein Knopf. Eine geplante Änderung steht klein darunter: „→ ab 4. November 2026: Region“. */
.tier-tag { display: grid; gap: 2px; margin: 0; }
.tier-tag-name { font-size: 2.1rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.tier-tag-detail { font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.account-tier { display: grid; gap: 6px; margin: 2px 0 16px; }
.account-card .account-tier p { margin: 0; }
.tier-change { color: var(--ink-soft); font-size: .95rem; }
.tier-change::before { content: "→ "; }
.tier-change strong { color: var(--ink); }
.account-plan-change { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); }

/* Kauf in der Karte „Deine Stufe“: je Stufe eine Zeile, Knopf rechts */
.account-offers { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 10px; }
.account-offers li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
}
.account-offer-text { display: grid; gap: 2px; min-width: 0; }
.account-offer-text small { font-weight: 500; color: var(--ink-soft); }
.account-uid { margin-bottom: 8px; }
.account-uid .form { gap: 10px; }

/* Stammdaten: Label als gedämpfte Spalte mit fester Breite, mobil darüber */
.account-facts { display: grid; gap: 14px; margin: 0 0 18px; }
.account-facts > div { display: grid; grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
/* Ohne „Ändern“ (Formular offen) reicht der Wert bis an den Rand. */
.account-facts > div > dd:last-child:not(.account-fact-action) { grid-column: 2 / -1; }
.account-facts dt { color: var(--ink-soft); font-size: .85rem; letter-spacing: .01em; padding-top: .2em; }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-facts dd > .note { margin-left: 6px; }
.account-facts dd > .account-locked-hint { display: block; margin: 2px 0 0; }
/* Häkchen direkt hinter der Adresse: die Adresse bricht in sich um, das Häkchen bleibt daneben */
.account-email { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: bottom; }
.account-email-address { min-width: 0; overflow-wrap: anywhere; }
.account-check { flex: none; display: inline-flex; color: var(--success); }
.account-check path { stroke: var(--paper-raised); }
.account-unconfirmed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }

/* Ändern im Betrieb: kleiner Link rechts in der Zeile, das Formular an Stelle des Werts */
.account-facts .account-fact-action { font-size: .9rem; font-weight: 600; white-space: nowrap; padding-top: .1em; }
.account-edit-form { gap: 10px; max-width: none; }
.account-edit-form input { width: 100%; min-width: 0; box-sizing: border-box; }
.account-edit-form .field { gap: 4px; }
.account-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-card .account-card-callout { margin: 0 0 14px; }

/* Konto: alle Aktionen als Knöpfe in einer Reihe, die Erklärung darunter */
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.account-actions form { margin: 0; }

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

/* Nach dem Kauf: grosses Häkchen, Titel, nächste Schritte – alles mittig */
.success { text-align: center; padding-top: 48px; }
.success-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 128px; height: 128px; margin-bottom: 20px;
  border-radius: 50%; background: var(--success-soft); color: var(--success);
}
.success h1 { max-width: 22ch; margin-inline: auto; }
.success .lede { max-width: 52ch; margin: 0 auto 12px; }
.success .tier-tag { justify-items: center; margin: 4px 0 14px; }
.success-reload { margin: 0 auto; }
.success-steps-title { font-size: 1.15rem; margin: 36px 0 14px; }
.success-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 560px; display: grid; gap: 12px; text-align: left; }
.success-steps li {
  max-width: none; display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
}
.success-steps li > div { display: grid; gap: 2px; }
.success-steps li span:not(.num) { color: var(--ink-soft); }
.success-steps .num {
  flex: none; display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .9rem; margin-top: 1px;
}
.success-actions { justify-content: center; margin-top: 28px; }
.success-help { margin: 16px auto 0; }

table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th, table.list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { color: var(--ink-soft); font-weight: 600; }
.overflow { overflow-x: auto; }

/* Rechtstexte */
.legal h2 { font-size: 1.25rem; margin-top: 28px; }


@media (max-width: 760px) {
  .hero, .grid-3, .plans, .steps, .split, .coverage { grid-template-columns: 1fr; }
  .hero { padding-top: 24px; grid-template-columns: 1fr; grid-template-areas: "head" "crew" "body"; row-gap: 20px; }
  .hero-text { text-align: center; }
  .hero-text p { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .hero-phones { display: none; }
  .crew { margin-top: 0; }
  /* Auf dem Handy drei statt fünf – sonst werden die Gesichter zu klein */
  .crew { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .crew > li:nth-child(2), .crew > li:nth-child(4) { display: none; }
  .crew-more { grid-column: 1 / -1; border-radius: 16px; border-bottom: 1px solid var(--line); padding: 12px; }
  .trade-chip { font-size: .68rem; padding: 3px 8px; bottom: 8px; }
  .kv { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .account-facts > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .account-facts dt { grid-column: 1 / -1; }
  .account-facts > div > dd:not(.account-fact-action) { grid-column: 1; }
  .account-facts > div > dd:last-child:not(.account-fact-action) { grid-column: 1 / -1; }
  .success { padding-top: 32px; }
  .success-mark { width: 104px; height: 104px; }
  .success-mark svg { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button { transition: filter .15s ease, transform .15s ease; }
}

/* Plattform: Kennzahlen und Balken – ohne Skript, nur Breite in Prozent */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi-value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-label { color: var(--ink-soft); font-size: .9rem; }
.grid-2 { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 3ch; gap: 10px; align-items: center; font-size: .95rem; }
.bar-label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { display: block; height: 12px; background: var(--accent-soft); border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; }
table.nums td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); } .neg { color: var(--danger); }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 110px 1fr 3ch; } }

/* Plattform: Reiter, Liste, Detailseite – nur für Marc, aber im selben Kleid wie die Website */
.platform-nav { display: flex; align-items: center; gap: 4px 20px; margin-top: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.platform-nav-title { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.platform-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.platform-nav li { max-width: none; }
.platform-nav a { display: block; padding: 10px 12px; text-decoration: none; color: var(--ink-soft); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.platform-nav a:hover { color: var(--ink); }
.platform-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.platform-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.platform-page { padding-top: 24px; }
.platform-page h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.platform-page h1 .badge { font-size: .85rem; }
.platform-h2 { font-size: 1.25rem; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.crumbs { margin: 0 0 8px; font-size: .95rem; }
.crumbs a { text-decoration: none; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .8rem; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.badge-muted { background: color-mix(in srgb, var(--ink-soft) 16%, var(--paper-raised)); color: var(--ink-soft); }
.badge-danger { background: color-mix(in srgb, var(--danger) 14%, var(--paper-raised)); color: var(--danger); }
:root[data-theme="dark"] .badge-danger { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-danger { color: #ff8a80; } }

/* Die ganze Zeile führt zum Konto – ohne Skript: der Link spannt sich über die Zeile */
table.rows tbody tr { position: relative; }
table.rows tbody tr:hover { background: var(--accent-soft); }
table.rows .row-link { font-weight: 600; text-decoration: none; color: var(--ink); }
table.rows .row-link::after { content: ""; position: absolute; inset: 0; }
table.rows .row-link:focus-visible { outline: none; }
table.rows tbody tr:has(.row-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
table.rows tr.is-blocked td { color: var(--ink-soft); }
table.rows tr.is-blocked td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.nowrap { white-space: nowrap; }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.panel { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.panel h2 { font-size: 1.1rem; }
.panel .kv { grid-template-columns: 150px 1fr; }
.panel .kv + .kv { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.panel dd { overflow-wrap: anywhere; }
ul.plain { list-style: none; padding: 0; margin: 0; }
.callout { margin-block: 12px; }
.callout.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--paper-raised)); }

.inline-form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.inline-form label, .check { display: inline-flex; gap: 6px; align-items: center; }
.platform-page select, .platform-page input[type="number"], .field textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink); }
.field textarea { resize: vertical; }
.choice { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.choice legend { font-weight: 600; font-size: .95rem; margin-bottom: 6px; padding: 0; }

.mail-frame { display: block; width: 100%; height: 900px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

@media (max-width: 760px) {
  .panels { grid-template-columns: 1fr; }
  .panel .kv { grid-template-columns: 1fr; }
  .platform-nav { gap: 4px 12px; }
  .mail-frame { height: 700px; }
}

/* ── Plattform Phase 1b: Pillen, Support-Ansicht, Betrieb ─────────────────────────────
   Pillen für Zustände (bestätigt, gesperrt, Registrierung offen). Die Schrift ist dunkler
   bzw. heller als die Grundtöne --ok/--warn/--danger, weil diese auf der hellen Pillenfläche
   zum Teil unter 4.5:1 bleiben (--warn: 3.1:1). Gemessen: hell ≥ 5.4:1, dunkel ≥ 5.5:1. */
:root { --pill-ok-ink: #1f6a3d; --pill-warn-ink: #8a5300; --pill-danger-ink: #a3221b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pill-ok-ink: #7fd8a1; --pill-warn-ink: #f2b85b; --pill-danger-ink: #ff8a80; }
}
:root[data-theme="dark"] { --pill-ok-ink: #7fd8a1; --pill-warn-ink: #f2b85b; --pill-danger-ink: #ff8a80; }

.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: .8rem; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.pill-ok { color: var(--pill-ok-ink); background: color-mix(in srgb, var(--ok) 14%, var(--paper-raised)); }
.pill-warn { color: var(--pill-warn-ink); background: color-mix(in srgb, var(--warn) 14%, var(--paper-raised)); }
.pill-danger { color: var(--pill-danger-ink); background: color-mix(in srgb, var(--danger) 14%, var(--paper-raised)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.pill-ok, .pill-warn, .pill-danger) { background: color-mix(in srgb, currentColor 16%, var(--paper-raised)); }
}
:root[data-theme="dark"] :is(.pill-ok, .pill-warn, .pill-danger) { background: color-mix(in srgb, currentColor 16%, var(--paper-raised)); }
.pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Support-Ansicht und Stufe auf der Detailseite */
.panel h3 { font-size: 1rem; margin: 20px 0 8px; }
.panel h3:first-of-type { margin-top: 0; }
.panel-wide { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.chips li { max-width: none; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink-soft) 12%, var(--paper-raised)); font-size: .85rem; }
.tier-form { display: grid; gap: 14px; max-width: 640px; }
.tier-form .field select, .tier-form .field input[type="number"] { max-width: 16em; }
.tier-form .hint { font-size: .85rem; color: var(--ink-soft); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Mail-Vorschau: Auswahl als Reiter, ohne Skript */
.mail-tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; }
.mail-tabs li { max-width: none; }
.mail-tabs a { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.mail-tabs a:hover { color: var(--ink); }
.mail-tabs a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mail-text { white-space: pre-wrap; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: .9rem; max-width: 760px; overflow-wrap: anywhere; }

/* ── Plattform: Quellen (/platform/quellen) ────────────────────────────────────────────
   Eigener Block am Ende, damit er sich mit anderen Zweigen ohne Konflikt zusammenführen
   lässt. Rot heisst „hier stimmt etwas nicht" (Lauf fehlgeschlagen, zu lange nichts Neues),
   Gelb „noch kein Lauf protokolliert", Grau „ausgeschaltet". Das Diagramm ist ein
   serverseitiges SVG – kein Skript nötig. */
.badge-ok { background: color-mix(in srgb, var(--ok) 14%, var(--paper-raised)); color: var(--ok); }
.badge-warn { background: color-mix(in srgb, var(--warn) 16%, var(--paper-raised)); color: var(--warn); }
table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sources .source-id { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }
table.sources .source-warning { margin-top: 4px; color: var(--danger); font-weight: 600; font-size: .9rem; }
table.sources .stale { color: var(--danger); font-weight: 600; }
table.rows tr.is-alarm td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
table.rows tr.is-alarm td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
table.rows tr.is-notice td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
table.rows tr.is-inactive td, table.rows tr.is-inactive .row-link { color: var(--ink-soft); }
table.rows tr.is-inactive .row-link { font-weight: 500; }
table.runs tr.is-failed td { color: var(--danger); }
table.runs tr.is-failed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.runs tr.is-failed td, table.runs tr.is-failed + .run-failures td { border-bottom-color: transparent; }
table.runs .run-failures td { text-align: left; padding-top: 0; font-size: .88rem; overflow-wrap: anywhere; }
table.runs .run-failures li + li { margin-top: 2px; }
.day-chart { margin: 12px 0 0; max-width: 760px; }
.day-chart svg { display: block; width: 100%; height: 140px; }
.day-chart rect { fill: var(--accent); }
.day-chart rect.weekend { fill: color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.day-chart line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.day-chart figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.day-chart figcaption span:nth-child(2) { text-align: center; }
:root[data-theme="dark"] :is(table.sources .source-warning, table.sources .stale, table.runs tr.is-failed td) { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(table.sources .source-warning, table.sources .stale, table.runs tr.is-failed td) { color: #ff8a80; } }
@media (max-width: 760px) { .day-chart svg { height: 110px; } .day-chart figcaption span:nth-child(2) { display: none; } }
/* ── Plattform: Statistik – Diagramme, Gewinnzone, Annahmen ─────────────────────────────
   Eigener Block am Ende, damit er sich mit anderen Zweigen ohne Konflikt zusammenführen
   lässt. Die Diagramme zeichnet wwwroot/platform/statistik.js (Chart.js) in die Flächen
   .stats-chart; ohne Skript bleiben sie versteckt (hidden) und die Tabellen sprechen. */
.stats-chart { position: relative; height: 260px; margin: 12px 0 16px; padding: 12px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.stats-chart[hidden] { display: none; }
.stats-h3 { font-size: 1.05rem; margin-top: 24px; }
.stats-explain { margin-top: 16px; padding: 14px 18px; background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.stats-explain p { max-width: none; margin: 0; }
.stats-explain p + p { margin-top: 8px; color: var(--ink-soft); }
.stats-assumptions td { vertical-align: top; }
.stats-assumptions td:first-child { font-weight: 600; white-space: nowrap; }
.stats-assumptions td:last-child { white-space: nowrap; font-size: .85rem; }
@media (max-width: 760px) { .stats-chart { height: 220px; padding: 8px; } }
/* ── Rückfrage vor gefährlichen Aktionen (wwwroot/js/confirm.js) ──────────────────────────
   Natives <dialog>, über die Tokens hell und dunkel. Ohne Skript gibt es keinen Dialog –
   dann steht die Bestätigung als Häkchen oder Feld im Formular (.confirm-block). */
.confirm-dialog {
  width: min(440px, calc(100vw - 32px)); padding: 22px 24px 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-raised); color: var(--ink);
  box-shadow: 0 18px 48px rgb(0 0 0 / .28);
}
.confirm-dialog::backdrop { background: rgb(10 14 22 / .55); }
.confirm-dialog h2 { font-size: 1.15rem; margin: 0 0 10px; }
.confirm-dialog-detail p { margin: 0 0 8px; color: var(--ink-soft); font-size: .95rem; }
.confirm-dialog-buttons { justify-content: flex-end; margin-top: 18px; }
/* Mit Skript ausgeblendet – auch wo die Klasse ein display setzt (.field ist ein Grid). */
[data-confirm-field][hidden] { display: none; }
.confirm-dialog .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Die Bestätigung im Formular – abgesetzt von der Wahl darüber, damit das Häkchen nicht wie
   eine weitere Option aussieht. */
.confirm-block { border: 0; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.confirm-block legend { font-weight: 600; font-size: .95rem; margin: 0 0 6px; padding: 0; float: left; width: 100%; }
.confirm-block legend + * { clear: left; }
.confirm-block .note { margin: 4px 0 0 1.6em; }
.confirm-block .check { align-items: flex-start; }
.confirm-block .check input { margin-top: .3em; }
.choice .check { align-items: flex-start; }
.choice .check input { margin-top: .3em; }
.choice-hint { display: block; font-size: .85rem; color: var(--ink-soft); }
/* ── Plattform: Konto-Detail (/platform/konten/{id}) ────────────────────────────────────
   Auf einen Blick: Kopf mit Preisschild, Pills nur für Auffälliges und vier Kennzahlen;
   darunter Karten in zwei Spalten – links das Wissen, rechts Aktionen und Abo; Formulare
   und lange Erklärungen in <details>. Eigener Block am Ende, nur über die Tokens. */
.pa-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: start;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
}
.pa-head h1 { margin: 0 0 6px; overflow-wrap: anywhere; }
.pa-emails, .pa-flags { list-style: none; margin: 0; padding: 0; }
.pa-emails li, .pa-flags li { max-width: none; }
.pa-email { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.pa-email-address { min-width: 0; overflow-wrap: anywhere; }
.pa-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pa-flags:not(:has(li)) { display: none; }
.pa-flags .pill, .pa-flags .badge { font-size: .82rem; padding: 2px 10px; }
.pa-price { text-align: right; justify-items: end; }
.pa-price .tier-tag-name { font-size: 1.9rem; }

.pa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.pa-stats > div { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.pa-stats dt { font-size: .82rem; color: var(--ink-soft); }
.pa-stats dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.pa-stat-note { display: block; font-size: .8rem; font-weight: 600; color: var(--pill-warn-ink); }

.account-detail > .callout { margin: 14px 0 0; }
.pa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.pa-column { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pa-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; min-width: 0; }
.pa-card h2 { font-size: 1.1rem; margin: 0 0 12px; }
.pa-card h3 {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pa-card h2 + h3 { margin-top: 0; padding-top: 0; border-top: 0; }
.pa-card p { margin: 0 0 10px; }
.pa-card > :last-child, .pa-action-body > :last-child { margin-bottom: 0; }
.pa-history { margin-top: 16px; }

/* Keys und Werte: Label gedämpft in einer schmalen Spalte, mobil darüber */
.pa-kv { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.pa-kv dt { color: var(--ink-soft); font-size: .88rem; padding-top: .1em; }
.pa-kv dd { margin: 0; overflow-wrap: anywhere; }
.pa-kv + .pa-kv { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pa-kv .chips li { font-size: .82rem; }

/* Kennungen (cus_…, sub_…): klein, monospace, ein Klick markiert sie ganz zum Kopieren */
.pa-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem;
  padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink-soft) 12%, var(--paper-raised));
  color: var(--ink); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}

.pa-status { margin-bottom: 10px; }
.pa-alert { font-size: .9rem; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 12%, var(--paper-raised)); border-left: 3px solid var(--warn); }

table.pa-table { font-size: .9rem; }
table.pa-table th, table.pa-table td { padding: 6px 8px; }
table.pa-table th:first-child, table.pa-table td:first-child { padding-left: 0; }
table.pa-table th[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Aktionen: abgesetzt auf dem Seitengrund; je Aktion eine Zeile, Formulare klappen auf */
.pa-actions { background: var(--paper); }
.pa-action { border-top: 1px solid var(--line); padding: 10px 0; }
.pa-action:last-child { padding-bottom: 0; }
.pa-action > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 2px 0;
}
.pa-action > summary::-webkit-details-marker { display: none; }
.pa-action-title { font-weight: 600; color: var(--accent); }
.pa-action-title::before { content: "▸"; display: inline-block; width: 1.1em; transition: transform .15s ease; }
.pa-action[open] .pa-action-title::before { transform: rotate(90deg); }
.pa-action-danger .pa-action-title { color: var(--danger-text); }
.pa-action-state { font-size: .85rem; color: var(--ink-soft); }
.pa-action > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.pa-action-body { padding: 10px 0 4px 1.1em; display: grid; gap: 10px; }
.pa-action-body .form, .pa-action-body .tier-form { max-width: none; }
.pa-action-body .note, .pa-action-flat .note { margin: 0; }
.pa-action-flat { display: grid; gap: 6px; justify-items: start; }

/* Mehr auf Abruf: lange Erklärungen und ältere Zeilen */
.pa-more { margin-top: 10px; font-size: .9rem; }
.pa-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.pa-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pa-more[open] > summary { margin-bottom: 8px; }
.pa-more p { color: var(--ink-soft); max-width: none; }

@media (max-width: 760px) {
  .pa-head { grid-template-columns: 1fr; padding: 16px; }
  .pa-price { text-align: left; justify-items: start; }
  .pa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-grid { grid-template-columns: 1fr; }
  .pa-card { padding: 16px; }
}
@media (max-width: 560px) {
  .pa-kv { grid-template-columns: 1fr; gap: 0; }
  .pa-kv dd + dt { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pa-action-title::before { transition: none; } }
.pa-wide { margin-top: 16px; }
.pa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 28px; }
.pa-split h3 { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 900px) {
  .pa-split { grid-template-columns: 1fr; }
  .pa-split > div + div h3 { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
}
/* Push-Text: zwei Zeilen, der ganze Text im title */
.pa-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }