/* ==========================================================================
   HK-Media - Designsystem
   Dunkel, schlicht, fotografie-zentriert. Ein Akzentton (Markengelb),
   sparsam eingesetzt.

   Responsive-Grundsätze, damit horizontales Scrollen strukturell nicht
   entstehen kann:
     - alle Display-Schriftgrößen über clamp(), nie fix in px
     - Grids über auto-fit/minmax statt fester Spaltenbreiten
     - min-width:0 auf Grid-/Flex-Kindern (sonst erzwingt min-content Überlauf)
     - Medien immer max-width:100%
   ========================================================================== */

/* --------------------------------------------------------------- Tokens -- */
:root {
  --bg:        #0d0e10;
  --bg-raise:  #151719;
  --bg-card:   #191c1f;
  --line:      rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);

  --fg:        #f3f4f6;
  --fg-muted:  #9ba1a9;
  --fg-dim:    #6c737b;

  --accent:    #ffc800;
  --accent-dk: #d9a900;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  /* Abstandsskala */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --s8: 7rem;

  --radius:    14px;
  --radius-sm: 10px;

  --nav-h: 68px;
  /*
   * Breite des Inhalts. Gilt für Seite, Navigation und Fußzeile zugleich -
   * deshalb hier und nicht an den drei Stellen einzeln.
   *
   * Vorher 1180px fest. Der Rand war damit zu breit, und ein fester Wert kann
   * das auch nicht überall gleich beheben: Auf 2560 blieben nach dem Aufweiten
   * auf 1580px immer noch 522px Rand, auf 1440 dagegen nur noch 32px.
   *
   * DIE RECHNUNG (30.07.2026): Der Rand ist (Fenster - wrap) / 2. Soll er halb
   * so groß werden, muss wrap auf (Fenster + 1180) / 2 - und das ist
   * 50vw + 590px. Damit halbiert sich der Rand bei JEDER Fensterbreite, nicht
   * nur bei einer.
   *
   * Gemessen, Weg vom Bildschirmrand bis zum Text:
   *
   *     Fenster   vorher   jetzt
   *      2560px    722px    377px
   *      1920px    402px    217px
   *      1440px    162px     97px
   *      1280px     82px     57px
   *
   * Der Deckel von 1800px ist kein Zierrat: Ohne ihn wächst die Textbreite auf
   * einem 4K-Schirm auf über 2500px, und Zeilen mit 300 Zeichen liest niemand -
   * das Auge findet beim Umbruch die nächste Zeile nicht wieder.
   *
   * Und deshalb steht hier auch px und nicht nur vw: vw hängt am Fenster, nicht
   * am Menschen davor. Wer im Browser die Schrift größer stellt, weil er
   * schlecht sieht, hat von einer reinen vw-Angabe nichts.
   */
  --wrap: min(calc(50vw + 590px), 1800px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- Reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Anker landen nicht unter der fixierten Navigation */
  scroll-padding-top: calc(var(--nav-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, iframe {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Sicherheitsnetz: ein überlanges Wort bricht, statt die Seite zu weiten */
  overflow-wrap: break-word;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

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

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--s2) var(--s3);
  background: var(--accent);
  color: #000;
  font-weight: 600;
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* -------------------------------------------------------------- Layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section { padding-block: clamp(3.5rem, 9vw, var(--s8)); }
.section--tight { padding-block: clamp(2.5rem, 6vw, var(--s7)); }
.section--raise { background: var(--bg-raise); }

/* Abschnittskopf */
.head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, var(--s6)); }
.head--center { margin-inline: auto; text-align: center; }

.head__eyebrow {
  display: block;
  margin-bottom: var(--s2);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.head__title {
  font-size: clamp(1.9rem, 5vw, 3rem);
}

.head__text {
  margin-top: var(--s3);
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
}

/* Generisches Grid: passt sich selbst an, keine Breakpoint-Pflege nötig */
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, var(--s4));
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.grid > * { min-width: 0; }

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* -------------------------------------------------------- Navigation --- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(13, 14, 16, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav--solid {
  background: rgba(13, 14, 16, 0.96);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.nav__brand { flex: 0 0 auto; }
/* logo.svg ist schwarz gezeichnet und auf dunklem Grund unsichtbar.
   invert() dreht es zu Weiß, ohne ein zweites Asset zu brauchen; die grauen
   Akzente im Wortzeichen bleiben als helles Grau erhalten. */
.nav__brand img {
  height: 24px;
  width: auto;
  filter: invert(1);
}

.nav__menu { margin-left: auto; }
.nav__menu ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.85rem);
}
.nav__menu a {
  position: relative;
  display: block;
  padding-block: var(--s1);
  color: var(--fg-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.nav__menu a:hover { color: var(--fg); }
.nav__menu a[aria-current="page"] { color: var(--fg); }

/*
 * Kundenkonto: abgesetzt am Ende der Navigation, mit Rahmen als Knopf - so
 * liest es sich als Zugang und nicht als weitere Inhaltsseite.
 */
.nav__konto { margin-left: clamp(0.25rem, 1vw, 0.6rem); }
.nav__konto a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__konto a:hover { border-color: var(--accent); color: var(--accent); }
.nav__konto svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* Der Unterstrich der aktiven Seite passt hier nicht - der Rahmen zeigt es an */
.nav__konto a[aria-current="page"]::after { display: none; }
.nav__konto a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }

/* Grüner Punkt, wenn eine Sitzung läuft */
.nav__punkt {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #7ed957;
  flex: 0 0 auto;
}

/* Auf sehr schmalen Geräten in der Kopfzeile nur das Symbol */
@media (max-width: 420px) {
  .nav__konto a span:not(.nav__punkt) { display: none; }
  .nav__konto a { padding: 0.42rem 0.6rem; }
}
.nav__menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
}

/* Mobile-Umschalter - nur unterhalb 880px sichtbar */
.nav__toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--s2);
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.nav__bars {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: background 0.2s var(--ease);
}
.nav__bars::before,
.nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav__bars::before { top: -5px; }
.nav__bars::after  { top: 5px; }

.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: absolute;
    inset: 100% 0 auto 0;
    margin: 0;
    /* deckend, damit kein Seiteninhalt hinter den Menüpunkten durchschimmert */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    /* geschlossen: nicht dargestellt und nicht fokussierbar */
    display: none;
  }
  .nav__menu.is-open { display: block; }

  .nav__menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) clamp(1rem, 4vw, 2rem) var(--s4);
  }
  .nav__menu li + li { border-top: 1px solid var(--line-soft); }
  .nav__menu a {
    padding-block: var(--s3);
    font-size: 1rem;
  }
  .nav__menu a[aria-current="page"]::after { display: none; }
  .nav__menu a[aria-current="page"] { color: var(--accent); }

  /* Im Klappmenü reiht sich der Zugang als normaler Eintrag ein - ein Knopf
     mitten in einer Liste untereinander sähe verloren aus. */
  .nav__konto { margin-left: 0; }
  .nav__konto a {
    padding: var(--s3) 0;
    border: 0;
    border-radius: 0;
  }
  .nav__konto a:hover { border: 0; }
  .nav__konto a[aria-current="page"] { border: 0; }
  .nav__konto a span:not(.nav__punkt) { display: inline; }
}

/* ---------------------------------------------------------------- Hero -- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(92vh, 780px);
  padding-top: calc(var(--nav-h) + var(--s6));
  padding-bottom: clamp(2.5rem, 7vw, var(--s7));
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* header-bg bringt eine fest eingebackene Abdunklung mit - die wird hier
     wieder angehoben, sonst versinkt das Motiv komplett im Schwarz.
     ACHTUNG beim Austauschen der Vorlage: Die Anhebung verstaerkt auch
     Kompressionsfehler. Gemessen an der WebP-Fassung (bin/gestaltung-webp.php)
     bleibt der Unterschied am Bildschirm im Mittel unter einem Viertelprozent -
     bei einem helleren Motiv lohnt trotzdem ein zweiter Blick. */
  filter: brightness(1.55) saturate(1.08);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Nur so viel abdunkeln, wie für die Lesbarkeit von Text und Navigation
     nötig ist - in der Bildmitte bleibt das Motiv sichtbar. */
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    rgba(13, 14, 16, 0.9) 16%,
    rgba(13, 14, 16, 0.34) 56%,
    rgba(13, 14, 16, 0.62) 100%
  );
}

.hero__inner { width: 100%; }

.hero__title {
  max-width: 20ch;
  font-size: clamp(2.3rem, 7.5vw, 4.5rem);
  line-height: 1.04;
}

.hero__text {
  max-width: 46ch;
  margin-top: var(--s4);
  color: #d6d9dd;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-top: clamp(1.75rem, 4vw, var(--s5));
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: clamp(2rem, 5vw, var(--s6));
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 0.88rem;
}
.hero__meta b {
  display: block;
  color: var(--fg);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------------- Button -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.85rem 1.5rem;
  /* ausdrücklich transparent: ein <button> bekommt sonst vom Browser einen
     hellen Standardhintergrund, während ein <a> mit denselben Klassen korrekt
     aussieht - der Unterschied fällt erst bei .btn--ghost auf */
  background: transparent;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--accent); color: #111; }
.btn--primary:hover { background: #ffd433; }

.btn--ghost { border-color: var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Kleine Ausführung für Aktionen in Kacheln, Tabellen und Listen */
.btn--klein {
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  gap: 0.35rem;
}
.btn--klein svg { width: 14px; height: 14px; }

/* Zurückhaltend, aber erkennbar als Knopf - für Nebensächliches wie
   "entfernen" oder "leeren". Vorher waren das nackte Textknöpfe, die im
   dunklen Design wie Systemschrift aus einem alten Browser wirkten. */
.btn--still {
  border-color: var(--line-soft);
  color: var(--fg-dim);
  background: transparent;
}
.btn--still:hover {
  border-color: rgba(255, 138, 128, 0.5);
  color: #ff8a80;
  transform: none;
}

/* "In den Warenkorb" auf einer Shop-Kachel: beim Zeigen gelb wie der
   Hauptknopf - aber ohne den Versatz von .btn:hover, sonst wandert er aus der
   Linie mit dem Preis daneben. */
.btn--korb {
  border-color: var(--line);
  color: var(--fg);
}
.btn--korb:hover,
.btn--korb:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

/* Zustand "liegt im Korb": grün, beim Zeigen rot mit Text "Entfernen" */
.btn--drin {
  border-color: rgba(126, 217, 87, 0.45);
  color: #7ed957;
  background: rgba(126, 217, 87, 0.08);
}
.btn--drin:hover,
.btn--drin:focus-visible {
  border-color: rgba(255, 138, 128, 0.6);
  color: #ff8a80;
  background: rgba(255, 138, 128, 0.1);
}

/* Kein Anheben bei den Knöpfen in einer Kachelzeile */
.btn--korb:hover,
.btn--drin:hover { transform: none; }

/*
 * Zwei Beschriftungen im selben Knopf, übereinandergelegt. Der Knopf ist damit
 * so breit wie die längere von beiden und wackelt beim Wechsel nicht.
 */
.tausch { display: grid; align-items: center; }
.tausch > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: opacity 0.15s var(--ease);
}
.tausch__hover { opacity: 0; }
.btn:hover .tausch__ruhe,
.btn:focus-visible .tausch__ruhe { opacity: 0; }
.btn:hover .tausch__hover,
.btn:focus-visible .tausch__hover { opacity: 1; }

/* --------------------------------------------------------------- Karte -- */
.card {
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--line); }

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s3);
  color: var(--accent);
  background: rgba(255, 200, 0, 0.1);
  border-radius: 12px;
}
.card__icon svg { width: 22px; height: 22px; }

.card__title { font-size: 1.15rem; margin-bottom: var(--s2); }
.card__text  { color: var(--fg-muted); font-size: 0.96rem; }

/* ----------------------------------------------------------- Portfolio -- */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-card);
  aspect-ratio: 4 / 3;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease), filter 0.4s var(--ease);
}
.tile:hover img { transform: scale(1.05); }

.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  /* Reichlich Luft nach oben, damit der Verlauf Strecke zum Ausblenden hat.
     Ohne das sitzt die Schrift auf einem fast transparenten Bereich und wird
     auf hellen Motiven (rotes Auto, weißes Kleid) unlesbar. */
  padding: clamp(2.75rem, 7vw, 4rem) clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 2.5vw, 1.4rem);
  background: linear-gradient(
    to top,
    rgba(9, 10, 11, 0.96) 0%,
    rgba(9, 10, 11, 0.88) 38%,
    rgba(9, 10, 11, 0.5) 72%,
    rgba(9, 10, 11, 0) 100%
  );
}
.tile__title {
  font-size: 1.1rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.tile__sub {
  color: #c9ced4;
  font-size: 0.86rem;
  margin-top: 2px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.tile__badge {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  padding: 0.3rem 0.65rem;
  background: rgba(13, 14, 16, 0.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile:hover .tile__badge,
.tile:focus-visible .tile__badge { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------ Timeline -- */
.tl {
  display: grid;
  gap: clamp(1.5rem, 4vw, var(--s5));
  position: relative;
}

.tl { --tl-gap: clamp(1.5rem, 4vw, 2rem); }

.tl__item {
  --tl-size: 64px;
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-size) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.tl__media {
  position: relative;
  width: var(--tl-size);
  height: var(--tl-size);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-card);
}
.tl__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Verbindungslinie zwischen den Stationen.
 * Sie hängt am Item, nicht am Kreis: der Kreis braucht overflow:hidden für den
 * runden Bildausschnitt und würde die Linie sonst abschneiden.
 */
.tl__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-size) / 2 - 1px);
  top: var(--tl-size);
  bottom: calc(var(--tl-gap) * -1);
  width: 2px;
  background: linear-gradient(to bottom, var(--line), rgba(255, 255, 255, 0.02));
}

.tl__when {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl__title { font-size: 1.2rem; margin-top: var(--s1); }
.tl__sub   { color: var(--fg-dim); font-size: 0.92rem; font-style: italic; }
.tl__text  { color: var(--fg-muted); margin-top: var(--s2); font-size: 0.97rem; }

@media (min-width: 720px) {
  .tl__item { --tl-size: 96px; gap: var(--s5); }
}

/* ---------------------------------------------------------------- Team -- */
.member { text-align: center; }
.member__photo {
  width: clamp(140px, 40vw, 190px);
  aspect-ratio: 1;
  margin: 0 auto var(--s3);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--line);
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-size: 1.15rem; }
.member__role { color: var(--fg-muted); font-size: 0.92rem; }

/* ------------------------------------------------------------- Galerie -- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: clamp(1.5rem, 4vw, var(--s5));
}

.filters button,
.filters a {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-muted);
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.filters button:hover,
.filters a:hover { color: var(--fg); border-color: var(--fg-dim); }
.filters button[aria-pressed="true"],
.filters a[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.shots {
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 0.9rem);
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.shot {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.shot:hover img { transform: scale(1.04); }
.shot[hidden] { display: none; }

.shot__cat {
  position: absolute;
  left: var(--s2);
  bottom: var(--s2);
  padding: 0.25rem 0.6rem;
  background: rgba(13, 14, 16, 0.82);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.shot:hover .shot__cat { opacity: 1; }

.shots__empty {
  padding: var(--s6) 0;
  color: var(--fg-muted);
  text-align: center;
}

/*
 * Vorschau eines Albums in der Übersicht: genau eine Reihe.
 *
 * Feste vier Spalten statt auto-fill - "eine Reihe" soll auf jedem Bildschirm
 * eine Reihe sein und nicht mal drei, mal fünf Bilder. Auf dem Telefon werden
 * vier nebeneinander zu Briefmarken, dort sind es zwei mal zwei.
 */
.shots--vorschau { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 34rem) {
  .shots--vorschau { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Videos im Kundenalbum.
 *
 * object-fit ist hier "contain", nicht "cover" wie beim Bild. Der Grund ist
 * nicht Geschmack: Ein Hochformat vom Telefon in einer 3:2-Kachel würde
 * beschnitten, und beim Video sieht man das nicht als Bildausschnitt, sondern
 * als fehlenden Kopf. Die schwarzen Ränder sind ehrlicher.
 *
 * Kein zoom-in-Zeiger und keine Vergrößerung beim Überfahren: Die Kachel ist
 * hier kein Verweis auf ein größeres Bild, sie IST der Abspieler.
 */
.shot--video {
  background: #000;
  cursor: default;
}
.shot--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Dauerhaft sichtbar, im Gegensatz zu .shot__cat: Dass etwas ein Video ist,
   muss man sehen, ohne mit der Maus darüber zu fahren - auf dem Telefon gibt
   es kein Überfahren. Oben links, weil unten die Bedienleiste sitzt. */
.shot__marke {
  position: absolute;
  left: var(--s2);
  top: var(--s2);
  padding: 0.2rem 0.55rem;
  background: rgba(13, 14, 16, 0.82);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
  pointer-events: none;
}

/* In der Albumübersicht ist das Video nur ein Vorschaubild und die ganze Kachel
   ein Verweis ins Album. pointer-events aus, damit der Klick nicht im
   Videoelement hängen bleibt. */
.shot--videovorschau { cursor: pointer; }
.shot--videovorschau video { pointer-events: none; }

/* Das letzte Vorschaubild führt ins Album und sagt, wie viel dort noch liegt. */
.shot--mehr { cursor: pointer; }
.shot--mehr img { opacity: 0.4; }
.shot--mehr:hover img,
.shot--mehr:focus-visible img { opacity: 0.5; transform: scale(1.04); }

.shot__mehr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
  background: rgba(0, 0, 0, 0.45);
  color: var(--fg);
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.shot--mehr:hover .shot__mehr,
.shot--mehr:focus-visible .shot__mehr {
  background: rgba(0, 0, 0, 0.3);
  color: var(--accent);
}

/* War die letzte Datei der Reihe ein Video, hat diese Kachel kein Bild hinter
   sich - dann trägt sie den Hinweis auf einer eigenen Fläche. */
.shot--mehr-leer { background: var(--bg-raise); }

/* Der Albumtitel führt auf dieselbe Seite wie das Bild daneben. */
.albumgruppe__titel a { color: inherit; }
.albumgruppe__titel a:hover,
.albumgruppe__titel a:focus-visible { color: var(--accent); }

/* "Meine Daten": Konto, Anschrift, Adresse, Passwort als Karten untereinander.
   Bewusst EINE Spalte und begrenzt breit: Nebeneinander richtet sich die Höhe
   jeder Reihe nach der längsten Karte, und unter den kurzen klaffte eine Lücke.
   Untereinander liest es sich von oben nach unten und sieht am Handy genauso
   aus wie am Rechner - ein Formular über die ganze Breite ist ohnehin keins,
   das sich gut ausfüllen lässt. */
.kontodaten {
  display: grid;
  gap: clamp(1rem, 2.5vw, var(--s4));
  max-width: 44rem;
}
.kontodaten > * { min-width: 0; }

/* Aktionsleiste im Kundenbereich (Download / Abmelden) */
.album-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-bottom: clamp(1.5rem, 4vw, var(--s5));
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

/* ------------------------------------------------------- Verwaltung --- */
.kunden {
  display: grid;
  gap: clamp(0.75rem, 2vw, var(--s3));
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.kunden > * { min-width: 0; }

.kunde {
  display: block;
  padding: clamp(1.1rem, 2.5vw, 1.4rem);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.kunde:hover { transform: translateY(-3px); border-color: var(--line); }

.kunde__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s2);
}
.kunde__label { font-size: 1.05rem; }
.kunde__user {
  margin-top: 2px;
  color: var(--fg-dim);
  font-size: 0.84rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.kunde__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
}
.kunde__meta dt {
  color: var(--fg-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kunde__meta dd { margin: 2px 0 0; font-size: 0.95rem; }

.chip {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip--ok   { color: #7ed957; border-color: rgba(126, 217, 87, 0.4); background: rgba(126, 217, 87, 0.08); }
.chip--warn { color: var(--accent); border-color: rgba(255, 200, 0, 0.4); background: rgba(255, 200, 0, 0.08); }

.admin-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, var(--s4));
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}
.admin-grid > * { min-width: 0; }

/* Datei-Auswahl an das übrige Formular angleichen */
.field input[type="file"] {
  padding: 0.7rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  margin-right: var(--s3);
  padding: 0.45rem 0.9rem;
  background: var(--bg-raise);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Löschknopf auf dem Vorschaubild in der Verwaltung */
.shot__del {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
}
.shot__del button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: rgba(9, 10, 11, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.shot--admin:hover .shot__del button,
.shot__del button:focus-visible { opacity: 1; }
.shot__del button:hover { background: #c62828; }

/* --------------------------------------------------------------- Shop -- */
/* Etwas größere Kacheln als in der Galerie - hier zählt das Motiv, nicht die
   Menge, und darunter steht noch der Preis. */
.shots--shop {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  align-items: start;
}

.artikel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.artikel[hidden] { display: none; }

/* Im Shop trägt die Karte das Bild, deshalb hier die Rundung nur oben */
.artikel .shot {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-card);
}

.artikel__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* umbrechen, damit der Knopf auf schmalen Kacheln unter den Preis rutscht
     statt die Karte zu weiten */
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.artikel__fuss > form { flex: 0 0 auto; }

.artikel__preis {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--accent);
}

.artikel__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.artikel__link:hover { color: var(--fg); border-bottom-color: var(--accent); }

.artikel__weg {
  padding: 0;
  background: none;
  border: 0;
  color: var(--fg-dim);
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.artikel__weg:hover { color: #ff8a80; border-bottom-color: #ff8a80; }

/* Auswahlfeld an die übrigen Formularfelder angleichen */
/*
 * Auswahlfelder.
 *
 * appearance:none nimmt dem Browser die eingebaute Darstellung weg - sonst
 * bleibt es beim grauen Kasten des Betriebssystems, der mit dem übrigen Design
 * nichts zu tun hat. Der Pfeil kommt danach als eingebettete Grafik dazu; ohne
 * ihn sähe das Feld aus wie ein gewöhnliches Textfeld.
 *
 * Die Grafik steht als data:-Adresse direkt hier, damit keine zusätzliche
 * Datei geladen werden muss.
 */
.field select,
.auswahl {
  width: 100%;
  padding: 0.85rem 2.4rem 0.85rem 1rem;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9adb3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.05rem;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.field select:hover,
.auswahl:hover { border-color: var(--fg-dim); }
.field select:focus,
.auswahl:focus { border-color: var(--accent); outline: none; }

/* Die aufgeklappte Liste kommt vom Betriebssystem - dort greift nur die
   Farbe der Einträge selbst. */
.field select option,
.auswahl option { background: var(--bg-card); color: var(--fg); }

/* Kleine Ausführung für Werkzeugleisten */
.auswahl--klein {
  width: auto;
  padding: 0.4rem 2rem 0.4rem 0.6rem;
  background-size: 0.9rem;
  background-position: right 0.5rem center;
  font-size: 0.85rem;
}

/* Popup zum Ändern des Preises */
.preis-dialog {
  max-width: min(28rem, calc(100vw - 2rem));
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.preis-dialog::backdrop { background: rgba(6, 7, 8, 0.75); }

.preis-dialog__bild {
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.preis-dialog__name {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------- Warenkorb -- */

/* Angepinnter Korb-Knopf: bleibt unten rechts stehen, damit man ihn bei
   langen Bilderlisten nicht suchen muss. */
.korbknopf {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.75rem);
  bottom: clamp(0.75rem, 3vw, 1.75rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.1rem 0.6rem 0.75rem;
  background: var(--accent);
  color: #111;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
  animation: korbknopf-auf 0.35s var(--ease) both;
}
.korbknopf:hover { background: #ffd433; transform: translateY(-2px); }

.korbknopf__icon { position: relative; display: grid; place-items: center; }
.korbknopf__icon svg { width: 24px; height: 24px; }

.korbknopf__zahl {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: #111;
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.korbknopf__text { display: grid; line-height: 1.2; }
.korbknopf__text strong { font-size: 0.88rem; font-weight: 700; }
.korbknopf__text span { font-size: 0.78rem; opacity: 0.75; }

@keyframes korbknopf-auf {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .korbknopf { animation: none; }
}

/* Auf sehr schmalen Geräten nur Symbol und Zahl */
@media (max-width: 400px) {
  .korbknopf { padding: 0.6rem 0.7rem; }
  .korbknopf__text strong { display: none; }
  .korbknopf__text span { font-size: 0.82rem; font-weight: 700; opacity: 1; }
}

.korb {
  display: grid;
  gap: clamp(1.25rem, 3vw, var(--s5));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 860px) {
  .korb { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.posten {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line-soft);
}

.posten__bild {
  width: 72px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-card);
}
.posten__name {
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}
.posten__kat { color: var(--fg-dim); font-size: 0.8rem; }
.posten__preis { font-weight: 700; color: var(--accent); white-space: nowrap; }

.posten__weg {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.posten__weg:hover { color: #ff8a80; border-color: rgba(255, 138, 128, 0.6); }

@media (max-width: 520px) {
  /* Auf schmalen Geräten Bild und Text nebeneinander, Preis darunter */
  .posten { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .posten__bild { width: 60px; }
  .posten__preis { grid-column: 2; }
  .posten__weg { grid-row: 1; grid-column: 3; }
}

.summe { display: grid; gap: var(--s2); }
.summe__zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 0.95rem;
}
.summe__zeile--rabatt { color: #7ed957; }
.summe__zeile--gesamt {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.1rem;
}
.summe__zeile--gesamt span:last-child { color: var(--accent); }

/* Kasse */
.kasse {
  max-width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kasse::backdrop { background: rgba(6, 7, 8, 0.8); }

.haken {
  display: flex;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.haken input { margin-top: 0.15rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/*
 * Rollbalken ins Design holen.
 *
 * Zwei Schreibweisen, weil sich die Browser nicht einig sind: die genormte
 * (scrollbar-width/-color, Firefox und neuere Chrome) und die ältere von
 * WebKit. Beide zusammen decken alles ab; wo keine greift, erscheint eben der
 * Standardbalken - sichtbar bleibt er also immer.
 */
:root {
  /*
   * Eigene Farbe für den Griff. Nicht --line verwenden: Die Linienfarbe ist
   * mit 9 % Deckkraft so zurückhaltend, dass der Balken praktisch verschwände -
   * und ein unsichtbarer Rollbalken verschweigt dem Besucher, dass da noch
   * mehr kommt. Unauffällig ja, unsichtbar nein.
   */
  --rollbalken:       rgba(255, 255, 255, 0.22);
  --rollbalken-hover: rgba(255, 255, 255, 0.38);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--rollbalken) transparent;
}

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rollbalken);
  border-radius: 999px;
  /* Der durchsichtige Rand lässt den Griff schmaler wirken, ohne die
     Trefferfläche zu verkleinern - anklicken bleibt bequem. */
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--rollbalken-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* Im Dialog etwas Luft zum abgerundeten Rand, damit der Balken nicht in der
   Ecke klebt. */
.kasse::-webkit-scrollbar { width: 12px; }
.kasse::-webkit-scrollbar-thumb { border-width: 3px 4px; }

/* Hinweis oben in der Kasse */
.kasse__modus {
  margin: 0;
  padding: 0.55rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Angemeldet: grün abgesetzt, damit auf einen Blick klar ist, dass hier kein
   neues Konto entsteht. */
.kasse__modus--an {
  border-color: rgba(126, 217, 87, 0.4);
  color: var(--fg);
}

/* "Hast du schon ein Kundenkonto?" - steht unter dem Hinweis und ist bewusst
   zurückhaltend: Der Regelfall ist der Kauf, nicht die Anmeldung. */
.kasse__konto {
  margin: 0;
  font-size: 0.85rem;
  color: var(--fg-muted);
}
.kasse__konto a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Feststehende Angabe statt Eingabefeld - sieht aus wie ein Feld, ist aber
   keins. */
.kasse__fest {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--fg);
  word-break: break-all;
}

.feld-fehler { color: #ff8a80; font-size: 0.82rem; }

/*
 * Passwortfeld mit Auge zum Aufdecken.
 *
 * Der Knopf liegt im Feld, deshalb bekommt das Eingabefeld rechts so viel
 * Innenabstand, dass der Text nicht darunter läuft.
 */
.passfeld { position: relative; display: block; }
.passfeld input { padding-right: 3rem; }

.passfeld__auge {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.passfeld__auge:hover,
.passfeld__auge:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--accent);
  outline: none;
}
.passfeld__auge svg { width: 18px; height: 18px; display: block; }

/* Umschalten der beiden Symbole: sichtbar ist immer genau eines */
.passfeld__auge .passfeld__zu { display: none; }
.passfeld__auge--offen { color: var(--accent); }
.passfeld__auge--offen .passfeld__auf { display: none; }
.passfeld__auge--offen .passfeld__zu { display: block; }

/* Zwei gleichwertige Karten nebeneinander im Adminbereich, ab genug Platz.
   Bewusst OHNE align-items:start - die Karten sollen gleich hoch sein. */
.admin-spalten {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.admin-spalten > * { min-width: 0; }

/*
 * Höhe einer Formularzeile: Beschriftung + Abstand + Eingabefeld.
 * Zusammengesetzt aus genau den Werten, mit denen .field und .field input
 * gebaut sind - ändert sich dort etwas, wandert es hier mit.
 */
:root {
  --feldzeile: calc(
      0.88rem * 1.65        /* Beschriftung: font-size x line-height */
    + 0.5rem                /* --s1: Abstand darunter */
    + 0.85rem * 2           /* Eingabefeld: Innenabstand oben und unten */
    + 2px                   /* Rahmen oben und unten */
    + 1rem * 1.65           /* Textzeile im Eingabefeld */
  );
}

/*
 * Einleitender Text in einer Karte, der genau eine Formularzeile hoch ist.
 * So beginnt die erste Eingabezeile dieser Karte auf derselben Höhe wie die
 * zweite der Karte daneben.
 */
.karte-vorspann {
  display: flex;
  align-items: center;
  min-height: var(--feldzeile);
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ------------------------------------------------------- Tabellen --- */
 /* Auf schmalen Geraeten darf die Tabelle seitlich rollen - aber nur sie,
    nicht die ganze Seite. */
/* position:relative macht die Hülle zum Bezugsrahmen: absolut positionierte
   Elemente in der Tabelle werden dadurch mit beschnitten und schieben die
   Seite nicht seitlich auf. */
.tabelle-huelle {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 44rem; }
.tabelle--schmal { min-width: 30rem; }
.tabelle th, .tabelle td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; }
.tabelle thead th { background: var(--bg-raise); color: var(--fg-dim); font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.tabelle tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.tabelle tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.tabelle code { font-size: 0.86rem; color: var(--accent); }

/*
 * Die Spalte "Leistung" traegt die erste Position einer Rechnung, und das ist
 * bei gekauften Bildern ein Dateiname. Ein Name ohne Leerzeichen hat keine
 * Umbruchstelle: Ohne "anywhere" schiebt er die Spalte auf und drueckt Betrag
 * und Zahlung aus der Tabelle. Gekuerzt wird der Text ohnehin schon
 * (invoice_kurztext(), 58 Zeichen) - hier geht es nur um die Breite.
 */
.tabelle--rechnungen td[data-spalte="Leistung"] {
  overflow-wrap: anywhere;
  min-width: 12rem;
}

/* Knopfzeile einer Rechnung: Herunterladen, Bezahlen, in der Verwaltung die
   Verweise. Umbrechen statt hinausragen - "Rechnung herunterladen" und ein
   Betrag daneben passen nicht in jede Spalte. */
.rechnungszeile__tasten {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Das Fenster zur Zahlungsart ist schmaler als die Kasse - es fragt eine
   einzige Sache. */
.zahlart { max-width: 26rem; }

/*
 * Rechnungsliste am Handy.
 *
 * Eine Tabelle mit 44 rem Mindestbreite laesst sich auf 400 px nur seitwaerts
 * lesen - und genau dort, hinter dem Rand, lagen Etikett und Zahlknopf. Unter
 * 40 rem wird deshalb aus jeder Zeile eine Karte: Beschriftung links, Wert
 * rechts. Die Beschriftungen kommen aus data-spalte, damit ohne Kopfzeile
 * trotzdem klar ist, was dasteht.
 */
@media (max-width: 40rem) {
  .tabelle--rechnungen { min-width: 0; }
  .tabelle--rechnungen thead { display: none; }
  .tabelle--rechnungen tbody,
  .tabelle--rechnungen tr { display: block; }
  .tabelle--rechnungen tr + tr { border-top: 1px solid var(--line-soft); }
  .tabelle--rechnungen tr { padding: var(--s3) 0.85rem; }

  .tabelle--rechnungen td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: 0.2rem 0;
    /* Der Rahmen zwischen den Zellen gehoert jetzt an die Zeile. */
    border: 0 !important;
    white-space: normal !important;
    text-align: right;
  }
  .tabelle--rechnungen td::before {
    content: attr(data-spalte);
    flex: 0 0 auto;
    color: var(--fg-dim);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
  }
  /* Die Knopfzeile ohne Beschriftung - sie erklaert sich selbst. */
  .tabelle--rechnungen td[data-spalte=""]::before { content: none; }
  .tabelle--rechnungen td[data-spalte=""] {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s2);
  }
}

/* Sortierbare Kopfzeile: der Link füllt die Zelle, also trägt er das Padding */
.tabelle thead .th--sort { padding: 0; }

.sortlink {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  color: inherit;
  font: inherit;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.sortlink:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.sortlink--aktiv { color: var(--accent); }

.sortlink__pfeil { font-size: 0.7rem; opacity: 0.35; }
.sortlink:hover .sortlink__pfeil { opacity: 0.7; }
.sortlink--aktiv .sortlink__pfeil { opacity: 1; }

/* Filterzeile über einer Tabelle */
.suchmaske {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.suchmaske .field { flex-shrink: 1; }
.suchmaske__tasten { display: flex; gap: var(--s2); flex-wrap: wrap; padding-bottom: 0.15rem; }

/*
 * Werkzeuge am Zeilenende: mehrere Symbolknöpfe in einer ovalen Fassung,
 * durch feine Linien getrennt. Ein Block, aber erkennbar einzelne Schalter.
 */
.werkzeuge {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg);
}

.werkzeuge__knopf {
  /* position:relative ist hier nicht Zierde: der Knopf trägt eine
     .visuell-versteckt-Beschriftung, und die ist absolut positioniert. Ohne
     einen positionierten Vorfahren hinge sie am Ausgangscontainer und würde vom
     overflow der Tabellenhülle nicht mehr beschnitten - die Seite ließe sich
     dann seitlich schieben. */
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.werkzeuge__knopf + .werkzeuge__knopf { border-left: 1px solid var(--line); }
.werkzeuge__knopf svg { width: 16px; height: 16px; display: block; }

.werkzeuge__knopf:hover,
.werkzeuge__knopf:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  outline: none;
}
.werkzeuge__knopf--weg:hover,
.werkzeuge__knopf--weg:focus-visible {
  background: rgba(255, 138, 128, 0.12);
  color: #ff8a80;
}

/* Kein Schalter, nur ein Zustand - etwa "alle eingelöst" */
.werkzeuge__knopf--still { color: rgba(126, 217, 87, 0.75); cursor: default; }
.werkzeuge__knopf--still:hover { background: transparent; color: rgba(126, 217, 87, 0.75); }

/* Nur für Vorleseprogramme: der sichtbare Sinn steckt im Symbol */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Verweis auf weitere Einträge, die im Popup stehen */
.mehr-knopf {
  margin-top: 0.2rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--fg-dim);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mehr-knopf:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Popup mit allen Einlösungen eines Codes */
.einl-dialog:not([open]) { display: none; }
.einl-dialog[open] {
  display: grid;
  gap: var(--s3);
  max-width: min(44rem, calc(100vw - 2rem));
}
.einl-dialog .tabelle { min-width: 26rem; }
.einl-dialog > div:last-child { justify-self: start; }

/* Ein Album je Einkauf, mit eigener Überschrift */
.albumgruppe + .albumgruppe { margin-top: clamp(2rem, 5vw, 3rem); }

.albumgruppe__kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-soft);
}

.albumgruppe__titel {
  margin: 0;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 700;
}
.albumgruppe__meta {
  margin: 0.25rem 0 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
}

/* Album herunterladen und Rechnung nebeneinander; im schmalen Fenster
   untereinander, damit keiner der beiden abgeschnitten wird. */
.albumgruppe__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ------------------------------------------------------- Zahlen ----- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.kennzahl {
  display: grid;
  gap: 0.15rem;
  padding: var(--s3) var(--s4);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.kennzahl__wert {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  /* lange Beträge dürfen umbrechen statt die Kachel zu sprengen */
  overflow-wrap: anywhere;
}
.kennzahl__name { color: var(--fg-dim); font-size: 0.8rem; line-height: 1.35; }

/* Die geschäftlich wichtigen Zahlen heben sich ab */
.kennzahl--gut { border-color: rgba(255, 200, 0, 0.35); }
.kennzahl--gut .kennzahl__wert { color: var(--accent); }

/* Balkendiagramm. Die Breite gibt der Kasten vor, die Höhe steht fest -
   deshalb preserveAspectRatio="none" im SVG. */
.diagramm {
  display: block;
  width: 100%;
  height: 140px;
  overflow: visible;
}
.diagramm rect { transition: opacity 0.15s var(--ease); }
/* Beim Überfahren tritt alles zurück - außer dem Balken unter dem Zeiger. */
.diagramm:hover rect { opacity: 0.4; }

/*
 * Jeder Balken ist ein Link auf seinen Tag. Die unsichtbare Fläche darüber
 * reicht über die volle Höhe: Sonst müsste man niedrige Balken pixelgenau
 * treffen, und gerade die schwachen Tage sind oft die interessanten.
 */
.diagramm__balken { cursor: pointer; }
.diagramm__balken:hover rect,
.diagramm__balken:focus-visible rect { opacity: 1 !important; }
.diagramm__balken:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.diagramm__feld { opacity: 1 !important; }

/* Überschrift des Verlaufs mit leisem Bedienhinweis daneben */
.card__hinweis {
  margin-left: 0.6rem;
  color: var(--fg-dim);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Zeitraumwahl: Schaltflächen und eigener Bereich nebeneinander */
.zeitwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}
.zeitwahl__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.zeitwahl__feld {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fg-dim);
  font-size: 0.82rem;
}
.zeitwahl__feld input {
  padding: 0.4rem 0.55rem;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  /* Das Kalendersymbol ist im dunklen Feld sonst fast schwarz auf schwarz. */
  color-scheme: dark;
}
.zeitwahl__feld input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ------------------------------------------- Nutzungsarten ----------- */

/* "ab 4,00 €*" im Raster */
.artikel__ab { color: var(--fg-dim); font-size: 0.78rem; font-weight: 400; }
.artikel__stern {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding: 0 0.15rem;
}
.artikel__stern:hover { text-decoration: underline; }

/* Kennzeichnung in der Verwaltung, wenn ein Bild feste Preise hat */
.artikel__fest {
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  background: rgba(255, 200, 0, 0.14);
  border: 1px solid rgba(255, 200, 0, 0.35);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Erklärung unter dem Raster */
.nutzungshinweis {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
  /* damit der Sprung über das Sternchen nicht unter der Navigation landet */
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.nutzungshinweis__stern {
  display: flex;
  gap: 0.5rem;
  max-width: 44rem;
  margin: 0 0 var(--s4);
  font-size: 0.92rem;
}
.nutzungshinweis__stern > span:first-child {
  color: var(--accent);
  font-weight: 700;
  flex: 0 0 auto;
}

.nutzungsliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s4);
}
.nutzungsliste > div {
  padding: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.nutzungsliste dt { font-weight: 700; margin-bottom: 0.2rem; font-size: 0.92rem; }
.nutzungsliste dd { margin: 0; color: var(--fg-dim); font-size: 0.85rem; line-height: 1.45; }

/* --- Großansicht mit Preisliste --- */

.lizenzfenster {
  /* Knapper als sonst im Haus: Jeder Millimeter Rand geht hier vom Bild ab.
     Als eigene Größe, weil das Schließkreuz denselben Abstand braucht. */
  --rand: clamp(0.9rem, 2vw, 1.2rem);

  /* Abstand des Schließkreuzes zur Fensterecke. */
  --kreuz-rand: 0.5rem;

  width: min(80rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  /*
   * Waagerecht wird hier nie gescrollt - sonst rutscht der Inhalt seitlich weg
   * und die Querleiste nimmt unten die Höhe, die das Bild braucht. Ohne diese
   * Zeile macht der Browser aus overflow-y:auto stillschweigend ein
   * overflow-x:auto mit: "sichtbar" und "scrollbar" lassen sich nicht mischen.
   */
  overflow-x: hidden;
  padding: var(--rand);
  /* Oben knapper: Den sichtbaren Abstand macht dort das Schließkreuz, und was
     hier stehen bliebe, ginge dem Bild ab. */
  padding-top: var(--kreuz-rand);
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lizenzfenster::backdrop { background: rgba(6, 7, 8, 0.85); }
.lizenzfenster::-webkit-scrollbar { width: 12px; }
.lizenzfenster::-webkit-scrollbar-thumb { border-width: 3px 4px; }

/*
 * Das Schließkreuz sitzt fest in der oberen rechten Ecke des Fensters - immer
 * an derselben Stelle, unabhängig davon, wie breit das Bild gerade ausfällt.
 *
 * Es hing eine Weile am Bild und wanderte mit dessen Kante. Das war mehr Ärger
 * als Gewinn: Die Kante steht erst fest, wenn die Datei geladen ist, also
 * musste JavaScript nachmessen, und jede Verschiebung zog die Frage nach sich,
 * was passiert, wenn das Bild schmal wird. Eine feste Ecke kennt diese Fälle
 * nicht.
 *
 * float:right muss weg, sonst zöge es das Bild an sich vorbei.
 */
.lizenzfenster .tagblatt__schliessen {
  position: absolute;
  top: var(--kreuz-rand);
  right: var(--kreuz-rand);
  z-index: 2;
  float: none;
  margin: 0;
}
/*
 * Hier ein eigener Kasten statt des blanken Werkzeugleisten-Knopfes: In den
 * anderen Fenstern steht das Kreuz neben einer Überschrift und ist als Knopf
 * erkennbar, hier schwebt es frei neben dem Bild. Quadratisch, damit das Kreuz
 * mittig sitzt - beim Werkzeugknopf ist das Polster seitlich breiter als oben,
 * und dann steht der sichtbare Strich nicht dort, wo man ihn erwartet.
 */
.lizenzfenster .tagblatt__schliessen .werkzeuge__knopf {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 1.15rem;
  line-height: 1;
}
.lizenzfenster .tagblatt__schliessen .werkzeuge__knopf:hover,
.lizenzfenster .tagblatt__schliessen .werkzeuge__knopf:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--fg-dim);
  color: var(--accent);
}

/* Bild oben über die ganze Breite, die beiden Nutzungsarten darunter
   nebeneinander. Früher stand die Preisliste rechts daneben - bei drei Stufen
   ging das nicht anders, kostete das Bild aber die halbe Fensterbreite. */
.lizenz {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.6rem, 1.5vw, 0.85rem);
  align-items: start;
}

.lizenz__bild { margin: 0; min-width: 0; text-align: center; }
/* Platz für das Kreuz darüber, damit es die Bildecke nicht überdeckt. Nur im
   Fenster - auf der Seite ohne JavaScript gibt es kein Kreuz. */
.lizenzfenster .lizenz__bild { padding-top: 2.5rem; }
/* width:auto statt 100%: So bleibt der Kasten genau so groß wie das Bild -
   ein hochkantes Foto bekäme sonst breite leere Ränder links und rechts. */
.lizenz__bild img {
  display: block;
  margin-inline: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Das Bild bekommt alles, was der Rest darunter übrig lässt - deshalb kein
     fester vh-Anteil, sondern die Fensterhöhe minus dem, was darunter steht.
     Die 28rem sind gemessen, nicht geschätzt: Der Platz fürs Schließkreuz
     über dem Bild, Bildunterschrift, Überschrift, Hinweis, die beiden Karten,
     Knopfzeile, Steuerhinweis, Abstände und der Rand des Fensters ergeben
     zusammen 412 Pixel; dazu die 2rem, die das Fenster vom Bildschirmrand
     frei lässt.
     Wächst einer dieser Texte um eine Zeile, ist die Zahl nachzuziehen -
     sonst scrollt das Fenster, statt das Bild kleiner zu machen.
     Nach oben begrenzt, damit das Vorschaubild nicht hochgerechnet wird.
     Die 8rem nach unten sind die Notbremse für sehr flache Fenster; sie darf
     nicht höher stehen, sonst hört das Fenster genau dort auf mitzugehen, wo
     es am nötigsten wäre: Ein 1080p-Schirm mit 150 % Windows-Vergrößerung
     lässt dem Browser rund 600 Pixel, und dann scrollte die Großansicht. */
  max-height: clamp(8rem, calc(100vh - 28rem), 52rem);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.lizenz__herkunft {
  margin-top: 0.55rem;
  color: var(--fg-dim);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lizenz__wahl { min-width: 0; }
.lizenz__kopf { margin-bottom: 0.55rem; }
.lizenz__titel { margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 800; }
.lizenz__hinweis {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}
.lizenz__form { display: grid; gap: var(--s2); }

/* Zwei gleich breite Karten; wird es enger als zwei mal 15rem, rutschen sie
   untereinander. Sollte je eine dritte Nutzungsart dazukommen, ordnet sich
   die von allein ein. */
.lizenz__arten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s2);
  align-items: stretch;
}

.lizenzzeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.65rem;
  align-content: start;
  padding: var(--s3);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.lizenzzeile:hover { border-color: var(--fg-dim); }
.lizenzzeile input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
/* Name links, Preis rechts - beide in der Zeile neben dem Auswahlknopf.
   Kein Umbruch: Wird es eng, bricht der Name um und der Preis bleibt oben
   rechts stehen. Sonst rutscht er bei der langen "Kommerziellen Nutzung" in
   eine eigene Zeile und die beiden Karten sähen unterschiedlich aus. */
.lizenzzeile__kopf {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}
/* Die gewählte Zeile hebt sich ab - :has wird von allen aktuellen Browsern
   verstanden; wo nicht, bleibt nur die Markierung im Knopf selbst. */
.lizenzzeile:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 200, 0, 0.06);
}
.lizenzzeile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.lizenzzeile__name { min-width: 0; font-weight: 700; font-size: 0.95rem; }
/* Beginnt unter dem Namen, nicht unter dem Auswahlknopf. */
.lizenzzeile__kurz {
  grid-column: 2;
  color: var(--fg-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}
.lizenzzeile__preis { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.lizenzzeile__drin {
  margin-left: 0.35rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lizenzzeile--drin { border-color: rgba(255, 200, 0, 0.3); }

.lizenz__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s2);
}
/* Ohne das bricht "In den Warenkorb" in der schmalen Spalte um und der Knopf
   wird doppelt so hoch wie nötig. */
.lizenz__knoepfe .btn { white-space: nowrap; }
.lizenz__mwst {
  margin: var(--s2) 0 0;
  color: var(--fg-dim);
  font-size: 0.78rem;
}

/* --- Preisfenster in der Verwaltung --- */
.preis-dialog__weitere {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
}
.preis-dialog__ueber {
  margin: 0 0 var(--s2);
  color: var(--fg-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.field--fest { margin-bottom: var(--s2); }
.preis-dialog__rechnung { color: var(--fg-dim); font-size: 0.78rem; }

/* ------------------------------------------- Galerieverwaltung ------- */

.galeriewerkzeuge {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.galeriewerkzeuge__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
/* Die Werkzeugzeile hebt sich ab - sie wirkt auf die Auswahl, die Zeile
   darüber nur auf die Ansicht. */
.galeriewerkzeuge__rest {
  padding-top: var(--s2);
  border-top: 1px solid var(--line-soft);
}
.werkzeuggruppe {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.werkzeuggruppe__feld {
  width: 10rem;
  padding: 0.4rem 0.55rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
}
.werkzeuggruppe__feld:focus { border-color: var(--accent); outline: none; }

/* Löschen ist die einzige Aktion, die sich nicht rückgängig machen lässt. */
.btn--gefahr {
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.4);
  color: #ff8f8f;
}
.btn--gefahr:hover:not(:disabled) {
  background: rgba(255, 107, 107, 0.2);
  border-color: #ff6b6b;
  color: #ffb3b3;
}
/* Abgeschaltete Knöpfe sollen nicht aussehen, als könnten sie etwas. */
.galeriewerkzeuge .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.galeriewerkzeuge__alle { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.galeriewerkzeuge__alle input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.galeriewerkzeuge__zahl { color: var(--fg-dim); }
/*
 * Bearbeiten-Zustand.
 *
 * Kästchen, Auswahlfelder und Knöpfe sind im Ruhezustand weg - das Raster soll
 * zum Ansehen da sein, nicht zum Bedienen. Der Knopf "Bearbeiten" blendet sie
 * ein.
 *
 * Die Klasse setzt JavaScript beim Laden. Ohne JavaScript ist alles sichtbar,
 * sonst käme man an die Bedienelemente überhaupt nicht heran.
 */
.galerie--ruhe .galeriewerkzeuge__rest,
.galerie--ruhe .galeriewerkzeuge__alle,
.galerie--ruhe .galeriewerkzeuge__zahl,
.galerie--ruhe .galeriebild input[type="checkbox"] { display: none; }

.galerie--ruhe .galeriewerkzeuge {
  /* Ohne Inhalt keine leere Leiste */
  padding: 0;
  background: none;
  border: none;
  margin-bottom: var(--s3);
}

/*
 * Shop: Auswahlfläche über dem Bild.
 *
 * Das Bild ist dort ein Knopf, der das Preisfenster öffnet. Im
 * Bearbeiten-Zustand legt sich diese Fläche darüber und fängt den Klick ab -
 * so wählt ein Klick aufs Bild aus, statt das Preisfenster zu öffnen. Im
 * Ruhezustand ist sie nicht da, dann bleibt alles wie gewohnt.
 */
.shot-huelle { position: relative; }
.auswahlflaeche {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.auswahlflaeche input[type="checkbox"] {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.auswahlflaeche:has(input:checked) {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  background: rgba(255, 200, 0, 0.14);
}
.galerie--ruhe .auswahlflaeche { display: none; }

/* Bild mit Auswahlkästchen */
.galeriebild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
}
.galeriebild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeriebild input[type=checkbox] {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Ausgewählte Kachel deutlich absetzen. Im Ruhezustand ist das Kaestchen
   abgeschaltet und kann gar nicht angekreuzt sein - die Regel greift dort
   also ohnehin nicht. */
.galeriebild:has(input:checked) { outline: 3px solid var(--accent); outline-offset: -3px; }
.galeriebild:has(input:checked) img { opacity: 0.75; }

.galeriebild__fuss { display: grid; gap: var(--s2); }
.galeriebild__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-dim);
  font-size: 0.78rem;
}
.galeriebild__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) 0.4rem;
}
.galeriebild__eingabe {
  flex: 1 1 6rem;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.82rem;
}
.galeriebild__eingabe:focus { border-color: var(--accent); outline: none; }
/* Die Endung ist fest - sie wird gezeigt, aber nicht zur Eingabe angeboten. */
.galeriebild__endung { color: var(--fg-dim); font-size: 0.82rem; flex: 0 0 auto; }

/* ------------------------------------------- Stapel-Upload ----------- */

.stapel {
  margin: var(--s3) 0;
  padding: var(--s3);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.stapel__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.stapel__stand { color: var(--fg-dim); font-size: 0.85rem; }

.stapel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  /* Bei hundert Dateien soll der Kasten nicht die Seite sprengen. */
  max-height: 22rem;
  overflow-y: auto;
}

.stapel__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name groesse"
    "balken balken"
    "status status";
  gap: 0.2rem 0.6rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
@media (min-width: 34rem) {
  .stapel__zeile {
    grid-template-columns: minmax(0, 1fr) auto 6rem auto;
    grid-template-areas: "name groesse balken status";
    align-items: center;
  }
}

.stapel__name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stapel__groesse { grid-area: groesse; color: var(--fg-dim); font-size: 0.78rem; white-space: nowrap; }
.stapel__status  { grid-area: status; color: var(--fg-dim); font-size: 0.78rem; }

.stapel__balken {
  grid-area: balken;
  display: block;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.stapel__balken i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.15s linear;
}

/*
 * Drei Stufen, drei Farben - gelb überträgt, orange rechnet, grün fertig.
 * Der Balken läuft in jeder Stufe von vorn: er zeigt den Fortschritt DIESER
 * Stufe, nicht den des ganzen Vorgangs.
 */
.stapel__zeile--laeuft { border-left-color: var(--accent); }

.stapel__zeile--verarbeitung { border-left-color: #ff9f43; }
.stapel__zeile--verarbeitung .stapel__balken i { background: #ff9f43; }
.stapel__zeile--verarbeitung .stapel__status { color: #ff9f43; }

/* Uebertragen: die Datei liegt. Verarbeitet: die Anzeigefassung steht auch. */
.stapel__zeile--fertig { border-left-color: rgba(126, 217, 87, 0.55); }
.stapel__zeile--fertig .stapel__status { color: var(--fg-dim); }
.stapel__zeile--verarbeitet { border-left-color: #7ed957; }
.stapel__zeile--verarbeitet .stapel__balken i { background: #7ed957; }
.stapel__zeile--verarbeitet .stapel__status { color: #7ed957; font-weight: 600; }
.stapel__zeile--fehler { border-left-color: #ff6b6b; }
.stapel__zeile--fehler .stapel__status { color: #ff6b6b; }

/* ------------------------------------------- Werkstatt --------------- */

/* Logo und Aufnahmen nebeneinander, solange Platz ist. */
.werkbank {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .werkbank { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

/*
 * Karomuster unter dem Logo.
 *
 * Nicht Zierrat: Auf dem dunklen Grund der Seite sieht ein weißes Logo mit
 * weißem Kasten genauso aus wie eines mit durchsichtigem Grund. Erst auf dem
 * Karo fällt der Kasten auf - und zwar bevor er auf hundert Aufnahmen steht.
 */
.werkbank__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background-color: #6b6f74;
  background-image:
    linear-gradient(45deg, #4d5155 25%, transparent 25%, transparent 75%, #4d5155 75%),
    linear-gradient(45deg, #4d5155 25%, transparent 25%, transparent 75%, #4d5155 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.werkbank__logo img { max-width: 100%; max-height: 9rem; }

/* --- Der Editor --- */

.werkstatt { display: block; text-align: center; }

/*
 * Die Bühne schrumpft auf das Bild.
 *
 * inline-block ist hier keine Geschmacksfrage: Das Zeichen wird in PROZENT der
 * Bühne gesetzt, und diese Prozente müssen sich auf das Bild beziehen. Ein
 * Block wäre so breit wie die Spalte - bei einem Hochformat, das an
 * max-height hängt, säße das Zeichen dann weit neben der Stelle, die im Editor
 * zu sehen war.
 */
.werkstatt__buehne {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;   /* sonst scrollt das Telefon statt zu schieben */
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.werkstatt__foto {
  display: block;
  max-width: 100%;
  /* Nicht höher als der halbe Bildschirm: Bei einem Hochformat stünden die
     Regler darunter sonst außerhalb des Sichtfelds, und man schöbe das
     Zeichen, ohne die Größe dazu einstellen zu können. */
  max-height: 60vh;
  width: auto;
  height: auto;
}
.werkstatt__zeichen {
  position: absolute;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  /* Ohne das würde ein durchsichtiges Logo Klicks durchlassen, und das Ziehen
     fasste ins Leere. */
  pointer-events: auto;
}
.werkstatt__zeichen:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }

/*
 * Während des Ziehens nichts markieren.
 *
 * preventDefault() auf pointerdown reicht dafür NICHT - Chrome fängt damit die
 * Textmarkierung nicht ab, und beim Ziehen über die Bühne hinaus lag hinterher
 * die halbe Seite blau markiert da. Die Klasse hängt am Wurzelelement, weil die
 * Markierung sich über die ganze Seite zieht, nicht nur über die Bühne.
 */
.zieht-gerade,
.zieht-gerade * {
  user-select: none !important;
  -webkit-user-select: none !important;
}
.zieht-gerade .werkstatt__zeichen { cursor: grabbing; }
.werkstatt__wartet { padding: var(--s6) var(--s4); color: var(--fg-dim); line-height: 1.5; }

.werkstatt__regler {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
  text-align: left;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .werkstatt__regler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.werkstatt__regler .field { margin: 0; }
.werkstatt__regler input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Die Stelle als Zahl: zwei Felder statt drei Reglern. */
.werkstatt__fein { margin-top: var(--s3); }
@media (min-width: 44rem) {
  .werkstatt__fein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Übernehmen und Löschen des Logos in einer Zeile. */
.werkbank__logotasten {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.werkstatt__tasten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* --- Das Raster der Aufnahmen --- */

.werkstatt__raster {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.werkzeile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
}
.werkzeile--fertig { border-left-color: #7ed957; }
.werkzeile--gewaehlt { border-color: var(--accent); }

.werkzeile__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}
.werkzeile__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.werkzeile__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--fg-dim);
  font-size: 0.78rem;
}

.werkzeile__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  min-width: 0;
}
.werkzeile__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.werkzeile__tasten {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
}
.werkzeile__tasten a { color: var(--fg-muted); }
.werkzeile__tasten a:hover { color: var(--fg); }
.werkzeile__tasten form { margin: 0; }
.werkzeile__weg {
  padding: 0;
  background: none;
  border: 0;
  color: var(--fg-dim);
  font: inherit;
  cursor: pointer;
}
.werkzeile__weg:hover { color: #ff8a80; }

/* ------------------------------------------- Rechtstexte ------------- */

.rechtstext { max-width: 52rem; }
.rechtstext h2 {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 var(--s3);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 800;
}
.rechtstext p { margin: 0 0 var(--s3); line-height: 1.65; }
.rechtstext ul { margin: 0 0 var(--s3); padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.4rem; line-height: 1.6; }
.rechtstext__stand { color: var(--fg-dim); font-size: 0.85rem; }
.rechtstext__hinweis {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  font-size: 0.85rem;
}

.lizenzblock {
  margin: 0 0 var(--s4);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.lizenzblock h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 var(--s2);
  font-size: 1.05rem;
  font-weight: 800;
}
.lizenzblock__faktor {
  padding: 0.1rem 0.5rem;
  background: rgba(255, 200, 0, 0.12);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lizenzblock__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}
.lizenzblock__spalten > div { min-width: 0; }
.lizenzblock__label {
  margin: 0 0 var(--s2);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lizenzblock__label--ja { color: #7ed957; }
.lizenzblock__label--nein { color: #ff6b6b; }
.lizenzblock__spalten ul { margin: 0; padding-left: 1.1rem; }
.lizenzblock__spalten li { font-size: 0.88rem; }
.lizenzblock__zusatz {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  background: var(--bg);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

/* Anmeldung: Knopf und "Passwort vergessen?" auf einer Zeile */
.anmeldung__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}
.anmeldung__vergessen { color: var(--fg-dim); font-size: 0.85rem; }
.anmeldung__vergessen:hover { color: var(--accent); }

/* Fenster "Passwort vergessen" - schmaler als die Kasse */
.vergessen { width: min(26rem, calc(100vw - 2rem)); }

/* ------------------------------------------- Tagesblatt (ein Tag) ----- */

.tagblatt {
  width: min(52rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tagblatt::backdrop { background: rgba(6, 7, 8, 0.8); }
.tagblatt::-webkit-scrollbar { width: 12px; }
.tagblatt::-webkit-scrollbar-thumb { border-width: 3px 4px; }

/* Der Schließknopf braucht einen bezogenen Vorfahren, sonst rutscht die
   versteckte Beschriftung aus dem Kasten heraus. */
.tagblatt__schliessen {
  position: relative;
  float: right;
  margin: -0.25rem -0.25rem 0 var(--s3);
}
.tagblatt__titel {
  margin: 0 0 var(--s3);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 800;
}
/* Das Datum steckt schon in der Überschrift - im Inhalt wäre es doppelt. */
.tagblatt__datum { display: none; }
.tagblatt__inhalt .kennzahlen { margin-top: 0; }
.kennzahlen--eng {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--s2);
}
.kennzahlen--eng .kennzahl { padding: var(--s2) var(--s3); }
.kennzahlen--eng .kennzahl__wert { font-size: clamp(1rem, 2.4vw, 1.2rem); }
.kennzahlen--eng .kennzahl__name { font-size: 0.74rem; }

.tagblatt__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}
.tagblatt__spalten > div { min-width: 0; }
.tagblatt__spalten .albumgruppe__titel { margin-bottom: var(--s2); }

.tagblatt__codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.tagblatt__codes li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.tagblatt__codes li > :last-child { margin-left: auto; white-space: nowrap; }
.tagblatt__leise { color: var(--fg-dim); font-size: 0.8rem; }
.tagblatt__minus { color: #ff6b6b; font-weight: 700; }
.tagblatt__laedt { color: var(--fg-dim); padding: var(--s4) 0; }

/* Rangliste mit hinterlegtem Balken */
.rangliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }

.rangliste__zeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  min-width: 0;
}
.rangliste__balken {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 200, 0, 0.13);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.rangliste__text {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.rangliste__wert {
  position: relative;
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rangliste__bild {
  width: 38px;
  height: 26px;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* Auswahlkästchen in Tabellen */
.tabelle input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

/* Leiste unter einer Tabelle mit Mehrfachauswahl */
.auswahl-leiste {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s3);
}
.auswahl-leiste .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------- Lightbox -- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(6, 7, 8, 0.94);
  backdrop-filter: blur(6px);
  border: 0;
}
/* Ein eigenes display auf .lb würde die Browser-Regel
   dialog:not([open]) { display: none } aushebeln - der geschlossene Dialog
   wäre dann sichtbar. Darum das Layout ausdrücklich nur im offenen Zustand. */
.lb:not([open]) { display: none; }
.lb[open] {
  display: grid;
  /* Die Bühne wird bewusst gestreckt: nur dann hat sie eine definierte Höhe,
     an der sich Bild und Leiste ausrichten können. Dass ein Klick daneben
     trotzdem schließt, regelt das JS über die Zielprüfung - nicht das Layout. */
  overflow: hidden;
}
.lb::backdrop { background: rgba(6, 7, 8, 0.9); }

/*
 * Bühne: Bild oben, Bedienleiste darunter.
 * Grid-Kinder werden vorgabegemäß gestreckt, die Bühne bekommt also eine
 * definierte Höhe - dadurch kann das Bild darunter zuverlässig schrumpfen.
 * Vorher stand am Bild ein max-height:82vh; diese geratene Zahl kannte weder
 * die Höhe der Leiste noch das Padding des Dialogs und lief auf flachen
 * Bildschirmen (1080p, Laptops) über.
 */
/*
 * Bühne: Bildbereich oben, Bedienleiste unten.
 * minmax(0, 1fr) gibt dem Bildbereich eine definierte Höhe und erlaubt ihm,
 * unter seine Inhaltsgröße zu schrumpfen - ohne die 0 als Minimum würde das
 * Bild die Leiste aus dem Dialog drücken.
 */
.lb__stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: var(--s3);
  min-height: 0;
  min-width: 0;
}

/*
 * Das Bild sitzt direkt in der oberen Rasterzeile. Die hat durch
 * minmax(0, 1fr) eine definierte Höhe, deshalb greifen beide max-Grenzen und
 * width/height:auto erhält das Seitenverhältnis - ohne object-fit und ohne
 * dass die Box größer wird als das Bild.
 */
.lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  /* signalisiert: Klick verkleinert wieder (Gegenstück zum zoom-in der Kachel) */
  cursor: zoom-out;
}

.lb__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.lb__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lb__btn:hover { background: var(--accent); color: #111; }

/* ----------------------------------------------------------------- FAQ -- */
.qa {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}
.qa + .qa { margin-top: var(--s2); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 3vw, 1.6rem);
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(0.98rem, 2vw, 1.07rem);
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }

.qa__sign {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.qa[open] .qa__sign { transform: rotate(45deg); }

.qa__body {
  padding: 0 clamp(1rem, 3vw, 1.6rem) clamp(1rem, 2.5vw, 1.35rem);
  color: var(--fg-muted);
  max-width: 62ch;
}

/* ---------------------------------------------------------- Formulare -- */
.form { display: grid; gap: var(--s4); }

/* align-content:start ist wichtig: steht ein Feld in einer Flex-Zeile neben
   einem höheren Feld (etwa weil dort ein Hinweis unter dem Eingabefeld hängt),
   würde es auf dessen Höhe gestreckt und der Abstand auf die Zeilen verteilt -
   die Eingabefelder lägen dann auf unterschiedlicher Höhe. */
.field { display: grid; gap: var(--s1); align-content: start; }
.field > label { font-size: 0.88rem; font-weight: 600; }
.field .req { color: var(--accent); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  transition: border-color 0.2s var(--ease);
}
.field input:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 10rem; resize: vertical; }

.field__err { color: #ff8a80; font-size: 0.83rem; }
.field--bad input,
.field--bad textarea { border-color: #ff8a80; }

/* Honeypot: für Menschen unsichtbar, für Bots ein Köder */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.note {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 0.94rem;
}
.note--ok  { border-color: rgba(126, 217, 87, 0.45); background: rgba(126, 217, 87, 0.08); }
.note--bad { border-color: rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.08); }

/*
 * Ein Hinweis, der zwischen der Werkzeugleiste und den Bildern steht.
 *
 * Der Abstand nach unten ist derselbe wie der nach oben - den gibt
 * .album-bar mit ihrem margin-bottom vor. Ohne diese Zeile klebten die
 * Bilder unmittelbar am Kasten, und der Hinweis sah aus, als gehoere er
 * zur ersten Reihe.
 */
.note--hinweis {
  max-width: 44rem;
  margin-bottom: clamp(1.5rem, 4vw, var(--s5));
}

/* Zugangsdaten in einer Meldung sollen zum Abtippen taugen */
.note code {
  padding: 0.1rem 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.contact-grid {
  display: grid;
  gap: clamp(1.5rem, 5vw, var(--s6));
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.contact-grid > * { min-width: 0; }

.dl { display: grid; gap: var(--s3); }
.dl__row { display: grid; gap: 2px; }
.dl__key { color: var(--fg-dim); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dl__val { font-size: 1.02rem; }
.dl__val a:hover { color: var(--accent); }

/* --------------------------------------------------- Technik / Listen -- */
/*
 * Technik: die Kategorien liegen QUER und lassen sich auf- und zuklappen.
 *
 * Vorher standen sie im gewöhnlichen .grid als schmale Spalten. Das Problem
 * war nicht die Breite, sondern die Höhe: Grid-Kinder einer Reihe werden auf
 * dieselbe Höhe gezogen, und neben "Objektive" mit sechs Einträgen stand
 * "Drohnen" mit einem in einem gleich hohen, fast leeren Kasten.
 *
 * Die Kacheln sind BAUGLEICH mit den Fragen im FAQ (.qa) - dieselbe Klasse,
 * dieselbe Optik, dasselbe native <details>. Hier steht nur, was an einer
 * Technik-Kachel anders ist: der Zähler am Titel und die mehrspaltige Liste
 * statt eines Fließtextes.
 */
/*
 * DER CONTAINER BEKOMMT ABSICHTLICH KEIN EIGENES LAYOUT.
 *
 * Kein display:grid, kein gap - denn dann greift .qa + .qa von der FAQ-Seite,
 * und der Abstand zwischen den Kacheln ist derselbe wie dort. Nicht "sieht
 * gleich aus", sondern ist dieselbe Regel: Wer den Abstand im FAQ ändert,
 * ändert ihn hier mit.
 *
 * Ein eigenes gap hier hätte genau die Abweichung erzeugt, die auffiel -
 * und wäre bei der nächsten Änderung am FAQ erneut auseinandergelaufen.
 */

/* overflow: hidden erbt .qa, damit die runden Ecken den Inhalt beschneiden.
   Für eine Liste, die beim Aufklappen wächst, ist das kein Problem - hier
   steht es nur, damit klar ist, dass es Absicht ist und nichts abschneidet. */
.spec__karte { overflow: hidden; }

/* Titel und Zähler nebeneinander in der Zusammenfassung. Das Plus-Zeichen
   rechts kommt von .qa summary, das ist bereits ein space-between-Flex. */
.spec__titel { display: inline-flex; align-items: baseline; gap: var(--s2); }

/* Akzentfarbe statt gedämpft: Die Zahl sagt im zugeklappten Zustand als
   einzige, wie viel hinter einer Kategorie steckt - sie soll auffallen. */
.spec__count { color: var(--accent); font-size: 0.8rem; font-weight: 600; }

/*
 * Die Einträge mehrspaltig. auto-fill statt auto-fit, und das ist der Punkt:
 * auto-fit zieht bei EINEM Eintrag die Spalte über die ganze Breite, und
 * "DJI Mini 3 Pro" stünde als einsame Zeile quer über den Schirm. auto-fill
 * lässt die leeren Spuren stehen, der Eintrag behält seine Breite.
 *
 * Das Polster ist dasselbe wie bei .qa__body, damit die Liste bündig unter
 * dem Titel steht - nur ohne max-width, denn hier soll die Breite ja gerade
 * genutzt werden.
 */
/*
 * Ein Eintrag je Zeile, untereinander.
 *
 * Hier standen zwischenzeitlich mehrere Spalten nebeneinander - gedacht, um
 * viele Geräte unterzubringen, ohne dass die Seite lang wird. Das erledigt
 * inzwischen das Zuklappen: Eine geschlossene Kategorie ist EINE Zeile, egal
 * ob zwei oder zwanzig Geräte darin stehen. Damit braucht die Liste den
 * Kniff nicht mehr und bleibt, was sie ist - eine Liste, von oben nach unten.
 */
.spec__list {
  display: grid;
  gap: var(--s2);
  padding: 0 clamp(1rem, 3vw, 1.6rem) clamp(1rem, 2.5vw, 1.35rem);
}

/* Der Strich trennt die Einträge von der Zusammenfassung darüber. Er sitzt an
   der Liste und nicht am summary, weil er im zugeklappten Zustand
   verschwinden muss - sonst hinge unter jeder geschlossenen Kachel ein
   Strich ohne alles darunter. */
.spec__karte[open] .spec__list {
  margin-top: 0;
  padding-top: clamp(0.85rem, 2vw, 1.1rem);
  border-top: 1px solid var(--line-soft);
  margin-inline: clamp(1rem, 3vw, 1.6rem);

  /*
   * Die Einträge stehen EINGERÜCKT unter dem Titel, nicht bündig mit ihm.
   * Bündig klebten sie an der Kante und lasen sich wie eine zweite Überschrift
   * statt wie das, was zur Kategorie darüber gehört.
   *
   * Die Einrückung sitzt am padding und nicht am margin, damit der Trennstrich
   * darüber weiterhin über die volle Breite läuft - er trennt die Kategorie,
   * nicht die Liste.
   */
  padding-left: clamp(0.9rem, 2.5vw, 1.5rem);
  padding-right: 0;
}
.spec__list li {
  display: flex;
  gap: var(--s2);
  color: var(--fg-muted);
  font-size: 0.94rem;
}
.spec__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------- Textseiten -- */
.prose { max-width: 68ch; }
.prose h2 {
  margin-top: var(--s5);
  margin-bottom: var(--s2);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
}
.prose h2:first-of-type { margin-top: 0; }
.prose p { color: var(--fg-muted); margin-bottom: var(--s3); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- CTA --- */
.cta {
  display: grid;
  gap: var(--s4);
  padding: clamp(1.75rem, 5vw, var(--s6));
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  justify-items: center;
}
.cta__title { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.cta__text { color: var(--fg-muted); max-width: 44ch; }

/* -------------------------------------------------------------- Footer -- */
.foot {
  padding-top: clamp(2.5rem, 6vw, var(--s7));
  padding-bottom: var(--s4);
  background: #0a0b0c;
  border-top: 1px solid var(--line-soft);
}

.foot__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, var(--s5));
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.foot__inner > * { min-width: 0; }

.foot__col h2 {
  margin-bottom: var(--s3);
  color: var(--fg);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.foot__col ul { display: grid; gap: var(--s2); }
.foot__col a {
  color: var(--fg-muted);
  font-size: 0.92rem;
  transition: color 0.2s var(--ease);
}
.foot__col a:hover { color: var(--accent); }

/* gleicher Grund wie in der Navigation: schwarzes Logo auf dunklem Grund */
.foot__col--brand img { height: 26px; width: auto; filter: invert(1); }
.foot__tag {
  margin-top: var(--s3);
  color: var(--fg-dim);
  font-size: 0.9rem;
  font-style: italic;
}

.foot__legal {
  max-width: var(--wrap);
  margin: clamp(2rem, 5vw, var(--s6)) auto 0;
  padding: var(--s4) clamp(1rem, 4vw, 2rem) 0;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-dim);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------------------------------------------- Rechnungen (Verwaltung) -- */

/* Kundennummer - überall gleich, damit man sie im Blick sofort wiederfindet */
.kundennr {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(255, 200, 0, 0.35);
  border-radius: 5px;
  background: rgba(255, 200, 0, 0.08);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  letter-spacing: 0.02em;
}

/* Bestellnummer neben dem Albumtitel */
.chip--nr {
  margin-left: 0.5rem;
  vertical-align: middle;
  font-weight: 600;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
a.chip--nr:hover { border-color: var(--accent); color: var(--accent); }

/* Feld, das nur zum Anschauen da ist: Nummern vergibt der Server, nicht die
   Tastatur. Sichtbar anders, damit niemand vergeblich hineintippt. */
.field input.feld--fest,
input.feld--fest {
  background: var(--bg-raise);
  border-style: dashed;
  color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: default;
  opacity: 1;                      /* Safari graut disabled sonst zusätzlich aus */
  -webkit-text-fill-color: var(--fg-muted);
}

.feld__hinweis { color: var(--fg-dim); font-size: 0.82rem; }

/* .field setzt display:grid und schlägt damit die eingebaute Regel für
   [hidden] - ohne diese Zeile bliebe ein verstecktes Feld sichtbar. */
.field[hidden] { display: none; }
.feld__zusatz  { color: var(--fg-dim); font-weight: 400; }

/* Zwei Felder nebeneinander, im schmalen Fenster untereinander */
.feldpaar {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.feldpaar--plz { grid-template-columns: minmax(6rem, 0.4fr) minmax(9rem, 1fr); }

/* Ankreuzfeld mit Erklärung daneben - die ganze Fläche ist anklickbar */
.kasten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
  padding: var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.kasten:hover { border-color: var(--line); }
.kasten input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; accent-color: var(--accent); }
.kasten > span { display: grid; gap: 0.2rem; font-size: 0.92rem; }
.kasten--schalter:has(input:checked) {
  border-color: rgba(255, 200, 0, 0.45);
  background: rgba(255, 200, 0, 0.06);
}

.rechnungfelder { display: grid; gap: var(--s4); }
.rechnungfelder__titel {
  margin: var(--s2) 0 calc(-1 * var(--s2));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Positionen: Beschreibung breit, Menge und Preis schmal und rechtsbündig */
.rechnungsposten { display: grid; gap: var(--s2); }
.rechnungsposten__kopf,
.rechnungsposten__zeile {
  display: grid;
  grid-template-columns: 1fr 5rem 7rem;
  gap: var(--s2);
  align-items: center;
}
.rechnungsposten__kopf {
  color: var(--fg-dim);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rechnungsposten__zeile input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease);
}
.rechnungsposten__zeile input:focus { border-color: var(--accent); outline: none; }
.rechnungsposten__zeile input:nth-child(2),
.rechnungsposten__zeile input:nth-child(3) { text-align: right; }

/*
 * Das × zum Löschen einer Position.
 *
 * Es erscheint erst, wenn JavaScript die Liste übernommen hat - sonst stände da
 * ein Knopf ohne Wirkung. Dann kommt eine vierte, schmale Spalte dazu; die
 * Kopfzeile bekommt sie mit, damit die Spalten weiter untereinander stehen.
 */
.rechnungsposten__weg { display: none; }
.rechnungsposten--loeschbar .rechnungsposten__kopf,
.rechnungsposten--loeschbar .rechnungsposten__zeile {
  grid-template-columns: 1fr 5rem 7rem 2.25rem;
}
.rechnungsposten--loeschbar .rechnungsposten__weg {
  display: inline-flex;
  width: 2.25rem;
  padding: 0.45rem 0;
  font-size: 1.05rem;
  line-height: 1;
}

.rechnungsposten__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: 0.2rem;
}
.rechnungsposten__summe { color: var(--fg); font-size: 0.92rem; font-weight: 600; }

@media (max-width: 30rem) {
  /* Auf dem Telefon passen drei Spalten nicht mehr nebeneinander. */
  .rechnungsposten__kopf { display: none; }
  .rechnungsposten__zeile { grid-template-columns: 1fr 1fr; }
  .rechnungsposten--loeschbar .rechnungsposten__zeile {
    grid-template-columns: 1fr 1fr 2.25rem;
  }
  /* Die Beschreibung über die ganze Breite, darunter Menge, Preis und das ×. */
  .rechnungsposten__zeile input:first-child { grid-column: 1 / -1; }
}

.rechnung__tasten {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
}
.rechnung__tasten .feld__hinweis { flex: 1 1 12rem; }

/* --------------------------------------- Kachel mit angehängter Kachel -- */

/*
 * Die Rechnungsfelder gehören zum Anlegen-Formular, stehen aber daneben statt
 * darunter: So bleibt sichtbar, dass "Anlegen" beides auf einmal erledigt, und
 * die schmale Kachel bleibt schmal, solange keine Rechnung gebraucht wird.
 *
 * Die Brücke dazwischen ist der optische Beweis: Ein Strich verbindet beide
 * Kanten, damit die zweite Kachel nicht wie ein eigenständiger Kasten wirkt.
 */
.doppelkachel__form {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.doppelkachel__haupt {
  flex: 0 0 clamp(20rem, 34vw, 27rem);
  max-width: 100%;
  display: grid;
  gap: var(--s4);
  align-content: start;
}
.doppelkachel__haupt:hover { transform: none; }

.doppelkachel__bruecke { display: none; }

.doppelkachel__anbau {
  display: none;
  flex: 1 1 24rem;
  min-width: 0;
}

/* Aufgeklappt: Brücke sichtbar, Anbau eingeblendet. Beides über den Zustand
   der Checkbox - ohne JavaScript, damit es auch dann aufgeht. */
.doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__bruecke,
.doppelkachel--offen .doppelkachel__bruecke {
  display: block;
  position: relative;
  flex: 0 0 2.5rem;
  align-self: center;
}
.doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__bruecke::before,
.doppelkachel--offen .doppelkachel__bruecke::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(255, 200, 0, 0.5));
}
.doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__bruecke::after,
.doppelkachel--offen .doppelkachel__bruecke::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
}

.doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__anbau,
.doppelkachel--offen .doppelkachel__anbau {
  display: block;
  border-color: rgba(255, 200, 0, 0.28);
  animation: anbau-auf 0.35s var(--ease) both;
}
.doppelkachel__anbau:hover { transform: none; }

@keyframes anbau-auf {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to   { opacity: 1; transform: none; }
}

/* Schmales Fenster: untereinander statt nebeneinander, die Brücke wird
   senkrecht. Nebeneinander blieben sonst zwei zu enge Spalten übrig. */
@media (max-width: 60rem) {
  .doppelkachel__form { flex-direction: column; }
  .doppelkachel__haupt { flex: 1 1 auto; }
  .doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__bruecke,
  .doppelkachel--offen .doppelkachel__bruecke {
    flex: 0 0 2rem;
    align-self: stretch;
  }
  .doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__bruecke::before,
  .doppelkachel--offen .doppelkachel__bruecke::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--line), rgba(255, 200, 0, 0.5));
  }
  .doppelkachel:has([data-rechnung-schalter]:checked) .doppelkachel__anbau,
  .doppelkachel--offen .doppelkachel__anbau {
    animation-name: anbau-auf-hoch;
  }
}

@keyframes anbau-auf-hoch {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------ Kachel zum Aufklappen -- */
.kachel-auf { padding: 0; }
.kachel-auf:hover { transform: none; }

.kachel-auf__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  cursor: pointer;
  list-style: none;
}
.kachel-auf__kopf::-webkit-details-marker { display: none; }
.kachel-auf__kopf > span:first-child { display: grid; gap: 0.25rem; }
.kachel-auf__kopf .card__title { font-size: 1.15rem; }

.kachel-auf__pfeil {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fg-dim);
  border-bottom: 2px solid var(--fg-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.kachel-auf__kopf:hover .kachel-auf__pfeil { border-color: var(--accent); }
.kachel-auf[open] .kachel-auf__pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

.kachel-auf__inhalt {
  padding: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s4);
}

/* ------------------------------------------------------- PDF-Vorschau -- */

/*
 * Die Vorschau liegt über der Seite und speichert nichts. Wichtig ist, dass
 * das Formular darunter unverändert stehen bleibt: Wer die Vorschau schließt,
 * tippt weiter, wo er aufgehört hat.
 */
.pdf-dialog {
  width: min(56rem, calc(100vw - 2rem));
  height: min(90vh, 60rem);
  max-width: none;
  max-height: none;
  padding: 0;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdf-dialog::backdrop { background: rgba(6, 7, 8, 0.8); }
.pdf-dialog[open] { display: grid; grid-template-rows: auto 1fr; }

.pdf-dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.pdf-dialog__titel { margin: 0; font-size: 1rem; }
.pdf-dialog__titel span { display: block; color: var(--fg-dim); font-size: 0.8rem; font-weight: 400; }

.pdf-dialog__rahmen { width: 100%; height: 100%; border: 0; background: #33383d; }

.pdf-dialog__meldung {
  display: grid;
  place-content: center;
  gap: var(--s3);
  padding: var(--s5, 2rem);
  text-align: center;
  color: #ff8a80;
}

/* ------------------------------------------------------- Scroll-Reveal -- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Kein JS: Inhalte müssen trotzdem sichtbar sein */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .tile:hover img, .shot:hover img { transform: none; }
}