/* enhance.css — Enhance-Durchgang 05.09.2026 (typeset · colorize · layout · animate · delight · overdrive)
   Refinement innerhalb der bestehenden Welt (Off-White, Cormorant + Inter, Gold-Kicker, Film-Navbar).
   Lädt nach desktop.css, vor consent.css. Kein Build-Step: bei jeder Änderung ?v= in allen HTML-Dateien bumpen.

   Thesen
   typeset   Lesetext 400 statt 300, kleinste UI-Texte ≥ 11–12 px, Display-Zeilenabstand ≥ 1.08,
             Tabellenziffern, Silbentrennung auf schmalen Viewports, Kurz-Box-Label in Kapitälchen.
   colorize  Kontrast-Reparatur (accent-foreground auf Champagner), eine Farbrolle für Links im Lesetext.
   layout    text-wrap: pretty gegen Hurenkinder (Breitensystem: siehe desktop.css).
   animate   generisches Reveal leiser und kürzer; ein autorisierter Moment: der Kapitelzähler
             rückt wie ein Bildzähler ins Bild; Drück-Feedback auf Buttons.
   delight   danke.html: das Foto „entwickelt“ sich vom Negativ zum Bild — der Fotograf hat die Anfrage im Kasten.
   overdrive Filmlauf: Perforation der Navbar läuft mit dem Scrollen (Dose bleibt ruhig), goldene
             Lese-Fortschrittslinie auf Lese-Seiten. Reines CSS (Scroll-Timeline), statisch ohne Support. */

/* ---------------------------------------------------------------- typeset */

/* Lesetext: Inter 300 auf Off-White bei 70 % Deckkraft ist zu dünn. Fließtext und Listen
   auf 400; Display-Serif und Schreibschrift behalten ihr leichtes Gewicht. */
#main-content :is(p, li).font-light:not(.font-serif):not(.font-script),
#main-content :is(ul, ol).font-light > li { font-weight: 400; }

/* Kleinste funktionale Texte auf ≥ 12 px */
#main-content [class*="text-[10px]"],
footer [class*="text-[10px]"],
[class*="text-[0.6rem]"] { font-size: 0.75rem; }

/* Display-Zeilen mit leading-none: mehrzeilige Überschriften brauchen Luft */
#main-content :is(h1, h2, h3)[class*="leading-none"] { line-height: 1.08; }

/* Zahlen in Tabellen und Preisen stehen untereinander */
#main-content table :is(td, th), .mt-val, .mt-tile-inner { font-variant-numeric: tabular-nums; }

/* Lange Kurz-Box-Labels („Auf einen Blick · Hochzeitsfotograf Kempten“) nicht als Versalien-Zeile,
   sondern als Kapitälchen: Wortform bleibt lesbar, Label-Charakter bleibt */
#main-content aside[aria-label="Auf einen Blick"] > div > p:first-child {
  text-transform: none;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
}

/* Silbentrennung im Lesetext auf schmalen Viewports (lang="de") */
@media (max-width: 640px) {
  #main-content :is(p, li) { -webkit-hyphens: auto; hyphens: auto; }
}

/* ---------------------------------------------------------------- colorize */

/* Token-Reparatur: --accent ist Champagner (32 33% 67 %). Weißer Vordergrund darauf = 2,1:1.
   Dunkler Vordergrund (Ink) = ~8:1. Betrifft bg-accent / hover:text-accent-foreground site-weit. */
:root { --accent-foreground: 30 11% 14%; }

/* Eine Rolle für Links im Lesetext: Antik-Gold mit ruhiger Unterstreichung, Hover → Primär */
#main-content :is(p, li) a:not([class*="bg-"]):not(.hf-btn):not(.hf-link) {
  color: hsl(var(--lux-gold-deep));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--lux-gold-deep) / 0.45);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
#main-content :is(p, li) a:not([class*="bg-"]):not(.hf-btn):not(.hf-link):hover {
  color: hsl(var(--primary));
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------- layout */

#main-content p { text-wrap: pretty; }

/* ---------------------------------------------------------------- animate */

/* Generisches Reveal leiser: weniger Weg, kürzer. Es bleibt Kontinuität, kein Auftritt. */
.lux-reveal { transform: translateY(12px); transition-duration: 0.6s; }
.lux-stagger > * {
  transform: translateY(10px);
  transition-duration: 0.5s;
  transition-delay: calc(min(var(--lux-i, 0), 6) * 50ms);
}

/* Der eine autorisierte Moment: der Kapitelzähler (01 … 05) rückt wie ein Bildzähler
   von unten ins Kader, etwas später als der Rest der Zeile. */
.lux-reveal .flex.items-end > span[class*="text-primary/20"] {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  transition: transform 0.85s var(--lux-ease) 0.12s, opacity 0.6s ease 0.12s;
}
.lux-reveal.is-visible .flex.items-end > span[class*="text-primary/20"] { opacity: 1; transform: none; }

/* Drück-Feedback (100 ms): der Button gibt nach */
a[class*="bg-primary"]:active, button[class*="bg-primary"]:active, .hf-btn:active {
  transform: translateY(1px) !important;
  transition-duration: 0.1s !important;
}

/* ---------------------------------------------------------------- delight (danke.html) */

.hf-develop {
  position: relative;
  width: min(100%, 34rem);
  margin: 0 auto 2.25rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px hsl(30 20% 20% / 0.25);
}
.hf-develop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Startzustand: Negativ. Wird zum Bild „entwickelt“. */
  filter: invert(1) sepia(0.6) contrast(0.85) brightness(0.9);
  transform: scale(1.04);
  animation: hf-develop 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
@keyframes hf-develop {
  0%   { filter: invert(1) sepia(0.6) contrast(0.85) brightness(0.9); transform: scale(1.04); }
  55%  { filter: invert(0) sepia(0.5) contrast(0.95) brightness(0.95); }
  100% { filter: none; transform: none; }
}
.hf-develop-caption {
  margin: 0.9rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: hsl(var(--lux-gold-deep));
  opacity: 0;
  animation: hf-develop-caption 0.8s var(--lux-ease) 2.4s both;
}
@keyframes hf-develop-caption { to { opacity: 1; } }

/* ---------------------------------------------------------------- overdrive: Filmlauf */

/* Die Perforation des Navbar-Streifens wandert mit dem Scrollen nach links (Film zieht durch
   die Kamera). Eigenschaft wird auf dem Bar-Container animiert
   und vererbt sich in den Streifen, damit die Ausroll-Animation beim ersten Aufruf unberührt bleibt. */
@property --hf-film-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .mt-film-bar {
      animation: hf-filmlauf linear both;
      animation-timeline: scroll(root);
    }
    .mt-film-strip {
      background-position:
        calc(3px + var(--hf-film-x)) 2px,
        calc(3px + var(--hf-film-x)) calc(100% - 2px),
        0 0;
    }
    /* Die Dose bleibt ruhig (Betreiber-Entscheidung 05.09.2026); nur der Film läuft. */
  }
  /* Goldene Lese-Fortschrittslinie auf Lese-Seiten (City, Ratgeber, Blog) */
  body:has(.hf-read)::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    z-index: 60;
    width: 100%;
    height: 3px;
    background: hsl(var(--lux-gold));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: hf-progress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
}
@keyframes hf-filmlauf { to { --hf-film-x: -560px; } }
@keyframes hf-progress { to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lux-reveal .flex.items-end > span[class*="text-primary/20"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hf-develop img { animation: none; filter: none; transform: none; }
  .hf-develop-caption { animation: none; opacity: 1; }
  a[class*="bg-primary"]:active, button[class*="bg-primary"]:active, .hf-btn:active { transform: none !important; }
}