/* =========================================================================
   WISSEN
   Auf dem Handy wie am Schreibtisch derselbe Aufbau - nur die Breiten
   ändern sich. Die beiden schwebenden Knöpfe bleiben immer erreichbar.
   ========================================================================= */

/* "width: 100%" ist nötig, nicht Zierde: Die Seite ist eine Flex-Spalte,
   und ein "margin: 0 auto" darin verhindert, dass das Element auf volle
   Breite gestreckt wird - es schrumpft dann auf seinen Inhalt. */
.wi-inhalt {
  width: 100%;
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  /* Unten Platz für die schwebenden Knöpfe, damit sie nichts verdecken. */
  padding: 18px 16px 150px;
}

.wi-ueberschrift {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 700;
  /* Oben mittig - wie die Überschrift auf den Kacheln, damit die gewählte
     Kategorie über ihrem Inhalt steht und nicht an den Rand gedrängt wird. */
  text-align: center;
  width: 100%;
}

/* --- Kategorien: dieselben Kacheln wie die Dokumente ---
   Statt eines Vorschaubildes zeigen sie vier Miniaturen aus der Kategorie.
   Dadurch sieht man schon in der Übersicht, was darin liegt. */
/* Die vier Miniaturen füllen die Kachel NICHT bis zum Rand: Ein heller
   Rahmen ringsum setzt sie ab, sonst kleben sie an der Kante. Derselbe
   Ton bildet auch die Trennlinien zwischen den vier Feldern. */
.wi-mini {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  background: #ece8e2;
  padding: 7px;
}
/* Abgerundete Ecken - an EINER Stelle fuer alle Bereiche. Wissen,
   Fotogalerie und Projekte laden diese Datei gemeinsam, die Felder sehen
   also ueberall gleich aus. "overflow: hidden" sorgt dafuer, dass ein Foto
   darin mitgerundet wird statt ueber die Ecke hinauszustehen. */
.wi-mini-feld {
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
}
.wi-mini-feld img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fehlende Dokumente bleiben weiße Felder - das Raster behält seine Form. */
.wi-mini-leer { background: #fff; }

/* --- Kacheln: IMMER zwei nebeneinander, beliebig viele untereinander --- */
.wi-kacheln {
  display: grid;
  /* Auf dem Handy und bis hinauf zum kleinen Bildschirm immer zwei
     nebeneinander - nie eine, nie drei. */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Die Begrenzung hält die Kacheln in lesbarer Größe, die automatischen
     Seitenränder stellen sie mittig auf den Bildschirm. */
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Ab dieser Breite ist Platz für eine dritte Spalte, ohne dass die Kacheln
   kleiner werden: 3 × 305 px plus zwei Lücken ergibt dieselbe Kachelgröße
   wie zwei Spalten auf 620 px. */
@media (min-width: 1000px) {
  .wi-kacheln {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 940px;
  }
  /* Der umgebende Bereich muss die 940 px plus seinen Innenabstand
     hergeben, sonst würde er die dritte Spalte abschneiden. */
  .wi-inhalt { max-width: 972px; }
}
.wi-kachel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  overflow: hidden;
  cursor: pointer;
  /* Bezugsgröße für die Schriftgröße des Titels - siehe unten.
     Dazu MUSS die Breite ausdrücklich gesetzt sein: Ein Knopf richtet
     sich sonst nach seinem Inhalt, und mit "container-type" zieht das
     Raster ihn nicht mehr auf volle Spaltenbreite. */
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
}
.wi-kachel:hover { border-color: #9ec9a8; }
/* Das Vorschaubild ist IMMER quadratisch - sonst wären die Kacheln
   unterschiedlich hoch und das Raster zerrisse. */
.wi-kachel-bild {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f1ede7;
}
/* Das Vorschaubild liegt ABSOLUT in der Fläche.
 *
 * Vorher stand es im Textfluss mit "height: 100%". Die Höhe der Fläche
 * ergibt sich aber erst aus dem Seitenverhältnis - die Angabe konnte sich
 * also nicht auflösen, das Bild nahm seine eigene Höhe an und zog die
 * Fläche mit. Eine Dokumentkachel war dadurch nie quadratisch: Aus einem
 * hochkant stehenden PDF-Blatt wurde statt eines Ausschnitts das ganze
 * Blatt (gemessen 303x430 statt 303x303). Absolut platziert kann das Bild
 * die Fläche nicht mehr aufziehen.
 *
 * WICHTIG das ">": Gemeint ist nur das EINE große Vorschaubild, das direkt
 * in der Fläche liegt - also bei einem Dokument. Ohne den Pfeil traf die
 * Regel auch die vier Miniaturen in ".wi-mini"; die lagen dann alle vier
 * absolut auf der ganzen Fläche übereinander, und zu sehen war nur noch
 * die letzte als ein großes Bild. */
.wi-kachel-bild > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wi-kachel-ersatz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #8d867e;
}
/* Die Zahl auf einer Kachel: wie viele Dokumente in der Kategorie liegen,
   wie viele Fotos in der Galerie, wie viele Seiten im PDF.
   EINE Regel für alle vier Fälle in Wissen und Fotogalerie - vorher gab es
   zwei Varianten: dunkel nur für Wissen-Kategorien, hell überall sonst, und
   die Fotogalerie-Kategorien fielen durch beide Raster. */
.wi-kachel-seiten {
  position: absolute;
  /* LINKS, nicht rechts: Auf dem Handy liegen rechts unten die drei
     schwebenden Knöpfe, und die verdeckten die Zahl auf der untersten
     Kachel. Die 13 Pixel sind bewusst mehr als der Innenabstand der
     Vorschaufläche (7 px) - so schliesst die Zahl nicht bündig mit dem
     ersten Vorschaubild ab, sondern sitzt etwas weiter zur Kachelmitte. */
  left: 13px;
  bottom: 13px;
  min-width: 34px;
  padding: 5px 12px;
  box-sizing: border-box;
  border-radius: 999px;
  /* Dunkles Braun auf Bernstein statt Weiß auf Schwarz: nachgerechnet
     9,7:1 Kontrast - also reichlich - und es hebt sich auf einem Foto
     besser ab als ein schwarzer Fleck, ohne hart zu wirken.
     Der schmale helle Rand trennt die Zahl von dunklen Bildstellen. */
  background: #f0c24b;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #23201d;
}
/* Der Titel steht OBEN und MITTIG über dem Vorschaubild.
 *
 * Die Schrift wächst mit der Kachel: 1cqw ist ein Hundertstel der
 * Kachelbreite. Bei den üblichen Proportionen einer Schrift braucht ein
 * Zeichen etwa die halbe Schriftgröße an Breite - 20 Zeichen füllen die
 * Kachel also bei rund 9,5 % der Breite je Zeichenhöhe. Dadurch nutzt ein
 * langer Titel die ganze Breite, und ein kurzer wirkt nicht verloren.
 *
 * Wo Container-Einheiten fehlen (ältere Browser), greift die feste Größe
 * aus der Zeile darüber - dann ist der Titel kleiner, aber lesbar.
 */
.wi-kachel-titel {
  padding: 10px 8px 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  color: #23201d;
  text-align: center;
  /* Auf 20 Zeichen begrenzt - passt damit in eine Zeile. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@supports (font-size: 1cqw) {
  /* 8,9 % der Kachelbreite je Zeichenhöhe: Damit füllen 20 Zeichen die
     Breite aus, ohne bei breiten Buchstaben (M, W) überzulaufen -
     im Browser nachgemessen.
     Dokumenttitel sind auf 20 Zeichen begrenzt, Kategorienamen nicht. Für
     die rechnet "--zeichen" die Größe herunter: 178 geteilt durch die
     Zeichenzahl ergibt bei 20 Zeichen wieder 8,9. Das "min" sorgt dafür,
     dass kurze Namen nicht größer werden als der Rest.

     Der rem-Deckel ist nötig, seit auf dem Handy EINE Kachel die ganze
     Breite einnimmt: 8,9 % von 358 px wären 32 px. Das Verkleinern bei
     langen Titeln übernimmt assets/kachelschrift.js - gemessen statt über
     die Zeichenzahl geschätzt. */
  .wi-kachel-titel { font-size: min(8.9cqw, 1.5rem); }
}

/* Der Name einer Kategorie darf umbrechen, ein Dokumenttitel nicht: Der ist
   auf 20 Zeichen begrenzt und passt immer in eine Zeile. */
.wi-kategorie .wi-kachel-titel {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* Zwei Zeilen Höhe freihalten, damit alle Kacheln gleich hoch bleiben. */
  min-height: 2.3em;
}

/* --- Ein Dokument --- */
.wi-dokument-kopf { margin-bottom: 14px; }
.wi-dokument-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wi-laden { text-decoration: none; }

.wi-seiten { display: flex; flex-direction: column; gap: 14px; }
.wi-seite {
  margin: 0;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}
.wi-seite img { display: block; width: 100%; height: auto; }
.wi-seite figcaption {
  padding: 6px 10px;
  font-size: 0.82rem;
  color: #6b645d;
  border-top: 1px solid #f0ece6;
}

/* --- Großansicht ---
   Bildschirmfüllend und mit zwei Fingern vergrößerbar: "touch-action:
   pinch-zoom" erlaubt dem Browser genau diese Geste, und der Kasten rollt
   in beide Richtungen, damit man das vergrößerte Bild verschieben kann. */
.wi-gross {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(15, 14, 13, 0.96);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom;
}
.wi-gross-flaeche { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.wi-gross-bild { display: block; width: 100%; height: auto; }
.wi-gross-zu {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 3010;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  cursor: pointer;
}
.wi-gross-zaehler {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 3010;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 700;
}
/* Während die Großansicht offen ist, rollt die Seite dahinter nicht mit. */
body.wi-ohne-rollen { overflow: hidden; }

/* --- Die beiden schwebenden Knöpfe --- */
.wi-schwebe {
  position: fixed;
  right: 16px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-family: inherit;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.wi-schwebe-home {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: #23201d;
  font-size: 1.5rem;
}
/* Das Plus sitzt ÜBER dem Haus - so wie vom Betrieb gewünscht. */
.wi-schwebe-plus {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  background: #2f6b43;
  font-size: 1.8rem;
  font-weight: 300;
}
.wi-schwebe:active { transform: translateY(1px); }

/* --- Fenster zum Hochladen --- */
.wi-schicht {
  position: fixed;
  inset: 0;
  /* ÜBER dem Seitenkopf (2100) und der Menüleiste (2090, beide mit
     "!important" in assets/seitenmenue.css). Vorher stand hier 1500 - das
     Fenster verdunkelte zwar die Seite, aber Kopf und Menü lagen darüber
     und blieben anklickbar. Man konnte sich also mitten aus einem offenen
     Fenster heraus abmelden oder die Oberfläche wechseln; das Fenster
     verschwand dabei kommentarlos samt allem, was man eingetippt hatte.

     Unter 2400 bleiben: Dort liegt die Großansicht eines Bildes
     (.p3-gross in Projekte, .wi-gross in Wissen, .galerie-gross in der
     Fotogalerie). Die gehört weiterhin über das Fenster - sonst ließe
     sich ein Bild aus einem Fenster heraus nicht mehr groß ansehen. */
  z-index: 2200;
  background: rgba(20, 18, 16, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 640px) { .wi-schicht { align-items: center; } }
.wi-fenster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 14px 14px 0 0;
}
@media (min-width: 640px) { .wi-fenster { border-radius: 14px; } }
.wi-fenster h3 { margin: 0; font-size: 1.15rem; }
.wi-feld { display: flex; flex-direction: column; gap: 5px; position: relative; }
.wi-feld > span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b645d;
}
.wi-feld > span small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.wi-feld input[type="text"],
.wi-feld select,
.wi-feld input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 1rem;
  color: #23201d;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 9px;
  background: #fff;
}
.wi-feld input[type="file"] { padding: 11px 12px; min-height: 0; }
.wi-zaehler { align-self: flex-end; font-size: 0.76rem; color: #8d867e; }
.wi-fenster-stand { font-size: 0.9rem; color: #6b645d; min-height: 1.2em; }
.wi-fenster-knoepfe { display: flex; gap: 10px; }
.wi-fenster-knoepfe .btn { flex: 1 1 0; min-height: 48px; }

/* (Die frühere Sonderregel für Wissen-Kategorien ist entfallen - die
   Grundregel oben gilt jetzt überall gleich.) */

/* --- Handy: EINE Kachel über die ganze Breite ---
   Die vier Vorschauen stehen dann nebeneinander in einer Reihe statt im
   Quadrat. Dafür verliert die Vorschaufläche ihr festes Seitenverhältnis:
   Die Höhe ergibt sich aus den vier quadratischen Feldern. */
@media (max-width: 640px) {
  .wi-kacheln {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  /* NUR die Kacheln mit der Vierer-Vorschau verlieren das Quadrat - also
     Kategorien und Galerien. Eine DOKUMENT-Kachel hat statt der vier
     Miniaturen ein einzelnes Vorschaubild; ohne diese Einschränkung wurde
     daraus das ganze PDF-Blatt in voller Höhe (gemessen 356x504 statt
     356x356), und eine Kachel ganz ohne Vorschau fiel auf Höhe 0
     zusammen. Sie bleiben deshalb quadratisch. */
  .wi-kategorie .wi-kachel-bild,
  .wi-dokument .wi-kachel-bild,
  .gal-kategorie .wi-kachel-bild,
  .gal-kachel .wi-kachel-bild,
  .p3-kachel .wi-kachel-bild { aspect-ratio: auto; }
  /* Sicherheitsnetz: Diese Aufzählung wurde schon zweimal vergessen, wenn
     eine neue Kachelart dazukam - zuletzt bei den Projektkacheln, die
     dadurch mit leerer Fläche unter der Vorschaureihe standen. Die Regel
     hier trifft JEDE Kachel mit Vierer-Vorschau, auch künftige. Die
     Aufzählung darüber bleibt als Rückfall für ältere Browser stehen. */
  .wi-kachel-bild:has(.wi-mini) { aspect-ratio: auto; }
  /* Ohne Bildansicht bleibt der Ersatztext ("PDF") - der braucht sein
     Quadrat, sonst stünde er in einem flachen Streifen. */
  .wi-dokument .wi-kachel-bild:not(:has(.wi-mini)) { aspect-ratio: 1 / 1; }
  .wi-mini {
    position: static;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
  }
  .wi-mini-feld { aspect-ratio: 1 / 1; }
}

/* --- Farbe einer Kategorie ---
   In den Einstellungen gewählt, hier wirksam: Die Kachel wird in der Farbe
   umrandet, und die Fläche rings um die vier Vorschaubilder bekommt sie als
   Hintergrund. Ohne gewählte Farbe bleibt alles wie bisher - die Regeln
   greifen nur, wenn die Kachel die Klasse "hat-farbe" trägt. */
.wi-kachel.hat-farbe {
  /* Ein ECHTER Rahmen statt Rand plus Schatten nach innen: Der Schatten
     lag innerhalb der abgerundeten Ecken und wurde vom Inhalt teilweise
     überdeckt - unten wirkte die Umrandung dadurch dünner als an den
     Seiten. Mit "box-sizing: border-box" (siehe .wi-kachel) bleibt die
     Kachel trotz des dickeren Rahmens genauso groß wie die anderen. */
  border-width: 3px;
  border-color: var(--kat-farbe);
}
/* Auch beim Überfahren mit der Maus die Kategoriefarbe behalten - sonst
   spränge sie kurz auf das allgemeine Grün um. */
.wi-kachel.hat-farbe:hover { border-color: var(--kat-farbe); }
/* Die Fläche um die Vorschaubilder bleibt bewusst neutral: Eingefärbt war
   sie zu kräftig und zog den Blick von den Bildern weg. Die Farbe wirkt
   nur noch über die Umrandung. */

/* Herunterladen - nur in der Dokumentansicht sichtbar, über dem Plus. */
.wi-schwebe-laden {
  bottom: calc(208px + env(safe-area-inset-bottom, 0px));
  background: #3f72b5;
  font-size: 1.7rem;
  text-decoration: none;
}
.wi-schwebe-laden[hidden] { display: none; }
/* Drei schwebende Knöpfe übereinander brauchen unten mehr Platz. */
.wi-inhalt.hat-ladenknopf { padding-bottom: 215px; }

/* --- Titel und Kategorie eines Dokuments nachträglich ändern --- */
.wi-dokument-angaben {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.wi-angabe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.wi-angabe > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b645d;
}
.wi-angabe input,
.wi-angabe select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--border, #ddd6cd);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  /* 16px: Darunter zoomt das iPhone beim Antippen in die Seite hinein. */
  font-size: 16px;
  color: #23201d;
}
.wi-dokument-merker { margin: 8px 0 0; color: #2f6b43; font-weight: 600; }
.wi-dokument-merker.ist-fehler { color: #b5342c; }
.wi-dokument-merker[hidden] { display: none; }

/* --- Galerie- und Dokumentkacheln deutlich umrahmt ---
   Der helle 1-px-Rand ging auf dem Handy im hellen Untergrund unter. Diese
   beiden Kachelarten tragen keine Kategoriefarbe (die gibt es nur auf
   Kategoriekacheln), bekommen also einen festen dunklen Rahmen.
   Gleichmäßig rundum, und dank "box-sizing: border-box" (siehe .wi-kachel)
   bleibt die Kachel dabei genauso groß. */
.wi-kachel.gal-kachel,
.wi-kachel.wi-dokument {
  border-width: 2px;
  border-color: #23201d;
}
.wi-kachel.gal-kachel:hover,
.wi-kachel.wi-dokument:hover { border-color: #23201d; }

/* --- Kacheltitel mit drei Zeilen: Kunde, Straße, Etage ---
 *
 * EINE Stelle für Fotogalerie UND Projekte. Vorher stand dieselbe
 * Gestaltung zweimal da, einmal je Bereich - und sah dadurch schon
 * leicht unterschiedlich aus. Beide Seiten laden diese Datei.
 */
.kachel-dreizeiler {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  white-space: normal;
  line-height: 1.2;
  /* Seitlich nur ein schmaler Rand: Die Angaben sollen die Breite der
     Kachel ausnutzen, bevor die Schrift kleiner wird. */
  padding: 9px 4px 7px;
  /* Feste Höhe für drei Zeilen: Fehlt die Straße oder die Etage, bleiben
     die Vorschaubilder trotzdem auf einer Linie. */
  min-height: 4.1em;
}
.kachel-kunde, .kachel-strasse, .kachel-etage {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kachel-kunde { font-weight: 700; color: #23201d; font-size: 0.95rem; }
.kachel-strasse { font-weight: 600; color: #3f3a35; font-size: 0.85rem; }
.kachel-etage { font-weight: 400; color: #6b645d; font-size: 0.78rem; }
.kachel-strasse:empty, .kachel-etage:empty { display: none; }
@supports (font-size: 1cqw) {
  /* Obergrenzen; das Verkleinern bei langen Angaben übernimmt
     assets/kachelschrift.js - gemessen statt über die Zeichenzahl. */
  .kachel-kunde { font-size: min(9.5cqw, 1.15rem); }
  .kachel-strasse { font-size: min(8cqw, 1rem); }
  .kachel-etage { font-size: min(7cqw, 0.9rem); }
}

/* Suche - schwebend, über dem Plus. Der Herunterladen-Knopf sitzt noch
   darüber und erscheint nur im geöffneten Dokument. */
.wi-schwebe-suche {
  bottom: calc(144px + env(safe-area-inset-bottom, 0px));
  background: #3f72b5;
}
.wi-schwebe-suche svg { display: block; }
.wi-schwebe-suche[hidden] { display: none; }

/* --- Suchfenster (assets/suche.js) ---
   Eine Gestaltung für alle drei Bereiche. */
.suche-treffer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 54vh;
  overflow-y: auto;
  margin-top: 10px;
}
.suche-anzahl { margin: 0 0 2px; }
.suche-treffer-zeile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  width: 100%;
  /* Mindestens 44 Pixel hoch - mit Handschuhen auf der Baustelle. */
  min-height: 44px;
  padding: 10px 13px;
  box-sizing: border-box;
  border: 1px solid var(--border, #ddd6cd);
  /* Ein farbiger Streifen links zeigt die Zugehörigkeit (z. B. den
     Auftraggeber), ohne die ganze Zeile einzufärben. */
  border-left: 5px solid var(--treffer-farbe, #ddd6cd);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
.suche-treffer-zeile:hover { border-color: #9ec9a8; }
.suche-haupt { font-weight: 700; color: #23201d; font-size: 1rem; }
.suche-neben { font-size: 0.92rem; color: #5c554e; }
.suche-zusatz { font-size: 0.84rem; color: #857d74; }
.suche-feld { font-size: 16px; }

/* Standmeldung im Hochladefenster.
   Eine Fehlermeldung muss sich vom laufenden Fortschritt unterscheiden -
   sonst liest man "ist zu groß" als "wird gerade gemacht". */
.wi-fenster-stand { margin-top: 8px; line-height: 1.45; }
.wi-fenster-stand.wi-stand-fehler {
  color: #8f251e;
  background: #fdeceb;
  border: 1px solid #e6b3ae;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 600;
}