/* ============================================================
   mwg-flickr.css — Albumgalerie für medienwerkstatt006
   Holt die Bilder live aus dem Flickr-Album der Seite.
   Gehört zusammen mit mwg-flickr.js
   ------------------------------------------------------------
   Aufbau:  section.mwg-fg  →  div.mwg-fg__innen  →  Kopf/Gitter/Fuß
   Die äußere Hülle füllt immer die volle Spaltenbreite,
   der Innencontainer begrenzt und zentriert den Inhalt.
   Deshalb steht am äußeren Element KEIN auto-Rand: in einem
   Flex-Container würde das die Breitendehnung aufheben und die
   Galerie auf Inhaltsbreite zusammenfallen lassen.
   ============================================================ */

.mwg-fg{
  --fg-bg:      var(--bg, #050508);
  --fg-fg:      var(--fg, #e8e0d4);
  --fg-akzent:  var(--a1, #ff2d55);
  --fg-akzent2: var(--a2, #00e5ff);
  --fg-akzent3: var(--a3, #ffe600);
  --fg-mono:    var(--mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  --fg-disp:    var(--disp, "Unbounded", system-ui, sans-serif);
  --fg-linie:   rgba(232,224,212,.10);
  --fg-still:   rgba(232,224,212,.50);

  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;                 /* kein auto — siehe Kopfkommentar */
  padding:0;
  background:var(--fg-bg);
  color:var(--fg-fg);
  font-family:var(--fg-mono);
  font-size:13px;
  line-height:1.65;
  border-top:1px solid var(--fg-linie);
  box-sizing:border-box;
  overflow-wrap:break-word;
}
.mwg-fg *,.mwg-fg *::before,.mwg-fg *::after{box-sizing:border-box}

.mwg-fg__innen{
  width:100%;
  max-width:1680px;
  min-width:0;
  margin:0 auto;
  padding:40px clamp(18px,3.4vw,44px) 48px;
}

/* ---------- Kopfzeile ---------- */
.mwg-fg__kopf{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 18px; min-width:0;
  margin:0 0 22px;
}
.mwg-fg__label{
  flex:0 0 auto;
  font-family:var(--fg-disp); font-weight:900;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-akzent); line-height:1.2;
}
.mwg-fg__titel{
  flex:1 1 240px; min-width:0;
  font-family:var(--fg-disp); font-weight:400;
  font-size:clamp(11px,1.2vw,15px); letter-spacing:.03em; line-height:1.25;
  margin:0; color:var(--fg-fg);
}
.mwg-fg__zahl{
  flex:0 0 auto;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-still); white-space:nowrap;
}

/* ---------- Gitter ---------- */
.mwg-fg__gitter{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:4px;
  list-style:none; margin:0; padding:0;
  min-width:0;
}
@media (min-width:700px) { .mwg-fg__gitter{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:5px} }
@media (min-width:1200px){ .mwg-fg__gitter{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:6px} }

.mwg-fg__feld{
  position:relative; margin:0; padding:0;
  aspect-ratio:1/1; min-width:0; overflow:hidden;
  background:rgba(232,224,212,.045);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mwg-fg__feld::after{           /* Rahmen ohne Verschieben des Bildes */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .18s ease;
}
.mwg-fg__feld:hover::after,
.mwg-fg__feld:focus-visible::after{box-shadow:inset 0 0 0 1px var(--fg-akzent2)}
.mwg-fg__feld:focus-visible{outline:none}
.mwg-fg__feld img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  opacity:0;
  transition:opacity .4s ease, transform .3s ease;
}
.mwg-fg__feld img.ist-da{opacity:1}
.mwg-fg__feld:hover img{transform:scale(1.04)}

/* ---------- Fußzeile ---------- */
.mwg-fg__fuss{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  margin-top:22px; padding-top:16px;
  border-top:1px solid var(--fg-linie);
  min-width:0;
}
.mwg-fg__knopf{
  display:inline-block;
  font-family:var(--fg-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-fg); text-decoration:none;
  padding:10px 20px;
  background:transparent;
  border:1px solid var(--fg-linie);
  cursor:pointer;
  transition:border-color .18s, color .18s;
}
.mwg-fg__knopf:hover,.mwg-fg__knopf:focus-visible{
  border-color:var(--fg-akzent); color:var(--fg-akzent); outline:none;
}
/* Bedienleiste der Bildanimation in der Galerie */
.mwg-fg__anim{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.mwg-fg__anim button{
  font-family:var(--fg-mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(232,224,212,.62);
  padding:9px 13px;
  background:transparent;
  border:1px solid var(--fg-linie);
  cursor:pointer;
  transition:border-color .18s, color .18s;
}
.mwg-fg__anim button:hover,.mwg-fg__anim button:focus-visible{
  border-color:var(--fg-akzent2); color:var(--fg-akzent2); outline:none;
}
.mwg-fg__anim .ist-aktiv{color:var(--fg-akzent3); border-color:rgba(255,230,0,.45)}
.mwg-fg__start{color:var(--fg-fg)!important; padding:9px 16px!important}
.mwg-fg__start:hover{border-color:var(--fg-akzent)!important; color:var(--fg-akzent)!important}

.mwg-fg__quelle{
  margin-left:auto;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-still); text-decoration:none; white-space:nowrap;
}
.mwg-fg__quelle:hover,.mwg-fg__quelle:focus-visible{color:var(--fg-akzent2)}
.mwg-fg__hinweis{
  font-size:11px; letter-spacing:.04em; color:var(--fg-still);
  padding:6px 0 2px;
}
.mwg-fg__hinweis a{color:var(--fg-akzent2)}

/* Ladezustand: gedämpfte Platzhalterfelder statt Sprung im Layout */
.mwg-fg__feld--platzhalter{
  background:rgba(232,224,212,.05);
  cursor:default;
  animation:mwgPulsen 1.6s ease-in-out infinite;
}
@keyframes mwgPulsen{0%,100%{opacity:.5}50%{opacity:.85}}

/* ---------- Großansicht ---------- */
.mwg-lb{
  /* Die feste Kopfleiste der Website liegt auf z-index 2147483600.
     Die Großansicht muss darüber liegen, sonst verdeckt der Kopf
     den Schließen-Knopf. */
  position:fixed; inset:0; z-index:2147483646;
  display:none;
  background:rgba(4,4,7,.975);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--mono,"Space Mono",ui-monospace,monospace);
  font-size:13px; color:#e8e0d4;
}
.mwg-lb.offen{display:grid; grid-template-rows:1fr auto}
.mwg-lb__buehne{
  position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:60px 72px 8px;
}
@media (max-width:640px){ .mwg-lb__buehne{padding:56px 10px 8px} }
.mwg-lb__bild{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; display:block;
  opacity:0; transition:opacity .22s ease;
}
.mwg-lb__bild.ist-da{opacity:1}
.mwg-lb__leiste{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;
  padding:14px clamp(14px,3vw,28px) 20px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border-top:1px solid rgba(232,224,212,.08);
  background:rgba(5,5,8,.92);
}
.mwg-lb__zaehler{color:var(--a3,#ffe600); white-space:nowrap; flex:0 0 auto}
.mwg-lb__anim{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.mwg-lb__anim button{
  position:static; z-index:auto;
  width:auto; height:auto; min-width:0;
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 12px;
  font-family:inherit; font-size:9px; line-height:1.2;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  background:transparent; color:rgba(232,224,212,.62);
  border:1px solid rgba(232,224,212,.16);
  cursor:pointer;
}
.mwg-lb__anim button:hover,.mwg-lb__anim button:focus-visible{
  border-color:var(--a2,#00e5ff); color:var(--a2,#00e5ff); background:transparent;
}
.mwg-lb__anim .ist-aktiv{color:var(--a3,#ffe600); border-color:rgba(255,230,0,.5)}
.mwg-lb__spiel{min-width:104px}
.mwg-lb__voll{margin-left:6px}
@media (max-width:760px){
  .mwg-lb__anim{flex-wrap:wrap; gap:4px}
  .mwg-lb__anim button{padding:6px 9px; font-size:8px; letter-spacing:.12em}
  .mwg-lb__spiel{min-width:0}
  .mwg-lb__titel{display:none}
}
.mwg-lb__titel{
  color:rgba(232,224,212,.7); text-transform:none; letter-spacing:.02em;
  flex:1 1 200px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mwg-lb__link{color:rgba(232,224,212,.5); text-decoration:none; white-space:nowrap}
.mwg-lb__link:hover{color:#00e5ff}
/* WICHTIG: nur die drei Knöpfe auf der Bühne schweben.
   Stünde hier .mwg-lb button, träfe die Regel auch die Knöpfe in der
   Leiste darunter — sie würden alle absolut gesetzt und fielen an
   derselben Stelle übereinander. */
.mwg-lb__buehne button{
  position:absolute; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,8,.55); color:#e8e0d4;
  border:1px solid rgba(232,224,212,.16);
  font-family:inherit; font-size:17px; line-height:1;
  width:46px; height:46px; padding:0; cursor:pointer;
  transition:border-color .18s, color .18s, background .18s;
}
.mwg-lb__buehne button:hover,.mwg-lb__buehne button:focus-visible{
  border-color:#ff2d55; color:#ff2d55; background:rgba(5,5,8,.85); outline:none;
}
.mwg-lb__zu{top:14px; right:14px}
.mwg-lb__zurueck{left:14px; top:50%; transform:translateY(-50%)}
.mwg-lb__vor{right:14px; top:50%; transform:translateY(-50%)}
@media (max-width:640px){
  .mwg-lb__zurueck,.mwg-lb__vor{top:auto; bottom:10px; transform:none}
  .mwg-lb__zurueck{left:14px} .mwg-lb__vor{right:14px}
  .mwg-lb__buehne{padding-bottom:66px}
}

@media (prefers-reduced-motion:reduce){
  .mwg-fg__feld img,.mwg-lb__bild,.mwg-fg__feld::after{transition:none}
  .mwg-fg__feld:hover img{transform:none}
  .mwg-fg__feld--platzhalter{animation:none}
}