/* Die @font-face-Regeln für Brandbe erzeugt inc/setup.php aus den Dateien in
   assets/fonts/. Fehlt eine Datei, greift die Ersatzschrift.

   Aufbau: zuerst die senkrechte Fassung (Handy, Hochformat, ohne JavaScript),
   ganz unten die Regeln für das Querformat-Magazin unter .h-mode. */

:root {
  --petrol: #0f4c64;
  --grey: #eceeef;
  /* Rauchblau für Überschrift und Balken im Kontaktblock */
  --accent: #5b7a8c;
  --paper: #ffffff;
  --ink: #1d2529;
  --text: #2e3539;
  --muted: #74787a;
  --line: #e2e4e6;
  --placeholder: #eef0f1;
  /* Helvetica ist auf Mac und iPhone vorhanden, Windows zeigt Arial. Nichts wird nachgeladen */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Brandbe', var(--font-sans);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-h: 4.5rem;
  /* Vier Schriftgrößen, mehr gibt es nicht:
     Titel (Seitentitel, Startbild), Zwischentitel (Überschriften der Blöcke),
     Mittel (Vorspann, Einschübe, Formular- und Dialogtitel), Text (alles andere).
     Schnitte: Helvetica Regular, Brandbe Regular, Brandbe Bold nur für Menü und Buttons */
  --size-title: clamp(2.6rem, min(6vw, 10vh), 5.5rem);
  --size-heading: clamp(1.9rem, min(3.4vw, 6vh), 3rem);
  --size-medium: 1.5rem;
  --size-text: 1.05rem;
  --label-size: var(--size-text);
  --vlabel-size: var(--size-text);
  --caption-size: var(--size-text);
  --admin: var(--wp-admin--admin-bar--height, 0px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Das vollbreite Karussell darf keinen horizontalen Scrollbalken auslösen */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-text);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Buttons nehmen die Schrift der Seite, nicht die des Browsers (Arial) */
button {
  font: inherit;
}

/* Nur Helvetica Regular, Brandbe Regular und Brandbe Bold (Menü, Buttons): kein Fett im Text */
strong,
b {
  font-weight: inherit;
}

::selection {
  background: var(--petrol);
  color: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Bilder nicht herausziehen oder per langem Tippen sichern (iPhone, iPad) */
img,
video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-size: var(--size-heading);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0;
}

/* Nur für Screenreader und Suchmaschinen — visuell trägt das Logo den Namen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ── Typografie ── */

/* Rubrik über Titeln: kurzer Balken, dann Versalien */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--petrol);
}

.kicker::before {
  content: '';
  width: 2.5rem;
  height: 3px;
  background: currentColor;
}

/* Bauhaus-Paarung: kurzer dicker Balken und feine Haarlinie */
.rule {
  --rule-bar: var(--petrol);
  --rule-line: var(--line);
  display: block;
  width: 100%;
  max-width: 16rem;
  height: 8px;
  background:
    linear-gradient(var(--rule-bar), var(--rule-bar)) left center / 2.5rem 100% no-repeat,
    linear-gradient(var(--rule-line), var(--rule-line)) left center / 100% 1px no-repeat;
}

.title-xl {
  font-size: var(--size-title);
  line-height: 0.98;
  letter-spacing: 0.03em;
  hyphens: auto;
  overflow-wrap: break-word;
}

.lead {
  font-size: var(--size-medium);
  line-height: 1.55;
  color: var(--text);
  max-width: 34rem;
}

.lead p {
  margin: 0 0 0.8em;
}

.lead p:last-child {
  margin-bottom: 0;
}

.prose {
  font-size: var(--size-text);
  line-height: 1.7;
  color: var(--text);
}

.prose p {
  margin: 0 0 1em;
}

.prose h2,
.prose h3 {
  font-size: var(--size-text);
  letter-spacing: 0.14em;
  margin: 1.8em 0 0.7em;
  break-after: avoid;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Laufende Nummern für Serien und Werke */
/* Positionsnummer unter der rechten unteren Bildecke, wie eine Seitenzahl im
   Inhaltsverzeichnis: Steht eine Bildzeile darunter, sitzt sie an deren Ende */
.pos {
  flex: none;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--petrol);
  white-space: nowrap;
}

/* Trennstrich zwischen Serien in hellem Grau: am Handy waagerecht über die ganze Breite,
   im Querformat senkrecht über die Höhe der Bildfläche */
.divider {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--grey);
}

/* Startseite: Der Strich läuft über die Höhe der losen Anordnung, den Abstand
   davor gibt das Motiv mit, danach folgt derselbe Abstand */
.h-mode .panel-mosaic .divider {
  margin: 0 4vw 0 0;
}

/* Nach der letzten Serie trennt der Strich nichts mehr */
.divider:last-child {
  display: none;
}

.h-mode .divider {
  flex: none;
  align-self: stretch;
  width: 2px;
  height: auto;
  margin: calc(var(--header-h) + var(--pad-y)) clamp(1rem, 2vw, 2rem) var(--pad-y);
}

/* Bildzeilen: Titel links, Nummer rechts */
.figure figcaption,
.tile-caption,
.card-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.cap-title,
.tile-title,
.card-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jr-button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  background: var(--petrol);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.jr-button:hover {
  opacity: 0.85;
}

/* ── Header ── */
/* Deckend weiß und ohne Trennlinie, auf allen Seiten gleich */
.site-header {
  position: sticky;
  top: var(--admin);
  z-index: 100;
  background: var(--paper);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* Logo als Maske: Die Farbe kommt aus background-color und kann auf dem
   Startbild zu Weiß wechseln */
.brand-logo {
  display: block;
  height: 3.25rem;
  aspect-ratio: 527 / 410;
  background-color: var(--petrol);
  -webkit-mask: url('../img/logo-fotografie.png') no-repeat center / contain;
  mask: url('../img/logo-fotografie.png') no-repeat center / contain;
  transition: background-color 0.3s ease;
}

.mode-kunst .brand-logo {
  aspect-ratio: 561 / 405;
  -webkit-mask-image: url('../img/logo-kunst.png');
  mask-image: url('../img/logo-kunst.png');
}

/* Fotografie-Logo in drei Teilen: „Jonas“, „Ruhs“ und das senkrechte „Fotografie“
   (Bildpunkte im Logo 527 × 410: Fotografie x 4–95, Jonas y 8–184, Ruhs y 228–404).
   Zusammen sehen sie aus wie das ganze Logo. Nach 15 Sekunden ohne Bewegung setzt
   theme.js .is-idle: Die Teile stellen sich zu einer Zeile auf, alle so hoch wie „Ruhs“,
   mittig im Header: „Jonas Ruhs - Fotografie“. Wo genau, rechnet theme.js aus
   (gleiche Abstände an den sichtbaren Buchstabenkanten) und setzt die Werte unten */
.brand-split {
  --logo-h: 3.25rem;
  /* Hin: zügig, ohne langes Ausrollen, bei 90 % der Zeit weniger als 1 px vom Ziel.
     Zurück: setzt sofort in Bewegung, ohne Anlauf */
  --move: cubic-bezier(0.5, 0, 0.15, 1);
  --back: cubic-bezier(0.3, 0.2, 0.2, 1);
  position: relative;
  display: block;
}

/* Das ganze Logo gibt nur noch die Größe vor, zu sehen sind die drei Teile */
.brand-split .brand-logo {
  visibility: hidden;
}

/* Passt die Zeile nicht neben das Menü, wird sie kleiner (--idle-k) */
.brand-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  will-change: transform;
  transition: transform 0.9s var(--back) 0.1s;
}

.brand-split.is-idle .brand-stage {
  transform: scale(var(--idle-k, 1));
  transition: transform 1s var(--move);
}

/* Jedes Teil: außen Bewegung und eine feine weiße Kontur (unsichtbar auf dem weißen
   Header, trennt aber Wörter, die sich unterwegs kreuzen), innen die Buchstaben */
.brand-piece {
  position: absolute;
  inset: 0;
  will-change: transform, translate;
  filter:
    drop-shadow(1.5px 0 0 var(--paper))
    drop-shadow(-1.5px 0 0 var(--paper))
    drop-shadow(0 1.5px 0 var(--paper))
    drop-shadow(0 -1.5px 0 var(--paper));
  /* Zurück: erst auseinander in zwei Zeilen, dann zur Seite */
  transition:
    transform 0.7s var(--back) 0.35s,
    translate 0.6s var(--back) 0.2s;
}

.brand-ink {
  position: absolute;
  inset: 0;
  background-color: var(--petrol);
  -webkit-mask: url('../img/logo-fotografie.png') no-repeat center / contain;
  mask: url('../img/logo-fotografie.png') no-repeat center / contain;
}

.brand-jonas {
  z-index: 1;
  transform-origin: 61.2% 23.41%;
}

.brand-jonas .brand-ink {
  clip-path: inset(0 0 49.8% 20.5%);
}

.brand-ruhs {
  z-index: 2;
  transform-origin: 53.7% 77.07%;
}

.brand-ruhs .brand-ink {
  clip-path: inset(50.2% 0 0 20.5%);
}

/* Zurück ins Logo: sofort wieder da und gleich darauf zurück an seinen Platz */
.brand-word {
  z-index: 3;
  transform-origin: 9.39% 50%;
  transition:
    opacity 0s,
    transform 0.9s var(--back) 0.1s;
}

.brand-word .brand-ink {
  clip-path: inset(0 79.5% 0 0);
}

/* Hin: Ruhs rückt zuerst zur Seite, dann rücken Jonas und Ruhs in eine Zeile.
   So berühren sie sich unterwegs nicht */
.brand-split.is-idle .brand-piece {
  transition:
    transform 0.7s var(--move),
    translate 0.75s var(--move) 0.25s;
}

.brand-split.is-idle .brand-jonas {
  transform: translateX(var(--jonas-dx, 0));
  translate: 0 var(--jonas-dy, 0);
}

.brand-split.is-idle .brand-ruhs {
  transform: translateX(var(--ruhs-dx, 0));
  translate: 0 var(--ruhs-dy, 0);
}

/* „Fotografie“ dreht sich in die Waagerechte und wird so hoch wie „Ruhs“. Kurz vor dem
   Ziel (weniger als 1 px entfernt) geht es in den gleich großen Schriftzug über */
.brand-split.is-idle .brand-word {
  transform: translate(var(--word-dx, 0), 0) rotate(90deg) scale(var(--word-s, 1));
  opacity: 0;
  transition:
    transform 1s var(--move),
    opacity 0.15s linear 0.85s;
}

.brand-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Bindestrich und Wörter in der Schrift des Logos; Größe, Laufweite und Lage aus theme.js */
.brand-text {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--petrol);
}

/* Der Schriftzug „Fotografie“ löst kurz vor dem Ziel das Logo-Wort ab und tauscht beim
   Zurückfahren sofort wieder mit ihm */
.brand-first {
  opacity: 0;
  transition: opacity 0s;
}

.brand-split.is-idle .brand-first {
  opacity: 1;
  transition: opacity 0.15s linear 0.82s;
}

/* Fenster, deren linke Kante an der rechten Buchstabenkante von „Ruhs“ bzw. „Fotografie“
   liegt (Lage und Breite aus theme.js). Sie fahren mit dem Wort mit; was in ihnen nach
   links geschoben ist, steckt unsichtbar im Wort */
.brand-clip {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.9s var(--back) 0.2s;
}

.brand-slide {
  position: absolute;
  inset: 0;
  will-change: transform;
}

[data-brand-dash] {
  transform: translateX(calc(var(--ruhs-dx, 0px) * -1));
  translate: 0 calc(var(--ruhs-dy, 0px) * -1);
  transition:
    transform 0.7s var(--back) 0.35s,
    translate 0.6s var(--back) 0.2s;
}

.brand-split.is-idle [data-brand-dash] {
  translate: 0 0;
  transition:
    transform 0.7s var(--move),
    translate 0.75s var(--move) 0.25s;
}

[data-brand-tail] {
  transform: translateX(calc(var(--word-dx, 0px) * -1));
}

.brand-split.is-idle .brand-clip {
  transform: none;
}

.brand-split.is-idle [data-brand-tail] {
  transition: transform 1s var(--move);
}

/* Bindestrich: fährt aus „Ruhs“ heraus, während Ruhs ankommt; zurück schnell hinein */
[data-brand-dash] .brand-slide {
  transform: translateX(var(--slide-dash, -100%));
  transition: transform 0.3s cubic-bezier(0.5, 0, 0.75, 0);
}

.brand-split.is-idle [data-brand-dash] .brand-slide {
  transform: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}

/* Weitere Wörter, falls der Text unter Website → Texte mehr als eins hat: fahren aus
   „Fotografie“ heraus, während Fotografie ankommt; zurück hinein */
[data-brand-tail] .brand-slide {
  transform: translateX(var(--slide-tail, -100%));
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.75, 0);
}

.brand-split.is-idle [data-brand-tail] .brand-slide {
  transform: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s;
}

@media (prefers-reduced-motion: reduce) {
  .brand-stage,
  .brand-piece,
  .brand-first,
  .brand-clip,
  .brand-slide {
    transition: none !important;
  }
}


.site-nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
  opacity: 1;
}

/* Unterstreichung wächst beim Hover von links heran */
.site-nav > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  background: var(--petrol);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}


.site-nav > a:hover::after,
.site-nav > a.active::after {
  transform: scaleX(1);
}

/* Galerie-Menü im Atelier: öffnet beim Darüberfahren und per Klick */
.nav-drop {
  position: relative;
}

.nav-drop-toggle {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.nav-drop-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  background: var(--petrol);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-drop-toggle:hover,
.nav-drop-toggle.active,
.nav-drop.open .nav-drop-toggle {
  opacity: 1;
}

.nav-drop-toggle.active::after {
  transform: scaleX(1);
}

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: -1.4rem;
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 15rem;
  padding: 1.25rem 1.4rem;
  background: var(--paper);
  border-left: 2px solid var(--petrol);
  box-shadow: 0 14px 34px rgba(15, 20, 25, 0.1);
}

/* Unsichtbare Brücke, damit das Menü beim Weg dorthin offen bleibt */
.nav-drop-menu::before {
  content: '';
  position: absolute;
  top: -1.1rem;
  left: 0;
  right: 0;
  height: 1.1rem;
}

.nav-drop.open .nav-drop-menu {
  display: flex;
}

@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu {
    display: flex;
  }
}

.nav-drop-menu a {
  white-space: nowrap;
}

.lang-switch {
  display: inline-flex;
  gap: 0.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
}


.lang-switch a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-toggle,
.nav-burger {
  display: none;
}

/* Die volle Navigation braucht rund 1000 px Breite */
@media (max-width: 1024px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 2;
  }

  .nav-burger span {
    width: 22px;
    height: 1px;
    background: currentColor;
    display: block;
  }


  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--paper);
    padding: 1.5rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line);
    gap: 1.1rem;
  }

  /* Im aufgeklappten Mobilmenü (helles Panel) immer dunkle Schrift */

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  .lang-switch {
    border-left: none;
    padding-left: 0;
  }

  /* Im Handy-Menü stehen die Serien eingerückt unter „Galerie“ */
  .nav-drop-toggle {
    cursor: default;
    opacity: 1;
  }

  .nav-drop .nav-drop-menu {
    position: static;
    display: flex;
    min-width: 0;
    margin-top: 0.9rem;
    padding: 0 0 0 1rem;
    gap: 0.9rem;
    background: none;
    box-shadow: none;
  }

  .nav-drop-menu::before {
    display: none;
  }
}

/* ── Panels: die Bausteine jeder Seite ── */
.panel {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}

/* Seitenauftakt */
.panel-opener {
  padding-top: clamp(3rem, 8vw, 6.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.opener-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.back,
.opener-back {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}

.back {
  margin-bottom: 2.5rem;
}

.back:hover,
.opener-back:hover {
  color: var(--petrol);
}

.opener-note {
  margin: 0;
  font-size: var(--size-text);
  color: var(--muted);
}

.opener-note a {
  border-bottom: 1px solid var(--line);
}

.opener-note a:hover {
  color: var(--petrol);
}

/* Der Scroll-Hinweis gehört nur zum Querformat */
.hint {
  display: none;
}

/* Farbiger Texteinschub */
.panel-insert {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  background: var(--insert-bg);
  color: var(--insert-fg);
}

.insert-petrol {
  --insert-bg: var(--petrol);
  --insert-fg: #fff;
}

.insert-grey {
  --insert-bg: var(--grey);
  --insert-fg: var(--petrol);
}

.panel-insert .kicker {
  color: inherit;
}

.panel-insert .rule {
  --rule-bar: currentColor;
  --rule-line: color-mix(in srgb, currentColor 35%, transparent);
}

.insert-text {
  margin: 0;
  max-width: 34rem;
  font-size: var(--size-medium);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.insert-petrol .jr-button {
  background: #fff;
  color: var(--petrol);
}

/* Fließtext */
.columns {
  max-width: 42rem;
}

/* „Lass uns zusammenarbeiten“ */
.panel-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--grey);
}

.panel-cta h2 {
  font-size: var(--size-heading);
  line-height: 1;
  color: var(--accent);
}

.panel-cta .rule {
  --rule-bar: var(--accent);
  --rule-line: #d3d6d8;
}

.panel-cta p {
  margin: 0;
  max-width: 30rem;
  font-size: var(--size-text);
  line-height: 1.55;
  color: var(--text);
}

/* Newsletter: Formular im Kontaktblock */
.panel-newsletter .jr-form {
  width: 100%;
  max-width: 30rem;
  margin-top: 0;
}

.panel-newsletter .consent span {
  font-size: var(--size-text);
  color: var(--text);
}

.newsletter-again {
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--petrol);
  border-bottom: 1px solid currentColor;
}

/* Rückmeldung nach dem Absenden: nicht unter dem Header verschwinden */
.panel-newsletter {
  scroll-margin-top: calc(var(--header-h) + var(--admin));
}

/* Werkanfrage */
.panel-enquiry {
  background: var(--grey);
}

.panel-enquiry h2 {
  font-size: var(--size-medium);
  margin-top: 1.25rem;
}

.enquiry-intro {
  margin: 0.75rem 0 0;
  color: var(--text);
}

/* Angaben und „Werk anfragen“. Im Querformat im Seitenauftakt, sonst unter dem Werk:
   Die Seite enthält beide Stellen, sichtbar ist je Layout eine */
.work-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
}

.work-details-across,
.h-mode .work-details-stacked {
  display: none;
}

.h-mode .work-details-across {
  display: flex;
}

/* Sprungziel: nicht unter dem Header verschwinden */
.panel-enquiry {
  scroll-margin-top: calc(var(--header-h) + var(--admin));
}

.work-facts {
  width: 100%;
  max-width: 26rem;
  margin: 0.25rem 0 0;
  border-top: 1px solid var(--line);
}

.work-facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--size-text);
  line-height: 1.35;
}

/* Formulare etwas enger gesetzt als Fließtext */
.jr-form label,
.jr-form input,
.jr-form textarea,
.form-note,
.form-error {
  line-height: 1.4;
}

.work-facts dt {
  color: var(--muted);
}

.work-facts dd {
  margin: 0;
  text-align: right;
}

/* ── Startbild ── */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h) - var(--admin));
  min-height: 24rem;
  overflow: hidden;
  background: var(--petrol);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-image.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.3)
  );
}

.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.words {
  position: relative;
  /* Etwa eine Zeile unter der Bildmitte */
  top: var(--size-title);
  height: clamp(3rem, 9vw, 8rem);
  width: 100%;
}

.word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.word.active {
  opacity: 1;
  transform: none;
}

.hero-claim {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding-inline: var(--gutter);
}

/* Animierter Balken am unteren Bildrand */
.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-hint span {
  display: block;
  width: 1px;
  height: 3rem;
  background: rgba(255, 255, 255, 0.7);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* ── Startseite Fotografie: Bilder und Filme, locker verteilt ── */
.panel-mosaic {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 8vw, 4.5rem);
}

/* Breite aus dem Format (--wf aus jr_home_tile): Hochformate schmaler, damit alle
   Motive ungefähr dieselbe Fläche haben */
.tile {
  display: block;
  width: calc(88% * var(--wf, 1));
}

/* Unterschiedliche Breiten und Seiten ergeben die lose Anordnung */
.tile:nth-of-type(7n + 2) {
  align-self: flex-end;
}

.tile:nth-of-type(7n + 3) {
  margin-left: 8%;
}

.tile:nth-of-type(7n + 4) {
  align-self: flex-end;
  margin-right: 6%;
}

.tile:nth-of-type(7n + 6) {
  align-self: flex-end;
  margin-right: 10%;
}

.tile-media {
  display: block;
  overflow: hidden;
  background: var(--placeholder);
}

/* Jeder Rahmen hat das Format seines Motivs (--ratio aus der Mediathek) */
.tile-media {
  aspect-ratio: var(--ratio, 3 / 2);
}


.tile img,
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.tile:hover img,
.tile:hover video {
  transform: scale(1.03);
}

.tile-caption {
  margin-top: 0.9rem;
}

/* Kategorie senkrecht neben dem Vorschaubild, von unten nach oben zu lesen.
   Bildzeilen rücken um ihre Breite plus Abstand ein, damit sie am Bild beginnen */
.vlabel {
  flex: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--petrol);
}

/* [data-series]: setzt sich gegen die allgemeine Regel für Bildlinks durch */
.tile-row,
.card-row,
.figure a[data-series] {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

.tile-row .tile-media,
.card-row .card-cover {
  flex: 1 1 auto;
  min-width: 0;
}

.figure a[data-series] img {
  flex: 1 1 auto;
  min-width: 0;
}

.tile-caption,
.figure a[data-series] + figcaption,
.card-row ~ .card-head,
.card-row ~ .card-text,
.card-row ~ p {
  padding-left: calc(var(--vlabel-size) + 0.6rem);
}

.tile-title {
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol);
}

/* ── Bildstrecken ── */
.sequence {
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}

/* Einschübe und Kontaktblock laufen über die ganze Breite */
.sequence > .panel-insert,
.sequence > .panel-cta {
  margin-inline: calc(var(--gutter) * -1);
}

.sequence > .figure {
  padding: 0;
}

.sequence > .panel-text {
  padding: 1rem 0;
}

/* Portrait und Corporate: zwei Bilder nebeneinander, locker versetzt */
.sequence.loose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(3rem, 7vw, 5rem);
  align-items: start;
}

.sequence.loose > .panel-insert,
.sequence.loose > .panel-cta {
  grid-column: 1 / -1;
}

.sequence.stack {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.figure {
  margin: 0;
}

.figure button,
.figure a {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.figure img {
  width: 100%;
  height: auto;
  background: var(--placeholder);
  transition: opacity 0.3s ease;
}

.figure button:hover img,
.figure a:hover img {
  opacity: 0.92;
}

.figure figcaption {
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-top: 0.9rem;
}

/* Fotografen-Hinweis unter einem Bild, etwa „© Name“: klein und zurückhaltend */
.figure .credit {
  font-family: var(--font-sans);
  font-size: var(--size-text);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  margin-top: 0.5rem;
}

.figure-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* Sechs wiederkehrende Varianten ergeben die leicht zufällige Anordnung */
.loose .v1 {
  width: 95%;
}

.loose .v2 {
  width: 78%;
  justify-self: end;
  margin-top: 4.5rem;
}

.loose .v3 {
  width: 84%;
  justify-self: end;
}

.loose .v4 {
  width: 92%;
  margin-top: 3rem;
}

.loose .v5 {
  width: 88%;
  margin-top: 1.5rem;
}

.loose .v6 {
  width: 76%;
  margin-top: 5.5rem;
}

@media (max-width: 700px) {
  .sequence.loose {
    grid-template-columns: 1fr;
  }

  .loose .figure {
    width: 100%;
    margin-top: 0;
    justify-self: stretch;
  }
}

/* ── Serien und Werke als Karten ── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 4rem 3rem;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}

.cards.works {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.cards > .panel-insert {
  grid-column: 1 / -1;
  margin-inline: calc(var(--gutter) * -1);
}

.cards > .card,
.cards > .work-card {
  padding: 0;
}

.card-cover,
.work-image {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}

.card-cover {
  aspect-ratio: var(--ratio, 3 / 2);
}

.work-image {
  aspect-ratio: var(--ratio, 4 / 5);
}

.card-cover img,
.card-cover video,
.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.card:hover .card-cover img,
.card:hover .card-cover video,
.work-card:hover .work-image img {
  transform: scale(1.03);
}

.card h2,
.work-card h2 {
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.12em;
  margin: 1.25rem 0 0.4rem;
}

.card p,
.work-card p {
  margin: 0;
  font-size: var(--size-text);
  font-weight: 400;
  color: var(--muted);
}

/* Kurzbeschreibung unter Serien und Filmen: jede Zeile wie eingegeben,
   eine Leerzeile beginnt einen neuen Absatz */
.card-text {
  display: grid;
  gap: 0.8em;
  margin-top: 0.2rem;
  line-height: 1.5;
}

/* „Verfügbar“ unter den Angaben: Punkt in Petrol, Versalien wie die Rubriken */
.work-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--petrol);
}

.work-status::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: var(--petrol);
  color: #fff;
  padding: 0.25rem 0.7rem;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Behind the Scenes ── */
.bts {
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.panel-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0;
}

.panel-label h2 {
  font-size: var(--size-heading);
}

/* Petersburger Hängung: dicht, unregelmäßig, nur zwei Abstände */
.salon {
  --gap-s: 0.9rem;
  --gap-l: 2.4rem;
  columns: 3;
  column-gap: var(--gap-s);
  padding-top: 2rem;
}

/* Hochformat und Handy: Spalten, schmalere Formate etwas schmaler, damit alle
   Bilder ungefähr dieselbe Fläche haben */
.salon-row {
  display: contents;
}

.salon-item {
  width: calc(100% * var(--wf, 1) / var(--wfmax, 1));
  margin: 0 0 var(--gap-s);
  break-inside: avoid;
}

.salon-item button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.salon-item img {
  width: 100%;
  height: auto;
  background: var(--placeholder);
}

@media (max-width: 640px) {
  .salon {
    columns: 2;
  }
}

/* ── Über mich: Kunden und Ausstellungen ── */
.panel-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.panel-list h2 {
  font-size: var(--size-heading);
}

.list {
  width: 100%;
  max-width: 48rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2 15rem;
  column-gap: 2.5rem;
}

.list li {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--size-text);
  line-height: 1.45;
  break-inside: avoid;
}

.list-year {
  flex: none;
  width: 4.5rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--petrol);
}

/* ── Footer ── */
.site-footer {
  background: var(--petrol);
  color: #fff;
  padding: clamp(3rem, 8vw, 5rem) var(--gutter) 2.5rem;
  font-size: var(--size-text);
  font-weight: 400;
}

.footer-logo {
  display: block;
  height: 4.25rem;
  aspect-ratio: 527 / 410;
  background-color: #fff;
  -webkit-mask: url('../img/logo-fotografie.png') no-repeat left center / contain;
  mask: url('../img/logo-fotografie.png') no-repeat left center / contain;
}

.mode-kunst .footer-logo {
  aspect-ratio: 561 / 405;
  -webkit-mask-image: url('../img/logo-kunst.png');
  mask-image: url('../img/logo-kunst.png');
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2rem 3rem;
  margin-top: 3rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* „Kontakt“ und „Atelier“: so groß wie die Angaben darunter, nicht abgeschwächt */
.footer-label {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.footer-col a:hover {
  color: #fff;
}

.footer-legal a {
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.copyright {
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.75rem;
}

/* Fortschrittsbalken gibt es nur im Querformat */
.progress {
  display: none;
}

/* ── Overlays ── */

/* Solange ein Overlay offen ist, bleibt die Seite dahinter stehen */
html:has(dialog[open]) {
  overflow: hidden;
}

.jr-dialog {
  border: none;
  padding: 2.5rem;
  max-width: 34rem;
  width: calc(100% - 2rem);
  background: var(--grey);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.editions-dialog {
  max-width: 38rem;
}

/* Semi-transparenter, leicht verschwommener Hintergrund */
.jr-dialog::backdrop {
  background: rgba(15, 20, 25, 0.55);
  backdrop-filter: blur(3px);
}

.jr-dialog h2 {
  font-size: var(--size-medium);
}

.jr-dialog h2::after {
  content: '';
  display: block;
  height: 8px;
  max-width: 14rem;
  margin-top: 0.85rem;
  background:
    linear-gradient(var(--petrol), var(--petrol)) left center / 2.5rem 100% no-repeat,
    linear-gradient(var(--line), var(--line)) left center / 100% 1px no-repeat;
}

.editions-dialog p {
  font-size: var(--size-text);
  line-height: 1.65;
  color: var(--text);
  margin: 1.25rem 0 0;
}

.dialog-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  background: none;
  border: none;
  font-size: var(--size-medium);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
}

.dialog-close:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  .jr-dialog {
    padding: 1.75rem;
  }
}

/* ── Formulare ── */
.jr-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 2rem;
}

.panel-enquiry .jr-form {
  margin-top: 1.5rem;
}

.form-row {
  display: grid;
  /* minmax(0, …): Eingabefelder dürfen schmaler werden als ihre Standardbreite */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.jr-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--size-text);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.jr-form input[type='text'],
.jr-form input[type='email'],
.jr-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--size-text);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
}

.jr-form input:focus,
.jr-form textarea:focus {
  outline: none;
  border-color: var(--petrol);
}

/* Kundenbereich: Zugang im Stil des Kontaktblocks, mit Galerie-Code */
.panel-access .client-code {
  width: 100%;
  max-width: 26rem;
  margin-top: 0;
}

.panel-access .opener-note {
  font-size: var(--size-text);
  color: var(--muted);
}

/* Hinweis nur für angemeldete Admins */
.panel-access .admin-note {
  padding: 0.8rem 1rem;
  border-left: 3px solid #a8492a;
  background: #fff;
  font-size: var(--size-text);
  line-height: 1.5;
}

.panel-access .admin-note a {
  border-bottom: 1px solid currentColor;
}

/* Im Kontaktblock-Stil sind Absätze groß gesetzt, Hinweise im Formular bleiben klein */
.panel-access .form-note {
  font-size: var(--size-text);
  line-height: 1.45;
  color: var(--muted);
}

.panel-access .form-error {
  font-size: var(--size-text);
  color: #a8492a;
}

.form-error {
  margin: -0.4rem 0 0;
  font-size: var(--size-text);
  color: #a8492a;
}

/* Kurzer Hinweis unter einem Feld, etwa zur Versandgebühr */
.form-note {
  margin: -0.6rem 0 0;
  font-size: var(--size-text);
  line-height: 1.45;
  color: var(--muted);
}

.jr-form .consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--size-text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
}

.consent a {
  text-decoration: underline;
}

.jr-form .hp {
  position: absolute !important;
  left: -9999px !important;
}

.jr-form .jr-button {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Großansicht im Overlay ── */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox[open] {
  display: flex;
}

.lightbox::backdrop {
  background: rgba(15, 20, 25, 0.88);
  backdrop-filter: blur(4px);
}

.lightbox figure {
  margin: 0;
  text-align: center;
  max-width: min(92vw, 1400px);
}

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox figcaption {
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1.25rem;
}

.lightbox figcaption:empty {
  display: none;
}

.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease;
}

.lightbox button:hover {
  color: #fff;
}

.lb-close {
  top: 1.25rem;
  right: 1.5rem;
  font-size: var(--size-medium);
  line-height: 1;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--size-medium);
  padding: 1rem;
}

.lb-prev {
  left: 0.75rem;
}

.lb-next {
  right: 0.75rem;
}

/* ── Serie im Overlay: Text am Anfang, dann alle Bilder seitwärts ── */
.series-overlay {
  border: none;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: transparent;
  overflow: hidden;
}

.series-overlay::backdrop {
  background: rgba(15, 20, 25, 0.9);
  backdrop-filter: blur(4px);
}

.overlay-track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  height: 100%;
  padding: 0 clamp(1.25rem, 6vw, 6rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.overlay-track::-webkit-scrollbar {
  display: none;
}

.overlay-track:focus {
  outline: none;
}

.overlay-text {
  flex: none;
  width: min(24rem, 80vw);
  margin-right: clamp(1rem, 3vw, 3rem);
  color: rgba(255, 255, 255, 0.9);
}

.overlay-text .kicker,
.overlay-text h2 {
  color: #fff;
}

.overlay-text h2 {
  font-size: var(--size-heading);
  margin: 1.1rem 0 1rem;
}

.overlay-lead {
  margin: 0 0 1rem;
  font-size: var(--size-medium);
  line-height: 1.5;
}

.overlay-lead p {
  margin: 0 0 0.6em;
}

.overlay-text .prose {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--size-text);
}

.overlay-image {
  flex: none;
  margin: 0;
}

/* „03 / 12“ unten links */
.overlay-count {
  position: absolute;
  left: clamp(1.25rem, 6vw, 6rem);
  bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Nach dem letzten Bild: nächste Serie und Kontakt */
.overlay-end {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: min(22rem, 80vw);
  margin-left: clamp(1rem, 3vw, 3rem);
  color: rgba(255, 255, 255, 0.85);
}

.overlay-next-series {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 0 0 2rem;
  margin-bottom: 0.75rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.overlay-next-series .kicker {
  color: #fff;
}

.overlay-next-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-medium);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.overlay-next-series:hover .overlay-next-title {
  opacity: 0.75;
}

.overlay-end p {
  margin: 0;
  font-size: var(--size-text);
  line-height: 1.5;
}

.overlay-end .jr-button {
  background: #fff;
  color: var(--petrol);
}

.overlay-image img {
  width: auto;
  height: 78dvh;
  max-width: 86vw;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.series-overlay > button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease;
}

.series-overlay > button:hover {
  color: #fff;
}

/* ── Einblenden beim Hineinscrollen ──
   reveal-on setzt erst theme.js: Ohne Skript bleibt alles sichtbar */
.reveal-on .reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity 0.9s ease,
    transform 1s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.reveal-on .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Eigener Mauszeiger ──
   Läuft als Popover im Top-Layer, damit er auch über <dialog>-Overlays
   liegt. Die inset/border/padding-Werte überschreiben die Popover-
   Standardstyles des Browsers. */
.cursor {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: none;
  padding: 0;
  overflow: visible;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  /* Eigene Ebene: Der Punkt folgt der Maus, ohne dass die Seite neu zeichnet */
  will-change: transform;
  transition:
    opacity 0.25s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cursor.visible {
  opacity: 1;
}

/* Über Bildern und Filmen, dunklen Flächen und dem dunklen Hintergrund geöffneter
   Fenster: weiß mit feinem schwarzem Rand (theme.js setzt .on-dark) */
.cursor.on-dark {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Nativen Cursor komplett ausblenden, wenn der eigene aktiv ist. !important,
   damit auch cursor:pointer-Regeln nicht doch den Systemzeiger einblenden */
body.has-cursor,
body.has-cursor * {
  cursor: none !important;
}

@media (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Querformat-Magazin: Die Seite läuft von links nach rechts.
   html.h-mode setzt das Skript im <head> auf großen, queren Bildschirmen.
   Alle Panels sind so hoch wie das Fenster und reihen sich nebeneinander.
   ══════════════════════════════════════════════════════════════════════ */

.h-mode {
  overflow-y: hidden;
  scrollbar-width: none;
}

.h-mode::-webkit-scrollbar {
  display: none;
}

.h-mode body {
  overflow: visible;
  width: max-content;
  min-width: 100%;
}

.h-mode .site-header {
  position: fixed;
  left: 0;
  right: 0;
}

.h-mode .mag {
  /* Bühne: die nutzbare Höhe unter dem Header */
  --pad-y: clamp(1.5rem, 4.5vh, 3rem);
  --pad-x: clamp(1.25rem, 2.6vw, 3rem);
  --stage: calc(100svh - var(--admin) - var(--header-h) - 2 * var(--pad-y));
  /* Kontaktblöcke und Texteinschübe: eine gemeinsame Breite. Sie reicht für das
     längste Wort einer Überschrift („zusammenarbeiten“) ohne Trennung */
  --block-w: clamp(21rem, 26vw, 30rem);
  --block-pad: clamp(1.75rem, 2.6vw, 3rem);
  display: flex;
  height: calc(100svh - var(--admin));
}

.h-mode .mag-main {
  display: flex;
  flex: none;
  height: 100%;
}

.h-mode .sequence,
.h-mode .cards,
.h-mode .bts {
  display: contents;
}

.h-mode .panel {
  flex: none;
  height: 100%;
  margin: 0;
  padding: calc(var(--header-h) + var(--pad-y)) var(--pad-x) var(--pad-y);
}

/* Auftakt: Rubrik, Titel und Vorspann unten links wie auf einem Cover */
/* Lange Titel machen den Auftakt breiter statt umzubrechen, bis 70 % des Fensters */
.h-mode .panel-opener {
  display: flex;
  flex-direction: column;
  min-width: clamp(26rem, 36vw, 46rem);
  max-width: 70vw;
  padding-left: var(--gutter);
  padding-right: clamp(2rem, 4vw, 5rem);
  overflow-y: auto;
  scrollbar-width: none;
}

.h-mode .opener-body {
  margin-top: auto;
}

/* Werkseite in niedrigen Fenstern (Laptop): Angaben und „Werk anfragen“ sollen
   ohne Scrollen in den Auftakt passen, also enger setzen */
@media (max-height: 820px) {
  .h-mode .single-jr_work .opener-body {
    gap: 1rem;
  }

  .h-mode .single-jr_work .back {
    margin-bottom: 1rem;
  }

  .h-mode .work-details {
    gap: 1rem;
  }

  .h-mode .work-facts div {
    padding: 0.32rem 0;
  }

  .h-mode .single-jr_work .hint {
    margin-top: 1.25rem;
  }
}

@media (max-height: 700px) {
  .h-mode .single-jr_work .hint {
    display: none;
  }

  .h-mode .single-jr_work .title-xl {
    font-size: var(--size-title);
  }
}

.h-mode .back {
  margin-bottom: 1.5rem;
  align-self: flex-start;
}

.h-mode .title-xl {
  font-size: var(--size-title);
}

.h-mode .hint {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-size: var(--size-text);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hint-line {
  width: 3rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%,
  100% {
    transform: scaleX(0.35);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Texteinschübe: Text unten, Farbe über die volle Höhe */
.h-mode .panel-insert {
  width: var(--block-w);
  justify-content: flex-end;
  padding-inline: var(--block-pad);
  overflow-y: auto;
  scrollbar-width: none;
}

.h-mode .insert-text {
  font-size: var(--size-medium);
}

/* Fließtext in Spalten, die nach rechts weiterlaufen. Die Breite setzt theme.js */
.h-mode .panel-text {
  padding-inline: clamp(2rem, 3.5vw, 4rem);
}

.h-mode .columns {
  height: var(--stage);
  width: 23rem;
  max-width: none;
  column-width: 23rem;
  column-gap: 3rem;
  column-fill: auto;
  column-rule: 1px solid var(--line);
}

.h-mode .legal .columns {
  width: 21rem;
  column-width: 21rem;
  font-size: var(--size-text);
}

/* Bilder: Höhe aus der Bühne, Breite aus dem Seitenverhältnis */
.h-mode .figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: auto;
  padding-inline: clamp(0.6rem, 1.4vw, 1.5rem);
}

.h-mode .figure button,
.h-mode .figure a {
  width: auto;
}

.h-mode .figure img {
  width: auto;
  max-width: 80vw;
  height: calc(var(--stage) * var(--h, 1) - var(--cap, 0rem));
  object-fit: contain;
}

/* Bildunterschrift so breit wie das Bild, nie breiter */
.h-mode .figure figcaption {
  width: 0;
  min-width: 100%;
  height: var(--cap);
  margin: 0;
  padding-top: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Platz für den Fotografen-Hinweis, das Bild wird um so viel niedriger */
.h-mode .figure.has-credit {
  --cap: 1.8rem;
}

.h-mode .figure .credit {
  padding-top: 0.5rem;
}

/* Portrait und Corporate: unterschiedliche Höhen und Lagen */
.h-mode .loose .figure {
  --cap: 2.6rem;
  justify-self: auto;
}

.h-mode .loose .v1 {
  --h: 0.9;
}

.h-mode .loose .v2 {
  --h: 0.66;
  justify-content: flex-start;
}

.h-mode .loose .v3 {
  --h: 0.78;
  justify-content: center;
}

.h-mode .loose .v4 {
  --h: 0.96;
}

.h-mode .loose .v5 {
  --h: 0.7;
}

.h-mode .loose .v6 {
  --h: 0.82;
  justify-content: flex-start;
}

/* Startseite: Motive in ungefähr gleicher Größe, wie lose hingelegt.
   --y: Abstand von oben (Anteil der Bühne), --mx: Abstand zum nächsten Motiv */
.h-mode .panel-mosaic {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding-inline: clamp(2rem, 4vw, 5rem);
}

/* Höhe aus dem Format (--hf aus jr_home_tile): Hochformate höher, Querformate
   niedriger, alle mit ungefähr derselben Fläche. --y versetzt die Motive, aber nie
   so weit, dass eines unten aus der Bühne ragt */
.h-mode .tile {
  --cap: 2.9rem;
  --media-h: calc(var(--stage) * var(--hf, 0.52));
  flex: none;
  width: auto;
  align-self: auto;
  margin: max(0px, min(calc(var(--stage) * var(--y, 0)), calc(var(--stage) - var(--media-h) - var(--cap)))) var(--mx, 3vw) 0 0;
}

.h-mode .tile-media {
  height: var(--media-h);
  aspect-ratio: auto;
}

.h-mode .tile-media {
  width: calc(var(--media-h) * var(--ratio, 1.5));
}

.h-mode .tile:nth-of-type(7n + 1) {
  --y: 0.02;
  --mx: 4vw;
}

.h-mode .tile:nth-of-type(7n + 2) {
  --y: 0.08;
  --mx: 3vw;
}

.h-mode .tile:nth-of-type(7n + 3) {
  --y: 0.5;
  --mx: 5vw;
}

.h-mode .tile:nth-of-type(7n + 4) {
  --mx: 3.5vw;
}

.h-mode .tile:nth-of-type(7n + 5) {
  --y: 0.26;
  --mx: 4vw;
}

.h-mode .tile:nth-of-type(7n + 6) {
  --y: 0.38;
  --mx: 4.5vw;
}

.h-mode .tile:nth-of-type(7n + 7) {
  --y: 0.1;
  --mx: 4vw;
}

/* Mehr als sieben Motive: Die sieben Lagen wiederholen sich, das letzte schließt bündig */
.h-mode .tile:last-of-type {
  --mx: 0;
}

.h-mode .tile-caption {
  flex-wrap: nowrap;
  width: 0;
  min-width: 100%;
  height: var(--cap);
  margin: 0;
  padding-top: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
}

/* Film vor den Bildern einer Serie */
.h-mode .figure-video video {
  width: auto;
  height: var(--stage);
  max-width: 85vw;
}

/* Serien und Werke: abwechselnd oben und unten */
.h-mode .card,
.h-mode .work-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.h-mode .card-low {
  justify-content: flex-end;
}

/* Höchstens 60 % der Bühne, aber immer Platz für Titel und eine mehrzeilige Kurzbeschreibung */
.h-mode .card {
  --cover-h: min(var(--stage) * 0.6, var(--stage) - 16rem);
}

.h-mode .card-cover {
  height: var(--cover-h);
  width: calc(var(--cover-h) * var(--ratio, 1.5));
  aspect-ratio: auto;
}

.h-mode .work-image {
  height: calc(var(--stage) * 0.78);
  width: calc(var(--stage) * 0.78 * var(--ratio, 0.8));
  aspect-ratio: auto;
}

.h-mode .card .card-head,
.h-mode .card .card-text,
.h-mode .card p,
.h-mode .work-card .card-head,
.h-mode .work-card p {
  width: 0;
  min-width: 100%;
}

.h-mode .panel-cta {
  width: var(--block-w);
  justify-content: center;
  padding-inline: var(--block-pad);
}

/* Kundenbereich: Wird es zu eng, darf der Block in sich scrollen, statt unter den Header zu rutschen */
.h-mode .panel-access {
  justify-content: safe center;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Niedrige Laptop-Fenster: engere Abstände, damit Code-Feld und Button ohne Scrollen passen */
@media (max-height: 760px) {
  .h-mode .panel-access {
    gap: 1rem;
  }

  .h-mode .panel-access .client-code {
    gap: 0.6rem;
  }

  /* Mit Fehlermeldung entfällt der Hinweis darunter, die Meldung sagt genug */
  .h-mode .panel-access .form-error ~ .form-note {
    display: none;
  }
}

.h-mode .panel-enquiry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  width: clamp(30rem, 40vw, 42rem);
  padding-inline: clamp(2rem, 3vw, 3.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.h-mode .panel-enquiry .jr-form {
  gap: 0.8rem;
}

/* Niedrige Laptop-Fenster: Der Satz über dem Anfrageformular entfällt, damit der Senden-Button sichtbar bleibt */
@media (max-height: 760px) {
  .h-mode .panel-enquiry .enquiry-intro {
    display: none;
  }
}

/* Laptop-Fenster: Das Anfrageformular soll samt Senden-Button ohne Scrollen passen */
@media (max-height: 820px) {
  .h-mode .panel-enquiry textarea {
    height: 3.6rem;
  }
}

@media (max-height: 700px) {
  .h-mode .work-facts div {
    padding: 0.2rem 0;
  }

  .h-mode .panel-enquiry h2 {
    margin-top: 0.75rem;
  }

  .h-mode .panel-enquiry .enquiry-intro {
    margin-top: 0.5rem;
  }

  .h-mode .panel-enquiry .jr-form {
    gap: 0.55rem;
    margin-top: 0.9rem;
  }

  .h-mode .panel-enquiry .jr-form label {
    gap: 0.25rem;
  }

  .h-mode .panel-enquiry textarea {
    height: 2.7rem;
  }

  .h-mode .panel-enquiry {
    padding-top: calc(var(--header-h) + var(--admin) + 0.75rem);
  }

  .h-mode .panel-enquiry .form-note {
    margin-top: -0.3rem;
  }

  .h-mode .panel-enquiry {
    padding-bottom: 1rem;
  }
}

/* Behind the Scenes: senkrechter Titel vor den Bildern */
.h-mode .panel-label {
  justify-content: flex-end;
  padding-right: 0.5rem;
}

.h-mode .panel-label .kicker {
  display: none;
}

.h-mode .panel-label h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--size-heading);
  white-space: nowrap;
}

/* Bilderwand: zwei Reihen um eine Mittellinie, alle Bilder mit ungefähr derselben
   Fläche. --s ist die Kantenlänge eines quadratischen Bildes dieser Fläche, so groß,
   dass das schmalste Hochformat genau eine halbe Bühne hoch ist (--smin aus salon.php).
   Zwei Abstände: klein zwischen Bildern und Reihen, groß nach jedem dritten Bild */
.h-mode .salon {
  --row: calc((var(--stage) - var(--gap-s)) / 2);
  --s: calc(var(--row) * var(--smin, 0.8));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-s);
  columns: auto;
  column-gap: 0;
}

.h-mode .salon-row {
  display: flex;
  gap: var(--gap-s);
}

/* Obere Reihe hängt von unten an der Mittellinie, untere von oben, leicht versetzt */
.h-mode .salon-row-1 {
  align-items: flex-end;
}

.h-mode .salon-row-2 {
  align-items: flex-start;
  padding-left: calc(var(--s) * 0.55);
}

.h-mode .salon-item {
  flex: none;
  width: calc(var(--s) * var(--wf, 1));
  margin: 0;
}

.h-mode .salon-item:nth-child(3n):not(:last-child) {
  margin-right: calc(var(--gap-l) - var(--gap-s));
}

/* Listen: Spalten unter der Überschrift, die nach rechts weiterlaufen.
   Die Breite setzt theme.js */
.h-mode .panel-list {
  justify-content: flex-end;
  padding-inline: clamp(2rem, 3.5vw, 4rem);
}

.h-mode .list {
  height: calc(var(--stage) - 6.5rem);
  width: 17rem;
  max-width: none;
  columns: 17rem;
  column-fill: auto;
}

/* Startbild über die volle Fensterbreite */
.h-mode .hero {
  flex: none;
  width: 100vw;
  height: calc(100% - var(--header-h));
  min-height: 0;
  margin-top: var(--header-h);
}

.h-mode .scroll-hint span {
  width: 4rem;
  height: 1px;
  animation-name: scrollPulseX;
}

@keyframes scrollPulseX {
  0%,
  100% {
    transform: scaleX(0.35);
    transform-origin: left;
    opacity: 0.4;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Footer als letzte Seite */
.h-mode .site-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: clamp(22rem, 28vw, 30rem);
  padding: calc(var(--header-h) + var(--pad-y)) clamp(2rem, 3vw, 3.5rem) var(--pad-y);
}

.h-mode .footer-grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 0;
}

.h-mode .progress {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  z-index: 90;
  pointer-events: none;
}

.h-mode .progress span {
  display: block;
  height: 100%;
  background: var(--petrol);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.reveal-on.h-mode .reveal {
  transform: translate3d(3rem, 0, 0);
}

.reveal-on.h-mode .reveal.in {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on.h-mode .reveal {
    transform: none;
  }
}