/* ── WAS BILDDATENBANK UND BUEROSEITEN TEILEN ──
   Die einzige Stelle mit diesen Werten. Beide Welten haben sonst getrenntes
   CSS – dieselben Zahlen zweimal getippt waeren zwei Darstellungen desselben
   Dings, und dann glaubt man der falschen. Die Bueroseiten holen sie ueber
   basis.css, index.html per eigenem <link>.
   Drin: Schrift und Grundfarben, die Tonleitern fuer Flaechen, der Seitenrahmen,
   die Kopfzeile, der Glas-Knopf, die Filterknoepfe, Ueberschriften,
   Feldbeschriftungen, Flaeche und Listeneintrag, die leere Liste,
   die Meldung und das Etikett.

   ── TONLEITER FUER FLAECHEN ──

   SCHATTEN gehoeren bewusst NICHT dazu. Dort haengt die Deckkraft an
   Weichzeichnung und Versatz; eine gemeinsame Leiter waere dort keine
   Ordnung, sondern eine Fessel. */
* { box-sizing: border-box; }

:root {
  /* ── SCHRIFT UND GRUNDFARBEN ──
     Standen bis 10.08. in beiden Welten getrennt und waren dabei
     auseinandergelaufen: zwei Schriftstapel, zwei Grautoene, zwei Eckenradien.
     Der Wechsel zwischen den Reitern sah dadurch nach zwei Anwendungen aus. */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text: #1d1d1f;
  --muted: #8e8e93;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --border-med: rgba(0, 0, 0, 0.12);
  --accent: #3a3a3c;
  --radius: 12px;
  --radius-sm: 9px;
  --blur: blur(24px);
  --rot-bg: rgba(255, 59, 48, 0.08);
  --rot-fg: #c0392b;
  --gruen-bg: rgba(52, 199, 89, 0.16);
  --gruen-fg: #1a7a34;
  --amber-bg: rgba(200, 145, 43, 0.14);
  --amber-fg: #8a6316;
  --blau-bg: rgba(55, 138, 221, 0.14);
  --blau-fg: #185fa5;

  /* Der Glas-Knopf und sein Ueberfahren-Zustand. Semantisch benannt, weil die
     Kundengalerie sie im Dunkelmodus umdreht: dort helles Glas auf dunklem
     Grund statt dunkles auf hellem. */
  --glass-btn: var(--hell-3);
  --glass-btn-hover: var(--hell-4);
  /* Haupt-Knopf. Ebenfalls umschaltbar – auf den Anmeldeschirmen der
     Kundengalerie steht er im Dunkelmodus hell auf dunkel. */
  --btn-primary-bg: rgba(58, 58, 60, 0.88);
  --btn-primary-fg: #fff;
  --btn-primary-hover: rgba(58, 58, 60, 0.98);

  /* Dunkel auf hellem Grund – fuer Flaechen, die sich einsenken sollen.
     Vorher acht von Hand getippte Werte zwischen 0.025 und 0.07: zu wenig
     Unterschied, um sie auseinanderzuhalten, und genug, um sich in die Quere
     zu kommen – der Kategorie-Knopf (0.04) war vom Eingabefeld (0.035) nicht
     mehr zu unterscheiden. */
  --ton-1: rgba(0, 0, 0, 0.025);   /* eingelassene Bereiche, kaum sichtbar */
  --ton-2: rgba(0, 0, 0, 0.04);    /* Ruheflaeche: Felder, Leisten */
  --ton-3: rgba(0, 0, 0, 0.06);    /* beim Ueberfahren, und statische Marken */

  /* Weisses Glas – fuer alles, was auf dem Seitengrund oder auf einem Foto
     liegt. Vorher zehn Werte zwischen 0.55 und 0.96. Auf dem Seitengrund
     #F5F5F7 ergeben die zusammen nur fuenf RGB-Schritte (250 bis 255): dort
     trennt der Rahmen und der Schatten, nicht die Deckkraft. Sichtbar
     arbeitet sie allein ueber einem Foto – deshalb liegt die Leiter danach. */
  --hell-1: rgba(255, 255, 255, 0.55);   /* eingelassen: Felder, Glas-Knoepfe im Kundenbereich */
  --hell-2: rgba(255, 255, 255, 0.72);   /* Flaeche: Karten, Kopfzeilen, Leisten */
  --hell-3: rgba(255, 255, 255, 0.80);   /* liegt obenauf: Knoepfe, Marken auf dem Foto */
  --hell-4: rgba(255, 255, 255, 0.92);   /* ueberfahren, und Menues */

  /* ── SEITENRAHMEN ──
     Breite und Polsterung jedes Reiters im Hauptmenue. Dass die Bereiche wie
     eine Anwendung wirken und nicht wie vier Webseiten, haengt genau hieran:
     der Inhalt muss ueberall an derselben Kante anfangen und aufhoeren. */
  --seite-max: 1800px;
  --seite-polster: 2.2rem 2.2rem 4rem;
  /* Breite Fenster machen den Rahmen breit, nicht die Felder: ein Textfeld,
     das ueber die halbe Wand laeuft, liest sich schlecht und sieht nach Versehen
     aus. Inhalt (Raster, Listen) nimmt die volle Breite, Eingaben bleiben hier.
     Der Wert kommt von den Bueroseiten, wo die Passwortfelder schon so stehen. */
  --feldbreite: 720px;
}
@media (max-width: 800px) {
  :root { --seite-polster: 1.4rem 1rem 3rem; }
}

/* ── FILTERKNOEPFE ──
   Die Knopfreihe unter dem Suchfeld: Status bei den Angeboten, Galerien und
   Importieren in der Bilddatenbank. Beide Reiter benutzen dieselbe Reihe, damit
   sie sich beim Wechseln nicht unter den Fingern veraendert.
   Dunkel = das ist gerade aktiv (siehe Gestaltungsregel in der CLAUDE.md). */
.filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.filter button {
  height: 26px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  border: 0.5px solid var(--border-med); background: var(--hell-3);
  color: var(--muted); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; font-family: var(--font);
  transition: background .15s, color .15s, border-color .15s;
}
.filter button:hover { background: var(--hell-4); color: var(--text); }
.filter button.an { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter button.an:hover { background: var(--accent); color: #fff; }

/* Grundmasse fuer Text ohne eigene Angabe. Vorher setzten die Bueroseiten
   15px/1.5, die Bilddatenbank gar nichts – dort las sich alles einen Punkt
   groesser und enger. Beide Seiten duerfen das ueberschreiben, tun es aber
   nicht mehr. */
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── GLAS-KNOPF ──
   Eine Fassung fuer beide Welten. Vorher zwei, die sich in fuenf Werten
   unterschieden: Hoehe (34/32), Flaeche (0,55/0,80), Weichzeichnung (ja/nein),
   Ring und Schlagschatten.
   Die Weichzeichnung bleibt: ueber einem Foto traegt sie, auf flachem Grund
   kostet sie nichts. Die Flaeche liegt eine Stufe UEBER dem Untergrund, auf dem
   der Knopf sitzt (--hell-3 auf --hell-2) – hell = da drueckst du drauf.
   Vorher lag sie in der Kundengalerie darunter. */
.gb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  font-size: 0.8rem; font-weight: 500; font-family: var(--font);
  background: var(--glass-btn);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 0.5px 0 rgba(255,255,255,0.9), 0 0 0 0.5px var(--border-med);
  color: var(--text); white-space: nowrap; text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.gb:hover { background: var(--glass-btn-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 0.5px 0 #fff, 0 0 0 0.5px var(--border-med); }
.gb:active { transform: scale(0.98); }
.gb-dunkel { background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  box-shadow: 0 1px 4px rgba(58,58,60,0.25), inset 0 0.5px 0 rgba(255,255,255,0.15); }
.gb-dunkel:hover { background: var(--btn-primary-hover); color: var(--btn-primary-fg); }
.gb-gefahr { background: var(--rot-bg); color: var(--rot-fg); box-shadow: 0 0 0 0.5px rgba(255,59,48,0.25); }
.gb-klein { height: 26px; padding: 0 10px; font-size: 0.72rem; }

/* ── KOPFZEILE ──
   Signet links, Hauptmenue-Knopf rechts – auf jedem Reiter an derselben Stelle,
   auch auf dem Handy. Vorher liessen die Bueroseiten den Knopf unter 800 px
   unter das Signet rutschen, die Bilddatenbank nicht: derselbe Knopf sass je
   nach Reiter woanders und kostete eine Zeile Hoehe.
   Umgebrochen wird nur noch, wenn es wirklich nicht passt (flex-wrap), nicht
   vorsorglich ab einer Breite. Signet 200 px plus Knopf passen bis hinunter
   auf ein iPhone SE. */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.kopf img, .kopf > a > svg { display: block; }

/* ── UEBERSCHRIFT UND BESCHRIFTUNG ──
   Zwei Groessen fuer zwei Aufgaben, vorher vier Namen fuer dieselbe Sache:
   .abschnitt-titel (zweimal getippt), .section-title und .gallery-assign-title.
   Die Feldbeschriftung ist kleiner und sitzt enger – sie klebt an ihrem Feld,
   waehrend die Ueberschrift einen ganzen Block anfuehrt. */
/* Beide gleich gross. Vorher .68 gegen .62 – sechs Prozent Unterschied, zu wenig
   zum Lesen als Rangfolge und zu viel, um als derselbe Baustein durchzugehen. In
   der Galerie-Karte wechseln sie sich ab (PASSWORT, KUNDE, BESCHREIBUNG, WAS DER
   KUNDE HIER KANN), und dort sah es schlicht unsauber aus statt gegliedert.
   Den Rang tragen jetzt die Abstaende: die Ueberschrift laesst .6rem Luft zu dem,
   was sie anfuehrt, die Feldbeschriftung klebt mit .25rem an ihrem Feld. */
.abschnitt-titel {
  font-size: .62rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: .6rem;
}
.feldname {
  font-size: .62rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; display: block; margin-bottom: .25rem;
}

/* ── LEERE LISTE ── */
.leer { text-align: center; color: var(--muted); font-size: .85rem; padding: 2.5rem 1rem; }

/* ── MELDUNG ──
   Ohne Aussenabstand: der kommt vom Ort. Ueber einer Liste braucht sie Luft
   nach unten, unter einem Anmeldefeld nach oben – das weiss nur die Stelle,
   an der sie steht, nicht das Bauteil. */
.meldung { border-radius: var(--radius-sm); padding: .6rem .9rem; font-size: .82rem; }
.meldung-fehler { background: var(--rot-bg); border: 0.5px solid rgba(255,59,48,0.25); color: var(--rot-fg); }
.meldung-ok { background: rgba(52,199,89,0.08); border: 0.5px solid rgba(52,199,89,0.25); color: var(--gruen-fg); }

/* ── ETIKETT ──
   Das kleine farbige Schildchen: Angebotsstatus, Bewertungsstand einer Galerie,
   zugeordnete Galerie beim Kunden. Hiess vorher .pille, .chip und .marke – drei
   Namen, drei Definitionen, zwei verschiedene Hoehen.
   Grau ist der Grundzustand, Farbe die Ausnahme; deshalb braucht das neutrale
   Etikett keinen Zusatz. */
.pille {
  display: inline-flex; align-items: center; gap: .2rem; flex: none;
  height: 22px; padding: 0 9px; border-radius: 6px;
  font-size: .72rem; line-height: 1; white-space: nowrap;
  background: var(--ton-3); color: var(--muted);
}
.pille-gruen { background: var(--gruen-bg); color: var(--gruen-fg); }
.pille-rot   { background: var(--rot-bg);   color: var(--rot-fg); }
.pille-amber { background: var(--amber-bg); color: var(--amber-fg); }
.pille-blau  { background: var(--blau-bg);  color: var(--blau-fg); }
/* Als Verweis benutzt (Galerie beim Kunden): kein Unterstrich, leichtes Nachdunkeln */
a.pille { text-decoration: none; }
a.pille:hover { filter: brightness(0.96); }

/* ── LISTENEINTRAG UND FLAECHE ──
   Drei Namen fuer zwei Aufgaben, plus ein Bauteil, das beides ist: die
   Galerie-Karte war zugeklappt eine Zeile (0,6/1rem Polster) und aufgeklappt
   eine Karte. Deshalb stehen hier beide Gestalten beieinander, und die
   aufklappbare Zeile borgt sie sich – ohne dass ein Wert zweimal getippt wird.

   Der Eintrag ist WEISS, nicht Glas: auf dem hellgrauen Seitengrund liegen
   zwischen 0,72 und Weiss nur vier RGB-Schritte, eine Liste braucht aber klare
   Kanten. Nebenbei wird dadurch das Aufklappen sichtbar – aus der weissen
   Zeile wird eine Glasflaeche. */
/* Die Liste haelt den Abstand, nicht die Zeile. Vorher trugen ihn Kunden und
   Angebote als margin-bottom im Markup (6 px) und die Bilddatenbank als Rasterfuge
   (12 px) – zwei Mechaniken, zwei Werte, und beim Suchen blendet Suche.js Zeilen
   aus, was mit der Fuge sauberer zusammengeht als mit Aussenabstaenden. */
.zeilen-liste { display: grid; gap: 6px; }
/* Der Name in der Zeile. Stand in drei Reitern dreimal anders im Markup:
   1rem/600 in der Bilddatenbank, .95/400 bei den Kunden, .9/400 bei den Angeboten.
   Vom User am 13.08. auf die ruhige Fassung entschieden. */
.zeile-titel { flex: 1; min-width: 0; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile { display: flex; align-items: center; gap: 12px; }
.zeile, .aufklappbar.is-collapsed {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 10px; padding: .7rem .9rem; cursor: pointer;
  box-shadow: none;
}
.zeile:hover, .aufklappbar.is-collapsed:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

.karte, .aufklappbar:not(.is-collapsed) {
  background: var(--hell-2);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 0.5px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), inset 0 0.5px 0 rgba(255,255,255,0.9);
  padding: 1.2rem 1.3rem; cursor: default;
}
/* Der Wechsel zwischen beiden Gestalten laeuft, statt zu springen */
.aufklappbar { min-width: 0;
  transition: padding .25s cubic-bezier(0.4,0,0.2,1), background .25s, border-radius .25s, box-shadow .25s; }
.zeile { transition: box-shadow .15s, transform .1s; }

@media (max-width: 800px) {
  .karte, .aufklappbar:not(.is-collapsed) { padding: 1rem .9rem; }
}