/* ==========================================================================
   SCHAMLOS — GALERIE
   Übersicht (/galerie/), Einzelgalerie (/galerie/{slug}/) und Lightbox.

   WIRD NUR AUF DEN GALERIE-SEITEN GELADEN (siehe sed_gallery_enqueue_assets()
   in includes/gallery.php) und ist bewusst so geschrieben, dass sie nirgends
   sonst wirken kann: Jeder Selektor hier hängt an .sed-gallery oder an einer
   .sed-gal-/.sed-lb-Klasse, es gibt keine Regel auf einem nackten Elementtyp.

   KEINE EIGENEN FARBEN UND SCHRIFTEN: Farbwerte kommen ausschließlich aus den
   CSS-Variablen von design-system.css (--sed-bg, --sed-pink, --sed-cyan …),
   die Schriften aus den dortigen @font-face-Deklarationen der lokal
   ausgelieferten WOFF2-Dateien. Deshalb steht hier kein einziger
   Hexadezimalwert für eine Markenfarbe und kein @import auf Google Fonts:
   Ändert sich das Design-System, zieht die Galerie automatisch mit, und es
   verlässt weiterhin kein Request die eigene Domain.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grundlage
   Dieselbe Zeile wie für .sed-event/.sed-home/.sed-legal in
   design-system.css. Bewusst hier wiederholt statt dort um .sed-gallery
   ergänzt: So bleibt die Galerie ein abgeschlossenes Stylesheet, und eine
   Änderung an dieser Datei kann keine der bestehenden Seiten anfassen.
   -------------------------------------------------------------------------- */
.sed-gallery{
  background:var(--sed-bg);
  color:var(--sed-cream);
  font-family:'Plus Jakarta Sans', sans-serif;
  line-height:1.6;
  /* padding-top:0 ist NICHT überflüssig, sondern hebt einen fremden Wert auf:
     Der Klassenname .sed-gallery ist in diesem Projekt doppelt vergeben. In
     design-system.css:950 steht .sed-gallery{ padding:64px 0 } — das meint die
     Galerie-SEKTION der Startseite (die vier Kacheln mit .sed-gallery-grid /
     .sed-gallery-card, siehe front-page.php, dort <section class="sed-gallery">).
     Weil design-system.css auf jeder Seite lädt, erbte der Seiten-Wrapper der
     Galerie-Seiten diese 64px oben mit — sichtbar als Lücke zwischen Kopfzeile
     und Laufband (live gemessen: Nav-Unterkante 74px, Ticker-Oberkante 138px).
     padding-bottom wurde von der Zeile darunter ohnehin schon überschrieben,
     der obere Wert blieb unbemerkt stehen, weil vor dem Laufband an dieser
     Stelle nichts saß, dessen Abstand aufgefallen wäre.
     Die saubere Lösung wäre ein eigener Klassenname für einen der beiden
     Bereiche; das ist eine größere Umbenennung quer durch beide Dateien und
     bleibt bewusst einem eigenen Schritt vorbehalten. */
  padding-top:0;
  padding-bottom:8px;
}

.sed-gallery h1, .sed-gallery h2{
  font-family:'Anton', sans-serif; font-weight:400; line-height:1.04;
  letter-spacing:-0.01em; text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   Kopfbereich (beide Ansichten)
   -------------------------------------------------------------------------- */
.sed-gal-head-section{ padding:64px 0 28px; }

.sed-gal-page-title{
  margin:10px 0 0;
  font-size:clamp(34px, 6vw, 66px);
}

/* Handschrift (Klasse .sed-marker im Markup, Permanent Marker). Zwei
   Werte müssen dafür mitwandern:
   - GRÖSSER: Permanent Marker läuft bei gleicher Punktgröße deutlich
     kleiner und dünner als Plus Jakarta Sans; 17px wirkten daneben wie
     eine Fußnote. 24px entspricht optisch etwa dem vorherigen Eindruck.
   - HELLER: --sed-muted ist für eine Handschrift zu blass, sie zerfiel
     auf dem dunklen Grund. --sed-pink ist die Farbe, die auch die Zeilen
     der Übersicht beim Überfahren annehmen — der Satz gehört damit
     sichtbar zu dieser Seite und nicht zum Grundtext.
   Zeilenhöhe etwas enger als der Fließtext, sonst reißt der kurze Satz
   bei einem Umbruch auseinander. */
.sed-gal-page-sub{
  margin:14px 0 0;
  max-width:52ch;
  color:var(--sed-pink);
  font-size:24px;
  line-height:1.3;
}

/* Zurück-Pfeil zur Übersicht */
.sed-gal-back{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:26px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sed-muted) !important;
  text-decoration:none;
  transition:color 0.15s ease;
}
.sed-gal-back:hover{ color:var(--sed-cream) !important; }
.sed-gal-back-arrow{
  display:inline-block;
  transition:transform 0.15s ease;
}
.sed-gal-back:hover .sed-gal-back-arrow{ transform:translateX(-3px); }

/* Datum und Fotoanzahl im Kopf der Einzelgalerie: Mono, Cyan — dieselbe
   Rolle wie die Eyebrow-Zeile, deshalb dieselbe Typografie. */
.sed-gal-head-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin-top:16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; font-weight:500;
  letter-spacing:0.06em;
  color:var(--sed-cyan);
}
.sed-gal-head-count{ color:var(--sed-muted); }
.sed-gal-head-count::before{
  content:'·';
  margin-right:18px;
  color:var(--sed-line);
}

/* Ort steht in derselben Mono-Zeile wie Datum und Fotoanzahl, deshalb
   dieselbe Trennung durch einen Mittelpunkt. */
.sed-gal-head-place{ color:var(--sed-muted); }
.sed-gal-head-place::before{
  content:'·';
  margin-right:18px;
  color:var(--sed-line);
}

/* Redaktioneller Einleitungstext (ACF-Feld galerie_intro) */
.sed-gal-head-intro{
  margin:18px 0 0;
  max-width:60ch;
  font-size:16px;
  color:var(--sed-cream);
}

/* Bildnachweis (ACF-Feld galerie_fotograf) */
.sed-gal-head-credit{
  margin:12px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--sed-muted);
}

.sed-gal-head-event{ margin:18px 0 0; }
.sed-gal-head-event a{
  color:var(--sed-pink) !important;
  text-decoration:none;
  font-weight:700; font-size:15px;
}
.sed-gal-head-event a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   ÜBERSICHT: Events untereinander, Titelbild links, Text rechts
   -------------------------------------------------------------------------- */
.sed-gal-list-section{ padding:16px 0 56px; }

.sed-gal-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.sed-gal-row{
  display:grid;
  grid-template-columns:minmax(0, 420px) minmax(0, 1fr);
  gap:30px;
  align-items:center;
  padding:16px;
  background:var(--sed-bg-panel);
  border:1px solid var(--sed-line);
  border-radius:18px;
  text-decoration:none;
  color:inherit;
  transition:border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.sed-gal-row:hover{
  border-color:rgba(255,46,126,0.55);
  background:var(--sed-bg-panel-2);
  transform:translateY(-2px);
}

/* FESTES SEITENVERHÄLTNIS 3:2 — bewusste Rücknahme der vorherigen Lösung.
   -------------------------------------------------------------------------
   Hier stand zuvor KEIN Seitenverhältnis: Die Bilddatei gab die Höhe selbst
   vor (height:auto), damit an den damals 3:2 vorliegenden Titelbildern nichts
   beschnitten wird. Das war richtig, solange der Bestand einheitlich war.

   Er ist es nicht mehr. Über alle 77 Galerien gemessen: 51× exakt 3:2, 7× 4:3,
   9× HOCHFORMAT (Winter Edition und Endless Summer 2:3, dazu sieben ältere),
   Rest Einzelfälle. Ohne Rahmen wird die Zeile eines Hochformats gut doppelt
   so hoch wie die ihrer Nachbarn — die Übersicht verliert ihren Rhythmus,
   und genau das war die Meldung.

   3:2 UND NICHT 4:3 ODER 16:10: Zwei Drittel des Materials liegen exakt in
   3:2 vor und werden dadurch überhaupt nicht beschnitten. Jedes andere
   Verhältnis würde an der Mehrheit schneiden, um der Minderheit zu helfen.

   DER BESCHNITT DER 9 HOCHFORMATE IST GESTEUERT, NICHT ZUFÄLLIG: object-fit
   schneidet aus der Mitte, was bei Hochformat oft die falsche Stelle ist.
   Dafür gibt es den Fokuspunkt je Galerie (ACF-Feldgruppe
   "Titelbild-Fokuspunkt", ausgewertet über sed_gallery_get_cover_focus_style()),
   der als object-position am <img> landet. Bei Hochformat-Titelbildern gehört
   er gepflegt — sonst bleibt die Bildmitte stehen.

   Kein Nachrutschen des Layouts: aspect-ratio reserviert den Platz schon vor
   dem Laden, dieselbe Wirkung wie zuvor die width-/height-Attribute. */
.sed-gal-row-media{
  position:relative;
  aspect-ratio:3 / 2;
  border-radius:12px;
  overflow:hidden;
  background:var(--sed-bg-panel-2);
}
.sed-gal-row-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  /* Beim Überfahren der Zeile zieht das Bild leicht an — das einzige
     Bewegungselement der Übersicht, damit klar ist, dass die ganze Zeile
     anklickbar ist. */
  transition:transform 0.4s ease;
}
.sed-gal-row:hover .sed-gal-row-img{ transform:scale(1.035); }

/* Der Platzhalter füllt den Rahmen, der seit der Rückkehr zum festen
   Seitenverhältnis wieder eine eigene Höhe hat. Das eigene aspect-ratio
   bleibt als Absicherung stehen, falls der Rahmen je wieder höhenlos wird. */
.sed-gal-row-placeholder{
  aspect-ratio:3 / 2;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sed-grid), linear-gradient(160deg, rgba(255,79,63,0.28), rgba(178,63,240,0.24)), var(--sed-bg-panel-2);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sed-muted);
}

.sed-gal-row-title{
  margin:0;
  font-size:clamp(22px, 2.7vw, 34px);
}

/* Der Titel ist die Überschrift INNERHALB des Zeilen-Links und hat selbst
   keine Farbe — er erbt sie vom <a>. Das Theme-Reset (reset.css des Themes,
   liegt vor unseren Dateien) setzt aber a:hover{ color:#336 }, und weil
   .sed-gal-row bislang nur eine Farbe für den Ruhezustand mitbrachte
   (color:inherit), sprang der Titel beim Überfahren auf dieses Dunkelblau um
   — live gemessen rgb(51,51,102) auf dem dunklen Panel, praktisch unlesbar.

   Zwei Zeilen, weil sie zwei verschiedene Dinge tun: Die erste nimmt dem
   Theme die Zeile aus der Hand und hält alles Erbende auf dem Cremeton des
   Ruhezustands (0-2-0 schlägt a:hover mit 0-1-1). Die zweite gibt dem Titel
   das Pink, das die Zeile im "Galerie ansehen"-Link ohnehin schon führt. */
.sed-gal-row:hover{ color:var(--sed-cream); }
.sed-gal-row:hover .sed-gal-row-title{ color:var(--sed-pink); }

.sed-gal-row-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin-top:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; letter-spacing:0.05em;
  color:var(--sed-cyan);
}
.sed-gal-row-count{ color:var(--sed-muted); }

.sed-gal-row-cta{
  display:inline-block;
  margin-top:18px;
  font-size:14px; font-weight:700;
  color:var(--sed-pink);
}
.sed-gal-row:hover .sed-gal-row-cta{ text-decoration:underline; }

/* Blätterfunktion */
.sed-gal-pagination{ margin-top:40px; }
.sed-gal-pagination .page-numbers{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
  justify-content:center;
}
.sed-gal-pagination .page-numbers li{ list-style:none; }
.sed-gal-pagination a.page-numbers,
.sed-gal-pagination span.page-numbers{
  display:inline-block;
  padding:9px 16px;
  border:1px solid var(--sed-line);
  border-radius:100px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--sed-muted) !important;
  text-decoration:none;
}
.sed-gal-pagination a.page-numbers:hover{
  border-color:var(--sed-pink);
  color:var(--sed-cream) !important;
}
.sed-gal-pagination span.page-numbers.current{
  border-color:var(--sed-cyan);
  color:var(--sed-cyan) !important;
}

/* Leerzustand */
.sed-gal-empty{
  padding:56px 0 72px;
  max-width:46ch;
  color:var(--sed-muted);
}
.sed-gal-empty-marker{
  margin:0 0 10px;
  font-size:34px;
  color:var(--sed-cyan);
  transform:rotate(-3deg);
}

/* --------------------------------------------------------------------------
   EINZELGALERIE: ruhiges Raster
   Vier gleich große Spalten, dünne Ränder, keine Rotation und keine
   Klebeband-Elemente — anders als die Kacheln auf der Startseite. Auf einer
   Seite mit hundert Fotos wäre der DIY-Look Lärm; hier soll ausschließlich
   das Bild wirken.
   -------------------------------------------------------------------------- */
.sed-gal-grid-section{ padding:8px 0 56px; }

.sed-gal-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.sed-gal-item{
  display:block;
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid var(--sed-line);
  border-radius:8px;
  background:var(--sed-bg-panel);
  cursor:zoom-in;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.sed-gal-item:hover,
.sed-gal-item:focus-visible{
  border-color:var(--sed-cyan);
  transform:translateY(-2px);
}
.sed-gal-item-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* --------------------------------------------------------------------------
   LIGHTBOX
   Wird vollständig per JavaScript aufgebaut (assets/js/gallery-lightbox.js).
   -------------------------------------------------------------------------- */
/* Die Textfarbe steht hier und nicht erst in den einzelnen Bausteinen: Die
   Lightbox wird per JavaScript an <body> gehängt (document.body.appendChild
   in gallery-lightbox.js) und liegt damit AUSSERHALB von .sed-gallery. Sie
   erbt deshalb nicht den Cremeton der Galerie, sondern das body{color:#333}
   des Themes — live gemessen rgb(51,51,51) auf dem Panel-Hintergrund #1D1023,
   ein Kontrast von rund 1,5:1. Sichtbar wurde das an den Beschriftungen im
   Melde-Formular ("Ich möchte nicht abgebildet sein", "Anmerkung
   (freiwillig)"): die einzigen Texte darin, die keine eigene Farbe mitbringen.
   Diese eine Zeile setzt den Erbwert für die ganze Lightbox richtig; alle
   Bausteine mit eigener Farbe (Zähler in Cyan, Hinweise in --sed-muted)
   bleiben davon unberührt. */
.sed-lb{
  color:var(--sed-cream);
  position:fixed; inset:0;
  /* Über allem, auch über der Menü-Overlay-Schicht des Themes. Der
     Cookie-Banner von Real Cookie Banner liegt noch darüber — das ist so
     gewollt, eine Einwilligungsabfrage darf nichts verdecken. */
  z-index:99000;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:rgba(9,4,12,0.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:16px;
  opacity:0;
  transition:opacity 0.18s ease;
}
.sed-lb.is-open{ opacity:1; }

/* Solange die Lightbox offen ist, darf die Seite dahinter nicht mitscrollen
   — sonst verliert man beim Schließen seine Position im Raster. */
body.sed-lb-open{ overflow:hidden; }

.sed-lb-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:4px 4px 12px;
}

.sed-lb-all{
  font-size:14px; font-weight:700;
  color:var(--sed-pink) !important;
  text-decoration:none;
  background:none; border:none; padding:0;
  cursor:pointer;
  font-family:'Plus Jakarta Sans', sans-serif;
}
.sed-lb-all:hover{ text-decoration:underline; }

.sed-lb-close{
  flex:0 0 auto;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,246,236,0.08);
  border:1px solid var(--sed-line);
  border-radius:50%;
  color:var(--sed-cream);
  font-size:22px; line-height:1;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.sed-lb-close:hover{
  background:rgba(255,46,126,0.2);
  border-color:var(--sed-pink);
}

.sed-lb-stage{
  position:relative;
  margin:0;
  display:flex; align-items:center; justify-content:center;
  min-height:0; /* damit das Bild in der Grid-Zeile schrumpfen darf */
}

.sed-lb-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  /* Die drei Vorgaben aus der Anforderung: cremefarbener Rand, weiche Ecken,
     dezenter Schatten. */
  border:2px solid var(--sed-cream);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.55);
  background:var(--sed-bg-panel);
}

/* Pfeile: liegen über dem Bild, damit man ohne Umweg über das Raster
   weiterblättern kann. */
.sed-lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,10,23,0.72);
  border:1px solid var(--sed-line);
  border-radius:50%;
  color:var(--sed-cream);
  font-size:26px; line-height:1;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sed-lb-nav:hover{
  background:rgba(63,240,214,0.18);
  border-color:var(--sed-cyan);
}
.sed-lb-prev{ left:6px; }
.sed-lb-next{ right:6px; }
.sed-lb-prev:hover{ transform:translateY(-50%) translateX(-2px); }
.sed-lb-next:hover{ transform:translateY(-50%) translateX(2px); }
.sed-lb-nav[hidden]{ display:none; }

.sed-lb-bottom{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:14px 4px 4px;
}

/* Zähler "3 / 128" — Mono in Cyan, wie alle Meta-Angaben der Galerie. */
.sed-lb-counter{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; font-weight:500;
  letter-spacing:0.12em;
  color:var(--sed-cyan);
}

.sed-lb-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 22px;
}

/* "Herunterladen": Outline-Pille mit Icon */
.sed-lb-download{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 24px;
  border:1.5px solid var(--sed-line);
  border-radius:100px;
  color:var(--sed-cream) !important;
  text-decoration:none;
  font-size:14px; font-weight:700;
  cursor:pointer;
  background:none;
  font-family:'Plus Jakarta Sans', sans-serif;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.sed-lb-download:hover{
  border-color:var(--sed-cyan);
  background:rgba(63,240,214,0.1);
}
.sed-lb-download svg{ flex:0 0 auto; }

/* "Bild melden": Mono-Text mit Flaggen-Icon, bewusst ohne Rahmen — es soll
   auffindbar sein, aber nicht mit dem Download um Aufmerksamkeit
   konkurrieren.

   Die Pillenform ist im Ruhezustand unsichtbar (transparenter Grund) und
   dient allein dazu, dass die Tönung beim Überfahren eine saubere Form hat —
   dieselbe Idee wie beim Download-Knopf daneben, nur ohne dessen Rahmen. */
.sed-lb-report{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none;
  padding:6px 14px; border-radius:100px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; font-weight:500;
  letter-spacing:0.06em;
  color:var(--sed-muted);
  cursor:pointer;
  transition:color 0.15s ease, background-color 0.15s ease;
}
.sed-lb-report:hover{
  color:var(--sed-pink);
  background-color:rgba(255,46,126,0.12);
}
.sed-lb-report svg{ flex:0 0 auto; }

/* --------------------------------------------------------------------------
   Gegengewicht zum Knopf-Reset des Themes

   reset.css des Themes setzt für JEDEN Knopf beim Überfahren
   button:hover{ background-color:#c36; color:#fff }. Ein Elementname mit
   Pseudoklasse wiegt 0-1-1 und schlägt damit unsere reinen Klassenregeln
   (0-1-0) — an "Bild melden" war live rgb(204,51,102) hinter dem pinken Text
   messbar, ein stumpfes Beerenrot, das den Knopf ausgegraut und damit wie
   abgeschaltet aussehen ließ.

   Betroffen ist jeder Knopf der Lightbox, der seinen Hover nur über die
   Schriftfarbe führt; wo wir ohnehin einen eigenen Hintergrund setzen
   (.sed-lb-close, .sed-lb-nav, .sed-lb-report oben), greift der Reset schon
   heute nicht. Die Selektoren hier wiegen 0-2-0 und brauchen deshalb kein
   !important. Die letzte Zeile hält die dunkle Schrift auf dem hellen
   Verlaufs-Knopf des Melde-Formulars, die das Reset sonst auf Weiß zöge —
   beim Newsletter-Knopf (.sed-nl-hint-btn) erledigt das bereits ein
   !important an Ort und Stelle.
   -------------------------------------------------------------------------- */
.sed-lb-all:hover,
.sed-report-cancel:hover,
.sed-nl-hint-close:hover{ background-color:transparent; }
.sed-report-submit:hover{ color:#1A0806; }

/* Einschub unter der Aktionsleiste: Melde-Formular bzw. Newsletter-Hinweis */
.sed-lb-panel{
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.sed-lb-panel:empty{ display:none; }

/* --------------------------------------------------------------------------
   Melde-Formular
   -------------------------------------------------------------------------- */
.sed-report-box{
  background:var(--sed-bg-panel);
  border:1px solid var(--sed-line);
  border-radius:14px;
  padding:20px 22px;
  text-align:left;
}
.sed-report-box h3{
  margin:0 0 4px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:16px; font-weight:800;
  color:var(--sed-cream);
}
.sed-report-intro{
  margin:0 0 14px;
  font-size:13px;
  color:var(--sed-muted);
}
.sed-report-option{
  display:flex; align-items:flex-start; gap:9px;
  margin-bottom:9px;
  font-size:14px;
  cursor:pointer;
}
.sed-report-option input{ margin-top:4px; accent-color:var(--sed-pink); }
.sed-report-box textarea{
  width:100%;
  min-height:78px;
  margin-top:6px;
  padding:11px 13px;
  background:var(--sed-bg);
  border:1px solid var(--sed-line);
  border-radius:10px;
  color:var(--sed-cream);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:14px;
  resize:vertical;
}
.sed-report-box textarea:focus{
  outline:none;
  border-color:var(--sed-cyan);
}
/* Honigtopf: für Menschen unsichtbar, für Formular-Bots nicht. Bewusst nicht
   display:none — manche Bots überspringen ausgeblendete Felder gezielt. */
.sed-report-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}
.sed-report-actions{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:14px;
}
.sed-report-submit{
  padding:11px 22px;
  border:none; border-radius:100px;
  background:linear-gradient(120deg, var(--sed-coral), var(--sed-pink));
  color:#1A0806;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:14px; font-weight:800;
  cursor:pointer;
}
.sed-report-submit[disabled]{ opacity:0.6; cursor:progress; }
.sed-report-cancel{
  background:none; border:none;
  color:var(--sed-muted);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  cursor:pointer;
}
.sed-report-cancel:hover{ color:var(--sed-cream); }
.sed-report-feedback{
  margin:12px 0 0;
  font-size:14px;
  color:var(--sed-cyan);
}
.sed-report-feedback.is-error{ color:var(--sed-coral); }
.sed-report-note{
  margin:12px 0 0;
  font-size:12px;
  color:var(--sed-muted);
}

/* --------------------------------------------------------------------------
   Newsletter-Hinweis nach dem ersten Download
   Erscheint einmal pro Browser-Sitzung, gesteuert über sessionStorage —
   ohne Cookie, damit dafür keine zusätzliche Kategorie im Cookie-Banner
   nötig wird (siehe gallery-lightbox.js).
   -------------------------------------------------------------------------- */
.sed-nl-hint{
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 44px 18px 20px;
  background:var(--sed-bg-panel);
  border:1.5px solid var(--sed-pink);
  border-radius:4px 20px 4px 16px;
  transform:rotate(-0.8deg);
  text-align:left;
}

.sed-nl-hint-psst{
  flex:0 0 auto;
  font-family:'Permanent Marker', cursive;
  font-size:26px;
  line-height:1.1;
  color:var(--sed-cyan);
  transform:rotate(-6deg);
}

.sed-nl-hint-body{ flex:1 1 auto; min-width:0; }

.sed-nl-hint-text{
  margin:0 0 12px;
  font-size:15px; font-weight:600;
  color:var(--sed-cream);
}

.sed-nl-hint-btn{
  display:inline-block;
  padding:10px 22px;
  border:none; border-radius:100px;
  background:linear-gradient(120deg, var(--sed-coral), var(--sed-pink));
  color:#1A0806 !important;
  text-decoration:none;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:14px; font-weight:800;
  cursor:pointer;
}

.sed-nl-hint-note{
  margin:10px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--sed-muted);
}

.sed-nl-hint-close{
  position:absolute; top:8px; right:10px;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  color:var(--sed-muted);
  font-size:17px; line-height:1;
  cursor:pointer;
}
.sed-nl-hint-close:hover{ color:var(--sed-cream); }

/* --------------------------------------------------------------------------
   Newsletter-Abschnitt und Fuß
   -------------------------------------------------------------------------- */
.sed-gal-newsletter-section{
  padding:8px 0 8px;
  border-top:1px solid var(--sed-line);
}

/* Mittig wie die beiden anderen Fußzeilen-Varianten des Projekts
   (.sed-event-footer und .sed-home-footer-grid in design-system.css setzen
   beide text-align:center). Diese hier war als einzige linksbündig — kein
   bewusster Unterschied, sondern ein fehlendes justify-content auf dem
   Flex-Container. Sie sitzt direkt unter dem zentrierten Newsletter-Block und
   ließ dessen Abschluss dadurch aus der Achse laufen. */
.sed-gal-footer{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:center;
  padding:26px 0 40px;
  border-top:1px solid var(--sed-line);
  font-size:13px;
}
.sed-gal-footer a{
  color:var(--sed-muted) !important;
  text-decoration:none;
}
.sed-gal-footer a:hover{ color:var(--sed-cream) !important; }

/* --------------------------------------------------------------------------
   Schmalere Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  .sed-gal-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  /* Auf Mobilgeräten steht das Titelbild über dem Text statt daneben — bei
     rund 380 px Breite nebeneinander bliebe für beides zu wenig übrig.
     Das Verhältnis bleibt dabei 3:2 wie auf großen Bildschirmen (siehe
     .sed-gal-row-media weiter oben); hier stand früher zusätzlich
     aspect-ratio:16/9, was den stärksten Beschnitt der ganzen Übersicht
     verursacht hat — schmaler als das Material darf der Rahmen nicht sein. */
  .sed-gal-row{
    grid-template-columns:1fr;
    gap:18px;
  }
}

@media (max-width:680px){
  .sed-gal-head-section{ padding:44px 0 20px; }
  .sed-gal-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }

  .sed-lb{ padding:10px; }
  .sed-lb-nav{ width:44px; height:44px; font-size:22px; }
  .sed-lb-prev{ left:0; }
  .sed-lb-next{ right:0; }
  .sed-lb-actions{ gap:10px 16px; }

  .sed-nl-hint{
    flex-direction:column;
    gap:6px;
    padding:16px 40px 16px 16px;
  }
}