/* ─────────────────────────────────────────────
   Hubertus-Galerie — nur fuer hubertus.html.
   Haengt an den Tokens und Bausteinen aus style.css
   (Farben, .wrap, .sec-head, .sec-note, .nav, .foot-*).
   Kein Zuschnitt an irgendeinem Bild: Fotos von Marcelina Kudranska
   tragen ihre Signatur unten, und sie muss immer ganz sichtbar bleiben.
   ───────────────────────────────────────────── */

/* ── Kopf ─────────────────────────────────── */
.hub-head{padding:clamp(7rem,16vh,9.5rem) 0 calc(var(--sec)*.7)}
.hub-back{
  display:inline-block;margin-bottom:2rem;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--gold);
  border-bottom:1px solid var(--line);padding-bottom:.2em;transition:border-color .3s;
}
.hub-back:hover{border-bottom-color:var(--gold)}
.hub-head h1{
  font-size:clamp(3.2rem,11vw,8rem);letter-spacing:-.03em;
  font-variation-settings:'SOFT' 30,'WONK' 1;
}
.hub-date{margin:1.2rem 0 0;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── Abschnitte ───────────────────────────── */
.hub-films,.hub-photos{padding-block:calc(var(--sec)*.8)}
.hub-films{background:var(--soil);border-top:1px solid var(--line)}
.hub-photos{border-top:1px solid var(--line)}
.hub-films .sec-head,.hub-photos .sec-head{margin-bottom:clamp(1.6rem,3.4vw,2.8rem)}

/* Hat ein Abschnitt noch keinen Inhalt, bleibt er unsichtbar statt leer zu stehen.
   :has() ist seit 2023 ueberall da; wo nicht, steht eben die Ueberschrift allein. */
.hub-films:not(:has(.hub-film)),.hub-photos:not(:has(.hub-photo)){display:none}

/* ── Reihen: Blocksatz fuer Bilder ────────────
   Jedes Element waechst im Verhaeltnis seines Seitenverhaeltnisses (--ar), damit alle
   Elemente einer Reihe gleich hoch sind, nichts beschnitten wird und die Reihenfolge
   die der Aufnahme bleibt. --ar steht inline an jedem Element (schreibt das Werkzeug).
   Die ::after-Fuellung nimmt den Rest der letzten Reihe, damit die nicht gestreckt wird. */
.hub-rows{display:flex;flex-wrap:wrap;gap:.6rem}
.hub-rows::after{content:'';flex:1000000 1 0}
.hub-rows>*{
  --row:260px;
  flex:calc(var(--ar,1.5)*100) 1 calc(var(--ar,1.5)*var(--row));
  min-width:0;margin:0;
}
.hub-films .hub-rows>*{--row:340px}
/* Bei Filmen darf auch die letzte Reihe waechsen: sonst bleiben drei Handyfilme als
   Briefmarken stehen, am Handy waere der letzte kleiner als die anderen. Gedeckelt wird
   unten ueber max-width (72 % der Fensterhoehe). */
.hub-films .hub-rows::after{content:none}
/* Ein einzelner Film steht in der Mitte statt links in einer sonst leeren Reihe */
.hub-films .hub-rows:has(>.hub-film:only-child){justify-content:center}
@media (max-width:600px){
  .hub-rows>*{--row:150px}
  .hub-films .hub-rows>*{--row:320px}
}

/* ── Fotos ────────────────────────────────── */
.hub-photo{display:block;overflow:hidden;border-radius:2px;background:var(--soil);cursor:zoom-in}
.hub-photo img{
  display:block;width:100%;height:auto;
  filter:saturate(.9);transition:filter .5s,transform .9s cubic-bezier(.2,.7,.3,1);
}
.hub-photo:hover img,.hub-photo:focus-visible img{filter:saturate(1)}
.hub-photo:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .hub-photo:hover img{transform:scale(1.03)}
}

/* ── Filme ────────────────────────────────── */
/* Kein Film wird hoeher als ~72 % des Fensters: ein Handyfilm im Hochformat wuerde
   sonst, allein in seiner Reihe, bei 768 px Breite auf ueber 1200 px gestreckt.
   Die Obergrenze der Breite folgt aus dem Seitenverhaeltnis (--ar). */
.hub-film{background:#000;border-radius:2px;overflow:hidden;max-width:calc(var(--ar,1.7778)*72vh)}
.hub-film video{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1.7778);background:#000}

/* ── Grossansicht ─────────────────────────── */
.lb{
  border:0;padding:0;margin:0;inset:0;width:100vw;height:100dvh;
  max-width:100vw;max-height:100dvh;overflow:hidden;
  background:transparent;color:var(--flaxen);touch-action:pan-y;
}
.lb::backdrop{background:rgba(23,18,14,.97)}
.lb[open]{display:grid;place-items:center}
.lb-img{
  max-width:min(94vw,1500px);max-height:86dvh;width:auto;height:auto;
  object-fit:contain;border-radius:2px;user-select:none;-webkit-user-drag:none;
}
.lb button{
  position:absolute;background:none;border:0;color:var(--flaxen);cursor:pointer;
  font-family:var(--sans);font-size:2.4rem;line-height:1;padding:.6rem 1rem;
  opacity:.75;transition:opacity .3s,color .3s;
}
.lb button:hover,.lb button:focus-visible{opacity:1;color:var(--gold)}
.lb-x{top:.4rem;right:.6rem;font-size:2.2rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:3rem}
.lb-prev{left:.2rem}
.lb-next{right:.2rem}
.lb-count{
  position:absolute;left:0;right:0;bottom:1rem;margin:0;text-align:center;
  font-size:.78rem;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums;
}
@media (max-width:600px){
  .lb-prev,.lb-next{top:auto;bottom:.3rem;transform:none}
  .lb-img{max-height:80dvh}
}

/* ── Fotos von Gaesten (hubertus-dodaj.html) ──────────────────── */
.dodaj{padding-block:0 var(--sec)}
/* display:grid/flex unten wuerde das hidden-Attribut ueberstimmen (Danke-Box waere sofort sichtbar) */
.dodaj [hidden]{display:none!important}
.dodaj-form,.dodaj-ok{max-width:40rem;display:grid;gap:1.1rem}
.dodaj-form.busy .dodaj-drop,.dodaj-form.busy .dodaj-x{pointer-events:none;opacity:.5}
/* iOS vergroessert die Seite bei Feldern unter 16 px: hier wird am Handy getippt */
.dodaj .fl input,.dodaj .fl textarea{font-size:16px}

.dodaj-drop{
  position:relative;display:grid;place-items:center;gap:.35rem;text-align:center;cursor:pointer;
  padding:clamp(2rem,6vw,3rem) 1.2rem;border:1px dashed var(--gold);border-radius:3px;
  background:var(--soil);transition:background .3s,border-color .3s;
}
.dodaj-drop:hover{background:var(--bark)}
.dodaj-drop:focus-within{outline:2px solid var(--gold);outline-offset:3px}
/* Das echte Feld liegt unsichtbar darueber: so oeffnet ein Tipp ueberall die Auswahl */
.dodaj-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dodaj-drop-big{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2rem);color:var(--gold);line-height:1.1}
.dodaj-drop-small{font-size:.8rem;color:var(--muted)}

.dodaj-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
.dodaj-lista:empty{display:none}
.dodaj-lista li{position:relative;aspect-ratio:1;border-radius:2px;overflow:hidden;background:var(--bark)}
.dodaj-lista img{width:100%;height:100%;object-fit:cover}
.dodaj-lista li.ohne-bild::before{
  content:'HEIC';position:absolute;inset:0;display:grid;place-items:center;
  font-size:.7rem;letter-spacing:.14em;color:var(--muted);
}
.dodaj-x{
  position:absolute;top:3px;right:3px;width:28px;height:28px;border-radius:50%;
  border:0;background:rgba(23,18,14,.82);color:var(--flaxen);font-size:1.1rem;line-height:1;cursor:pointer;
}
.dodaj-x:hover,.dodaj-x:focus-visible{background:var(--gold);color:var(--night)}
.dodaj-ile{margin:0;font-size:.85rem;color:var(--gold)}
.dodaj-ile:empty{display:none}

.dodaj-zgoda{align-items:flex-start;line-height:1.5}
.dodaj-zgoda input{flex:none;margin-top:.25em}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}

.dodaj-postep p{margin:.6rem 0 0;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dodaj-pasek{height:4px;border-radius:2px;background:var(--bark);overflow:hidden}
.dodaj-pasek i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s}
.dodaj-blad{margin:0;padding:.85rem 1rem;border-left:2px solid var(--ember);background:var(--soil);color:var(--flaxen);font-size:.9rem}
.dodaj-info{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}

.dodaj-ok{padding:clamp(1.6rem,4vw,2.4rem);border:1px solid var(--gold);border-radius:3px;background:var(--soil)}
.dodaj-ok:focus{outline:0}
.dodaj-ok h2{font-size:clamp(2rem,5vw,3rem);color:var(--gold)}
.dodaj-ok p{margin:0}
.dodaj-ok-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.6rem!important}

/* Link von der Galerie zur Upload-Seite */
.hub-dodaj{margin:clamp(1.6rem,3vw,2.4rem) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem}
.hub-dodaj span{color:var(--muted);font-size:.95rem}

/* ── galeria.html ─────────────────────────────
   Hoehere Reihen als bei Hubertus; bei 260 px stand das 30. Foto allein in der letzten Reihe. */
@media (min-width:601px){.gal .hub-rows>*{--row:300px}}
@media (max-width:600px){.gal .hub-rows>*{--row:140px}}
.gal .foto-credit{margin-top:1.2rem}