/* Design-Horoskope: Schritte + Rechner (Quelle: build/custom-dh.less, via apply_theme.php) */
.dh-step-nr { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:#E8731A; color:#fff; font-weight:800; font-size:20px; font-family:'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.dh-rechner { font-family:'Nunito Sans', system-ui, sans-serif; }
.dh-filter { display:flex; gap:8px; margin-bottom:8px; } .dh-filter select { flex:1; }
.dh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; max-height:420px; overflow-y:auto; padding:3px; }
.dh-count { font-size:12px; color:#5B6070; margin-top:4px; text-align:right; }
.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; }
.dh-form label { display:block; font-size:13px; font-weight:700; color:#1A2A6C; margin:12px 0 4px; }
.dh-cities { position:relative; }
.dh-cities ul { position:absolute; z-index:20; left:0; right:0; margin:0; padding:0; list-style:none; background:#fff; border:1px solid #ddd; border-radius:6px; max-height:240px; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.dh-cities li { padding:8px 12px; cursor:pointer; font-size:14px; } .dh-cities li:hover { background:#F4F2EE; }
.dh-out { text-align:center; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#F4F2EE; border-radius:12px; padding:20px; }
/* object-fit:contain + aspect-ratio:auto heben den Theme-Reset auf
   (`img { aspect-ratio: attr(width)/attr(height); object-fit:cover }`): die fertige Vorschau
   wird immer vollständig gezeigt, auch bei hochkanten Motiven — nie oben/unten beschnitten
   (Karte 644, 11.09.2026). Die Maße setzt rechner.js zusätzlich richtig. */
.dh-out img { max-width:100%; max-height:78vh; width:auto; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.18); }
.dh-out .dh-info { font-size:13px; color:#5B6070; margin-top:10px; }
.dh-hinweis { font-size:12px; color:#5B6070; margin-top:8px; }

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

/* Preisblock im Paket-Knopf, Kundenwunsch 03.09.2026 (Karte 398):
   "1,00 € (0,50 € / Stück)" — Gesamtpreis fett, Stueckpreis in Normalschrift dahinter.
   nowrap haelt beide zusammen: wird die Zeile zu schmal, rutscht der ganze Preis in die
   naechste Zeile statt mitten im Betrag zu brechen. 12 px statt uk-text-small (14 px),
   damit die Zeile auch bei 360 px Fensterbreite neben den Paketnamen passt. */
.dh-product .dh-preis { white-space:nowrap; }
/* font-weight:400 ist Martins "Normalschrift": .dh-form label setzt fuer die ganze Zeile 700,
   der Stueckpreis haette das sonst geerbt (und stand vorher genauso halbfett da). */
.dh-product .dh-je { font-size:12px; font-weight:400; }

/* Hinweis unter einem Eingabefeld (Karte 398: Widmung ist bei 50 Zeichen zu Ende). */
.dh-hint { font-size:12px; color:#E8731A; margin:4px 0 0; }

/* Ganze Site durchgehend serifenlos (Kundenwunsch 24.08.2026, Karte 172):
   "Bitte aendere bei Designhoroskope auf allen Seiten die Serifen-Schrift in eine gut
   lesbare serifenlose Schrift." Der YOOtheme-Style 13 setzt Playfair Display (Serif) fuer
   Ueberschriften, Lead-Absaetze, Card-/Accordion-/Modal-Titel, blockquote, das mobile
   Hauptmenue und die av-*-Bausteine. Diese Regel ersetzt sie ueberall durch die
   Hausschrift Nunito Sans. Die Selektoren sind bewusst identisch zu denen in
   theme.13.css (gleiche Spezifitaet, spaeter geladen -> gewinnt).
   Vorlaeufer: Karte 170, damals nur die Partner-Seite ueber die Klasse dh-sans; die Klasse
   setzt build_pages.py::page_partner weiter, sie ist jetzt nur noch redundant.
   Dieselbe Regel steht in web/rechner.css, weil der custom_less-Block erst bei einem
   Customizer-Save kompiliert wird, rechner.css aber sofort nach theme.13.css geladen wird. */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge,
blockquote, .uk-card-title, .uk-article-title, .uk-modal-title,
.uk-accordion-title, .uk-accordion-default .uk-accordion-title,
.uk-nav-primary, .uk-text-lead, .lead, .uk-font-primary,
.av-angebot-titel, .av-kpi-num, .av-faq .uk-accordion-title, .av-ornament,
.av-h1, .av-h1-sub, .av-trust-title, .dh-step-nr, .dh-sans {
  font-family:'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Lead-Absatz der Partner-Seite 2 Punkte kleiner (Kundenwunsch 24.08.2026, Karte 171):
   uk-text-lead sind hier 1.4rem = 22,4 px; minus 2 pt (2,67 px) = 19,7 px. Klasse dh-lead-sm
   setzt build_pages.py::page_partner auf den Lead-Absatz (DE + EN). Dieselbe Regel steht in
   web/rechner.css, weil der custom_less-Block erst bei einem Customizer-Save kompiliert wird. */
.dh-lead-sm, .dh-lead-sm p { font-size: calc(1.4rem - 2pt); }
/* Overlay-Button der Motiv-Galerien wieder mittig (Kundenwunsch 25.08.2026, Karte 194):
   „Der Button ist nur zu einem kleinen Teil links unten in der Ecke des Motivs sichtbar."
   Ursache steckt in der kompilierten theme.13.css: dort steht
       :root { --uk-position-margin-offset: 0 }        <- ohne Einheit
       .uk-position-center { top: calc(50% - var(--uk-position-margin-offset)); left: … }
   In calc() darf man von einer Prozentangabe keine einheitenlose Zahl abziehen. Der ganze
   calc-Ausdruck ist damit ungueltig, top/left fallen auf `auto` zurueck (= statische Position
   unter dem Bild, links) und das transform translate(-50%,-50%) zieht den Button in die linke
   untere Ecke, wo ihn uk-inline-clip abschneidet. Aus demselben Grund griff auch
   max-width: calc(100% - …) nicht. Die Zeile unten setzt die Variable mit Einheit; damit rechnet
   calc() wieder und alle uk-position-*-Utilities sitzen so, wie UIkit sie meint.
   `html:root` statt `:root` ist Absicht: eine Spezifitaet hoeher als die Theme-Regel, also
   unabhaengig von der Ladereihenfolge (custom_less landet in theme.13.css, rechner.css danach).
   Betroffen sind auf dieser Site nur die Galerie-Overlays (Motive + Startseite) und der
   Lightbox-Spinner — geprueft: sonst kommt keine uk-position-*-Klasse im Markup vor. */
html:root { --uk-position-margin-offset: 0px; }
/* … und der Button muss auch auf schmalen Handys ganz in die Kachel passen (Karte 194).
   Unter 640 px stehen die Motive zweispaltig, die Kachel ist dann nur ~170 px breit; der
   Standard-Button (2 x 28 px Innenabstand) plus 2 x 20 px Overlay-Polster war breiter als die
   Kachel und wurde von uk-inline-clip am rechten Rand abgeschnitten. Enger gesetzt passt
   „VERGRÖSSERN" bis hinunter zu 320 px Bildschirmbreite. Desktop bleibt unveraendert. */
@media (max-width: 639px) {
  .av-gallery .uk-overlay { padding: 10px; }
  .av-gallery .el-link { padding-left: 10px; padding-right: 10px; max-width: 100%; }
}
/* Sehr schmale Geraete (iPhone SE, Fold-Aussendisplay): dort ist die Kachel nur noch ~132 px
   breit, „VERGRÖSSERN" (13 px) braucht mit Innenabstand ~129 px und wuerde ueber den
   Button-Rahmen hinauslaufen. Eine Stufe kleiner passt es sauber. (Karte 194) */
@media (max-width: 359px) {
  .av-gallery .uk-overlay { padding: 6px; }
  .av-gallery .el-link { padding-left: 8px; padding-right: 8px; font-size: 11px; }
}

/* ── Startseiten-Hero + Icon-Band nach Martins Entwurf ────────────────────────────────
   Entwurf „Design-Horoskope - Neue Homepage - Desktop(2).png" (WhatsApp 25.08.2026,
   Karten 197/198), freigegeben mit Karte 199: „an den Menuepunkten aendert sich nichts —
   es geht ausschliesslich um den Bereich unter der Menueleiste. Ja, bitte in deutsch und
   englisch." Markup dazu in build_pages.py::page_start. Die Ueberschriften bleiben bewusst
   serifenlos (Kundenwunsch Karte 172 vom 24.08.2026), obwohl der Entwurf eine Serifen-
   schrift zeigt. Dieselben Regeln stehen in custom-dh.less UND web/rechner.css, weil der
   custom_less-Block erst bei einem Customizer-Save kompiliert wird, rechner.css aber
   sofort nach theme.13.css geladen wird. */
.uk-section.dh-hero { background: linear-gradient(180deg, #F8F3EB 0%, #F4EDE4 58%, #EFE6DA 100%); }
/* Sub-Zeile so gross wie die H1 (im Entwurf sind alle drei Zeilen gleich gross);
   .av-h1/.av-h1-sub setzen ihre Groesse mit !important, daher hier ebenfalls. */
.dh-hero .av-h1-sub { font-size: clamp(2.1rem, 3.6vw, 3.05rem) !important; line-height: 1.12; color: #1A2A6C; }
.dh-hero .av-h1 { line-height: 1.12; }
.dh-akzent { color: #E8731A; }
.dh-hero .dh-hero-lead p { color: #1A2A6C; }

/* Zierlinie: zwei duenne orange Linien mit vierstrahligem Stern in der Mitte. */
.dh-hero-orn { position: relative; width: 300px; max-width: 100%; height: 18px; margin: 24px 0 4px;
  background-repeat: no-repeat; background-position: center center; background-size: 18px 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C4681B'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E"); }
.dh-hero-orn::before, .dh-hero-orn::after { content: ""; position: absolute; top: 50%; height: 1px;
  width: calc(50% - 20px); background: #C4681B; }
.dh-hero-orn::before { left: 0; }
.dh-hero-orn::after { right: 0; }

/* Buttons: erster gefuellt orange, zweiter orange umrandet mit blauer Schrift und
   orangem Pfeil (Entwurf). Das Theme kennt nur „secondary" = orange Umriss. */
.dh-hero .dh-btn-fill { background-color: #E8731A; color: #FFFFFF; border-color: #E8731A; }
.dh-hero .dh-btn-fill:hover, .dh-hero .dh-btn-fill:focus { background-color: #C25C10; border-color: #C25C10; color: #FFFFFF; }
.dh-hero .dh-btn-line { color: #1A2A6C; border-color: #E8731A; }
.dh-hero .dh-btn-line .uk-icon { color: #E8731A; }
.dh-hero .dh-btn-line:hover, .dh-hero .dh-btn-line:focus { background-color: #E8731A; border-color: #E8731A; color: #FFFFFF; }
.dh-hero .dh-btn-line:hover .uk-icon, .dh-hero .dh-btn-line:focus .uk-icon { color: #FFFFFF; }

/* Vertrauens-Zeile. Seit Karte 317 (31.08.2026) wie in Martins Entwurf „Fuer Design-Horoskope
   Homepage.png": drei gleich breite Spalten mit duennen senkrechten Trennlinien, das Icon mittig
   UEBER der zweizeilig zentrierten Beschriftung. Vorher (Entwurf vom 25.08., Karte 197/199) stand
   das Icon links neben einer einzeiligen Beschriftung — mit dem laengeren dritten Merkmal
   („Auf Wunsch mit ausfuehrlicher Deutung") passte diese Zeile ohnehin nicht mehr nebeneinander
   und brach bei 1440 px um. Das dritte Merkmal ist im Entwurf als einziges orange hervorgehoben;
   genommen wird das Hausorange #E8731A der Icons daneben, nicht der etwas dunklere Ton des
   Entwurfs. Groessen aus dem Entwurf abgeleitet (Icon zu Schrift = 48 zu 25), aber auf die
   Schriftgroesse der Seite bezogen: 28 px Icon zu 15 px Text.
   Unter 640 px verfeinert der Block weiter unten Rinne, Trennlinie und Groessen. */
.dh-hero-trust { flex-wrap: nowrap; margin-left: -16px; }
.dh-hero-trust > * { width: 33.333%; padding-left: 16px; }
.dh-hero-trust > * + * { position: relative; }
.dh-hero-trust > * + *::before { content: ""; position: absolute; left: 8px; top: 2px; bottom: 2px;
  border-left: 1px solid rgba(26, 42, 108, .22); }
.dh-hero-trust span { display: flex; flex-direction: column; align-items: center; text-align: center;
  color: #1A2A6C; font-size: 15px; font-weight: 700; line-height: 1.35; }
.dh-hero-trust img { flex: none; width: 28px; height: 28px; margin: 0 0 8px; }
.dh-hero-trust > *:last-child span { color: #E8731A; }

/* Wohnraum-Foto: unter 960 px normal unter dem Text, darueber randlos in der rechten
   Bildschirmhaelfte ueber die volle Sektionshoehe. 50vw ist Absicht und keine Schaetzung:
   die linke Textspalte endet als 1-2-Spalte des zentrierten Containers exakt in der
   Bildschirmmitte, damit kann der Text nie unter das Bild laufen. Die weiche Kante links
   loest den Uebergang zum Creme-Verlauf auf (im Entwurf ist es dieselbe Flaeche).
   object-position 42 % haelt den Goldrahmen im Bild, wenn oben/unten beschnitten wird. */
.dh-hero-bild img { display: block; width: 100%; height: auto; }
/* Ab 1200 px randlos, darunter (Tablet, kleine Notebooks) bleibt das Foto normal in der
   rechten Spalte stehen: waere es dort schon randlos, muesste der schmale, aber durch den
   Text hohe Bildausschnitt so weit hineinzoomen, dass der Goldrahmen links und rechts
   angeschnitten wird — nachgemessen bei 1024 px. */
@media (min-width: 1200px) {
  /* Sektionshoehe folgt dem Entwurf: dort ist der Hero 1090 von 2600 px hoch = 42 % der
     Bildschirmbreite. Nach oben begrenzt, damit er auf sehr breiten Schirmen nicht
     ausufert; nach unten 560 px, damit das Foto nicht zum Streifen wird. Der Textblock
     steht darin senkrecht mittig. */
  .uk-section.dh-hero { position: relative; overflow: hidden;
    min-height: clamp(560px, 42vw, 820px); padding-top: 70px; padding-bottom: 70px;
    display: flex; flex-direction: column; justify-content: center; }
  .uk-section.dh-hero > .uk-container { width: 100%; }
  .dh-hero .dh-hero-text { position: relative; z-index: 1; }
  .dh-hero .dh-hero-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; padding: 0; }
  .dh-hero .dh-hero-bild > * { height: 100%; margin: 0; }
  .dh-hero .dh-hero-bild img { height: 100%; object-fit: cover; object-position: center 28%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%); }

  /* Startseiten-Kopf seit Karte 317 (31.08.2026): das Siegel „Auf Wunsch mit professioneller
     Horoskop-Deutung" steckt im Foto und endet 39 px vor dessen rechtem Rand. Ist das Fenster
     schmaler als das Bildverhaeltnis (985:813), schneidet `cover` seitlich zu — mit der
     Voreinstellung `center` faellt das Siegel weg. Deshalb hier rechtsbuendig ausgerichtet:
     nachgerechnet bleibt es von 1200 bis rund 2600 px Fensterbreite vollstaendig sichtbar.
     Senkrecht 40 statt der sonstigen 28 %: ab etwa 1950 px ist das Kopf-Fenster (Hoehe bei
     820 px gedeckelt) breiter als das Bildverhaeltnis, dann schneidet `cover` oben und unten
     zu — mit 28 % fiel bei 2560 px der untere Siegelrand weg (nachgemessen). */
  .dh-hero.dh-hero-start .dh-hero-bild img { object-position: 85% 40%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.35) 30px, rgba(0,0,0,.75) 65px, rgba(0,0,0,1) 105px);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.35) 30px, rgba(0,0,0,.75) 65px, rgba(0,0,0,1) 105px); }
}

/* ── Motive-Kopf nach Martins Entwurf „Bild 1a.png" (WhatsApp 26.08.2026, Karte 228) ──
   Der Entwurf zeigt den Motive-Hero in derselben Fassung wie den Startseiten-Hero, nur
   flacher: dort 1090 von 2600 px = 42 % der Breite, hier 724 von 2172 px = 33 %. Alles
   Uebrige (Creme-Verlauf, H1-grosse blaue Unterzeile, blauer Fliesstext, randloses Foto in
   der rechten Bildschirmhaelfte) kommt aus den .dh-hero-Regeln darueber, weil der Abschnitt
   dieselbe Klasse traegt. Markup in build_pages.py::page_motive. */
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-motive { min-height: clamp(430px, 33vw, 660px); }
}

/* ── FAQ-Kopf „So funktioniert's" nach Martins Entwurf „Bild 2a.png" ───────────────────
   (26.08.2026, Karten 229 und 232)
   Wie beim Motive-Kopf zeigt der Entwurf denselben Aufbau wie der Startseiten-Hero; alles
   Uebrige (Creme-Verlauf, H1-grosse Unterzeile, blauer Fliesstext, randloses Foto in der
   rechten Bildschirmhaelfte) kommt aus den .dh-hero-Regeln oben, weil der Abschnitt dieselbe
   Klasse traegt. Zwei Dinge sind hier anders:
   1. Farbaufteilung: H1 blau, Unterzeile orange (Start- und Motive-Seite haben es umgekehrt).
      Das ist die schon vorhandene Aufteilung dieser Seite und steht so auch im Entwurf —
      .dh-hero setzt die Unterzeile aber auf Blau, deshalb hier zurueck auf Orange.
   2. Sektionshoehe folgt dem Seitenverhaeltnis des FOTOS, nicht dem des Entwurfs.
      Karte 232: Martin hat den quadratischen Ausschnitt beanstandet („Das aktuelle Bild auf
      der Webseite entspricht nicht dem Bild 2a.png … bitte dieses Bild 2a.png verwenden,
      weil dieses in der Hoehe kleiner ist"). Vorher stand hier die rechte Haelfte des
      Entwurfs (887 x 887 px, quadratisch); jetzt der ganze Wohnraum aus dem Entwurf, also
      alles rechts vom Text: x 575-1774 = 1199 x 887 px = 1,352:1
      (dh-faq-wohnraum-weit.webp). 575 ist nachgemessen — das letzte farbige Textpixel des
      Entwurfs sitzt bei x 565. Damit das Foto in der 50vw breiten rechten Bildschirm-
      haelfte unbeschnitten steht, ist die Sektion 50 / 1,352 = 37vw hoch; der Kopf ist
      dadurch rund ein Viertel flacher als vorher (50vw) — genau Martins Punkt.
   Markup in build_pages.py::page_faq. */
.dh-hero.dh-hero-faq .av-h1 { color: #1A2A6C; }
.dh-hero.dh-hero-faq .av-h1-sub { color: #E8731A; }
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-faq { min-height: clamp(440px, 37vw, 760px); }
  /* Von 1200 bis 2054 px stimmen Flaechen- und Bildverhaeltnis ueberein, das Foto steht
     also unbeschnitten (bei 1200 px sind es 600 x 444 px, bei 1920 px 960 x 710 px).
     Darueber ist die Hoehe gedeckelt und oben/unten wird beschnitten — dann haelt „25 %"
     den Goldrahmen im Bild: er sitzt zwischen 7,7 % und 64,3 % der Bildhoehe (an der Datei
     nachgemessen), bei 2560 px zeigt das Fenster 5,0–85,2 % der Bildhoehe. */
  .dh-hero.dh-hero-faq .dh-hero-bild img { object-position: center 25%; }
}

/* ── Gutschein-Kopf „Design-Horoskop als Geschenk" nach Martins Entwurf ────────────────
   (WhatsApp 26.08.2026, Bild in Karte 253, Freigabe in Karte 255: „Ja, das gesendete Bild
   soll der Kopf der Seite ‚Gutscheine‘ werden … plus die Textänderung.")
   Aufbau wie Startseite, Motive- und FAQ-Kopf, deshalb dieselbe Klasse .dh-hero — Creme-
   Verlauf, orange H1, blaue Unterzeile in H1-Größe, blauer Fließtext und randloses Foto in
   der rechten Bildschirmhälfte kommen von dort. Die Farbaufteilung des Entwurfs (H1 orange,
   Unterzeile blau) ist die Voreinstellung von .dh-hero, hier ist also nichts umzustellen.
   Eigen ist nur die Sektionshöhe: sie folgt dem Seitenverhältnis des Fotos, damit es in der
   50vw breiten rechten Hälfte unbeschnitten steht. Das Foto ist alles rechts vom Text des
   Entwurfs (x 762–1983 = 1221 x 793 px = 1,5397:1), die Sektion daher 50 / 1,5397 = 32,5vw
   hoch. Von 1200 bis 2338 px stimmen Flächen- und Bildverhältnis damit überein (bei 1200 px
   600 x 390 px, bei 1920 px 960 x 624 px); erst über 2338 px greift der Deckel und oben/unten
   wird beschnitten — „40 %" hält dann die drei Gutschein-Karten im Bild, die zwischen 15,4 %
   und 87,3 % der Bildhöhe stehen (an der Datei nachgemessen).
   Markup in build_pages.py::page_gutschein. */
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-gutschein { min-height: clamp(390px, 32.5vw, 760px); }
  .dh-hero.dh-hero-gutschein .dh-hero-bild img { object-position: center 40%; }
}

/* Handy: „JETZT DESIGN-HOROSKOP ERSTELLEN" (englisch „CREATE YOUR DESIGN HOROSCOPE NOW")
   passt ueber die Spaltenbreite nicht in eine Zeile und bricht um den Pfeil herum um. Der
   Umbruch war auf dieser Seite auch vorher schon da, faellt im neu gestalteten Kopf aber
   sofort auf; der Entwurf zeigt den Button einzeilig. Gleiche Loesung wie beim Band
   „Welches Design passt zu Dir?": Schrift und Polster wachsen mit der Fensterbreite,
   ab rund 420 px wieder die volle Groesse des Themes. */
@media (max-width: 479px) {
  .dh-faq-btns .uk-button { font-size: clamp(9.9px, 3.1vw, 13px);
    padding-left: clamp(8px, 2.6vw, 16px); padding-right: clamp(8px, 2.6vw, 16px); }
}

/* Icon-Band direkt unter dem Hero: vier Spalten, orange Linien-Icons ohne Kreis-Chip. */
.dh-feature-icon { width: 40px; height: 40px; }

/* ── Mobil-Fassung der Startseite nach Martins Entwurf ────────────────────────────────
   Entwurf „Design-Horoskope - Neue Homepage - Smartphone(1).png" (WhatsApp 26.08.2026,
   Karte 200) — die Mobil-Fassung zum bereits umgesetzten Desktop-Entwurf der Karten
   197/198/199. Umfang wie dort: alles ab der Menueleiste abwaerts; die Kopfleiste selbst
   bleibt unangetastet (Martin am 25.08.2026: „es geht ausschliesslich um den Bereich unter
   der Menueleiste"), obwohl der Entwurf sie anders zeigt (Logo links, Personen-Icon +
   Burger rechts). Dieselben Regeln stehen in custom-dh.less UND web/rechner.css, weil der
   custom_less-Block erst bei einem Customizer-Save kompiliert wird, rechner.css aber
   sofort nach theme.13.css geladen wird. Markup dazu in build_pages.py::page_start. */

/* Abschluss-Band unter dem Icon-Band (im Entwurf neu, gilt auf allen Breiten).
   Farbe aus dem Entwurf abgegriffen: Band #F8ECDF, eine Spur waermer als das Icon-Band. */
.uk-section.dh-claim-band { background: #F8ECDF; border-top: 1px solid #EFE1CE;
  padding-top: 20px; padding-bottom: 24px; }
.dh-claim { text-align: center; }
.dh-claim-top { margin: 0; color: #1A2A6C; font-weight: 700; line-height: 1.3;
  font-size: clamp(15px, 4.2vw, 21px); }
.dh-claim-sub { margin: 5px 0 0; color: #1A2A6C; line-height: 1.4;
  font-size: clamp(13px, 3.5vw, 17px); }
.dh-claim-star { display: inline-block; width: 1em; height: 1em; margin: 0 .55em;
  vertical-align: -0.1em; background-repeat: no-repeat; background-position: center center;
  background-size: contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8731A'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E"); }

/* Hero unter 960 px: im Entwurf steht das Wohnraum-Foto ganz oben, randlos ueber die volle
   Bildschirmbreite, darunter erst Ueberschrift, Text, Buttons und Vertrauens-Zeile.
   Umgesetzt ueber `order`, damit die DOM-Reihenfolge (Text zuerst) fuer Vorlesegeraete und
   fuer die Desktop-Fassung unveraendert bleibt.
   Randlos ohne Kenntnis des Container-Polsters: erst die Spaltenrinne der Hero-Zeile auf 0
   setzen (nur diese eine Zeile — die Button- und Trust-Grids liegen tiefer und bleiben),
   dann ist die Spalte exakt der Container, und `margin-left: calc(50% - 50vw)` bei
   `width: 100vw` schiebt sie zuverlaessig auf beide Bildschirmraender. */
@media (max-width: 959px) {
  .uk-section.dh-hero { padding-top: 0; overflow: hidden; }
  .dh-hero > .uk-container > .uk-grid { margin-left: 0; }
  .dh-hero > .uk-container > .uk-grid > * { padding-left: 0; }
  /* `flex: none` ist Pflicht, nicht Kosmetik (Karte 382, 02.09.2026): .uk-grid ist ein
     Flex-Container, der Spalte gilt also flex-shrink: 1. Die 100vw wurden dadurch bis
     auf die Containerbreite zusammengedrueckt — das Foto stand um das Containerpolster
     (15 px) nach links versetzt und liess rechts einen Streifen Creme stehen. Genau das
     hat Martin auf seinem Handy gesehen. Betraf ALLE Koepfe der Site unter 960 px. */
  .dh-hero .dh-hero-bild { order: -1; margin-top: 0 !important; flex: none;
    width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
  .dh-hero .dh-hero-text { margin-top: 25px !important; }
}

@media (max-width: 639px) {
  /* Fliesstext im Hero: im Entwurf deutlich kleiner als auf dem Desktop — nachgemessen
     rund 17 px statt der 22,4 px des Lead-Absatzes (uk-text-lead, 1.4rem). Damit passt der
     Textblock wie im Entwurf unter das Foto, ohne den Bildschirm zu fuellen. */
  .dh-hero .dh-hero-lead p { font-size: clamp(15px, 4.3vw, 18px); }

  /* Buttons untereinander ueber die volle Breite (Entwurf). */
  .dh-hero-btns > .uk-grid > * { width: 100%; }
  .dh-hero-btns .uk-button { width: 100%; }

  /* Vertrauens-Zeile: im Entwurf drei gleich breite Spalten nebeneinander mit duennen
     Trennlinien statt umbrechender Aufzaehlung. Trennstrich als Pseudo-Element mittig in
     der 12-px-Rinne, damit er nicht am Spaltenrand klebt. */
  .dh-hero .dh-hero-trust { flex-wrap: nowrap; margin-left: -12px; }
  .dh-hero .dh-hero-trust > * { width: 33.333%; padding-left: 12px; }
  .dh-hero .dh-hero-trust > * + * { position: relative; }
  .dh-hero .dh-hero-trust > * + *::before { content: ""; position: absolute; left: 6px;
    top: 1px; bottom: 1px; border-left: 1px solid rgba(26, 42, 108, .18); }
  .dh-hero .dh-hero-trust span { line-height: 1.25;
    font-size: clamp(9px, 2.45vw, 13px); }
  .dh-hero .dh-hero-trust img { width: 20px; height: 20px; margin: 0 0 5px; }

  /* Icon-Band: im Entwurf auch auf dem Handy vier Spalten nebeneinander mit senkrechten
     Trennlinien (die Spaltenbreite kommt aus width_default „1-4" in build_pages.py).
     Vier Spalten passen nur mit schmalerer Rinne, kleinerem Container-Polster und
     kleinerer Schrift; `hyphens: auto` faengt die langen Woerter ab („ausser-
     gewoehnliche"), die sonst ueber die Spalte hinauslaufen. */
  .dh-features .uk-container { padding-left: 6px; padding-right: 6px; }
  .dh-features .uk-grid-medium { margin-left: -6px; }
  .dh-features .uk-grid-medium > * { padding-left: 6px; }
  .dh-features .uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before { left: 3px; }
  .dh-features .dh-feature-icon { width: 22px; height: 22px; }
  /* Schriftgroessen nachgemessen statt geschaetzt: im Entwurf sind Titel ~10 px und Text
     ~9 px bei ~93 px Spaltenbreite. Die Hausschrift Nunito Sans Bold laeuft breiter als die
     Schrift des Entwurfs — „ausser&shy;gewoehnliche" braucht bei 9,75 px schon mehr als die
     verfuegbaren 85 px und wurde getrennt. Mit 6 px Rinne/Polster (90 px Spalte) und einer
     Spur kleinerem Titel passt es in einer Zeile, wie im Entwurf. */
  .dh-features h3 { font-size: clamp(9.2px, 2.4vw, 13px); line-height: 1.25;
    margin-top: 10px; hyphens: auto; overflow-wrap: break-word; }
  /* Beim Fliesstext bewusst KEIN hyphens:auto: Chrome trennt gierig mitten im Wort
     („Aus Deinen individu-|ellen"), obwohl das Wort komplett in die naechste Zeile passt.
     Ohne Trennung bricht es wie im Entwurf sauber an den Wortgrenzen um. */
  .dh-features p { font-size: clamp(9px, 2.35vw, 12px); line-height: 1.35;
    overflow-wrap: break-word; }
}

/* Sehr schmale Geraete (320-379 px, iPhone SE 1. Gen / Fold-Aussendisplay): „DESIGN-HOROSKOP
   ERSTELLEN" passt dort ueber die volle Breite nicht in eine Zeile und bricht um den Pfeil
   herum um. Enger gesetzt und eine Stufe kleiner bleibt es einzeilig. Bewusst eine eigene,
   nicht verschachtelte @media-Regel — verschachtelte @media sind reines CSS-Nesting und
   wuerden in web/rechner.css (kein Praeprozessor) aelteren Browsern durchfallen. */
@media (max-width: 379px) {
  .dh-hero-btns .uk-button { padding-left: 12px; padding-right: 12px; font-size: 12px; }
}

/* Absatz „Für Dich. Oder für einen Menschen…" — drei Punkt groesser (Kundenwunsch
   26.08.2026, Karte 202, Punkt 4). Nachgemessen standen dort 16 px = 12 pt, drei Punkt
   mehr sind 15 pt = 20 px; die Zeilenhoehe bleibt beim bisherigen Verhaeltnis 1.65
   (vorher 26,4 px zu 16 px). Bewusst ohne clamp(): „3 Punkte groesser" gilt auf jeder
   Breite gleich. Das Wohnraum-Foto daneben ist mit derselben Karte entfallen, der Text
   steht jetzt allein ueber die volle Breite (Markup: build_pages.py::page_start).
   Dieselbe Regel steht in custom-dh.less UND web/rechner.css, weil der custom_less-Block
   erst bei einem Customizer-Save kompiliert wird, rechner.css aber sofort nach
   theme.13.css geladen wird. */
.dh-fuer-text p { font-size: 20px; line-height: 1.65; }

/* Kopf-Logo: seit 26.08.2026 das designhoroskope.de-Logo (Karte 205, WhatsApp:
   „auf allen designhoroskope-Seiten ganz oben das Logo austauschen"). Die Datei
   selbst steht in build/images/logo-designhoroskope.png, gesetzt wird sie in
   build/apply_theme.php.
   Seit Karte 220 (26.08.2026) liegt dort die kompakte Kundenfassung im Verhaeltnis
   4:1 (640x160, beschnitten). Martin: „bitte oben und unten das Logo tauschen …
   und so gross wie moeglich darstellen."
   Die Kopfleiste ist 88 px hoch, das Logo steht links (.uk-navbar-left), das Menue
   rechts (.uk-navbar-right) — ein breiteres Logo schiebt das Menue also nicht weg,
   es verkleinert nur den Zwischenraum. Der bindet: zwischen Logo-Anfang und dem
   ersten Menuepunkt liegen im 1200-px-Container 299 px, im Band 960–1279 px aber
   nur 201 px (bei 960 px). Statt harter Stufen waechst die Hoehe deshalb mit der
   Fensterbreite und bleibt dabei immer schmaler als der freie Platz:
   Breite = Hoehe x 4, frei sind rund (100vw - 759px) — `25vw - 208px` laesst damit
   immer ueber 40 px Luft zum Menue, auch wenn `100vw` die Scrollleiste mitzaehlt.
   (Bewusst als Differenz statt als Division geschrieben: LESS rechnet ein `/` in
   Klammern sonst selbst aus.) Gedeckelt bei 64 px, mehr vertraegt die 88-px-Leiste
   nicht; die Untergrenze 36 px greift nur ganz knapp ueber 960 px.
   Weil die Datei beschnitten ist, ist die CSS-Hoehe zugleich die sichtbare Hoehe.
   Der Handy-Kopf bleibt bei den 44 px des Themes (dort steht das Logo mittig
   zwischen Menue-Knopf und Flaggen, 176 px breit — passt ab 360 px Bildschirm).
   Dieselbe Regel steht in custom-dh.less UND web/rechner.css (siehe oben). */
@media (min-width: 960px) {
  .uk-logo img, .uk-logo svg { height: clamp(36px, calc(25vw - 208px), 64px); }
}

/* Menuepunkte in der Kopfleiste: seit 03.09.2026 zwei Punkte groesser (Karte 387,
   WhatsApp: „Bitte die Schriftgroesse bei den Menuepunkten um 2 Punkte groesser machen
   — der Platz bis zum Logo muesste dafuer eigentlich ausreichen.").
   Das Theme setzt 15 px (Sammelregel `.uk-navbar-nav>li>a, .uk-navbar-item,
   .uk-navbar-toggle`) und im Band 960–1279 px 14 px bei nur 4 px Innenabstand. Beide
   Stufen wandern um 2 px nach oben, damit der Sprung an der 1280er-Kante gleich bleibt.
   Der Selektor traegt `.tm-header` und steht damit ueber beiden Theme-Regeln — auch ueber
   der in der Media-Query, deshalb ohne !important. Nur der Desktop-Kopf: der Handy-Kopf
   zeigt die Menuepunkte in der Schublade, dort steht kein Logo daneben.
   Der Platz reicht, im Browser ueber alle Breiten nachgemessen (Luecke zwischen Logo und
   erstem Menuepunkt, deutsche Fassung — die englische ist ueberall breiter im Rest):
   960 px 17 px · 975 px 32 px · 1000–1050 px 48 px · 1279 px 224 px · 1280–1500 px 20–24 px
   · ab 1600 px 19 px. Ueberall einzeilig, kein Umbruch, kein waagerechter Ueberlauf.
   Enger als 19 px wird es nicht mehr: ab 1280 px steht der Container fest bei 1280 px und
   das Logo ist bei 64 px Hoehe gedeckelt (Regel darueber), die Leiste aendert sich also
   nicht mehr mit der Fensterbreite.
   Dieselbe Regel steht in custom-dh.less UND web/rechner.css (siehe oben). */
.tm-header .uk-navbar-nav > li > a { font-size: 17px; }
@media (min-width: 960px) and (max-width: 1279px) {
  .tm-header .uk-navbar-nav > li > a { font-size: 16px; }
}

/* Sieben Menuepunkte seit 02.10.2026 (Karte 1057, Martin: eigener Menuepunkt „Geschenk-Moment“,
   „Horoskop erstellen“ kuerzer). Der Punkt heisst „Erstellen“ / „Create“, dazu kommt
   „Geschenk-Moment“ / „Gift moment“ hinter „Geschenk“. Das reicht im Band 960–1279 px fast,
   ab 1280 px nicht: dort setzt das Theme 26 px Abstand + 14 px Innenabstand je Seite, die
   deutsche Leiste waere 900 px breit und schob sich ueber das Logo (1440 px: 8 px
   Ueberlappung, Flaggen halb aus dem Bild). Deshalb ab 1280 px 18 px + 10 px (Wortabstand
   54 → 38 px), im Band 960–1279 px 7 statt 10 px. Nachgemessen (Abstand Logo → erstes Wort,
   deutsch; englisch ist ueberall mindestens 84 px): 960 px 15 px · 975–1024 px 18 px ·
   1100 px 30 px · 1279 px 209 px · ab 1280 px 58 px. Einzeilig, kein Ueberlauf.
   Dieselbe Regel steht in custom-dh.less UND web/rechner.css. */
@media (min-width: 960px) and (max-width: 1279px) {
  .tm-header .uk-navbar-nav { gap: 7px; }
}
@media (min-width: 1280px) {
  .tm-header .uk-navbar-nav { gap: 18px; }
  .tm-header .uk-navbar-nav > li > a { padding-left: 10px; padding-right: 10px; }
}

/* Menuepunkt „Erstellen“ / „Create“ (Menue-CSS-Klasse av-accent) gruen statt orange (Karte 1065,
   02.10.2026). Martin: „wenn z. B. die Seite ‚Deutung‘ aktiv ist, dann stehen zwei orange
   Menuepunkte nebeneinander … ‚Erstellen‘ auf ein kraeftiges Gruen (nicht blau oder orange) –
   und nur wenn ‚Erstellen‘ aktiv ist, sollte der Text orange sein.“ Orange bleibt damit allein
   dem aktiven Punkt. Die alte Regel (#E8731A !important) steht im astrovitalis-Teil von
   custom_less, deshalb hier hoehere Spezifitaet (.tm-header / body) und ebenfalls !important.
   Gruen #16A34A auf Weiss 3,3:1 (das bisherige Orange 3,0:1), fett wie bisher; in der dunklen
   Handy-Schublade das hellere #4ADE80 (7,6:1 auf Dunkelblau), aktiv dort wie alle Punkte #F5B266.
   Dieselbe Regel steht in custom-dh.less UND web/rechner.css. */
.tm-header .uk-navbar-nav > li > a.av-accent { color: #16A34A !important; }
.tm-header .uk-navbar-nav > li > a.av-accent:hover { color: #15803D !important; }
.tm-header .uk-navbar-nav > li.uk-active > a.av-accent { color: #E8731A !important; }
body .uk-offcanvas-bar .uk-nav > li > a.av-accent { color: #4ADE80 !important; }
body .uk-offcanvas-bar .uk-nav > li.uk-active > a.av-accent { color: #F5B266 !important; }

/* ── Band „Welches Design passt zu Dir?" ──────────────────────────────────────────────
   Entwurf „ChatGPT Image 26. Aug. 2026, 12_52_51.png" (WhatsApp 26.08.2026, Karte 224,
   archiviert unter docs/mockups/2026-08-26_band-welches-design.png). Der Entwurf zeigt
   denselben Abschnitt, den es schon gibt — Ueberschrift, Fliesstext und Button sind
   Zeichen fuer Zeichen der bisherige Live-Text —, nur in der Bildsprache des Hero:
   cremefarbener Grund statt dunkelblauem Band, Ueberschrift zweizeilig mit orangem
   Schlussstueck, Zierlinie mit Stern, orange gefuellter Button und rechts eine
   Wohnraum-Aufnahme statt des freigestellten Motivs. Markup in build_pages.py::page_start.
   Der Creme-Ton ist am Entwurf gemessen (#F6EBDC, ueber die ganze Flaeche gleich, kein
   Verlauf); das darunter liegende Vertrauens-Band ist mit #FDF8F1 deutlich heller, die
   beiden Flaechen bleiben also unterscheidbar.
   Dieselben Regeln stehen in custom-dh.less UND web/rechner.css (siehe oben). */
.uk-section.dh-band { background: #F6EBDC; }
.dh-band .uk-heading-h2, .dh-band h2 { color: #1A2A6C; line-height: 1.14; }
.dh-band .dh-band-lead p { color: #1A2A6C; }
.dh-band .dh-hero-orn { margin: 20px 0 4px; }
/* Orange gefuellter Button wie im Hero. Bewusst der Hausorange #E8731A und nicht das
   #CC6301 des Entwurfs: der Entwurf ist eine KI-Bildgenerierung, deren Farben leicht
   abweichen — auf der Seite muessen die beiden Aufruf-Buttons denselben Ton haben. */
.dh-band .dh-btn-fill { background-color: #E8731A; color: #FFFFFF; border-color: #E8731A; }
.dh-band .dh-btn-fill:hover, .dh-band .dh-btn-fill:focus { background-color: #C25C10; border-color: #C25C10; color: #FFFFFF; }
.dh-band .dh-band-bild img { display: block; width: 100%; height: auto; }

/* Ab 1200 px randlos in der rechten Bildschirmhaelfte — dieselbe Loesung wie beim Hero
   (Begruendung dort). Darunter bleibt das Foto normal in der rechten Spalte stehen.
   object-position „center 18%": der Goldrahmen sitzt im Bild zwischen 7 % und 67 % der
   Hoehe. Bei 1440 px zeigt die 485 px hohe Flaeche 70 % der (auf 696 px skalierten)
   Bildhoehe — mit 18 % Versatz liegt das sichtbare Fenster bei 5,5 % bis 75 %, der Rahmen
   ist also ganz zu sehen, mit etwas Wand darueber. Bei 1200 und 1920 px ebenso geprueft. */
@media (min-width: 1200px) {
  .uk-section.dh-band { position: relative; overflow: hidden;
    min-height: clamp(420px, 32vw, 620px); padding-top: 60px; padding-bottom: 60px;
    display: flex; flex-direction: column; justify-content: center; }
  .uk-section.dh-band > .uk-container { width: 100%; }
  .dh-band .dh-band-text { position: relative; z-index: 1; }
  .dh-band .dh-band-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; padding: 0; }
  .dh-band .dh-band-bild > * { height: 100%; margin: 0; }
  .dh-band .dh-band-bild img { height: 100%; object-fit: cover; object-position: center 18%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%); }
}

/* Handy: „JETZT DESIGN-HOROSKOP ERSTELLEN" (englisch „CREATE YOUR DESIGN HOROSCOPE NOW",
   noch etwas laenger) passt ueber die volle Spaltenbreite nicht in eine Zeile und bricht um
   den Pfeil herum um — der Umbruch war auch vorher schon da, faellt beim gefuellten Button
   aber sofort auf. Statt zweier harter Stufen waechst Schrift und Polster deshalb mit der
   Fensterbreite: bei 320 px 9,9 px (englisch gerade noch einzeilig), ab rund 420 px die
   volle Groesse des Themes. Bewusst eine eigene, nicht verschachtelte @media-Regel —
   verschachtelte @media sind reines CSS-Nesting und wuerden in web/rechner.css (kein
   Praeprozessor) aelteren Browsern durchfallen. */
@media (max-width: 479px) {
  .dh-band-btns .uk-button { font-size: clamp(9.9px, 3.1vw, 13px);
    padding-left: clamp(8px, 2.6vw, 16px); padding-right: clamp(8px, 2.6vw, 16px); }
}

/* ── Fussbereich auf Sandgrund ────────────────────────────────────────────────────────
   Kundenwunsch 26.08.2026 (Karte 227, WhatsApp): „Bitte zudem die blaue Hintergrundfarbe
   im Fussbereich der Seite austauschen gegen das helle beige (bzw. helle Sand-Farbe) aus
   zuvor beigefuegtem Bild. Die Farbe der Texte entsprechend auf dunkelblau aendern und das
   Logo mit der blauen Farbe verwenden." Das „zuvor beigefuegte Bild" ist der Entwurf aus
   Karte 224 (WhatsApp 12:57, docs/mockups/2026-08-26_band-welches-design.png); dessen
   Sandton ist #F6EBDC — derselbe Wert, der seit Karte 224 schon das Band „Welches Design
   passt zu Dir?" traegt. Damit bekommt der Fuss genau die Farbe aus dem Entwurf und die
   Seite bleibt in einer Tonleiter: Vertrauens-Band #FDF8F1 (heller) → Fuss #F6EBDC.
   Der Abschnitt selbst steht in apply_footer.php jetzt auf style=default (statt primary),
   das Markup ist unveraendert. Die Regeln hier ueberschreiben die aus dem astrovitalis-Klon
   stammenden .av-footer-Regeln (weisse Links, goldene Ueberschriften) — gleiche
   Spezifitaet, aber spaeter geladen, deshalb gewinnen sie; bei der h5-Farbe braucht es
   wegen des dortigen !important ebenfalls ein !important.
   Dieselben Regeln stehen in custom-dh.less UND web/rechner.css, weil der custom_less-Block
   erst bei einem Customizer-Save kompiliert wird, rechner.css aber sofort nach
   theme.13.css geladen wird. */
.uk-section.dh-footer { background: #F6EBDC; }
.dh-footer, .dh-footer .uk-panel, .dh-footer p { color: #1A2A6C; }
.dh-footer .uk-h5, .dh-footer h5 { color: #1A2A6C !important; }
.dh-footer a { color: #1A2A6C; }
.dh-footer a:hover, .dh-footer a:focus { color: #E8731A; text-decoration: none; }
/* Trennlinie und Copyright-Zeile: dasselbe Blau, nur zurueckgenommen — auf dem hellen
   Grund waere das graue uk-text-muted des Themes zu blass und faellt aus dem Farbklang. */
.dh-footer hr { border-top-color: rgba(26,42,108,.18); }
.dh-footer .uk-text-muted, .dh-footer .uk-text-muted p { color: rgba(26,42,108,.65) !important; }
/* Widerrufsbutton (§ 312k BGB): auf dem dunklen Grund war er weiss umrandet, hier blau. */
.dh-footer .dh-widerruf-btn { color: #1A2A6C; border-color: rgba(26,42,108,.5); }
.dh-footer .dh-widerruf-btn:hover, .dh-footer .dh-widerruf-btn:focus {
  color: #FFFFFF; background-color: #1A2A6C; border-color: #1A2A6C; }

/* ── Werbemittel im Partner-Dashboard (Karte 355, 01.09.2026) ──────────────
   Kacheln mit Vorschaubild und Download-Button, Textvorlagen zum Kopieren.
   Die Vorschau bekommt eine feste Hoehe mit `contain`, damit hochkant- und
   quer-Banner nebeneinander eine ruhige Reihe ergeben statt Treppenstufen. */
.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; }
/* Textvorlagen: Umbrueche des Kunden erhalten, aber die Kachel nicht sprengen. */
.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; }
/* Knopf immer unten: der Textblock darueber darf wachsen, die Kachelreihe bleibt buendig. */
.dh-werb-btn { margin-top: auto; padding-top: 12px; }

/* Dashboard-Ansicht (Karte 1236, 16.10.2026, Martin): mit Login-Link setzt partner.js die Klasse
   .dh-p-dash an <html>. „So funktioniert es“, die Werbe-Vorteile und die Fragen stehen dann nicht
   mehr auf der Seite (die kennt der Partner von der Anmeldeseite) — unter dem Kopf folgt direkt das
   Dashboard, darunter die Ueberschrift „Starke Werbemittel …“ (.dh-werb-h) und die Werbemittel. */
.dh-p-dash .dh-p-schritte, .dh-p-dash .dh-p-werb, .dh-p-dash .dh-p-faq { display: none !important; }
.dh-werb-h { margin: 44px 0 20px; }
@media (max-width: 639px) { .dh-werb-h { margin-top: 32px; } }
/* Filter nach Bereichen (Name ohne Nummer, Texte zusammen) — Auswahlfeld wie auf /motive. */
.dh-wfilter { max-width: 420px; margin: 4px 0 16px; }
.dh-wfilter select { flex: 1; min-width: 0; }

/* ── Partner-Kopf nach Martins Entwuerfen vom 02.09.2026 (Karten 372/373) ──────────────
   Desktop `docs/mockups/2026-09-02_partner-desktop.jpg` (1231x1600), Handy
   `…_partner-mobil.jpg` (715x1600). Begleittext (Karte 373): „Hierbei geht es nur um den
   Bereich oberhalb von ‚Partner werden‘ bzw. ‚Partner-Login‘. 1) bitte die kleine Schrift
   nach Moeglichkeit etwas groesser machen — bei beiden Varianten. 2) im Kopfbereich ist ein
   Button abgebildet ‚Jetzt Partner..‘ — bitte diesen Button mit dem Bereich ‚Partner werden‘
   verlinken." Markup in build_pages.py::page_partner.
   Zu Punkt 1: der Entwurf ist 1231 px breit gerendert, seine kleinen Zeilen liegen dort bei
   rund 13-14 px. Uebernommen sind sie hier eine Stufe groesser — Vorteilszeilen 17 px,
   Schritt- und Merkmalstexte 16 px, Vertrauenszeile 15 px (Fliesstext der Site: 16 px).
   Dieselben Regeln stehen in custom-dh.less UND web/rechner.css, weil der custom_less-Block
   erst bei einem Customizer-Save kompiliert wird, rechner.css aber sofort nach
   theme.13.css geladen wird. */

/* Sprungmarke fuer den CTA (Punkt 2): der Antragsblock ist #dh-partner, der Abstand haelt
   ihn unter der Kopfleiste frei. */
/* Sprungziel des CTA (Punkt 2 des Auftrags): eine leere Marke 96 px ueber dem Formular,
   damit die mitscrollende Kopfleiste die Kartenoberkante nicht abdeckt — YOOtheme haengt an
   Anker-Links `uk-scroll` ohne Offset an, UIkit setzt das Ziel sonst buendig an den oberen
   Rand. Ein zusaetzliches `scroll-behavior: smooth` darf NICHT dazu: dann animieren Browser
   und UIkit gleichzeitig und die Scroll-Schleife von UIkit kommt nicht zur Ruhe. */
.dh-anker { display: block; position: relative; top: -96px; height: 0; visibility: hidden; }

/* Zeile ueber der H1: Linie + Stern links, Stern + Linie rechts (wie die Zierlinie des
   Startseiten-Kopfes, nur waagerecht neben dem Text). */
.dh-p-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  color: #C4681B; font-size: 15px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dh-p-eyebrow::before, .dh-p-eyebrow::after { content: ""; flex: none; width: 44px; height: 12px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C4681B'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E"),
                    linear-gradient(#C4681B, #C4681B); }
.dh-p-eyebrow::before { background-position: right center, left center;
  background-size: 11px 11px, 29px 1px; }
.dh-p-eyebrow::after { background-position: left center, right center;
  background-size: 11px 11px, 29px 1px; }
/* Abstand Vorzeile → H1 im Kopf von Deutung und Partner wie beim Geschenk-Moment (16 px; Karte 1065,
   Martin 02.10.2026: dort sieht es „etwas gedraengt“ aus). Die Vorzeile steht hier allein in einem
   Text-Element, dessen letztes Kind UIkit auf margin-bottom 0 setzt (.uk-panel > :last-child) —
   deshalb greift das margin der Grundregel nicht. Spezifitaet 0-3-0 schlaegt die UIkit-Regel. */
.dh-hero.dh-hero-deutung .dh-p-eyebrow, .dh-hero.dh-hero-partner .dh-p-eyebrow { margin-bottom: 16px; }

/* H1: zwei Zeilen, blau mit orangem Mittelwort. Etwas kleiner als die uebrigen Heros
   (.av-h1 = clamp(2.1rem,3.6vw,3.05rem)), weil die Zeilen hier laenger sind. */
.dh-hero-partner .dh-p-h1 { font-size: clamp(1.85rem, 3.1vw, 2.7rem) !important;
  line-height: 1.14; color: #1A2A6C; }

/* Umbruch der H1 (Karte 382, 02.09.2026). Bis dahin stand ein festes <br> hinter dem
   Gedankenstrich. Auf Martins Handy passte „Deine Community spart –" nicht mehr in eine
   Zeile, der Strich rutschte allein in Zeile 2 und die Ueberschrift wurde dreizeilig.
   Er bot zwei Loesungen an und stellte die Wahl frei; genommen ist seine Variante (a)
   — „hinter dem Bindestrich gibt es keinen Zeilenumbruch, d.h. aus der 2. Zeile wird
   ‚– Du verdienst mit!'". Variante (b) haette den Text geaendert (Punkt statt Strich)
   und damit auch die Desktop-Fassung, die er ausdruecklich als fertig bezeichnet hat.
   Der Umbruch kommt deshalb aus der CSS: ein Pseudo-Element mit `content: "\A"` setzt
   ihn auf grossen Schirmen HINTER, auf dem Handy VOR den Strich. Ein Leerzeichen am
   Zeilenanfang faellt beim Umbruch weg, deshalb steht es ausserhalb der Marke. */
.dh-p-h1 .dh-p-strich::after { content: "\A"; white-space: pre; }
@media (max-width: 639px) {
  .dh-p-h1 .dh-p-strich::after { content: none; }
  .dh-p-h1 .dh-p-strich::before { content: "\A"; white-space: pre; }
}
/* Sehr schmale Geraete (iPhone SE, 320 px): dort passt selbst „Deine Community spart"
   bei 29,6 px nicht mehr in eine Zeile und die Ueberschrift waere wieder dreizeilig.
   Unterhalb von 360 px waechst die Schrift deshalb mit der Fensterbreite mit. */
@media (max-width: 359px) {
  .dh-hero-partner .dh-p-h1 { font-size: clamp(1.55rem, 7.7vw, 1.85rem) !important; }
}

/* Die zwei Vorteile: runder heller Chip mit Linien-Icon, daneben fette Kopfzeile und
   der Fliesstext. */
.dh-p-vorteile { display: flex; flex-direction: column; gap: 18px; }
.dh-p-vorteil { display: flex; align-items: flex-start; gap: 16px; }
.dh-p-chip { flex: none; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(26,42,108,.10); }
.dh-p-chip img { width: 30px; height: 30px; }
.dh-p-vorteil-txt { color: #1A2A6C; font-size: 17px; line-height: 1.45; }
.dh-p-vorteil-txt strong { display: block; font-weight: 800; }
.dh-p-vorteil-txt b { font-weight: 800; }

/* CTA: gefuellt orange wie der erste Startseiten-Button, hier eine Stufe groesser. */
.dh-hero-partner .dh-p-cta { font-size: 15px; font-weight: 800; letter-spacing: .02em; }

/* Vertrauenszeile unter dem Button: drei Angaben mit kleinem Stern dazwischen. */
.dh-p-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; color: #1A2A6C; font-size: 15px; font-weight: 700; }
.dh-p-trust > span + span::before { content: ""; display: inline-block; width: 11px; height: 11px;
  margin-right: 10px; vertical-align: -1px; background-repeat: no-repeat; background-size: 11px 11px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8731A'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E"); }

/* Bildhaelfte: der Zuschnitt ist 1188x1024 = 1,16:1 (Karte 384; vorher 631x544, gleiches
   Verhaeltnis), Sektion also 50/1,16 = 43vw hoch — dann steht das Foto rechts
   unbeschnitten. Der Deckel 980 px greift ab 2278 px Fensterbreite; darueber wird unten
   beschnitten, nie oben: Martins Siegel sitzt nur 4 % der Bildhoehe unter der Oberkante,
   deshalb `object-position: center top`. */
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-partner { min-height: clamp(560px, 43vw, 980px); }
  /* Weichere Kante als bei den uebrigen Koepfen (dort 60 px): im Entwurf laeuft der
     Creme-Verlauf ueber rund 140 px in das Foto hinein. */
  .dh-hero.dh-hero-partner .dh-hero-bild img { object-position: center top; }
}

/* Unter 1200 px braucht dieser Kopf keine eigene Regel: unter 960 px greift die
   Standard-Regel dieser Site (Block „Handy" weiter oben) — das Foto steht randlos ueber dem
   Text, genau die Reihenfolge, die auch Martins Handy-Entwurf zeigt; zwischen 960 und
   1199 px stehen Text und Foto nebeneinander.
   Der Entwurf setzt den Text ZUSAETZLICH ins Foto hinein. Das ist bei 390 px nicht lesbar zu
   bekommen: sein Entwurf ist 715 px breit gerendert und hat entsprechend kleinere Schrift,
   waehrend Punkt 1 seines Auftrags die Schrift ausdruecklich GROESSER verlangt. Damit reicht
   die Zeile „Deine Community spart –" bis rund 90 % der Fensterbreite und stuende mitten im
   50%-Siegel bzw. im dunklen Himmel (beides nachgestellt und verworfen). Lesbarkeit geht vor;
   alles Uebrige (Zierzeile, H1, Vorteile, CTA, Vertrauenszeile) steht wie gezeichnet. */


/* Der CTA traegt eine lange Beschriftung; damit sie wie im Entwurf einzeilig bleibt, wachsen
   Schrift und Polster unter 768 px mit der Fensterbreite (gleiche Loesung wie bei den
   FAQ-Buttons weiter oben). */
/* Ab 640 px traegt der CTA weiter die lange Beschriftung; zwischen 640 und 767 px wird
   sie knapp, deshalb waechst die Schrift dort mit der Fensterbreite. Unter 640 px steht
   die kurze Fassung (eigenes Element, uk-hidden@s) — sie braucht diese Notbremse nicht
   und bekommt stattdessen eine GROESSERE Schrift als der Desktop-Button (Karte 382). */
@media (min-width: 640px) and (max-width: 767px) {
  .dh-hero-partner .dh-p-cta-lang { font-size: clamp(11.5px, 2.6vw, 15px);
    padding-left: clamp(10px, 2.6vw, 30px); padding-right: clamp(10px, 2.6vw, 30px); }
}
@media (max-width: 639px) {
  .dh-hero-partner .dh-p-cta-kurz { font-size: clamp(14px, 4vw, 17px);
    padding-left: clamp(16px, 5vw, 30px); padding-right: clamp(16px, 5vw, 30px); }
}
/* Zweite Enge: von 960 bis 1199 px stehen Text und Foto nebeneinander, der Button hat also
   nur die halbe Containerbreite — bei voller Schriftgroesse bricht er dort um. */
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-hero-partner .dh-p-cta-lang { font-size: clamp(11px, 1.35vw, 15px);
    padding-left: clamp(14px, 1.8vw, 30px); padding-right: clamp(14px, 1.8vw, 30px); }
}

/* „So funktioniert es": sechs Schritte, auf dem Handy 3 x 2. Die senkrechten (bzw. beim
   Umbruch waagerechten) Trennlinien kommen von uk-grid-divider (divider=True). */
.dh-p-schritte .dh-p-schritt { text-align: center; color: #5B6070; }
.dh-p-schritte .dh-p-schritt img { display: block; width: 34px; height: 34px; margin: 0 auto 12px; }
.dh-p-schritte .dh-p-schritt strong { display: block; margin-bottom: 6px;
  color: #1A2A6C; font-size: 16px; font-weight: 800; line-height: 1.3; }
.dh-p-schritte .dh-p-schritt span { display: block; font-size: 16px; line-height: 1.5; }

/* „Starke Werbemittel fuer Deinen Erfolg": Unterzeile mittig, darunter der Sandkasten mit
   vier Merkmalen (Desktop vier Spalten mit Trennstrichen, darunter 2 x 2). */
.dh-p-werb .dh-p-werb-sub { color: #5B6070; font-size: 18px; line-height: 1.5; }
.dh-p-merkmale { display: grid; grid-template-columns: repeat(4, 1fr);
  background: #FDF3E7; border-radius: 14px; padding: 26px 10px; }
.dh-p-merkmal { display: flex; align-items: flex-start; gap: 14px; padding: 4px 20px; }
.dh-p-merkmal + .dh-p-merkmal { border-left: 1px solid rgba(232,115,26,.30); }
.dh-p-merkmal img { flex: none; width: 30px; height: 30px; margin-top: 2px; }
.dh-p-merkmal strong { display: block; margin-bottom: 4px; color: #1A2A6C;
  font-size: 16px; font-weight: 800; line-height: 1.3; }
.dh-p-merkmal span { display: block; color: #5B6070; font-size: 16px; line-height: 1.45; }
@media (max-width: 959px) {
  .dh-p-merkmale { grid-template-columns: repeat(2, 1fr); padding: 20px 6px; }
  .dh-p-merkmal { padding: 14px 16px; }
  .dh-p-merkmal + .dh-p-merkmal { border-left: 0; }
  .dh-p-merkmale > :nth-child(even) { border-left: 1px solid rgba(232,115,26,.30); }
  .dh-p-merkmale > :nth-child(n+3) { border-top: 1px solid rgba(232,115,26,.30); }
}
@media (max-width: 479px) {
  .dh-p-merkmale { grid-template-columns: 1fr; }
  .dh-p-merkmale > :nth-child(even) { border-left: 0; }
  .dh-p-merkmale > :nth-child(n+2) { border-top: 1px solid rgba(232,115,26,.30); }
  .dh-p-vorteil-txt { font-size: 16px; }
  .dh-p-chip { width: 48px; height: 48px; }
  .dh-p-chip img { width: 26px; height: 26px; }
  .dh-p-eyebrow { font-size: 13px; gap: 8px; }
  .dh-p-eyebrow::before, .dh-p-eyebrow::after { width: 30px; background-size: 10px 10px, 16px 1px; }
}

/* ── Gutschein-Kacheln im Bestellformular: Hochformat + „Vergrößern" ──────────────────
   Kundenwunsch 03.09.2026 (Karte 386): „Auf der Seite /gutschein werden die Gutscheine im
   Bestellformular in quadratischer Form angezeigt, wodurch oben und unten ein Teil der
   Gutscheine abgeschnitten ist. Bitte die 4 Gutschein-Bilder im Hochformat anzeigen …
   Wäre es zudem möglich, dass der User – so wie bei den Horoskop-Motiven – einen Button
   ‚Vergrößern' angezeigt bekommt …"
   Ursache des Beschnitts: `.dh-grid img { aspect-ratio: 1; object-fit: cover }` weiter oben.
   Die Regel ist für die Motiv-Kacheln richtig (Motive sind quadratisch), Martins vier
   Gutschein-Vorlagen sind aber 2:3 (1500 × 2250 px). Deshalb hier nur für `.dh-layouts`
   überschrieben — `.dh-grid.dh-layouts` ist eine Spezifität höher als `.dh-grid`.
   Der Lupen-Knopf steht UNTER der Karte statt als Overlay darin: die Motiv-Galerie blendet
   ihr Overlay beim Überfahren mit der Maus ein, auf Touch-Geräten gibt es kein Überfahren —
   dort müsste der Knopf dauerhaft im Bild liegen und würde die Karte wieder teilweise
   verdecken, also genau das, was der Auftrag abstellen soll. Markup in web/gutschein.js.
   Dieselben Regeln stehen in custom-dh.less UND web/rechner.css, weil der custom_less-Block
   erst bei einem Customizer-Save kompiliert wird, rechner.css aber sofort nach
   theme.13.css geladen wird. */
.dh-grid.dh-layouts { grid-template-columns: repeat(2, 1fr); gap: 12px; max-height: none; overflow: visible; }
/* Vier nebeneinander erst ab 640 px — darunter wäre die Kachel zu schmal für „VERGRÖSSERN"
   (das Theme setzt Buttons in Großbuchstaben), vgl. dieselbe Sorge bei .av-gallery oben. */
@media (min-width: 640px) { .dh-grid.dh-layouts { grid-template-columns: repeat(4, 1fr); } }
.dh-grid.dh-layouts img { aspect-ratio: 0.6667; }   /* = 2:3, Martins Vorlagen sind 1500 x 2250 px */
.dh-layouts .dh-layout { display: flex; flex-direction: column; }
.dh-layouts .dh-pick { width: 100%; }
.dh-layouts .dh-name { 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; }
}

/* ── Weicher Uebergang Foto → Creme in ALLEN Koepfen (Karte 424, 04.09.2026) ──────────
   Martin am 04.09. aus der WhatsApp-Gruppe: „Wir hatten auf den Seiten Header erstellt,
   bei denen das rechte Bild und der links stehende Text ineinander verschmolzen sind …
   jetzt sind die Bilder im Header abgehackt und es sieht alles andere als harmonisch aus."
   Er hat zwei seiner Entwuerfe mitgeschickt (Start-Kopf und Partnerseite). In den
   Entwuerfen laeuft das Wohnraum-Foto ueber die ganze Breite und wird nach links hin immer
   heller, bis es in der Creme-Flaeche verschwindet — man sieht keine Kante. Auf der Seite
   endete das Foto mit einer 60-px-Blende: viel zu kurz, um den Tonunterschied zwischen der
   warmen Wand im Foto und dem Creme-Verlauf der Sektion aufzuloesen. Auf Motive, Fragen,
   Gutscheine und Partner stand deshalb eine sichtbare senkrechte Kante genau in der
   Bildschirmmitte.
   Nachgemessen im Entwurf der Partnerseite (2500 px breit): der Uebergang laeuft dort ueber
   rund 10 % der Seitenbreite. Auf die 50-vw-Bildhaelfte gerechnet sind das etwa 30 % ihrer
   Breite — daher die Rampe bis 34 %, mit drei Zwischenstufen, damit sie weich ansetzt und
   nicht als Band sichtbar wird (eine reine 0→1-Gerade zeigt an ihrem Ende eine Kante).
   Ausnahme Startseite: dort steht der Goldrahmen unmittelbar am linken Bildrand (object-
   position 85 % schneidet zusaetzlich 36 px weg, damit das Siegel rechts ganz sichtbar
   bleibt — Karte 317). Eine 34-%-Rampe wuerde den Rahmen halb wegwischen, deshalb dort
   105 px, ebenfalls abgestuft.
   Die Sonderregel der Partnerseite (140 px) ist entfallen, sie ist in der neuen Rampe
   aufgegangen.

   Unter 1200 px stand das Foto bis jetzt als hartkantiges Rechteck in der rechten Spalte —
   ohne jede Blende, also genau das „abgehackt" aus Martins Nachricht. Randlos wie auf dem
   Desktop geht dort nicht (der schmale, aber hohe Ausschnitt zoomt so weit hinein, dass der
   Goldrahmen seitlich angeschnitten wird — nachgemessen bei 1024 px, siehe Kommentar beim
   Hero oben). Stattdessen bekommt das Foto hier auf allen vier Seiten eine weiche Kante:
   links die lange Rampe, oben/unten/rechts eine 22-px-Feder. Drei Maskenebenen mit
   `mask-composite: intersect` (Safari: `-webkit-mask-composite: source-in`). Browser ohne
   mask-composite verrechnen die Ebenen mit dem Vorgabewert `add`, sehen also praktisch
   keine Blende — das ist der Stand von vorher und damit ein unkritischer Rueckfall.

   Auf dem Handy steht das Foto ueber dem Text und endete mit einer harten Kante quer
   durchs Bild; dort blendet es jetzt nach unten in die Creme-Flaeche aus. */
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-hero .dh-hero-bild img, .dh-band .dh-band-bild img {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 26%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
    -webkit-mask-composite: source-in, source-in;
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 26%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
            mask-composite: intersect; }
}
@media (max-width: 959px) {
  .dh-hero .dh-hero-bild img {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 62%, rgba(0,0,0,.55) 84%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 62%, rgba(0,0,0,.55) 84%, rgba(0,0,0,0) 100%); }
}

/* ── Deutungs-Seite /deutung (Karte 443, 05.09.2026) ──────────────────────────────────
   Martins Entwurf `docs/mockups/2026-09-05_deutungs-seite-entwurf.png` (2500x3625), dazu
   die WhatsApp-Vorgabe vom 05.09.: Menuepunkt „Deutung" zwischen „Horoskop erstellen" und
   „Fragen", Seite wie im Entwurf, darunter noch einmal der orange Knopf. Alle Bilder sind
   Zuschnitte aus genau diesem Entwurf (build/images/dh-deutung-*.webp), die Farben daraus
   abgegriffen: Creme #FEFAF4, dunkles Band #0C2242. Markup: build_pages.py::page_deutung.
   Aufbau bewusst mit den vorhandenen Bausteinen der Site (.dh-hero, .dh-p-eyebrow,
   .av-ornament, .dh-btn-fill) statt neuer Sonderwege. */

/* Kopf. Bildzuschnitt 1350x1021 = 1,322:1 -> Sektionshoehe 50/1,322 = 37,8vw.
   Die lange 34-%-Rampe der uebrigen Koepfe (Karte 424) wuerde hier das Buch halb
   wegwischen — es steht schon bei 10 % der Bildbreite. Deshalb wie auf der Startseite
   eine kurze, abgestufte Blende; der Zuschnitt bringt den Creme-Uebergang des Entwurfs
   ohnehin mit (im Entwurf laeuft er von x=1000 bis x=1200, also ueber die ersten 4 %). */
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-deutung { min-height: clamp(430px, 37.8vw, 780px); }
  .dh-hero.dh-hero-deutung .dh-hero-bild img { object-position: center 50%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.3) 4%, rgba(0,0,0,.72) 9%, rgba(0,0,0,.93) 13%, rgba(0,0,0,1) 17%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.3) 4%, rgba(0,0,0,.72) 9%, rgba(0,0,0,.93) 13%, rgba(0,0,0,1) 17%); }
}
/* Die H1 ist hier laenger als auf den uebrigen Koepfen („Mehr als ein schoenes Bild." /
   englisch „More than a beautiful picture.") und braucht deshalb eine Stufe weniger, damit
   jede der beiden Zeilen des Entwurfs auch wirklich eine Zeile bleibt. */
.dh-hero.dh-hero-deutung .av-h1 { color: #1A2A6C; }
.dh-hero.dh-hero-deutung .dh-d-h1 { font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; line-height: 1.18; }
.dh-hero.dh-hero-deutung .dh-hero-lead p + p { margin-top: 14px; }

/* Merkmal-Zeile unter dem Knopf (Icon links, Text rechts) — im Entwurf drei Angaben
   nebeneinander, nicht die zentrierte Vertrauens-Zeile der Startseite. */
.dh-d-mini { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.dh-d-mini > span { display: flex; align-items: center; gap: 10px; }
.dh-d-mini img { flex: none; width: 26px; height: 26px; }
.dh-d-mini em { font-style: normal; color: #1A2A6C; font-size: 15px; line-height: 1.3; }

/* Ueberschriften der Seite: zwischen h2 und heading-medium, wie im Entwurf. */
.dh-d-h2 { font-size: clamp(1.65rem, 2.8vw, 2.35rem) !important; line-height: 1.16; color: #1A2A6C; }

/* ── „Was Deine Deutung besonders macht": vier Karten mit grosser Nummer ───────────── */
.uk-section.dh-d-karten { background: #FEFAF4; }
.dh-d-karten .dh-d-sub { color: #5B6070; font-size: 17px; margin: 0; }
/* Gleiche Kartenhoehe je Reihe: die Spalte wird zum Flex-Container, das Textelement
   darin auf volle Breite und Hoehe gezogen. Bewusst nur in dieser einen Reihe
   (eigene Klasse), damit die Ueberschriften-Reihe darueber unberuehrt bleibt. */
.dh-d-kartenreihe > * { display: flex; }
.dh-d-kartenreihe > * > * { width: 100%; }
.dh-d-karte { height: 100%; box-sizing: border-box; background: #FEFBF5;
  border: 1px solid #EFE3D2; border-radius: 10px; padding: 22px 20px; }
.dh-d-karte-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dh-d-karte-kopf img { width: 30px; height: 30px; }
/* Serifenlos wie die ganze Site — Martins stehende Vorgabe seit 24.08.2026 (Karte 172,
   wortgleich wiederholt in Karte 275): „Bitte ändere auf allen Seiten von designhoroskope die
   Serifen-Schrift gegen eine serifenlose Schrift." Der Entwurf zeigt die Nummern und die
   Kartentitel in einer Serifenschrift; das ist der Stand vor dieser Vorgabe und wird deshalb
   bewusst NICHT übernommen. */
/* Der Klassenselektor allein reicht hier nicht: `.dh-d-karte span` weiter unten ist als
   Klasse+Element spezifischer und hat die Nummer sonst auf Fliesstextgroesse gedrueckt. */
.dh-d-karte .dh-d-nr { font-size: 40px; line-height: 1; font-weight: 800; color: #E8731A; }
.dh-d-karte strong { display: block; margin-bottom: 10px; color: #1A2A6C;
  font-weight: 800; font-size: 19px; line-height: 1.25; }
.dh-d-karte > span { display: block; color: #5B6070; font-size: 15.5px; line-height: 1.55; }
/* Punkt 05 „Dein Horoskop – übersetzt in Dein Leben" (Karte 1062, Martin 02.10.2026):
   „gerne auch farblich unterlegt, um ihn hervorzuheben" — warmer Orange-Ton der Site als
   Flaeche, Unterzeile in der Akzentfarbe. Daneben als sechstes Feld ein Bild in Kartenhoehe. */
.dh-d-karte.dh-d-karte-hervor { background: linear-gradient(150deg, #FFEEDB 0%, #FAD8B2 100%);
  border-color: #EDB77C; box-shadow: 0 6px 18px rgba(232, 115, 26, .14); }
.dh-d-karte-hervor > span { color: #4E5363; }
.dh-d-karte .dh-d-unter { display: block; margin: -4px 0 10px; color: #E8731A; font-style: normal;
  font-weight: 700; font-size: 16px; line-height: 1.3; }
.dh-d-karte-bild { height: 100%; min-height: 240px; box-sizing: border-box; overflow: hidden;
  border: 1px solid #EFE3D2; border-radius: 10px; }
.dh-d-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* ── „Warum passiert mir das eigentlich immer wieder?" ─────────────────────────────
   Spiegelbild des Heros: Foto randlos in der LINKEN Bildschirmhaelfte, Text rechts.
   Bildzuschnitt 1250x750 = 1,667:1 -> 50/1,667 = 30vw. Die Blende laeuft deshalb nach
   rechts (`to left` im Verlauf), sonst stuende die Kante mitten im Bild. */
.uk-section.dh-d-warum { background: linear-gradient(180deg, #FDF8F1 0%, #F9F2E7 100%); }
.dh-d-warum .dh-d-warum-bild img { display: block; width: 100%; height: auto; }
.dh-d-warum-lead { margin: 0; color: #1A2A6C; font-weight: 700; font-size: 17px; }
.dh-d-fragen { list-style: none; margin: 16px 0 0; padding: 0; }
.dh-d-fragen li { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 11px;
  color: #1A2A6C; font-size: 16.5px; line-height: 1.45; }
.dh-d-fragen img { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.dh-d-warum-schluss { margin: 18px 0 0; color: #5B6070; font-size: 16px; line-height: 1.6; }
@media (min-width: 1200px) {
  .uk-section.dh-d-warum { position: relative; overflow: hidden;
    min-height: clamp(420px, 30vw, 620px); padding-top: 60px; padding-bottom: 60px;
    display: flex; flex-direction: column; justify-content: center; }
  .uk-section.dh-d-warum > .uk-container { width: 100%; }
  .dh-d-warum .dh-d-warum-text { position: relative; z-index: 1; margin-left: 50%; }
  .dh-d-warum .dh-d-warum-bild { position: absolute; top: 0; left: 0; bottom: 0; width: 50vw; padding: 0; }
  .dh-d-warum .dh-d-warum-bild > * { height: 100%; margin: 0; }
  /* Links buendig: der Abschnitt wird durch den Text hoeher als das Bildverhaeltnis, `cover`
     schneidet dann seitlich. Beschnitten werden darf nur rechts — dort liegt ohnehin die
     Blende zur Cremeflaeche; links steht Martins handschriftliche Frage im Bild. */
  .dh-d-warum .dh-d-warum-bild img { height: 100%; object-fit: cover; object-position: left center;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%);
            mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-d-warum .dh-d-warum-bild img {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 26%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
    -webkit-mask-composite: source-in, source-in;
            mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 26%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
            mask-composite: intersect; }
}

/* ── „Du kaufst bei uns nicht die Katze im Sack" ───────────────────────────────────
   Text mittig, links die gezeichnete Katze, rechts Martins handschriftlicher Zuruf
   (englisch nur der Pfeil — die Handschrift ist deutsch). Beide Bilder sind reine
   Zierde und deshalb erst ab 960 px sichtbar; darunter ist kein Platz dafuer. */
.uk-section.dh-d-beispiel { background: #FEFAF4; position: relative; overflow: hidden; }
.dh-d-eyebrow-mitte { justify-content: center; }
.dh-d-beispiel-lead { max-width: 620px; margin: 0 auto; color: #5B6070; font-size: 17px; line-height: 1.6; }
/* Der Textblock bleibt schmal in der Mitte, sonst laeuft die Ueberschrift in die Katze links
   und in den handschriftlichen Zuruf rechts. */
.dh-d-beispiel .dh-d-h2, .dh-d-beispiel .dh-p-eyebrow { max-width: 660px; margin-left: auto; margin-right: auto; }
/* Erst ab 1200 px: darunter ist der Container zu schmal, Katze und Zuruf lagen sonst auf der
   Ueberschrift (bei 1024 px nachgesehen). Sie sind reine Zierde, also lieber weglassen. */
.dh-d-katze, .dh-d-deko { display: none; }
@media (min-width: 1200px) {
  .dh-d-katze { display: block; position: absolute; left: 7%; top: 50%;
    transform: translateY(-50%); width: 150px; height: auto; }
  .dh-d-deko { display: block; position: absolute; right: 7%; top: 50%;
    transform: translateY(-48%); width: 165px; height: auto; }
}

/* ── Hensel-Band (dunkelblau) ──────────────────────────────────────────────────────
   Foto randlos in der linken Bildschirmhaelfte (Zuschnitt 900x601 = 1,497:1 ->
   50/1,497 = 33,4vw), Text rechts, das Tierkreisrad des Entwurfs als Hintergrundbild
   am rechten Rand. Der Zuschnitt des Rades traegt denselben dunklen Grund, deshalb
   faellt keine Kante auf. Unter 1200 px bleibt das Rad weg (dort ist der Text ueber
   die volle Breite gesetzt und wuerde darauf liegen). */
.uk-section.dh-d-hensel { background-color: #0C2242; }
.dh-d-hensel .dh-d-hensel-bild img { display: block; width: 100%; height: auto; }
.dh-d-hensel .dh-d-h2, .dh-d-hensel h2 { color: #FFFFFF; }
.dh-d-hensel .dh-d-hensel-text p { color: #D3DCEA; font-size: 16.5px; line-height: 1.65; }
.dh-d-hensel .dh-d-hensel-text p + p { margin-top: 14px; }
.dh-d-hensel .dh-p-eyebrow { color: #EE8A3C; }
.dh-d-hensel .dh-p-eyebrow::before, .dh-d-hensel .dh-p-eyebrow::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EE8A3C'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E"),
                    linear-gradient(#EE8A3C, #EE8A3C); }
@media (min-width: 1200px) {
  .uk-section.dh-d-hensel { position: relative; overflow: hidden;
    min-height: clamp(420px, 33.4vw, 640px); padding-top: 60px; padding-bottom: 60px;
    display: flex; flex-direction: column; justify-content: center;
    background-image: url("/images/av/dh-deutung-rad.webp");
    background-repeat: no-repeat; background-position: right center; background-size: auto 100%; }
  .uk-section.dh-d-hensel > .uk-container { width: 100%; }
  .dh-d-hensel .dh-d-hensel-text { position: relative; z-index: 1; margin-left: 50%; }
  .dh-d-hensel .dh-d-hensel-bild { position: absolute; top: 0; left: 0; bottom: 0; width: 50vw; padding: 0; }
  .dh-d-hensel .dh-d-hensel-bild > * { height: 100%; margin: 0; }
  .dh-d-hensel .dh-d-hensel-bild img { height: 100%; object-fit: cover; object-position: 35% center;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%);
            mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 8%, rgba(0,0,0,.62) 17%, rgba(0,0,0,.88) 26%, rgba(0,0,0,1) 34%); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-d-hensel .dh-d-hensel-bild img {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 26%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
    -webkit-mask-composite: source-in, source-in;
            mask-image: linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 26%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
            mask-composite: intersect; }
}

/* Abschluss-Knopf unter dem letzten Abschnitt (Martins Zusatz zum Entwurf) und der
   Knopf im Katzen-Abschnitt: beide ausserhalb von .dh-hero, brauchen die Orange-Regel
   deshalb noch einmal. */
.uk-section.dh-d-cta { background: #F8ECDF; }
.dh-d-cta .dh-btn-fill, .dh-d-beispiel .dh-btn-fill { background-color: #E8731A; color: #FFFFFF; border-color: #E8731A; }
.dh-d-cta .dh-btn-fill:hover, .dh-d-cta .dh-btn-fill:focus,
.dh-d-beispiel .dh-btn-fill:hover, .dh-d-beispiel .dh-btn-fill:focus { background-color: #C25C10; border-color: #C25C10; color: #FFFFFF; }

/* Handy/Tablet: Foto randlos ueber die volle Breite, darunter der Text — dieselbe
   Loesung wie beim Hero (Begruendung dort, Karte 382/424). Das Foto blendet nach unten
   in die Flaeche der Sektion aus, damit keine harte Kante quer im Bild steht. */
@media (max-width: 959px) {
  .uk-section.dh-d-warum, .uk-section.dh-d-hensel { padding-top: 0; overflow: hidden; }
  .dh-d-warum > .uk-container > .uk-grid, .dh-d-hensel > .uk-container > .uk-grid { margin-left: 0; }
  .dh-d-warum > .uk-container > .uk-grid > *, .dh-d-hensel > .uk-container > .uk-grid > * { padding-left: 0; }
  .dh-d-warum .dh-d-warum-bild, .dh-d-hensel .dh-d-hensel-bild { margin-top: 0 !important; flex: none;
    width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
  .dh-d-warum .dh-d-warum-text, .dh-d-hensel .dh-d-hensel-text { margin-top: 25px !important; }
  .dh-d-warum .dh-d-warum-bild img, .dh-d-hensel .dh-d-hensel-bild img {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 62%, rgba(0,0,0,.55) 84%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 62%, rgba(0,0,0,.55) 84%, rgba(0,0,0,0) 100%); }
}
/* Handy: „MEIN DESIGN-HOROSKOP ERSTELLEN" (englisch „CREATE MY DESIGN HOROSCOPE") passt ueber
   die Spaltenbreite nicht in eine Zeile und bricht um den Pfeil herum um. Gleiche Loesung wie
   auf der Start-, Gutschein- und Fragen-Seite: Schrift und Polster wachsen mit der Fensterbreite,
   ab rund 420 px wieder die volle Groesse des Themes. */
@media (max-width: 479px) {
  .dh-hero-deutung .uk-button, .dh-d-beispiel .uk-button, .dh-d-cta .uk-button {
    font-size: clamp(9.9px, 3.1vw, 13px);
    padding-left: clamp(8px, 2.6vw, 16px); padding-right: clamp(8px, 2.6vw, 16px); }
}
/* Der Zusatz „mit Geschichte" macht die englische Vorzeile im dunklen Band um ein paar Zeichen
   zu lang fuer eine Zeile — dort deshalb eine Spur enger gesetzt. */
.dh-d-hensel .dh-p-eyebrow { font-size: 14px; letter-spacing: .1em; }

@media (max-width: 639px) {
  .dh-d-karte { padding: 18px 16px; }
  .dh-d-karte .dh-d-nr { font-size: 34px; }
  .dh-d-karte-bild { height: auto; min-height: 0; aspect-ratio: 5 / 4; }
  .dh-d-mini { gap: 10px 20px; }
  /* Karte 1063 (Martin, WhatsApp 02.10.2026): einspaltig stand das Bild hinter 05 direkt ueber
     dem Foto des Warum-Abschnitts — zwei Bilder untereinander. Am Handy deshalb zwischen 03 und
     04 („beim Smartphone das Bild zwischen die Punkte 03 und 04 verschieben"); ab 640 px
     bleibt die Reihenfolge 01–05 + Bild. */
  .dh-d-kartenreihe > :nth-child(-n+3) { order: -2; }
  .dh-d-kartenreihe > :last-child { order: -1; }
}

/* ── Beispiel-Deutung /beispiel-deutung (Karte 443) ────────────────────────────────
   Die Seiten des im Admin hinterlegten PDF als Bilder untereinander. Bewusst kein
   eingebetteter PDF-Betrachter: auf dem Handy laedt der oft nur eine Datei herunter.
   Logik: web/beispiel.js. */
.dh-b-seiten { max-width: 900px; margin: 0 auto; }
.dh-b-seite { display: block; width: 100%; height: auto; margin: 0 0 18px;
  border: 1px solid #E7DCCB; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.dh-b-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; margin: 0 0 18px; }
.dh-b-zaehler { color: #5B6070; font-size: 15px; }
.dh-b-leer { text-align: center; color: #5B6070; font-size: 17px; padding: 20px 0; }

/* ── Kopf der Beispiel-Deutung nach Martins Entwurf (WhatsApp 02.10.2026, Karte 1064) ──
   Entwurf docs/mockups/k1064/entwurf-beispiel-kopf.jpg (1600x800). Aufbau wie die uebrigen
   Koepfe (.dh-hero, Markup build_pages.py::page_beispiel); Farbaufteilung wie im Entwurf:
   H1 blau, Unterzeile orange und kleiner als die H1. Die drei Merkmale sind die Vertrauens-
   Zeile der Startseite (.dh-hero-trust), hier aber wie im Entwurf alle drei blau, nicht fett
   und mit groesserem Icon. Das Foto (x 745-1600 des Entwurfs = 855x800 = 1,069:1) bringt den
   Creme-Uebergang des Entwurfs links schon mit; das Tablet beginnt bei 7,6 % der Bildbreite,
   deshalb nur eine kurze Blende. Sektionshoehe 50 / 1,069 = 46,8vw, damit das Foto in der
   rechten Bildschirmhaelfte unbeschnitten steht (Tablet links, Handschrift rechts — beides
   liegt nah am Rand). Unter 960 px steht das Foto ueber dem Text (Martin: „auf dem Smartphone
   bitte wieder zunaechst das Bild und dann den Text") — das kommt aus den .dh-hero-Regeln. */
.dh-hero.dh-hero-beispiel .av-h1 { color: #1A2A6C; }
.dh-hero.dh-hero-beispiel .av-h1-sub { color: #E8731A; font-size: clamp(1.45rem, 2.45vw, 2.1rem) !important;
  line-height: 1.18; margin-top: 6px !important; }
.dh-hero.dh-hero-beispiel .dh-hero-trust span { font-weight: 400; font-size: 16px; }
.dh-hero.dh-hero-beispiel .dh-hero-trust > *:last-child span { color: #1A2A6C; }
.dh-hero.dh-hero-beispiel .dh-hero-trust img { width: 40px; height: 40px; margin-bottom: 10px; }
@media (min-width: 1200px) {
  /* Deckel 1000 statt der sonst ueblichen 760-860 px: darueber schneidet `cover` oben und unten
     zu, bei 1000 px bleibt das Tablet bis 2560 px Fensterbreite ganz im Bild. Innenabstand
     44 statt 70 px, damit der Text bei 1200-1280 px die Sektion nicht ueber das Bildverhaeltnis
     hinaus streckt — sonst schneidet `cover` seitlich und die Handschrift verliert ihr Ende. */
  .uk-section.dh-hero.dh-hero-beispiel { min-height: clamp(480px, 46.8vw, 1000px);
    padding-top: 44px; padding-bottom: 44px; }
  .dh-hero.dh-hero-beispiel .dh-hero-text { padding-right: 16px; }
  .dh-hero.dh-hero-beispiel .dh-hero-bild img { object-position: center 50%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.4) 2.5%, rgba(0,0,0,.82) 5%, rgba(0,0,0,1) 7%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.4) 2.5%, rgba(0,0,0,.82) 5%, rgba(0,0,0,1) 7%); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-hero.dh-hero-beispiel .dh-hero-bild img {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 7%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
    -webkit-mask-composite: source-in, source-in;
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 7%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
            mask-composite: intersect; }
}
/* Handy/Tablet: die uebliche Blende nach unten (ab 62 %) wuerde Name und Geburtsdaten auf dem
   Tablet-Bildschirm (75-81 % der Bildhoehe) halb ausblenden — hier erst ab 86 %. */
@media (max-width: 959px) {
  .dh-hero.dh-hero-beispiel .dh-hero-bild img {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%); }
}
@media (max-width: 639px) {
  .dh-hero.dh-hero-beispiel .dh-hero-trust span { font-size: clamp(10.5px, 3vw, 14px); }
  .dh-hero.dh-hero-beispiel .dh-hero-trust img { width: 30px; height: 30px; margin-bottom: 6px; }
}

/* ── Kopf von /erstellen nach Martins Entwurf (WhatsApp 02.10.2026, Karte 1067) ──────────
   Entwurf docs/mockups/k1067/entwurf-erstellen-kopf.jpg (1600x534 inkl. Menueleiste). Aufbau und
   Farbaufteilung wie der Kopf der Beispiel-Deutung (Karte 1064, Markup build_pages.py::
   page_erstellen): H1 blau, Unterzeile orange und kleiner als die H1. Das Foto (x 862-1600,
   y 79-534 des Entwurfs = 738x455 = 1,622:1) bringt links den hellen Uebergang des Entwurfs schon
   mit; das Tablet steht bei 27-81 % der Bildbreite, deshalb nur eine kurze Blende. Sektionshoehe
   50 / 1,622 = 30,8vw; unten 440 px, damit der Text Platz hat — dann schneidet `cover` seitlich,
   das Tablet bleibt dabei ab 1200 px ganz im Bild. Unter 960 px steht das Foto ueber dem Text
   (wie bei allen Koepfen, aus den .dh-hero-Regeln). */
.dh-hero.dh-hero-erstellen .av-h1 { color: #1A2A6C; }
.dh-hero.dh-hero-erstellen .av-h1-sub { color: #E8731A; font-size: clamp(1.45rem, 2.45vw, 2.1rem) !important;
  line-height: 1.18; margin-top: 6px !important; }
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-erstellen { min-height: clamp(440px, 30.8vw, 820px);
    padding-top: 44px; padding-bottom: 44px; }
  .dh-hero.dh-hero-erstellen .dh-hero-text { padding-right: 16px; }
  .dh-hero.dh-hero-erstellen .dh-hero-bild img { object-position: center 50%;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.4) 2.5%, rgba(0,0,0,.82) 5%, rgba(0,0,0,1) 7%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.4) 2.5%, rgba(0,0,0,.82) 5%, rgba(0,0,0,1) 7%); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-hero.dh-hero-erstellen .dh-hero-bild img {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 7%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
    -webkit-mask-composite: source-in, source-in;
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 7%), linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px, rgba(0,0,0,1) calc(100% - 22px), rgba(0,0,0,0) 100%), linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 22px);
            mask-composite: intersect; }
}
/* Handy/Tablet: die uebliche Blende nach unten (ab 62 %) wuerde das halbe Tablet ausblenden
   (es reicht bis 94 % der Bildhoehe) — hier erst ab 88 %. */
@media (max-width: 959px) {
  .dh-hero.dh-hero-erstellen .dh-hero-bild img {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%); }
}

/* ── Motive-Seite /motive (Karte 560, 10.09.2026) ──────────────────────────────────
   Alle Designs auf einen Blick statt einer festen Auswahl in acht Abschnitten: dieselben
   zwei Filter wie im Bestellvorgang (Kategorie / Sternzeichen), auf dem Handy zwei Kacheln
   nebeneinander, auf dem Desktop sechs — Martins Wunsch, die volle Breite zu nutzen.
   Logik: web/motive.js. */
.dh-mfilter { max-width: 620px; margin: 0 auto 14px; gap: 12px; }
.dh-mfilter select { flex: 1; min-width: 0; }
.dh-mcount { color: #5B6070; font-size: 14px; text-align: center; margin-bottom: 14px; }
.dh-mleer { text-align: center; color: #5B6070; font-size: 17px; padding: 20px 0; }
.dh-mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dh-mgrid button { padding: 0; border: 3px solid transparent; border-radius: 12px;
  background: none; cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.dh-mgrid button:hover, .dh-mgrid button:focus-visible { transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.14); border-color: #E8731A; }
/* Kachel: quadratischer Rahmen, Motiv vollstaendig darin (Karte 645, 11.09.2026).
   Martin am 11.09. um 17:10: „die nicht-quadratischen Motive sollen bitte auch auf der
   Motiv-Seite ganz zu sehen sein." Bis dahin stand hier `object-fit: cover` — 43 der 314
   Designs sind nicht quadratisch (2:3 hochkant wie neu057, 3:2 quer wie neu040) und wurden
   deshalb im Raster beschnitten: bei „Widder Natur" fehlte oben der halbe Tierkreis.
   `contain` statt `cover` zeigt sie vollstaendig; der quadratische Rahmen bleibt, damit das
   Raster gerade bleibt und die Bildunterschriften einer Zeile auf gleicher Hoehe stehen
   (mit dem natuerlichen Seitenverhaeltnis je Kachel franst eine gemischte Zeile aus).
   Das Creme `#F6F1E7` liegt dadurch bei diesen Motiven als schmaler Passepartout-Rand
   daneben — dieselbe Farbe wie der Seitenhintergrund der Kopfbereiche.
   Die grosse Ansicht (Lupe) und die Vorschau des berechneten Horoskops zeigen das Motiv
   ohnehin schon vollstaendig (`.dh-lb-bild img`, `.dh-out img` seit Karte 644). */
.dh-mgrid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  border-radius: 9px; background: #F6F1E7; }
.dh-mgrid span { display: block; font-size: 13px; line-height: 1.3; padding: 6px 2px 2px;
  color: #1A2A6C; text-align: center; }
@media (min-width: 560px) { .dh-mgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .dh-mgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .dh-mgrid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .dh-mgrid { grid-template-columns: repeat(6, 1fr); } }

/* Grosse Ansicht: eigene Lightbox, weil unter dem Bild der Knopf „Dieses Motiv waehlen"
   stehen muss (er springt mit dem Motiv direkt in den Bestellvorgang). */
.dh-lb { position: fixed; inset: 0; z-index: 1030; background: rgba(12,16,32,.88);
  display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.dh-lb[hidden] { display: none; }
html.dh-lb-offen, html.dh-lb-offen body { overflow: hidden; }
.dh-lb-box { position: relative; width: 100%; max-width: 900px; display: flex;
  flex-direction: column; align-items: center; }
.dh-lb-bild { width: 100%; text-align: center; }
.dh-lb-bild img { display: block; margin: 0 auto; max-width: 100%; max-height: 68vh;
  width: auto; height: auto; border-radius: 12px; background: #F6F1E7;
  box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.dh-lb-foot { display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 16px; text-align: center; }
.dh-lb-name { color: #fff; font-size: 18px; }
.dh-lb-x { position: fixed; top: 10px; right: 14px; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 30px;
  line-height: 44px; cursor: pointer; }
.dh-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff;
  font-size: 34px; line-height: 40px; cursor: pointer; }
.dh-lb-prev { left: 10px; } .dh-lb-next { right: 10px; }
.dh-lb-x:hover, .dh-lb-nav:hover { background: #E8731A; }
.dh-lb-nav[hidden] { display: none; }
@media (max-width: 639px) {
  .dh-lb { padding: 14px 10px; }
  .dh-lb-bild img { max-height: 58vh; }
  .dh-lb-nav { width: 38px; height: 38px; font-size: 28px; line-height: 34px; }
}

/* ── „Die beliebtesten Motive" (Karte 566, 10.09.2026) ─────────────────────────────
   Martin hakt im Admin unter „Designs" bis zu 12 Motive als beliebt an; sie stehen auf
   „Horoskop erstellen" und auf „Motive" über der gewohnten Auswahl, darunter folgt die
   Überschrift „Alle Motive". Logik: web/rechner.js und web/motive.js. */
.dh-gtitel { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #1A2A6C; margin: 2px 0 6px; }
.dh-gtitel + .dh-grid { margin-bottom: 12px; }
/* Der Block steht über der Auswahl und braucht keinen eigenen Rollbereich — er ist ja kurz. */
.dh-grid.dh-pop { max-height: none; overflow: visible; }
.dh-mtitel { font-size: 22px; line-height: 1.25; text-align: center; margin: 0 0 14px; color: #1A2A6C; }
.dh-mgrid.dh-mpop { margin-bottom: 28px; }

/* ── Motiv-Vorgabe im Formular „Horoskop erstellen" (Karte 583, 10.09.2026) ────────
   Kundenwunsch: „ich würde gerne die Motiv-Auswahl auf der Erstellen-Seite entfernen
   und stattdessen ein Motiv als Vorgabe/Empfehlung zeigen (Design neu146). Unter
   diesem Vorgabe-Motiv gibt es den Button ‚Neues Motiv wählen‘ mit einer Verlinkung
   zur Motiv-Seite." Statt Filtern und 300 Kacheln steht hier also genau ein Bild.
   Es ist auf 320 px gedeckelt: gross genug, um das Motiv zu erkennen, und kurz genug,
   dass die Geburtsdaten auf dem Tablet nicht unter den Bildschirmrand rutschen — das
   Kürzen des Formulars ist ja der Zweck des Umbaus. Logik: web/rechner.js. */
.dh-vorgabe { margin-bottom: 4px; }
.dh-vorgabe img { display: block; width: 100%; max-width: 320px; height: auto;
  margin: 0 auto; border-radius: 10px; }
.dh-vorgabe-name { font-size: 14px; font-weight: 600; color: #1A2A6C;
  text-align: center; margin: 8px 0 10px; }
.dh-vorgabe-name span { font-weight: 400; color: #5B6070; }

/* ── Geburtsdatum/-zeit zum Tippen (Kundenwunsch 16.10.2026, Karte 1233) ─────────────────
   Martin: auf dem Handy erschien für Datum und Zeit keine Tastatur, nur Kalender bzw. Uhr.
   Die Felder sind jetzt Textfelder mit Ziffern-Tastatur (rechner.js, „Tippen“). Rechts im Feld
   sitzt ein Kalender- bzw. Uhr-Symbol; darüber liegt unsichtbar ein <input type="date"/"time">,
   ein Tipp darauf öffnet den Wähler des Browsers wie früher. Löst den eigenen Platzhalter
   aus Karte 607 ab (Textfelder können `placeholder` selbst). */
.dh-tippfeld { position:relative; }
.dh-tippfeld > .uk-input { padding-right:36px; }
.dh-wahl { position:absolute; top:0; right:0; bottom:0; width:36px; display:flex; align-items:center;
  justify-content:center; color:#1A2A6C; overflow:hidden; }
.dh-wahl svg { width:18px; height:18px; pointer-events:none; }
.dh-wahl > input { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; border:0;
  opacity:0; cursor:pointer; font-size:16px; -webkit-appearance:none; appearance:none; }
.dh-wahl > input::-webkit-calendar-picker-indicator { position:absolute; top:0; left:0; right:0; bottom:0;
  width:auto; height:auto; margin:0; padding:0; cursor:pointer; }
.dh-wahl > input:disabled { cursor:default; }
.dh-tippfeld > .uk-input:disabled + .dh-wahl { opacity:.35; }

/* ── „Geburtszeit unbekannt (es wird mit 12:00 Uhr gerechnet)" (Karte 607) ───────────────
   Auf dem Handy brach die Zeile hinter dem Ankreuzfeld um, die zweite Zeile stand eingerueckt
   unter dem Kaestchen. Flex + eigener Textblock: der Umbruch passiert jetzt im Text, die
   zweite Zeile beginnt buendig unter dem „G". nowrap haelt den Zusatz zusammen, er rutscht
   als Ganzes in die naechste Zeile statt mitten im Satz zu brechen. */
.dh-form label.dh-unknown { display:flex; align-items:flex-start; gap:6px; }
.dh-form label.dh-unknown > .uk-checkbox { flex:none; margin-top:3px; }
.dh-form label.dh-unknown .dh-zusatz { white-space:nowrap; }

/* ── Foto-Motive kennzeichnen (Foto-Horoskope Paket 2, Karte 792, 18.09.2026) ────────────
   Konzept 11.09., §2.2: Kamera-Zeichen in der Ecke der Kachel plus Zeile „Mit eigenem Foto",
   in der großen Ansicht ein Satz über dem Knopf, bei der Motiv-Vorgabe auf „Horoskop
   erstellen" dieselbe Zeile. Farben wie die übrigen Knöpfe (Orange #E8731A, Navy #1A2A6C).
   Logik: web/motive.js (kachel, zeige) und web/rechner.js (Vorgabe). */
.dh-mgrid button.dh-foto { position: relative; }
.dh-foto-marke { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #E8731A; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); font-style: normal; }
.dh-mgrid em.dh-foto-zeile { display: block; font-style: normal; font-size: 12px; font-weight: 700;
  line-height: 1.2; color: #E8731A; text-align: center; padding: 0 2px 4px; }
.dh-lb-foto { display: flex; align-items: flex-start; gap: 8px; max-width: 560px; margin: 0;
  color: #fff; font-size: 15px; line-height: 1.45; text-align: left; }
.dh-lb-foto[hidden] { display: none; }
.dh-lb-foto svg { flex: none; margin-top: 2px; color: #E8731A; }
.dh-vorgabe-foto { font-size: 13px; line-height: 1.45; color: #5B6070; text-align: center;
  margin: -4px 0 10px; }
.dh-vorgabe-foto strong { color: #E8731A; white-space: nowrap; }
.dh-vorgabe-foto svg { vertical-align: -3px; }

/* ── Schritt „2. Dein Foto": Ausschnitt-Editor (Foto-Horoskope Paket 4, Karte 792, 18.09.2026) ──
   Konzept 11.09. §3.2: das Foto liegt unter dem Motiv, man sieht immer das Ergebnis. Die Bühne
   ist ein <canvas> (rechner.js, fotoEd); touch-action:none, sonst scrollt das Handy die Seite,
   statt das Foto zu verschieben. Die Schraffur im Fenster (Lücke) zeichnet der Canvas selbst. */
.dh-foto { margin-bottom: 4px; }
.dh-foto #dh-foto-waehlen { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dh-foto-lade { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #5B6070;
  padding: 14px; background: #F4F2EE; border-radius: 10px; }
.dh-foto-lade[hidden], .dh-foto-ed[hidden], #dh-foto-leer[hidden], .dh-foto-warn[hidden],
.dh-foto-fehler[hidden], .dh-foto[hidden] { display: none; }
.dh-foto-buehne { position: relative; border-radius: 10px; overflow: hidden; background: #F4F2EE;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.dh-foto-buehne canvas { display: block; width: 100%; height: auto; touch-action: none;
  cursor: grab; -webkit-user-select: none; user-select: none; }
.dh-foto-buehne canvas.dh-zieht { cursor: grabbing; }
.dh-foto-warn { font-size: 13px; font-weight: 700; line-height: 1.4; color: #E8731A; margin: 8px 0 0; }
.dh-foto-zoom { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dh-foto-zoom span { font-size: 20px; font-weight: 700; color: #1A2A6C; width: 14px; text-align: center; }
.dh-foto-zoom input { flex: 1; }
.dh-foto-tipp { font-size: 12px; line-height: 1.4; color: #5B6070; margin: 6px 0 8px; }
.dh-foto-knoepfe { display: flex; gap: 8px; }
.dh-foto-knoepfe .uk-button { flex: 1; padding: 0 8px; }
.dh-foto-fehler { font-size: 13px; line-height: 1.4; color: #c0392b; margin: 8px 0 0; }
.dh-foto-klein { font-size: 12px; line-height: 1.4; color: #5B6070; margin: 8px 0 0; }
/* Hinweis über der Vorschau, wenn das Foto nach dem Berechnen verändert wurde */
.dh-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px;
  background: #FDF8F1; border: 1px solid #E8731A; font-size: 13px; color: #1A2A6C; }

/* ── Foto-Band auf der Startseite (Foto-Horoskope Paket 6, Karte 792, 18.09.2026) ────────
   Konzept 11.09. §4: „auf der Startseite ein Band ‚Neu: Dein eigenes Foto im Horoskop‘ mit
   Bild und Knopf". Bildsprache des Bandes „Welches Design passt zu Dir?" (.dh-band): Creme-
   Grund, navy Überschrift mit orangem Schlussstück, Zierlinie, orange gefüllter Button —
   aber spiegelverkehrt (Bilder links) und ohne randloses Foto: es zeigt zwei Foto-Motive
   (Beispielbilder aus Paket 1) leicht versetzt nebeneinander. Markup: build_pages.py::page_start.
   Dieselben Regeln stehen in custom-dh.less UND web/rechner.css. */
.uk-section.dh-fotoband { background: #F6EBDC; }
.dh-fotoband .uk-heading-h2, .dh-fotoband h2 { color: #1A2A6C; line-height: 1.14; }
.dh-fotoband .dh-band-lead p { color: #1A2A6C; }
.dh-fotoband .dh-hero-orn { margin: 20px 0 4px; }
.dh-fotoband .dh-btn-fill { background-color: #E8731A; color: #FFFFFF; border-color: #E8731A; }
.dh-fotoband .dh-btn-fill:hover, .dh-fotoband .dh-btn-fill:focus { background-color: #C25C10; border-color: #C25C10; color: #FFFFFF; }
.dh-fotoband-bilder { display: flex; align-items: flex-end; justify-content: center; gap: 4%; }
.dh-fotoband-bilder img { display: block; height: auto; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,42,108,.18); }
/* Gleich hoch: 666x900 und 900x900 → Breitenanteile 42,5 : 57,5 der verfügbaren 96 % */
.dh-fotoband-bilder img:first-child { width: 40.8%; margin-bottom: 6%; }
.dh-fotoband-bilder img:last-child { width: 55.2%; }
/* Handy: Überschrift und Text zuerst, die Bilder darunter (in der Spaltenfolge stehen sie
   für den Desktop links, also vorne). */
@media (max-width: 959px) {
  .dh-fotoband .uk-grid { display: flex; flex-direction: column-reverse; }
  /* UIkit setzt den Zeilenabstand als margin-top an die zweite Spalte (.uk-grid-margin) —
     nach dem Umdrehen steht die oben; der Abstand gehört dann vor die Bilder. */
  .dh-fotoband .uk-grid > .uk-grid-margin { margin-top: 0; }
  .dh-fotoband .uk-grid > .dh-fotoband-bild { margin-top: 30px; }
  .dh-fotoband-bilder { max-width: 480px; margin: 0 auto; }
}

/* ── Gutschein-Shop in vier Schritten (Karte 859, 21.09.2026) ─────────────────────────────
   Nach Martins Entwuerfen (Desktop + Handy, docs/mockups/2026-09-21_k859-*): nummerierte Schritte mit
   Kreis-Ziffer, „viel Luft" zwischen den Bereichen, Auswahlkarten mit orangem Rahmen im gewaehlten
   Zustand. Der Geschenk-Moment traegt Martins Weinrot (#8E1B3A) als Akzent. Markup in web/gutschein.js,
   Band „Neu: Persoenlicher Geschenk-Moment" in build_pages.py (page_gutschein). */
.dh-gs.uk-card-body { padding: 28px 24px; }
.dh-gs-schritt { display: flex; gap: 18px; padding: 26px 0; border-top: 1px solid #ece4d8; }
.dh-gs-schritt:first-child { border-top: 0; padding-top: 4px; }
.dh-gs-nr { flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, #C98A4B, #9A5F2A);
  color: #fff; font: 700 22px/44px 'Playfair Display', Georgia, serif; text-align: center; box-shadow: 0 2px 6px rgba(154,95,42,.3); }
.dh-gs-inhalt { flex: 1; min-width: 0; }
.dh-form .dh-gs-h, .dh-gs-h { margin: 6px 0 4px; font-size: 22px; font-weight: 700; color: #1A2A6C; font-family: 'Nunito Sans', system-ui, sans-serif; }
.dh-gs-h4 { margin: 24px 0 2px; font-size: 17px; font-weight: 700; color: #1A2A6C; font-family: 'Nunito Sans', system-ui, sans-serif; }
.dh-gs-sub { margin: 0 0 14px; font-size: 14px; color: #5a6275; }
.dh-form label.dh-gs-karte, .dh-gs-karte { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px; border: 1.5px solid #e5ddd2;
  border-radius: 12px; background: #fff; cursor: pointer; font-size: 15px; font-weight: 400; color: #333; transition: border-color .15s, background .15s; }
.dh-gs-karte:has(input:checked) { border-color: #E8731A; background: #FFF9F3; box-shadow: 0 2px 10px rgba(232,115,26,.12); }
.dh-gs-karte > .uk-radio { flex: none; margin-top: 3px; }
.dh-gs-karte > img { flex: none; }
.dh-gs-karte-text { flex: 1; min-width: 0; }
.dh-gs-karte strong { color: #1A2A6C; font-weight: 700; }
.dh-gs-zeile { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.dh-gs-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 17px; }
.dh-gs-preis { font-size: 22px; font-weight: 800; color: #1A2A6C; white-space: nowrap; }
.dh-gs-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.dh-gs-liste li { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; font-size: 14.5px; line-height: 1.4; }
.dh-gs-liste li img { flex: none; margin-top: 1px; }
.dh-gs-liste-gross li { font-size: 15.5px; margin: 8px 0; }
.dh-gs-gratis { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #FBEFE4; font-size: 14px; line-height: 1.35; }
.dh-gs-gratis strong { color: #D2601A !important; font-size: 15.5px; }
.dh-gs-info { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: #F2F5FB; border: 1px solid #e1e7f3; font-size: 14px; color: #1A2A6C; }
.dh-gs-info img { flex: none; margin-top: 2px; }
.dh-gs-info p { margin: 0 0 8px; } .dh-gs-info p:last-child { margin: 0; }
.dh-gs-arten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dh-gs-unter { display: block; font-size: 14px; color: #5a6275; }
.dh-gs-x { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #444; }
.dh-gs-aufpreis { color: #8E1B3A; white-space: nowrap; margin-left: 4px; }
.dh-gs-art:has(input[value=moment]:checked) { border-color: #8E1B3A; background: #FDF4F5; box-shadow: 0 2px 10px rgba(142,27,58,.12); }
.dh-gs-moment { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: center; margin-top: 18px; padding: 8px 22px 18px;
  border-radius: 14px; background: linear-gradient(135deg, #FDF4F0, #F9E9E4); }
.dh-gs-moment[hidden] { display: none; }
.dh-gs-moment .dh-gs-h4 { color: #8E1B3A; }
.dh-gs-moment-rechts { text-align: center; }
.dh-gs-spruch { margin: 0 0 12px; font: italic 400 26px/1.25 'Playfair Display', Georgia, serif; color: #8E1B3A; }
.dh-gs-mehr { color: #8E1B3A; font-weight: 700; font-size: 14.5px; }
.dh-gs-zahlung { max-width: 560px; }
.dh-gs-summe { margin: 12px 0 0; font-size: 15px; color: #1A2A6C; }
.dh-gs-go { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: center; margin-top: 26px; }
.dh-gs-go .uk-button { min-width: 300px; border-radius: 40px; padding: 6px 36px; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.dh-gs-sicher { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: #5a6275; max-width: 260px; }
@media (max-width: 959px) {
  .dh-gs-zeile, .dh-gs-moment { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .dh-gs.uk-card-body { padding: 18px 14px; }
  .dh-gs-schritt { gap: 10px; padding: 22px 0; }
  .dh-gs-nr { width: 34px; height: 34px; font-size: 18px; line-height: 34px; }
  .dh-form .dh-gs-h, .dh-gs-h { font-size: 19px; }
  .dh-gs-arten { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dh-gs-art { flex-direction: column; align-items: center; text-align: center; padding: 14px 10px; gap: 6px; }
  .dh-gs-art .dh-gs-aufpreis { display: block; margin: 2px 0 0; }
  /* Karte 1154: Knopf nennt jetzt den Preis und bricht am Handy in zwei Zeilen um — enger Zeilenabstand statt 2× UIkit-Zeilenhöhe */
  .dh-gs-go .uk-button { min-width: 0; width: 100%; line-height: 1.3; padding: 11px 20px; }
  .dh-gs-sicher { max-width: none; justify-content: center; }
  .dh-gs-spruch { font-size: 22px; }
}

/* Band „Neu: Persoenlicher Geschenk-Moment" ueber dem Formular (Karte 859). Link „Mehr erfahren" → /geschenk-moment. */
.dh-gm-band { display: flex; gap: 22px; align-items: center; padding: 24px 28px; border-radius: 16px; background: linear-gradient(135deg, #FDF4F0 0%, #F8E6E0 100%);
  border: 1px solid #f0d9d1; box-shadow: 0 4px 18px rgba(142,27,58,.08); }
.dh-gm-band > img { flex: none; }
.dh-gm-text { flex: 1; min-width: 0; }
.dh-gm-text h2 { margin: 0 0 4px; font: 700 24px/1.25 'Nunito Sans', system-ui, sans-serif; color: #D2601A; }
.dh-gm-text p { margin: 0 0 8px; color: #1A2A6C; }
.dh-gm-text ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.dh-gm-text li { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 15px; color: #1A2A6C; break-inside: avoid; }
.dh-gm-text li img { flex: none; margin-top: 2px; }
.dh-gm-cta { flex: none; text-align: center; width: 250px; }
.dh-gm-cta p { margin: 0 0 12px; font: italic 400 22px/1.25 'Playfair Display', Georgia, serif; color: #8E1B3A; }
.uk-button.dh-gm-button, a.dh-gm-button { display: inline-block; padding: 10px 30px; border-radius: 40px; background: #8E1B3A; color: #fff !important;
  font-weight: 700; font-size: 17px; text-decoration: none !important; box-shadow: 0 3px 10px rgba(142,27,58,.25); }
a.dh-gm-button:hover { background: #74142f; }
@media (max-width: 959px) {
  .dh-gm-band { flex-wrap: wrap; }
  .dh-gm-cta { width: 100%; }
}
@media (max-width: 639px) {
  .dh-gm-band { padding: 18px 16px; gap: 12px; }
  .dh-gm-band > img { width: 40px; height: 40px; }
  .dh-gm-text h2 { font-size: 20px; }
  .dh-gm-text ul { columns: 1; }
}

/* Platzhalter-Seite „Geschenk-Moment" (Karte 859) — wird mit dem naechsten Paket gefuellt. */
.dh-gm-schritte { list-style: none; margin: 0; padding: 0; }
.dh-gm-schritte li { display: flex; gap: 16px; align-items: center; margin: 0 0 18px; }
.dh-gm-schritte li img { flex: none; width: 56px; height: 56px; padding: 13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.dh-gm-schritte strong { display: block; color: #1A2A6C; font-size: 17px; }
.dh-gm-schritte span { color: #444; }

/* Bestellknopf gefuellt in Orange wie im Entwurf (uk-button-secondary ist in diesem Theme nur umrandet) */
.dh-gs-go .uk-button.uk-button-secondary { background:#E8731A; border-color:#E8731A; color:#fff; box-shadow:0 4px 12px rgba(232,115,26,.3); }
.dh-gs-go .uk-button.uk-button-secondary:hover { background:#D2601A; border-color:#D2601A; color:#fff; }
.dh-gs-go .uk-button.uk-button-secondary:disabled { opacity:.7; }

/* Handy (Karte 859): Ziffer neben die Ueberschrift statt eigener Spalte — sonst verliert jeder Schritt 44 px Breite
   und der Produkttitel bricht dreizeilig um. Das Geschenk-Symbol im Band entfaellt dort aus demselben Grund. */
@media (max-width: 639px) {
  .dh-gs-schritt { display: block; position: relative; }
  .dh-gs-nr { position: absolute; top: 22px; left: 0; }
  .dh-gs-schritt:first-child .dh-gs-nr { top: 4px; }
  .dh-form .dh-gs-h, .dh-gs-h { padding-left: 44px; min-height: 34px; display: flex; align-items: center; margin-top: 0; }
  .dh-gs-inhalt > .dh-gs-sub { padding-left: 44px; }
  .dh-gs-kopf { font-size: 16px; }
  .dh-gs-preis { font-size: 20px; }
  .dh-gs-karte { padding: 14px 12px; }
  .dh-gm-band > img { display: none; }
}

/* ── Karte 860 (21.09.2026, Martin): Smartphone-Bild in beiden Geschenk-Moment-Baendern, Schritt 1 ohne Nummer/Titel,
   Info-Kasten entfaellt (Kern = vierter Listenpunkt), Gratis-Text laenger mit Wert dahinter, Abstand Band → Formular 40 px.
   Das Handy (images/dh-gm-smartphone.webp) ist aus Martins Entwurf geschnitten und freigestellt (transparenter Hintergrund). */
.dh-gm-handy { flex: none; display: block; height: 220px; width: auto; }
.dh-gm-text ul { columns: 1; }
/* Beide Sektionen bekommen vom Theme 70 px Innenabstand trotz „remove" → hier fest: 0 + 40 px Luecke wie ueber dem Band. */
.uk-section.dh-gm-sektion { padding-bottom: 0 !important; }
.uk-section.dh-gs-shop { padding-top: 40px !important; }
.dh-gs-zeile.dh-gs-zeile-voll { grid-template-columns: 1fr; }
.dh-gs-schritt.dh-gs-schritt-ohne { padding-top: 0; }
.dh-gs-wert { white-space: nowrap; }
/* Gratis-Text zweizeilig wie in Martins Ansicht: Kasten nur so breit wie noetig, hoechstens 620 px. */
.dh-gs-gratis { width: fit-content; max-width: 620px; }
.dh-gs-moment { grid-template-columns: 120px 3fr 2fr; }
.dh-gs-moment .dh-gm-handy { height: auto; width: 120px; margin: 10px 0 0; }
@media (max-width: 959px) {
  .dh-gs-moment { grid-template-columns: 1fr 110px; grid-template-areas: "liste handy" "rechts rechts"; }
  .dh-gs-moment .dh-gm-handy { grid-area: handy; width: 110px; }
  .dh-gs-moment-liste { grid-area: liste; }
  .dh-gs-moment-rechts { grid-area: rechts; }
}
@media (max-width: 639px) {
  .dh-gm-band { align-items: flex-start; }
  .dh-gm-band > .dh-gm-handy { display: block; height: auto; width: 84px; }
  .dh-gs-wert { display: block; }
  .dh-gs-moment { grid-template-columns: 1fr 86px; gap: 10px; padding: 8px 14px 16px; }
  .dh-gs-moment .dh-gm-handy { width: 86px; margin-top: 24px; }
  .dh-gs-liste-gross li { font-size: 14.5px; }
}

/* Karte 862: Danke-Ansicht nach dem Gutscheinkauf (Kopfbereich ausgeblendet) */
.uk-section.dh-gs-shop.dh-gs-danke { padding-top: 40px !important; padding-bottom: 40px !important; }
.dh-gs-danke .uk-alert { margin-bottom: 0; }

/* ── Karte 863 (21.09.2026, Martin): Seite „Geschenk-Moment erstellen" nach seinen Entwuerfen (docs/mockups/k863/)
   Desktop: Text links, Geschenkbild rechts (weich nach links auslaufend). Smartphone: Titel, Bild, Liste, Spruch, Button.
   Dazu der grosse Button in der Danke-Ansicht nach dem Kauf (.dh-gs-moment-cta, nur bei Geschenk-Moment). */
.uk-section.dh-gme-sektion { padding: 0 !important; background: var(--dhp-flaeche, #FAF5EF); }
.dh-gme-sektion .uk-grid, .dh-gme-sektion .uk-grid > * { margin: 0 !important; padding: 0 !important; }
.dh-gme-sektion .uk-container { max-width: none; padding: 0; }
.dh-gme { position: relative; min-height: 860px; overflow: hidden; background: var(--dhp-flaeche, #FAF5EF); }
.dh-gme-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 57%; background: url(/images/av/dh-gm-erstellen-desktop.webp) center / cover no-repeat; }
.dh-gme-bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dhp-flaeche, #FAF5EF) 0%, rgba(250,245,239,.75) 12%, rgba(250,245,239,0) 32%); }
.dh-gme-bild-mobil { display: none; }
.dh-gme-text { position: relative; z-index: 1; box-sizing: border-box; width: 46%; max-width: 660px; margin-left: max(40px, calc((100vw - 1400px) / 2 + 40px)); padding: 48px 0 44px; }
.dh-gme-kicker { margin: 0 0 16px; font: 600 15px/1.2 'Nunito Sans', system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #A87A3D; }
.dh-gme-h1 { margin: 0; font: 400 60px/1.08 'Playfair Display', Georgia, serif; color: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gme-sub { margin: 14px 0 26px; font: 400 26px/1.3 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); }
.dh-gme-liste { list-style: none; margin: 0 0 28px; padding: 0; }
.dh-gme-liste li { display: flex; gap: 22px; align-items: center; margin: 0 0 18px; }
.dh-gme-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 2px 12px rgba(120,80,40,.10); }
.dh-gme-liste strong { display: block; font: 700 20px/1.3 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); }
.dh-gme-liste div > span { display: block; font-size: 18px; line-height: 1.35; color: var(--dhp-text, #1A2A6C); }
.dh-gme-spruch { display: none; margin: 0 0 18px; text-align: center; font: italic 400 30px/1.2 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
a.dh-gme-los { display: flex; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box; width: 100%; max-width: 560px; padding: 16px 28px;
  border-radius: 50px; background: linear-gradient(180deg, #92203F 0%, var(--dhp-akzent-dunkel, #6E1430) 100%); color: #fff !important; text-decoration: none !important;
  font: 400 28px/1.2 'Playfair Display', Georgia, serif; box-shadow: 0 6px 18px rgba(110,20,48,.25); }
a.dh-gme-los:hover { background: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gme-sicher { display: flex; gap: 10px; align-items: center; justify-content: center; max-width: 560px; margin: 16px 0 0; font-size: 15px; color: var(--dhp-text, #1A2A6C); }
.dh-gme-info { max-width: 560px; margin-top: 18px; padding: 16px 20px; border-radius: 12px; background: rgba(255,255,255,.9); color: var(--dhp-text, #1A2A6C); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.dh-gme-info p:last-child { margin-bottom: 0; }
.dh-gs-moment-cta { margin: 32px 0 0; text-align: center; }
.dh-gs-moment-cta a.dh-gme-los { margin: 0 auto; max-width: 680px; }
.dh-gs-moment-cta p { margin: 12px 0 0; color: #1A2A6C; }
@media (max-width: 1199px) {
  .dh-gme-h1 { font-size: 48px; }
  .dh-gme-text { width: 52%; margin-left: 32px; }
}
@media (max-width: 959px) {
  .dh-gme { min-height: 0; }
  .dh-gme-bild { display: none; }
  .dh-gme-text { display: contents; }
  .dh-gme { display: flex; flex-direction: column; padding: 28px 18px 30px; }
  .dh-gme-kicker { display: none; }
  .dh-gme-h1 { order: 1; text-align: center; font-size: 38px; }
  .dh-gme-sub { order: 2; text-align: center; font-size: 19px; margin: 8px 0 14px; }
  .dh-gme-bild-mobil { order: 3; display: block; width: calc(100% + 36px); max-width: none; height: auto; margin: 0 -18px 18px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%); }
  .dh-gme-liste { order: 4; max-width: 520px; margin: 0 auto 18px; }
  .dh-gme-spruch { order: 5; display: block; }
  #dh-moment-app { order: 6; }
  a.dh-gme-los, .dh-gme-sicher, .dh-gme-info { margin-left: auto; margin-right: auto; }
}
@media (max-width: 639px) {
  .dh-gme-h1 { font-size: 32px; }
  .dh-gme-liste li { gap: 14px; margin-bottom: 14px; }
  .dh-gme-icon { width: 46px; height: 46px; background: none; box-shadow: none; }
  .dh-gme-icon img { width: 30px; height: 30px; }
  .dh-gme-liste strong { font-weight: 400; font-size: 16.5px; }
  .dh-gme-liste div > span { font-size: 16.5px; }
  .dh-gme-spruch { font-size: 26px; }
  a.dh-gme-los { font-size: 23px; padding: 14px 20px; }
  .dh-gme-sicher { font-size: 13.5px; }
}
@media (max-width: 639px) { .dh-gme-liste li:first-child div > span { display: none; } }

/* ── Karte 865 (22.09.2026, Martin): erste Fragen-Seite des Geschenk-Moments nach seinen Entwuerfen (docs/mockups/k865/).
   Desktop: Formular links, Sternbild rechts (weich nach links auslaufend), darunter drei Merkmale. Smartphone: Zurueck-Pfeil +
   „1 von 5" oben, Formular, Sternbild, Weiter (Tipp-Kasten entfernt, Karte 866). Die Ansicht baut build/web/gutschein.js (#dh-gmf) nach „Jetzt loslegen". */
.dh-gmf { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); background: var(--dhp-flaeche, #FAF5EF); color: var(--dhp-text, #1A2A6C); }
.dh-gmf[hidden], .dh-gme[hidden] { display: none !important; }
.dh-gmf-text { grid-column: 1; grid-row: 1; box-sizing: border-box; width: 100%; max-width: 640px; margin-left: max(40px, calc((100vw - 1400px) / 2 + 40px)); padding: 34px 40px 48px 0; }
.dh-gmf-rechts { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.dh-gmf-bild { flex: 1 1 auto; min-height: 640px; background: var(--dhp-bild-frage1-desktop, url(/images/av/dh-gm-frage1-desktop.webp)) left center / cover no-repeat; position: relative; }
.dh-gmf-bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dhp-flaeche, #FAF5EF) 0%, rgba(250,245,239,.6) 10%, rgba(250,245,239,0) 26%),
  linear-gradient(0deg, var(--dhp-flaeche, #FAF5EF) 0%, rgba(250,245,239,0) 14%); }
.dh-gmf-merk { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 14px 40px 40px 20px; }
.dh-gmf-merk li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; border-left: 1px solid #E6DCCF; }
.dh-gmf-merk li:first-child { border-left: 0; }
.dh-gmf-merk-icon { width: 38px; height: 38px; color: var(--dhp-rot, #B01E3C); margin-bottom: 8px; }
.dh-gmf-merk strong { font: 700 15px/1.3 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); }
.dh-gmf-merk span { font-size: 13.5px; line-height: 1.4; color: var(--dhp-text, #1A2A6C); }
.dh-gmf-kopf { display: flex; align-items: center; gap: 36px; margin-bottom: 26px; }
.dh-gmf-kicker { margin: 0; font: 600 15px/1.2 'Nunito Sans', system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--dhp-text, #1A2A6C); white-space: nowrap; }
.dh-gmf-zurueck { display: none; border: 0; background: none; padding: 4px 8px 4px 0; font-size: 30px; line-height: 1; color: var(--dhp-text, #1A2A6C); cursor: pointer; }
.dh-gmf-fort { display: flex; align-items: center; gap: 22px; }
.dh-gmf-fort ol { display: flex; list-style: none; margin: 0; padding: 0; }
.dh-gmf-fort li { position: relative; width: 17px; height: 17px; box-sizing: border-box; border: 1.5px solid var(--dhp-akzent, #8E1B3A); border-radius: 50%; background: var(--dhp-flaeche, #FAF5EF); margin-left: 30px; }
.dh-gmf-fort li:first-child { margin-left: 0; }
.dh-gmf-fort li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 31px; height: 1.5px; margin-right: 0; background: var(--dhp-akzent, #8E1B3A); transform: translateY(-50%); }
.dh-gmf-fort li.aktiv, .dh-gmf-fort li.fertig { background: var(--dhp-akzent, #8E1B3A); width: 21px; height: 21px; margin-top: -2px; margin-bottom: -2px; }
.dh-gmf-fort span { font-size: 19px; color: var(--dhp-text, #1A2A6C); white-space: nowrap; }
.dh-gmf-h1 { margin: 0; font: 600 58px/1.1 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmf-sub { margin: 16px 0 30px; font-size: 22px; line-height: 1.4; color: var(--dhp-text, #1A2A6C); }
.dh-gmf-form label { display: block; margin: 0 0 10px; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmf-form label span { color: var(--dhp-akzent, #8E1B3A); }
.dh-gmf-form input, .dh-gmf-form select { display: block; box-sizing: border-box; width: 100%; height: 56px; margin: 0 0 26px; padding: 0 18px;
  border: 1px solid #D5D2DD; border-radius: 8px; background: #fff; font: 400 19px 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); box-shadow: 0 1px 3px rgba(26,42,108,.05); }
.dh-gmf-form select { -webkit-appearance: none; appearance: none; padding-right: 50px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231A2A6C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 18px center no-repeat; }
.dh-gmf-form input::placeholder, .dh-gmf-form select.dh-gmf-leer { color: #7C8098; }
.dh-gmf-form select option { color: var(--dhp-text, #1A2A6C); }
.dh-gmf-form input:focus, .dh-gmf-form select:focus { outline: none; border-color: var(--dhp-akzent, #8E1B3A); box-shadow: 0 0 0 3px rgba(142,27,58,.12); }
.dh-gmf-form .dh-gmf-falsch { border-color: var(--dhp-rot, #B01E3C); }
.dh-gmf-fehler { margin: -18px 0 20px; font-size: 15px; color: var(--dhp-rot, #B01E3C); }
.dh-gmf-bild-mobil { display: none; }
button.dh-gme-los { display: flex; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box; width: 100%; max-width: 560px; padding: 14px 28px;
  border: 0; border-radius: 50px; background: linear-gradient(180deg, var(--dhp-knopf, #A0213F) 0%, var(--dhp-knopf-dunkel, #7A1532) 100%); color: #fff; cursor: pointer;
  font: 400 26px/1.2 'Playfair Display', Georgia, serif; box-shadow: 0 6px 18px rgba(110,20,48,.25); }
button.dh-gme-los:hover { background: var(--dhp-akzent-dunkel, #6E1430); }
button.dh-gme-los:disabled { opacity: .65; cursor: wait; }
.dh-gmf .dh-gme-sicher { justify-content: center; }
@media (max-width: 1199px) {
  .dh-gmf-h1 { font-size: 46px; }
  .dh-gmf-text { margin-left: 32px; padding-right: 32px; }
  .dh-gmf-kopf { flex-wrap: wrap; gap: 14px 30px; }
}
@media (max-width: 959px) {
  .dh-gmf { display: block; }
  .dh-gmf-rechts { display: none; }
  .dh-gmf-text { max-width: 620px; margin: 0 auto; padding: 18px 22px 30px; }
  .dh-gmf-kopf { position: relative; flex-direction: column; gap: 10px; margin-bottom: 22px; }
  .dh-gmf-kicker { display: none; }
  .dh-gmf-zurueck { display: block; position: absolute; left: 0; top: 14px; }
  .dh-gmf-fort { flex-direction: column-reverse; gap: 10px; }
  .dh-gmf-fort span { font-size: 17px; }
  .dh-gmf-fort li { margin-left: 22px; } .dh-gmf-fort li:first-child { margin-left: 0; }
  .dh-gmf-fort li + li::before { width: 23px; }
  .dh-gmf-h1 { font-size: 40px; }
  .dh-gmf-sub { font-size: 19px; margin: 10px 0 24px; }
  .dh-gmf-form label { font-size: 18px; }
  .dh-gmf-form input, .dh-gmf-form select { height: 52px; font-size: 18px; margin-bottom: 22px; }
  .dh-gmf-bild-mobil { display: block; width: calc(100% + 44px); max-width: none; height: auto; margin: 0 -22px -34px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%); }
  button.dh-gme-los { position: relative; margin: 0 auto; max-width: 480px; width: 88%; }
  .dh-gmf .dh-gme-sicher { font-size: 13.5px; margin-left: auto; margin-right: auto; }
  .dh-gmf-info { margin-left: auto; margin-right: auto; }
}
@media (max-width: 639px) {
  .dh-gmf-h1 { font-size: 34px; }
  .dh-gmf-sub { font-size: 17.5px; }
  button.dh-gme-los { font-size: 22px; padding: 13px 20px; }
}

/* ── Karte 867 (22.09.2026, Martin): zweite Fragen-Seite des Geschenk-Moments (docs/mockups/k867/). Gleiches Raster wie Frage 1
   (#dh-gmf-2, gebaut von build/web/gutschein.js); rechts nur das Laternenbild ohne Merkmale, Freitext mit Zeichenzaehler (max. 1.000)
   und Beispiele-Kasten. Smartphone: Laternenbild zwischen Beispielen und Weiter. */
.dh-gmf-2 .dh-gmf-bild { min-height: 720px; background-image: var(--dhp-bild-frage2-desktop, url(/images/av/dh-gm-frage2-desktop.webp)); background-position: center top; }
.dh-gmf-2 .dh-gmf-bild::before { background: linear-gradient(90deg, var(--dhp-flaeche, #FAF5EF) 0%, rgba(250,245,239,.6) 10%, rgba(250,245,239,0) 26%); }
.dh-gmf-form textarea { display: block; box-sizing: border-box; width: 100%; min-height: 172px; margin: 0; padding: 16px 22px; resize: vertical;
  border: 1px solid #D5D2DD; border-radius: 8px; background: #fff; font: 400 19px/1.55 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); box-shadow: 0 1px 3px rgba(26,42,108,.05); }
.dh-gmf-form textarea::placeholder { color: #7C8098; }
.dh-gmf-form textarea:focus { outline: none; border-color: var(--dhp-akzent, #8E1B3A); box-shadow: 0 0 0 3px rgba(142,27,58,.12); }
.dh-gmf-zaehler { margin: 8px 2px 18px; text-align: right; font-size: 17px; color: #7C8098; }
.dh-gmf-fehler.dh-gmf-fehler-2 { margin: -10px 0 16px; }
.dh-gmf-bsp { display: flex; gap: 22px; align-items: flex-start; margin: 0 0 26px; padding: 20px 24px; border-radius: 10px; background: #F4E9DF; }
.dh-gmf-bsp-icon { flex: none; width: 42px; height: 42px; margin-top: 4px; color: var(--dhp-akzent, #8E1B3A); stroke-width: 0; }
.dh-gmf-bsp strong { display: block; margin-bottom: 4px; font: 600 19px/1.3 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmf-bsp p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--dhp-text, #1A2A6C); }
@media (max-width: 959px) {
  .dh-gmf-2 .dh-gmf-sub br { display: none; }
  .dh-gmf-form textarea { min-height: 200px; font-size: 18px; padding: 14px 18px; }
  .dh-gmf-zaehler { font-size: 16px; margin-bottom: 16px; }
  .dh-gmf-bsp { gap: 16px; padding: 18px 18px; margin-bottom: 0; }
  .dh-gmf-bsp-icon { width: 36px; height: 36px; }
  .dh-gmf-2 .dh-gmf-bild-mobil { margin-bottom: 6px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); }
}
@media (max-width: 639px) {
  .dh-gmf-bsp p { font-size: 15.5px; }
}

/* ── Karte 868 (22.09.2026, Martin): dritte Fragen-Seite „Was verbindet Euch?" (docs/mockups/k868/). Aufbau wie Frage 2
   (#dh-gmf-3, baueTextFrage in build/web/gutschein.js), rechts Laternenbild mit drei Merkmalen darunter wie Frage 1.
   Smartphone: Bild zwischen Beispielen und Weiter, der Button liegt wie im Entwurf unten auf dem Schnee. */
.dh-gmf-3 .dh-gmf-bild { min-height: 660px; background-image: var(--dhp-bild-frage3-desktop, url(/images/av/dh-gm-frage3-desktop.webp)); background-position: center top; }
@media (max-width: 959px) {
  .dh-gmf-3 .dh-gmf-sub br { display: none; }
  .dh-gmf-3 .dh-gmf-bsp { margin-bottom: 0; }
  .dh-gmf-3 .dh-gmf-bild-mobil { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); }
}

/* ── Karte 872 (22.09.2026, Martin): vierte Fragen-Seite „Was wünschst Du diesem Menschen?" (docs/mockups/k872/). Aufbau wie Frage 3
   (#dh-gmf-4, baueTextFrage in build/web/gutschein.js), rechts Laternenbild mit drei Merkmalen darunter.
   Smartphone: Bild zwischen Beispielen und Weiter. */
.dh-gmf-4 .dh-gmf-bild { min-height: 660px; background-image: var(--dhp-bild-frage4-desktop, url(/images/av/dh-gm-frage4-desktop.webp)); background-position: center top; }
@media (max-width: 959px) {
  .dh-gmf-4 .dh-gmf-sub br { display: none; }
  .dh-gmf-4 .dh-gmf-bsp { margin-bottom: 0; }
  .dh-gmf-4 .dh-gmf-bild-mobil { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%); }
}

/* ── Karte 875 (22.09.2026, Martin): fünfte Seite „Passt alles?" (docs/mockups/k875/) — Übersicht aller Angaben (#dh-gmf-5, baueUebersicht
   in build/web/gutschein.js): je Angabe eine Karte mit Symbol, Frage, Antwort (max. 2 Zeilen) und „Bearbeiten ›", Tipp-Kasten,
   „Persönliche Texte erstellen". Rechts Geschenkbild mit drei Merkmalen; Smartphone: Bild ganz unten. */
.dh-gmf-5 .dh-gmf-bild { min-height: 700px; background-image: var(--dhp-bild-uebersicht-desktop, url(/images/av/dh-gm-uebersicht-desktop.webp)); background-position: center top; }
.dh-gmf-5 .dh-gmf-sub { margin-bottom: 18px; }
.dh-gmu-liste { list-style: none; margin: 0 0 10px; padding: 0; }
.dh-gmu-liste li { display: flex; align-items: center; gap: 22px; margin: 0 0 8px; padding: 12px 18px 12px 14px; background: var(--dhp-flaeche-hell, #FCF9F5);
  border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; box-shadow: 0 1px 3px rgba(26,42,108,.04); }
.dh-gmu-icon { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; background: #F5E9E0; color: var(--dhp-akzent, #8E1B3A); display: flex; align-items: center; justify-content: center; }
.dh-gmu-icon svg { width: 34px; height: 34px; }
.dh-gmu-inhalt { flex: 1 1 auto; min-width: 0; }
.dh-gmu-inhalt strong { display: block; font: 600 19px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmu-inhalt p { margin: 3px 0 0; font-size: 16.5px; line-height: 1.4; color: var(--dhp-text, #1A2A6C); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; white-space: pre-line; }
.dh-gmu-bearb { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 6px 0 6px 10px; cursor: pointer;
  font-size: 17px; color: var(--dhp-akzent, #8E1B3A); text-decoration: none; }
.dh-gmu-bearb u { text-decoration: underline; text-underline-offset: 3px; }
.dh-gmu-bearb span { font-size: 26px; line-height: 1; }
.dh-gmu-bearb:hover { color: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gmu-tipp { display: flex; gap: 22px; align-items: flex-start; margin: 14px 0 20px; padding: 16px 24px 16px 26px; background: #F5E6D8; border-radius: 10px; }
.dh-gmu-tipp-icon { flex: 0 0 38px; width: 38px; height: 38px; color: var(--dhp-akzent, #8E1B3A); margin-top: 4px; }
.dh-gmu-tipp strong { display: block; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmu-tipp p { margin: 2px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gmf-5 button.dh-gme-los { max-width: none; }
/* Karte 1020 (Martin, 30.09.2026): „Dein Schreib-Assistent" auf Seite 5 — ja/nein als zwei Wahlkarten, Ton als Chips (nur bei „ja") */
.dh-gsa { margin: 0 0 20px; padding: 18px 24px 20px 26px; min-width: 0; border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; background: var(--dhp-flaeche-hell, #FCF9F5); }
.dh-gsa[hidden], .dh-gsa-ton[hidden], .dh-gmt-eigen-h[hidden] { display: none; }
/* Karte 1029: Schreib-Assistent nach sechs Einsätzen „müde“ — Hinweis statt Wahl */
.dh-gsa-t[hidden], .dh-gsa-wahl[hidden], .dh-gsa-muede[hidden] { display: none; }
.dh-gsa-muede { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-h { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 0; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gsa-h + * { clear: both; }
.dh-gsa-icon { flex: none; width: 30px; height: 30px; }
.dh-gsa-t { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dh-gsa-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--dhp-rand, #EADFD3); border-radius: 10px; background: #fff; cursor: pointer; }
.dh-gsa-opt:has(input:checked) { border-color: var(--dhp-akzent, #8E1B3A); background: #FBF1F1; box-shadow: inset 0 0 0 1px var(--dhp-akzent, #8E1B3A); }
.dh-gsa-opt input, .dh-gsa-stil input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.dh-gsa-punkt { flex: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #B9A9A0; border-radius: 50%; background: #fff; }
.dh-gsa-opt input:checked + .dh-gsa-punkt { border-color: var(--dhp-akzent, #8E1B3A); background: radial-gradient(circle, var(--dhp-akzent, #8E1B3A) 0 5px, #fff 6px); }
.dh-gsa-opt input:focus-visible + .dh-gsa-punkt, .dh-gsa-stil input:focus-visible + span { outline: 3px solid rgba(142,27,58,.3); outline-offset: 2px; }
.dh-gsa-opt strong { display: block; font-size: 16.5px; line-height: 1.3; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-opt small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-ton { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.dh-gsa-ton legend { margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 700; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-stile { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-gsa-stil { position: relative; cursor: pointer; }
.dh-gsa-stil span { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--dhp-rand, #EADFD3); border-radius: 999px; background: #fff; font-size: 15px; line-height: 1.2; color: var(--dhp-text, #1A2A6C); }
.dh-gsa-stil:hover span { border-color: var(--dhp-akzent, #8E1B3A); }
.dh-gsa-stil input:checked + span { border-color: var(--dhp-akzent, #8E1B3A); background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gsa-stil-info { margin: 10px 0 0; font-size: 14.5px; line-height: 1.4; font-style: italic; color: var(--dhp-text, #1A2A6C); }
@media (max-width: 959px) {
  .dh-gmf-5 .dh-gmf-sub br { display: none; }
  .dh-gsa { padding: 14px 14px 16px; }
  .dh-gsa-h { font-size: 18px; gap: 10px; }
  .dh-gsa-icon { width: 26px; height: 26px; }
  .dh-gsa-t { font-size: 15px; margin-bottom: 12px; }
  .dh-gsa-muede { font-size: 15px; }
  .dh-gsa-wahl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dh-gsa-opt { padding: 12px; }
  .dh-gsa-opt strong { font-size: 15.5px; }
  .dh-gsa-opt small { font-size: 13.5px; }
  .dh-gsa-ton legend { font-size: 15px; }
  .dh-gsa-stil span { padding: 7px 13px; font-size: 14px; }
  .dh-gsa-stil-info { font-size: 13.5px; }
  .dh-gmu-liste li { gap: 14px; padding: 10px 12px 10px 10px; }
  .dh-gmu-icon { flex-basis: 50px; width: 50px; height: 50px; }
  .dh-gmu-icon svg { width: 28px; height: 28px; }
  .dh-gmu-inhalt strong { font-size: 16px; }
  .dh-gmu-inhalt p { font-size: 15px; }
  .dh-gmu-bearb { font-size: 14px; gap: 6px; padding-left: 2px; }
  .dh-gmu-bearb span { font-size: 20px; }
  .dh-gmu-tipp { gap: 14px; padding: 14px 16px; }
  .dh-gmu-tipp strong { font-size: 18px; }
  .dh-gmu-tipp p { font-size: 15px; }
  .dh-gmf-5 button.dh-gme-los { max-width: 480px; font-size: 21px; white-space: nowrap; padding-left: 18px; padding-right: 18px; }
  .dh-gmf-5 .dh-gmf-bild-mobil { margin-top: 18px; }
}

/* ── Karte 877 (22.09.2026, Martin): Seite 6 „Deine persönlichen Texte sind fertig!" (#dh-gmf-6, .dh-gmt) und Seite 7
   „Foto hinzufügen" mit Ausschnitt-Editor (#dh-gmf-7, .dh-gmp), gebaut von build/web/gutschein.js (docs/mockups/k877/).
   Desktop: Texte links, Foto-Kasten + Hinweis + „Fertigen Geschenk-Moment ansehen" rechts; Deko-Bilder aus Martins Entwürfen
   (Laterne/Geschenk rechts, Zweige unten links, Handschrift). Smartphone: alles untereinander, Texte auf 3 Zeilen gekürzt. */
.dh-gmt, .dh-gmp { position: relative; overflow: hidden; background: var(--dhp-flaeche, #FAF5EF); color: var(--dhp-text, #1A2A6C); }
.dh-gmt[hidden], .dh-gmp[hidden] { display: none !important; }
.dh-gmt-deko { position: absolute; pointer-events: none; user-select: none; height: auto; }
.dh-gmt-deko-rechts { right: 0; top: 150px; width: 186px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.dh-gmt-deko-hand { right: 60px; top: 14px; width: 250px; -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 55%, transparent 80%); }
.dh-gmt-deko-unten { left: 0; bottom: 0; width: 470px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%); mask-image: linear-gradient(180deg, transparent 0, #000 35%); }
.dh-gmt-innen { position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 34px;
  max-width: 1400px; margin: 0 auto; padding: 34px 220px 170px 40px; }
.dh-gmt .dh-gmf-kopf { margin-bottom: 18px; }
.dh-gmt-h1 { display: flex; align-items: flex-start; gap: 16px; margin: 0; font: 600 46px/1.12 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-h1-icon { flex: none; width: 58px; height: 58px; margin-top: -4px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-sub { margin: 12px 0 20px 74px; font-size: 19px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gmt-wer { display: flex; align-items: center; gap: 26px; margin: 0 0 12px; padding: 12px 20px; background: var(--dhp-flaeche-hell, #FCF9F5); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; }
.dh-gmt-wer > div { display: flex; align-items: center; gap: 14px; }
.dh-gmt-wer p { margin: 0; }
.dh-gmt-wer strong { display: block; font: 600 19px/1.25 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-wer span { font-size: 16.5px; }
.dh-gmt-wer-icon { flex: none; width: 40px; height: 40px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-wer-info { margin-left: auto; max-width: 230px; }
.dh-gmt-info-icon { flex: none; width: 28px; height: 28px; color: #1A4A9C; }
.dh-gmt-wer-info small { font-size: 13px; line-height: 1.4; }
.dh-gmt-liste { list-style: none; margin: 0; padding: 0; }
.dh-gmt-liste > li { display: flex; align-items: flex-start; gap: 20px; margin: 0 0 12px; padding: 16px 16px 16px 20px; background: var(--dhp-flaeche-hell, #FCF9F5); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; box-shadow: 0 1px 3px rgba(26,42,108,.04); }
.dh-gmt-liste > li.dh-gmt-lade { align-items: center; font-size: 17px; }
.dh-gmt-icon { flex: 0 0 52px; color: var(--dhp-akzent, #8E1B3A); padding-top: 4px; }
.dh-gmt-icon svg { width: 46px; height: 46px; }
.dh-gmt-inhalt { flex: 1 1 auto; min-width: 0; }
.dh-gmt-inhalt h2 { margin: 0 0 4px; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-text { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--dhp-text, #1A2A6C); white-space: pre-line; overflow-wrap: anywhere; }
.dh-gmt-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; padding: 8px 16px; border: 1.5px solid var(--dhp-akzent, #8E1B3A);
  border-radius: 8px; background: #fff; color: var(--dhp-akzent, #8E1B3A); cursor: pointer; font: 400 16px/1.2 'Nunito Sans', system-ui, sans-serif; white-space: nowrap; }
.dh-gmt-knopf svg { width: 20px; height: 20px; flex: none; }
.dh-gmt-knopf:hover { background: #F7ECEC; }
.dh-gmt-knopf:disabled { opacity: .6; cursor: wait; }
.dh-gmt-knopf.dh-gmt-voll { background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gmt-bearb { flex: none; }
.dh-gmt-edit .dh-gmt-bearb { visibility: hidden; }
.dh-gmt-editor textarea { display: block; box-sizing: border-box; width: 100%; margin: 4px 0 8px; padding: 12px 14px; resize: vertical; border: 1px solid #D5D2DD; border-radius: 8px;
  background: #fff; font: 400 16.5px/1.5 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); }
.dh-gmt-editor textarea:focus { outline: none; border-color: var(--dhp-akzent, #8E1B3A); box-shadow: 0 0 0 3px rgba(142,27,58,.12); }
.dh-gmt-editor > div { display: flex; gap: 10px; }
.dh-gmt-editor .dh-gmf-fehler { margin: 0 0 8px; }
.dh-gmt-rechts { padding-top: 90px; }
.dh-gmt-foto { position: relative; margin: 0 0 18px; padding: 22px 24px 24px; border: 1.5px dashed var(--dhp-rosa, #D9A3AE); border-radius: 12px; background: rgba(252,249,245,.96);
  box-shadow: 0 0 0 8px rgba(252,249,245,.7); }
.dh-gmt-foto-kopf { position: relative; display: flex; gap: 18px; align-items: flex-start; }
.dh-gmt-foto-kopf h2 { margin: 6px 0 6px; font: 600 23px/1.25 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-foto-kopf p { margin: 0; font-size: 16px; line-height: 1.45; }
.dh-gmt-kamera { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 50%; background: var(--dhp-akzent, #8E1B3A); color: #fff; display: flex; align-items: center; justify-content: center; }
.dh-gmt-kamera svg { width: 38px; height: 38px; }
.dh-gmt-foto-hand { display: none; }
.dh-gmt-foto-reihe { display: flex; gap: 22px; align-items: center; margin: 18px 0 18px; }
.dh-gmt-polaroid { flex: none; width: 214px; height: auto; filter: drop-shadow(0 4px 8px rgba(60,30,20,.12)); }
.dh-gmt-foto-merk { list-style: none; margin: 0; padding: 0; }
.dh-gmt-foto-merk li { display: flex; gap: 10px; margin: 0 0 12px; font-size: 15px; line-height: 1.35; }
.dh-gmt-foto-merk svg { flex: none; width: 20px; height: 20px; color: var(--dhp-akzent, #8E1B3A); stroke-width: 2.4; }
.dh-gmt .dh-gmt-add { max-width: 380px; margin: 0 auto; font-size: 24px; }
.dh-gmt-btn-icon { width: 30px; height: 30px; flex: none; }
.dh-gmt-foto-da { border-color: #9DBF9C; background: rgba(241,246,238,.97); }
.dh-gmt-foto-da .dh-gmt-kamera { background: #1F6B35; }
.dh-gmt-foto-da .dh-gmt-foto-kopf h2 { color: #1F5E30; }
.dh-gmt-foto-da .dh-gmt-foto-reihe { align-items: stretch; margin-bottom: 0; }
.dh-gmt-foto-bild { flex: 0 0 56%; width: 56%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.dh-gmt-foto-knoepfe { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.dh-gmt-foto-ok { display: flex; gap: 10px; margin: 4px 0 0; padding: 10px 12px; background: #E7F0E3; border-radius: 8px; font-size: 13.5px; line-height: 1.45; }
.dh-gmt-foto-ok svg { flex: none; width: 26px; height: 26px; color: #1F7A3A; }
.dh-gmt-hinweis { display: flex; gap: 20px; align-items: flex-start; margin: 0 0 20px; padding: 16px 22px; background: #F8E1E1; border-radius: 10px; }
.dh-gmt-hinweis-icon { flex: none; width: 48px; height: 48px; color: var(--dhp-rot, #B01E3C); }
.dh-gmt-hinweis strong { display: block; font: 600 21px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-hinweis p { margin: 2px 0 0; font-size: 16.5px; line-height: 1.45; }
.dh-gmt-hinweis b { color: var(--dhp-rot, #B01E3C); font-weight: 700; }
.dh-gmt button.dh-gmt-ansehen { max-width: none; }
.dh-gmt-klein { margin: 12px 8px 0; font-size: 14.5px; line-height: 1.5; }
.dh-gmt .dh-gmf-info { margin-top: 14px; }
.dh-gmt-mobil { display: none; }
/* Karte 1020: eigene Worte ohne Schreib-Assistent — „Deine Worte" über den Texten; einspaltig steht der Medien-Kasten vor den Texten */
.dh-gmt-eigen-h { margin: 4px 0 10px; font: 600 22px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
@media (max-width: 1199px) {
  .dh-gmt-eigen .dh-gmt-innen { display: flex; flex-direction: column; gap: 0; }
  .dh-gmt-eigen .dh-gmt-links, .dh-gmt-eigen .dh-gmt-rechts { display: contents; }
  .dh-gmt-eigen .dh-gmt-foto { order: 1; }
  .dh-gmt-eigen .dh-gmt-eigen-h, .dh-gmt-eigen .dh-gmt-wer, .dh-gmt-eigen .dh-gmt-liste { order: 2; }
  .dh-gmt-eigen .dh-gmt-hinweis, .dh-gmt-eigen .dh-gmt-ansehen, .dh-gmt-eigen .dh-gmt-klein, .dh-gmt-eigen .dh-gmf-info { order: 3; }
  .dh-gmt-eigen .dh-gmt-eigen-h { margin-top: 6px; }
}
@media (max-width: 1399px) {
  .dh-gmt-innen { padding-right: 190px; }
  .dh-gmt-deko-hand { right: 20px; }
}
@media (max-width: 1199px) {
  .dh-gmt-innen { grid-template-columns: minmax(0, 1fr); padding: 30px 32px 170px; max-width: 820px; }
  .dh-gmt-rechts { padding-top: 0; }
  .dh-gmt-deko-rechts, .dh-gmt-deko-hand { display: none; }
}
@media (max-width: 959px) {
  .dh-gmt-innen { display: block; padding: 18px 16px 0; max-width: 620px; }
  .dh-gmt-deko-unten { display: none; }
  .dh-gmt .dh-gmf-kopf { margin-bottom: 14px; }
  .dh-gmt-h1 { font-size: 34px; gap: 10px; }
  .dh-gmt-h1-icon { width: 44px; height: 44px; }
  .dh-gmt-sub { margin: 10px 0 14px; font-size: 16.5px; }
  .dh-gmt-wer { gap: 10px; padding: 10px 10px; }
  .dh-gmt-wer > div { gap: 8px; }
  .dh-gmt-wer-icon { width: 32px; height: 32px; }
  .dh-gmt-wer strong { font-size: 15.5px; }
  .dh-gmt-wer span { font-size: 14.5px; }
  .dh-gmt-wer-info { max-width: 130px; gap: 6px !important; }
  .dh-gmt-wer-info small { font-size: 11px; }
  .dh-gmt-info-icon { width: 22px; height: 22px; }
  .dh-gmt-liste > li { gap: 10px; padding: 12px 10px; margin-bottom: 8px; position: relative; }
  .dh-gmt-icon { flex-basis: 40px; }
  .dh-gmt-icon svg { width: 36px; height: 36px; }
  .dh-gmt-inhalt h2 { font-size: 16.5px; padding-right: 128px; min-height: 36px; }
  .dh-gmt-text { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .dh-gmt-bearb { position: absolute; right: 10px; top: 10px; padding: 6px 10px; font-size: 13.5px; gap: 6px; }
  .dh-gmt-bearb svg { width: 16px; height: 16px; }
  .dh-gmt-foto { padding: 14px 14px 16px; background: #FBEDEC; border-color: #E4A9B3; box-shadow: none; }
  .dh-gmt-kamera { flex-basis: 58px; width: 58px; height: 58px; }
  .dh-gmt-kamera svg { width: 30px; height: 30px; }
  .dh-gmt-foto-kopf h2 { font-size: 19px; }
  .dh-gmt-foto-kopf p { font-size: 13.5px; }
  .dh-gmt-foto-reihe { margin: 12px 0; }
  .dh-gmt-polaroid { width: 120px; order: 2; }
  .dh-gmt-foto-merk li { font-size: 13.5px; margin-bottom: 6px; }
  .dh-gmt .dh-gmt-add { font-size: 19px; width: 100%; }
  .dh-gmt-foto-da { background: #FBEDEC; border-color: #E4A9B3; }
  .dh-gmt-foto-da .dh-gmt-kamera { background: var(--dhp-akzent, #8E1B3A); }
  .dh-gmt-foto-da .dh-gmt-foto-kopf h2 { color: var(--dhp-akzent, #8E1B3A); }
  .dh-gmt-foto-da .dh-gmt-foto-reihe { margin-top: 12px; gap: 12px; }
  .dh-gmt-foto-bild { flex-basis: 48%; width: 48%; }
  .dh-gmt-foto-knoepfe { gap: 8px; }
  .dh-gmt-foto-knoepfe .dh-gmt-knopf { font-size: 14px; padding: 7px 8px; }
  .dh-gmt-foto-ok { font-size: 11.5px; padding: 8px; }
  .dh-gmt-hinweis { gap: 12px; padding: 12px 14px; }
  .dh-gmt-hinweis-icon { width: 40px; height: 40px; }
  .dh-gmt-hinweis strong { font-size: 18px; }
  .dh-gmt-hinweis p { font-size: 14.5px; }
  .dh-gmt button.dh-gmt-ansehen { width: 100%; font-size: 19px; padding: 13px 14px; white-space: nowrap; gap: 10px; }
  .dh-gmt button.dh-gmt-ansehen .dh-gmt-btn-icon { width: 24px; height: 24px; }
  .dh-gmt-klein { font-size: 13px; margin: 8px 4px 0; }
  .dh-gmt-mobil { display: block; width: 100%; max-width: 620px; height: auto; margin: 10px auto 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
}
@media (max-width: 399px) {
  .dh-gmt button.dh-gmt-ansehen { font-size: 17px; }
  .dh-gmt-wer-info { display: none !important; }
}

/* Seite 7 „Foto hinzufügen" */
.dh-gmp-deko-links { left: 0; top: 330px; width: 200px; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 35%); mask-image: linear-gradient(270deg, transparent 0, #000 35%); }
.dh-gmp-deko-hand { left: 20px; top: 12px; width: 230px; }
.dh-gmp-deko-hand2 { right: 10px; bottom: 10px; width: 170px; }
.dh-gmp-innen { position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 48px; max-width: 1400px;
  margin: 0 auto; padding: 34px 200px 70px 240px; }
.dh-gmp .dh-gmf-kopf { margin-bottom: 22px; }
.dh-gmp-h1 { margin: 0; font: 600 46px/1.12 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-sub { margin: 14px 0 22px; font-size: 19px; line-height: 1.45; }
.dh-gmp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 24px 26px; border: 1.5px dashed var(--dhp-rosa, #D9A3AE); border-radius: 12px; background: var(--dhp-flaeche-hell, #FCF9F5); text-align: center; }
.dh-gmp-drop.dh-gmp-ueber { background: #F7ECEC; border-color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-drop-icon { width: 64px; height: 64px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-drop strong { font: 600 25px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-drop span { font-size: 16px; }
.dh-gmp .dh-gmp-drop button.dh-gme-los { margin-top: 14px; max-width: 320px; font-size: 21px; padding: 11px 24px; }
.dh-gmp-mobilwahl { display: none; }
.dh-gmp-fehler { margin: 12px 0 0 !important; }
.dh-gmp .dh-gmu-tipp { margin: 20px 0 14px; }
.dh-gmp-klein { margin: 0 0 18px; font-size: 13.5px; color: var(--dhp-text-leise, #4A5580); }
.dh-gmp-zurueck { min-width: 220px; padding: 12px 24px; border-radius: 40px; font: 400 20px/1.2 'Playfair Display', Georgia, serif; }
.dh-gmp-mobil, .dh-gmp .dh-gmp-weiter { display: none; }
.dh-gmp-ed { padding: 24px 22px 22px; background: rgba(252,249,245,.97); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(60,30,20,.05); }
.dh-gmp-ed h2 { margin: 0 0 4px; font: 600 28px/1.25 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-ed-m { display: none; }
.dh-gmp-ed > p { margin: 0 0 16px; font-size: 16.5px; }
.dh-gmp-buehne { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #EFE6DC; }
.dh-gmp-buehne canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.dh-gmp-buehne canvas:active { cursor: grabbing; }
.dh-gmp-leer, .dh-gmp-lade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 30px; font-size: 16.5px; color: #6A6F8A; }
.dh-gmp-leer[hidden], .dh-gmp-lade[hidden] { display: none; }
.dh-gmp-zoom { display: flex; align-items: center; gap: 12px; max-width: 360px; margin: 14px auto 0; font-size: 20px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-werkzeug { display: flex; justify-content: center; gap: 16px; margin: 12px 0 0; }
.dh-gmp-werkzeug .dh-gmt-knopf { border-color: #E3D6CB; border-radius: 30px; padding: 10px 20px; font: 600 16px/1.2 'Playfair Display', Georgia, serif; color: var(--dhp-text, #1A2A6C); }
.dh-gmp-werkzeug .dh-gmt-knopf svg { color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-zoom, .dh-gmp-werkzeug { visibility: hidden; }
.dh-gmp-hat .dh-gmp-zoom, .dh-gmp-hat .dh-gmp-werkzeug { visibility: visible; }
.dh-gmp-tipp-ed { display: none !important; }
.dh-gmp .dh-gmp-ok { max-width: 420px; margin: 34px auto 0; font-size: 24px; }
.dh-gmp-weg { display: none !important; }
.dh-gmp .dh-gmf-info { margin-top: 14px; }
@media (max-width: 1399px) {
  .dh-gmp-innen { padding-left: 200px; padding-right: 60px; }
  .dh-gmp-deko-hand2 { display: none; }
}
@media (max-width: 1199px) {
  .dh-gmp-innen { grid-template-columns: minmax(0, 1fr); padding: 30px 32px 60px; max-width: 760px; }
  .dh-gmp-deko-links, .dh-gmp-deko-hand { display: none; }
}
@media (max-width: 959px) {
  .dh-gmp-innen { display: block; padding: 18px 16px 30px; max-width: 620px; }
  .dh-gmp-h1 { font-size: 32px; }
  .dh-gmp-sub { font-size: 16.5px; margin: 10px 0 16px; }
  .dh-gmp-drop { padding: 22px 16px; }
  .dh-gmp .dh-gmp-drop button.dh-gme-los { display: none; }
  .dh-gmp-drop { cursor: pointer; }
  .dh-gmp-mobilwahl { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .dh-gmp-mobilwahl .dh-gmt-knopf { border-radius: 30px; padding: 12px 16px; font: 600 17px/1.2 'Playfair Display', Georgia, serif; }
  .dh-gmp-zurueck { display: none; }
  .dh-gmp-mobil { display: block; width: 100%; height: auto; margin: 6px 0 14px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%); mask-image: linear-gradient(180deg, transparent 0, #000 20%); }
  .dh-gmp .dh-gmp-weiter { display: flex; margin: 0 auto; width: 100%; font-size: 21px; background: #fff; color: var(--dhp-akzent, #8E1B3A); border: 1.5px solid var(--dhp-akzent, #8E1B3A); box-shadow: none; }
  .dh-gmp-rechts { display: none; }
  .dh-gmp-hat .dh-gmp-links > :not(.dh-gmf-kopf) { display: none !important; }
  .dh-gmp-hat .dh-gmp-rechts { display: block; }
  .dh-gmp-ed { padding: 0; background: none; border: 0; box-shadow: none; }
  .dh-gmp-ed-d { display: none; }
  .dh-gmp-ed-m { display: inline; }
  .dh-gmp-ed h2 { font-size: 28px; }
  .dh-gmp-ed > p { font-size: 15.5px; }
  .dh-gmp-buehne { aspect-ratio: 1 / 1; }
  .dh-gmp-werkzeug { gap: 10px; }
  .dh-gmp-werkzeug .dh-gmt-knopf { padding: 9px 12px; font-size: 14px; }
  .dh-gmp-tipp-ed { display: flex !important; text-align: left; margin: 16px 0 0 !important; }
  .dh-gmp .dh-gmp-ok { margin-top: 18px; width: 100%; font-size: 21px; }
  .dh-gmp-weg { display: inline-flex !important; margin: 12px auto 0; border-radius: 30px; }
  .dh-gmp-rechts { text-align: center; }
}
/* Karte 877 Feinschliff nach Sichtprüfung: breitere Textspalte, Handschrift-Bilder weich eingeblendet, kein Umbruch in Kopf/Buttons */
.dh-gmt-innen { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; padding-left: 30px; padding-right: 170px; }
.dh-gmt-wer strong, .dh-gmt-wer span { white-space: nowrap; }
.dh-gmt button.dh-gmt-ansehen { font-size: 23px; white-space: nowrap; }
.dh-gmt-foto-bild { flex-basis: 52%; width: 52%; align-self: flex-start; }
.dh-gmt-deko-hand, .dh-gmp-deko-hand, .dh-gmp-deko-hand2 { -webkit-mask-image: radial-gradient(ellipse farthest-side, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse farthest-side, #000 78%, transparent 100%); }
/* Karte 976 (Martin): der Handschrift-Zettel auf Seite 6 ist eng zugeschnitten — Schrift und Herz reichen bis
   0–11 px an den Bildrand. Die Ellipse blendete „mehr“ und das Herz aus; jetzt nur ein schmaler weicher Rand. */
.dh-gmt-deko-hand {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%), linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 4px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%), linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 4px), transparent 100%);
  mask-composite: intersect; }
.dh-gmp .dh-gmf-kopf { flex-wrap: wrap; gap: 12px 30px; }
.dh-gmp-buehne { user-select: none; -webkit-user-select: none; }
@media (max-width: 1399px) { .dh-gmt-innen { padding-right: 150px; } }
@media (max-width: 1199px) { .dh-gmt-innen { padding: 30px 32px 170px; } }
@media (max-width: 959px) {
  .dh-gmt-innen { padding: 18px 16px 0; }
  .dh-gmt-inhalt h2 { padding-right: 140px; }
  .dh-gmt-wer strong, .dh-gmt-wer span { white-space: normal; }
  .dh-gmt button.dh-gmt-ansehen { font-size: 19px; }
  .dh-gmt-foto-da .dh-gmt-foto-reihe { flex-wrap: wrap; }
  .dh-gmt-foto-da .dh-gmt-foto-ok { font-size: 12px; }
}
@media (max-width: 399px) { .dh-gmt button.dh-gmt-ansehen { font-size: 17px; } }

/* ── Karte 879 (22.09.2026, Martin): Szene 1 des fertigen Geschenk-Moments (#dh-gms-1, .dh-gms) nach docs/mockups/k879/.
   Smartphone: die Szene füllt den Bildschirm. Desktop: derselbe Handy-Screen als Karte mittig vor dem Hintergrundbild
   (Laterne links, Geschenk + „Schenken, was von Herzen kommt." rechts; Mitte aus dem Entwurf weichgezeichnet). Die Karte
   wächst bei längeren Inhalten nach unten. Schriften selbst gehostet (/dh/fonts, SIL OFL): Allura = Name, Caveat = Fußzeile. */
@font-face { font-family: 'Allura'; font-style: normal; font-weight: 400; font-display: swap; src: url(/dh/fonts/allura-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Allura'; font-style: normal; font-weight: 400; font-display: swap; src: url(/dh/fonts/allura-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/dh/fonts/caveat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/dh/fonts/caveat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
.dh-gms { display: flex; justify-content: center; align-items: flex-start; padding: 44px 20px 56px; min-height: 780px; box-sizing: border-box;
  background: #3A2418 var(--dhp-bild-szene1-hintergrund, url(/images/av/dh-gm-szene1-hintergrund.webp)) center / cover no-repeat; color: var(--dhp-text, #1A2A6C); }
.dh-gms[hidden] { display: none !important; }
.dh-gms-karte { box-sizing: border-box; width: 410px; max-width: 100%; padding: 26px 30px 22px; border-radius: 34px; background: #FBF6F0;
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 0 0 6px rgba(255,245,235,.28), 0 24px 60px rgba(40,20,10,.45); overflow: hidden; }
.dh-gms-fort { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.dh-gms-fort ol { display: flex; flex: 1; list-style: none; margin: 0; padding: 0; }
.dh-gms-fort li { position: relative; flex: none; width: 13px; height: 13px; box-sizing: border-box; border: 1px solid #B9A9A0; border-radius: 50%; background: #FBF6F0; margin-left: 20px; }
.dh-gms-fort li:first-child { margin-left: 0; }
.dh-gms-fort li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 21px; height: 1px; background: #CDBFB6; }
.dh-gms-fort li.aktiv, .dh-gms-fort li.fertig { background: var(--dhp-akzent, #8E1B3A); border-color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-fort li:first-child::after { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 1px; background: #CDBFB6; }
.dh-gms-fort ol { padding-left: 22px; }
.dh-gms-fort span { font: 400 14px/1 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); white-space: nowrap; }
.dh-gms-h1 { margin: 0; text-align: center; font-weight: 400; }
.dh-gms-name { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dh-gms-vorname { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; font: 400 76px/1.05 var(--dhp-schrift-hand, 'Allura'), 'Segoe Script', cursive; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-lang .dh-gms-vorname { font-size: 58px; }
.dh-gms-lang2 .dh-gms-vorname { font-size: 44px; }
.dh-gms-herz { flex: none; width: 50px; height: 50px; margin-top: 6px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-zeile { display: block; margin: 8px 0 0; font: 400 36px/1.12 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-bild { display: block; width: calc(100% + 60px); max-width: none; height: auto; margin: 22px -30px 20px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.dh-gms button.dh-gme-los { max-width: none; font-size: 23px; padding: 13px 20px; }
.dh-gms-info { margin-top: 14px; font-size: 15px; }
.dh-gms-fuss { position: relative; margin: 22px 0 0; padding-bottom: 20px; text-align: center; font: 500 23px/1.2 var(--dhp-schrift-notiz, 'Caveat'), 'Segoe Script', cursive; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-fuss span { display: block; }
.dh-gms-fuss::before, .dh-gms-fuss::after { content: ""; position: absolute; bottom: 9px; width: 34%; height: 1px; background: #D9C3C3; }
.dh-gms-fuss::before { left: 4%; } .dh-gms-fuss::after { right: 4%; }
.dh-gms-fuss-herz { position: absolute; left: 50%; bottom: 0; width: 18px; height: 18px; margin-left: -9px; color: var(--dhp-akzent, #8E1B3A); fill: var(--dhp-akzent, #8E1B3A); }
@media (max-width: 639px) {
  .dh-gms { padding: 0; min-height: 0; background: #FBF6F0; }
  .dh-gms-karte { width: 100%; padding: 20px 22px 26px; border: 0; border-radius: 0; box-shadow: none; }
  .dh-gms-bild { width: calc(100% + 44px); margin: 18px -22px 18px; }
  .dh-gms-vorname { font-size: 72px; }
  .dh-gms-lang .dh-gms-vorname { font-size: 54px; }
  .dh-gms-lang2 .dh-gms-vorname { font-size: 42px; }
}

/* ── Karte 881 (22.09.2026, Martin): Szenen 2–6 nach docs/mockups/k881/ (Baustein wie Szene 1, Hintergrund bleibt gleich).
   Überschrift in Allura, Text Nunito Sans; Szene 3 mit Foto = Polaroid über dem Dekobild; Szene 6 = Motiv + „bereits bezahlt“. */
.dh-gms-titel { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; font: 400 58px/1.02 var(--dhp-schrift-hand, 'Allura'), 'Segoe Script', cursive; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-titel-herz { width: 34px; height: 34px; margin-top: 6px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-titel-neben { flex-direction: row; justify-content: center; gap: 12px; }
.dh-gms-titel-neben .dh-gms-titel-herz { width: 44px; height: 44px; margin-top: 18px; }
.dh-gms-text { margin: 18px 0 0; font: 400 16.5px/1.5 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text-dunkel, #1F2340); overflow-wrap: anywhere; }
.dh-gms-mitte { text-align: center; }
.dh-gms-klein { font-size: 15.5px; margin-top: 10px; }
.dh-gms-deko { position: relative; }
.dh-gms-deko .dh-gms-bild { margin-bottom: 14px; }
.dh-gms-polaroid { position: absolute; left: 7%; top: 4%; width: 64%; margin: 0; padding: 9px 9px 0; box-sizing: border-box; background: var(--dhp-papier, #FFFDF9);
  box-shadow: 0 8px 22px rgba(60,30,15,.35); transform: rotate(-4deg); }
.dh-gms-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dh-gms-polaroid figcaption { position: relative; padding: 8px 0 24px; text-align: center; font: 500 21px/1.1 var(--dhp-schrift-notiz, 'Caveat'), 'Segoe Script', cursive; color: #3B2A24; }
.dh-gms-polaroid-punkt { position: absolute; left: 50%; bottom: 7px; width: 13px; height: 13px; margin-left: -6px; color: #8A4B1E; }
.dh-gms-mitfoto .dh-gms-bild { margin-top: 30px; }
.dh-gms-motiv { margin: 0 -6px; padding: 8px; background: #fff; box-shadow: 0 6px 18px rgba(60,30,15,.22); }
.dh-gms-motiv img { display: block; width: 100%; height: auto; }
.dh-gms-h6 { margin: 18px 0 0; text-align: center; font: 800 18px/1.3 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text-dunkel, #1F2340); }
.dh-gms-bezahlt { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 14px; padding: 12px 16px; border-radius: 12px;
  background: #F8E9E6; font: 800 15.5px/1.25 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-bezahlt-icon { flex: none; width: 36px; height: 36px; color: var(--dhp-akzent, #8E1B3A); stroke-width: 1.3; }
.dh-gms-bezahlt-herz { flex: none; width: 20px; height: 20px; color: var(--dhp-akzent, #8E1B3A); fill: var(--dhp-akzent, #8E1B3A); }
.dh-gms button.dh-gms-anfordern { gap: 10px; padding: 13px 14px; font-size: 18px; white-space: nowrap; }
.dh-gms-hinweis { margin: 12px 0 0; text-align: center; font: 400 13.5px/1.4 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text-dunkel, #1F2340); }
@media (max-width: 639px) {
  .dh-gms-titel { font-size: 56px; }
  .dh-gms-motiv { margin: 0 -8px; }
  .dh-gms button.dh-gms-anfordern { font-size: 16.5px; }
}

/* ── Karte 882 (22.09.2026, Martin): Button-Text laenger als der Button (Smartphone „Passt alles?", Smartphone + Desktop „Deine Texte sind fertig").
   Seite 5: Button auf dem Handy volle Breite; Seite 6: Text gekuerzt auf „Geschenk-Moment ansehen" (gutschein.js). Beide: falls die Schrift
   trotzdem nicht passt (grosse Systemschrift am Handy), bricht der Text um statt ueber den Rand zu laufen. */
.dh-gmf-5 button.dh-gme-los, .dh-gmt button.dh-gmt-ansehen { white-space: normal; text-align: center; text-wrap: balance; }
@media (min-width: 960px) and (max-width: 1199px) { .dh-gmt-innen { grid-template-columns: minmax(0, 1fr); } } /* wie Block 877 gedacht: einspaltig, der Feinschliff-Block hatte das ueberschrieben */
@media (max-width: 959px) {
  .dh-gmf-5 button.dh-gme-los { width: 100%; max-width: 560px; padding-left: 16px; padding-right: 16px; gap: 10px; font-size: min(21px, 5.5vw); }
  .dh-gmt button.dh-gmt-ansehen { font-size: min(19px, 5.1vw); }
}
@media (max-width: 399px) { .dh-gmt button.dh-gmt-ansehen { font-size: min(17px, 4.9vw); padding-left: 10px; padding-right: 10px; gap: 8px; } .dh-gmt button.dh-gmt-ansehen .dh-gmt-btn-icon { width: 22px; height: 22px; } }

/* ── Karte 883 (22.09.2026, Martin): Verschenken + Beschenkten-Link nach docs/mockups/k883/.
   1) Beim Abspielen (Szenen) und auf „Dein Geschenk-Moment ist fertig!" keine Menüleiste und keine Fußzeile (Martin: „Erst
      wenn der beschenkte Mensch seinen Gutschein einlösen will, erscheint die normale Design-Horoskop-Seite").
   2) Teilen-Seite .dh-gmv: Desktop Karte links / Teilen rechts, Smartphone gestapelt mit kleiner Kartenvorschau.
   3) Käufer-Vorschau Szene 6: Kasten „Jetzt verschenken"; /erstellen mit Geschenk: gesperrte Produkte, 0,00 €. */
body.dh-gms-an .tm-header, body.dh-gms-an .tm-header-mobile, body.dh-gms-an .tm-toolbar, body.dh-gms-an .tm-page > footer,
body.dh-gms-an #tm-dialog-mobile, body.dh-gms-an .rm-credit { display: none !important; }
body.dh-gms-an .tm-page { min-height: 100vh; }
.dh-gms-kaeufer { margin: 20px -30px 0; padding: 16px 30px 4px; border-top: 1px dashed #D9C3C3; background: #FFF9F3; text-align: center; }
.dh-gms-kaeufer-t { margin: 0 0 10px; font: 400 14px/1.4 'Nunito Sans', system-ui, sans-serif; color: #5B4A45; }
.dh-gms button.dh-gms-verschenken { gap: 10px; font-size: 19px; background: var(--dhp-gold, #B98A4E); border-color: var(--dhp-gold, #B98A4E); }
.dh-gms button.dh-gms-verschenken:hover { background: #A57A42; }
.dh-gms-verschenken-icon { width: 24px; height: 24px; }
@media (max-width: 639px) { .dh-gms-kaeufer { margin: 20px -22px 0; padding: 16px 22px 4px; } }
.dh-gme-info .dh-gme-zumfertig { margin-top: 12px; }

.dh-gmv { position: relative; padding: 36px 20px 56px; color: var(--dhp-text, #1A2A6C); font-family: 'Nunito Sans', system-ui, sans-serif;
  background: radial-gradient(ellipse at 8% 20%, rgba(233,205,160,.55), transparent 42%), radial-gradient(ellipse at 95% 85%, rgba(233,205,160,.5), transparent 45%),
              radial-gradient(ellipse at 90% 10%, rgba(255,236,205,.8), transparent 40%), #FBF6F0; }
.dh-gmv[hidden] { display: none !important; }
.dh-gmv-innen { position: relative; max-width: 1080px; margin: 0 auto; }
.dh-gmv-freude { position: absolute; right: 0; top: 0; margin: 0; transform: rotate(-8deg); text-align: center; font: 500 30px/1.05 var(--dhp-schrift-notiz, 'Caveat'), 'Segoe Script', cursive; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-freude span { display: block; }
.dh-gmv-freude-herz { width: 30px; height: 30px; margin-top: 6px; color: var(--dhp-gold, #B98A4E); }
.dh-gmv-kopf { text-align: center; padding: 0 150px; }
.dh-gmv-haken { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--dhp-gold, #B98A4E); color: #fff; }
.dh-gmv-haken svg { width: 48px; height: 48px; stroke-width: 2.6; }
.dh-gmv-h1 { margin: 18px 0 0; font: 700 50px/1.08 'Playfair Display', Georgia, serif; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-sub { margin: 14px 0 0; font-size: 21px; line-height: 1.4; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-trenner { position: relative; margin: 18px auto 0; max-width: 440px; color: var(--dhp-gold, #B98A4E); }
.dh-gmv-trenner svg { width: 24px; height: 24px; fill: currentColor; }
.dh-gmv-trenner::before, .dh-gmv-trenner::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: #CFA877; }
.dh-gmv-trenner::before { left: 0; } .dh-gmv-trenner::after { right: 0; }
.dh-gmv-raster { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 28px; margin-top: 28px; align-items: start; }
.dh-gmv-karte { text-align: center; }
.dh-gmv-bild { display: block; width: 100%; padding: 0; border: 6px solid #fff; border-radius: 14px; background: #fff; cursor: zoom-in; overflow: hidden;
  box-shadow: 0 14px 34px rgba(90,60,30,.22); }
.dh-gmv-bild img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1696; object-fit: cover; background: #F4ECE2; }
.dh-gmv-karte-text p { display: none; }
.dh-gmv-vorschau { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 28px; border: 1.5px solid #CFA877; border-radius: 40px;
  background: #fff; color: var(--dhp-text, #1A2A6C); font: 600 18px/1.2 'Nunito Sans', system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(90,60,30,.1); }
.dh-gmv-vorschau svg { width: 26px; height: 26px; }
.dh-gmv-vorschau .dh-gmv-m { display: none; }
.dh-gmv-teilen { padding: 26px 24px 20px; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 10px 30px rgba(90,60,30,.1); }
.dh-gmv-h2 { margin: 0 0 16px; font: 700 23px/1.25 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dh-gmv-weg { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; padding: 13px 16px; border: 0; border-radius: 12px; text-align: left;
  font-family: inherit; cursor: pointer; text-decoration: none !important; transition: filter .15s; }
.dh-gmv-weg:hover { filter: brightness(.97); }
.dh-gmv-weg-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; }
.dh-gmv-weg-icon svg { width: 28px; height: 28px; }
.dh-gmv-weg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dh-gmv-weg-text strong { font-size: 18px; font-weight: 700; line-height: 1.25; }
.dh-gmv-weg-text span { font-size: 14.5px; line-height: 1.3; }
.dh-gmv-pfeil { flex: none; }
.dh-gmv-kopieren { background: var(--dhp-gold, #B98A4E); color: #fff; }
.dh-gmv-kopieren .dh-gmv-weg-icon { background: rgba(255,255,255,.2); color: #fff; }
.dh-gmv-wa { background: #E6F3E8; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-wa .dh-gmv-weg-icon { background: #43A85C; color: #fff; border-radius: 50%; }
.dh-gmv-mehr { background: #E8EEF8; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-mehr .dh-gmv-weg-icon { background: #5B8FD6; color: #fff; }
.dh-gmv-pdf { background: #F8E9EA; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-pdf .dh-gmv-weg-icon { background: #fff; color: #C8414B; }
.dh-gmv-pdf .dh-gmv-pfeil { color: #C8414B; }
.dh-gmv-mehrfeld { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #fff; font-size: 14.5px; }
.dh-gmv-mehrfeld[hidden] { display: none; }
.dh-gmv-mehrfeld label { display: block; font-weight: 700; }
.dh-gmv-link { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid #CFA877; border-radius: 8px; font: 400 14px/1.3 ui-monospace, monospace; color: var(--dhp-text, #1A2A6C); background: var(--dhp-papier, #FFFDF9); }
.dh-gmv-mehrfeld p { margin: 10px 0 0; }
.dh-gmv-mehrfeld a { color: var(--dhp-text, #1A2A6C); font-weight: 700; }
.dh-gmv-gut { display: flex; gap: 16px; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: #F7EFE4; }
.dh-gmv-gut-icon { flex: none; width: 44px; height: 44px; color: var(--dhp-gold, #B98A4E); }
.dh-gmv-gut strong { font-size: 17px; }
.dh-gmv-gut p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--dhp-text-dunkel, #1F2340); }
.dh-gmv-danke { position: relative; margin: 24px 0 0; padding-top: 22px; text-align: center; transform: rotate(-3deg); font: 400 34px/1.15 var(--dhp-schrift-hand, 'Allura'), 'Segoe Script', cursive; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmv-danke span { display: block; }
.dh-gmv-danke-herz { width: 26px; height: 26px; margin-top: 8px; color: var(--dhp-akzent, #8E1B3A); fill: var(--dhp-akzent, #8E1B3A); }
.dh-gmv-merk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 40px 0 0; padding: 0; }
.dh-gmv-merk li { display: flex; gap: 14px; padding: 0 24px; border-left: 1px solid #DCC6A8; }
.dh-gmv-merk li:first-child { border-left: 0; }
.dh-gmv-merk-icon { flex: none; width: 40px; height: 40px; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-merk strong { display: block; font-size: 16.5px; color: var(--dhp-text, #1A2A6C); }
.dh-gmv-merk span { display: block; font-size: 14.5px; line-height: 1.4; color: #3B4270; }
.dh-gmv-unten { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; }
.dh-gmv-start { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 280px; padding: 14px 32px; border: 1.5px solid var(--dhp-gold, #B98A4E); border-radius: 40px;
  color: var(--dhp-text, #1A2A6C) !important; font-size: 19px; font-weight: 700; text-decoration: none !important; background: rgba(255,255,255,.6); }
.dh-gmv-start svg { width: 22px; height: 22px; color: var(--dhp-gold, #B98A4E); stroke-width: 2.2; }
.dh-gmv-nochmal { border: 0; background: none; color: #5B6070; font: 400 14.5px/1.3 'Nunito Sans', system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
.dh-gmv-lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(30,20,15,.8); }
.dh-gmv-lb[hidden] { display: none; }
.dh-gmv-lb-innen { position: relative; max-width: min(620px, 100%); max-height: 100%; }
.dh-gmv-lb-innen img { display: block; max-width: 100%; max-height: calc(100vh - 40px); width: auto; height: auto; border-radius: 10px; }
.dh-gmv-lb-zu { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--dhp-text, #1A2A6C); font-size: 26px; line-height: 1; cursor: pointer; }
@media (max-width: 959px) {
  .dh-gmv-kopf { padding: 0 110px; }
  .dh-gmv-h1 { font-size: 40px; }
  .dh-gmv-raster { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
  .dh-gmv-karte { display: flex; align-items: center; gap: 22px; padding: 16px; border-radius: 16px; background: #F3ECE3; text-align: left; }
  .dh-gmv-bild { flex: none; width: 42%; border-width: 3px; }
  .dh-gmv-karte-text p { display: block; margin: 0; font-size: 19px; line-height: 1.35; }
  .dh-gmv-vorschau { margin-top: 14px; padding: 11px 22px; }
  .dh-gmv-vorschau .dh-gmv-m { display: inline; } .dh-gmv-vorschau .dh-gmv-d { display: none; }
  .dh-gmv-merk { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 620px; margin-left: auto; margin-right: auto; }
  .dh-gmv-merk li { border-left: 0; padding: 0; }
}
@media (max-width: 639px) {
  .dh-gmv { padding: 22px 16px 36px; }
  .dh-gmv-freude { top: -6px; right: -4px; font-size: 21px; }
  .dh-gmv-freude-herz { width: 22px; height: 22px; margin-top: 2px; }
  .dh-gmv-kopf { padding: 34px 0 0; }
  .dh-gmv-haken { width: 70px; height: 70px; } .dh-gmv-haken svg { width: 38px; height: 38px; }
  .dh-gmv-h1 { font-size: min(30px, 7vw); }
  .dh-gmv-sub { font-size: 17px; }
  .dh-gmv-raster { margin-top: 20px; gap: 20px; }
  .dh-gmv-karte { gap: 14px; padding: 12px; }
  .dh-gmv-karte-text p { font-size: 17px; }
  .dh-gmv-vorschau { padding: 9px 16px; font-size: 16px; gap: 8px; }
  .dh-gmv-teilen { padding: 0; background: none; box-shadow: none; }
  .dh-gmv-h2 { font: 700 21px/1.25 'Playfair Display', Georgia, serif; }
  .dh-gmv-weg { padding: 12px 14px; gap: 12px; }
  .dh-gmv-weg-text strong { font-size: 16.5px; } .dh-gmv-weg-text span { font-size: 13.5px; }
  .dh-gmv-danke { font-size: min(26px, 6.4vw); }
  .dh-gmv-vorschau { white-space: nowrap; }
  .dh-gmv-karte-text { min-width: 0; }
  .dh-gmv-start { min-width: 0; width: 100%; max-width: 360px; box-sizing: border-box; }
}

/* /erstellen mit Geschenk (Karte 883): Hinweis oben, Premium fest, die anderen Produkte gesperrt, 0,00 € */
.dh-gs-banner { border-radius: 12px; background: #F8E9E6; color: #8E1B3A; font-weight: 700; }
.dh-product-aus { opacity: .45; cursor: not-allowed; }
.dh-gs-fest { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #8E1B3A; }
.dh-product strong s { margin-left: 4px; font-weight: 400; color: #8A8FA0; }
.dh-gme.dh-gme-geschenk { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 40px 20px; text-align: center; }
.dh-gme.dh-gme-geschenk[hidden] { display: none !important; }
.dh-gme-geschenk .dh-gme-info { max-width: 520px; font-size: 18px; }
@media (max-width: 399px) { .dh-gmv-vorschau { white-space: normal; font-size: 15px; padding: 8px 12px; gap: 6px; } .dh-gmv-vorschau svg { width: 20px; height: 20px; flex: none; } .dh-gmv-bild { width: 38%; } }

/* ── Karte 903 (23.09.2026, Martin): Seite 7 mit bis zu 5 Fotos + Text je Foto (docs/mockups/k903/) und Polaroid-Stapel in
   Szene 3. Desktop: links fünf Plätze (Griff = Drag & Drop, Nummer, Vorschaubild, „Text hinzufügen“), rechts Tipp + Editor
   mit Textfeld; unten Zurück / Hinweis / Weiter. Smartphone: Karten mit Textfeld je Foto, Tippen öffnet den Editor. */
.dh-gmp2 .dh-gmp-m { display: none; }
.dh-gmp2 .dh-gmp-innen { padding-bottom: 26px; }
.dh-gmp2 .dh-gmp-sub { margin-bottom: 18px; }
.dh-gmp-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dh-gmp-platz { position: relative; display: grid; grid-template-columns: 20px 96px minmax(0, 1fr) 22px; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; padding: 10px 14px 10px 10px; background: var(--dhp-flaeche-hell, #FCF9F5); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; box-shadow: 0 1px 6px rgba(60,30,20,.04); }
.dh-gmp-platz.dh-gmp-aktiv { border-color: var(--dhp-akzent, #8E1B3A); box-shadow: 0 0 0 1px var(--dhp-akzent, #8E1B3A); }
.dh-gmp-platz.dh-gmp-zieht { opacity: .45; }
.dh-gmp-platz.dh-gmp-ueber { border-color: var(--dhp-akzent, #8E1B3A); background: #F7ECEC; }
.dh-gmp-griff { grid-column: 1; grid-row: 1 / 3; display: flex; color: var(--dhp-akzent, #8E1B3A); opacity: .35; }
.dh-gmp-griff svg { width: 20px; height: 20px; }
.dh-gmp-voll .dh-gmp-griff { opacity: 1; cursor: grab; }
.dh-gmp-nr { position: absolute; left: 28px; top: 5px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--dhp-akzent, #8E1B3A); color: #fff;
  font: 600 15px/30px 'Playfair Display', Georgia, serif; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); pointer-events: none; }
.dh-gmp-wahl { grid-column: 2 / 4; grid-row: 1 / 3; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: start;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dh-gmp-thumb { display: flex; align-items: center; justify-content: center; width: 96px; height: 78px; overflow: hidden; border-radius: 6px; background: #F1E6DE; }
.dh-gmp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dh-gmp-thumb-icon { display: none; }
.dh-gmp-thumb-icon-d { width: 44px; height: 44px; color: #C3B2A6; }
.dh-gmp-titel { padding-top: 6px; min-width: 0; }
.dh-gmp-titel strong { display: block; font: 600 18px/1.25 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-titel small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--dhp-text, #1A2A6C); }
.dh-gmp-voll .dh-gmp-formate { display: none; }
.dh-gmp-textlink { position: relative; z-index: 1; grid-column: 3; grid-row: 2; justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--dhp-akzent, #8E1B3A); cursor: pointer; }
.dh-gmp-textlink svg { flex: 0 0 15px; width: 15px; height: 15px; }
.dh-gmp-textlink-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: italic; color: var(--dhp-text, #1A2A6C); }
.dh-gmp-textlink:hover span { text-decoration: underline; }
.dh-gmp-pfeil { grid-column: 4; grid-row: 1 / 3; width: 22px; height: 22px; color: var(--dhp-akzent, #8E1B3A); pointer-events: none; }
.dh-gmp-x { position: absolute; left: 114px; top: 13px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--dhp-akzent, #8E1B3A); font: 600 18px/24px system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.dh-gmp-zeile-m { display: none; }
.dh-gmp-lade-m { display: none; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 15px; color: #6A6F8A; }
.dh-gmp-laedt .dh-gmp-lade-m { display: flex; }
.dh-gmp-tipp-m { display: none !important; }
.dh-gmp2 .dh-gmp-tipp-d { margin: 0 0 18px; background: var(--dhp-flaeche-hell, #FCF9F5); border: 1px solid var(--dhp-rand, #EADFD3); }
.dh-gmp-tipp-d ul { margin: 8px 0 0; padding: 0; list-style: none; }
.dh-gmp-tipp-d li { font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--dhp-text, #1A2A6C); }
.dh-gmp2 .dh-gmp-leer { flex-direction: column; gap: 4px; margin: 14px; border: 1.5px dashed var(--dhp-rosa, #D9A3AE); border-radius: 8px; text-align: center; }
.dh-gmp-leer-icon { width: 58px; height: 58px; color: #B9AFA8; }
.dh-gmp-leer strong { font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-leer span { font-size: 15px; }
.dh-gmp2 .dh-gmp-werkzeug { visibility: visible; opacity: .45; pointer-events: none; }
.dh-gmp2.dh-gmp-hat .dh-gmp-werkzeug { opacity: 1; pointer-events: auto; }
.dh-gmp-zeile { display: block; margin: 16px 0 0; text-align: left; font-size: 15px; color: var(--dhp-text, #1A2A6C); }
.dh-gmp-zeile textarea { display: block; box-sizing: border-box; width: 100%; min-height: 60px; margin-top: 6px; padding: 10px 12px; border: 1px solid #D9CFC6;
  border-radius: 8px; background: #fff; font: 400 16px/1.4 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text-dunkel, #1F2340); resize: none; }
.dh-gmp-zeile textarea:focus { outline: none; border-color: var(--dhp-akzent, #8E1B3A); box-shadow: 0 0 0 2px rgba(142,27,58,.15); }
.dh-gmp-zeile textarea:disabled { background: #F7F3EF; }
.dh-gmp-zahl { display: block; margin-top: 4px; text-align: right; font-size: 13px; color: var(--dhp-text-leise, #4A5580); }
.dh-gmp2 .dh-gmp-ok { margin-top: 16px; max-width: none; }
.dh-gmp2:not(.dh-gmp-hat) .dh-gmp-ok { background: #D9D4D0; border-color: #D9D4D0; box-shadow: none; pointer-events: none; }
.dh-gmp-ok-icon { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: #2E7D4F; }
.dh-gmp-fuss { position: relative; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center;
  max-width: 1400px; margin: 0 auto; padding: 0 200px 60px 240px; }
.dh-gmp-fuss .dh-gmp-zurueck { display: inline-flex; justify-content: center; }
.dh-gmp-hinweis { display: flex; gap: 14px; align-items: center; justify-self: center; margin: 0; padding: 12px 22px; background: #F5E6D8; border-radius: 10px; font-size: 15px; color: var(--dhp-text, #1A2A6C); }
.dh-gmp-hinweis strong { display: block; font: 600 17px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-hinweis-icon { flex: 0 0 34px; width: 34px; height: 34px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-fuss .dh-gmp-weiter2 { min-width: 260px; font-size: 22px; }
@media (max-width: 1399px) { .dh-gmp-fuss { padding-left: 200px; padding-right: 60px; } }
@media (max-width: 1199px) { .dh-gmp-fuss { max-width: 760px; padding: 0 32px 50px; } .dh-gmp-hinweis { justify-self: stretch; } }
@media (max-width: 959px) {
  .dh-gmp2 .dh-gmp-d { display: none; }
  .dh-gmp2 .dh-gmp-m { display: inline; }
  .dh-gmp-fuss, .dh-gmp2 .dh-gmp-tipp-d { display: none; }
  .dh-gmp-tipp-m { display: flex !important; margin: 16px 0 !important; }
  .dh-gmp-platz { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 14px 14px 12px; }
  .dh-gmp-griff, .dh-gmp-pfeil, .dh-gmp-textlink { display: none; }
  .dh-gmp-nr { left: 8px; top: 8px; width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
  .dh-gmp-wahl { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0 2px; }
  .dh-gmp-thumb { width: auto; height: auto; background: none; }
  .dh-gmp-thumb-icon { display: block; width: 46px; height: 46px; color: var(--dhp-akzent, #8E1B3A); }
  .dh-gmp-thumb-icon-d { display: none; }
  .dh-gmp-titel { padding-top: 0; }
  .dh-gmp-zeile-m { display: block; grid-column: 1; margin-top: 10px; }
  .dh-gmp-zeile-m textarea { display: block; box-sizing: border-box; width: 100%; padding: 9px 12px; border: 1px solid #E3D6CB; border-radius: 8px; background: #fff;
    font: 400 15px/1.4 'Nunito Sans', system-ui, sans-serif; color: var(--dhp-text-dunkel, #1F2340); resize: none; }
  .dh-gmp-zeile-m small { display: block; margin-top: 3px; text-align: right; font-size: 12.5px; color: var(--dhp-text-leise, #4A5580); }
  .dh-gmp-voll { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: 30px auto; column-gap: 12px; }
  .dh-gmp-voll .dh-gmp-wahl { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 0; }
  .dh-gmp-voll .dh-gmp-thumb { width: 124px; height: 104px; border-radius: 8px; }
  .dh-gmp-voll .dh-gmp-titel { padding-top: 2px; }
  .dh-gmp-voll .dh-gmp-zeile-m { position: relative; z-index: 1; grid-column: 2; grid-row: 2; margin-top: 0; }
  .dh-gmp-voll .dh-gmp-zeile-m textarea { min-height: 52px; }
  .dh-gmp-x { left: 110px; top: 18px; }
  .dh-gmp2 .dh-gmp-weiter { display: flex; width: 100%; margin: 4px auto 14px; background: var(--dhp-akzent, #8E1B3A); color: #fff; border: 0; }
  .dh-gmp2 .dh-gmp-klein { text-align: center; }
  .dh-gmp2 .dh-gmp-leer { margin: 10px; }
  .dh-gmp2 .dh-gmp-ok { width: 100%; }
}

/* Szene 3: Polaroid-Stapel (ein Foto = ein Polaroid wie bisher) */
.dh-gms-stapel { position: absolute; left: 7%; top: 4%; z-index: 2; display: grid; width: 64%; }
.dh-gms-stapel > .dh-gms-polaroid { position: relative; left: auto; top: auto; grid-area: 1 / 1; width: 100%; align-self: start;
  transform: rotate(var(--dreh, -4deg)); transition: transform .33s ease, opacity .33s ease; }
.dh-gms-stapel > .dh-gms-polaroid.dh-gms-weg { transform: translateX(var(--weg, 115%)) rotate(calc(var(--dreh, 0deg) * 3)); opacity: 0; }
.dh-gms-mehrere .dh-gms-stapel { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.dh-gms-mehrere .dh-gms-stapel:focus-visible { outline: 2px solid var(--dhp-akzent, #8E1B3A); outline-offset: 6px; }
.dh-gms-stapel-unten { grid-area: 2 / 1; justify-self: start; display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 140%;
  margin-top: 14px; padding: 6px 14px 4px; background: rgba(255,253,249,.9); border-radius: 18px; box-shadow: 0 2px 8px rgba(60,30,15,.18); }
.dh-gms-herzen { display: inline-flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.dh-gms-herzen { align-items: center; gap: 9px; padding: 3px 0; }
/* Karte 906: Punkte statt Herzchen (Rand = noch nicht gesehen, gefüllt = gesehen) */
.dh-gms-herzen li { width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--dhp-akzent, #8E1B3A); border-radius: 50%; transition: background-color .3s; }
.dh-gms-herzen li.gesehen { background: var(--dhp-akzent, #8E1B3A); }
/* Karte 906: Aufkleber rechts neben dem ersten Foto, bis zum ersten Blättern */
.dh-gms-aufkleber { position: absolute; z-index: 10; top: 16%; left: calc(100% - 26px); width: max-content; max-width: 132px; padding: 7px 11px 6px;
  background: #FCE7A6; color: #3B2A24; font: 600 19px/1.05 var(--dhp-schrift-notiz, 'Caveat'), 'Segoe Script', cursive; text-align: center;
  box-shadow: 0 3px 8px rgba(60,30,15,.28); transform: rotate(6deg); animation: dh-aufkleber 2.4s ease-in-out 1s infinite; }
.dh-gms-aufkleber::before { content: ''; position: absolute; left: 50%; top: -7px; width: 38px; height: 13px; margin-left: -19px; background: rgba(255,255,255,.55);
  box-shadow: 0 1px 2px rgba(60,30,15,.12); transform: rotate(-4deg); }
@keyframes dh-aufkleber { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(6deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .dh-gms-aufkleber { animation: none; } }
@media (max-width: 640px) { .dh-gms-aufkleber { max-width: 104px; font-size: 17px; left: calc(100% - 34px); padding: 6px 8px 5px; } }
.dh-gms-zaehler { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dh-gms-wischen { margin: 1px 0 0; font: 500 18px/1.15 var(--dhp-schrift-notiz, 'Caveat'), 'Segoe Script', cursive; color: #5A3A2C; white-space: nowrap; }
.dh-gms-mehrere .dh-gms-bild { margin-top: 60px; }

/* Seite 6: mehrere Fotos als kleine Reihe */
.dh-gmt-foto-mehr .dh-gmt-foto-reihe { flex-direction: column; gap: 14px; }
.dh-gmt-fotos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dh-gmt-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(60,30,20,.18); }
/* Stapel im Fluss statt absolut: lange Handschrift-Zeilen/Herzchen schieben „Weiter“ nach unten statt es zu überdecken */
.dh-gms-deko.dh-gms-mitfoto { display: grid; }
.dh-gms-deko.dh-gms-mitfoto > * { grid-area: 1 / 1; align-self: start; }
.dh-gms-deko.dh-gms-mitfoto .dh-gms-stapel { position: relative; left: auto; top: auto; margin: 4% 0 0 7%; }

/* ── Karte 904 (23.09.2026, Martin): Sprachnachricht + Video (docs/mockups/k904/). Seite 6: Medien-Kasten mit drei Spalten
   Foto / Sprachnachricht / Video (leer = Platzhalter-Polaroid + Knopf, gefüllt = Vorschau mit grünem Haken, Name, Größe,
   ändern/entfernen). Seiten 8/9 (.dh-gmm): Aufnehmen/Hochladen links, „An welcher Stelle …?“ rechts, Deko wie Seite 7.
   Kleiner Audio-Spieler .dh-gma (Seite 6, Vorschau, Szene); Szenen 1–4: .dh-gms-medien unter dem Text. */
.dh-gmt-foto.dh-gmt-mk { padding: 20px 20px 14px; border-color: var(--dhp-rosa, #D9A3AE); background: rgba(252,249,245,.96); }
.dh-gmt-mk-kopf { display: flex; gap: 16px; align-items: flex-start; }
.dh-gmt-mk-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gmt-mk-icon svg { width: 40px; height: 40px; stroke-width: 1.4; }
.dh-gmt-mk-kopf h2 { margin: 4px 0 6px; font: 600 22px/1.25 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-mk-kopf p { margin: 0; font-size: 15px; line-height: 1.45; }
.dh-gmt-mk-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 10px; }
.dh-gmt-mk-spalte { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 0 10px; text-align: center; }
.dh-gmt-mk-spalte + .dh-gmt-mk-spalte { border-left: 1px solid var(--dhp-rand, #EADFD3); }
.dh-gmt-mk-spalte h3 { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 78px; margin: 0; font: 600 17px/1.2 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmt-mk-h3-icon { width: 32px; height: 32px; }
.dh-gmt-mk-platz { width: 100%; max-width: 150px; height: auto; transform: rotate(-2deg); box-shadow: 0 3px 10px rgba(60,30,20,.12); }
.dh-gmt-mk-spalte:nth-child(2) .dh-gmt-mk-platz { transform: rotate(1deg); }
.dh-gmt-mk-spalte:nth-child(3) .dh-gmt-mk-platz { transform: rotate(2.5deg); }
.dh-gmt-mk-add { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; width: 100%; margin-top: auto; padding: 10px 8px; border: 0;
  border-radius: 30px; background: linear-gradient(180deg, var(--dhp-knopf, #A0213F) 0%, var(--dhp-knopf-dunkel, #7A1532) 100%); color: #fff; cursor: pointer; font: 400 15.5px/1.2 'Playfair Display', Georgia, serif; }
.dh-gmt-mk-add svg { flex: none; width: 18px; height: 18px; }
.dh-gmt-mk-add:hover { background: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gmt-mk-formate { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; }
.dh-gmt-mk-formate svg { flex: none; width: 18px; height: 18px; color: #1A4A9C; }
.dh-gmt-mk-vorschau { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; }
.dh-gmt-mk-fotos img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.dh-gmt-mk-stapel::before { content: ''; position: absolute; inset: 0; border-radius: 6px; background: #fff; box-shadow: 0 2px 7px rgba(60,30,20,.2); transform: rotate(5deg); }
.dh-gmt-mk-plus { position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 2px 9px; border-radius: 12px; background: rgba(26,42,108,.85); color: #fff; font-size: 13px; font-weight: 700; }
.dh-gmt-mk-haken { position: absolute; top: -10px; right: -10px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #1F7A3A; }
.dh-gmt-mk-haken svg { display: block; width: 30px; height: 30px; }
.dh-gmt-mk-audio { display: flex; background: #F3EAE3; }
.dh-gmt-mk-video video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: #2A1A1A; }
.dh-gmt-mk-name { margin: 0; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.dh-gmt-mk-name span, .dh-gmt-mk-name small { display: block; }
.dh-gmt-mk-name small { font-size: 13px; color: var(--dhp-text-leise, #4A5580); }
.dh-gmt-mk-bei { display: block; margin-top: -4px; font-size: 12px; line-height: 1.3; color: #6A6F8A; }
.dh-gmt-mk-knoepfe { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.dh-gmt-mk-knoepfe .dh-gmt-knopf { width: 100%; padding: 7px 6px; font-size: 14px; gap: 6px; }
.dh-gmt-mk-knoepfe .dh-gmt-knopf svg { width: 17px; height: 17px; }
@media (max-width: 959px) {
  .dh-gmt-foto.dh-gmt-mk { padding: 14px 14px 12px; background: #FBEDEC; border-color: #E4A9B3; }
  .dh-gmt-mk-icon { width: 52px; height: 52px; }
  .dh-gmt-mk-icon svg { width: 30px; height: 30px; }
  .dh-gmt-mk-kopf h2 { font-size: 19px; }
  .dh-gmt-mk-kopf p { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .dh-gmt-mk-spalten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dh-gmt-mk-spalte { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 6px 14px; padding: 0 0 12px; text-align: left; }
  .dh-gmt-mk-spalte + .dh-gmt-mk-spalte { border-left: 0; border-top: 1px solid #EBC9CF; padding-top: 12px; }
  .dh-gmt-mk-spalte > * { grid-column: 2; }
  .dh-gmt-mk-spalte > .dh-gmt-mk-platz, .dh-gmt-mk-spalte > .dh-gmt-mk-vorschau { grid-column: 1; grid-row: 1 / span 5; }
  .dh-gmt-mk-spalte h3 { flex-direction: row; min-height: 0; gap: 8px; font-size: 16.5px; }
  .dh-gmt-mk-h3-icon { width: 24px; height: 24px; }
  .dh-gmt-mk-platz { max-width: 104px; }
  .dh-gmt-mk-add { margin-top: 4px; }
  .dh-gmt-mk-knoepfe { flex-direction: row; flex-wrap: wrap; }
  .dh-gmt-mk-knoepfe .dh-gmt-knopf { width: auto; flex: 1 1 auto; }
}

/* Audio-Spieler */
.dh-gma { --p: 0%; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; }
.dh-gma-knopf { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--dhp-akzent, #8E1B3A); color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(110,20,48,.25); }
.dh-gma-knopf:hover { background: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gma-knopf svg { width: 22px; height: 22px; }
.dh-gma-play { margin-left: 3px; }
.dh-gma-pause, .dh-gma-laeuft .dh-gma-play { display: none; }
.dh-gma-laeuft .dh-gma-pause { display: block; }
.dh-gma-welle { position: relative; flex: 1 1 auto; min-width: 40px; height: 28px; color: #E2B5BE; }
.dh-gma-welle svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.dh-gma-fort { position: absolute; inset: 0; color: var(--dhp-akzent, #8E1B3A); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.dh-gma-zeit { flex: none; font-size: 12.5px; color: var(--dhp-text-leise, #4A5580); font-variant-numeric: tabular-nums; }
.dh-gma-kasten { flex-direction: column; justify-content: center; gap: 6px; padding: 8px 10px; }
.dh-gma-kasten .dh-gma-welle { flex: none; width: 100%; height: 20px; }
.dh-gma-kasten .dh-gma-zeit { font-size: 11.5px; }

/* Seiten 8/9 */
.dh-gmm-deko-hand3 { left: 110px; bottom: 20px; width: 170px; -webkit-mask-image: radial-gradient(ellipse farthest-side, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse farthest-side, #000 78%, transparent 100%); }
.dh-gmm-innen, .dh-gmm-fuss { position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-width: 1400px; margin: 0 auto; }
.dh-gmm-innen { padding: 34px 60px 18px 240px; }
.dh-gmm .dh-gmp-h1 { font-size: 44px; }
.dh-gmm .dh-gmp-sub { margin-bottom: 18px; }
.dh-gmm-box { padding: 8px 14px 14px; border: 1.5px dashed var(--dhp-rosa, #D9A3AE); border-radius: 12px; background: rgba(252,249,245,.96); }
.dh-gmm-tabs { display: flex; margin: 0 0 14px; border-bottom: 1px solid var(--dhp-rand, #EADFD3); }
.dh-gmm-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px 10px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--dhp-akzent, #8E1B3A); cursor: pointer; font: 600 17px/1.2 'Playfair Display', Georgia, serif; }
.dh-gmm-tab.aktiv { border-bottom-color: var(--dhp-akzent, #8E1B3A); }
.dh-gmm-tab[hidden] { display: none; }
.dh-gmm-tab svg { flex: none; width: 26px; height: 26px; }
.dh-gmm-panel[hidden] { display: none !important; }
.dh-gmm-auf { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.dh-gmm-rec { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px 16px; background: var(--dhp-flaeche-hell, #FCF9F5); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; text-align: center; }
.dh-gmm-mik { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 10px; }
.dh-gmm-welle { flex: 1 1 0; height: 44px; color: #E7B9C2; transition: transform .08s linear; }
.dh-gmm-welle svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.dh-gmm-mik-knopf { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gmm-mik-knopf svg { width: 48px; height: 48px; stroke-width: 1.4; }
.dh-gmm-nimmt .dh-gmm-mik-knopf { animation: dh-gmm-puls 1.4s ease-in-out infinite; }
.dh-gmm-nimmt .dh-gmm-welle { color: var(--dhp-rot, #B01E3C); }
@keyframes dh-gmm-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(176,30,60,.35); } 50% { box-shadow: 0 0 0 16px rgba(176,30,60,0); } }
.dh-gmm-kamera { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 8px; overflow: hidden; border-radius: 8px; background: #2A1A1A; }
.dh-gmm-kamera img, .dh-gmm-kamera video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dh-gmm-kamera [hidden] { display: none; }
.dh-gmm-live { transform: scaleX(-1); }
.dh-gmm-zeit { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.dh-gmm-rec-punkt { display: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #D0203F; animation: dh-gmm-blink 1s steps(2) infinite; }
.dh-gmm-nimmt .dh-gmm-rec-punkt { display: inline-block; }
@keyframes dh-gmm-blink { 50% { opacity: .2; } }
.dh-gmm-max { margin: 0 0 12px; font-size: 15px; }
.dh-gmm button.dh-gmm-start { max-width: 340px; font-size: 21px; padding: 11px 20px; }
.dh-gmm-start svg { flex: none; width: 22px; height: 22px; }
.dh-gmm-start-icon { color: #F4C7D0; }
.dh-gmm-stopp-icon, .dh-gmm-nimmt .dh-gmm-start-icon { display: none; }
.dh-gmm-nimmt .dh-gmm-stopp-icon { display: block; }
.dh-gmm .dh-gmm-tipp { flex-direction: column; gap: 8px; margin: 0; padding: 16px; }
.dh-gmm-tipp p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.dh-gmm-drop small { margin-top: 8px; font-size: 13.5px; color: var(--dhp-text-leise, #4A5580); }
.dh-gmm .dh-gmm-drop button.dh-gme-los { display: flex; margin-top: 10px; max-width: 280px; font-size: 20px; padding: 10px 24px; }
.dh-gmm-vorschau { margin-top: 14px; padding: 14px 16px; background: #F1F6EE; border: 1px solid #9DBF9C; border-radius: 10px; }
.dh-gmm-vorschau[hidden] { display: none; }
.dh-gmm-vs-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #1F5E30; font: 600 17px/1.25 'Playfair Display', Georgia, serif; }
.dh-gmm-vs-haken { flex: none; width: 24px; height: 24px; color: #1F7A3A; }
.dh-gmm-vs-video { display: block; width: 100%; max-height: 380px; border-radius: 8px; background: #111; }
.dh-gmm-vs-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 14px; overflow-wrap: anywhere; }
.dh-gmm-klein { margin: 12px 0 0; }
.dh-gmm-wahl { margin: 0 0 14px; padding: 22px 22px 12px; background: rgba(252,249,245,.97); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 12px; box-shadow: 0 2px 10px rgba(60,30,20,.05); }
.dh-gmm-wahl h2 { margin: 0 0 6px; font: 600 27px/1.2 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmm-wahl > p { margin: 0 0 14px; font-size: 17px; line-height: 1.4; }
.dh-gmm-stellen { list-style: none; margin: 0; padding: 0; }
.dh-gmm-stellen li { margin: 0 0 10px; }
.dh-gmm-stelle { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 10px; cursor: pointer; }
.dh-gmm-stelle:hover { border-color: var(--dhp-rosa, #D9A3AE); }
.dh-gmm-stelle:has(input:checked) { border-color: var(--dhp-akzent, #8E1B3A); background: #FDF6F5; }
.dh-gmm-stelle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dh-gmm-radio { flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 1.5px solid #9A9FB5; border-radius: 50%; background: #fff; }
.dh-gmm-stelle input:checked + .dh-gmm-radio { border: 6px solid var(--dhp-akzent, #8E1B3A); }
.dh-gmm-stelle input:focus-visible + .dh-gmm-radio { outline: 2px solid var(--dhp-akzent, #8E1B3A); outline-offset: 2px; }
.dh-gmm-stelle-icon { flex: none; width: 40px; height: 40px; color: var(--dhp-akzent, #8E1B3A); stroke-width: 1.3; }
.dh-gmm-stelle-t strong { display: block; font: 600 18px/1.25 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmm-stelle-t small { font-size: 14px; line-height: 1.35; }
.dh-gmm-fuss { align-items: start; padding: 8px 60px 90px 240px; }
.dh-gmm-fuss .dh-gmp-zurueck { justify-self: center; }
.dh-gmm-ok-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dh-gmm button.dh-gmm-ok { max-width: 470px; }
.dh-gmm-ok:disabled { cursor: wait; }
.dh-gmm-status { margin: 0; font-size: 15px; }
.dh-gmm-status[hidden], .dh-gmm-fehler[hidden] { display: none; }
.dh-gmm-fehler { margin: 0 !important; text-align: center; }
@media (max-width: 1399px) {
  .dh-gmm-innen { padding-left: 200px; padding-right: 36px; }
  .dh-gmm-fuss { padding-left: 200px; padding-right: 36px; }
  .dh-gmm-deko-hand3 { left: 20px; }
}
@media (max-width: 1199px) {
  .dh-gmm-innen, .dh-gmm-fuss { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; padding: 30px 32px 16px; }
  .dh-gmm-fuss { padding-bottom: 60px; }
  .dh-gmm-ok-box { order: -1; }
  .dh-gmm-deko-hand3 { display: none; }
}
@media (max-width: 959px) {
  .dh-gmm-innen { padding: 18px 16px 10px; max-width: 620px; }
  .dh-gmm-fuss { padding: 6px 16px 40px; max-width: 620px; }
  .dh-gmm .dh-gmp-h1 { font-size: 30px; }
  .dh-gmm-box { padding: 6px 10px 12px; }
  .dh-gmm-tab { gap: 6px; font-size: 15px; }
  .dh-gmm-tab svg { width: 22px; height: 22px; }
  .dh-gmm-auf { grid-template-columns: minmax(0, 1fr); }
  .dh-gmm-mik-knopf { width: 80px; height: 80px; }
  .dh-gmm-wahl { padding: 16px 12px 6px; }
  .dh-gmm-wahl h2 { font-size: 22px; }
  .dh-gmm-wahl > p { font-size: 15.5px; }
  .dh-gmm-stelle { gap: 10px; padding: 10px 12px; }
  .dh-gmm-stelle-icon { width: 30px; height: 30px; }
  .dh-gmm-stelle-t strong { font-size: 16px; }
  .dh-gmm-stelle-t small { font-size: 13px; }
  .dh-gmm button.dh-gmm-ok { font-size: 21px; }
}

/* Szenen 1–4: Sprachnachricht / Video an der gewählten Stelle */
.dh-gms-medien { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 10px; }
.dh-gms-medien-t, .dh-gms-video figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; font: 400 27px/1.2 var(--dhp-schrift-hand, 'Allura'), cursive; color: var(--dhp-akzent, #8E1B3A); }
.dh-gms-medien-t svg, .dh-gms-video figcaption svg { flex: none; width: 20px; height: 20px; }
.dh-gms-audio { padding: 12px 16px 16px; background: rgba(255,255,255,.9); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 14px; }
.dh-gma-szene .dh-gma-knopf { width: 54px; height: 54px; }
.dh-gma-szene .dh-gma-welle { height: 32px; }
.dh-gms-video { margin: 0; padding: 10px 10px 6px; background: #fff; border-radius: 4px; box-shadow: 0 4px 14px rgba(60,30,20,.16); transform: rotate(-1deg); }
.dh-gms-video video { display: block; width: 100%; max-height: 70vh; background: #111; }
.dh-gms-video figcaption { margin: 8px 0 0; }
/* Karte 904 Feinschliff nach Sichtprüfung: Seite 6 rechte Spalte breiter (drei Medien-Spalten), Video-Vorschau fest im 4:3-Rahmen */
@media (min-width: 1200px) {
  .dh-gmt-innen { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); padding-right: 150px; }
}
@media (min-width: 1200px) and (max-width: 1399px) { .dh-gmt-innen { padding-right: 130px; } }
.dh-gmt-mk-spalte { padding: 0 7px; }
.dh-gmt-mk-add { font-size: 15px; white-space: nowrap; }
.dh-gmt-mk-knoepfe .dh-gmt-knopf { font-size: 13.5px; padding: 7px 4px; }
.dh-gmt-mk-video video { position: absolute; inset: 0; }
.dh-gmt-mk-vplay { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(142,27,58,.92); color: #fff; cursor: pointer; }
.dh-gmt-mk-vplay svg { width: 22px; height: 22px; margin-left: 3px; }
.dh-gmt-mk-vplay[hidden] { display: none; }
.dh-gmt-mk-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-gms-medien-t { display: block; text-align: center; }
.dh-gms-medien-t svg { display: inline-block; vertical-align: middle; margin-left: 6px; }
.dh-gms-video { width: fit-content; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.dh-gms-video video { width: auto; max-width: 100%; max-height: 62vh; margin: 0 auto; }
@media (min-width: 1200px) {
  .dh-gmm-innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-left: 240px; }
  .dh-gmm-fuss { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-left: 240px; padding-bottom: 150px; }
  .dh-gmm .dh-gmp-h1 { font-size: 41px; }
  .dh-gmm-tab { font-size: 16px; white-space: nowrap; }
}
.dh-gmm-stelle-t small { display: block; margin-top: 2px; }

/* ── Karte 905 (23.09.2026, Martin): Handy-Entwürfe für Seite 6 und die Seiten 8/9 (docs/mockups/k905/).
   Seite 6 ≤640 px: Foto / Sprachnachricht / Video bleiben drei Spalten nebeneinander — leer als gestrichelte Kachel
   „… hinzufügen (+)“ mit Polaroid im Kopf, gefüllt Vorschau + Haken, Name, Größe, „… ändern“ / „… entfernen“ untereinander.
   Seiten 8/9 ≤959 px: Tipp als eigener Kasten (Audio nach der Stellenwahl, Video davor), kompaktere Stellenwahl,
   Zurück + Übernehmen nebeneinander, Deko-Streifen aus dem Entwurf unten. Desktop unverändert. */
.dh-gmt-mk-pluskreis, .dh-gmt-mk-kopfbild, .dh-gmm-tipp-mobil, .dh-gmm-deko-unten { display: none; }
@media (max-width: 640px) {
  .dh-gmt-mk-kopf { position: relative; }
  .dh-gmt-foto.dh-gmt-mk { padding: 14px 10px 12px; }
  .dh-gmt-mk-kopfbild { display: block; position: absolute; top: -4px; right: 0; width: 70px; height: auto; transform: rotate(4deg); box-shadow: 0 3px 10px rgba(60,30,20,.16); }
  .dh-gmt-mk-kopf:has(.dh-gmt-mk-kopfbild) h2 { padding-right: 72px; }
  .dh-gmt-mk-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 14px -4px 8px; }
  .dh-gmt-mk-spalte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 5px; text-align: center; }
  .dh-gmt-mk-spalte + .dh-gmt-mk-spalte { border-top: 0; border-left: 1px solid #EBC9CF; padding-top: 0; }
  .dh-gmt-mk-spalte h3 { flex-direction: column; gap: 3px; min-height: 0; font-size: 14px; line-height: 1.15; }
  .dh-gmt-mk-h3-icon { width: 22px; height: 22px; }
  /* leer: nur die gestrichelte Kachel (Kopf + Platzhalter-Polaroid stehen schon im Kasten-Kopf) */
  .dh-gmt-mk-spalte:not(.dh-gmt-mk-da) h3, .dh-gmt-mk-platz { display: none; }
  .dh-gmt-mk-spalte:not(.dh-gmt-mk-da) { border-left: 0 !important; padding: 0 4px; }
  .dh-gmt-mk-add { flex-direction: column; gap: 6px; height: 100%; min-height: 104px; margin: 0; padding: 12px 4px 10px; border: 1.5px dashed var(--dhp-rosa, #D9A3AE); border-radius: 8px;
    background: rgba(255,255,255,.55); color: var(--dhp-akzent, #8E1B3A); white-space: normal; font: 600 13.5px/1.2 'Playfair Display', Georgia, serif; }
  .dh-gmt-mk-add:hover { background: #fff; }
  .dh-gmt-mk-add svg { width: 26px; height: 26px; }
  .dh-gmt-mk-pluskreis { display: block; position: relative; width: 22px; height: 22px; margin-top: auto; border: 1.5px solid var(--dhp-akzent, #8E1B3A); border-radius: 50%; }
  .dh-gmt-mk-pluskreis::before, .dh-gmt-mk-pluskreis::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--dhp-akzent, #8E1B3A); }
  .dh-gmt-mk-pluskreis::after { transform: rotate(90deg); }
  /* gefüllt */
  .dh-gmt-mk-haken { top: -8px; right: -6px; width: 22px; height: 22px; }
  .dh-gmt-mk-haken svg { width: 22px; height: 22px; }
  .dh-gmt-mk-plus { left: 4px; bottom: 4px; padding: 1px 6px; font-size: 11px; }
  .dh-gmt-mk-audio .dh-gma-kasten { gap: 3px; padding: 4px 5px; }
  .dh-gmt-mk-audio .dh-gma-knopf { width: 32px; height: 32px; }
  .dh-gmt-mk-audio .dh-gma-knopf svg { width: 16px; height: 16px; }
  .dh-gmt-mk-audio .dh-gma-welle { height: 14px; }
  .dh-gmt-mk-audio .dh-gma-zeit { font-size: 10px; }
  .dh-gmt-mk-vplay { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .dh-gmt-mk-vplay svg { width: 16px; height: 16px; }
  .dh-gmt-mk-name { box-sizing: border-box; width: 100%; font-size: 11.5px; }
  .dh-gmt-mk-name small { font-size: 11px; }
  .dh-gmt-mk-bei { margin-top: -2px; font-size: 10.5px; }
  .dh-gmt-mk-knoepfe { flex-direction: column; gap: 5px; margin-top: auto; }
  .dh-gmt-mk-knoepfe .dh-gmt-knopf { width: 100%; flex: none; gap: 3px; padding: 5px 2px; font-size: 11.5px; line-height: 1.15; white-space: normal; }
  .dh-gmt-mk-knoepfe .dh-gmt-knopf svg { width: 12px; height: 12px; }
  .dh-gmt-mk-formate { font-size: 11.5px; }
}
@media (max-width: 380px) {
  .dh-gmt-mk-knoepfe .dh-gmt-knopf svg { display: none; }
  .dh-gmt-mk-add { font-size: 12.5px; }
  .dh-gmt-mk-kopfbild { width: 60px; }
  .dh-gmt-mk-kopf:has(.dh-gmt-mk-kopfbild) h2 { padding-right: 58px; }
  .dh-gmt-mk-spalte h3 { font-size: 12.5px; }
}
@media (max-width: 959px) {
  .dh-gmm-box { border: 1px solid var(--dhp-rand, #EADFD3); }
  .dh-gmm-tab { font-size: 14.5px; }
  .dh-gmm-auf .dh-gmm-tipp { display: none; }
  .dh-gmm .dh-gmm-tipp-mobil { display: flex; flex-direction: row; gap: 12px; margin: 0 0 14px; padding: 12px 14px; background: #F8E9E4; }
  .dh-gmm-tipp-mobil .dh-gmu-tipp-icon { flex-basis: 26px; width: 26px; height: 26px; margin-top: 2px; }
  .dh-gmm-tipp-mobil strong { font-size: 16px; }
  .dh-gmm-tipp-mobil p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; }
  .dh-gmm-wahl { padding: 14px 10px 4px; background: #FBEFEE; border-color: #F0D6D9; }
  .dh-gmm-wahl h2 { font-size: 20px; }
  .dh-gmm-wahl > p { margin-bottom: 10px; font-size: 14px; }
  .dh-gmm-stellen li { margin-bottom: 7px; }
  .dh-gmm-stelle { gap: 10px; padding: 7px 10px; }
  .dh-gmm-radio { width: 18px; height: 18px; }
  .dh-gmm-stelle input:checked + .dh-gmm-radio { border-width: 5px; }
  .dh-gmm-stelle-icon { width: 28px; height: 28px; }
  .dh-gmm-stelle-t strong { font-size: 14px; }
  .dh-gmm-stelle-t small { font-size: 11.5px; line-height: 1.3; }
  .dh-gmm .dh-gmt-hinweis { margin-bottom: 0; }
  /* Zurück + Übernehmen nebeneinander, Meldungen darüber */
  .dh-gmm-fuss { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; align-items: center; padding-bottom: 10px; }
  .dh-gmm-ok-box { display: contents; }
  .dh-gmm-fehler, .dh-gmm-status { grid-column: 1 / -1; grid-row: 1; }
  .dh-gmm-fuss .dh-gmp-zurueck { display: inline-flex; justify-content: center; align-items: center; gap: 8px; grid-row: 2; min-width: 0; width: 100%; padding: 11px 10px; font-size: 17px; }
  .dh-gmm-fuss .dh-gmm-ok { grid-row: 2; width: 100%; max-width: none; padding: 11px 12px; justify-content: center; gap: 8px; white-space: nowrap; }
  .dh-gmm button.dh-gmm-ok { font-size: 16.5px; }
  .dh-gmm-deko-unten { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
}
@media (max-width: 370px) {
  .dh-gmm-fuss .dh-gmp-zurueck, .dh-gmm button.dh-gmm-ok { font-size: 14.5px; padding-left: 6px; padding-right: 6px; gap: 5px; }
}
@media (min-width: 641px) and (max-width: 959px) {
  .dh-gmm-deko-unten { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 30%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 30%); mask-composite: intersect; }
}

/* ── Karte 937 (24.09.2026, Martin): Änderungsliste nach seinem Test des Erstellprozesses (Desktop) ──
   Gutscheinseite: „(im Wert von 19,80 €)“ schwarz und nicht fett; Danke-Kasten mit Mailadresse, Download-Liste und
   Geschenk-Moment-Hinweis. Seite 6: ohne Herz-/i-Symbol, kleinere Medien-Knöpfe, ohne Dateinamen. Seite 7: „Foto löschen“
   unter dem Bild. Seiten 8/9: Fehler als Popup, Hochformat-Video ganz sichtbar, Knöpfe unter „Wichtiger Hinweis“. */
.dh-gs-gratis .dh-gs-wert { color: #000; font-weight: 400; font-size: 15.5px; }
.dh-gs-d-mail { font-size: 17px; }
.dh-gs-d-mail strong { color: #8E1B3A; overflow-wrap: anywhere; }
.dh-gs-d-tipp { padding: 10px 14px; border-left: 3px solid #D2601A; background: rgba(255,255,255,.6); border-radius: 4px; }
.dh-gs-d-liste { margin: 0 0 16px; padding-left: 22px; }
.dh-gs-d-liste li { margin: 0 0 6px; line-height: 1.45; }
.dh-gs-d-mom-h { margin: 22px 0 6px; font: 600 20px/1.3 'Playfair Display', Georgia, serif; color: #8E1B3A; }
.dh-gs-d-mom { margin: 0; }
.dh-gmt-wer > div:nth-child(2) { padding-left: 4px; }
.dh-gmt-mk-add { font-size: 14px; white-space: normal; line-height: 1.15; padding: 9px 6px; }
.dh-gmp-werkzeug { flex-wrap: wrap; }
.dh-gmp-loeschen { color: var(--dhp-akzent, #8E1B3A) !important; }
.dh-gmm-vs-video { object-fit: contain; }
.dh-gmt-mk-video video { object-fit: contain; background: #111; }
.dh-gms-video video { object-fit: contain; }
.dh-gmm-rechts > .dh-gmm-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; max-width: none; margin: 18px 0 0; padding: 0; }
.dh-gmm-rechts > .dh-gmm-fuss .dh-gmp-zurueck { flex: none; min-width: 0; padding-left: 22px; padding-right: 22px; }
.dh-gmm-rechts > .dh-gmm-fuss .dh-gmm-ok-box { flex: 1 1 240px; min-width: 0; }
.dh-gmm-rechts > .dh-gmm-fuss button.dh-gmm-ok { width: 100%; white-space: nowrap; font-size: 21px; padding-left: 16px; padding-right: 16px; }
.dh-gm-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(30,18,24,.55); }
.dh-gm-popup-box { box-sizing: border-box; width: 100%; max-width: 460px; padding: 26px 26px 22px; border-radius: 14px; background: #fff; border: 2px solid #8E1B3A;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); text-align: center; animation: dh-gm-popup .18s ease-out; }
.dh-gm-popup-icon { width: 46px; height: 46px; color: #C0392B; }
.dh-gm-popup-icon.dh-gm-popup-hinweis { color: #8E1B3A; }   /* Karte 1029: Hinweis, kein Fehler */
.dh-gm-popup-box p { margin: 10px 0 18px; font-size: 18px; line-height: 1.45; color: #1A2A6C; }
.dh-gm-popup-box .dh-gme-los { margin: 0 auto; max-width: 260px; font-size: 19px; }
@keyframes dh-gm-popup { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dh-gm-popup-box { animation: none; } }
@media (max-width: 640px) {
  .dh-gmt-mk-add { font: 600 13.5px/1.2 'Playfair Display', Georgia, serif; padding: 12px 4px 10px; }
  .dh-gmp-loeschen { display: none !important; }
}
@media (max-width: 959px) { .dh-gmp-loeschen { display: none !important; } }

/* ── Karte 938 (24.09.2026, Martin) ─────────────────────────────────────────────────────────────────────────────────────
   Szene 3: Fotos immer groß. Bisher dehnte der Wisch-Hinweis („Zum Weiterblättern …“, nowrap) die Raster-Spalte des Stapels
   auf ~77 % der Deko-Breite — nach dem ersten Blättern verschwand er und das Foto schrumpfte auf 64 %. Jetzt feste 77 %
   (= die große Fassung, die Martin gefällt), Spalte fest, Hinweis bricht notfalls um. */
.dh-gms-deko.dh-gms-mitfoto .dh-gms-stapel { width: 77%; grid-template-columns: minmax(0, 1fr); }
.dh-gms-stapel-unten { max-width: 100%; }
.dh-gms-wischen { white-space: normal; text-align: center; }

/* Sprachnachricht / Video als eigene Szene (#szene-a / #szene-v), Entwürfe docs/mockups/k938/ */
.dh-gms-sa .dh-gms-titel, .dh-gms-sv .dh-gms-titel { font-size: 44px; line-height: 1.08; }
.dh-gms-sa .dh-gms-titel-herz, .dh-gms-sv .dh-gms-titel-herz { width: 30px; height: 30px; }
.dh-gms-medien-sub { margin-top: 10px; font-size: 17px; color: var(--dhp-text, #1A2A6C); }
.dh-gms-medium { margin: 20px 0 18px; }
.dh-gms-audiorahmen { position: relative; padding: 26px 18px 18px; border-radius: 10px; background: var(--dhp-papier, #FFFDF9);
  box-shadow: inset 0 0 0 1px #E3CFA9, inset 0 0 0 7px var(--dhp-papier, #FFFDF9), inset 0 0 0 8px #EAD9BC, 0 6px 18px rgba(60,30,15,.16); }
.dh-gma.dh-gma-gross { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 0; background: none; border: 0; }
.dh-gma-gross .dh-gma-welle { grid-area: 1 / 1; width: 100%; height: 46px; color: #E7A7B4; }
.dh-gma-gross .dh-gma-knopf { grid-area: 1 / 1; align-self: center; z-index: 2; width: 66px; height: 66px; box-shadow: 0 0 0 16px var(--dhp-papier, #FFFDF9), 0 4px 12px rgba(142,27,58,.3); }
.dh-gma-gross .dh-gma-knopf svg { width: 30px; height: 30px; }
.dh-gma-gross .dh-gma-zeit { grid-area: 2 / 1; font-size: 14px; color: var(--dhp-text, #1A2A6C); }
.dh-gms-videorahmen { position: relative; overflow: hidden; border-radius: 14px; background: #1b1310; box-shadow: 0 6px 18px rgba(60,30,15,.25); }
.dh-gms-videorahmen video { display: block; width: 100%; max-height: 62vh; aspect-ratio: 16 / 10; object-fit: contain; background: #1b1310; }
.dh-gms-vplay { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(142,27,58,.94); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.dh-gms-vplay svg { width: 32px; height: 32px; margin-left: 4px; fill: currentColor; }
.dh-gms-vplay[hidden], .dh-gms-vdauer[hidden] { display: none; }
.dh-gms-vdauer { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(20,12,10,.72); color: #fff; font: 600 14px/1.3 'Nunito Sans', system-ui, sans-serif; }
.dh-gms-tipp { gap: 14px; margin: 0 0 20px; padding: 14px 16px; background: #F8E9E4; border-radius: 12px; }
.dh-gms-tipp .dh-gmu-tipp-icon { flex-basis: 28px; width: 28px; height: 28px; margin-top: 2px; }
.dh-gms-tipp strong { font-size: 17px; }
.dh-gms-tipp p { font-size: 14.5px; line-height: 1.45; }
@media (max-width: 639px) { .dh-gms-sa .dh-gms-titel, .dh-gms-sv .dh-gms-titel { font-size: min(44px, 11vw); } }

/* Seite „Dein Geschenk-Moment ist fertig“ (Desktop ≥ 960): kein Vorschau-Knopf (die Karte steht schon groß da, Klick aufs Bild
   öffnet sie weiterhin), Überschrift und Satz darunter je in einer Zeile, „Schön, dass Du Freude schenkst“ kleiner. */
@media (min-width: 960px) {
  .dh-gmv-vorschau { display: none; }
  .dh-gmv-kopf { padding: 0 120px; }
  .dh-gmv-h1 br, .dh-gmv-sub br { display: none; }
  .dh-gmv-h1 { margin-top: 12px; font-size: 44px; white-space: nowrap; }
  .dh-gmv-sub { margin-top: 8px; }
  .dh-gmv-haken { width: 70px; height: 70px; } .dh-gmv-haken svg { width: 38px; height: 38px; }
  .dh-gmv-freude { font-size: 24px; }
  .dh-gmv-freude-herz { width: 24px; height: 24px; margin-top: 4px; }
}
@media (min-width: 960px) and (max-width: 1199px) { .dh-gmv-h1 { font-size: 38px; } .dh-gmv-kopf { padding: 0 105px; } }
.dh-gms-sa .dh-gms-titel { font-size: 37px; }
@media (max-width: 639px) { .dh-gms-sa .dh-gms-titel { font-size: min(37px, 9.4vw); } }

/* ── Karte 940 (24.09.2026, Martin): Sprachnachricht-/Video-Szene mit den weihnachtlichen Elementen seiner Entwürfe (docs/mockups/k938/)
   im Handy-Screen — Girlande oben (Fortschritt liegt als helle Pille darauf), Christbaumschmuck unten, Sprachnachricht im
   Tannenrahmen — und so hoch wie die übrigen Szenen (Desktop ≥ 780 px, Smartphone bildschirmfüllend). */
.dh-gms-sa .dh-gms-karte, .dh-gms-sv .dh-gms-karte { position: relative; display: flex; flex-direction: column; min-height: 750px; padding-bottom: 0; }
.dh-gms-sm-oben { position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 88px; object-fit: cover; object-position: center top; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.dh-gms-sa .dh-gms-fort, .dh-gms-sv .dh-gms-fort { position: relative; z-index: 1; margin: -6px -10px 40px; padding: 6px 10px; border-radius: 20px; background: rgba(251,246,240,.9); }
.dh-gms-sa .dh-gms-titel, .dh-gms-sv .dh-gms-titel { position: relative; z-index: 1; }
.dh-gms-sa .dh-gms-medium, .dh-gms-sv .dh-gms-medium { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 14px 0 18px; }
.dh-gms-sa .dh-gms-audiorahmen { margin: 0 -18px; padding: 0; aspect-ratio: 790 / 500; display: flex; align-items: center; justify-content: center;
  background: var(--dhp-bild-medien-rahmen, url(/images/av/dh-gm-medien-rahmen.webp)) center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; }
.dh-gms-sa .dh-gma.dh-gma-gross { width: 74%; margin-top: 2%; }
.dh-gms-sa .dh-gma-gross .dh-gma-knopf { box-shadow: 0 0 0 14px #F9E6D3, 0 4px 12px rgba(142,27,58,.3); }
.dh-gms-sa .dh-gms-fuss, .dh-gms-sv .dh-gms-fuss { position: relative; z-index: 1; margin-top: 16px; }
.dh-gms-sm-unten { display: block; width: calc(100% + 60px); max-width: none; height: 104px; object-fit: cover; object-position: center bottom; margin: -30px -30px 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%); mask-image: linear-gradient(0deg, #000 50%, transparent 100%); }
@media (max-width: 639px) {
  .dh-gms-sa .dh-gms-karte, .dh-gms-sv .dh-gms-karte { min-height: 710px; min-height: max(710px, 100svh); }
  .dh-gms-sa .dh-gms-audiorahmen { margin: 0 -12px; }
  .dh-gms-sm-unten { width: calc(100% + 44px); margin: -30px -22px 0; }
}
/* Karte 940: Fragen 2–4 freiwillig — leere Antworten/Texte auf Seite 5 und 6 kenntlich (Szene entfällt) */
.dh-gmu-inhalt p.dh-gmu-leer, .dh-gmt-text.dh-gmt-leer { font-style: italic; color: #8A7F7A; }

/* ── Karte 941 (24.09.2026, Martin): Hochformat-Fotos. Editor: Umschalter Querformat / Hochformat über dem Zoom-Regler
   (Handy-Fotos hochkant starten automatisch im Hochformat). Szene 3: Hochformat-Polaroid schmaler (etwa so hoch wie ein
   Querformat-Polaroid), mittig im Stapel; Quer- und Hochformat dürfen im selben Stapel liegen. Vorschaubilder zeigen
   Hochformat-Fotos ganz (contain) statt angeschnitten. */
.dh-gmp-format { display: flex; justify-content: center; gap: 0; width: max-content; margin: 12px auto 0; padding: 3px; border: 1px solid #E3D6CB;
  border-radius: 30px; background: #fff; visibility: hidden; }
.dh-gmp-hat .dh-gmp-format { visibility: visible; }
.dh-gmp-format button { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 16px; border: 0; border-radius: 30px; background: none;
  font: 600 15px/1.2 'Playfair Display', Georgia, serif; color: var(--dhp-text, #1A2A6C); cursor: pointer; }
.dh-gmp-format button svg { width: 18px; height: 18px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmp-format button[aria-pressed="true"] { background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gmp-format button[aria-pressed="true"] svg { color: #fff; }
.dh-gmp-format button:focus-visible { outline: 2px solid var(--dhp-akzent, #8E1B3A); outline-offset: 2px; }
.dh-gmp2 .dh-gmp-format { visibility: visible; opacity: .45; pointer-events: none; }
.dh-gmp2.dh-gmp-hat .dh-gmp-format { opacity: 1; pointer-events: auto; }
@media (max-width: 639px) { .dh-gmp-format button { padding: 7px 13px; font-size: 14px; } }
.dh-gms-polaroid.dh-gms-hoch img { aspect-ratio: 3 / 4; }
.dh-gms-stapel > .dh-gms-polaroid.dh-gms-hoch { width: 62%; justify-self: center; }
.dh-gms-polaroid.dh-gms-hoch figcaption { font-size: 19px; }
img.dh-foto-hoch { object-fit: contain !important; background: #EFE6DC; }

/* Karte 942 (24.09.2026, Martin): Freigabe Kamera/Mikrofon — Erklärung vor der Browser-Abfrage, Hilfe je Gerät */
.dh-gmm button.dh-gmm-zghilfe { display: block; margin: 10px auto 0; padding: 4px 6px; background: none; border: 0; box-shadow: none; color: var(--dhp-akzent, #8E1B3A);
  font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; width: auto; min-height: 0; }
.dh-gmm button.dh-gmm-zghilfe:hover { color: var(--dhp-text, #1A2A6C); }
.dh-gm-popup-box.dh-gm-zg { max-width: 540px; max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); overflow-y: auto; text-align: left; }
.dh-gm-zg .dh-gm-popup-icon { display: block; margin: 0 auto; color: #8E1B3A; }
.dh-gm-zg h2 { margin: 8px 0 6px; font-size: 23px; line-height: 1.25; text-align: center; color: #1A2A6C; }
.dh-gm-popup-box.dh-gm-zg p { margin: 0 0 12px; font-size: 17px; }
.dh-gm-popup-box.dh-gm-zg p.dh-gm-zg-klein { font-size: 15px; color: #444; }
.dh-gm-zg ol { margin: 0 0 12px; padding-left: 24px; font-size: 17px; line-height: 1.45; color: #1A2A6C; }
.dh-gm-zg ol li { margin-bottom: 6px; }
.dh-gm-zg-knoepfe { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.dh-gm-zg-knoepfe .dh-gme-los { width: 100%; max-width: 320px; margin: 0; font-size: 19px; }
.dh-gm-zg-knoepfe .dh-gm-zg-zweit { width: 100%; max-width: 320px; }
@media (max-width: 639px) { .dh-gm-popup-box.dh-gm-zg { padding: 20px 18px 18px; } .dh-gm-zg h2 { font-size: 21px; }
  .dh-gm-popup-box.dh-gm-zg p, .dh-gm-zg ol { font-size: 16px; } }

/* Karte 945 (25.09.2026, Martin): Aufkleber am Desktop nicht mehr vom Kartenrand abgeschnitten; Hinweis „mit jeder App aufnehmen“ */
@media (min-width: 641px) { .dh-gms-aufkleber { left: auto; right: -64px; } }
@media (max-width: 640px) { .dh-gms-aufkleber { left: auto; right: -56px; } }
.dh-gmm-app { grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 14px 16px; background: #FFF4C9; border: 2px solid #E8B93C; border-radius: 10px; text-align: left; }
.dh-gmm-app-icon { flex: 0 0 34px; width: 34px; height: 34px; color: var(--dhp-akzent, #8E1B3A); margin-top: 2px; }
.dh-gmm-app strong { display: block; font: 600 18px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmm-app p { margin: 4px 0 8px; font-size: 15.5px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gmm button.dh-gmm-app-k { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 0; margin: 0; padding: 8px 16px; border: 1.5px solid var(--dhp-akzent, #8E1B3A); border-radius: 30px;
  background: #fff; box-shadow: none; color: var(--dhp-akzent, #8E1B3A); font: 600 16px/1.2 'Playfair Display', Georgia, serif; cursor: pointer; }
.dh-gmm button.dh-gmm-app-k:hover { background: var(--dhp-akzent, #8E1B3A); color: #fff; }
.dh-gmm-app-k svg { width: 18px; height: 18px; }
@media (max-width: 639px) { .dh-gmm-app { gap: 10px; padding: 12px; } .dh-gmm-app-icon { flex-basis: 28px; width: 28px; height: 28px; }
  .dh-gmm-app strong { font-size: 17px; } .dh-gmm-app p { font-size: 15px; } }

/* Karte 945 Paket 4 (25.09.2026): Anlass-/Stimmungswahl am Anfang des Geschenk-Moments (#anlass) — erscheint nur, wenn mehr
   als ein Design-Paket für die Kundschaft sichtbar ist. Rechts das Vorschaubild des gewählten Pakets (erstellen-desktop). */
.dh-gmw .dh-gmw-bild { background-position: center; }
.dh-gmw-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0 0 26px; }
.dh-gmw button.dh-gmw-karte { display: flex; flex-direction: column; padding: 0; margin: 0; border: 2px solid var(--dhp-rand, #EADFD3); border-radius: 14px;
  overflow: hidden; background: var(--dhp-flaeche-hell, #FCF9F5); color: var(--dhp-text-dunkel, #1F2340); box-shadow: none; cursor: pointer; text-align: left;
  font: 600 18px/1.25 'Playfair Display', Georgia, serif; transition: border-color .15s, box-shadow .15s; }
.dh-gmw button.dh-gmw-karte img { display: block; width: 100%; height: 110px; object-fit: cover; }
.dh-gmw button.dh-gmw-karte span { padding: 10px 12px 12px; }
.dh-gmw button.dh-gmw-karte:hover { border-color: var(--dhp-rosa, #D9A3AE); }
.dh-gmw button.dh-gmw-karte.aktiv { border-color: var(--dhp-akzent, #8E1B3A); box-shadow: 0 0 0 2px var(--dhp-akzent, #8E1B3A) inset; }
.dh-gmw button.dh-gmw-karte:focus-visible { outline: 3px solid var(--dhp-gold, #B98A4E); outline-offset: 2px; }
.dh-gmw button.dh-gmw-klein img { height: 76px; }
.dh-gmw button.dh-gmw-klein { font-size: 16px; }
.dh-gmw-h2 { margin: 0 0 12px; font: 600 22px/1.3 'Playfair Display', Georgia, serif; color: var(--dhp-akzent, #8E1B3A); }
.dh-gmw .dh-gmw-weiter[disabled] { opacity: .55; cursor: default; }
@media (max-width: 639px) { .dh-gmw-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dh-gmw button.dh-gmw-karte { font-size: 16px; } .dh-gmw button.dh-gmw-karte img { height: 90px; } .dh-gmw-h2 { font-size: 19px; } }
@media (max-width: 959px) { .dh-gmw .dh-gmf-kopf { min-height: 44px; margin-bottom: 8px; } }

/* Karte 945 Paket 5 (25.09.2026): Design-Paket mit weniger Funktionen — nur die erlaubten Medien-Spalten auf Seite 6 */
.dh-gmt-mk-n2 .dh-gmt-mk-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh-gmt-mk-n1 .dh-gmt-mk-spalten { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-left: auto; margin-right: auto; }
.dh-gmt-foto[hidden] { display: none !important; }
@media (max-width: 640px) {
  /* kürzere Überschrift „Noch persönlicher?“ — der Text darunter würde sonst unter das kleine Polaroid rechts laufen */
  .dh-gmt-mk-n1 .dh-gmt-mk-kopf:has(.dh-gmt-mk-kopfbild) p, .dh-gmt-mk-n2 .dh-gmt-mk-kopf:has(.dh-gmt-mk-kopfbild) p { padding-right: 72px; }
}

/* Karte 945 Paket 6 (25.09.2026): White-Label-Paket mit Astrovitalis-Gutschein — nur „Geschenk-Moment“, eine Spalte */
.dh-gs-art[hidden] { display: none !important; }
.dh-gs-arten.dh-gs-arten-eins { grid-template-columns: 1fr; }

/* Karte 980 (27.09.2026): Farbverlauf der großen Knöpfe je Design-Paket (Farben „knopf“/„knopf-dunkel“; fehlen sie, bleibt das Weinrot) */

/* ── Karte 1033 (30.09.2026, Martin): Seite „Geschenk-Moment" (/geschenk-moment, /en/gift-moment) nach seinem Entwurf in
   8 Abschnitten (docs/mockups/k1033/entwurf.jpg), umgesetzt im Seiten-Design: serifenlos, Überschriften blau mit weinrotem
   Akzent (Weinrot = Farbe des Geschenk-Moments), Kicker wie .dh-p-eyebrow, großzügige Abstände („mit ausreichend Platz,
   sodass es nicht gedrängt aussieht"). Aufbau und Bildherkunft: build_pages.py::page_moment. Präfix .dh-gmi-
   Karte 1198 (13.10.2026, Martin: „wohl des Guten zuviel beim Freiraum"): Abschnitte rücken deutlich zusammen — Innenabstand
   oben/unten 76 → 36 px (Handy 52 → 28), Überschrift → Inhalt 44–54 → 28–32 px, Abschluss-Band 64 → 44 px. Kopf unverändert. */
.dh-gmi-sek { --gmi-rot: #8E1B3A; --gmi-rot-d: #6E1430; --gmi-blau: #1A2A6C; --gmi-text: #3B4266; --gmi-grau: #858AA3;
  --gmi-rosa: #FBEEEF; --gmi-rosa-rand: #F0D4DA; --gmi-rand: #ECE3D8; color: var(--gmi-text); }
.uk-section.dh-gmi-sek { padding-top: 36px; padding-bottom: 36px; }
.uk-section.dh-gmi-sek-creme { background: #FBF6F0; }
.uk-section.dh-gmi-sek-mehr, .uk-section.dh-gmi-sek-weiss { background: #FFFFFF; }
.dh-gmi-sek-hero .uk-panel, .dh-gmi-sek-ende .uk-panel { position: static; }
.dh-gmi-h1, .dh-gmi-h2, .dh-gmi-sek h3 { font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--gmi-blau); }
.dh-gmi-h1 { margin: 0 0 22px; font-size: clamp(2.05rem, 3.5vw, 3.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.dh-gmi-h2 { margin: 0 0 18px; font-size: clamp(1.75rem, 2.7vw, 2.45rem); font-weight: 800; line-height: 1.16; letter-spacing: -.005em; }
.dh-gmi-akzent { color: var(--gmi-rot); }
.dh-gmi-mitte { text-align: center; justify-content: center; }
.dh-gmi-schmal { max-width: 40em; margin-left: auto; margin-right: auto; }
.dh-gmi-eyebrow { color: var(--gmi-rot); }
.dh-gmi-eyebrow::before, .dh-gmi-eyebrow::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E1B3A'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E"),
                    linear-gradient(#8E1B3A, #8E1B3A); }
.dh-gmi-lead { margin: 0 0 30px; max-width: 33em; font-size: 1.2rem; line-height: 1.65; color: var(--gmi-text); }
.dh-gmi-p { margin: 0; max-width: 36em; font-size: 1.1rem; line-height: 1.7; color: var(--gmi-text); }
.dh-gmi-p.dh-gmi-mitte { margin-left: auto; margin-right: auto; }
.dh-gmi-ic { width: 24px; height: 24px; flex: none; }
.dh-gmi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 999px;
  background: linear-gradient(180deg, #A0213F, #7A1532); color: #FFFFFF !important; font: 700 1.06rem/1.25 'Nunito Sans', system-ui, sans-serif;
  text-decoration: none !important; box-shadow: 0 10px 22px rgba(122, 21, 50, .24); transition: transform .2s, box-shadow .2s, filter .2s; }
.dh-gmi-btn:hover, .dh-gmi-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 14px 28px rgba(122, 21, 50, .3); }
.dh-gmi-pfeil { width: 20px; height: 20px; flex: none; }

/* 1 Kopf */
.uk-section.dh-gmi-sek-hero { position: relative; overflow: hidden; padding-top: 44px; padding-bottom: 56px;
  background: linear-gradient(180deg, #F8F3EB 0%, #F4EDE4 58%, #EFE6DA 100%); }
.dh-gmi-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.dh-gmi-merkmale { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 540px; margin: 40px 0 0; padding: 0; }
.dh-gmi-merkmale li { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-size: .93rem; line-height: 1.3; color: var(--gmi-blau); }
.dh-gmi-merkmale .dh-gmi-ic { width: 32px; height: 32px; color: var(--gmi-rot); }
.dh-gmi-hero-bild { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 1 / 1.02; border-radius: 26px; overflow: hidden;
  background: #6B4A33 url(/images/av/dh-gmi-hero-bg.webp) 50% 50% / cover no-repeat; box-shadow: 0 22px 50px rgba(80, 45, 20, .18); }
.dh-gmi-hero-bild.dh-gmi-hero-bild-en { background-image: url(/images/av/dh-gmi-hero-bg-en.webp); }
.dh-gmi-handy { position: absolute; z-index: 2; left: 53%; top: 50%; height: 88%; width: auto; max-width: none; transform: translate(-50%, -50%);
  filter: drop-shadow(0 24px 30px rgba(35, 15, 5, .45)); }
.dh-gmi-karte { position: absolute; z-index: 1; left: 5%; bottom: 7%; width: 29%; height: auto; border-radius: 5px; transform: rotate(-8deg);
  box-shadow: 0 16px 30px rgba(35, 15, 5, .4); }
@media (min-width: 960px) {
  .dh-gmi-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
}
@media (min-width: 1200px) {
  .uk-section.dh-gmi-sek-hero { padding: 0; }
  .dh-gmi-hero { min-height: clamp(600px, 44vw, 760px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dh-gmi-hero-text { padding: 64px 24px 64px 0; }
  .dh-gmi-hero-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%); mask-image: linear-gradient(90deg, transparent 0, #000 13%); }
  .dh-gmi-handy { height: 84%; left: 55%; }
  .dh-gmi-karte { left: 13%; width: 25%; max-width: 250px; }
}

/* 2 Mehr als ein Gutschein */
.dh-gmi-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.dh-gmi-zwei-bild img { display: block; width: 100%; height: auto; max-height: 580px; object-fit: cover; border-radius: 26px; box-shadow: 0 20px 44px rgba(80, 45, 20, .15); }
.dh-gmi-hand { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font: 400 2.1rem/1.1 'Allura', cursive; color: var(--gmi-rot); }
.dh-gmi-hand-herz { width: 26px; height: 26px; flex: none; }
@media (min-width: 960px) { .dh-gmi-zwei { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 80px; } }

/* 3 Unterschied */
.dh-gmi-vergleich { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 1020px; margin: 28px auto 0; }
.dh-gmi-vkarte { padding: 32px 34px 30px; border: 1px solid var(--gmi-rand); border-radius: 24px; background: #FFFFFF; }
.dh-gmi-vkarte.dh-gmi-mit { background: var(--gmi-rosa); border-color: var(--gmi-rosa-rand); box-shadow: 0 18px 40px rgba(142, 27, 58, .1); }
.dh-gmi-vkopf { display: flex; align-items: center; gap: 18px; min-height: 84px; margin-bottom: 18px; }
.dh-gmi-vkopf h3 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.dh-gmi-mit .dh-gmi-vkopf h3 { color: var(--gmi-rot); }
.dh-gmi-umschlag { flex: none; width: 96px; height: auto; }
.dh-gmi-vsymbol { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #FFFFFF; color: var(--gmi-rot);
  box-shadow: 0 8px 20px rgba(142, 27, 58, .14); }
.dh-gmi-vsymbol .dh-gmi-ic { width: 32px; height: 32px; }
.dh-gmi-vkarte ul { list-style: none; margin: 0; padding: 0; }
.dh-gmi-vkarte li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 1.06rem; line-height: 1.45; }
.dh-gmi-vkarte li + li { border-top: 1px solid rgba(26, 42, 108, .07); }
.dh-gmi-haken { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 3px; box-sizing: border-box; border-radius: 50%; stroke-width: 2.4; }
.dh-gmi-klassisch li { color: #7C8198; }
.dh-gmi-klassisch .dh-gmi-haken { background: #E7E2DB; color: #948C81; }
.dh-gmi-mit li { color: var(--gmi-blau); }
.dh-gmi-mit .dh-gmi-haken { background: var(--gmi-rot); color: #FFFFFF; }
.dh-gmi-mit li.dh-gmi-letzter { font-weight: 700; color: var(--gmi-rot-d); }
@media (min-width: 768px) { .dh-gmi-vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }

/* 4 Beispiel Weihnachten */
#beispiel { scroll-margin-top: 100px; }
.dh-gmi-erleben { margin: 22px 0 0; text-align: center; }
.dh-gmi-erleben a[hidden] { display: none; }
.dh-gmi-reihe { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; max-width: 1180px; margin: 32px auto 0; padding: 0; }
.dh-gmi-reihe li { position: relative; }
.dh-gmi-reihe a { display: block; transition: transform .25s; }
.dh-gmi-reihe a:hover, .dh-gmi-reihe a:focus-visible { transform: translateY(-5px); }
.dh-gmi-reihe img { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; filter: drop-shadow(0 14px 20px rgba(60, 30, 15, .22)); }
.dh-gmi-reihe p { display: flex; align-items: flex-start; justify-content: center; gap: 9px; margin: 18px 0 0; font-size: 1rem; line-height: 1.3; color: var(--gmi-blau); }
.dh-gmi-reihe strong { font-weight: 700; text-align: left; }
.dh-gmi-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gmi-rot); color: #FFFFFF; font: 700 .85rem/26px 'Nunito Sans', system-ui, sans-serif; text-align: center; }
.dh-gmi-tipp { margin: 20px 0 0; text-align: center; font-size: .93rem; color: var(--gmi-grau); }
@media (min-width: 640px) { .dh-gmi-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; } }
@media (min-width: 1100px) {
  .dh-gmi-reihe { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 34px; }
  .dh-gmi-reihe li:not(:last-child)::after { content: ""; position: absolute; top: 40%; right: -28px; width: 22px; height: 22px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E1B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* 5 Schreib-Assistent (Illustration, nicht bedienbar) */
.dh-gmi-sa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.dh-gmi-sa-bild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.dh-gmi-sa-karte { padding: 24px; border: 1px solid var(--gmi-rand); border-radius: 22px; background: #FFFFFF; box-shadow: 0 14px 34px rgba(60, 40, 20, .08); font-size: .96rem; }
.dh-gmi-sa-label { margin: 0 0 9px; font-size: .9rem; font-weight: 700; color: var(--gmi-blau); }
.dh-gmi-sa-feld { min-height: 92px; padding: 14px 16px; border: 1px solid #E3D9CD; border-radius: 12px; background: #FFFDFB; line-height: 1.55; }
.dh-gmi-sa-zahl { margin: 6px 0 16px; text-align: right; font-size: .8rem; color: var(--gmi-grau); }
.dh-gmi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.dh-gmi-chip { padding: 7px 13px; border: 1px solid #E3D9CD; border-radius: 999px; background: #FFFFFF; font-size: .82rem; line-height: 1.2; }
.dh-gmi-chip.dh-gmi-chip-an { border-color: var(--gmi-rot); background: var(--gmi-rot); color: #FFFFFF; font-weight: 700; }
.dh-gmi-btn.dh-gmi-btn-klein { display: flex; width: 100%; box-sizing: border-box; padding: 12px 18px; font-size: .95rem; cursor: default; box-shadow: none; transform: none; filter: none; }
.dh-gmi-sa-pfeil { display: flex; justify-content: center; color: var(--gmi-rot); }
.dh-gmi-sa-pfeil .dh-gmi-pfeil { width: 34px; height: 34px; transform: rotate(90deg); }
.dh-gmi-sa-karte.dh-gmi-sa-aus { border-color: var(--gmi-rosa-rand); background: var(--gmi-rosa); }
.dh-gmi-sa-vkopf { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .92rem; font-weight: 700; color: var(--gmi-rot); }
.dh-gmi-sa-vkopf .dh-gmi-ic { width: 20px; height: 20px; }
.dh-gmi-sa-vorschlag { padding: 16px 18px; border-radius: 12px; background: #FFFFFF; line-height: 1.6; color: var(--gmi-blau); }
.dh-gmi-sa-info { display: flex; gap: 10px; margin: 16px 0 0; font-size: .87rem; line-height: 1.5; }
.dh-gmi-sa-info .dh-gmi-ic { width: 21px; height: 21px; color: var(--gmi-rot); }
.dh-gmi-sa-info strong { display: block; color: var(--gmi-rot); }
@media (min-width: 700px) {
  .dh-gmi-sa-bild { grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); gap: 10px; }
  .dh-gmi-sa-pfeil .dh-gmi-pfeil { transform: none; }
}
@media (min-width: 1100px) { .dh-gmi-sa { grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 56px; } }

/* 6 Ganz nach Deinen Wünschen */
.dh-gmi-kacheln { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1100px; margin: 28px auto 0; padding: 0; }
.dh-gmi-kacheln li { display: flex; flex: 0 1 196px; flex-direction: column; align-items: center; gap: 4px; padding: 28px 14px 24px; box-sizing: border-box;
  border: 1px solid var(--gmi-rand); border-radius: 22px; background: #FFFFFF; box-shadow: 0 12px 28px rgba(60, 40, 20, .06); text-align: center; }
.dh-gmi-kreis { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 12px; border-radius: 50%; background: var(--gmi-rosa); color: var(--gmi-rot); }
.dh-gmi-kreis .dh-gmi-ic { width: 31px; height: 31px; }
.dh-gmi-kacheln strong { font-size: 1rem; line-height: 1.3; color: var(--gmi-blau); }
.dh-gmi-kacheln small { font-size: .86rem; color: var(--gmi-grau); }
@media (max-width: 639px) { .dh-gmi-kacheln { gap: 12px; } .dh-gmi-kacheln li { flex-basis: calc(50% - 6px); padding: 22px 10px 18px; } }

/* 7 Warum anders */
.dh-gmi-warum { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 28px 0 0; padding: 0; }
.dh-gmi-warum li { display: flex; overflow: hidden; border-radius: 22px; background: #FFFFFF; box-shadow: 0 14px 32px rgba(60, 40, 20, .08); }
.dh-gmi-warum img { display: block; flex: none; width: 38%; height: auto; object-fit: cover; }
.dh-gmi-warum div { padding: 18px 18px 20px; }
.dh-gmi-warum strong { display: block; margin-bottom: 8px; font-size: 1.05rem; line-height: 1.3; color: var(--gmi-blau); }
.dh-gmi-warum span { display: block; font-size: .95rem; line-height: 1.55; }
@media (min-width: 640px) {
  .dh-gmi-warum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .dh-gmi-warum li { flex-direction: column; }
  .dh-gmi-warum img { width: 100%; aspect-ratio: 4 / 3; }
  .dh-gmi-warum div { padding: 20px 20px 24px; }
}
@media (min-width: 960px) { .dh-gmi-warum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dh-gmi-warum { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }

/* 8 Abschluss */
.uk-section.dh-gmi-sek-ende { position: relative; overflow: hidden; padding: 0; background: linear-gradient(90deg, #F3E9DC 0%, #FBF6F0 60%); }
.dh-gmi-sek-ende > .uk-container { max-width: none; padding: 0; }
.dh-gmi-sek-ende .uk-grid { margin-left: 0; } .dh-gmi-sek-ende .uk-grid > * { padding-left: 0; }
.dh-gmi-ende-bild { display: block; width: 100%; height: 240px; object-fit: cover; object-position: 30% 62%;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.dh-gmi-ende-inhalt { display: grid; gap: 24px; max-width: 1080px; margin: 0 auto; padding: 8px 24px 36px; text-align: center; }
.dh-gmi-ende-k { margin: 0 0 12px; font-size: .82rem; font-weight: 800; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase; color: #9A6A45; }
.dh-gmi-ende .dh-gmi-h2 { margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
.dh-gmi-ende-cta p { margin: 0 0 20px; font-size: 1.15rem; line-height: 1.45; color: var(--gmi-blau); }
.dh-gmi-ende-cta strong { display: block; margin-top: 4px; font-size: 1.32rem; color: var(--gmi-rot); }
@media (min-width: 960px) {
  .dh-gmi-ende { position: relative; min-height: 320px; display: flex; align-items: center; }
  .dh-gmi-ende-bild { position: absolute; top: 0; left: 0; bottom: 0; width: 30vw; height: 100%; object-position: 40% 60%;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
  .dh-gmi-ende-inhalt { position: relative; align-items: center; gap: 26px; width: 100%; max-width: none;
    margin: 0; padding: 44px 40px 44px 32vw; text-align: left; }
}
@media (min-width: 1200px) {
  .dh-gmi-ende-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 44px max(40px, calc((100vw - 1200px) / 2)) 44px 30vw; }
  .dh-gmi-ende-satz { padding-right: 40px; }
  .dh-gmi-ende-cta { padding-left: 40px; border-left: 1px solid #E2D2C2; }
}
@media (min-width: 1320px) { .dh-gmi-ende-cta .dh-gmi-btn { white-space: nowrap; } }
@media (max-width: 639px) {
  .uk-section.dh-gmi-sek { padding-top: 28px; padding-bottom: 28px; }
  .uk-section.dh-gmi-sek-hero { padding-top: 28px; padding-bottom: 44px; }
  .uk-section.dh-gmi-sek-ende { padding: 0; }
  .dh-gmi-lead { font-size: 1.08rem; }
  .dh-gmi-p { font-size: 1.03rem; }
  .dh-gmi-merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .dh-gmi-vkarte { padding: 26px 22px 24px; }
  .dh-gmi-btn { padding: 14px 24px; font-size: 1rem; }
}
/* ── Karte 1035 (30.09.2026, Martin): Geschenk-Moment-Seite auf dem Handy wie die übrigen Seiten — erst das Bild als
   Eye-Catcher, danach der am Desktop links daneben stehende Text. Gilt für den Kopf und „Mehr als ein Gutschein", solange
   die Abschnitte einspaltig sind (< 960 px). Der Schreib-Assistent bleibt Text → Beispiel: die nachgebaute Eingabe ist
   ohne die Überschrift davor nicht verständlich und ist kein Bild im eigentlichen Sinn. */
@media (max-width: 959px) {
  .dh-gmi-hero-bild, .dh-gmi-zwei-bild { order: -1; }
}

/* ── Karte 1079 (04.10.2026): Kopf der Seite „Über uns“ / „About us“ ─────────────────────
   Martin (WhatsApp 04.10. 12:23): „Bitte auf der Seite …/ueber-uns den Inhalt von
   https://astrovitalis.astrolix.de/ueber-uns übernehmen – bis auf den Absatz ‚Wer hinter
   dieser Seite steht‘.“ Inhalt von dort: Bergweg-Foto, Handschrift im Himmel, Leitsatz unter
   dem Zitat, Porträt im Abschnitt Hensel (Artikel 43/44, nur in der DB, Skript
   scripts/k1079_ueber_uns.php). Bauform wie die übrigen Köpfe dieser Site (.dh-hero: Creme-
   Verlauf, randloses Foto in der rechten Bildschirmhälfte, Zierlinie .dh-hero-orn statt der
   goldenen av-trenner von astrovitalis); Farbaufteilung wie dort und wie beim FAQ-Kopf:
   H1 blau, Unterzeile orange.
   Handschrift: auf astrovitalis Caveat als variable Schrift (400–700) in 600. Die Dateien
   liegen hier unter eigenem Familiennamen, damit die vorhandene Caveat 500 (Geschenk-Moment,
   Polaroids) unberührt bleibt — bei gleichem Namen entschiede die Reihenfolge der @font-face.
   Bezugsrahmen: UIkit gibt jedem .uk-panel position: relative. Das Text-Element (Klasse
   dh-ueber-hand) wird deshalb selbst über die ganze Bildspalte gelegt; die Schrift steht
   darin oben rechts im Himmel über dem Wegweiser (Maße wie astrovitalis, Karte 843).
   Sektionshöhe = Seitenverhältnis des Fotos: 1090 x 819 = 1,331:1 → 50 / 1,331 = 37,6vw,
   damit es in der rechten Bildschirmhälfte unbeschnitten steht (bei 1440 px 720 x 541).
   Unter 960 px liegt das Foto über dem Text und ist niedriger — die Handschrift würde ins
   Motiv rutschen, sie ist dort aus (wie auf astrovitalis). */
@font-face { font-family: 'DH Caveat Var'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/dh/fonts/caveat-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DH Caveat Var'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/dh/fonts/caveat-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.dh-hero.dh-hero-ueber .av-h1 { color: #1A2A6C; }
.dh-hero.dh-hero-ueber .av-h1-sub { color: #E8731A; }
.dh-hero.dh-hero-ueber .dh-hero-orn { margin-top: 28px; }
/* Ab 1200 px ist die Bildspalte ohnehin absolut gesetzt (.dh-hero-Regeln oben) — relative
   nur darunter, sonst überschriebe diese spätere Regel das absolute der breiten Fassung. */
@media (max-width: 1199px) { .dh-hero-ueber .dh-hero-bild { position: relative; } }
.dh-hero-ueber .dh-hero-bild > .dh-ueber-hand { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  height: auto; margin: 0; pointer-events: none; }
.dh-ueber-schrift { position: absolute; top: 6%; right: 5%; width: 30%; max-width: 300px; z-index: 1;
  font-family: 'DH Caveat Var', 'Caveat', 'Segoe Script', cursive; font-weight: 600;
  font-size: clamp(20px, 2.1vw, 32px); line-height: 1.18; color: #1A2A6C; text-align: left;
  transform: rotate(-5deg); transform-origin: left center; }
.dh-ueber-schrift img { display: block; margin: 4px 0 0 22%; }
@media (min-width: 1200px) {
  .uk-section.dh-hero.dh-hero-ueber { min-height: clamp(460px, 37.6vw, 760px); }
  .dh-hero.dh-hero-ueber .dh-hero-bild img { object-position: center 40%; }
}
@media (max-width: 959px) {
  .dh-hero-ueber .dh-hero-bild > .dh-ueber-hand { display: none; }
}

/* ── Karte 1081 (04.10.2026): Pflicht-Häkchen Widerrufsrecht direkt über „Jetzt kaufen“ ─────────
   Wortlaut von Martin; Häkchen links, Text daneben, etwas kleiner als der Fließtext. */
#dh-rechner .dh-widerruf label { display: flex; gap: .6em; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
#dh-rechner .dh-widerruf .uk-checkbox { flex: none; margin-top: .15em; }

/* ── Karte 1084 (04.10.2026): Hinweis unter dem Textfeld der Fragen 2–4 (Martin) ───────────────────
   „Wenn Du hier nichts einträgst, wird diese Seite … nicht angezeigt“ — links neben dem Zeichenzähler,
   kleiner als der Fließtext, aber in Textfarbe mit Info-Symbol (gut wahrnehmbar). */
.dh-gmf-unter { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 10px 2px 20px; }
.dh-gmf-unter .dh-gmf-zaehler { flex: none; margin: 0; line-height: 1.45; }
.dh-gmf-leerhinweis { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gmf-leerhinweis-icon { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--dhp-akzent, #8E1B3A); }
@media (max-width: 959px) {
  .dh-gmf-unter { margin-bottom: 18px; }
}
@media (max-width: 639px) {
  .dh-gmf-unter { gap: 12px; }
  .dh-gmf-leerhinweis { font-size: 14px; }
  .dh-gmf-leerhinweis-icon { width: 17px; height: 17px; }
}

/* ── Karte 1086 (05.10.2026): Anlass/Design bis zur Fertigstellung ändern (Martin) ─────────────────
   Hinweis auf der Anlass-Seite bei begonnenem Moment; Link „Anlass oder Design ändern“ im Willkommen-zurück-Kasten. */
.dh-gmw-behalten { display: flex; gap: 8px; align-items: flex-start; margin: -14px 0 24px; font-size: 16px; line-height: 1.45; color: var(--dhp-text, #1A2A6C); }
.dh-gmw-behalten-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--dhp-akzent, #8E1B3A); }
.dh-gme-info .dh-gme-design { margin: 10px 0 0; }
.dh-gme-design-knopf { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--dhp-akzent, #8E1B3A); text-align: left; }
.dh-gme-design-knopf u { text-decoration: underline; text-underline-offset: 3px; }
.dh-gme-design-knopf span { font-size: 22px; line-height: 1; }
.dh-gme-design-knopf:hover { color: var(--dhp-akzent-dunkel, #6E1430); }
.dh-gme-design-icon { flex: none; width: 22px; height: 22px; }
@media (max-width: 639px) {
  .dh-gmw-behalten { font-size: 14.5px; margin-top: -10px; }
  .dh-gmw-behalten-icon { width: 18px; height: 18px; }
}

/* ── Karte 1098 (05.10.2026, Martin): „Passt alles?" — auf großen Bildschirmen lag der Schreib-Assistent samt Knopf unterhalb des
   sichtbaren Bereichs. Desktop (ab 960 px): der Block .dh-gmu-aktion (Schreib-Assistent, Knopf, Sicherheitshinweis) steht als Karte
   in der rechten Spalte über dem Bild, auf Höhe der Angaben-Liste (breite Spalte: etwas tiefer, damit der Bild-Schriftzug oben frei
   bleibt); die linke Spalte wird dadurch kürzer, das Bild passt besser.
   gutschein.js (baueUebersicht/platziere) hängt den Block um; am Handy bleibt er unverändert unter dem Tipp. */
@media (min-width: 960px) {
  .dh-gmf-5 .dh-gmf-rechts { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dh-gmf-5 .dh-gmf-bild { grid-area: 1 / 1; }
  .dh-gmf-5 .dh-gmf-merk { grid-area: 2 / 1; }
  .dh-gmf-5 .dh-gmu-aktion { grid-area: 1 / 1; position: relative; z-index: 1; align-self: start; justify-self: center; box-sizing: border-box;
    width: calc(100% - 80px); max-width: 600px; margin: max(251px, 16.5vw) 0 36px; padding: 22px 26px 14px;
    background: rgba(252,249,245,.96); border: 1px solid var(--dhp-rand, #EADFD3); border-radius: 14px; box-shadow: 0 16px 44px rgba(24,14,6,.3); }
  .dh-gmf-5 .dh-gmu-aktion .dh-gsa { margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; background: none; }
  .dh-gmf-5 .dh-gmu-aktion .dh-gme-sicher { margin-bottom: 0; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .dh-gmf-5 .dh-gmu-aktion { width: calc(100% - 48px); margin-top: 270px; padding: 18px 18px 12px; }
  .dh-gmf-5 .dh-gmu-aktion .dh-gsa-wahl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ── Stoerer „inkl. 2 Horoskopen nach Wahl auf astrovitalis.de" (Karte 1104/1105, Martin 06.10.2026) ──
   Markup build_pages.py::stoerer — zweites Element der Bildspalte (.dh-hero-bild-stoerer) im Kopf von
   /erstellen („Premium inkl.", die Gutscheine gibt es dort nur zum Premium-Paket) und /geschenk, DE+EN.
   Runder Aufkleber in Hausorange, leicht schraeg, weisser Innenring. Lage in % der Bildspalte — die
   Spalte ist immer genau das Foto (ab 1200 px fuellt es die rechte Haelfte, darunter steht es in
   natuerlichem Seitenverhaeltnis), die Prozente treffen also bei jeder Breite dieselbe Bildstelle.
   /geschenk: rechts auf Pflanze und Kartenrand, UNTER dem Kartentitel (der steht bei 18–25 % der
   Bildhoehe, darf nicht verdeckt werden). /erstellen: oben rechts vor dem Fenster, neben dem Tablet.
   Groesse ueber --d, alle Schriftgroessen in em daraus — so bleibt die Aufteilung bei jeder Groesse.
   Ab 1200 px ist die Spalte schon absolut positioniert; darunter braucht sie position: relative
   (nur dort, sonst wuerde die Regel das absolute der Desktop-Fassung ueberschreiben). */
@media (max-width: 1199px) { .dh-hero .dh-hero-bild-stoerer { position: relative; } }
.dh-hero .dh-hero-bild > .dh-stoerer-el { --d: clamp(118px, 9.4vw, 156px); position: absolute; z-index: 2;
  height: auto; margin: 0; }
.dh-hero.dh-hero-gutschein .dh-stoerer-el { top: 27%; right: 1.5%; }
.dh-hero.dh-hero-erstellen .dh-stoerer-el { top: 5%; right: 2%; }
.dh-stoerer { width: var(--d); height: var(--d); margin: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%; padding: 0 .5em; font-size: calc(var(--d) * .084); line-height: 1.1; color: #FFFFFF;
  background: radial-gradient(circle at 32% 28%, #F49A4C 0, #E8731A 48%, #CF5E0E 100%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 10px 22px rgba(60,30,5,.32), 0 2px 5px rgba(60,30,5,.25);
  transform: rotate(-9deg); position: relative; text-shadow: 0 1px 1px rgba(120,50,0,.35);
  animation: dh-stoerer-ein .55s cubic-bezier(.2,1.4,.4,1) .5s both; }
.dh-stoerer::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(255,255,255,.75); border-radius: 50%; }
.dh-stoerer > * { display: block; position: relative; white-space: nowrap; }
.dh-stoerer-1 { font-size: 1.12em; font-weight: 600; }
.dh-stoerer-2 { font-size: 1.4em; font-weight: 800; letter-spacing: -.01em; margin: .06em 0 .08em; }
.dh-stoerer-3 { font-size: 1.06em; font-weight: 600; }
.dh-stoerer-4 { font-size: 1.16em; font-weight: 800; }
@keyframes dh-stoerer-ein { from { opacity: 0; transform: rotate(-30deg) scale(.4); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .dh-stoerer { animation: none; } }
/* Handy/kleines Tablet (Foto volle Breite ueber dem Text): auf /geschenk liegt zwischen Kartentitel und
   Kartentext zu wenig Platz — der Stoerer sitzt dort unten rechts auf der Bildkante (ueber Kartenfuss und
   Ablage), nicht mitten auf der Karte. Weiter nach unten geht nicht: dann trifft er die H1 (geprueft bis
   360 px, DE + EN — „A design horoscope" ist breiter). /erstellen bleibt oben rechts (Fenster). */
@media (max-width: 959px) {
  .dh-hero .dh-hero-bild > .dh-stoerer-el { --d: clamp(104px, 28vw, 132px); }
  .dh-hero.dh-hero-gutschein .dh-stoerer-el { top: auto; bottom: calc(var(--d) * -.06); right: 3%; }
  .dh-hero.dh-hero-erstellen .dh-stoerer-el { right: 3%; }
}

/* ══ YouTube-Angebotsseite /youtube bzw. /en/youtube (Karte 1218, 15.10.2026) ══════════════════════════════════════
   Martins Entwurf (docs/mockups/k1218/) im Design der Site: Nunito Sans, Blau #1A2A6C / Orange #E8731A, Creme-Flächen,
   Abschlussband dunkelblau wie das Hensel-Band der Deutungsseite. Aufbau: build_pages.py::page_youtube. */
.dh-yt-sek { --yt-blau: #1A2A6C; --yt-orange: #E8731A; --yt-orange-d: #C25C10; --yt-text: #4A5068; --yt-linie: #EADFD3;
  font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--yt-text); }
.uk-section.dh-yt-sek { padding-top: 40px; padding-bottom: 40px; }
.uk-section.dh-yt-sek-weiss { background: #FFFFFF; }
.uk-section.dh-yt-sek-creme { background: #FBF6F0; }
.dh-yt-sek .dh-yt-h1, .dh-yt-sek .dh-yt-h2 { font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--yt-blau); font-weight: 800; text-transform: none; }
.dh-yt-sek .dh-yt-h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.1; letter-spacing: -.01em; }
.dh-yt-sek .dh-yt-h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.18; }
.dh-yt-sek ul, .dh-yt-sek ol { margin: 0; padding: 0; list-style: none; }
.dh-yt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: 6px;
  background: var(--yt-orange); color: #FFFFFF !important; font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none !important; box-shadow: 0 10px 22px rgba(232, 115, 26, .28); transition: background-color .2s, transform .2s; }
.dh-yt-btn:hover, .dh-yt-btn:focus-visible { background: var(--yt-orange-d); transform: translateY(-2px); }
.dh-yt-btn img { width: 16px; height: 16px; }

/* 1 Kopf — seit Karte 1219 wie im Entwurf: dunkler Abendhimmel, der Löwe steht randlos rechts und läuft weich in den Text
   aus (Martin: „Hier ist das Bild als Rechteck ‚ohne Kontakt‘ zum Text … so wie im Entwurf … oder zumindest wie in den
   anderen Kopfbereichen das Bild zum Text hin ausläuft“). Bild dh-yt-kopf.webp 1035 × 806 = Entwurfs-Kopf rechts vom
   eingebrannten Text (scripts/k1219_bilder.py). Das eingebrannte Siegel ist übermalt; das HTML-Siegel (DE/EN) ist in
   Prozent bzw. cqw des Bildes verankert und deckt die Stelle (Mitte 785/526, Radius 172) immer genau ab.
   Unter 1200 px: Bild oben (randlos, ab 900 px auf 900 px begrenzt und seitlich auslaufend), unten in den Hintergrund
   auslaufend, Text darunter. Ab 1200 px: Bild absolut am rechten Rand über die volle Kopfhöhe, links per Maske
   ausgeblendet, Text links daneben. */
.uk-section.dh-yt-sek.dh-yt-sek-kopf { position: relative; overflow: hidden; padding-top: 0; padding-bottom: 40px; color: #E9E5F2;
  background: radial-gradient(ellipse at 78% 38%, rgba(140, 80, 110, .22), transparent 62%),
    linear-gradient(180deg, #0B1530 0%, #080E24 52%, #120F16 100%); }
.dh-yt-kopf-bild { position: relative; container-type: inline-size; width: 100vw; margin-left: calc(50% - 50vw); }
.dh-yt-kopf-bild > img { display: block; width: 100%; height: auto; aspect-ratio: 1035 / 806;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%); }
.dh-yt-siegel { position: absolute; left: 75.85%; top: 65.26%; z-index: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; box-sizing: border-box; width: 33.6cqw; height: 33.6cqw; margin: 0; padding: 3cqw; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 34%, #FFF9EC 0%, #FAEACB 60%, #EFD29E 100%);
  border: .45cqw solid #D9A85C; box-shadow: 0 0 2.6cqw rgba(255, 196, 110, .55), 0 1cqw 2.6cqw rgba(0, 0, 0, .35);
  color: #5B2B2B; font-size: 2.15cqw; font-weight: 700; line-height: 1.22; text-align: center; }
.dh-yt-siegel strong { display: block; margin: .25cqw 0 .35cqw; color: #1E1B2E; font-size: 2.95cqw; font-weight: 800; line-height: 1.1; }
.dh-yt-siegel img { width: 2.6cqw; height: 2.6cqw; margin-top: .8cqw; }
.dh-yt-kopf-text { position: relative; z-index: 1; margin-top: -9vw; }
.dh-yt-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 7px 16px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #FFFFFF; font-size: .95rem; font-weight: 700;
  line-height: 1.3; }
.dh-yt-logo { flex: none; }
.dh-yt-sek-kopf .dh-yt-h1 { margin-bottom: 10px; color: #FFFFFF; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.dh-yt-sek-kopf .dh-yt-h1 .dh-akzent { color: #F2B65A; background: linear-gradient(180deg, #FFE8B4 0%, #F5C266 48%, #D3903A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
.dh-yt-orn { position: relative; width: min(400px, 100%); height: 16px; margin: 0 0 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F2B65A'%3E%3Cpath d='M12 2c.6 6 3.4 9.4 10 10-6.6.6-9.4 4-10 10-.6-6-3.4-9.4-10-10 6.6-.6 9.4-4 10-10z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.dh-yt-orn::before, .dh-yt-orn::after { content: ""; position: absolute; top: 50%; width: calc(50% - 16px); height: 1px; }
.dh-yt-orn::before { left: 0; background: linear-gradient(90deg, rgba(242, 182, 90, .95), rgba(242, 182, 90, .7)); }
.dh-yt-orn::after { right: 0; background: linear-gradient(90deg, rgba(242, 182, 90, .7), rgba(242, 182, 90, 0)); }
.dh-yt-lead { margin: 0 0 22px; max-width: 28em; font-size: 1.18rem; line-height: 1.5; color: #ECE8F5; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.dh-yt-preis { display: inline-block; margin: 0 0 26px; padding: 16px 28px 18px; border: 2px solid #E3AE57; border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 15, 28, .8), rgba(8, 8, 16, .88)); text-align: center;
  box-shadow: 0 0 24px rgba(243, 182, 90, .35), inset 0 0 18px rgba(243, 182, 90, .12); }
.dh-yt-preis p { margin: 0; }
.dh-yt-preis-rabatt { font-size: 1.45rem; font-weight: 800; line-height: 1.2; color: #FFFFFF; }
.dh-yt-preis-rabatt strong { font-size: 1.65em; color: #F5C266; letter-spacing: -.01em; }
.dh-yt-preis-statt { margin-top: 2px !important; font-size: 1.12rem; color: #F1EEF7; }
.dh-yt-preis-statt s { color: #A9A6B8; }
.dh-yt-preis-statt strong { font-size: 1.3em; font-weight: 800; color: #F5C266; }
.dh-yt-preis-code { display: inline-block; margin-top: 12px !important; padding: 6px 22px; border-radius: 10px; background: #6E2531;
  color: #FFFFFF; font-size: 1.05rem; font-weight: 700; }
.dh-yt-preis-code strong { color: #FFFFFF; font-size: 1.15em; letter-spacing: .02em; }
.dh-yt-kopf-text .dh-yt-btn { display: flex; width: max-content; box-shadow: 0 10px 26px rgba(232, 115, 26, .38); }
@media (min-width: 900px) and (max-width: 1199px) {
  .dh-yt-kopf-bild { width: 900px; margin-left: calc(50% - 450px); }
  .dh-yt-kopf-bild > img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
                        linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
                        linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%);
            mask-composite: intersect; }
}
@media (min-width: 640px) and (max-width: 1199px) {
  .dh-yt-kopf-text { max-width: 640px; margin: -70px auto 0; }
}
@media (min-width: 1200px) {
  .uk-section.dh-yt-sek.dh-yt-sek-kopf { display: flex; flex-direction: column; justify-content: center; min-height: clamp(580px, 40vw, 760px);
    padding-top: 60px; padding-bottom: 64px; }
  .uk-section.dh-yt-sek-kopf > .uk-container { width: 100%; }
  .dh-yt-sek-kopf .uk-panel { position: static; }
  .dh-yt-kopf-bild { position: absolute; top: 0; right: 0; width: auto; height: 100%; aspect-ratio: 1035 / 806; margin: 0; }
  .dh-yt-kopf-bild > img { width: 100%; height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .2) 9%, rgba(0, 0, 0, .58) 19%, rgba(0, 0, 0, .88) 29%, #000 37%);
            mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .2) 9%, rgba(0, 0, 0, .58) 19%, rgba(0, 0, 0, .88) 29%, #000 37%); }
  .dh-yt-kopf-text { max-width: 560px; margin-top: 0; }
  .dh-yt-lead { max-width: 25em; }
}
@media (max-width: 639px) {
  .dh-yt-badge { font-size: .86rem; }
  .dh-yt-lead { font-size: 1.06rem; }
  .dh-yt-preis { display: block; padding: 14px 16px 16px; }
  .dh-yt-preis-rabatt { font-size: 1.25rem; }
  .dh-yt-kopf-text .dh-yt-btn { width: 100%; box-sizing: border-box; }
  /* Siegel auf dem Handy etwas größer (deckt die Stelle weiter ab, Schrift lesbar) */
  .dh-yt-siegel { width: 38cqw; height: 38cqw; font-size: 2.5cqw; }
  .dh-yt-siegel strong { font-size: 3.35cqw; }
  .dh-yt-siegel img { width: 3cqw; height: 3cqw; }
}

/* 1b Bild-Kopf der Dankeschön-Seite /rabatt50 (Karte 1245, 17.10.2026): Martins fertige Kopfbilder (Text, Preiskasten,
   Knopf und Siegel eingebrannt) randlos über die volle Breite, bis 959 px das Smartphone-Bild (<picture>). Das ganze
   Bild ist der Link auf /erstellen?code=rabatt50. Über 2000 px (Bildbreite) mittig, seitlich weich ausgeblendet.
   Aufbau: build_pages.py::_angebot (kopfbild). Nur DE — /en/rabatt50 hat den HTML-Kopf oben. */
.uk-section.dh-yt-sek.dh-yt-sek-bildkopf { overflow: hidden; padding-top: 0; padding-bottom: 0; background: #0B1530; }
.dh-yt-bildkopf { width: 100vw; margin-left: calc(50% - 50vw); }
.dh-yt-bildkopf a { display: block; }
.dh-yt-bildkopf picture, .dh-yt-bildkopf img { display: block; width: 100%; height: auto; }
/* Seitenverhältnis ausdrücklich je Bild: sonst gilt width/height des <img> (Desktop) auch fürs Handy-Bild → beschnitten */
.dh-yt-bildkopf img { aspect-ratio: 2000 / 848; object-fit: cover; }
@media (max-width: 959px) { .dh-yt-bildkopf img { aspect-ratio: 1000 / 1048; } }
.dh-yt-bildkopf a:focus-visible { outline: 3px solid #F5C266; outline-offset: -3px; }
@media (min-width: 2001px) {
  .dh-yt-bildkopf picture { max-width: 2000px; margin: 0 auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
}

/* 2 Vier Vorteile */
.uk-section.dh-yt-sek-vorteile { background: #FCF9F5; padding-top: 34px; padding-bottom: 34px; border-bottom: 1px solid #F1E8DD; }
.dh-yt-vorteile { display: grid; gap: 26px 0; grid-template-columns: minmax(0, 1fr); }
.dh-yt-vorteile li { display: flex; flex-direction: column; align-items: center; padding: 0 22px; text-align: center; }
.dh-yt-vorteile img { width: 34px; height: 34px; margin-bottom: 10px; }
.dh-yt-vorteile strong { margin-bottom: 6px; color: var(--yt-blau); font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.dh-yt-vorteile span { font-size: .98rem; line-height: 1.5; }
.dh-yt-vorteile span strong { margin: 0; color: var(--yt-orange); font-size: inherit; }
@media (min-width: 640px) { .dh-yt-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .dh-yt-vorteile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dh-yt-vorteile li + li { border-left: 1px solid var(--yt-linie); }
}

/* 3 Was ist ein Design-Horoskop? */
.uk-section.dh-yt-sek-was { background: linear-gradient(90deg, #FBF6F0 0%, #FFFFFF 100%); }
.dh-yt-was { display: grid; gap: 26px; align-items: center; }
.dh-yt-was-text p { margin: 0; max-width: 30em; font-size: 1.12rem; line-height: 1.65; }
.dh-yt-was-bild img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(26, 42, 108, .12); }
@media (min-width: 960px) { .dh-yt-was { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 52px; } }

/* 4 Beispiel-Motive */
.dh-yt-motive-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.dh-yt-motive-kopf .dh-yt-h2 { margin: 0; }
.dh-yt-alle { color: var(--yt-orange-d) !important; font-weight: 700; text-decoration: none !important; }
.dh-yt-alle:hover, .dh-yt-alle:focus-visible { text-decoration: underline !important; }
/* Flex statt Grid (Karte 1219): eine unvollständige letzte Reihe (5 Motive auf dem Handy = 3 + 2) steht mittig.
   Klick vergrößert (Lightbox aus web/motive.js), daher Lupen-Zeiger. */
.dh-yt-motive { --g: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.dh-yt-motive a { display: block; flex: 0 0 calc((100% - (var(--nm, 2) - 1) * var(--g)) / var(--nm, 2)); overflow: hidden;
  border-radius: 10px; box-shadow: 0 10px 24px rgba(26, 42, 108, .13); cursor: zoom-in; }
.dh-yt-motive img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .35s; }
.dh-yt-motive a:hover img, .dh-yt-motive a:focus-visible img { transform: scale(1.04); }
@media (min-width: 960px) {
  .dh-yt-motive { --g: 22px; }
  .dh-yt-motive a { flex-basis: calc((100% - (var(--n, 4) - 1) * var(--g)) / var(--n, 4)); }
}

/* 5 Das bekommst Du */
.dh-yt-bek { display: grid; gap: 28px 0; margin-top: 8px !important; }
.dh-yt-bek li { display: flex; flex-direction: column; align-items: center; padding: 0 26px; text-align: center; }
.dh-yt-nr { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%;
  background: var(--yt-orange); color: #FFFFFF; font-size: 1.15rem; font-weight: 800; }
.dh-yt-bek strong { margin-bottom: 8px; color: var(--yt-blau); font-size: 1.18rem; font-weight: 800; line-height: 1.3; }
.dh-yt-bek li > span:last-child { font-size: 1rem; line-height: 1.55; }
@media (min-width: 960px) {
  .dh-yt-bek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dh-yt-bek li + li { border-left: 1px solid var(--yt-linie); }
}

/* 6 Kundenstimmen (nur wenn YT_STIMMEN in build_pages.py an ist) */
.dh-yt-stimmen { display: grid; gap: 18px; }
.dh-yt-stimmen li { padding: 22px 24px; border: 1px solid var(--yt-linie); border-radius: 12px; background: #FFFFFF; text-align: center; }
.dh-yt-sterne { color: var(--yt-orange); letter-spacing: .12em; }
.dh-yt-stimmen blockquote { margin: 10px 0 12px; padding: 0; border: 0; font-size: 1rem; font-style: italic; line-height: 1.55; color: var(--yt-text); }
.dh-yt-stimmen cite { color: var(--yt-blau); font-style: normal; font-weight: 800; }
@media (min-width: 960px) { .dh-yt-stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 7 Abschluss (dunkelblaues Band) */
.uk-section.dh-yt-sek-ende { background: radial-gradient(circle at 88% 15%, rgba(232, 115, 26, .2), transparent 42%),
  linear-gradient(120deg, #1A2A6C 0%, #121C4D 100%); padding-top: 48px; padding-bottom: 48px; }
.dh-yt-ende { display: grid; gap: 30px; align-items: center; }
.dh-yt-sek-ende .dh-yt-h2 { color: #FFFFFF; }
.dh-yt-gold { color: #F6A55B; }
.dh-yt-ende li { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 0; color: #E6E9F5; font-size: 1.06rem; line-height: 1.45; }
.dh-yt-ende li img { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.dh-yt-ende-cta { text-align: center; }
.dh-yt-ende-cta .dh-yt-btn { width: 100%; box-sizing: border-box; padding-top: 18px; padding-bottom: 18px; font-size: 1.05rem; }
.dh-yt-code { margin: 16px 0 0; padding: 14px 18px; border-radius: 14px; background: #FBF3E8; color: var(--yt-text); font-size: .95rem; line-height: 1.4; }
.dh-yt-code strong { display: block; margin-top: 2px; color: var(--yt-orange-d); font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; }
@media (min-width: 960px) { .dh-yt-ende { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 56px; } }
@media (max-width: 959px) { .uk-section.dh-yt-sek { padding-top: 30px; padding-bottom: 30px; } }