/* Objekte-Ansicht - Gestaltung zu public/objekte-ansicht.js.
 *
 * Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
 * var(--...), Schriftgroessen ueber --fs-xs..--fs-2xl, Abstaende in
 * 4/8/12/16/24px. Keine neuen Farben, keine neuen Groessen, keine
 * Abhaengigkeit.
 *
 * Die vier Hebel aus der Design-Referenz, hier angewandt:
 *   1. Tiefe kommt aus der Flaechenabstufung (--surface-1 unter --surface-2),
 *      nicht aus Schlagschatten. In dieser Datei steht KEIN box-shadow ausser
 *      dem Fokusring.
 *   2. Getrennt wird mit Haarlinien in var(--border) - 1px, nie 2px, nie ein
 *      eigenes Grau.
 *   3. Radien 8px an den Karten, 6px innen, Pille nur an den Marken.
 *   4. Gewichte hoechstens 600. Der Kontrast entsteht aus der Abstufung
 *      --text-primary / --text-secondary / --text-muted, nicht aus Fettdruck.
 *
 * Kein eigener Rahmen um die ganze Flaeche: Die Ansicht sitzt in <main> und
 * ist der Inhalt der Seite, kein Kasten darin. Ein Rahmen aussen waere eine
 * Karte in einer Seite.
 *
 * Geladen in index.html nach styles.css und nach karte.css (die Landkarte
 * bringt ihre eigene Gestaltung mit; hier wird nur ihr Platz bestimmt). */

/* Der Behaelter, den der Hauptstrang stellt. Das Modul setzt diese Klasse
   selbst, damit hier ueberhaupt etwas angreifen kann, ohne dass index.html
   die Klasse kennen muss - und damit beim Pruefen im Browser sofort
   sichtbar ist, ob das Modul die Flaeche wirklich uebernommen hat. */
.obj-flaeche {
  min-width: 0;
}

.obj-wurzel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Zeilen, die gerade nichts zu sagen haben, verschwinden ganz - ein leerer
   Absatz haelt sonst seine Zeilenhoehe und reisst ein Loch in den Kopf, das
   aussieht wie ein Ladefehler. */
.obj-leer-zeile {
  display: none;
}

/* ================================================================== Kopf */

.obj-kopf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  /* Die einzige Trennung im Kopf: eine Haarlinie zwischen "wie ist die Lage"
     und "hier sind die Objekte". Kein Kasten, kein Grund, kein Schatten. */
  border-bottom: 1px solid var(--border);
}

.obj-kopfzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.obj-satz {
  min-width: 0;
}

/* Die eine Zahl, die die Frage "wie viele" beantwortet. Gross genug, um sie
   nicht zu suchen; 600 statt 700, damit sie nicht schreit. */
.obj-lage {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Der Beisatz traegt entweder den einen erklaerenden Umstand (stillgelegte
   Objekte) oder - beim Filtern - das Ergebnis. Nie beides, nie mehr. */
.obj-beisatz {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Suchfeld */

/* Das Suchfeld ist bewusst kein Formularfeld mit Beschriftung darueber,
   sondern ein ruhiges Feld in der Kopfzeile: Suchen ist hier kein Vorgang,
   den man ausfuellt, sondern eine Bewegung waehrend des Lesens. */
.obj-suche {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-width: 200px;
  flex: 0 1 320px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color var(--dur-schnell) var(--easing);
}

.obj-suche:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.obj-lupe {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--text-muted);
}

/* input[type=search] faellt nicht unter die Feldregeln in styles.css (dort
   sind text/email/password/date/number aufgezaehlt) - darum steht die
   Gestaltung hier vollstaendig und stoert die globale Regel nicht. */
.obj-suchfeld {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-md);
  padding: 9px 0;
}

.obj-suchfeld:focus {
  outline: none;
}

.obj-suchfeld::placeholder {
  color: var(--text-muted);
}

/* ------------------------------------------------------- Luecken als Filter */

.obj-luecken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Eine Luecke ist eine Zahl, die man anklicken kann. Sie sieht darum aus wie
   eine Marke und nicht wie ein Knopf: keine Flaeche, keine Erhebung, nur die
   Haarlinie. Erst der gewaehlte Zustand fuellt sie - dann ist sie eine
   Aussage ueber die Ansicht, nicht mehr nur ueber den Bestand. */
.obj-luecke {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-schnell) var(--easing),
              background var(--dur-schnell) var(--easing),
              color var(--dur-schnell) var(--easing);
}

.obj-luecke:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Der warnende Ton bleibt ein TON, keine Ampel: nur die Schrift wechselt die
   Farbe, die Flaeche bleibt leer. Ein rotes Abzeichen, das immer da ist,
   wird weggeschaut - und "kein Standort" ist ein Hinweis, kein Alarm. */
.obj-luecke.warn {
  color: var(--warning-ink);
}

.obj-luecke.an {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.obj-luecke:focus-visible,
.obj-zuruecksetzen:focus-visible,
.obj-oeffnen:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Der Weg zurueck ist kein Knopf, sondern ein Wort - er erscheint nur, wenn
   etwas gewaehlt ist, und soll die Marken daneben nicht ueberstimmen. */
.obj-zuruecksetzen {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.obj-zuruecksetzen:hover {
  color: var(--text-primary);
}

/* =============================================================== Buehne
   Die Karten und die Landkarte nebeneinander. Die Landkarte bekommt eine
   feste, eher schmale Spalte: Sie ist die zweite Lesart, nicht der Inhalt -
   waechst sie mit, draengt sie die Namen zusammen, um die es geht. */

.obj-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

/* Ohne Punkte gibt es keine Landkarte, und dann gehoert die Breite den
   Karten. Nicht "leere Spalte stehen lassen" - eine leere Spalte sieht aus
   wie etwas, das nicht geladen hat. */
.obj-wurzel.obj-ohne-plan .obj-buehne {
  grid-template-columns: minmax(0, 1fr);
}

.obj-plan-aus {
  display: none;
}

/* ------------------------------------------------------------ Kartenraster */

.obj-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  align-content: start;
  min-width: 0;
}

/* Leerbild und Skelett spannen ueber die ganze Flaeche, nicht in eine
   Rasterzelle - sonst stuende die Illustration in einer 260px-Spalte links. */
.obj-raster.obj-raster-leer {
  display: block;
}

/* -------------------------------------------------------------- Die Karte */

.obj-karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--dur-schnell) var(--easing),
              background var(--dur-schnell) var(--easing);
}

/* Kein Anheben, kein Schatten, kein Federn beim Zeigen - nur die Linie wird
   deutlicher und der Grund einen Ton heller. Auf einer Flaeche mit zwanzig
   Karten waere jede Bewegung Unruhe. */
.obj-karte:hover {
  border-color: var(--border-strong);
}

.obj-karte:focus-within {
  border-color: var(--accent);
}

/* Die Karte, die von der Landkarte her gewaehlt wurde. Sie wird nicht bunt,
   sie bekommt links eine Kante - so findet der Blick sie beim Zurueckspringen
   wieder, ohne dass die Flaeche gefleckt aussieht. */
.obj-karte.gewaehlt {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Stillgelegt heisst nicht unlesbar. Kein opacity - nachts ist blasse Schrift
   das Gegenteil von hilfreich. Stattdessen bleibt der Grund eine Stufe
   tiefer, die Karte tritt also zurueck, ohne schlechter lesbar zu sein. */
.obj-karte.still {
  background: var(--surface-1);
}

.obj-name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
}

/* Der Name ist der Knopf. Er sieht aus wie Text, weil er der Titel ist -
   dass er klickbar ist, sagt die ganze Karte mit ihrem Zeiger. */
.obj-oeffnen {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  width: 100%;
  overflow-wrap: anywhere;
}

.obj-oeffnen:hover {
  color: var(--accent-fg);
}

.obj-kunde {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.obj-adresse {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Eine fehlende Angabe wird benannt, nicht verschwiegen - aber sie bekommt
   die leiseste Stufe, damit die Flaeche nicht nach Maengelliste aussieht. */
.obj-fehlt {
  font-style: italic;
}

.obj-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.obj-marke {
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  white-space: nowrap;
}

.obj-marke.warn {
  color: var(--warning-ink);
}

.obj-fuss {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* Die Handlung sitzt am Fuss und traegt die vorhandene Knopfgestaltung aus
   styles.css (.btn.sm). Hier wird nur der Platz bestimmt. */
.obj-tat {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ Landkarte */

.obj-plan {
  position: sticky;
  /* Mitlaufen, damit beim Blaettern durch dreissig Karten die Punkte nicht
     nach oben aus dem Bild wandern - sonst waere die zweite Lesart nach dem
     ersten Bildlauf keine mehr. */
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
}

.obj-plan-buehne {
  min-width: 0;
}

.obj-planfuss {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.45;
}

/* In der schmalen Spalte darf die Schweiz nicht in die Hoehe schiessen. Die
   Regel in karte.css deckelt nach Fensterhoehe; hier kommt der Deckel fuer
   die Spaltenbreite dazu. */
.obj-plan .karte-buehne .karte {
  max-height: 320px;
}

/* ============================================================== Schmaler
   Ab hier hat die Landkarte keine eigene Spalte mehr. Sie rutscht UNTER die
   Karten: Wer auf dem Telefon "Objekte" oeffnet, sucht einen Namen, keinen
   Punkt in der Schweiz. Kein Umschalter - der Platz entscheidet. */

@media (max-width: 900px) {
  .obj-buehne {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .obj-plan {
    position: static;
  }

  .obj-plan .karte-buehne .karte {
    max-height: 42vh;
  }
}

@media (max-width: 640px) {
  .obj-wurzel {
    gap: 16px;
  }

  /* Einspaltig - eine zweite Spalte mit 150px breiten Karten waere ein
     Raster, in dem kein Objektname mehr ganz hineinpasst. */
  .obj-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .obj-kopfzeile {
    align-items: stretch;
  }

  /* Das Suchfeld nimmt auf dem Telefon die volle Breite: Es ist dort das
     Hauptwerkzeug, weil das Auge nicht ueber zwanzig Karten fliegen kann. */
  .obj-suche {
    flex: 1 1 100%;
  }

  .obj-lage {
    font-size: var(--fs-xl);
  }
}

/* ====================================================== Bewegung, Kontrast */

@media (prefers-reduced-motion: reduce) {
  .obj-karte,
  .obj-luecke,
  .obj-suche {
    transition: none;
  }
}

/* Bei erhoehtem Kontrast tragen die Haarlinien zu wenig - dann wird aus der
   Abstufung eine sichtbare Kante. */
@media (prefers-contrast: more) {
  .obj-karte,
  .obj-plan,
  .obj-suche,
  .obj-luecke,
  .obj-marke {
    border-color: var(--border-strong);
  }
}