/* Import order: tokens MUST come first so custom properties exist before any
   rule that uses them. reset.css follows so layout/components override it. */
@import "./tokens.css";
@import "./reset.css" layer(reset);

/* D-17: Declare cascade layers in specificity order (lowest to highest) */
@layer reset, layout, components, utilities;

/* ================================================================
   LAYOUT
   ================================================================ */

@layer layout {
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    /* Inter sitzt mit aktivierten Ligaturen und kontextuellen Alternates
       spürbar ruhiger, vor allem in Versalien-Eyebrows. */
    font-feature-settings: "liga" 1, "calt" 1;
  }

  /* width: 100% ist hier NICHT redundant. Als Flex- oder Grid-Kind
     (z.B. in .section-hero) bestimmt margin-inline: auto sonst eine
     fit-content-Breite — der Container schrumpft auf den Textinhalt und
     zentriert sich, statt bündig zum Kopfzeilenraster zu stehen. */
  .container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--content-narrow);
  }

  /* <main> ist bewusst voll breit und ohne eigenes Padding.
     Vorher trug main selbst max-width + padding-inline, wodurch jede
     .section-surface-Fläche bei 72rem endete: die abwechselnden weißen
     Bänder sahen aus wie schwebende Kästen statt durchlaufender Bänder.
     Begrenzt wird jetzt ausschließlich .container. */
  main {
    min-height: 60svh;
  }

  /* Seiten, die direkt mit einem .container-Intro starten (Preise,
     Galerie, So funktioniert's, Datenschutz) brauchen den Abstand, den
     sonst die erste <section> mitbringt. */
  main > .container:first-child {
    padding-block-start: var(--s-7);
  }

  main > .container:last-child {
    padding-block-end: var(--s-8);
  }

  /* Die Sektion direkt nach so einem Intro bekommt reduziertes
     Oberpadding. Sonst addieren sich Intro-Padding, Lead-Abstand und
     volles --section-pad zu rund 9rem Leere zwischen Fließtext und
     erstem Inhalt. */
  main > .container:first-child + section {
    padding-block-start: var(--s-6);
  }

  /* Zwei aufeinanderfolgende Sektionen ohne eigenen Flächenton würden
     ihr Padding verdoppeln — bei --section-pad von 7rem ergibt das
     14rem sichtbare Lücke ohne jede Trennwirkung. */
  section:not(.section-surface):not(.section-sunk)
    + section:not(.section-surface):not(.section-sunk) {
    padding-block-start: 0;
  }

  /* ---- Typografie ---- */

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
  }

  h2 {
    font-size: var(--fs-xl);
  }

  h3 {
    font-size: var(--fs-lg);
  }

  h4 {
    font-size: var(--fs-md);
  }

  p {
    text-wrap: pretty;
  }

  /* Fließtext bekommt eine Zeilenlängenbegrenzung. Ohne die laufen
     Absätze auf 1440px+ über 120 Zeichen und werden unlesbar.
     Ausgenommen: alles, was in einem Grid oder Flex-Kind sitzt und
     seine Breite schon vom Container bezieht. */
  .page-lead,
  .prose p,
  .prose li {
    max-width: var(--measure);
  }

  a {
    color: var(--color-link);
    text-decoration-color: color-mix(in srgb, var(--color-link) 35%, transparent);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out);
  }

  a:hover,
  a:focus-visible {
    color: var(--color-link-hover);
    text-decoration-color: currentColor;
  }

  :focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ---- Sektionsrhythmus ---- */

  .section-hero,
  .section-intro,
  .section-benefits,
  .section-testimonial,
  .section-cta,
  .section-steps,
  .section-pricing,
  .section-addons,
  .section-faq,
  .section-gallery,
  .section-contact,
  .section-booking {
    padding-block: var(--section-pad);
  }

  /* Zwei Flächenmodifier. Ohne Modifier läuft die Sektion auf
     --color-bg. Beide bleiben abwärtskompatibel benannt. */
  .section-surface {
    background: var(--color-surface);
  }

  .section-sunk {
    background: var(--color-sunk);
  }

  /* Weiche Trennung statt harter Farbkante, wenn zwei Sektionen
     denselben Ton haben. */
  .section-divided {
    border-block-start: 1px solid var(--color-border);
  }

  /* ---- Logo-Banner (fuer-fotografen) ---- */

  .section-logos {
    padding-block: var(--s-6) var(--s-7);
  }

  .logo-row-caption {
    text-align: center;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--s-5);
  }

  .logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-7);
  }

  .logo-row-item {
    height: 120px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity 0.2s ease;
  }

  .logo-row-item:hover {
    opacity: 1;
  }

  /* ---- Lead-Absatz ---- */

  .page-lead {
    color: var(--color-muted);
    font-size: var(--fs-md);
    margin-block: var(--s-4) 0;
  }

  /* Abstand zwischen Überschrift und Folgetext. Der Reset setzt
     margin: 0 auf alles — ohne diese Regel klebt jeder Absatz direkt
     unter seiner h2. */
  section > .container > h2 {
    margin-block-end: var(--s-4);
  }

  section > .container > h2 + p {
    color: var(--color-muted);
    font-size: var(--fs-md);
    max-width: var(--measure);
  }

  /* CTA-Sektionen komplett zentrieren. Vorher standen Überschrift und
     Text links, nur die Buttonzeile war zentriert. */
  .section-cta > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-5);
  }

  .section-cta > .container > h2 {
    margin-block-end: 0;
  }

  .section-cta > .container > h2 + p {
    max-width: 46ch;
  }

  /* ---- Testimonial ---- */

  .testimonial {
    max-width: 56ch;
    margin-inline: auto;
    text-align: center;
  }

  .testimonial p {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
  }

  .testimonial p::before {
    content: '\201C';
  }

  .testimonial p::after {
    content: '\201D';
  }

  .testimonial-attribution {
    display: block;
    margin-block-start: var(--s-4);
    color: var(--color-muted);
    font-size: var(--fs-sm);
  }

  .testimonial-attribution::before {
    content: '— ';
  }

  /* Der generische "h2 + p"-Regel (weiter oben) faerbt nur den ERSTEN
     Absatz nach der Ueberschrift grau ein. Sektionen mit zwei Absaetzen
     (index.html, fuer-fotografen.html) brauchen fuer beide die gleiche
     Farbe und einen Abstand dazwischen, sonst klebt Absatz 2 schwarz und
     ohne Luft am ersten. */
  .section-intro > .container > p {
    color: var(--color-muted);
    font-size: var(--fs-md);
    max-width: var(--measure);
  }

  .section-intro > .container > p + p {
    margin-block-start: var(--s-4);
  }

  /* ---- Intro mit Gerätefoto ---- */

  /* Kein Trägerpanel — das Gerät steht frei auf der Sektionsfläche.
     Die Aufnahme ist ein Freisteller auf reinem Weiß; multiply macht
     dieses Weiß zum Neutralelement, sodass keine sichtbare Bildkante
     entsteht, egal ob die Sektion weiß oder warm hinterlegt ist. */
  .intro-media {
    margin: var(--s-6) 0 0;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .intro-media img {
    width: 100%;
    max-width: 26rem;
    height: auto;
    mix-blend-mode: multiply;
  }

  /* Gleicher Mobil-Abstand wie .intro-media (oben), fuer den
     .page-intro-photo-Screenshot in .section-intro (Phase 9 D-12) — sonst
     klebt das Bild direkt am zweiten Absatz. Ab 62rem setzt die
     Grid-Regel weiter unten margin wieder auf 0 (eigene Spalte). */
  .section-intro .page-intro-photo {
    margin-block-start: var(--s-6);
  }

  /* Ab hier steht genug Platz für zwei echte Spalten. Darunter läuft
     alles weiter untereinander — h2, Absatz, Bild. */
  @media (min-width: 62rem) {
    .section-intro > .container {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
      grid-template-rows: auto auto auto;
      column-gap: var(--s-8);
      align-items: center;
    }

    /* Überschrift und Absätze bleiben direkte Kinder des Containers,
       damit die vorhandenen section > .container > h2 Regeln greifen. */
    .section-intro > .container > h2 {
      grid-column: 1;
      grid-row: 1;
      align-self: end;
    }

    /* Zwei Absätze seit Phase 07.1 — jeder braucht eine eigene Grid-Row,
       sonst landen beide in derselben Zelle und überlappen sich. */
    .section-intro > .container > p:nth-of-type(1) {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
    }

    .section-intro > .container > p:nth-of-type(2) {
      grid-column: 1;
      grid-row: 3;
      align-self: start;
    }

    .section-intro .intro-media {
      grid-column: 2;
      grid-row: 1 / span 3;
      margin: 0;
    }

    /* Gleiche Grid-Position wie .intro-media, aber ein echter Screenshot
       (Phase 9 D-12) statt Produkt-Freisteller — deshalb eigene Klasse statt
       .intro-media, sonst würde .intro-media img { mix-blend-mode: multiply }
       den Screenshot einfärben. */
    .section-intro .page-intro-photo {
      grid-column: 2;
      grid-row: 1 / span 3;
      margin: 0;
      align-self: center;
    }
  }

  /* ---- Langtext (Datenschutz) ---- */

  .prose section {
    margin-block-start: var(--s-7);
  }

  .prose h2 {
    margin-block: var(--s-6) var(--s-4);
  }

  .prose h3 {
    margin-block: var(--s-5) var(--s-3);
  }

  .prose p + p,
  .prose p + ul,
  .prose ul + p {
    margin-block-start: var(--s-4);
  }

  .prose ul {
    padding-inline-start: 1.25rem;
  }

  .prose li + li {
    margin-block-start: var(--s-2);
  }
}

/* ================================================================
   COMPONENTS
   ================================================================ */

@layer components {

  /* ---------------------------------------------------------------
     Kopfzeile
     --------------------------------------------------------------- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-block-end: 1px solid var(--color-border);
  }

  /* Browser ohne backdrop-filter bekommen eine deckende Fläche —
     sonst läuft der Seiteninhalt sichtbar durch die Kopfzeile. */
  @supports not (backdrop-filter: blur(1px)) {
    .site-header {
      background: var(--color-bg);
    }
  }

  .header-inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .site-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
  }

  .site-logo:hover,
  .site-logo:focus-visible {
    color: var(--color-text);
    text-decoration: none;
  }

  /* ---- Burger (nur < 48rem) ---- */

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-end: calc(var(--s-3) * -1);
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
  }

  .nav-toggle:hover {
    background: var(--color-sunk);
  }

  .nav-toggle-bars {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background var(--dur-fast) var(--ease-out);
  }

  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur) var(--ease-out);
  }

  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after  { top:  6px; }

  /* Offener Zustand: mittlerer Balken verschwindet, äußere kreuzen sich */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ---- Navigation ---- */

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }

  .nav-link {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--color-text);
    text-decoration: none;
  }

  button.nav-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
  }

  /* Aktivmarkierung als ::after-Linie. Der frühere border-bottom
     zusammen mit padding-bottom schob die Zeile beim Seitenwechsel. */
  .nav-link.is-active {
    color: var(--color-text);
    font-weight: 600;
  }

  .nav-link.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0.55rem;
    height: 2px;
    background: var(--color-link);
    border-radius: 2px;
  }

  .nav-booking-btn {
    margin-inline-start: var(--s-2);
  }

  /* ---- Mobil: Nav als Panel unter der Kopfzeile ----

     Umschaltpunkt 58rem (928px), NICHT die üblichen 48rem. Wortmarke,
     fünf Links und der Buchen-Button brauchen zusammen rund 740px plus
     Außenabstand; bei 768px lief die Zeile messbar über den Viewport
     hinaus und erzeugte horizontales Scrollen auf jeder Seite.
     Der Wert ist in js/components/site-header.js gespiegelt. */

  @media (max-width: 57.999rem) {
    .site-nav {
      position: absolute;
      inset-inline: 0;
      top: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--s-3) var(--gutter) var(--s-5);
      background: var(--color-bg);
      border-block-end: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
      /* Geschlossen: aus dem Fluss UND aus der Tabreihenfolge.
         display:none statt nur visibility, damit der Fokus im
         geschlossenen Panel nicht hängen bleibt. */
      display: none;
    }

    .site-header.is-open .site-nav {
      display: flex;
    }

    .site-nav .nav-link {
      min-height: 48px;
      font-size: var(--fs-base);
      border-block-end: 1px solid var(--color-border);
    }

    .site-nav .nav-link.is-active::after {
      inset-inline: auto;
      left: 0;
      width: 3px;
      height: 1.25rem;
      bottom: auto;
      top: 50%;
      translate: -0.75rem -50%;
    }

    .nav-booking-btn {
      margin-inline-start: 0;
      margin-block-start: var(--s-4);
      width: 100%;
    }
  }

  @media (min-width: 58rem) {
    .nav-toggle {
      display: none;
    }
  }

  /* ---------------------------------------------------------------
     Fußzeile
     --------------------------------------------------------------- */

  .site-footer {
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--fs-sm);
  }

  .footer-inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--s-8) var(--gutter) var(--s-5);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .footer-brand .site-logo {
    font-size: 1.125rem;
  }

  .site-footer .footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: flex-start;
  }

  .site-footer a {
    color: var(--color-muted);
    text-decoration: none;
  }

  .site-footer a:hover,
  .site-footer a:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  /* Textlink, nicht Fläche. Das helle Markengrün #25d366 käme auf Weiß
     nur auf 1.98:1 und wäre unlesbar — hier gilt die 4.5:1-Schwelle für
     Normaltext, deshalb der dunkle Ton (5.4:1). Das Markengrün bleibt
     dem FAB vorbehalten, wo es als Fläche wirkt. */
  .site-footer a.footer-whatsapp {
    color: var(--color-whatsapp-text);
    font-weight: 500;
  }

  .site-footer a.footer-whatsapp:hover,
  .site-footer a.footer-whatsapp:focus-visible {
    color: var(--color-whatsapp-text);
    text-decoration: underline;
  }

  .footer-bottom {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--s-4) var(--gutter) var(--s-6);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
  }

  @media (min-width: 48rem) {
    .footer-inner {
      grid-template-columns: 2fr 1fr 1fr;
      gap: var(--s-8);
    }
  }

  /* ---------------------------------------------------------------
     Buttons
     --------------------------------------------------------------- */

  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                border-color    var(--dur) var(--ease-out),
                color           var(--dur) var(--ease-out),
                box-shadow      var(--dur) var(--ease-out),
                transform       var(--dur) var(--ease-out);
  }

  .btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-on);
    border: 1px solid var(--color-accent-edge);
    box-shadow: var(--shadow-sm);
  }

  /* Kein filter: brightness() mehr — das entsättigt die Farbe und lässt
     sie stumpf wirken. Stattdessen ein eigener, gerechneter Hoverton. */
  .btn-primary:hover,
  .btn-primary:focus-visible {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-edge);
    color: var(--color-accent-on);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
  }

  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
  }

  .btn-secondary:hover,
  .btn-secondary:focus-visible {
    background: var(--color-sunk);
    border-color: var(--color-text);
    color: var(--color-text);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .btn-secondary:active {
    transform: translateY(0);
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-link);
    border: 1px solid transparent;
    padding-inline: var(--s-2);
  }

  .btn-ghost:hover,
  .btn-ghost:focus-visible {
    color: var(--color-link-hover);
    background: var(--color-link-soft);
    text-decoration: none;
  }

  /* Pfeil rückt bei Hover nach — nur wenn Motion erlaubt ist. */
  .btn-ghost .btn-arrow,
  .btn-secondary .btn-arrow {
    transition: transform var(--dur) var(--ease-out);
  }

  .btn-ghost:hover .btn-arrow,
  .btn-secondary:hover .btn-arrow {
    transform: translateX(3px);
  }

  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .btn-ghost:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  /* Deaktivierter Absende-Button. Muss klar vom aktiven Zustand
     unterscheidbar bleiben, damit Nutzer verstehen, dass etwas fehlt. */
  .btn-primary:disabled,
  .btn-primary[disabled] {
    background: var(--color-border-strong);
    border-color: var(--color-border-strong);
    color: var(--color-surface);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.75;
  }

  .btn-primary:disabled:hover,
  .btn-primary[disabled]:hover {
    background: var(--color-border-strong);
    border-color: var(--color-border-strong);
    box-shadow: none;
    transform: none;
  }

  .hero-actions,
  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .cta-actions {
    justify-content: center;
  }

  /* ---------------------------------------------------------------
     Hero

     Zwei Varianten parallel im Markup, umgeschaltet über
     <html data-hero="type|stack">. Nach der Entscheidung fliegt die
     nicht gewählte samt Umschaltung raus.
     --------------------------------------------------------------- */

  .section-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: min(78svh, 44rem);
    background:
      radial-gradient(60rem 40rem at 12% -10%,
        color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 62%),
      radial-gradient(48rem 36rem at 92% 8%,
        color-mix(in srgb, var(--color-sunk) 90%, transparent), transparent 58%),
      var(--color-bg);
  }

  /* Kornstruktur als inline-SVG-Data-URI: keine zusätzliche
     Netzwerkanfrage, und der Verlauf wirkt dadurch weniger digital. */
  .section-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  }

  .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--s-8);
    width: 100%;
  }

  /* Bewusst --color-muted, nicht die Akzent- oder Zweitfarbe. Bei 13px
     Versalschrift mit weitem Sperrsatz liest sich eine kräftige Farbe als
     Fremdkörper statt als Akzent — die Farbe gehört an die Aktionen, die
     Zeile hier ist Beschriftung. */
  .hero-eyebrow {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-muted);
    margin-block-end: var(--s-5);
  }

  .section-hero h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin-block-end: var(--s-5);
    max-width: 18ch;
  }

  .hero-rule {
    width: 3.5rem;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin-block-end: var(--s-5);
  }

  .section-hero .hero-subheadline {
    color: var(--color-muted);
    font-size: var(--fs-md);
    margin-block-end: var(--s-6);
    max-width: var(--measure);
  }

  /* ---- Variante "stack": Stapel gedruckter Abzüge ---- */

  /* Ruhe- und Hoverlage stehen als Variablenpaar beisammen, weil sie
     zusammen gelesen werden müssen: die Hover-Regel und der
     reduced-motion-Block greifen beide darauf zu, statt dieselben
     Werte an drei Stellen zu wiederholen.
       *-t / *-r    Ruhelage
       *-th / *-rh  aufgefächert
     Die Fächerung ist absichtlich nach rechts stärker als nach links.
     Links grenzt die Textspalte an — der Stapel darf dort nicht über
     Headline und Lead wandern. Rechts liegt bis zum Viewportrand
     ungenutzter Raum. */
  .print-stack {
    --pc1-t:  -3.5rem 1rem;     --pc1-r:  -8deg;
    --pc2-t:   0     -1.25rem;  --pc2-r:   1deg;
    --pc3-t:   4rem   2.25rem;  --pc3-r:   9deg;

    --pc1-th: -4.5rem  0.5rem;  --pc1-rh: -11deg;
    --pc2-th:  0      -2rem;    --pc2-rh:   0deg;
    --pc3-th:  4.75rem 3.25rem; --pc3-rh:  11deg;

    position: relative;
    display: none;               /* < 48rem: kein LCP-Schaden auf Mobil */
    justify-content: center;
    align-items: center;
    min-height: 24rem;
  }

  .print-card {
    position: absolute;
    width: min(18rem, 60%);
    padding: var(--s-3) var(--s-3) var(--s-6);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    /* --ease-out, NICHT --ease-spring. Die Spring-Kurve überschwingt am
       Ende und lässt den Stapel beim Überfahren nachwackeln. */
    transition: translate var(--dur) var(--ease-out),
                rotate    var(--dur) var(--ease-out);
  }

  .print-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 2px;
  }

  /* Ab 75rem ist die rechte Spalte breit genug für einen deutlich
     weiteren Fächer. Bei 62rem, dem Umschaltpunkt, geht das nicht:
     dort reicht Karte 3 mit diesen Werten über den Container hinaus
     und wird vom overflow: hidden der Sektion abgeschnitten. */
  @media (min-width: 75rem) {
    .print-stack {
      --pc1-t:  -5rem  1.25rem;   --pc1-r:  -9deg;
      --pc3-t:   6rem  2.5rem;    --pc3-r:   9deg;

      --pc1-th: -6.5rem -0.25rem; --pc1-rh: -15deg;
      --pc2-th:  0      -2.5rem;  --pc2-rh:   0deg;
      --pc3-th:  7.5rem  4rem;    --pc3-rh:  16deg;
    }
  }

  .print-card:nth-child(1) { translate: var(--pc1-t); rotate: var(--pc1-r); z-index: 1; }
  .print-card:nth-child(2) { translate: var(--pc2-t); rotate: var(--pc2-r); z-index: 2; }
  .print-card:nth-child(3) { translate: var(--pc3-t); rotate: var(--pc3-r); z-index: 3; }

  /* Der Stapel fächert bei Hover auf. Eine frühere Fassung verschob nur
     um 8px und drehte um 1.5° — davon war von Karte 1 und 2 kaum etwas
     zu sehen und die Bewegung las sich als Wackeln. Jetzt trennen sich
     die Karten wirklich. */
  .print-stack:hover .print-card:nth-child(1) { translate: var(--pc1-th); rotate: var(--pc1-rh); }
  .print-stack:hover .print-card:nth-child(2) { translate: var(--pc2-th); rotate: var(--pc2-rh); }
  .print-stack:hover .print-card:nth-child(3) { translate: var(--pc3-th); rotate: var(--pc3-rh); }

  /* Erst ab 62rem (992px). Bei 48rem stand der Stapel zwar rechnerisch
     im Container, überlagerte aber die Headline und wurde vom
     overflow: hidden der Sektion rechts abgeschnitten — der Umbruch
     fiel deshalb in der Overflow-Messung nicht auf, nur im Bild. */
  @media (min-width: 62rem) {
    [data-hero="stack"] .hero-inner {
      grid-template-columns: 1.05fr 0.95fr;
    }

    [data-hero="stack"] .print-stack {
      display: flex;
    }

    [data-hero="stack"] .section-hero h1 {
      max-width: 14ch;
    }
  }

  /* ---------------------------------------------------------------
     Karten — gemeinsames Verhalten
     --------------------------------------------------------------- */

  .benefit-card,
  .pricing-card,
  .gallery-item,
  .addon-card,
  .booking-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
  }

  .benefit-card:hover,
  .pricing-card:hover,
  .gallery-item:hover,
  .addon-card:hover {
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--color-accent-edge) 30%, var(--color-border));
    transform: translateY(-2px);
  }

  /* ---- Vorteilskarten ---- */

  .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-block-start: var(--s-7);
  }

  .benefit-card {
    padding: var(--s-6);
  }

  /* Kurze Messinglinie als optischer Anker. Rein dekorativ. */
  .benefit-card::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    margin-block-end: var(--s-4);
  }

  .benefit-card h3 {
    margin-block-end: var(--s-3);
  }

  .benefit-card p {
    color: var(--color-muted);
    margin: 0;
  }

  /* Vier statt drei Karten seit Phase 07.1 (die digitale Zusatznutzen-Karte).
     2x2 statt 4x1: bei vier Karten in einer Zeile bei 72rem Container-Breite
     waere jede Karte unter 17rem breit und der Textabstand zu eng. */
  @media (min-width: 48rem) {
    .benefits-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Phase 9 D-9: Fotografen-Teaser unter dem Benefits-Grid. Ohne
     margin-block-start klebt der Text direkt an den Karten darüber. */
  .section-teaser {
    margin-block-start: var(--s-6);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--fs-sm);
  }

  /* ---- Preiskarten ---- */

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-block-start: var(--s-7);
  }

  .pricing-card {
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .pricing-card--featured {
    border-color: var(--color-accent-edge);
    box-shadow: var(--shadow-md),
                0 0 0 1px var(--color-accent-edge);
  }

  .pricing-card--featured:hover {
    box-shadow: var(--shadow-lg),
                0 0 0 1px var(--color-accent-edge);
    border-color: var(--color-accent-edge);
  }

  .pricing-card h3 {
    margin: 0;
  }

  .pricing-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: var(--lh-tight);
    margin: 0;
  }

  .pricing-duration {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    margin: 0;
  }

  .pricing-inclusions {
    list-style: none;
    padding: 0;
    margin-block-start: var(--s-3);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  /* Häkchen statt Aufzählungspunkt — signalisiert "enthalten"
     statt "Liste". Dekorativ, per ::marker-Ersatz ohne Extra-Markup. */
  .pricing-inclusions li {
    position: relative;
    padding-inline-start: 1.4rem;
  }

  .pricing-inclusions li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.5em;
    width: 0.45rem;
    height: 0.25rem;
    border-inline-start: 2px solid var(--color-link);
    border-block-end: 2px solid var(--color-link);
    rotate: -45deg;
  }

  @media (min-width: 48rem) {
    .pricing-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    /* Sieben Karten in drei Spalten lassen das Rundum-sorglos-Paket
       allein in der dritten Reihe stehen — schmal, überlang und wie ein
       Rest wirkend. Über die volle Breite gezogen liest es sich als das,
       was es ist: das hervorgehobene Paket. */
    .pricing-card--featured {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(13rem, 18rem) 1fr;
      grid-template-rows: auto auto 1fr;
      column-gap: var(--s-8);
      row-gap: var(--s-2);
      align-items: start;
    }

    .pricing-card--featured > h3               { grid-area: 1 / 1; }
    .pricing-card--featured > .pricing-price   { grid-area: 2 / 1; }
    .pricing-card--featured > .pricing-duration{ grid-area: 3 / 1; align-self: start; }

    .pricing-card--featured > .pricing-inclusions {
      grid-area: 1 / 2 / -1 / 3;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-3) var(--s-6);
      margin-block-start: 0;
      align-content: start;
    }
  }

  /* ---- Zusatzoptionen ---- */

  .addons-list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--s-6);
    max-width: var(--content-narrow);
    display: flex;
    flex-direction: column;
  }

  .addons-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-muted);
  }

  .addons-list li:first-child {
    border-block-start: 1px solid var(--color-border);
  }

  /* Zweispaltig ab Tablet-Breite. grid-auto-flow: column statt row,
     damit verwandte Zeilen (die beiden Rahmen-Optionen) untereinander
     in derselben Spalte stehen statt row-major diagonal auseinandergerissen
     zu werden. grid-template-rows zählt die Zeilen pro Spalte fest durch —
     bei 7 Einträgen = 4 (aufgerundet 7/2); Zahl anpassen, wenn Einträge
     dazukommen oder wegfallen. */
  @media (min-width: 48rem) {
    .addons-list {
      max-width: 54rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, auto);
      grid-auto-flow: column;
      column-gap: var(--s-8);
      border-block-start: 1px solid var(--color-border);
    }

    .addons-list li:first-child {
      border-block-start: none;
    }
  }

  /* Preisspalte hervorheben, damit die Zeile scannbar wird. */
  .addons-list li > span:last-child {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ---- Nummerierte Schritte ---- */

  .steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    max-width: var(--content-narrow);
    /* NICHT margin-inline: auto. Zentriert saß die Liste rund 170px
       rechts von ihrer eigenen h1 und dem Lead — sichtbar verrutscht. */
    margin-inline: 0;
  }

  /* Ab 62rem zwei Spalten. grid-auto-flow: column mit drei festen
     Zeilen, damit 1-3 links und 4-6 rechts untereinander stehen —
     bei Zeilenfluss läge 2 rechts neben 1 und die Nummerierung
     liefe im Zickzack. Die DOM-Reihenfolge bleibt 1 bis 6. */
  @media (min-width: 62rem) {
    .steps-list {
      max-width: none;
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, auto);
      column-gap: var(--s-8);
      row-gap: var(--s-7);
      align-items: start;
    }
  }

  .step-item {
    display: flex;
    gap: var(--s-5);
    align-items: flex-start;
  }

  .step-number {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-link);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .step-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .step-copy h3 {
    margin: 0;
  }

  .step-copy p {
    color: var(--color-muted);
    margin: 0;
    max-width: var(--measure);
  }

  /* ---------------------------------------------------------------
     FAQ-Akkordeon

     Natives <details>/<summary> — kein JS. Öffnen, Tastaturbedienung
     und die Ansage des Auf/Zu-Zustands liefert der Browser bereits;
     eigene ARIA-Attribute würden das nur doppeln.

     Trennlinien statt Karten, gleiche Optik wie .addons-list. Als
     Kartenstapel wirkten zehn geschlossene Fragen wie eine Wand —
     genau der Eindruck, den die alte FAQ-Seite hinterlassen hat.
     --------------------------------------------------------------- */

  /* Auf Mobil steht der Vorspann über den Fragen. Die Regeln
     section > .container > h2 greifen hier nicht mehr, weil beide jetzt
     im .faq-intro sitzen — deshalb Abstand und Farbe hier noch einmal. */
  .faq-intro > h2 {
    margin-block-end: var(--s-4);
  }

  .faq-intro > p {
    color: var(--color-muted);
    font-size: var(--fs-md);
    max-width: var(--measure);
    margin: 0;
  }

  .faq-list {
    max-width: var(--content-narrow);
    margin-block-start: var(--s-6);
  }

  /* Ab 62rem zweispaltig, gleicher Umbruchpunkt wie die Schrittliste
     darüber. Einspaltig blieb auf Desktop rechts ein Drittel leer, und
     das Akkordeon über die volle Breite zu ziehen ist keine Option:
     Fragezeile links, Chevron 1100px weiter rechts liest sich nicht
     mehr als eine Zeile. Der Vorspann füllt die linke Spalte. */
  @media (min-width: 62rem) {
    .section-faq > .container {
      display: grid;
      grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
      column-gap: var(--s-8);
      align-items: start;
    }


    .faq-list {
      margin-block-start: 0;
      max-width: none;
    }
  }

  .faq-item {
    border-block-end: 1px solid var(--color-border);
  }

  .faq-item:first-child {
    border-block-start: 1px solid var(--color-border);
  }

  .faq-item > summary {
    display: flex;
    /* start statt baseline: das Chevron ist ein leeres Pseudoelement,
       seine Grundlinie liegt an der Unterkante — bei baseline hinge es
       unter der Frage. Der Versatz unten setzt es auf die Mitte der
       ersten Zeile, auch wenn die Frage zweizeilig umbricht. */
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    /* Standarddreieck weg. list-style greift in Firefox, die Regel
       darunter in älteren WebKit-Versionen — beide werden gebraucht. */
    list-style: none;
  }

  .faq-item > summary::-webkit-details-marker {
    display: none;
  }

  .faq-item > summary:hover {
    color: var(--color-link);
  }

  /* Chevron aus zwei Kanten. Eigenes Element wäre Markup-Ballast,
     eine Grafik ein zusätzlicher Request. */
  .faq-item > summary::after {
    content: '';
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-block-start: 0.45em;
    border-inline-end: 2px solid var(--color-link);
    border-block-end: 2px solid var(--color-link);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform var(--dur) var(--ease-out);
  }

  .faq-item[open] > summary::after {
    transform: rotate(-135deg);
  }

  .faq-answer {
    color: var(--color-muted);
    max-width: var(--measure);
    padding-block-end: var(--s-5);
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-item > summary::after {
      transition: none;
    }
  }

  /* ---------------------------------------------------------------
     Galerie
     --------------------------------------------------------------- */

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
    margin-block-start: var(--s-7);
  }

  .gallery-item {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    padding: 0;
  }

  .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .gallery-item:hover img {
    transform: scale(1.04);
  }

  @media (min-width: 48rem) {
    .gallery-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-5);
    }
  }

  /* ---------------------------------------------------------------
     Kontaktseite
     --------------------------------------------------------------- */

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
    margin-block-start: var(--s-7);
  }

  .contact-aside h2 {
    font-size: var(--fs-lg);
    margin-block-end: var(--s-3);
  }

  .contact-aside p {
    color: var(--color-muted);
    margin-block-end: var(--s-5);
  }

  @media (min-width: 48rem) {
    .contact-grid {
      grid-template-columns: 2fr 1fr;
      gap: var(--s-9);
    }
  }

  /* ---------------------------------------------------------------
     Formulare
     --------------------------------------------------------------- */

  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .form-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--color-text);
  }

  .form-label[data-required="true"]::after {
    content: " *";
    color: var(--color-link);
  }

  /* Feldrand nutzt --color-border-strong (3.5:1). Der dekorative
     --color-border liegt bei 1.3:1 und verfehlt WCAG 1.4.11 für
     Bedienelemente. */
  .form-input,
  .form-textarea {
    min-height: 44px;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--color-muted);
    opacity: 0.75;
  }

  .form-textarea {
    min-height: 9rem;
    line-height: var(--lh-body);
    resize: vertical;
  }

  /* Ein Fokusindikator, nicht zwei. Vorher lagen outline und
     border-color übereinander und ergaben einen doppelten Ring. */
  .form-input:focus-visible,
  .form-textarea:focus-visible {
    border-color: var(--color-link);
    box-shadow: var(--shadow-focus);
    outline: none;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
    margin-block-start: var(--s-2);
  }

  /* ---------------------------------------------------------------
     Datepicker im Kontaktformular

     Der native <input type="date">-Picker lässt sich nicht gestalten
     und folgt der Browsersprache statt lang="de-AT". js/contact-form.js
     versteckt das Feld daher und öffnet stattdessen den Kalender aus
     js/calendar.js — denselben, den der Buchungs-Wizard verwendet.
     Ohne JS bleibt das native Feld sichtbar und nutzbar.
     --------------------------------------------------------------- */

  .date-picker {
    position: relative;
  }

  .date-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 44px;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    text-align: start;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }

  .date-picker-trigger.is-empty {
    color: var(--color-muted);
  }

  .date-picker-trigger:focus-visible {
    border-color: var(--color-link);
    box-shadow: var(--shadow-focus);
    outline: none;
  }

  .date-picker-icon {
    flex: none;
    color: var(--color-muted);
  }

  /* Über dem folgenden Feld schweben statt es zu verschieben. Auf schmalen
     Viewports die volle Feldbreite, darüber die natürliche Kalenderbreite. */
  .date-picker-popover {
    position: absolute;
    z-index: 20;
    inset-inline-start: 0;
    inset-block-start: calc(100% + var(--s-2));
    width: min(100%, 22rem);
    padding: var(--s-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }

  .date-picker-popover.is-above {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--s-2));
  }

  .date-picker-clear {
    align-self: flex-start;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-link);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
  }

  .form-hint {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    margin: 0;
  }

  /* ---- Erfolg / Fehler ---- */

  .form-success,
  .form-error {
    display: none;               /* JS schaltet .is-visible */
    margin-block-start: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
  }

  .form-success.is-visible,
  .form-error.is-visible {
    display: block;
  }

  .form-success {
    background: var(--color-success-bg);
    color: var(--color-success-fg);
    border: 1px solid var(--color-success-br);
  }

  .form-error {
    background: var(--color-error-bg);
    color: var(--color-error-fg);
    border: 1px solid var(--color-error-br);
  }

  /* ---------------------------------------------------------------
     Schwebende Aktionsbuttons
     --------------------------------------------------------------- */

  .whatsapp-fab,
  .booking-fab {
    position: fixed;
    right: var(--gutter);
    z-index: 100;
    width: 3.5rem;               /* 56px — Touchziel ≥ 44px (WCAG 2.5.5) */
    height: 3.5rem;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
  }

  /* Echtes WhatsApp-Markengrün. Die Fläche selbst hebt sich mit 1.88:1
     zu schwach vom Seitengrund ab, deshalb die dunklere Kontur — die
     bringt die Abgrenzung des Bedienelements auf 5.1:1. */
  .whatsapp-fab {
    bottom: var(--gutter);
    background: var(--color-whatsapp);
    border: 1px solid var(--color-whatsapp-edge);
  }

  /* Direkt über dem WhatsApp-Button: dessen Höhe plus ein Abstand.
     Kontur analog zum WhatsApp-FAB, damit beide schwebenden Buttons
     dieselbe Bauweise haben — hier im dunkleren Akzentton. */
  .booking-fab {
    bottom: calc(var(--gutter) + 3.5rem + var(--s-3));
    background: var(--color-accent);
    color: var(--color-accent-on);
    border: 1px solid var(--color-accent-edge);
  }

  .whatsapp-fab:hover,
  .whatsapp-fab:focus-visible,
  .booking-fab:hover,
  .booking-fab:focus-visible {
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
  }

  /* Beschriftungsfarbe je Fläche — weiß auf Markengrün, fast-schwarz
     auf Bernstein. Deshalb hier getrennt und nicht in der Sammelregel. */
  .whatsapp-fab,
  .whatsapp-fab:hover,
  .whatsapp-fab:focus-visible {
    color: var(--color-surface);
  }

  .booking-fab:hover,
  .booking-fab:focus-visible {
    color: var(--color-accent-on);
  }

  .whatsapp-fab:hover,
  .whatsapp-fab:focus-visible {
    background: var(--color-whatsapp-hover);
  }

  .booking-fab:hover,
  .booking-fab:focus-visible {
    background: var(--color-accent-hover);
  }

  /* Fokusring im dunklen Ton — das helle Markengrün wäre als Ring auf
     hellem Grund kaum zu sehen. */
  .whatsapp-fab:focus-visible {
    outline: 2px solid var(--color-whatsapp-edge);
    outline-offset: 3px;
  }

  .booking-fab:focus-visible {
    outline: 2px solid var(--color-accent-edge);
    outline-offset: 3px;
  }

  /* ---------------------------------------------------------------
     Buchungs-Wizard — Schrittanzeige
     --------------------------------------------------------------- */

  .wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-2);
  }

  .wizard-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    flex: 1;
  }

  .wizard-step-circle {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-sunk);
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--fs-sm);
    flex-shrink: 0;
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
  }

  .wizard-step-dot.is-active .wizard-step-circle {
    background: var(--color-accent);
    color: var(--color-accent-on);
    box-shadow: var(--shadow-focus);
  }

  .wizard-step-dot.is-complete .wizard-step-circle {
    background: color-mix(in srgb, var(--color-accent) 55%, var(--color-surface));
    color: var(--color-accent-on);
  }

  .wizard-step-label {
    font-size: 0.6875rem;
    text-align: center;
    color: var(--color-muted);
    line-height: 1.25;
  }

  .wizard-step-dot.is-active .wizard-step-label {
    color: var(--color-text);
    font-weight: 600;
  }

  /* ---------------------------------------------------------------
     Kalender
     --------------------------------------------------------------- */

  .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .calendar-header h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin: 0;
  }

  .calendar-nav-btn {
    min-width: 44px;
    min-height: 44px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-text);
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  .calendar-nav-btn:hover:not(:disabled) {
    background: var(--color-sunk);
    border-color: var(--color-text);
  }

  .calendar-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--s-1);
  }

  .calendar-weekday {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    padding-block: var(--s-2);
  }

  .calendar-cell {
    min-height: 44px;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Verfügbar ist der Normalfall — grün eingefärbt, damit ein ungebuchter
       Monat nicht wie eine leere Ziffernliste aussieht. Gemischt aus einem
       satten Frischgrün, NICHT aus --color-success-fg — der Textton ist
       selbst schon gedeckt/erdig, mehr davon macht die Fläche nur dreckiger
       statt greller. .is-past/.is-unavailable überschreiben das gezielt. */
    background: color-mix(in srgb, #16a34a 18%, white);
    color: var(--color-text);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  /* --color-sunk ist derselbe Ton wie .is-unavailable und war als Hover kaum zu
     sehen. Der weiche Bernstein zeigt deutlich, welcher Tag getroffen wird. */
  .calendar-cell:hover:not(.is-unavailable):not(.is-past):not(.is-selected) {
    background: var(--color-accent-soft);
  }

  .calendar-cell.is-today {
    border-color: var(--color-accent-edge);
    font-weight: 600;
  }

  .calendar-cell.is-selected {
    background: var(--color-accent);
    border-color: var(--color-accent-edge);
    color: var(--color-accent-on);
    font-weight: 600;
  }

  .calendar-cell.is-in-range {
    background: var(--color-accent-soft);
    color: var(--color-text);
  }

  .calendar-cell.is-unavailable {
    /* Sattes Warmrot statt --color-error-fg (derselbe Grund wie beim Grün
       oben — der erdige Textton macht nur dreckig, kein Rot). --color-muted
       als Text bleibt hier klar über 4.5:1. */
    background: color-mix(in srgb, #ef4444 16%, white);
    color: var(--color-muted);
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .calendar-cell.is-past {
    background: transparent;
    color: var(--color-muted);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .calendar-cell:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  .calendar-cell.is-empty {
    visibility: hidden;
    cursor: default;
  }

  /* ---------------------------------------------------------------
     Wizard — Dauer, Zusatzoptionen, Zusammenfassung
     --------------------------------------------------------------- */

  .duration-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
    max-width: 24rem;
    margin-inline: auto;
  }

  .duration-pill {
    min-height: 44px;
    padding-inline: var(--s-3);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .duration-pill:hover:not(:disabled):not(.is-active) {
    background: var(--color-sunk);
    border-color: var(--color-text);
  }

  .duration-pill.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent-edge);
    color: var(--color-accent-on);
    font-weight: 600;
  }

  .duration-pill:disabled {
    border-color: var(--color-border);
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .addons-wizard-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .addon-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--s-3);
    padding: var(--s-4);
    cursor: pointer;
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--color-text);
  }

  .addon-card.is-selected {
    border-color: var(--color-accent-edge);
    background: var(--color-accent-soft);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-accent-edge);
  }

  .addon-check {
    flex-shrink: 0;
    font-size: var(--fs-lg);
    color: var(--color-link);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .addon-card.is-selected .addon-check {
    opacity: 1;
  }

  .wizard-contact-fields {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .wizard-contact-fields .form-input {
    width: 100%;
    min-height: 3.25rem;
  }

  .booking-summary {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .booking-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--color-muted);
  }

  .booking-summary-row > :last-child {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .booking-summary-total {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-text);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--s-4);
  }

  .booking-summary-notice {
    font-size: var(--fs-xs);
    color: var(--color-muted);
  }

  /* Phase 9: Fotografen-Hinweis in Wizard-Schritt 2 (Extras). */
  .wizard-step-hint {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin-block: 0 var(--s-4);
  }

  .wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    flex-shrink: 0;
    background: var(--color-surface);
    padding-block: var(--s-3);
    border-block-start: 1px solid var(--color-border);
  }

  .calendar-status {
    font-size: var(--fs-sm);
    color: var(--color-muted);
  }

  /* Ohne Meldung bleibt sonst eine leere Zeile plus gap unter dem Raster stehen. */
  .calendar-status:empty {
    display: none;
  }

  /* ---------------------------------------------------------------
     Buchungs-Dialog
     --------------------------------------------------------------- */

  /* margin: auto zentriert das modale <dialog>. Das UA-Stylesheet setzt
     das selbst, aber der Reset (* { margin: 0 }) überschreibt es — ohne
     diese Zeile klebt der Dialog oben links in der Ecke. */
  #booking-overlay {
    margin: auto;
    width: min(660px, 100vw - 2rem);
    height: min(90svh, 820px);
    padding: var(--s-5);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    flex-direction: column;
  }

  /* Unter 30rem (~480px) lohnt kein aufschwebendes Kartenfenster mehr — dann
     frisst der 90svh-Deckel plus Innenabstand zu viel vom ohnehin knappen
     Platz. Randlos vollflächig gibt Schritt 1 (Paket + Kalender) die Höhe,
     die er zum Anzeigen ohne internes Scrollen tatsächlich braucht.

     Weder 100dvh noch 100svh hielten dicht (dvh sprang mid-scroll, svh blieb
     dauerhaft zu klein sobald die Adressleiste wirklich verschwand) — beide
     Varianten liefen auf echten Geräten real nach: ein Streifen der Seite
     dahinter (Text + WhatsApp-FAB) blitzte durch. In Chrome verschwand das
     Symptom nur, weil overscroll-behavior: contain dort das Einklappen der
     Adressleiste komplett unterdrückt — in Firefox tut es das nicht, Leiste
     blendet weiterhin aus, Lücke blieb (Video 2026-09-06).
     --visual-vh kommt aus js/booking-wizard.js: window.visualViewport.height
     ist in beiden Engines die tatsächliche sichtbare Höhe in Pixeln, unabhängig
     davon wie dvh/svh/lvh jeweils implementiert sind. 100svh bleibt Fallback
     für den Fall, dass JS nicht läuft oder die API fehlt. */
  @media (max-width: 29.999rem) {
    #booking-overlay {
      width: 100vw;
      height: var(--visual-vh, 100svh);
      max-height: none;
      border-radius: 0;
      padding: var(--s-4);
      overscroll-behavior: contain;
    }

    /* Zweites Sicherheitsnetz: falls --visual-vh aus irgendeinem Grund
       einen Frame hinterherhinkt, zeigt eine durchsichtige Backdrop echten
       Seiteninhalt, eine deckende in Oberflächenfarbe fällt nicht auf. */
    #booking-overlay::backdrop {
      background: var(--color-surface);
      backdrop-filter: none;
    }
  }

  /* display NUR im [open]-Zustand setzen. Unbedingtes display auf einem
     <dialog> hebt das native Schließen aus. */
  #booking-overlay[open] {
    display: flex;
  }

  /* ::backdrop erbt keine Custom Properties vom Dialog — der Wert muss
     hier literal stehen. Es ist der getönte Textton bei 55 %. */
  #booking-overlay::backdrop {
    background: rgba(20, 18, 15, 0.55);
    backdrop-filter: blur(3px);
  }

  @media (min-width: 48rem) {
    #booking-overlay {
      padding: var(--s-6);
    }
  }

  .wizard-close {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .wizard-close:hover,
  .wizard-close:focus-visible {
    background: var(--color-sunk);
    color: var(--color-text);
  }

  @media (prefers-reduced-motion: no-preference) {
    #booking-overlay[open] {
      animation: booking-overlay-in var(--dur) var(--ease-out) both;
    }

    @keyframes booking-overlay-in {
      from {
        transform: translateY(10px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }

  /* ---------------------------------------------------------------
     vanilla-cookieconsent v3 — Überschreibungen

     PRIV-02 / TKG 2021: Annehmen und Ablehnen müssen gleich prominent
     sein. Beide Buttons bleiben identisch bis auf die Beschriftung —
     das ist eine Rechtsanforderung, kein Gestaltungsspielraum.
     --------------------------------------------------------------- */

  :root {
    --cc-btn-primary-bg:                 var(--color-accent);
    --cc-btn-primary-color:              var(--color-accent-on);
    --cc-btn-primary-border-color:       var(--color-accent-edge);
    --cc-btn-primary-hover-bg:           var(--color-accent-hover);
    --cc-btn-primary-hover-color:        var(--color-accent-on);
    --cc-btn-primary-hover-border-color: var(--color-accent-edge);

    --cc-btn-secondary-bg:                 var(--color-accent);
    --cc-btn-secondary-color:              var(--color-accent-on);
    --cc-btn-secondary-border-color:       var(--color-accent-edge);
    --cc-btn-secondary-hover-bg:           var(--color-accent-hover);
    --cc-btn-secondary-hover-color:        var(--color-accent-on);
    --cc-btn-secondary-hover-border-color: var(--color-accent-edge);

    --cc-bg:              var(--color-surface);
    --cc-primary-color:   var(--color-text);
    --cc-secondary-color: var(--color-muted);
    --cc-border-radius:   var(--radius-lg);
    --cc-font-family:     var(--font-body);
  }

  /* Doppelt abgesichert: auch wenn die CDN-Bibliothek ihren
     Variablenvertrag ändert, bleiben beide Buttons gleichwertig. */
  .cm__btn,
  .cm__btn--secondary {
    min-height: 44px !important;
    padding: var(--s-3) var(--s-5) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: var(--fs-sm) !important;
    background: var(--color-accent) !important;
    color: var(--color-accent-on) !important;
    border: 1px solid var(--color-accent-edge) !important;
    border-radius: var(--radius) !important;
  }

  .cm__btn:hover,
  .cm__btn--secondary:hover {
    background: var(--color-accent-hover) !important;
    color: var(--color-accent-on) !important;
    border-color: var(--color-accent-edge) !important;
  }
}

/* ================================================================
   LAYOUT — Wizard-Struktur
   (eigener Block, weil es Layout und nicht Komponente ist)
   ================================================================ */

@layer layout {
  .booking-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    flex: 1;
    min-height: 0;
  }

  #booking-wizard-root-dialog {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .wizard-panel {
    display: none;
  }

  .wizard-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    min-height: 0;
  }

  .calendar-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    max-width: 24rem;
    margin-inline: auto;
    width: 100%;
  }
}

/* ================================================================
   UTILITIES
   ================================================================ */

@layer utilities {
  /* Für Screenreader sichtbar, optisch versteckt */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Skip-Link, sichtbar nur bei Tastaturfokus */
  .sr-only.focusable:focus,
  .sr-only.focusable:focus-visible {
    position: fixed;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 200;
    width: auto;
    height: auto;
    padding: var(--s-3) var(--s-4);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--color-accent);
    color: var(--color-accent-on);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-weight: 600;
  }

  /* Honeypot. MUSS CSS sein, niemals type="hidden" — Bots suchen
     gezielt nach versteckten Feldern. !important, damit keine spätere
     Utility das Feld versehentlich sichtbar macht. */
  .hidden {
    display: none !important;
  }

  /* Sticky Header: Sprungziele dürfen nicht darunter verschwinden. */
  :target {
    scroll-margin-block-start: calc(var(--header-h) + var(--s-4));
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }

    /* Transitions abschalten reicht nicht — die Transforms selbst
       müssen weg, sonst springen Karten und Stapel weiterhin. */
    .btn-primary:hover,
    .btn-secondary:hover,
    .benefit-card:hover,
    .pricing-card:hover,
    .gallery-item:hover,
    .addon-card:hover,
    .whatsapp-fab:hover,
    .booking-fab:hover {
      transform: none;
      translate: none;
    }

    .gallery-item:hover img {
      transform: none;
    }

    /* Der Stapel positioniert sich über translate/rotate — die dürfen
       NICHT auf none, sonst fällt er in sich zusammen. Stattdessen den
       Hover-Zustand auf die Ruhewerte zurücksetzen. */
    .print-stack:hover .print-card:nth-child(1) { translate: var(--pc1-t); rotate: var(--pc1-r); }
    .print-stack:hover .print-card:nth-child(2) { translate: var(--pc2-t); rotate: var(--pc2-r); }
    .print-stack:hover .print-card:nth-child(3) { translate: var(--pc3-t); rotate: var(--pc3-r); }
  }
}

/* ================================================================
   FÜR FOTOGRAFEN — Screenshot-Platzhalter (Phase 9, D-12)
   Steht anstelle von .intro-media img, solange der echte
   Druckdialog-Screenshot noch fehlt. Gleiche max-width wie
   .intro-media img, damit das Seitenlayout sich nicht verschiebt,
   sobald das echte Bild eingesetzt wird.
   ================================================================ */

@layer layout {
  .media-placeholder {
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    text-align: center;
    padding: var(--s-4);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-muted);
    background: var(--color-bg);
  }

  .media-placeholder span:first-child {
    font-weight: 600;
    color: var(--color-text);
  }

  .media-placeholder-caption {
    font-size: 0.875rem;
  }
}

/* ================================================================
   FÜR FOTOGRAFEN — Seiten-Intro mit echtem Studiofoto (Phase 9)
   Text links, Foto rechts. Anders als .section-intro (Produkt-
   Freisteller mit multiply-blend auf Weiß) ist das hier ein echtes
   Foto mit eigenem Hintergrund — object-fit: cover + Karten-Rahmen
   statt Blend-Trick.
   ================================================================ */

@layer layout {
  .page-intro {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--s-6);
  }

  .page-intro-photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
  }

  .page-intro-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Screenshots duerfen nicht per cover zugeschnitten werden — jeder
     abgeschnittene Rand koennte genau die Stelle sein, die den Punkt
     macht (Fensterrahmen, Drucker-Dropdown). contain auf neutralem Grund
     zeigt immer den kompletten Screenshot, unabhaengig vom Seitenverhaeltnis. */
  .page-intro-photo--contain {
    aspect-ratio: auto;
    background: var(--color-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-3);
  }

  .page-intro-photo--contain img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  @media (min-width: 62rem) {
    .page-intro {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }
  }
}

/* ================================================================
   FÜR FOTOGRAFEN — Druckdialog-Screenshot-Trigger + Lightbox-Karussell
   (Phase 9, D-12)
   Kleine Vorschau (erster Screenshot) sitzt in der normalen
   .page-intro-photo-Spalte neben "So funktioniert's für Sie". Klick öffnet
   #dialog-carousel-lightbox — ein eigenes <dialog>, gleiches Grundmuster
   wie #booking-overlay (js/booking-wizard.js). scroll-snap traegt das
   Swipe-Gestenverhalten im Karussell nativ; Pfeile + Punkte kommen aus
   js/dialog-carousel.js on top. object-fit: contain auf neutralem Grund,
   weil die drei Screenshots unterschiedliche Seitenverhaeltnisse haben —
   nichts soll blind zugeschnitten werden. */

@layer layout {
  .dialog-shots-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .dialog-shots-trigger-hint {
    position: absolute;
    inset-inline: var(--s-3);
    inset-block-end: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: rgba(20, 18, 15, 0.72);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--radius);
    width: fit-content;
  }

  .dialog-carousel-lightbox {
    margin: auto;
    width: min(90vw, 56rem);
    padding: var(--s-6);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
  }

  .dialog-carousel-lightbox[open] {
    display: block;
  }

  .dialog-carousel-lightbox::backdrop {
    background: rgba(20, 18, 15, 0.55);
    backdrop-filter: blur(3px);
  }

  .dialog-carousel-lightbox .dialog-carousel-slide {
    padding: var(--s-7);
  }

  .dialog-carousel {
    position: relative;
  }

  .dialog-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--color-sunk);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .dialog-carousel-track::-webkit-scrollbar {
    display: none;
  }

  .dialog-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 3;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-5);
  }

  .dialog-carousel-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
  }

  .dialog-carousel-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    min-width: 44px;
    min-height: 44px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--fs-lg);
    line-height: 1;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  .dialog-carousel-nav:hover {
    background: var(--color-sunk);
    border-color: var(--color-text);
  }

  .dialog-carousel-prev {
    left: var(--s-3);
  }

  .dialog-carousel-next {
    right: var(--s-3);
  }

  .dialog-carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin-block-start: var(--s-4);
  }

  .dialog-carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .dialog-carousel-dot.is-active {
    background: var(--color-accent);
  }
}