/* =========================================================
   FOTO GALERIE
   Feste Kopfleiste, Menüleiste darunter, darunter die Kacheln. Die
   schwebenden Knöpfe erscheinen erst innerhalb einer Kategorie.
   ========================================================= */

.galerie-screen { min-height: 100vh; }

/* --- Kopfleiste --- */
.galerie-kopf {
  background: #23201d;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
}
.galerie-kopf-mitte { display: flex; align-items: center; gap: 12px; }
.galerie-kopf h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.galerie-kopf .header-logo { height: 38px; width: auto; border-radius: 8px; }
.galerie-kopf .titel-benutzer { color: #b9b2a9; font-weight: 400; }

/* --- Menüleiste: Burgerknopf links, Titel mittig --- */
.galerie-navi {
  background: #fff;
  border-bottom: 1px solid #e2dcd4;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 46px;
}
.galerie-navi-burger { position: relative; }
.galerie-navi-titel {
  /* Mittig zur ganzen Leiste, unabhängig von der Breite des Knopfes links. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 1.05rem;
  color: #23201d;
}

.galerie-navi .nav-burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 34px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #e2dcd4;
  border-radius: 7px;
  cursor: pointer;
  box-sizing: border-box;
}
.galerie-navi .nav-burger-btn span {
  display: block;
  height: 2px;
  background: #23201d;
  border-radius: 2px;
}

.galerie-navi .nav-burger-menu {
  display: none;
  position: absolute;
  top: 42px;
  left: 0;
  z-index: 40;
  min-width: 230px;
  background: #fff;
  border: 1px solid #e2dcd4;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 10px 0;
}
.galerie-navi .nav-burger-menu.offen { display: block; }
.galerie-navi .nav-burger-benutzer {
  padding: 6px 16px 10px;
  font-weight: 700;
  color: #23201d;
  border-bottom: 1px solid #efe9e2;
  margin-bottom: 6px;
}
.galerie-navi .nav-burger-zurueck,
.galerie-navi .nav-burger-abmelden {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: #23201d;
}
.galerie-navi .nav-burger-zurueck:hover { background: #f4f1ec; }
.galerie-navi .nav-burger-abmelden { color: #a4413c; font-weight: 600; }
.galerie-navi .nav-burger-abmelden:hover { background: #f7eeee; }
.galerie-navi .nav-burger-trenner { border: none; border-top: 1px solid #efe9e2; margin: 8px 0; }
.galerie-navi .nav-burger-version {
  display: block;
  padding: 2px 16px 6px;
  color: #a9a29a;
  font-size: 0.78rem;
}

/* --- Zwei Spalten --- */
.galerie-flaeche {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 22px 24px 40px;
  max-width: 1800px;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.galerie-fotos-spalte { flex: 1 1 0; min-width: 0; }
.galerie-fotos {
  background: #fff;
  border: 1px solid #e2dcd4;
  border-radius: 12px;
  padding: 26px 30px;
  min-height: 320px;
}
.galerie-fotos-titel { margin: 0 0 6px; font-size: 1.5rem; color: #23201d; }
.galerie-fotos-adresse { margin: 0; color: #5c554e; font-size: 1rem; }

/* Auf kleinen Bildschirmen weniger Rand, damit die Fotos die Breite
   bekommen. Die frühere Auswahlspalte neben den Fotos ist entfallen - eine
   geöffnete Galerie zeigt nur noch sich selbst. */
@media (max-width: 1000px) {
  .galerie-flaeche { flex-direction: column; padding: 16px; }
  .galerie-fotos-spalte { width: 100%; }
}

/* --- Fotobereich --- */
.galerie-kopfzeile {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.galerie-kopf-titel { margin: 0; font-size: 1.2rem; flex: 1 1 auto; }
.galerie-hochladen { cursor: pointer; width: auto; flex: 0 0 auto; }

.galerie-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.galerie-kachel {
  margin: 0;
  border: 1px solid #e2dcd4;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.galerie-bild-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #f2efe9;
  cursor: pointer;
}
.galerie-bild-knopf img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Der Infokasten unter dem Bild.
 *
 * Zwei Zeilen statt einer: Datum und Auflösung standen vorher mit den
 * Zeichen zum Herunterladen und Löschen in EINER Reihe und wurden bei
 * schmalen Kacheln abgeschnitten. Jetzt stehen die Angaben oben - sie
 * dürfen umbrechen -, die Bedienzeichen darunter.
 */
/* Drei Spalten: Kästchen links, Herunterladen und Löschen rechts - alle
   drei in EINER Zeile. Die Angaben darüber nehmen die ganze Breite ein. */
.galerie-kachel figcaption {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 10px 8px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #5c554e;
}
.galerie-kachel-datum,
.galerie-kachel-masse { grid-column: 1 / -1; }
.galerie-kachel figcaption .galerie-laden { grid-column: 2; justify-self: end; }
.galerie-kachel figcaption .galerie-weg { grid-column: 3; justify-self: end; }
.galerie-kommentar { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Großansicht --- */
.galerie-gross {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(20, 18, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.galerie-gross-bild { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.galerie-gross-zu,
.galerie-gross-nav {
  position: fixed;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.galerie-gross-zu { top: 18px; right: 20px; font-size: 1.3rem; padding: 8px 13px; }
.galerie-gross-nav { top: 50%; transform: translateY(-50%); font-size: 2.4rem; padding: 4px 18px; }
.galerie-gross-zurueck { left: 20px; }
.galerie-gross-vor { right: 20px; }
.galerie-gross-fuss {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #e8e2da;
  font-size: 0.9rem;
  max-width: 90vw;
}

/* Vollständig lesbar - lieber eine Zeile mehr als ein "…". */
.galerie-kachel-datum {
  white-space: normal;
  overflow: visible;
  font-weight: 600;
  color: #3f3a35;
}
.galerie-laden { text-decoration: none; font-size: 1rem; color: #2f6b43; padding: 0 3px; }
.galerie-kommentar { padding: 0 10px 8px; font-size: 0.82rem; color: #5c554e; }
.galerie-gross-laden {
  position: fixed;
  top: 18px;
  right: 74px;
  z-index: 3001;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 1.2rem;
  text-decoration: none;
  line-height: 1;
}

/* Fortschritt beim Hochladen.
   Eigener Streifen am oberen Rand - NICHT im Fotobereich, denn der wird
   nach dem Hochladen neu aufgebaut und nähme die Anzeige mit. */
.upload-fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3200;
  overflow: hidden;
  background: #eef4ef;
  border-bottom: 1px solid #cfe0d4;
  padding: 10px 16px;
  text-align: center;
}
.upload-fortschritt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--anteil, 0%);
  background: #cfe6d6;
  transition: width 0.15s linear;
}
/* Ohne bekannten Fortschritt: eine Bewegung, die durchläuft. */
.upload-fortschritt.unbekannt::before {
  width: 35%;
  animation: upload-lauf 1.1s ease-in-out infinite;
  transition: none;
}
@keyframes upload-lauf {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.upload-fortschritt.upload-meldung::before { width: 0; }
.upload-text {
  position: relative;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2f6b43;
}

@media (prefers-reduced-motion: reduce) {
  .upload-fortschritt.unbekannt::before { animation: none; width: 100%; opacity: 0.5; }
}

/* Sanfter Bildwechsel in der Großansicht.
   Das alte Bild wandert hinaus, das neue kommt von der Gegenseite herein. */
.galerie-gross-bild {
  /* Weiches Überblenden statt Gleiten: Das Gleiten zeigte kurz das alte
     Bild erneut, während das neue noch lud. */
  transition: opacity 180ms ease;
}
.galerie-gross-bild.blendet-aus { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .galerie-gross-bild { transition: none; }
}

/* Zuordnung und Teilen-Link einer eigenständigen Galerie */
.galerie-verwaltung {
  border: 1px solid #e2dcd4;
  border-radius: 9px;
  background: #fbfaf8;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.galerie-verwaltung-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.galerie-verwaltung-titel {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b645d;
  min-width: 90px;
}
.galerie-link {
  flex: 1 1 260px;
  min-width: 0;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 0.88rem;
  border: 1px solid #ddd6cd;
  border-radius: 7px;
  background: #fff;
}

/* =========================================================
   Angaben einer Galerie: Kunde, Strasse, Etage, Kategorie, Link
   =========================================================

   Alle Felder dieser Gruppe sind GLEICH HOCH und gleich breit - auch das
   Auswahlfeld fuer die Kategorie und das Linkfeld. Vorher trug jedes seine
   eigene Hoehe: Textfelder 31 Pixel, das Auswahlfeld die Vorgabe des
   Browsers, der Link wieder anders. Nebeneinander sah das aus, als waere
   es versehentlich zusammengeraten.

   Die Hoehe (44 Pixel) ist dieselbe wie bei den Knoepfen darunter - wer
   auf dem Handy mit dem Daumen arbeitet, trifft damit jedes davon. */
.galerie-feldgruppe {
  display: grid;
  /* Zwei nebeneinander, sobald der Platz reicht; auf dem Handy eins. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.galerie-feldgruppe + .galerie-feldgruppe { margin-top: 4px; }

.galerie-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.galerie-feld-name {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b645d;
}

/* EINE Regel fuer Eingabe- und Auswahlfeld. Ein <select> bringt eigene
   Vorgaben mit, die jede gemeinsame Hoehe zunichtemachen - deshalb
   "appearance: none" und der Pfeil als Hintergrundbild. */
.galerie-feld-eingabe {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #23201d;
  border: 1px solid #ddd6cd;
  border-radius: 9px;
  background: #fff;
}
.galerie-feld-eingabe:focus {
  outline: none;
  border-color: #2f6b43;
  box-shadow: 0 0 0 3px rgba(47, 107, 67, 0.15);
}
select.galerie-feld-eingabe {
  appearance: none;
  -webkit-appearance: none;
  /* Pfeil als SVG im Hintergrund - so bleibt die Hoehe unter unserer
     Kontrolle, statt vom Browser bestimmt zu werden. */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
  padding-right: 34px;
  cursor: pointer;
}
/* Der Teilen-Link ist zum Ablesen da: ganze Breite, kein Umbruch. */
.galerie-feldgruppe:has(> .galerie-feld > .galerie-link) { grid-template-columns: 1fr; }
.galerie-link { font-size: 0.86rem; }

.galerie-feld-hinweis {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #6b645d;
}

.galerie-loeschen-laeuft { color: #a4413c; font-weight: 700; font-size: 0.9rem; }

/* =========================================================
   Die drei Knöpfe der Galerieverwaltung.
   Gleich groß, nebeneinander wenn der Platz reicht, sonst
   untereinander und mittig.
   ========================================================= */
.galerie-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}
.galerie-knopf {
  flex: 1 1 190px;
  max-width: 260px;
  /* Dieselbe Hoehe und derselbe Eckenradius wie die Felder darueber -
     Knopf und Feld gehoeren zusammen, also sehen sie gleich aus. */
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
}
/* Blasses Grün für Zuordnung und Link - beides sind gewöhnliche Handgriffe. */
.galerie-knopf-gruen {
  background: #e5f2e8;
  border-color: #a8ccb4;
  color: #26543a;
}
.galerie-knopf-gruen:hover { background: #d8ebde; }

/* Kräftiges Rot fürs Löschen - es ist nicht rückgängig zu machen. */
.galerie-knopf-rot {
  background: #b5342c;
  border-color: #93281f;
  color: #fff;
}
.galerie-knopf-rot:hover { background: #9c2b24; }

/* Der Löschbereich verhält sich wie ein Knopf, damit die Reihe gleichmäßig
   bleibt - auch während die Frist läuft. */
.galerie-loeschen-bereich {
  flex: 1 1 190px;
  max-width: 260px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.galerie-loeschen-bereich .galerie-knopf { flex: 1 1 auto; max-width: none; }
.galerie-knopf-hinweis {
  flex: 1 1 190px;
  max-width: 260px;
  align-self: center;
  text-align: center;
  font-weight: 700;
}

/* Auswahl eines Projekts für die Zuordnung */
.galerie-wahl-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;
  background: rgba(20, 18, 16, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.galerie-wahl-fenster {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
  padding: 16px 18px;
}
.galerie-wahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.galerie-wahl-kopf h3 { margin: 0; font-size: 1.1rem; }
.galerie-wahl-suche {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  margin: 8px 0;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid #ddd6cd;
  border-radius: 8px;
}
.galerie-wahl-liste { overflow-y: auto; }
.galerie-wahl-eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  margin-bottom: 6px;
  border: 1px solid #e2dcd4;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
.galerie-wahl-eintrag:hover { background: #f4faf5; border-color: #a8ccb4; }
.galerie-wahl-nr {
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.8rem;
  color: #2f6b43;
  border: 1px solid #cfe0d4;
  border-radius: 999px;
  padding: 0 8px;
}
.galerie-wahl-name { font-weight: 700; }

.galerie-knopf-hinweis {
  font-size: 0.9rem;
  color: #4a443e;
  line-height: 1.3;
}

/* Fehlermeldung: rot und bleibend, bis man sie wegklickt. */
.upload-fortschritt.upload-fehler {
  background: #fbe6e4;
  border-bottom-color: #dfa8a3;
}
.upload-fortschritt.upload-fehler .upload-text { color: #a4413c; }
.upload-zu {
  position: absolute;
  top: 6px;
  right: 12px;
  background: none;
  border: none;
  color: #a4413c;
  font-size: 1rem;
  cursor: pointer;
}

/* Mehrfachauswahl in der Galerie */
/* Die Auswahlleiste steht UNTER der Galerie. */
.galerie-auswahlleiste {
  display: grid;
  /* Ein Raster statt einer Flexzeile: Damit sind alle vier Knoepfe
     garantiert gleich breit. Vorher hingen die Breiten davon ab, was in
     der Zeile noch Platz fand - "Alle" wurde 136 Pixel breit, die anderen
     200, und das sah aus wie ein Versehen. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  margin-top: 16px;
  background: #f4faf5;
  border: 1px solid #a8ccb4;
  border-radius: 9px;
  font-weight: 700;
}
/* Die Zahl der ausgewaehlten Fotos steht ueber den Knoepfen, nicht
   zwischen ihnen - sie ist keine Schaltflaeche. */
.galerie-auswahlleiste > span:first-child {
  grid-column: 1 / -1;
  font-size: 0.9rem;
}
/* Alle Knöpfe gleich groß - keiner ist wichtiger als der andere, und
   dieselbe Hoehe wie die Felder und Knoepfe der Verwaltung darueber. */
.galerie-auswahlleiste .galerie-knopf {
  width: 100%;
  max-width: none;
  height: 44px;
  padding: 0 14px;
}
/* Blau für Alle und Keine: Sie ändern nur die Auswahl, löschen nichts. */
.galerie-knopf-blau {
  background: #e3edf6;
  border-color: #9db8d2;
  color: #234a6b;
}
.galerie-knopf-blau:hover { background: #d4e3f0; }

.galerie-kachel { position: relative; }
.galerie-kachel.ist-gewaehlt img { outline: 3px solid #2f6b43; outline-offset: -3px; }

/* Das Kästchen sitzt in der Fußzeile bei den übrigen Zeichen. */
/* Kästchen, Herunterladen und Löschen in der zweiten Zeile, links. */
.galerie-haken { display: flex; align-items: center; line-height: 0; cursor: pointer; grid-column: 1; }
.galerie-haken-feld { width: 20px; height: 20px; margin: 0; cursor: pointer; }

/* Gelb fürs Herunterladen - es verändert nichts, holt aber Daten heraus. */
.galerie-knopf-gelb {
  background: #fdf2dd;
  border-color: #ddc98a;
  color: #7a5a12;
}
.galerie-knopf-gelb:hover { background: #f7e9cd; }

/* Solange nichts ausgewählt ist, bewirken die Knöpfe nichts - dann sind sie
   grau. Ein farbiger Knopf ohne Wirkung ist eine Einladung zum Fehlklick. */
.galerie-auswahlleiste .galerie-knopf:disabled {
  background: #ece8e2;
  border-color: #d8d2ca;
  color: #8d867e;
  cursor: default;
}

/* Der Knopf zum Hochladen steht unter den Angaben zur Galerie. */
.galerie-hochladen-zeile {
  display: flex;
  justify-content: flex-start;
  margin: 14px 0 16px;
}
.galerie-hochladen-zeile .galerie-hochladen { cursor: pointer; }

/* Bildgröße in Pixeln - unauffällig neben dem Datum. */
.galerie-kachel-masse {
  font-size: 0.72rem;
  color: #8d867e;
  white-space: nowrap;
}

/* =========================================================
   ÜBERSICHT: Kategorien und Galerien als Kacheln
   Die Kacheln selbst kommen aus wissen/assets/style.css - hier steht
   nur, was die Galerie zusätzlich braucht.
   ========================================================= */
.galerie-uebersicht {
  width: 100%;
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  /* Unten Platz für die schwebenden Knöpfe. */
  padding: 18px 16px 150px;
}
/* Ab dieser Breite stellt das Kachelraster (siehe wissen/assets/style.css)
   auf drei Spalten um. Diese Datei wird NACH der von Wissen geladen, darum
   steht die Anpassung des Bereichs hier - sonst würde die Breite oben
   wieder überschrieben. */
@media (min-width: 1000px) {
  .galerie-uebersicht { max-width: 972px; }
}

.galerie-uebersicht[hidden] { display: none !important; }
.galerie-flaeche[hidden] { display: none !important; }

/* Die Kategorieauswahl hatte hier einmal eine eigene Form. Sie ist
   entfallen: Das Feld gehoert jetzt zur Gruppe mit Kunde, Strasse und
   Etage und traegt deren Form (.galerie-feld-eingabe).

   Die alte Regel hat dabei einen Fehler hinterlassen, der schwer zu sehen
   war: "flex: 1 1 200px" setzt die Groesse in der HAUPTACHSE. Im neuen
   Aufbau steht das Feld in einem Behaelter mit "flex-direction: column" -
   die Hauptachse ist dort senkrecht, und aus den 200 Pixel Breite wurden
   200 Pixel HOEHE. Das Auswahlfeld war damit fuenfmal so hoch wie die
   Felder daneben. Die Klasse bleibt als Anker fuer das Programm bestehen. */

/* Kategorienamen dürfen zwei Zeilen belegen - dieselbe Regel wie im
   Bereich Wissen, dort an die Klasse .wi-kategorie gebunden. */
.gal-kategorie .wi-kachel-titel {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.3em;
}

/* Suche - schwebend über dem Plus, mit Lupe als Symbol. */
.wi-schwebe-suche {
  bottom: calc(144px + env(safe-area-inset-bottom, 0px));
  background: #3f72b5;
}
.wi-schwebe-suche svg { display: block; }

.wi-schwebe[hidden] { display: none; }