/* av-admin.css — Stile fuer die drei Adminbereich-Seiten von astrovitalis.astrolix.de
   (/partner, /gutschein, /vertrag-widerrufen bzw. /en/partner, /en/voucher, /en/cancel-contract).
   Worker C, 04.09.2026.

   WARUM EINE EIGENE DATEI und nicht build/custom.less:
   `j_template_styles.params` ist eine TEXT-Spalte (65.535 B) und mit 63.753 B fast voll
   (build/README.md „Fallen"). custom.less + less.json stecken beide dort; fuer die rund 6 kB
   Regeln hier waere kein Platz — apply_style_config.php braeche mit „Data too long" ab, und
   zwar erst NACHDEM theme-build.sh das neue theme.13.css geschrieben hat. Diese Datei wird
   deshalb wie die drei JS-Dateien nach public/av/ deployt und im Seiten-JSON eingebunden.
   Sobald `params` MEDIUMTEXT ist (offener Punkt aus Karte 314), kann der Inhalt nach
   custom.less wandern — die Selektoren sind unveraendert uebernehmbar.

   Der Praefix `dh-` bleibt bewusst stehen: die drei Skripte sind 1:1-Uebernahmen aus
   designhoroskope.astrolix.de, der Python-Dienst von Worker A ist es ebenso. Gleiche Namen =
   `diff` gegen die Quelle funktioniert weiter. Auf astrovitalis kollidiert nichts, `dh-` kommt
   in custom.less nicht vor (`av-hint` und `av-preis` dagegen schon — deshalb kein Umbenennen).
   Farben = BRIEF §4 (Blau #1A2A6C, Orange #E8731A, Creme #FDF8F1, Creme-Rand #EADFCF).
   Quelle der uebernommenen Regeln: designhoroskope/build/web/rechner.css. */

/* ── Formular-Container (partner.js, gutschein.js, widerruf.js) ─────────── */
.dh-rechner { font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.dh-form label { display: block; font-size: 13px; font-weight: 700; color: #1A2A6C; margin: 12px 0 4px; }
.dh-form h3 { color: #1A2A6C; }
.dh-form .uk-input, .dh-form .uk-textarea { border-radius: 8px; }
.dh-form .uk-checkbox { margin-right: 6px; }
/* Karten dieser Seiten folgen der Hausform (BRIEF §4: Radius 14, Creme-Rand, weicher Schatten). */
.dh-rechner .uk-card-default { border: 1px solid #EADFCF; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(26, 42, 108, .08); }

/* ── Paket-/Zahlungsauswahl (gutschein.js) ─────────────────────────────── */
.dh-products { text-align: left; margin: 8px 0 12px; }
.dh-product { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid #EADFCF; border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 14px; }
.dh-product:has(input:checked) { border-color: #E8731A; background: #FDF8F1; }
.dh-product span { flex: 1; }
.dh-product strong { color: #1A2A6C; white-space: nowrap; }
/* Gesamtpreis fett, Stueckpreis in Normalschrift dahinter; nowrap haelt beide zusammen,
   damit die Zeile nicht mitten im Betrag bricht (DH-Karte 398). */
.dh-product .dh-preis { white-space: nowrap; }
.dh-product .dh-je { font-size: 12px; font-weight: 400; }
/* Hinweis unter einem Eingabefeld (Widmung ist bei 50 Zeichen zu Ende). */
.dh-hint { font-size: 12px; color: #E8731A; margin: 4px 0 0; }

/* ── Layout-Auswahl der Gutschein-Karte (gutschein.js) ─────────────────── */
.dh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 3px; }
.dh-grid button { padding: 0; border: 3px solid transparent; border-radius: 10px; background: none;
  cursor: pointer; overflow: hidden; transition: transform .15s, border-color .15s; }
.dh-grid button:hover { transform: translateY(-2px); }
.dh-grid button.uk-active { border-color: #E8731A; }
.dh-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.dh-grid span { display: block; font-size: 12px; padding: 4px 2px; color: #5B6070; text-align: center; }
/* Die Gutschein-Karten sind 2:3-Hochformat und wuerden von der quadratischen Kachel oben und
   unten beschnitten -> eigene Kachel je Layout (Bild + Beschriftung + Lupen-Knopf darunter).
   Der Knopf steht UNTER der Karte, nicht als Overlay: auf Touch-Geraeten gibt es kein
   Ueberfahren, ein Overlay muesste dauerhaft im Bild liegen (DH-Karte 386). */
.dh-grid.dh-layouts { grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: none; overflow: visible; }
@media (min-width: 640px) { .dh-grid.dh-layouts { grid-template-columns: repeat(4, 1fr); } }
.dh-grid.dh-layouts img { aspect-ratio: .6667; }
.dh-layouts .dh-layout { display: flex; flex-direction: column; }
.dh-layouts .dh-pick { width: 100%; }
.dh-layouts .dh-name { display: block; font-size: 12px; padding: 4px 2px; color: #5B6070;
  text-align: center; margin-bottom: 2px; }
.dh-layouts .dh-zoom { align-self: center; }
@media (max-width: 767px) { .dh-layouts .dh-zoom { padding-left: 8px; padding-right: 8px; font-size: 11px; } }

/* ── Werbemittel im Partner-Dashboard (partner.js) ─────────────────────── */
.dh-werb-item { display: flex; flex-direction: column; height: 100%; }
.dh-werb-vor { display: block; height: 150px; margin-bottom: 10px; border-radius: 6px;
  background: #FDF8F1; text-align: center; }
.dh-werb-vor img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.dh-werb-icon { display: block; line-height: 150px; font-size: 34px; color: #1A2A6C; }
.dh-werb-item h4 { color: #1A2A6C; font-size: 15px; }
.dh-werb-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; max-height: 220px;
  overflow: auto; background: #FDF8F1; border-radius: 6px; padding: 8px 10px; margin-top: 8px; }
.dh-werb-btn { margin-top: auto; padding-top: 12px; }

/* ── Sprungmarke fuer den Partner-CTA ──────────────────────────────────── */
/* Eine leere Marke 96 px ueber dem Antragsblock, damit die mitscrollende Kopfleiste die
   Kartenoberkante nicht abdeckt — YOOtheme haengt an Anker-Links `uk-scroll` ohne Offset an.
   Kein zusaetzliches `scroll-behavior: smooth`: dann animieren Browser und UIkit gleichzeitig. */
.dh-anker { display: block; position: relative; top: -96px; height: 0; visibility: hidden; }

/* ══ Kopf und Erklaerbloecke der Partnerseite (Markup in build_pages.py) ══ */
/* Zeile ueber der H1. */
.av-p-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  color: #C4681B; font-size: 15px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

/* Die zwei Vorteilszeilen im Kopf: rundes Icon-Feld links, zweizeiliger Text rechts. */
.av-p-vorteile { display: flex; flex-direction: column; gap: 14px; }
.av-p-vorteil { display: flex; align-items: center; gap: 14px; }
.av-p-chip { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: #FFF4EA; border: 1px solid #F3C9A4; }
.av-p-vorteil-txt { display: flex; flex-direction: column; line-height: 1.35; }
.av-p-vorteil-txt strong { color: #1A2A6C; font-size: 17px; }
.av-p-vorteil-txt span { color: #5B6070; font-size: 16px; }
.av-akzent { color: #E8731A; }

/* Vertrauenszeile unter dem CTA: drei Punkte mit Haekchen. */
.av-p-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; color: #5B6070; font-size: 15px; }
.av-p-trust > span::before { content: '✓'; color: #2E9D5B; font-weight: 800; margin-right: 7px; }

/* „So funktioniert es" — sechs Schritte, Trennlinien liefert die Row (divider). */
.av-p-schritt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.av-p-schritt strong { color: #1A2A6C; font-size: 16px; line-height: 1.3; }
.av-p-schritt span { color: #5B6070; font-size: 15px; line-height: 1.45; }

/* „Starke Werbemittel" — vier Merkmale in einer Reihe. */
.av-p-merkmale { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .av-p-merkmale { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .av-p-merkmale { grid-template-columns: repeat(4, 1fr); } }
.av-p-merkmal { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: #FDF8F1; border: 1px solid #EADFCF; border-radius: 14px; }
.av-p-merkmal img { flex: none; margin-top: 2px; }
.av-p-merkmal strong { display: block; color: #1A2A6C; font-size: 16px; line-height: 1.3; }
.av-p-merkmal span { display: block; color: #5B6070; font-size: 15px; line-height: 1.45; margin-top: 2px; }

/* Gutschein-Seite: die drei Schritt-Kacheln „So funktioniert es".
   Die Nummer wird ueber `.av-g-schritt .av-g-nr` gesetzt, nicht ueber `.av-g-nr` allein:
   die Regel fuer den Beschreibungstext (`.av-g-schritt span`) ist spezifischer als eine
   einzelne Klasse und hatte die Ziffer sonst grau und als Block aus dem Kreis geschoben. */
.av-g-schritt { display: flex; align-items: flex-start; gap: 14px; }
.av-g-schritt .av-g-nr { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; border-radius: 50%; background: #E8731A; color: #fff;
  font-weight: 800; font-size: 18px; line-height: 1; }
.av-g-schritt strong { display: block; color: #1A2A6C; font-size: 16px; }
.av-g-schritt span { display: block; color: #5B6070; font-size: 15px; line-height: 1.45; margin-top: 2px; }

/* Sicherheitsnetz fuer die Rueckfallebenen in gutschein.js: `.dh-form label` setzt
   display:block, das schlaegt sonst das [hidden]-Attribut. */
.dh-form label[hidden], .dh-grid[hidden], .dh-rechner [hidden] { display: none !important; }