.gal{
  --gal-bg:#050505;
  --gal-fg:#ffffff;
  --gal-fg-2:#A0A0A0;
  --gal-glass:rgba(0,0,0,0.55);
  --gal-line:rgba(255,255,255,0.10);
  --gal-h:clamp(400px, 54vh, 620px);
  --gal-gap:clamp(14px, 1.3vw, 22px);
  /* Groesser als die frueheren festen 22px und mitwachsend: bei einer
     933px breiten Heldenkachel liest sich 22px als leicht gebrochene Ecke,
     nicht als Rundung. */
  --gal-r:clamp(20px, 1.7vw, 30px);
  --gal-ease:cubic-bezier(0.22, 1, 0.36, 1);
  position:relative;
  background:var(--gal-bg);
  color:var(--gal-fg);
  padding:clamp(28px, 3.2vw, 48px) 0 clamp(72px, 8vw, 120px);
  overflow:hidden;
}
/* Die Seite selbst ist schwarz, nicht nur die Sektion. Ohne das blieb ueber
   der Galerie ein 89px hoher weisser Streifen stehen - der Bereich hinter der
   durchsichtigen Kopfzeile - und beim Ueberscrollen blitzte Weiss auf. Auf
   einer Seite, deren ganze Wirkung an der schwarzen Flaeche haengt, faellt
   genau das auf. */
body.gal-dark{ background:#050505; }
/* Seite kuerzer als der Bildschirm (kein Karussell mehr): ohne das haengt
   der Footer irgendwo mittendrin und darunter bleibt schwarze Leerflaeche
   bis zum Fensterende stehen. min-height:100vh + flex schiebt ihn ans
   echte Ende. */
body.gal-dark{ display:flex; flex-direction:column; min-height:100vh; }
body.gal-dark #inhalt{ flex:1 0 auto; }
body.gal-dark footer.dwc-unified-footer{ flex-shrink:0; }

/* Navbar (24.09.2026): dunkle Variante kommt jetzt aus subpage-nav.css/-.js
   wie auf allen Unterseiten - <body data-nav-dunkel> setzt .over-dark (weisse
   Schrift, dunkles Logo, #060A12 beim Scrollen), CTA bleibt das Blau der
   Landingpage. Die fruehere eigene Galerie-Einfaerbung (weisser CTA, Logo-
   Filter) entfaellt deshalb. Der 6px-Navy-Balken aus galerie.css
   (body::before, Rest der alten Startseiten-Kopie) lag als blauer Strich
   ueber der Leiste. */
body.gal-dark::before{ content:none; }

/* ---------- Zurueck-Navigation ---------- */
/* ---------- Footer ---------- */
/* Ueberschreibt die generische helle "footer{background:var(--primary)}"-
   Regel per Klassenspezifitaet - kein Eingriff an der Regel selbst noetig. */
.gal-footer{
  background:#050505; color:rgba(255,255,255,0.5);
  text-align:center; padding:28px 24px;
  font-size:12px; line-height:1.7;
  border-top:1px solid rgba(255,255,255,0.08);
}
.gal-footer a{ color:rgba(255,255,255,0.75); font-weight:500; text-decoration:none; }
.gal-footer a:hover{ color:#fff; }

/* ---------- Kopfbereich ---------- */
/* Linksbuendig statt zentriert und deutlich kompakter: die Seite soll
   schneller bei den Projekten ankommen statt viel schwarze Flaeche zu
   zeigen, bevor die Galerie beginnt. */
.gal-head{ max-width:900px; margin:0 auto; padding:14px 24px 0; text-align:center; }
.gal-head h1{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:clamp(30px, 2.7vw, 42px);
  font-weight:600; line-height:1.05; letter-spacing:-0.03em;
  margin:0; color:var(--gal-fg);
}

/* ---------- Projekt-Reihen (Bild/Text, versetzt) ---------- */
.gal-projects{
  max-width:1180px; margin:clamp(56px, 7vw, 104px) auto 0; padding:0 24px;
  display:flex; flex-direction:column; gap:clamp(56px, 7vw, 104px);
}
.gal-project{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:center;
  gap:clamp(32px, 5vw, 72px);
}
.gal-project--reverse{ grid-template-columns:1fr 1.15fr; }
.gal-project--reverse .gal-project-media{ order:2; }
.gal-project--reverse .gal-project-text{ order:1; }
.gal-project-media{
  border-radius:var(--gal-r); overflow:hidden; border:1px solid var(--gal-line);
}
.gal-project-media img{ display:block; width:100%; height:auto; }
.gal-project-tag{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gal-fg-2);
}
.gal-project-text h2{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:clamp(26px, 2.4vw, 36px); font-weight:600; line-height:1.1;
  letter-spacing:-0.02em; margin:12px 0 0; color:var(--gal-fg);
}
.gal-project-text p{
  color:var(--gal-fg-2); font-size:15.5px; line-height:1.65;
  max-width:34em; margin:14px 0 0;
}
@media (max-width:820px){
  .gal-project,
  .gal-project--reverse{ grid-template-columns:1fr; }
  .gal-project--reverse .gal-project-media,
  .gal-project--reverse .gal-project-text{ order:initial; }
}

/* ---------- Bühne ---------- */
/* Naeher an den Hero herangezogen (vorher bis zu 96px) - der Uebergang soll
   wie Hero-direkt-in-die-Projekte wirken, nicht wie zwei getrennte Bloecke. */
.gal-stage{ position:relative; margin-top:clamp(32px, 3.6vw, 52px); }
.gal-viewport{
  overflow:hidden; cursor:grab; outline:none;
  padding:4px clamp(24px, 5vw, 80px);
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.gal-viewport:focus-visible{ box-shadow:inset 0 0 0 2px rgba(255,255,255,0.5); border-radius:6px; }
.gal-viewport.is-dragging{ cursor:grabbing; }
.gal-track{ display:flex; gap:var(--gal-gap); will-change:transform; }
.gal-set{ display:flex; gap:var(--gal-gap); flex:0 0 auto; }
.gal-col{
  display:flex; flex-direction:column; gap:var(--gal-gap);
  height:var(--gal-h); flex:0 0 auto;
}
.gal-col--stack .gal-tile{ height:calc((100% - var(--gal-gap)) / 2); }

/* Weiche Kanten links/rechts */
.gal-edge{ position:absolute; top:0; bottom:0; width:clamp(40px, 7vw, 130px); pointer-events:none; z-index:3; }
.gal-edge--l{ left:0;  background:linear-gradient(90deg, var(--gal-bg) 12%, rgba(5,5,5,0)); }
.gal-edge--r{ right:0; background:linear-gradient(270deg, var(--gal-bg) 12%, rgba(5,5,5,0)); }

/* ---------- Kachel ----------
   Neu aufgebaut 23.08.2026. Vorher trug jede Kachel drei UI-Schichten: eine
   nachgebaute Browser-Leiste, eine gerahmte Plakette und eine Glaskarte, die
   erst beim Hover erschien. Zusammen las sich die Wand als Reihe von
   Programmfenstern, nicht als Galerie - und der Text war ohne Maus gar nicht
   zu sehen. Jetzt traegt jede Kachel nur noch Bild, einen ruhigen Verlauf und
   eine Bildunterschrift, die immer dasteht.

   Beschriftung bewusst unten LINKS statt in einem Kasten unten rechts: der
   Blick laeuft die Zeile entlang, nicht um eine Box herum. */
.gal-tile{
  position:relative; display:block; height:100%; aspect-ratio:var(--r, 1.6);
  flex:0 0 auto; padding:0; margin:0; border:0; background:#0B0B0B;
  border-radius:var(--gal-r); overflow:hidden; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
  /* Haarlinie statt Rahmen: hebt die Kachel vom Schwarz ab, ohne sie
     einzufassen. Der Schatten sitzt tief und weit - sichtbar als Tiefe,
     nicht als Kante. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 18px 40px -24px rgba(0,0,0,0.9);
  transform:translate3d(0,0,0);
  transition:
    opacity .46s var(--gal-ease),
    box-shadow .46s var(--gal-ease),
    transform .46s var(--gal-ease);
}
.gal-tile:focus-visible{ box-shadow:0 0 0 2px #050505, 0 0 0 4px rgba(255,255,255,0.85); }
.gal-tile img{
  width:100%; height:100%; object-fit:cover; object-position:50% 0%;
  display:block; pointer-events:none;
  transform:scale(1.001); transform-origin:50% 42%;
  transition:transform .52s var(--gal-ease), filter .46s var(--gal-ease);
}
.gal-col--tall .gal-tile img{ object-position:50% 0%; }

/* Verlauf. Liegt IMMER an, nicht erst beim Hover - sonst hinge die
   Lesbarkeit der Bildunterschrift an der Maus. Beim Hover zieht er an,
   damit der Text vorne bleibt, waehrend das Bild aufhellt. */
.gal-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.86) 0%,
    rgba(0,0,0,0.58) 18%,
    rgba(0,0,0,0.16) 42%,
    rgba(0,0,0,0) 66%);
  opacity:.92;
  transition:opacity .46s var(--gal-ease);
}

/* ---------- Bildunterschrift ---------- */
.gal-cap{
  position:absolute; left:clamp(16px, 1.5vw, 26px); right:clamp(16px, 1.5vw, 26px);
  bottom:clamp(15px, 1.4vw, 24px); z-index:2;
  display:block; pointer-events:none;
  transform:translate3d(0,0,0);
  transition:transform .46s var(--gal-ease);
}
/* Kennzeichnung nach DWC-STYLE.md: Referenz in Gold, Konzept in Grau.
   Frueher eine gerahmte Plakette mit Blur oben links - jetzt eine
   Versalzeile ueber dem Titel. Gleiche Aussage, ein Element weniger. */
.gal-cap-k{
  display:block; margin-bottom:7px;
  font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.52);
}
.gal-cap-k b{ font-weight:700; }
.gal-cap-k--ref b{ color:#E8C486; }
.gal-cap-k--kon b{ color:rgba(255,255,255,0.78); }
.gal-cap-t{
  display:block;
  font-size:clamp(17px, 1.35vw, 22px); font-weight:600;
  line-height:1.2; letter-spacing:-0.015em; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,0.5);
}
/* Der Beschreibungstext ist der einzige Teil, der erst beim Hover kommt -
   Titel und Kennzeichnung stehen immer. Die reservierte Hoehe wird nicht
   vorgehalten, weil der Text ueber dem Bild liegt und nichts verschiebt. */
.gal-cap-d{
  display:block; margin-top:8px; max-width:46ch;
  font-size:13px; line-height:1.6; color:rgba(255,255,255,0.74);
  opacity:0; transform:translateY(8px);
  transition:opacity .42s var(--gal-ease), transform .42s var(--gal-ease);
}
/* Auf den kleinen Kacheln des Stapels bleibt es bei Kennzeichnung und Titel -
   fuer drei Zeilen Fliesstext ist dort schlicht kein Platz. */
.gal-col--stack .gal-cap-d{ display:none; }
.gal-col--stack .gal-cap-t{ font-size:clamp(15px, 1.05vw, 17px); }

@media (hover:hover){
  .gal-tile:hover{
    transform:translate3d(0,-6px,0);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.13),
      0 30px 60px -28px rgba(0,0,0,0.95),
      0 0 0 1px rgba(255,255,255,0.05);
  }
  .gal-tile:hover img{ transform:scale(1.045); filter:brightness(1.06); }
  .gal-tile:hover .gal-veil{ opacity:1; }
  .gal-tile:hover .gal-cap{ transform:translate3d(0,-6px,0); }
  .gal-tile:hover .gal-cap-d,
  .gal-tile:focus-visible .gal-cap-d{ opacity:1; transform:translateY(0); }

  /* Die uebrigen Kacheln treten zurueck, aber nur eine Spur. Vorher lagen sie
     bei 0.46 - das las sich als ausgeschaltet, nicht als ruhiger. */
  .gal-viewport:has(.gal-tile:hover) .gal-tile{ opacity:0.74; }
  .gal-viewport:has(.gal-tile:hover) .gal-tile:hover{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .gal-tile, .gal-tile img, .gal-veil, .gal-cap, .gal-cap-d{ transition:none; }
  .gal-tile:hover{ transform:none; }
  .gal-tile:hover img{ transform:scale(1.001); }
  .gal-cap-d{ opacity:1; transform:none; }
}

/* Hinweiszeile */
.gal-hint{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:clamp(32px, 4vw, 54px);
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.34);
}
.gal-hint svg{ opacity:0.6; }

/* ---------- Lightbox ---------- */
.gal-lb{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,3,3,0.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.gal-lb[hidden]{ display:none; }
.gal-lb.is-open{ opacity:1; }
.gal-lb-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:20px; padding:24px; }
.gal-lb-fig img{
  display:block; max-width:min(92vw, 1500px); max-height:78vh;
  width:auto; height:auto; object-fit:contain;
  border-radius:14px; background:#0B0B0B;
  will-change:transform;
}
.gal-lb-cap{ text-align:center; max-width:620px; }
.gal-lb-cap strong{ display:block; font-size:19px; font-weight:600; color:#fff; letter-spacing:-0.01em; }
.gal-lb-cap span{ display:block; margin-top:7px; font-size:14px; line-height:1.7; color:var(--gal-fg-2); }
.gal-lb-cap em{ display:block; margin-top:10px; font-style:normal; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.38); }
.gal-lb-close, .gal-lb-nav{
  position:absolute; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:#fff; cursor:pointer; border-radius:50%;
  transition:background .2s ease, transform .2s var(--gal-ease), border-color .2s ease;
}
.gal-lb-close{ top:24px; right:24px; width:46px; height:46px; }
.gal-lb-close:hover{ background:rgba(255,255,255,0.16); transform:rotate(90deg); }
.gal-lb-nav{ top:50%; margin-top:-24px; width:48px; height:48px; }
.gal-lb-nav--prev{ left:clamp(12px, 3vw, 40px); }
.gal-lb-nav--next{ right:clamp(12px, 3vw, 40px); }
.gal-lb-nav:hover{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); }
.gal-lb-close:focus-visible, .gal-lb-nav:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Übergang zum CTA-Banner darunter */
.gal ~ .rd-banner{ background:#050505; border-top:1px solid rgba(255,255,255,0.07); }

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .gal{ --gal-h:clamp(340px, 46vh, 460px); }
  .gal-cap-d{ display:none; }
}

/* ---------- Mobil: kein Drag, ruhige vertikale Liste ---------- */
@media (max-width:767px){
  .gal{ padding:clamp(64px, 14vw, 96px) 0 clamp(56px, 12vw, 80px); }
  .gal-viewport{ overflow:visible; cursor:default; padding:0 20px; }
  .gal-track{ transform:none !important; flex-direction:column; gap:16px; }
  .gal-set{ flex-direction:column; gap:16px; width:100%; }
  .gal-set.is-clone{ display:none; }
  .gal-col{ flex-direction:column; height:auto; width:100%; }
  .gal-col--stack .gal-tile{ height:auto; }
  .gal-tile{ height:auto; width:100%; aspect-ratio:16 / 10; }
  .gal-col--tall .gal-tile{ aspect-ratio:16 / 10; }
  /* Auf dem Handy steht die Unterschrift unter dem Bild statt darauf: bei
     dieser Breite frisst ein Verlauf zu viel vom Motiv, und der Text muss
     ohne Hover vollstaendig lesbar sein. */
  .gal-cap{ position:static; opacity:1; transform:none; padding:12px 2px 0; pointer-events:auto; }
  .gal-cap-d{ display:block; opacity:1; transform:none; max-width:none; }
  .gal-cap-t{ font-size:17px; }
  .gal-col--stack .gal-cap-d{ display:block; }
  .gal-col--stack .gal-cap-t{ font-size:17px; }
  .gal-veil{ display:none; }
  .gal-tile{ background:transparent; overflow:visible; box-shadow:none; }
  .gal-tile img{ border-radius:16px; aspect-ratio:16 / 10; height:auto; }
  .gal-edge, .gal-hint{ display:none; }
  .gal-lb-nav{ width:40px; height:40px; }
  .gal-lb-fig{ padding:12px; gap:14px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .gal-tile img, .gal-cap, .gal-tile, .gal-veil, .gal-lb, .gal-lb-fig img{ transition-duration:.01ms !important; }
  .gal-tile:hover img{ transform:none; }
}