/*
Theme Name: PrivateAI
Theme URI: https://privateai-box.de
Description: CI-Theme für privateai-box.de. Child-Theme von Twenty Twenty-Five. Farben,
  Typografie und Bausteine folgen docs/marketing/15_brand-style-guide.md und
  docs/marketing/website/assets/style.css. Inter ist selbst gehostet — eine Seite, die mit
  „Daten verlassen nie das Haus" wirbt, darf keine Schriften von Google nachladen.
Author: PrivateAI
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
License: GPL-2.0-or-later
Text Domain: privateai
*/

/* Farben kommen aus theme.json (Palette + Global Styles). Hier stehen nur die
   Bausteine, die sich mit Block-Klassen allein nicht abbilden lassen.
   Die Klassen (pai-*) werden im Seiteninhalt als „Zusätzliche CSS-Klasse"
   gesetzt und bleiben damit im Block-Editor bearbeitbar. */

:root {
  --pai-primary: #1565c0;
  --pai-navy: #0d47a1;
  --pai-accent: #42a5f5;
  --pai-text: #0d1b2a;
  --pai-body: #444441;
  /* Der Brand-Guide nennt als Sekundärfarbe #888780. Auf dem Papierton ergibt
     das nur 3,11 : 1 — unter der Norm von 4,5 : 1 für kleinen Text (WCAG AA),
     und genau daran scheiterten Auszeichnungen, Fußzeile und Rechtshinweis.
     Derselbe Farbton, nur dunkler: 4,75 : 1 auf Papier, 5,4 : 1 auf Weiß.
     Bewusste Abweichung von der Palette — Lesbarkeit geht vor. */
  --pai-subtext: #6b6a64;
  --pai-paper: #f0eee9;
  --pai-surface: #fafaf7;
  --pai-rule: #e5e3db;
  --pai-info-bg: #e3f2fd;
  --pai-info-fg: #0d47a1;
  /* Flächen als Variablen, nicht fest verdrahtet — nur so lässt sich unten ein
     Dunkelmodus daraufsetzen, ohne jede Regel zu verdoppeln. */
  --pai-card: #ffffff;
  --pai-panel: #0d1b2a;   /* dunkle Sektionen */
  /* Fester Wert, KEIN Verweis auf --pai-text: Der dreht sich im Dunkelmodus
     ins Helle, und die Kopfzeile waere dort weiss geworden. Gemessen. */
  --pai-kopf-bg: #0d1b2a;
  --pai-kopf-fg: #e8eef6;
  --pai-kopf-mut: #8ba6c4;
}

/* ── Dunkelmodus ──────────────────────────────────────────────────────────────
   Folgt der Einstellung des Betriebssystems. Bewusst ohne Umschalter und ohne
   JavaScript: Ein Schalter braucht einen gespeicherten Zustand, und der wäre
   auf dieser Seite das erste Cookie — auf einer Seite, die damit wirbt, keine
   zu setzen. Wer dunkel will, hat es im System eingestellt.
   Alle Werte gegen den Papierton geprüft (Kontrast-Durchlauf, WCAG AA). */
@media (prefers-color-scheme: dark) {
  :root {
    --pai-primary: #4d9ae8;   /* aufgehellt: #1565C0 auf dunklem Grund waere zu dunkel */
    --pai-navy: #7db8f0;
    --pai-accent: #6cb8ff;
    --pai-text: #e8eef6;
    --pai-body: #c3d0de;
    --pai-subtext: #9db0c4;
    --pai-paper: #0b1522;
    --pai-surface: #16283c;
    --pai-rule: #26384c;
    --pai-info-bg: #14293e;
    --pai-info-fg: #a8ccf5;
    --pai-card: #101f30;
    --pai-panel: #16283c;      /* etwas heller als die Seite, sonst verschwindet
                                  die dunkle Sektion im Hintergrund */
  }

  /* WordPress erzeugt aus theme.json eigene Variablen und setzt Text- und
     Hintergrundfarbe der Seite darüber. Die stehen als eingebettete
     Global-Styles im Quelltext NACH diesem Stylesheet und gewinnen auf
     `:root` bei gleicher Spezifität — der Text blieb dunkelblau auf dunklem
     Grund (gemessen: rgb(13,27,42) auf rgb(11,21,34), praktisch unlesbar).
     Auf `body` gesetzt greift die Vererbung: naeher am Element gewinnt. */
  body {
    --wp--preset--color--text: #e8eef6;
    --wp--preset--color--body: #c3d0de;
    --wp--preset--color--subtext: #9db0c4;
    --wp--preset--color--paper: #0b1522;
    --wp--preset--color--surface: #16283c;
    --wp--preset--color--rule: #26384c;
    --wp--preset--color--primary: #4d9ae8;
    --wp--preset--color--navy: #7db8f0;
    --wp--preset--color--accent: #6cb8ff;
    --wp--preset--color--info-bg: #14293e;
    background-color: #0b1522;
    color: #e8eef6;
  }
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
body {
  background: var(--pai-paper);
  line-height: 1.6;
}
h1, h2, h3, h4 {
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Auszeichnung über der Überschrift: klein, gesperrt, versal. */
.pai-eyebrow {
  font-size: 11px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pai-subtext);
  font-weight: 500;
  margin-bottom: 8px;
}
.pai-dark .pai-eyebrow { color: var(--pai-accent); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* Nur oben und unten setzen: Die Kurzschreibweise `padding: 80px 0` würde den
   seitlichen Randabstand der Seite überschreiben — auf dem Handy klebte der
   Text dann am Displayrand. */
.pai-hero { padding-top: 80px; padding-bottom: 56px; text-align: center; }
.pai-hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 700;
}
.pai-claim { color: var(--pai-primary); }
.pai-sub {
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--pai-body);
  font-weight: 300;
  max-width: 700px;
  margin: 24px auto 0;
}
.pai-trust { margin-top: 28px; font-size: 13px; color: var(--pai-subtext); }

/* Einleitungsabsatz auf Unterseiten: gleiche Größe wie der Hero-Untertitel,
   aber linksbündig — `pai-sub` zentriert sich selbst und stünde auf einer
   linksbündigen Seite sichtbar versetzt zu den Überschriften. */
.pai-lead {
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--pai-body);
  font-weight: 300;
  margin-top: 16px;
}

/* ── Abschnitts-Kopf ──────────────────────────────────────────────────────── */
/* Abstand nach oben, damit die Auszeichnung nicht am Absatz davor klebt, wenn
   die Abschnitte — wie auf den Unterseiten — direkt aufeinander folgen. */
.pai-head { text-align: center; max-width: 740px; margin: 64px auto 44px; }
.pai-dark .pai-head:first-child,
.pai-head:first-child { margin-top: 0; }
.pai-head h2 { font-size: clamp(26px, 4vw, 38px); }
.pai-head p:not(.pai-eyebrow) {
  color: var(--pai-body);
  font-weight: 300;
  margin-top: 14px;
  font-size: 17px;
}
.pai-dark .pai-head h2 { color: #fff; }
.pai-dark .pai-head p:not(.pai-eyebrow) { color: rgba(255, 255, 255, 0.7); }

/* ── Karten ───────────────────────────────────────────────────────────────── */
.pai-card {
  background: var(--pai-card);
  border: 1px solid var(--pai-rule);
  border-radius: 12px;
  padding: 28px;
  /* Karten einer Reihe gleich hoch. Wichtig: KEIN `height: 100%` dazu — das
     gäbe der Karte eine feste Höhe, und `stretch` greift nur bei `auto`.
     Beide Regeln zusammen hoben sich gegenseitig auf (gemessen: 288 / 288 /
     264 px in derselben Reihe). */
  align-self: stretch;
  /* WordPress setzt auf Spalten `word-break: break-word`. Das zerlegt lange
     deutsche Komposita mitten im Wort („Geeignetheitsdokume|ntation"). Statt
     dessen an Silben trennen — die Seite ist auf lang="de" gesetzt. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
.pai-card h3 { font-size: 18px; margin-bottom: 8px; }
.pai-card p { font-size: 15px; color: var(--pai-body); font-weight: 300; }
.pai-ic {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--pai-info-bg);
  color: var(--pai-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  line-height: 1;
}

/* ── Dunkle Sektion ───────────────────────────────────────────────────────── */
.pai-dark {
  background: var(--pai-panel);
  color: #fff;
  border-radius: 20px;
  padding: 64px 32px;
}
.pai-dark h2, .pai-dark h3, .pai-dark strong { color: #fff; }

/* Merkmal-Zeile mit Haken */
.pai-feat {
  padding: 14px 0;
  border-bottom: 1px solid var(--pai-rule);
  font-size: 15px;
  font-weight: 300;
  color: var(--pai-body);
}
.pai-feat:last-child { border-bottom: none; }
.pai-feat strong { font-weight: 600; color: var(--pai-text); }
.pai-feat::before {
  content: "✓";
  color: var(--pai-primary);
  font-weight: 700;
  margin-right: 12px;
}
.pai-dark .pai-feat {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}
.pai-dark .pai-feat::before { color: var(--pai-accent); }
/* Muss hier stehen, nicht weiter oben: `.pai-feat strong` weiter oben setzt die
   dunkle Textfarbe und hat dieselbe Spezifität wie `.pai-dark strong` — bei
   Gleichstand gewinnt die spätere Regel. Ohne diese Zeile waren die fetten
   Stichworte in den dunklen Abschnitten unsichtbar (dunkelblau auf dunkelblau). */
.pai-dark .pai-feat strong,
.pai-dark .pai-step p strong,
.pai-dark .pai-glied strong { color: #fff; }

/* ── Vergleichstabelle ────────────────────────────────────────────────────── */
.pai-table table {
  border-collapse: collapse;
  background: var(--pai-card);
  border: 1px solid var(--pai-rule);
  border-radius: 12px;
  overflow: hidden;
}
.pai-table th, .pai-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--pai-rule);
  border-right: none;
  border-left: none;
}
.pai-table thead th {
  background: var(--pai-surface);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}
/* Letzte Spalte = PrivateAI Box: hervorgehoben. Vorletzte = Cloud: gedämpft. */
.pai-table tbody td:last-child { color: var(--pai-primary); font-weight: 600; }
.pai-table tbody td:nth-child(2) { color: var(--pai-subtext); }
.pai-table tbody tr:last-child td { border-bottom: none; }

/* ── Info-Box ─────────────────────────────────────────────────────────────── */
.pai-info {
  background: var(--pai-info-bg);
  color: var(--pai-info-fg);
  border-radius: 12px;
  padding: 22px 26px;
  font-size: 15px;
  max-width: 760px;
  margin: 28px auto 0;
}
/* Der Info-Kasten ist auch INNERHALB einer dunklen Sektion hell. Ohne diese
   Zeile schlägt `.pai-dark strong { color:#fff }` durch und färbt die fette
   Einleitung weiß — weiß auf Hellblau ergab 1,14 : 1 und war faktisch
   unsichtbar. Gemessen, nicht vermutet. */
.pai-dark .pai-info,
.pai-dark .pai-info strong,
.pai-dark .pai-info p { color: var(--pai-info-fg); }

/* Kein Preis- und kein Varianten-Baustein: Zahlen und Paketstufen gehören nicht
   auf die Website (Entscheidung 2026-08-10). Wer sie zurückholt, holt sich auch
   die Pflicht zurück, sie aktuell zu halten. */

/* ── CTA-Band ─────────────────────────────────────────────────────────────── */
.pai-cta {
  background: var(--pai-primary);
  border-radius: 20px;
  padding: 56px 32px;
  text-align: center;
  color: #fff;
}
.pai-cta h2 { color: #fff; font-size: clamp(26px, 4vw, 36px); }
.pai-cta p { color: rgba(255, 255, 255, 0.85); font-weight: 300; margin-top: 12px; font-size: 17px; }
.pai-cta .wp-block-button__link {
  background: #fff !important;
  color: var(--pai-primary) !important;
}

/* ── Fußzeile / Rechtliches ───────────────────────────────────────────────── */
.pai-disc {
  font-size: 12px !important;
  color: var(--pai-subtext);
  line-height: 1.5;
  max-width: 680px;
  margin: 16px auto 0;
}

/* ── Schaltflächen ────────────────────────────────────────────────────────── */
.wp-block-button__link {
  border-radius: 8px;
  font-weight: 600;
  padding: 14px 28px;
}
.is-style-outline .wp-block-button__link { border-color: var(--pai-primary); }

/* ── Kopfzeile mit Bildmarke ──────────────────────────────────────────────── */
.pai-header {
  background: var(--pai-kopf-bg);
  /* KEIN backdrop-filter. Ein Element mit Filter wird zum Bezugsrahmen für
     `position: fixed` in seinem Inneren — das Vollbild-Menü auf dem Handy
     konnte sich dadurch nur innerhalb der 59 px hohen Leiste ausbreiten und
     war praktisch unbedienbar. Sichtbar war der Filter ohnehin nie, weil die
     Leiste deckend ist. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: 12px;
  padding-bottom: 12px;
}
.pai-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: var(--pai-text);
}
/* Nur im Kopf hell — dieselbe Klasse steht auch in der Fusszeile, und dort
   waere helle Schrift auf hellem Grund unsichtbar (war sie kurzzeitig). */
.pai-header .pai-brand { color: var(--pai-kopf-fg); }
/* Die Bildmarke ist für hellen Grund gezeichnet. Auf dem dunklen Kopf hebt ein
   leichter Aufheller sie an, ohne eine zweite Datei zu brauchen. */
.pai-header .pai-mark { filter: brightness(1.25); }
.pai-mark { width: 34px; height: 34px; display: block; flex-shrink: 0; }
.pai-brand-text { font-weight: 600; font-size: 18px; line-height: 1.2; }
.pai-brand-text small {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pai-subtext);
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 2px;
}
/* Im Kopf gedämpft hell, in der Fußzeile die normale Sekundärfarbe. */
.pai-header .pai-brand-text small { color: var(--pai-kopf-mut); }
/* Seitenrand von Hand: Bei einer Vollbreite INNERHALB einer Vollbreite reicht
   WordPress den Seitenrand nicht durch — Marke und Knopf klebten am Rand. */
.pai-navbar {
  padding-left: var(--wp--style--root--padding-left, 24px);
  padding-right: var(--wp--style--root--padding-right, 24px);
}
.pai-navright { gap: 20px; }
/* WordPress setzt zwischen Menüpunkten 2rem. Bei acht Einträgen sind das
   allein 224 px Abstand — der Kopf brach dadurch bei 1280 px in zwei Zeilen
   (gemessen: 125 px statt 65 px). */
.pai-nav .wp-block-navigation__container { gap: 18px; }
/* Drei Ebenen tief, weil der Navigations-Block seine Farbe selbst setzt und
   die Regel im Quelltext nach diesem Stylesheet steht. Mit `.pai-nav a` allein
   blieben die Menuepunkte dunkelblau auf dunkelblauem Kopf — Kontrast 1:1,
   also unsichtbar. Der Kontrast-Durchlauf hat es gefunden, das Auge nicht. */
.pai-header .wp-block-navigation .wp-block-navigation-item__content,
.pai-header .wp-block-navigation a {
  color: var(--pai-kopf-fg);
  font-size: 14px;
  font-weight: 500;
}
.pai-header .wp-block-navigation a:hover { color: var(--pai-accent); }
/* Auch das Menue-Symbol auf schmalen Geraeten. */
.pai-header .wp-block-navigation__responsive-container-open { color: var(--pai-kopf-fg); }

/* ── Aufgeklapptes Menü auf dem Handy ─────────────────────────────────────── */
/* WordPress legt das Vollbild-Menü standardmäßig auf Weiß. Zusammen mit der
   hellen Schrift der dunklen Kopfzeile ergab das Weiß auf Weiß — die Einträge
   waren da, aber unsichtbar (gemessen: rgb(232,238,246) auf rgb(255,255,255)).
   Die Selektoren sind bewusst tief: WordPress' eigene Regel steht im Quelltext
   nach diesem Stylesheet und gewinnt sonst bei gleicher Spezifität. */
.pai-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--pai-kopf-bg);
  color: var(--pai-kopf-fg);
  padding-top: 72px;
}
.pai-header .wp-block-navigation__responsive-container.is-menu-open a,
.pai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--pai-kopf-fg);
  font-size: 22px;
  font-weight: 500;
}
/* Fingerbreite Ziele statt 14-px-Zeilen: Auf dem Handy wird getippt, nicht
   gezielt. */
.pai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.pai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  gap: 4px;
  /* Volle Breite, sonst laufen die Trennlinien nur bis zur Hälfte — die Liste
     richtet sich sonst nach dem längsten Eintrag. */
  width: 100%;
}
.pai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.pai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
  border-bottom: none;
}
.pai-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  padding: 14px 0;
}
/* Schließen-Kreuz: stand auf Schwarz und war auf dunklem Grund unsichtbar. */
.pai-header .wp-block-navigation__responsive-container-close {
  color: var(--pai-kopf-fg);
  padding: 8px;
}
.pai-header .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
}
/* Handlungsaufruf im Kopf: kleiner als die Schaltflächen im Inhalt, sonst
   drückt er die Kopfzeile auseinander. */
.pai-nav-cta .wp-block-button__link {
  padding: 9px 18px;
  font-size: 14px;
  white-space: nowrap; /* sonst zerfällt „Demo anfragen" in zwei Zeilen */
}

/* Sprungmarken: Die Kopfzeile klebt oben. Ohne Abstand landet der angesprungene
   Abschnitt genau darunter und ist verdeckt — gemessen: Abschnitt bei 0 px,
   Kopfzeile 64 px hoch. */
.wp-block-group[id] { scroll-margin-top: 96px; }
/* Auf schmalen Geräten wandert das Menü hinter den Knopf mit den drei
   Strichen; der Handlungsaufruf bliebe daneben stehen und würde die Zeile
   sprengen. Dort führt der Weg zum Kontakt über das aufgeklappte Menü. */
/* Der Knopf weicht als Erstes, wenn es eng wird — „Kontakt" steht ohnehin im
   Menü. Zwei Klassen, nicht eine: WordPress setzt
   `.wp-block-buttons{display:flex}` als eingebettete Global-Styles, die im
   Quelltext NACH dem Theme-Stylesheet stehen und bei gleicher Spezifität
   gewinnen. Gemessen: mit einer Klasse blieb der Knopf sichtbar, die Leiste
   war 414 px breit bei 390 px Platz und der Kopf 123 px hoch. */
@media (max-width: 1400px) {
  .pai-navright .pai-nav-cta { display: none; }
}

/* ── Fußzeile ─────────────────────────────────────────────────────────────── */
.pai-footer {
  padding-top: 48px;
  padding-bottom: 64px;
  text-align: center;
  border-top: 1px solid var(--pai-rule);
  margin-top: 64px;
}
.pai-brand-center { justify-content: center; }
.pai-footer-claim { margin-top: 12px; color: var(--pai-body); }
.pai-footer-nav { margin-top: 14px; font-size: 14px; }
.pai-footer-nav a { color: var(--pai-subtext); }
.pai-footer-nav a:hover { color: var(--pai-primary); }
/* Pflicht- und Nachschlageseiten eine Spur kleiner und mit Abstand — sie
   gehören in die Fußzeile, sollen den Weg durchs Angebot aber nicht verwässern. */
.pai-footer-recht { margin-top: 8px; font-size: 13px !important; }
.pai-footer-recht a { color: var(--pai-subtext); }
.pai-footer-recht a:hover { color: var(--pai-primary); }
.pai-footer .pai-mark { width: 30px; height: 30px; }

/* ── Anwendungsfälle: Tagesablauf mit Zeitspalte ──────────────────────────── */
.pai-story { max-width: 780px; margin: 0 auto; }
.pai-step {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--pai-rule);
  align-items: flex-start;
}
.pai-step:last-child { border-bottom: none; }
.pai-step .pai-time {
  flex: 0 0 76px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 14px;
  color: var(--pai-primary);
  font-weight: 600;
  padding-top: 3px;
}
.pai-step h3 { font-size: 17px !important; margin-bottom: 6px; }
.pai-step p { font-size: 15px; color: var(--pai-body); font-weight: 300; }
.pai-step p strong { font-weight: 600; color: var(--pai-text); }
.pai-dark .pai-step { border-color: rgba(255, 255, 255, 0.12); }
.pai-dark .pai-step .pai-time { color: var(--pai-accent); }
.pai-dark .pai-step p { color: rgba(255, 255, 255, 0.78); }

/* Beleg-Zeile unter einem Anwendungsfall: was genau das im Produkt ist. */
.pai-beleg {
  font-size: 13px !important;
  color: var(--pai-subtext);
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--pai-rule);
}
.pai-dark .pai-beleg {
  color: rgba(255, 255, 255, 0.55);
  border-left-color: rgba(255, 255, 255, 0.2);
}

/* ── Prozess-Kette: Schritt für Schritt ───────────────────────────────────── */
.pai-kette { counter-reset: pai-schritt; max-width: 780px; margin: 0 auto; }
.pai-kette .pai-glied {
  position: relative;
  padding: 18px 0 18px 52px;
  border-bottom: 1px solid var(--pai-rule);
}
.pai-kette .pai-glied:last-child { border-bottom: none; }
.pai-kette .pai-glied::before {
  counter-increment: pai-schritt;
  content: counter(pai-schritt);
  position: absolute;
  left: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pai-info-bg);
  color: var(--pai-primary);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pai-kette .pai-glied strong { font-weight: 600; }
.pai-kette .pai-glied { font-size: 15px; color: var(--pai-body); font-weight: 300; }

@media (max-width: 820px) {
  .pai-hero { padding-top: 56px; padding-bottom: 40px; }
  .pai-dark { padding: 44px 20px; }
  .pai-cta { padding: 40px 20px; }
  .pai-step { flex-direction: column; gap: 4px; }
  .pai-step .pai-time { flex-basis: auto; padding-top: 0; }
  .pai-brand-text small { display: none; }
}

/* ── Ausgang am Seitenende ────────────────────────────────────────────────── */
.pai-weiter {
  border-top: 1px solid var(--pai-rule);
  margin-top: 64px;
  padding-top: 8px;
}
.pai-weiter-karte h3 a { text-decoration: none; }
.pai-weiter-karte h3 a:hover { text-decoration: underline; }
.pai-weiter-link {
  font-size: 14px !important;
  font-weight: 600;
  margin-top: 12px;
}

/* ── Frage und Antwort ────────────────────────────────────────────────────── */
.pai-frage {
  padding: 20px 0;
  border-bottom: 1px solid var(--pai-rule);
}
.pai-frage:last-child { border-bottom: none; }
.pai-frage h3 { font-size: 17px !important; margin-bottom: 8px; }
.pai-frage p { color: var(--pai-body); font-weight: 300; }
.pai-dark .pai-frage { border-color: rgba(255, 255, 255, 0.12); }
.pai-dark .pai-frage p { color: rgba(255, 255, 255, 0.8); }

/* ── Hero mit dem Gerät ───────────────────────────────────────────────────── */
/* Zweispaltig: links die Aussage, rechts das Gerät. Auf schmalen Geräten
   stapeln die Spalten von selbst — dann steht das Bild unter dem Text. */
.pai-hero-grid { align-items: center; gap: 40px; }
.pai-hero-grid .pai-hero-text { text-align: left; }
.pai-hero-grid .pai-hero-text .pai-sub,
.pai-hero-grid .pai-hero-text .pai-trust { margin-left: 0; margin-right: 0; }
.pai-hero-grid h1 { text-align: left; }

/* Das Produktbild liegt auf weissem Grund. Eine helle Karte darunter faengt
   die Kante ab — sonst zeichnet sich im Papierton (und erst recht im
   Dunkelmodus) ein sichtbares Rechteck ab. */
.pai-geraet {
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid var(--pai-rule);
  display: block;
}
.pai-geraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* Steht das Foto allein unter einem Abschnittskopf statt in einer Spalte, ist
   es sonst so breit wie der Text — und weil es quadratisch ist, auch so hoch.
   Auf /technik/ drückte das die technischen Angaben unter den Falz. */
.pai-geraet-mitte {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.pai-geraet-bu {
  font-size: 13px !important;
  color: var(--pai-subtext);
  margin-top: 12px;
  text-align: center;
}

/* Produktbilder. Schatten statt Rahmen: die Aufnahmen bringen ihren eigenen
   hellen Hintergrund mit, ein zusaetzlicher Rand wirkt doppelt gemoppelt. */
.pai-schaubild {
  margin: 0;
  display: block;
}
.pai-schaubild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--pai-rule);
  box-shadow: 0 8px 28px rgba(13, 27, 42, .14);
  background: #fff;
}
.pai-schaubild figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pai-subtext);
}
.pai-schaubild figcaption strong {
  color: var(--pai-text);
}

@media (max-width: 781px) {
  .pai-hero-grid .pai-hero-text,
  .pai-hero-grid h1 { text-align: center; }
  .pai-hero-grid .pai-hero-text .pai-sub { margin-left: auto; margin-right: auto; }
}

/* ── Kontaktformular ──────────────────────────────────────────────────────── */
.pai-formular { max-width: 640px; margin-top: 24px; }
.pai-formular p { margin-bottom: 18px; }
.pai-formular label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.pai-formular .pai-optional { font-weight: 400; color: var(--pai-subtext); }
.pai-formular input,
.pai-formular textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;              /* unter 16px zoomt iOS beim Antippen hinein */
  color: var(--pai-text);
  background: var(--pai-card);
  border: 1px solid var(--pai-rule);
  border-radius: 8px;
  padding: 12px 14px;
}
.pai-formular input:focus,
.pai-formular textarea:focus {
  outline: 2px solid var(--pai-primary);
  outline-offset: 1px;
  border-color: var(--pai-primary);
}
.pai-formular textarea { resize: vertical; min-height: 140px; }
.pai-formular button { border: none; cursor: pointer; }
.pai-formular-recht { font-size: 13px; color: var(--pai-subtext); }

/* Honigtopf: aus dem Bild geschoben statt display:none — manche Bots erkennen
   und meiden versteckte Felder, ausserhalb des Sichtfelds fallen sie darauf
   herein. Fuer Screenreader per aria-hidden ausgenommen. */
.pai-honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pai-formular-hinweis { border-left: 4px solid var(--pai-primary); }
.pai-formular-fehler {
  background: #fdecea;
  color: #8a1c12;
  border-left: 4px solid #c0392b;
}
@media (prefers-color-scheme: dark) {
  .pai-formular-fehler { background: #3a1714; color: #ffb4a8; }
}