/*
Theme Name: Postcard of Love
Theme URI: https://honeyhoney.love
Author: Generiert
Description: A single-page theme as a quiet tableau. Background: the original pattern file (Koloman Moser, The Cloak of Love) tiled seamlessly in both directions and mirrored kaleidoscopically around the card, with a dedicated, lighter pattern tile for mobile (art-direction). Centred on the pattern's symmetry point sits a two-sided A7 postcard in the pattern's cream tone, framed by four hand-drawn ink lines. Front: names, an ink heart-dot, a welcoming greeting and the key details. Back: the schedule. Exactly two type sizes (title + body). A gentle warm lift; a calm reveal (names letter by letter, then details line by line); an unhurried, savoured flip — interruptible, reversible and drag-to-turn — with a slight flex and a whisper of settle; a clearly visible, elegant flip button inside the card; subtle depth/parallax; an ink cursor; fine grain/light. prefers-reduced-motion and a Customizer option turn motion off. Kolo LP font embedded.
Version: 2.15.18
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: postkarte-der-liebe
*/

/* ============================================================== Schrift */
@font-face{
  font-family:"Kolo LP Std";
  src:url("assets/fonts/KoloLP-Regular.woff") format("woff"),
      url("assets/fonts/KoloLP-Regular.otf") format("opentype");
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ============================================================== Tokens */
:root{
  --beige:#ebdbd5;
  --ink:#2a1a1d;
  --stage-w:85.6mm;

  /* genau ZWEI Schriftgroessen */
  --type-title:clamp(15px, 6.2cqi, 29px);
  --type-body: clamp(11px, 3.5cqi, 15.5px);
  --lh-body:1.55;

  /* Tiefe / 3D — TAPETE FLACHGELEGT (Befund v2.15.16): translateZ(-200px) in 1600px-Perspektive
     wird mit scale(1.125) kompensiert (1600/(1600+200) = 0,888 → ×1,125 = 1,0). Zeichnet WebKit
     die Tapete beim Seitenaufbau auch nur kurz OHNE etablierte 3D-Projektion (iOS-Compositing-/
     Raster-Aufbau), erscheint sie um exakt diese 12,5 % zu groß — „leicht vergrößert, über die
     Bildschirmgrenzen hinaus" — und „fügt sich dann passend ein", sobald die Projektion greift.
     Sichtbar, seit die Referrer-Sofortbereitschaft (v2.15.11) die Tapete ab Frame 1 zeigt; zuvor
     verbarg der Bloom den Aufbau-Moment. Ohne Z-Tiefe gibt es nichts zu kompensieren → der Snap
     ist geometrisch UNMÖGLICH. Die Tapete kippt weiterhin mit dem Tilt; nur ihr Tiefen-VERSATZ
     zur Karte pausiert (bei Bedarf später als 2D-Gegenbewegung zurückholbar). */
  --persp:1600px;
  --cloth-z:0px;        /* war -200px */
  --cloth-scale:1.06;   /* war 1.125 (= Z-Kompensation + Reserve) — jetzt nur noch Kipp-Reserve fürs Tilt-Mitneigen */
  --tiltX:0deg;
  --tiltY:0deg;

  /* warmes Abheben */
  --lift:
    drop-shadow(0 5px 28px rgba(62,39,33,.16))
    drop-shadow(0 2px 10px rgba(62,39,33,.16));

  /* Bewegung */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-flip:cubic-bezier(.76,0,.24,1);   /* langsam-ein / langsam-aus, deutlich */
  --ease-rise:cubic-bezier(.2,.85,.25,1);   /* eleganter Settle fuers Erscheinen */
  --dur-develop:1000ms;
  --dur-bloom:1200ms;
  --dur-rise:820ms;
  --dur-flip:1450ms;                        /* bewusst genussvoll, nicht hastig */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--beige);}

body{
  background:var(--beige);
  color:var(--ink);
  font-family:"Kolo LP Std",Georgia,"Times New Roman",serif;
  min-height:100svh; position:relative; overflow:hidden;
}

/* ============================================================== Bühne / Tiefe */
.pdl-scene{ position:fixed; inset:0; perspective:var(--persp); perspective-origin:50% 50%; z-index:1; }
.pdl-tilt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d; transform:rotateX(var(--tiltX)) rotateY(var(--tiltY));
  /* KEINE CSS-Transition: die rAF-Lerp im JS glättet die Parallaxe bereits. Ohne den 600ms-Nachlauf
     friert die Neigung über der Karte SOFORT ein → der Knopf ist ein absolut ruhiges Klick-/Hover-Ziel. */
}
.pdl-cloth{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(var(--cloth-z)) scale(var(--cloth-scale)); z-index:0;
}
.pdl-cloth-img{
  position:absolute; inset:0;
  background-color:var(--beige);
  background-image:url("assets/images/heart-tile.png");
  background-image:-webkit-image-set(
     url("assets/images/heart-tile.avif") type("image/avif") 1x,
     url("assets/images/heart-tile.webp") type("image/webp") 1x,
     url("assets/images/heart-tile.png")  type("image/png")  1x);
  background-image:image-set(
     url("assets/images/heart-tile.avif") type("image/avif"),
     url("assets/images/heart-tile.webp") type("image/webp"),
     url("assets/images/heart-tile.png")  type("image/png"));
  background-repeat:repeat;
  background-size:auto 100%;     /* Fallback für Browser ohne lvh (< iOS 15.4 / Chrome 108) */
  background-size:auto 100lvh;   /* DIE Zoom-Quelle (Befund v2.15.14): „auto 100%“ koppelte die Kachelhöhe an die
                                    Elementhöhe = DYNAMISCHE Viewport-Höhe. iOS animiert beim Seitenwechsel die
                                    Adressleiste → die Herzen skalierten live mit („erscheint vergrößert, fügt
                                    sich dann passend ein“) — unberührt von View Transition, Phasensync und
                                    Bloom, weil orthogonal dazu. lvh (große Viewport-Höhe) ist je Orientierung
                                    KONSTANT: die Kachel steht felsenfest, egal was die Leiste tut. */
  background-position:center top;/* oben verankert: die Leisten-Animation verändert die Box am UNTEREN Ende —
                                    das Muster wandert keinen Pixel. Rand-Geometrie bleibt sauber: der obere
                                    helle Spiegel-Rand liegt exakt AUF der Oberkante; der untere liegt bei
                                    eingefahrener Leiste AUF der Unterkante (Box = lvh) und ragt bei aus-
                                    gefahrener Leiste schlicht unsichtbar darüber hinaus (Box < lvh). */
  transform-origin:50% 50%;   /* will-change entfernt (v2.15.16): erzwang einen eigenen Raster-Layer der
                                 Tapete — bekannter iOS-Trigger für verzögertes Re-Rastern beim Aufbau;
                                 das 24s/1,2%-Atmen braucht keine Layer-Promotion */
}

/* ============================================================== Karte (zweiseitig) */
.pdl-stage{
  position:relative;
  width:min(var(--stage-w), 94vw, calc((100svh - 6rem) * 121 / 164));
  aspect-ratio:121 / 164;
  container-type:inline-size;
  transform-style:preserve-3d; z-index:1;
  touch-action:pan-y pinch-zoom;   /* NUR horizontales Wischen gehört uns; vertikal + Pinch bleiben beim Browser */
}
.pdl-lift{ position:absolute; inset:0; transform-style:preserve-3d; }   /* traegt den Anhebe-Bogen */
.pdl-card{
  position:absolute; inset:0; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  transform:rotateY(0deg); will-change:transform;   /* hält die Karte dauerhaft auf EINER Kompositions-Ebene → am Wende-Ende kein Ebenen-Ab-/Aufbau → kein Sub-Pixel-Raster-Flackern des Herzens in Brave (empirisch bestätigt: 2.14.17 = ruhig, 2.14.18 ohne = Flackern zurück) */
  -webkit-user-select:none; user-select:none;   /* sauberes Ziehen statt Textauswahl */
}
@supports (-webkit-touch-callout: none){   /* diese Eigenschaft kennt NUR iOS/iPadOS-WebKit — präziser iOS-Schalter per Feature-Test, kein UA-Sniffing */
  .pdl-card{ will-change:auto; }   /* iOS OHNE GPU-Pinning: dort ließ es den Front-Text verblassen (preserve-3d-Blending, 2.14.17). Volle Deckkraft sichert dort die eigene Front-Ebene; das Herz-Flackern ist ein reines Blink-Phänomen. */
}
.pdl-card.is-flipped{ transform:rotateY(180deg); }

.pdl-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.pdl-face--back{ transform:rotateY(180deg); }
.pdl-face--front{ transform:rotateY(0deg); }   /* eigene, feste Ebene im 3D-Raum — exakt symmetrisch zur Rückseite (rotateY(180deg)). Ohne eigene Ebene blendet iOS die Vorderseite im preserve-3d-Kontext halbtransparent (Text grau/schwach — historisch dokumentierte iOS-faded-front). Eine GANZE Seite als eine Ebene erzeugt kein Zeilen-Springen (das kam von Pro-Zeile-Ebenen). */

.pdl-frame{ position:absolute; inset:0; width:100%; height:100%; display:block; filter:var(--lift); }
.pdl-face::after{
  content:""; position:absolute; inset:7% 8% 9%; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, rgba(255,243,236,.65), rgba(255,243,236,0) 70%);
  mix-blend-mode:soft-light;
}


/* ============================================================== Inhalt / Typografie (genau 2 Groessen) */
.pdl-content{ position:absolute; inset:0; display:flex; flex-direction:column; padding:10.5% 13.5% 15%; text-align:center; }
.pdl-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.pdl-title{ margin:0; font-weight:normal; font-size:var(--type-title); letter-spacing:.14em; line-height:1.08; }
.pdl-heart{ display:block; font-size:var(--type-body); width:clamp(8px,3.0cqi,14px); height:auto;
  margin:.8em 0 .65em; color:var(--ink); opacity:.92; }
.pdl-greeting{ margin:0 0 .55em; font-size:var(--type-body); letter-spacing:.145em; line-height:1.5; white-space:pre-line; }
.pdl-list{ margin:.4em 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.06em; }
.pdl-list li{ margin:0; padding:0; font-size:var(--type-body); line-height:var(--lh-body); letter-spacing:.105em; }
.pdl-list .pdl-line--blank{ -webkit-user-select:none; user-select:none; }   /* erhaltene Leerzeile: eine Zeilenhoehe (vom &nbsp;) */

/* ============================================================== Wenden-Knopf (in der Karte, unten, sehr sichtbar) */
.pdl-flip{
  flex:0 0 auto; align-self:center; margin-top:5%; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ink) 9%, transparent);
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  border-radius:999px; padding:.62em 1.2em;
  font-family:inherit; font-size:clamp(10px, 2.9cqi, 13px);
  letter-spacing:.18em; line-height:1; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
  /* WICHTIG: KEIN transform am Knopf selbst. Ein Hover/Active-Transform verschiebt/skaliert das
     Trefferfeld unter dem Zeiger → Klick UND pointerup landen daneben (Hauptursache der
     Unzuverlässigkeit, besonders am Desktop). Heben/Drücken passiert visuell auf .pdl-flip-in. */
  transition:background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.pdl-flip-in{ display:inline-flex; align-items:center; gap:.7em; transition:transform .4s var(--ease-soft); }  /* bewegt NUR den Inhalt, nie das Trefferfeld; Abstand Pfeil↔Beschriftung (tunebar) */
.pdl-flip .pdl-turn{ width:1.2em; height:1.2em; display:block; transition:transform .55s var(--ease-flip); }
.pdl-flip:hover, .pdl-flip:focus-visible{
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  border-color:color-mix(in srgb, var(--ink) 82%, transparent);
  box-shadow:0 4px 14px rgba(62,39,33,.16);
}
.pdl-flip:hover .pdl-turn, .pdl-flip:focus-visible .pdl-turn, .pdl-flip:active .pdl-turn{ transform:rotate(150deg); }
.pdl-flip:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pdl-flip:active{ box-shadow:0 2px 8px rgba(62,39,33,.14); background:color-mix(in srgb, var(--ink) 20%, transparent); }
.pdl-flip:active .pdl-flip-in{ transform:scale(.97); }

/* ---- Wisch-Affordanz: dezente Chevrons, fest am Knopf (deuten horizontales Wischen an) ---- */
.pdl-flip::before, .pdl-flip::after{
  content:""; position:absolute; top:50%; width:.42em; height:.42em; box-sizing:border-box;
  border:0 solid color-mix(in srgb, var(--ink) 55%, transparent);
  opacity:0; pointer-events:none;
}
.pdl-flip::before{ left:-1.35em; border-width:0 0 1.6px 1.6px;
  transform:translate(0,-50%) rotate(45deg); animation:pdl-swipe-l 2.4s var(--ease-soft) infinite; }
.pdl-flip::after{ right:-1.35em; border-width:1.6px 1.6px 0 0;
  transform:translate(0,-50%) rotate(45deg); animation:pdl-swipe-r 2.4s var(--ease-soft) infinite; }
@keyframes pdl-swipe-l{ 0%,100%{ opacity:.2;  transform:translate(0,-50%)   rotate(45deg); }
                        50%    { opacity:.5; transform:translate(-3px,-50%) rotate(45deg); } }
@keyframes pdl-swipe-r{ 0%,100%{ opacity:.2;  transform:translate(0,-50%)   rotate(45deg); }
                        50%    { opacity:.5; transform:translate(3px,-50%)  rotate(45deg); } }

/* ============================================================== Coach (einmaliger, sanft ausblendender Geste-Hinweis) */
.pdl-coach{
  position:fixed; top:0; left:0;   /* exakte Position setzt JS: mittig ÜBER der Karte, gleicher Randabstand wie die Flip-Buttons; die Unterkante sitzt auf top (translateY(-100%)) */
  transform:translate(-50%, calc(-100% - 10px));
  display:inline-flex; align-items:center; justify-content:center; gap:1em;   /* Chevron · Text · Chevron — symmetrisch zentriert */
  max-width:min(330px, 84vw); text-align:center;
  padding:.82em 1.45em; border-radius:999px;
  background:color-mix(in srgb, var(--beige) 88%, transparent);
  -webkit-backdrop-filter:blur(8px) saturate(1.04); backdrop-filter:blur(8px) saturate(1.04);
  border:1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  color:var(--ink); font-family:inherit; font-size:clamp(10px, 2.4vw, 12px);
  letter-spacing:.18em; line-height:1.32;
  box-shadow:0 10px 30px rgba(62,39,33,.15);
  opacity:0; pointer-events:none; z-index:8;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.pdl-coach.is-on{ opacity:1; transform:translate(-50%, -100%); }
.pdl-coach-text{ display:inline-block; margin-right:-.18em; }   /* -.18em hebt das nachlaufende letter-spacing auf → optisch exakt mittig */
.pdl-coach-chev{ flex:0 0 auto; width:.44em; height:.44em; box-sizing:border-box;
  border:0 solid color-mix(in srgb, var(--ink) 50%, transparent); }
.pdl-coach-chev--l{ border-width:0 0 1.3px 1.3px; transform:rotate(45deg); animation:pdl-coach-l 2.3s var(--ease-soft) infinite; }
.pdl-coach-chev--r{ border-width:1.3px 1.3px 0 0; transform:rotate(45deg); animation:pdl-coach-r 2.3s var(--ease-soft) infinite; }
@keyframes pdl-coach-l{ 0%,100%{ opacity:.38; transform:translateX(0) rotate(45deg); } 50%{ opacity:1; transform:translateX(-2px) rotate(45deg); } }
@keyframes pdl-coach-r{ 0%,100%{ opacity:.38; transform:translateX(0) rotate(45deg); } 50%{ opacity:1; transform:translateX(2px) rotate(45deg); } }

/* ============================================================== Foto-Album-Knopf (dauerhaft, mittig unter der Karte — am alten Coach-Platz) */
.pdl-album{
  position:fixed; top:0; left:0;   /* exakte Position setzt JS: mittig unter der Karte, gleicher Randabstand wie die Flip-Buttons */
  transform:translate(-50%, 0);
  display:inline-flex; align-items:center; justify-content:center;   /* Inhalt (EINE Zeile, s. .pdl-album-in) exakt mittig — beide Achsen */
  max-width:min(330px, 84vw); white-space:nowrap;
  padding:.85em 1.5em; border-radius:999px;
  background:color-mix(in srgb, var(--beige) 88%, transparent);
  -webkit-backdrop-filter:blur(8px) saturate(1.04); backdrop-filter:blur(8px) saturate(1.04);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  color:var(--ink); text-decoration:none; font-family:inherit; font-size:clamp(10px, 2.4vw, 12px);
  letter-spacing:.18em; line-height:1.3;
  box-shadow:0 10px 30px rgba(62,39,33,.15);
  z-index:8;
  transition:opacity .8s var(--ease-rise), background .35s var(--ease-out), border-color .35s var(--ease-out), transform .2s var(--ease-out);
}
.pdl-album-in{ display:inline-block; transform:translateY(var(--pdl-album-trim, .05em)); }   /* EINE Zeile (Herz nativ AUF der Schriftlinie); Trim hebt die Kolo-hohe Zeile in die Sichtmitte — Stellschraube ±.03em */
.pdl-album-ic{ display:inline-block; vertical-align:baseline; width:.95em; height:auto; margin-right:.6em; opacity:.92; }
.pdl-album-in > span{ display:inline-block; margin-right:-.18em; }   /* nachlaufendes Tracking des LABELS ausgleichen → optisch horizontal mittig */
.pdl-album:hover, .pdl-album:focus-visible{
  background:color-mix(in srgb, var(--beige) 96%, transparent);
  border-color:color-mix(in srgb, var(--ink) 26%, transparent);
}
.pdl-album:active{ transform:translate(-50%, 0) scale(.97); }
.pdl-album:focus-visible{ outline:1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset:3px; }
html.js .pdl-album{ opacity:0; }
html.js.pdl-card-ready .pdl-album.is-placed{ opacity:1; transition-delay:2.2s, 0s, 0s, 0s; }   /* erscheint ganz zuletzt: nach den Zeilen (0.78s+) und dem Herz (1.6s) — und NIE unvermessen (is-placed setzt pdl.js nach der Platzierung) */
html.pdl-vt.js.pdl-card-ready .pdl-album.is-placed{ transition-delay:.5s, 0s, 0s, 0s; }   /* Rückkehr per View Transition: der Knopf blüht direkt nach der Kartenblende auf, statt 2.2s zu warten */
html.no-js .pdl-album{ left:50%; top:auto; bottom:4vh; }   /* Fallback ohne JS: mittig am unteren Rand */

/* ============================================================== Atmosphäre (über allem) */
.pdl-light,.pdl-vignette,.pdl-grain{ position:fixed; inset:0; pointer-events:none; z-index:5; }
.pdl-light{
  background:radial-gradient(130% 110% at 46% 34%, rgba(255,248,240,.55) 0%, rgba(255,248,240,0) 60%);
  mix-blend-mode:soft-light; opacity:.55; animation:pdl-lightdrift 34s ease-in-out infinite alternate;
  animation-delay:var(--pdl-ph-light, 0s);   /* Wanduhr-Phase — alternate ⇒ volle Periode 68s */
}
.pdl-vignette{ background:radial-gradient(130% 120% at 50% 50%, rgba(0,0,0,0) 38%, rgba(30,18,21,.26) 100%); }
.pdl-grain{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; opacity:.05; mix-blend-mode:overlay; animation:pdl-grainshift 1.2s steps(3) infinite;
  animation-delay:var(--pdl-ph-grain, 0s);   /* Wanduhr-Phase — Periode 1.2s */
}

/* ============================================================== Cursor: EINE Tusche-Note */
/* Vollständiger Rückbau des Tinten-Punkts (v2.15.12): zu raumeinnehmend. Stattdessen genau
   EINE Modifikation des Standardcursors — der Pfeil selbst trägt Tusche-Handschrift: gleiche
   Größe, gleiches Verhalten, null zusätzlicher Raum. Alles Interaktive behält die nativen
   Zeiger (Hand, Text-Balken) und damit die volle Affordanz. Der hauchdünne Beige-Saum hebt
   die Spitze von den Tusche-Herzen der Tapete ab. Safari kennt SVG-Cursor nicht und fällt
   wortlos auf den Systempfeil zurück (bewusster, unsichtbarer Fallback).
   Stellschrauben: Pfadform, Saumstärke (1.1), Hotspot (4 2). */
html{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M4 2 L4 17.5 L8.5 13.7 L11.2 19.3 L13.7 18.1 L11 12.7 L16.6 12.3 Z' fill='%232a1a1d' stroke='%23ebdbd5' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto; }

/* Wenden + Anheben + Biegung werden per Web Animations API gesteuert (siehe pdl.js). */

/* ============================================================== Erscheinen: zeilenweise, mit Schaerfe-Zug
   Anfangszustaende gelten NUR mit JS. Ohne JS ist alles sofort sichtbar.                                  */
html.js .pdl-stage{
  opacity:0; clip-path:circle(16% at 50% 46%); transform:translateY(7px);   /* NUR Anheben, KEIN scale: ein scale auf dem container-type-Element verändert in diesem Browser die cqi-Einheiten → alle Schriften/Maße wüchsen ~1,5 % live, die Spalte bräche um und das Herz rückte (per Diagnose bestätigt). translateY ändert die Größe nicht → cqi konstant. */
  transition:opacity var(--dur-develop) var(--ease-out), clip-path var(--dur-develop) var(--ease-out),
             transform var(--dur-develop) var(--ease-out);
}
html.js.pdl-card-ready .pdl-stage{ opacity:1; clip-path:circle(140% at 50% 46%); transform:none; }   /* sanftes Anheben (translateY) klingt natürlich auf none aus; kein scale → cqi konstant */

html.js .pdl-cloth-img{
  opacity:0; clip-path:circle(14% at 50% 50%);
  transition:opacity var(--dur-bloom) var(--ease-out), clip-path var(--dur-bloom) var(--ease-out);
  animation:pdl-breathe 24s ease-in-out infinite;
  animation-delay:var(--pdl-ph-breathe, 0s);   /* Wanduhr-Phase (Inline-Bootstrap): die Tapete atmet über Seitenwechsel KONTINUIERLICH weiter — Periode 24s */
}
html.js.pdl-cloth-ready .pdl-cloth-img{ opacity:1; clip-path:circle(150% at 50% 50%); }

/* Nur GPU-Eigenschaften (Deckkraft + Transform) – kein Blur, kein letter-spacing (beides ruckelt/relayoutet). */
html.js .pdl-anim{
  opacity:0;                       /* NUR Deckkraft je Element — keine Pro-Element-Transform → keine GPU-Ebene pro Zeile → kein Pixel-Raster-Sprung (Chrome „jede zweite Zeile“). Das sanfte Anheben macht die ganze Karte gemeinsam (Bühne). */
  transition:opacity var(--dur-rise) var(--ease-rise);
}
/* Titel: Buchstaben blenden gestaffelt per Deckkraft ein (per JS in .pdl-ch zerlegt) — kein Block-Aufstieg. */
html.js .pdl-title.pdl-anim{ opacity:1; }
html.js .pdl-title .pdl-ch{                       /* Buchstaben rein per Deckkraft, inline → Abstaende wie normaler Text */
  display:inline; opacity:0; transition:opacity .55s var(--ease-rise);
}
html.js.pdl-card-ready .pdl-anim:not(.pdl-title){
  opacity:1;
  transition-delay:calc(0.78s + (var(--pdl-i, 1) - 1) * 60ms);
}
html.js.pdl-card-ready .pdl-heart.pdl-anim{ transition-delay:1.6s; transition-duration:.55s; }   /* Herz erscheint ZULETZT (vorn wie hinten) — nach allen Zeilen, an fixer Endposition */
html.js.pdl-card-ready .pdl-title.pdl-anim{ opacity:1; transition-delay:.46s; }
html.js.pdl-card-ready .pdl-title .pdl-ch{
  opacity:1;
  transition-delay:calc(0.46s + var(--pdl-ci, 0) * 24ms);
}

@keyframes pdl-breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.012);} }
@keyframes pdl-lightdrift{ 0%{ transform:translate(0,0); opacity:.5;} 100%{ transform:translate(1.8%,-1.4%); opacity:.62;} }
@keyframes pdl-grainshift{ 0%{ background-position:0 0;} 100%{ background-position:60px 30px;} }

/* ============================================================== Mobile Art-Direction */
@media (max-width:700px){
  .pdl-cloth-img{
    background-image:url("assets/images/heart-tile-mobile.png");
    background-image:-webkit-image-set(
       url("assets/images/heart-tile-mobile.avif") type("image/avif") 1x,
       url("assets/images/heart-tile-mobile.webp") type("image/webp") 1x,
       url("assets/images/heart-tile-mobile.png")  type("image/png")  1x);
    background-image:image-set(
       url("assets/images/heart-tile-mobile.avif") type("image/avif"),
       url("assets/images/heart-tile-mobile.webp") type("image/webp"),
       url("assets/images/heart-tile-mobile.png")  type("image/png"));
  }
  .pdl-content{ padding:10.5% 12% 15%; }
  .pdl-flip{ font-size:13px; padding:.95em 1.55em; gap:.62em; letter-spacing:.16em; }  /* groesseres Tippziel */
  .pdl-album{ font-size:12px; padding:.95em 1.6em; }  /* groesseres Tippziel */
}

/* ============================================================== Reduced Motion */
@media (prefers-reduced-motion: reduce){
  html.js .pdl-stage, html.js .pdl-cloth-img, html.js .pdl-anim, html.js .pdl-title .pdl-ch{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
  .pdl-cloth-img,.pdl-light,.pdl-grain{ animation:none !important; }
  .pdl-tilt{ transition:none !important; transform:none !important; }
  .pdl-card{ transform:none !important; transition:none !important; }
  .pdl-face{ -webkit-backface-visibility:visible; backface-visibility:visible; transition:opacity .25s var(--ease-soft); }
  .pdl-face--back{ transform:none; opacity:0; }
  .pdl-card.is-flipped .pdl-face--front{ opacity:0; }
  .pdl-card.is-flipped .pdl-face--back{ opacity:1; }
  .pdl-flip::before, .pdl-flip::after{ animation:none !important; opacity:.32 !important;
    transform:translate(0,-50%) rotate(45deg) !important; }
  .pdl-coach-chev{ animation:none !important; opacity:.5 !important; }
  .pdl-album{ transition:none !important; }
}

/* ============================================================== Statisch (Customizer „aus“) */
html.pdl-static .pdl-stage, html.pdl-static .pdl-cloth-img, html.pdl-static .pdl-anim, html.pdl-static .pdl-title .pdl-ch{
  opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
}
html.pdl-static .pdl-cloth-img, html.pdl-static .pdl-light, html.pdl-static .pdl-grain,
html.pdl-static .pdl-lift{ animation:none !important; }
html.pdl-static .pdl-tilt{ transition:none !important; transform:none !important; }
html.pdl-static .pdl-card{ transform:none !important; transition:none !important; }
html.pdl-static .pdl-face{ -webkit-backface-visibility:visible; backface-visibility:visible; transition:opacity .25s var(--ease-soft); }
html.pdl-static .pdl-face--back{ transform:none; opacity:0; }
html.pdl-static .pdl-card.is-flipped .pdl-face--front{ opacity:0; }
html.pdl-static .pdl-card.is-flipped .pdl-face--back{ opacity:1; }
html.pdl-static .pdl-flip::before, html.pdl-static .pdl-flip::after{ animation:none !important; opacity:.32 !important;
  transform:translate(0,-50%) rotate(45deg) !important; }

/* ============================================================== Druck (A7) */
@media print{
  @page{ size:74mm 105mm; margin:0; }
  html,body{ background:var(--beige); overflow:visible; }
  .pdl-scene{ position:static; perspective:none; }
  .pdl-tilt{ position:static; display:block; transform:none; }
  .pdl-cloth,.pdl-light,.pdl-vignette,.pdl-grain,.pdl-flip,.pdl-coach{ display:none; }
  .pdl-lift{ transform:none !important; animation:none !important; }
  .pdl-card{ transform:none !important; }
  .pdl-face--back{ display:none; }
  .pdl-frame{ filter:none; }
  .pdl-face::after{ display:none; }
  .pdl-stage{ position:absolute; top:-5.7mm; left:-5.7mm; width:85.6mm; height:116mm;
    aspect-ratio:auto; container-type:normal;
    opacity:1 !important; clip-path:none !important; transform:none !important; }
  .pdl-anim{ opacity:1 !important; transform:none !important; filter:none !important; }
  .pdl-title .pdl-ch{ opacity:1 !important; }
}

/* ============================================================== Gästefotos-Seite */
/* Dasselbe stehende Tableau wie die Einladung: Szene → Tilt → Bühne, die Karte exakt
   am selben Fleck. ALLES wohnt IN der Karte; wächst der Inhalt, scrollt still der
   Karten-INNENRAUM (.pdl-body) — die Ränder und das A7-Maß bleiben heilig. */
body.pdl-fotos-body.pdl-lb-open{   /* Lightbox offen: Seite ruht (Riegel; das JS merkt sich die Scroll-Lage). */
  position:fixed; left:0; right:0; width:100%; overflow:hidden;
}
/* Gelernt (v2.15.8→10): absolute Hintergrund-Ebenen ankern am INITIALEN Containing Block —
   schiebt Safari beim Fokus Layout-Viewport/Seite, bleibt jenseits davon UNBEMALTE Fläche
   (der weiße Rand unten/rechts vom iPhone-Test). Die Ebenen bleiben deshalb fixed;
   Safaris Fokus-Schub fängt stattdessen der Scroll-Riegel in pdl-fotos.js ab. */

/* ---- Eingangskarte = die Bühne für alles (echte .pdl-stage: cqi-Typo, Develop-Enthüllung, Rahmen-Schatten) ---- */
.pdl-stage--page{ color:var(--ink); text-align:center; }
.pdl-face--page .pdl-heart{ margin:.7em 0 .55em; width:clamp(8px,3.0cqi,14px); }
.pdl-flip--back{ text-decoration:none;                        /* der Knopf ist hier ein Link: zurück zur Einladung */
  min-height:44px;                                            /* exakt die Statur des Continue-Knopfes darüber */
  font-size:clamp(9px, 3.0cqi, 12px);
  letter-spacing:.15em; padding:.6em 1.4em; }                 /* Tracking/Polster hauchfein ökonomisiert: das lange Wort behält ruhige Luft zu den Innenlinien (≈14px je Seite) */
.pdl-flip--back::before, .pdl-flip--back::after{ content:none; animation:none; }   /* keine Wisch-Chevrons — hier wird nichts gewendet */

/* Karten-Innenraum: zentriert, solange alles passt; scrollt sonst von der Oberkante.
   Die ::before/::after-Abstandhalter (margin:auto) leisten beides zugleich. */
.pdl-face--page .pdl-body{
  justify-content:flex-start;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 30%, transparent) transparent;
  padding:2px 3px;
}
.pdl-face--page .pdl-body::-webkit-scrollbar{ width:3px; }
.pdl-face--page .pdl-body::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 28%, transparent); border-radius:2px; }
.pdl-face--page .pdl-body::before,
.pdl-face--page .pdl-body::after{ content:""; margin:auto; }

/* Ablage-Geste: die GANZE Karte nimmt an — man legt seine Fotos auf die Postkarte */
.pdl-stage--page.is-drag .pdl-frame{ filter:var(--lift) drop-shadow(0 9px 28px rgba(62,39,33,.20)); }
.pdl-stage--page.is-drag .pdl-body .pdl-heart{ animation:pdl-breathe 1.4s var(--ease-soft) infinite; }
html.pdl-static .pdl-stage--page.is-drag .pdl-body .pdl-heart{ animation:none !important; }

/* ---- Abschnitte erscheinen mit demselben Settle wie die Karte ---- */
.pdl-sign, .pdl-post, .pdl-galerie{
  width:100%;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-rise) var(--ease-rise), transform var(--dur-rise) var(--ease-rise);
}
.pdl-sign.is-in, .pdl-post.is-in, .pdl-galerie.is-in{ opacity:1; transform:none; }
html.pdl-static .pdl-sign, html.pdl-static .pdl-post, html.pdl-static .pdl-galerie{
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* ---- In-Karten-Typografie (cqi: skaliert mit der Karte) ---- */
.pdl-face--page .pdl-note,
.pdl-sign-label, .pdl-signed, .pdl-status{ font-size:clamp(8.5px,3.0cqi,11px); letter-spacing:.12em; line-height:1.55; }
.pdl-face--page .pdl-note{ margin:.9em 0 0; opacity:.85; }

/* Signieren: ein Name, eine Unterstreichung */
.pdl-sign{ margin-top:.6em; }
.pdl-sign-label{ display:block; margin-bottom:.7em; }
.pdl-input{
  display:block; width:88%; margin:0 auto; padding:.22em .15em .3em;
  background:transparent; border:0; border-radius:0;
  border-bottom:1.5px solid color-mix(in srgb, var(--ink) 38%, transparent);
  color:var(--ink); font-family:inherit;
  font-size:max(16px, 5.2cqi);   /* ≥16 px: darunter zoomt iOS beim Fokussieren in die Seite hinein */
  letter-spacing:.08em; text-align:center; caret-color:var(--ink); outline:none;
  transition:border-color .35s var(--ease-out);
}
.pdl-input::placeholder{ color:color-mix(in srgb, var(--ink) 38%, transparent); }
.pdl-input:focus{ border-bottom-color:var(--ink); }
.pdl-input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--beige) inset; -webkit-text-fill-color:var(--ink); }   /* Autofill färbt sonst weiß in die Karte */

/* Pillen-Knopf — wie der Wenden-Knopf: KEIN Transform am Trefferfeld */
.pdl-btn{
  margin-top:1em; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;                                       /* verlässliches Tippziel (Apple-HIG-Maß) */
  background:color-mix(in srgb, var(--ink) 9%, transparent); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 50%, transparent); border-radius:999px;
  padding:.6em 1.5em; font-family:inherit; font-size:clamp(9px,3.0cqi,12px); letter-spacing:.16em; line-height:1; text-align:center;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
  transition:background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.pdl-btn:hover, .pdl-btn:focus-visible{
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  border-color:color-mix(in srgb, var(--ink) 82%, transparent);
  box-shadow:0 4px 14px rgba(62,39,33,.16);
}
.pdl-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pdl-btn:active{ background:color-mix(in srgb, var(--ink) 20%, transparent); box-shadow:0 2px 8px rgba(62,39,33,.14); }
.pdl-btn--add{ margin-top:.4em; }
.pdl-btn-in{ display:inline-block; transform:translateY(var(--pdl-btn-trim, .05em)); }   /* optischer Ausgleich der Kolo-Metrik — Stellschraube (±.03em); bewegt NUR den Inhalt, nie das Trefferfeld */

/* ---- Fokus-Choreografie: Signieren mit offener Tastatur (html.pdl-naming, s. pdl-fotos.js) ----
   Das JS misst den sichtbaren Ausschnitt und setzt die GANZE Karte skaliert hinein (Transform
   auf der Face). Hier drinnen: Begrüßung faltet sich, Titel atmet etwas ein, „Zurück" tritt
   zurück — und „Continue" wird zum unübersehbaren Hauptknopf (gefüllte Tinte). */
.pdl-face--page{ transition:transform .22s var(--ease-out); transform-origin:top center; will-change:transform; }
.pdl-face--page .pdl-title{ transition:font-size .35s var(--ease-soft); }
.pdl-face--page .pdl-greeting{ max-height:14em; transition:opacity .3s var(--ease-out), max-height .4s var(--ease-soft), margin .4s var(--ease-soft); }
html.pdl-naming .pdl-face--page .pdl-greeting{ opacity:0; max-height:0; margin:0; overflow:hidden; }
html.pdl-naming .pdl-face--page .pdl-title{ font-size:calc(var(--type-title)*.82); }
.pdl-flip--back{ transition:background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft),
                 font-size .35s var(--ease-soft), padding .35s var(--ease-soft), opacity .35s var(--ease-out); }
html.pdl-naming .pdl-flip--back{ opacity:.6; margin-top:3%; }   /* gleiche Statur wie Continue — tritt nur über die Deckkraft zurück */
html.pdl-naming .pdl-sign .pdl-btn{
  background:color-mix(in srgb, var(--ink) 20%, transparent);     /* Führung über die kräftigste Stufe der EIGENEN Farbwelt —  */
  border-color:color-mix(in srgb, var(--ink) 85%, transparent);   /* NICHT über Größe: das Wachstum erzeugte den Innen-Scroll,  */
  box-shadow:0 6px 18px rgba(62,39,33,.22);                       /* der das Herz verschluckte (iPhone-Befund v2.15.9)          */
}
/* Kompakte Atemführung im Fokus: alles passt rechnerisch OHNE Innen-Scroll in die Karte —
   das Herz bleibt damit GARANTIERT im Bild (Innenraum-Budget ≈300px vs. ≈160px Inhalt). */
html.pdl-naming .pdl-face--page .pdl-heart{ margin:.45em 0 .4em; }
html.pdl-naming .pdl-face--page .pdl-sign{ margin-top:.35em; }
html.pdl-naming .pdl-face--page .pdl-sign-label{ margin-bottom:.45em; }
html.pdl-naming .pdl-face--page .pdl-body{ overflow:hidden; }   /* ohne Scrollcontainer kann Safari nichts verschieben — der Inhalt passt (ohne Intro) ohnehin immer */
html.pdl-static .pdl-face--page,
html.pdl-static .pdl-face--page .pdl-title,
html.pdl-static .pdl-face--page .pdl-greeting,
html.pdl-static .pdl-flip--back{ transition:none !important; }
@media (prefers-reduced-motion: reduce){
  .pdl-face--page, .pdl-face--page .pdl-title, .pdl-face--page .pdl-greeting, .pdl-flip--back{ transition:none !important; }
}

/* Einwerfen */
.pdl-post{ margin-top:.6em; }
.pdl-signed{ margin:0 0 .2em; }
.pdl-signed strong{ font-weight:normal; letter-spacing:.14em; border-bottom:1px solid color-mix(in srgb, var(--ink) 35%, transparent); padding-bottom:.08em; }
.pdl-linklike{
  background:none; border:0; padding:0 0 .05em; margin-left:.4em;
  color:var(--ink); font-family:inherit; font-size:.85em; letter-spacing:.12em;
  opacity:.6; cursor:pointer; position:relative;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  transition:opacity .3s var(--ease-out);
}
.pdl-linklike::after{ content:""; position:absolute; inset:-.65em -.7em; }   /* unsichtbar vergrößertes Trefferfeld */
.pdl-linklike:hover, .pdl-linklike:focus-visible{ opacity:1; }
.pdl-linklike:focus-visible{ outline:1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset:2px; }

.pdl-droph{ display:none; margin:.55em 0 0; font-size:clamp(8px,2.7cqi,10px); letter-spacing:.14em; opacity:.55; }
@media (hover:hover) and (pointer:fine){ .pdl-droph{ display:block; } }   /* nur dort zeigen, wo Ziehen existiert */

/* Abzüge: klein, leicht verdreht abgelegt — Tusch-Fortschritt, dann Poststempel */
.pdl-queue{
  list-style:none; margin:.9em auto 0; padding:1px; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px 7px;
}
.pdl-st{
  position:relative; aspect-ratio:1/1.16; transform:rotate(var(--rot,0deg));
  background:color-mix(in srgb, var(--beige) 45%, white);
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius:2px;
  box-shadow:0 2px 8px rgba(62,39,33,.14);
}
.pdl-st-ph{
  position:absolute; inset:4px 4px 7px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  display:flex; align-items:center; justify-content:center;
}
.pdl-st-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdl-st-ph .pdl-heart{ margin:0; width:12px; height:auto; color:var(--ink); opacity:.4; }
.pdl-st-vid{ position:absolute; left:0; right:0; bottom:0; font-size:7px; letter-spacing:.16em; text-align:center; text-transform:uppercase; opacity:.6; }
.pdl-st::after{
  content:""; position:absolute; left:4px; right:4px; bottom:3px; height:2px;
  background:var(--ink); opacity:.7;
  transform-origin:0 50%; transform:scaleX(var(--p,0));
  transition:transform .25s linear, opacity .5s var(--ease-soft);
}
.pdl-st.is-done::after{ opacity:0; }
.pdl-mark{
  position:absolute; right:-6px; top:-8px; width:58%; height:auto;
  color:var(--ink); opacity:0; transform:rotate(-14deg) scale(1.5); pointer-events:none;
}
.pdl-st.is-done .pdl-mark{
  opacity:.82; transform:rotate(-14deg) scale(1);
  transition:opacity .45s var(--ease-rise), transform var(--dur-rise) var(--ease-rise);
}
html.pdl-static .pdl-st.is-done .pdl-mark{ transition:none; }
.pdl-st.is-err{ border-color:color-mix(in srgb, var(--ink) 55%, transparent); }
.pdl-st.is-err::after{ opacity:0; }
.pdl-st-retry{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.4em;
  background:color-mix(in srgb, var(--beige) 74%, transparent);
  border:0; cursor:pointer; color:var(--ink); font-family:inherit; font-size:8px; letter-spacing:.14em;
}
.pdl-st-retry .pdl-turn{ width:12px; height:12px; display:block; }
.pdl-st-retry:focus-visible{ outline:1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset:-3px; }

.pdl-status{ margin:.8em 0 0; min-height:1.3em; }

/* Vorfreude aufs Album: sitzt am künftigen Platz der Galerie */
.pdl-album-teaser{ margin:.9em auto 0; max-width:95%; font-size:clamp(8px,2.7cqi,10px); letter-spacing:.12em; line-height:1.55; opacity:.7; white-space:pre-line; }

/* Das Album: kleine Abzüge in der Karte, Großansicht in der Lightbox */
.pdl-galerie{ margin-top:1.1em; }
.pdl-page-sub{ margin:0 0 .6em; font-weight:normal; font-size:calc(var(--type-title)*.6); letter-spacing:.14em; line-height:1.2; }
.pdl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px 6px; width:100%; }
.pdl-ph{
  display:block; position:relative;
  background:color-mix(in srgb, var(--beige) 45%, white); padding:3px;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius:2px;
  box-shadow:0 2px 8px rgba(62,39,33,.12);
  transition:box-shadow .35s var(--ease-soft);
}
.pdl-ph img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.pdl-ph:hover, .pdl-ph:focus-visible{ box-shadow:0 6px 18px rgba(62,39,33,.2); }
.pdl-ph:active{ box-shadow:0 2px 8px rgba(62,39,33,.16); }
.pdl-ph:focus-visible{ outline:1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset:2px; }
.pdl-ph--vid::after{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:22px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:color-mix(in srgb, var(--ink) 76%, transparent);
}
.pdl-ph--vid::before{
  content:""; position:absolute; left:calc(50% - 2px); top:50%; z-index:1;
  border:5px solid transparent; border-left:8px solid var(--beige);
  transform:translate(0,-50%);
}

/* ---- Lightbox: die Großansicht — das einzige bewusst kartenübergreifende Overlay ---- */
.pdl-lb{
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(42,26,29,.93);
  opacity:0; pointer-events:none;
  overscroll-behavior:contain;
  transition:opacity .3s var(--ease-soft);
}
.pdl-lb.is-on{ opacity:1; pointer-events:auto; }
.pdl-lb img{
  max-width:92vw; max-height:84vh; max-height:84dvh; display:block;   /* dvh: einfahrende Browserleisten schneiden nichts ab */
  background:color-mix(in srgb, var(--beige) 45%, white); padding:6px; border-radius:2px;
  box-shadow:0 18px 60px rgba(0,0,0,.4);
}
.pdl-lb-x, .pdl-lb-p, .pdl-lb-n{
  position:absolute; background:none; border:0; cursor:pointer;
  color:var(--beige); opacity:.85; transition:opacity .3s var(--ease-out);
}
.pdl-lb-x:hover, .pdl-lb-p:hover, .pdl-lb-n:hover,
.pdl-lb-x:focus-visible, .pdl-lb-p:focus-visible, .pdl-lb-n:focus-visible{ opacity:1; }
.pdl-lb-x:focus-visible, .pdl-lb-p:focus-visible, .pdl-lb-n:focus-visible, .pdl-lb-dl:focus-visible{
  outline:1.5px solid color-mix(in srgb, var(--beige) 70%, transparent); outline-offset:3px;
}
.pdl-lb-x{ top:max(6px, env(safe-area-inset-top, 0px)); right:max(8px, env(safe-area-inset-right, 0px)); width:48px; height:48px; font-family:inherit; font-size:26px; line-height:1; }
.pdl-lb-p, .pdl-lb-n{ top:50%; transform:translateY(-50%); width:52px; height:72px; }
.pdl-lb-p{ left:max(2px, env(safe-area-inset-left, 0px)); } .pdl-lb-n{ right:max(2px, env(safe-area-inset-right, 0px)); }
.pdl-lb-p::before, .pdl-lb-n::before{
  content:""; position:absolute; top:50%; left:50%; width:13px; height:13px;
  border:0 solid var(--beige); box-sizing:border-box;
}
.pdl-lb-p::before{ border-width:0 0 2px 2px; transform:translate(-30%,-50%) rotate(45deg); }
.pdl-lb-n::before{ border-width:2px 2px 0 0; transform:translate(-70%,-50%) rotate(45deg); }
.pdl-lb-dl{
  position:absolute; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%);
  color:var(--beige); text-decoration:none; font-family:inherit;
  font-size:12px; letter-spacing:.16em; opacity:.85; padding:12px 10px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--beige) 50%, transparent);
  transition:opacity .3s var(--ease-out);
}
.pdl-lb-dl:hover, .pdl-lb-dl:focus-visible{ opacity:1; }
html.pdl-static .pdl-lb{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .pdl-sign, .pdl-post, .pdl-galerie, .pdl-lb{ transition:none !important; }
}

/* ---- Handfreundlich (iPhone & Android) ---- */
body.pdl-fotos-body{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }   /* Safari quer: keine ungefragte Text-Aufblähung */
.pdl-btn, .pdl-linklike, .pdl-st-retry, .pdl-ph, .pdl-flip--back,
.pdl-lb-x, .pdl-lb-p, .pdl-lb-n, .pdl-lb-dl{
  -webkit-tap-highlight-color:transparent;   /* unser eigenes, ruhiges Feedback statt grauem System-Blitz */
  touch-action:manipulation;                 /* kein Doppeltipp-Zoom-Zögern auf Bedienelementen */
}

/* ---- Einrichtungs-Hinweis: NUR für Administratoren, solange nichts verbunden ist ---- */
.pdl-album--setup{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--ink) 34%, transparent);
  white-space:normal; text-align:center; line-height:1.45;
}

/* ---- Nahtloser Seitenwechsel: die Welt steht, nur die Karte blendet sich um ---- */
/* Beide Karten heißen pdl-card und stehen (per identischem Gerüst) exakt am selben Fleck →
   die benannte Gruppe wird zur reinen In-Place-Überblendung. Die Wurzel (Tapete, Licht,
   Korn) wechselt mit Dauer 0 zwischen pixelgleichen Bildern — für das Auge bewegt sich
   NICHTS außer dem Karteninhalt. Der Herz-Knopf atmet als eigene Gruppe aus/ein.
   Ankunft: das Inline-pagereveal beider Seiten setzt pdl-card-ready sofort, damit unter
   der Überblendung keine Develop-Enthüllung doppelt choreografiert. */
@view-transition{ navigation:auto; }
.pdl-stage{ view-transition-name:pdl-card; }
.pdl-album{ view-transition-name:pdl-album; }
/* Die WURZEL wechselt HART — Geometrie UND Bild sofort auf der live neuen Seite. Entscheidend:
   auch GRUPPE und BILD-PAAR stilllegen! Deren Standard-Animation interpoliert die Wurzel-GRÖSSE —
   beim Navigieren fährt iOS die Adressleiste aus, alte und neue Seite haben verschieden hohe
   Viewports, und die komplette Tapeten-Aufnahme wurde über diesen Morph skaliert: „erscheint
   vergrößert, verkleinert sich, fügt sich passend ein“ (Befund bis v2.15.12; die .3s-Brücke
   war dafür die Bühne). Hart wechseln ist heute sicher — drei Säulen halten die Tapete ab
   Frame 1 pixelstabil: Wanduhr-Phasensync (v2.15.11), Tapeten-Preload (v2.15.10), Referrer-
   Sofortbereitschaft (v2.15.11). Nur Karte und Herz-Knopf tragen den Übergang.
   0s statt none: die UA-Fades springen so per fill auf ihren ENDzustand (alt sofort weg,
   neu sofort opak) — none ließe die alte Aufnahme opak liegen, bis die Karte fertig blendet. */
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root){ animation-duration:0s; }
::view-transition-old(pdl-card), ::view-transition-new(pdl-card){
  animation-duration:.55s; animation-timing-function:var(--ease-soft);
}
::view-transition-old(pdl-album), ::view-transition-new(pdl-album){
  animation-duration:.4s; animation-timing-function:var(--ease-soft);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(pdl-card), ::view-transition-new(pdl-card),
  ::view-transition-old(pdl-album), ::view-transition-new(pdl-album){ animation:none; }
}
html.pdl-static::view-transition-old(pdl-card), html.pdl-static::view-transition-new(pdl-card),
html.pdl-static::view-transition-old(pdl-album), html.pdl-static::view-transition-new(pdl-album){ animation:none; }