/* ==========================================================================
   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; }

/*
 * hidden heißt versteckt - ausnahmslos.
 *
 * Der Browser gibt `[hidden]` nur ein `display: none` aus seinem eigenen
 * Stylesheet mit, und das verliert gegen JEDE Klasse, die `display` setzt.
 * `.btn` ist `inline-flex`, `.field` ist `grid` - ein `el.hidden = true` im
 * JavaScript wirkt dann schlicht nicht, und zwar lautlos: Die Eigenschaft ist
 * gesetzt, das Element steht trotzdem da.
 *
 * Dreimal ist das hier einzeln geflickt worden (.shot, .artikel, .field),
 * bevor es einmal grundsätzlich geregelt wurde. Das `!important` ist genau
 * dafür da: Es soll auch die Klasse schlagen, die morgen dazukommt.
 */
[hidden] { display: none !important; }

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; }
/* Das Wortzeichen steht als Inline-SVG in der Seite (siehe inc/logo.php) und
   ist mit fill="currentColor" gezeichnet: color bestimmt die schwarzen Teile,
   die gelben Akzente behalten ihre feste Hausfarbe. Ein invert()-Filter wie
   früher ginge hier nicht mehr - der würde das Gelb zu Blau drehen. */
.nav__logo {
  display: block;
  height: 24px;
  width: auto;
  color: var(--fg);
}

.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;
}

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

/*
 * Zustand "liegt im Korb": grün, beim Zeigen rot mit Text "Entfernen".
 *
 * Es ist derselbe Knopf wie vorher - nur das Formular drumherum sagt, was
 * gerade gilt. Vorher machte das eine zweite Klasse (.btn--drin); die musste
 * jemand austauschen, sobald sich der Korb änderte, also gab es das Markup
 * zweimal: einmal in PHP und einmal im Skript. Ein Attribut umzusetzen kann
 * das Skript ohne diese Doppelung.
 */
.korbform[data-drin="1"] .btn--korb {
  border-color: rgba(126, 217, 87, 0.45);
  color: #7ed957;
  background: rgba(126, 217, 87, 0.08);
}
.korbform[data-drin="1"] .btn--korb:hover,
.korbform[data-drin="1"] .btn--korb:focus-visible {
  border-color: rgba(255, 138, 128, 0.6);
  color: #ff8a80;
  background: rgba(255, 138, 128, 0.1);
}

/*
 * Drei Beschriftungen im selben Knopf, übereinandergelegt: "In den Warenkorb",
 * "Im Warenkorb" und "Entfernen". Der Knopf ist damit so breit wie die
 * längste und wackelt weder beim Zeigen noch beim Umschalten.
 *
 * Sichtbar ist immer genau eine. Welche, hängt an data-drin am Formular -
 * deshalb sind alle Regeln daran festgemacht und nicht am Knopf: Sonst
 * schlüge die Zeile für den einen Zustand in den anderen durch.
 */
.tausch { display: grid; align-items: center; }
.tausch > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
/*
 * Maße für die Zeichen. Sie müssen hier stehen: Die SVG bringen keine eigenen
 * mit, und in der großen Ausführung des Knopfes greift .btn--klein svg nicht -
 * dann rechnet der Browser sie auf seine Standardgröße hoch, und der Knopf
 * wird von 60 auf 85 Pixel hoch. Im Fenster geht das dem Bild ab.
 */
.tausch svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn--klein .tausch svg { width: 14px; height: 14px; }

.korbform[data-drin="0"] .tausch__neu,
.korbform[data-drin="1"] .tausch__ruhe { opacity: 1; }
.korbform[data-drin="1"] .btn:hover .tausch__ruhe,
.korbform[data-drin="1"] .btn:focus-visible .tausch__ruhe { opacity: 0; }
.korbform[data-drin="1"] .btn:hover .tausch__hover,
.korbform[data-drin="1"] .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;
}
.filters a { text-decoration: none; display: inline-block; }
/*
 * Muss nach der Zeile darüber stehen: Ein eigenes display schlägt die Vorgabe
 * des Browsers für [hidden], und dann stünden ausgeblendete Filter trotzdem da.
 */
.filters [hidden] { display: none; }

/*
 * Zwei Reihen in der Galerie: oben die Bereiche, darunter die Kategorien.
 *
 * Die untere Reihe ist die feinere Angabe und tritt deshalb leiser auf - sonst
 * stünden zwei gleich laute Reihen übereinander und man wüsste nicht, welche
 * die andere einschränkt.
 */
.filters--bereiche { margin-bottom: var(--s2); }
.filters--kats button,
.filters--kats a {
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-style: dashed;
}
.filters--kats a[aria-pressed="true"],
.filters--kats button[aria-pressed="true"] { border-style: solid; }

/*
 * Im Shop steht rechts neben der Kategoriereihe der Schalter für die
 * Nutzungsart - auf gleicher Höhe, am rechten Rand, also über der letzten
 * Bildspalte. Der Abstand nach unten wandert dafür von der Reihe auf die
 * Zeile, sonst stünde er zweimal.
 *
 * Wird es eng, rutscht der Schalter unter die Filter und bleibt rechts.
 */
.filterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: clamp(1.5rem, 4vw, var(--s5));
}
.filterzeile .filters { flex: 1 1 20rem; margin-bottom: 0; }
.filterzeile .lizenzschalter { flex: 0 0 auto; margin-left: auto; }

.lizenzschalter {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lizenzschalter__wort {
  color: var(--fg-dim);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
/* Beide Wahlmöglichkeiten in einem Gehäuse - so ist zu sehen, dass es ein
   Schalter mit zwei Stellungen ist und nicht zwei Knöpfe nebeneinander. */
.lizenzschalter__gleis {
  display: inline-flex;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lizenzschalter__wahl {
  padding: 0.34rem 0.9rem;
  border-radius: 999px;
  color: var(--fg-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lizenzschalter__wahl:hover { color: var(--fg); }
.lizenzschalter__wahl[aria-pressed="true"] {
  background: 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); }

/*
 * Die beiden Ueberfaelligkeitsstufen - gelb, orange, rot in einer Reihe.
 *
 * Farbe ist hier NICHT das einzige Unterscheidungsmerkmal: Im Etikett steht
 * "Offen", "Faellig" oder "Mahnung", und darunter das Datum. Wer Rot und
 * Orange nicht auseinanderhaelt - das ist die haeufigste Farbsehschwaeche -,
 * liest es trotzdem.
 */
.chip--faellig { color: #ff9f45; border-color: rgba(255, 159, 69, 0.45); background: rgba(255, 159, 69, 0.10); }
.chip--mahnung { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.10); }

.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 -- */

/*
 * Der Abstand zur unteren rechten Ecke. Steht als eigene Größe da, weil sich
 * ZWEI Dinge dorthin setzen - der Korb-Knopf und der Hinweis auf die
 * Rabattaktion - und beide denselben Rand halten müssen.
 */
:root { --ecke: clamp(0.75rem, 3vw, 1.75rem); }

/* Angepinnter Korb-Knopf: bleibt unten rechts stehen, damit man ihn bei
   langen Bilderlisten nicht suchen muss. */
.korbknopf {
  position: fixed;
  right: var(--ecke);
  bottom: var(--ecke);
  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; }
}

/* ------------------------------------------------- Hinweis auf Rabatt -- */
/*
 * Sitzt in derselben Ecke wie der Korb-Knopf, deshalb dunkel und nicht gelb:
 * Zwei gelbe Flächen übereinander wären zwei Aufforderungen zugleich, und die
 * wichtigere ist der Korb. Gelb bleibt hier allein der Code.
 */
.neukunde {
  position: fixed;
  right: var(--ecke);
  bottom: var(--ecke);
  z-index: 59;
  /*
   * Keine feste Breite: Die Karte richtet sich nach ihrem längsten Inhalt.
   * Vorher war es umgekehrt, und ein Code wie SAALEBULLS10 brach die Werbezeile
   * mitten entzwei.
   *
   * Die Obergrenze ist trotzdem nötig - ohne sie zöge ein langes
   * Kleingedrucktes die Karte quer über den Bildschirm. Gemessen reicht sie für
   * einen Code aus 16 Zeichen (FRUEHLINGSAKTION, 416 px); erst darüber bricht
   * die Zeile um, und das ist die Stelle, an der ein Umbruch hingehört.
   */
  width: max-content;
  max-width: min(28rem, calc(100vw - 2 * var(--ecke)));
  padding: 0.85rem 1rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);

  /*
   * Der Verzug ist kein Effekt, sondern Zweck: Wer den Hinweis weggeklickt hat,
   * soll ihn auf der nächsten Seite nicht noch einmal aufblitzen sehen. Das
   * Skript blendet ihn in dieser knappen Sekunde aus, bevor er sichtbar wird.
   */
  animation: neukunde-auf 0.35s var(--ease) 0.6s both;
}

@keyframes neukunde-auf {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .neukunde { animation: neukunde-auf 0.01s linear 0.6s both; }
}

/*
 * Stehen beide da, stapeln sie sich. Über :has() am body, weil der Korb-Knopf
 * auch ohne Neuladen auftauchen kann - dann rückt der Hinweis von selbst nach
 * oben, ohne dass das Skript etwas davon wissen muss.
 *
 * Die 3.4rem sind die Höhe des Korb-Knopfes (0,6rem Polster oben und unten um
 * zwei Textzeilen), dazu der Abstand dazwischen.
 */
body:has(.korbknopf:not([hidden])) .neukunde {
  bottom: calc(var(--ecke) + 3.4rem + var(--s2));
}
@media (max-width: 400px) {
  /* Dort trägt der Knopf nur eine Zeile, ist also flacher. */
  body:has(.korbknopf:not([hidden])) .neukunde {
    bottom: calc(var(--ecke) + 2.8rem + var(--s2));
  }
}

/* Das Kreuz sitzt in der Ecke der Karte, nicht in der Textzeile - sonst
   drängelte es sich zwischen Code und Rabatt. */
.neukunde__zu {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.neukunde__zu svg { width: 13px; height: 13px; }
.neukunde__zu:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.neukunde__zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Die ganze Zeile ist der Knopf - der Code allein wäre ein zu kleines Ziel,
   besonders am Daumen. */
.neukunde__code {
  display: flex;
  align-items: center;
  /* Eng, nicht --s2: Das Blatt soll erkennbar zur Zeile gehören und nicht zum
     Kreuz daneben. Gemessen sind es damit 7 px zur Schrift und 20 px zum
     Kreuz - der Unterschied muss man nicht suchen. */
  gap: 0.45rem;
  width: 100%;
  margin: 0 0 0.3rem;
  /* Rechts Platz lassen, damit die Zeile nicht unter das Kreuz läuft. Der
     Knopf bleibt trotzdem über die ganze Breite anklickbar. */
  padding: 0.15rem 2rem 0.15rem 0;
  background: none;
  border: 0;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.neukunde__code:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Ohne Fußnote darunter braucht die Zeile auch keinen Abstand nach unten. */
.neukunde__code:last-child { margin-bottom: 0; }

/*
 * Nicht wachsen lassen (flex: 0 1 auto statt 1 1 auto): Sonst schöbe die Zeile
 * das Blatt an den rechten Rand, und dort säße es dem Kreuz im Nacken. So
 * folgt es direkt der Schrift und gehört sichtbar zu ihr.
 */
.neukunde__zeile {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.3;
}
.neukunde__zeile strong {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;   /* ein langer Code sprengt die Karte sonst */
}
.neukunde__code:hover .neukunde__zeile strong { color: #ffd433; }

/* Blatt und Haken liegen übereinander, damit beim Wechsel nichts springt. */
.neukunde__zeichen {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--fg-dim);
}
.neukunde__zeichen svg {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity 0.15s var(--ease);
}
.neukunde__code:hover .neukunde__zeichen { color: var(--fg-muted); }
.neukunde__haken { opacity: 0; color: #7ed957; }
.neukunde--kopiert .neukunde__blatt { opacity: 0; }
.neukunde--kopiert .neukunde__haken { opacity: 1; }

/* Ohne Skript wird nichts kopiert - dann bleibt der Text zum Abtippen da,
   aber ohne die Verheißung eines Knopfes, der nichts tut. */
.no-js .neukunde__zu,
.no-js .neukunde__zeichen { display: none; }
.no-js .neukunde__code { cursor: default; padding-right: 0; }

.neukunde__klein {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.76rem;
  line-height: 1.4;
  /*
   * Notbremse gegen ein Wort ohne Lücke. Ein gewöhnlicher Satz bricht an den
   * Leerzeichen und die Karte wächst bis zu ihrer Grenze mit - gemessen. Ein
   * einziges langes Wort hat aber keine Stelle zum Brechen und lief 210 px aus
   * dem Kasten heraus, ohne ihn zu erweitern.
   *
   * "anywhere" und nicht "break-word": Nur das erste zählt beim Ausmessen des
   * Mindestbedarfs mit. Auf die gewachsene Breite hat es keinen Einfluss - die
   * kommt weiter vom ungebrochenen Text, die Karte wird also nicht schmaler
   * als nötig.
   */
  overflow-wrap: anywhere;
}

.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;
}

/*
 * Zusammenfassung der Rechnungsanschrift.
 *
 * Steht an der Kasse anstelle der Eingabefelder, sobald der Kunde angemeldet
 * ist: Er will hier sehen, was auf der Rechnung landet - ändern tut er seine
 * Daten im Kundenkonto.
 */
.anschrift {
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.anschrift__kopf {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--fg-dim);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.anschrift__text { margin: 0; line-height: 1.55; }
/* Jede Angabe eine Zeile - und was leer ist, hinterlässt keine Lücke. Die
   Firma hat nicht jeder, ein leerer Absatz sähe aus wie ein Fehler. */
.anschrift__text > span { display: block; }
.anschrift__text > span:empty { display: none; }
.anschrift__mail {
  margin-top: 0.4rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
  word-break: break-all;
}

/* Nebensätze in der Kasse: da, aber nicht laut. */
.kasse__leise {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}
.kasse__leise a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * Die aufklappbaren Anschriftsfelder.
 *
 * Die Abstände des Formulars (.form) enden am <details> - das ist für das
 * Raster ein einziges Feld. Der Inhalt stellt sie deshalb selbst wieder her,
 * sonst klebten die Eingabefelder aufeinander.
 */
.kasse__klapp {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.kasse__klapp__inhalt {
  display: grid;
  gap: var(--s4);
  padding-bottom: var(--s4);
}

.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; }

/* ------------------------------------------------------- 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 ----------- */

/* Das Sternchen hinter dem Preis im Raster; es führt zur Erklärung darunter.
   Das "ab" davor ist weg: Seit die Nutzung oben am Schalter steht, ist der
   Preis daneben genau der, der beim Klick auf den Knopf gilt. */
.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; }
/* Die eingestellte Nutzung ist hervorgehoben - wer dem Sternchen folgt, will
   meist wissen, was er gerade gewählt hat. */
.nutzungsliste > div.ist-an {
  border-color: rgba(255, 200, 0, 0.4);
  background: rgba(255, 200, 0, 0.05);
}
.nutzungsliste > div.ist-an dt { color: var(--accent); }

/* --- Großansicht: das Bild in groß --- */

.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.
 *
 * Das Kreuz selbst ist deshalb auch eine Zeichnung und kein "&times;": Ein
 * Schriftzeichen sitzt in seiner Zeile so, wie es die Schrift vorgibt - hier
 * gemessene 1,4 Pixel zu hoch, und auf einem Rechner mit anderer Systemschrift
 * um einen anderen Betrag. Im sichtbaren Kasten fällt das auf.
 */
.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);
}
.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 14rem sind gemessen, nicht geschätzt: Platz fürs Schließkreuz über
     dem Bild, die Zeile mit Nutzung, Preis und Knopf, die Abstände und der
     Rand des Fensters ergeben 145 Pixel - und 188, wenn sich diese Zeile auf
     dem Telefon zu einem Block stapelt. Mit den 2rem, die das Fenster vom
     Bildschirmrand frei lässt, sind das 220; aufgerundet, damit ein Pixel
     Rundung nicht schon zum Scrollen führt.
     Die Zahl ist zweimal gefallen: von 28rem auf 26, als die Preisliste aus
     zwei Karten dem Schalter über dem Raster wich, und von dort auf 14, als
     auch Kurzbeschreibung, Bildnachweis, Steuerhinweis und Bildunterschrift
     aus dem Fenster verschwanden. Alles davon steht weiterhin unter dem
     Raster und in den Nutzungsbedingungen; hier war es der vierte Abdruck.
     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 - 14rem), 52rem);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
/*
 * Mittig unter dem Bild: Nutzung, Preis, Knopf - so breit wie sein Inhalt und
 * keinen Millimeter mehr.
 *
 * Ein Balken über die ganze Bildbreite war er nur, solange er eine Liste
 * tragen musste. Jetzt sind es drei Angaben, und die stehen als Pille da wie
 * der Warenkorb-Knopf und der Schalter über dem Raster - dieselbe Form, die
 * hier überall die Handgriffe trägt.
 *
 * Mittig ist auch die einzige Ausrichtung, die zum Bild passt, ohne es
 * nachzumessen: Das Bild steht selbst in der Mitte (margin-inline:auto), seine
 * Kanten stehen dagegen erst fest, wenn die Datei geladen ist - eine Pille an
 * der Bildkante müsste JavaScript bei jeder Größenänderung neu setzen.
 */
.lizenz__leiste {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  max-width: 100%;
  /* rechts nur der Rand des Knopfes: er sitzt in der Pille wie die Stellungen
     im Schalter, links dagegen Platz für den Text */
  padding: 4px 4px 4px 1.1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
/*
 * Mittig, nicht auf der Schriftlinie: Name und Preis sind unterschiedlich
 * groß, und auf gemeinsamer Schriftlinie hängt der kleinere Name gemessene
 * 2,5 Pixel tiefer als die Mitte der Pille - genug, dass es auffällt, wenn
 * Preis und Knopf daneben mittig sitzen.
 */
.lizenz__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.6rem;
  min-width: 0;
}
/* Leiser als der Preis: Der Betrag ist die Angabe, der Name sagt nur, wofür
   er gilt. */
.lizenz__art { color: var(--fg-muted); font-weight: 600; font-size: 0.85rem; }
.lizenz__preis {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.25rem;
  white-space: nowrap;
}
/* Ohne das bricht "In den Warenkorb" im schmalen Fenster um und der Knopf
   wird doppelt so hoch wie nötig. */
.lizenz__leiste .btn { white-space: nowrap; }

/*
 * Auf dem Telefon passen Name, Preis und Knopf nicht mehr nebeneinander. Dann
 * stapeln sie sich, und aus der Pille wird ein kleiner Block: Umgebrochen sähe
 * sie aus wie ein Fleck, dessen linke Hälfte leer ist - die Rundung gehört zu
 * einer Zeile, nicht zu zwei.
 *
 * Die Grenze liegt bei 34rem, weil die längste Fassung ("Kommerzielle Nutzung"
 * mit dreistelligem Betrag) samt Knopf, Fensterpolster und dem Rand, den das
 * Fenster frei lässt, so viel braucht.
 */
@media (max-width: 34rem) {
  .lizenz__leiste {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius);
  }
}

/* --- 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; }

/* ------------------------------------------------------ Klappkarten -- */
/*
 * Karten der Verwaltung, die sich auf- und zuklappen lassen.
 *
 * <details> und <summary> können das von Haus aus - ohne Skript, mit Tastatur
 * und mit der richtigen Ansage für Vorlesegeräte. Deshalb kein eigener Knopf,
 * der dasselbe nachbaut.
 *
 * .karte statt .card: Die Kartenoptik ohne das Anheben beim Überfahren - eine
 * Karte, die man anklickt, um sie zu öffnen, soll nicht auch noch wegrutschen.
 */
.karte {
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}

.klappe__kopf {
  display: flex;
  align-items: center;
  gap: var(--s2);
  cursor: pointer;
  list-style: none;                    /* das eigene Dreieck bleibt weg */
}
.klappe__kopf::-webkit-details-marker { display: none; }
.klappe__kopf .card__title { margin: 0; }
.klappe__kopf:hover .card__title { color: var(--accent); }
.klappe__kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Zugeklappt zeigt der Pfeil nach rechts, aufgeklappt nach unten. */
.klappe__pfeil {
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  color: var(--fg-dim);
  transition: transform 0.2s var(--ease);
}
.klappe[open] .klappe__pfeil { transform: rotate(90deg); }

/* Was drinsteckt, wenn es zu ist - sonst muss man aufklappen, um zu sehen,
   ob sich das Aufklappen lohnt. */
.klappe__zahl { margin-left: auto; color: var(--fg-dim); font-size: 0.82rem; }

/* Abstand nur nach dem Öffnen; zugeklappt soll die Karte flach bleiben. */
.klappe[open] .klappe__kopf { margin-bottom: var(--s3); }

/* ------------------------------------------- Bereiche und Kategorien -- */
/*
 * Beides in der Galerieverwaltung. Jede Zeile ist ein eigenes Formular -
 * verschachtelte Formulare erlaubt HTML nicht, und jede Zeile soll für sich
 * abschickbar sein.
 */
.bereich {
  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;
}
.bereich__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.bereich__name,
.bereich__text,
.katliste__name {
  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.9rem;
}
.bereich__name:focus,
.bereich__text:focus,
.katliste__name:focus { border-color: var(--accent); outline: none; }

.bereich__name { flex: 1 1 12rem; font-weight: 600; }
.bereich__text { width: 100%; }
/*
 * Der Name als bloße Beschriftung - so steht er in der Shop-Verwaltung, wo
 * sich nur die Zuordnung ändern lässt. Bewusst OHNE Feldrahmen: Mit sähe er
 * aus wie ein Eingabefeld, in das sich nichts tippen lässt.
 */
.bereich__titel { flex: 1 1 12rem; font-size: 0.95rem; font-weight: 600; }
.bereich__slug,
.katliste__slug {
  padding: 0.15rem 0.45rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  font-size: 0.78rem;
}
.bereich__zahl,
.katliste__zahl { color: var(--fg-dim); font-size: 0.82rem; }
.bereich__ruecken,
.katliste__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.bereich__ruecken { margin-left: auto; }

.bereich__kats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--s3);
  margin: 0;
  padding: var(--s2) 0 0;
  border: none;
  border-top: 1px solid var(--line-soft);
}
.bereich__kats legend { color: var(--fg-dim); font-size: 0.8rem; padding: 0; }
.bereich__kat { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.bereich__kat input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.bereich__kat span { color: var(--fg-dim); }

.bereich__kachel { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.bereich__vorschau {
  width: 4.5rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.bereich__kachelfeld { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bereich__kachelfeld label { color: var(--fg-dim); font-size: 0.82rem; }
.bereich__kachelfeld select { max-width: min(26rem, 100%); }

.bereich__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--s2);
  border-top: 1px solid var(--line-soft);
}
.bereich--neu { grid-auto-flow: column; justify-content: start; align-items: center; }

.katliste { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 0.5rem; }
.katliste__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.katliste__name { flex: 1 1 10rem; }
.katliste__knoepfe { margin-left: auto; }
.katliste__hinweis { color: var(--fg-dim); font-size: 0.8rem; }

/* 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; }

/*
 * Das Zeichen, das gerade bearbeitet wird.
 *
 * Bei mehreren Logos auf einem Bild ist das keine Zierde: Liegen zwei
 * übereinander, schiebt man sonst das falsche und sucht den Fehler in den
 * Reglern. Der Rahmen sagt, wer gemeint ist.
 */
.werkstatt__zeichen--aktiv { outline: 2px dashed var(--accent); outline-offset: 3px; }

/*
 * 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)); }
}

/*
 * Ein schlichter Aufklapper für Seltenes.
 *
 * Das Hinterlegen eines neuen Logos ist genau das: Das eigene Zeichen wechselt
 * selten, die Aufträge dauernd. Zugeklappt steht es nicht mehr neben der
 * Auswahl und lässt sich auch nicht mehr mit ihr verwechseln.
 */
.klapp { border-top: 1px solid var(--line-soft); }
.klapp__kopf {
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--fg-muted);
  user-select: none;
}
.klapp__kopf::-webkit-details-marker { display: none; }
.klapp__kopf::before {
  content: "+ ";
  color: var(--accent);
  font-weight: 700;
}
.klapp[open] > .klapp__kopf { color: var(--fg); }
.klapp[open] > .klapp__kopf::before { content: "– "; }
.klapp__kopf:hover { color: var(--fg); }
.klapp__kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Die Zeichen, je eines im Aufklapper --- */

/*
 * Der Regelfall ist EIN Zeichen; dann steht hier ein einziger, offener Kasten,
 * und der Editor sieht aus wie eh und je. Erst wer ein zweites Logo braucht,
 * bekommt eine Liste - und die muss auch zugeklappt sagen, was eingestellt ist.
 */
.wzteile {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
  text-align: left;
}
.wzteil {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.wzteil[open] { border-color: var(--line); }

.wzteil__kopf {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wzteil__kopf::-webkit-details-marker { display: none; }
.wzteil__kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Die Nummer ist die Reihenfolge des Zeichnens: 1 liegt unten, das letzte oben.
   Dieselbe Reihenfolge steht in werkstatt_zeichnen(). */
.wzteil__zahl {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--line-soft);
  font-size: .8rem;
  font-weight: 600;
}
.wzteil[open] .wzteil__zahl { background: var(--accent); color: #14171a; }

.wzteil__was { flex: 1 1 auto; min-width: 0; font-weight: 600; }

/* Welches Logo - zugeklappt die einzige Auskunft, die man wirklich braucht. */
.wzteil__wer {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Daumennagel des Logos. Auf dem Karo wie in der Ablage-Kachel: Ein weißes
   Logo mit weißem Kasten fällt auf dunklem Grund sonst nicht auf. */
.wzteil__schau {
  flex: none;
  width: 3.5rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  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: 10px 10px;
  background-position: 0 0, 5px 5px;
  overflow: hidden;
}
.wzteil__schau img { max-width: 100%; max-height: 100%; }

.wzteil__inhalt {
  padding: var(--s3);
  border-top: 1px solid var(--line-soft);
}
.wzteil__inhalt .werkstatt__regler { margin-top: var(--s3); }

/* Ü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;
}

/* Der Bildnachweis zum Abschreiben - deshalb Monoschrift und viel Luft:
   Er soll aus dem Fließtext herausstechen und sich sauber kopieren lassen. */
.nachweis {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding: var(--s3);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.nachweis__label {
  color: var(--fg-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nachweis__text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.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)); }

/* ------------------------------------------------------- Passkeys ----- */

/* Trennstrich mit Text: "oder mit E-Mail und Passwort".
   Der Passkey-Knopf steht darüber und ist der kürzere Weg. */
.anmeldung__oder {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  color: var(--fg-dim);
  font-size: 0.82rem;
}
.anmeldung__oder::before,
.anmeldung__oder::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.passkeys {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.passkeys__eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

/* Das Umbenennen-Formular nimmt den Platz, der Löschen-Knopf bleibt rechts. */
.passkeys__zeile {
  flex: 1 1 16rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s1) var(--s2);
  margin: 0;
}

.passkeys__symbol { width: 20px; height: 20px; color: var(--accent); }

/* Sieht aus wie Text, ist aber ein Feld - der Name lässt sich direkt
   überschreiben, ohne dass die Zeile wie ein Formular wirkt. */
.passkeys__name {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  padding: 0.25rem 0.4rem;
  min-width: 0;
}
.passkeys__name:hover { border-color: var(--line-soft); }
.passkeys__name:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}

.passkeys__meta {
  grid-column: 2 / -1;
  color: var(--fg-dim);
  font-size: 0.78rem;
}

/* Womit der Schlüssel angelegt wurde - das Erste, was man sucht. */
.passkeys__woher { color: var(--fg); font-weight: 600; }

.passkeys__weg { margin: 0; }

@media (max-width: 30rem) {
  .passkeys__zeile { grid-template-columns: auto 1fr; }
  /* Der Umbenennen-Knopf rutscht unter den Namen statt daneben zu quetschen. */
  .passkeys__zeile > button { grid-column: 2; justify-self: start; }
}

/* ------------------------------------------- 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 */
/* Wie .nav__logo: Inline-SVG, Farbe über color - siehe dort. */
.foot__logo { display: block; height: 26px; width: auto; color: var(--fg); }
.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; }
}

/* --------------------------------------------- Tabellen im Einstellpanel -- */

/*
 * Wiederholbare Zeilen: Menüpunkte, Angebote, Zeitleiste, Team, Technik, FAQ.
 *
 * Eine echte <table> wäre hier falsch. Die Zeilen haben zwei bis fünf Felder
 * von sehr verschiedener Länge - eine Überschrift, ein Absatz, ein Bildname -,
 * und im schmalen Fenster müssen sie untereinander rutschen dürfen. Eine
 * Tabelle kann das nicht, ohne dass Spaltenköpfe und Inhalt auseinanderfallen.
 * Deshalb je Zeile ein Kasten, und darin die Felder als umbrechende Reihe.
 */
.zeilen { display: grid; gap: var(--s3); margin-bottom: var(--s3); }

.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

/*
 * Die letzte Zeile ist immer leer und wartet auf einen neuen Eintrag. Gestrichelt,
 * damit sie sich als Angebot zu erkennen gibt und nicht als vergessener Eintrag:
 * Wer sie ausfüllt, hat eine Zeile mehr, wer sie stehen lässt, hat nichts getan.
 */
.zeile--neu { border-style: dashed; border-color: var(--line); }

.zeile .field { flex: 1 1 11rem; min-width: 0; }

/* Ein Absatz braucht mehr Platz als ein Datum - sonst stehen fünf gleich
   breite Felder nebeneinander und keines davon ist zu gebrauchen. */
.zeile .field--weit { flex: 3 1 22rem; }
.zeile .field--schmal { flex: 0 1 9rem; }

.zeile__nr {
  flex: 0 0 auto;
  width: 1.6rem;
  padding-top: 1.9rem;
  color: var(--fg-dim);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.zeile__tasten {
  flex: 0 0 auto;
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  padding-top: 1.6rem;
}

.zeile__taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.zeile__taste:hover { color: var(--accent); border-color: var(--accent); }
.zeile__taste:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zeile__taste[disabled] { opacity: 0.3; cursor: default; }
.zeile__taste[disabled]:hover { color: var(--fg-muted); border-color: var(--line); }

/* Die Vorschau des ausgewählten Bildes neben dem Auswahlfeld - ohne sie ist
   "about/3.png" nur ein Dateiname und kein Bild. */
.zeile__bild {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  margin-top: 1.6rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}