/* ============================================================================
   seiten-zugaenge.css — Anordnung der Seite `laden-zugaenge.html`
   Brandpool 2.1 · angelegt 12.08.2026
   ----------------------------------------------------------------------------
   Nur Gerüst, keine Bauteile. Jedes sichtbare Teil dieser Seite — Tabelle,
   Karte, Knopf, Badge, Fenster, Hinweiskasten, Leerzustand — kommt aus
   `ui-wise.css`. Hier steht ausschließlich, WO es steht.

   Der Aufbau ist Zeile für Zeile der von `laden-standorte.html` (Abschnitt
   „STANDORTE" in `seiten.css`, Vorsatz `st-`). Er wird hier NICHT
   wiederverwendet, sondern unter eigenem Vorsatz `zg-` wiederholt: die
   `st-`-Regeln gehören zur Standorte-Ansicht, und zwei Seiten, die sich
   dieselbe Anordnung teilen, ändern sich erfahrungsgemäß nicht gemeinsam.
   Werte kommen ausnahmslos aus den Variablen von `ui-wise.css`.
   ============================================================================ */

/* --- Seitenkopf: Titel und Lede links, Handlungsknopf rechts --------------- */
.zg-kopf{ display:flex; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4) }
.zg-kopf > div{ flex:1; min-width:240px }
.zg-titel{ font-size:var(--fs-h1); letter-spacing:-.025em; font-weight:800; margin:0 }
.zg-lede{ color:var(--muted); font-size:var(--fs-text); margin:6px 0 0; max-width:620px }

/* --- Fenster: Kopfzeile, Rumpf, Knopfzeile -------------------------------- */
.zg-fkopf{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4) }
.zg-fkopf b{ font-size:var(--fs-h2); letter-spacing:-.02em; flex:1 }
.zg-frumpf{ min-width:0 }
/* Ein einzelnes Feld im Fenster steht über die volle Breite — sonst hängt es
   in der Mitte und sieht aus, als fehlte etwas daneben. */
.zg-frumpf .sp-input{ width:100% }
.zg-knopfzeile{ display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end; margin-top:var(--sp-4) }

/* Die Rückfrage ist ein Satz und zwei Knöpfe — sie braucht nicht die volle
   Fensterbreite. Dieselbe Verengung wie in der abgenommenen Attrappe. */
.zg-schmal{ max-width:440px }
.zg-text{ font-size:var(--fs-text); color:var(--text-weich); margin-bottom:var(--sp-3) }
.zg-text b{ color:var(--text) }

/* --- Kleinigkeiten in der Liste ------------------------------------------- */
.zg-mail{ overflow-wrap:anywhere }
.zg-mikro{ font-size:var(--fs-mikro); color:var(--muted); max-width:420px }

/* --- Telefon --------------------------------------------------------------
   [15.09.2026, beim Bau von `marke-zugaenge.html` gemessen] Auf 375 Pixeln
   stand die E-Mail-Adresse Buchstabe für Buchstabe untereinander (das ist
   `overflow-wrap:anywhere` oben, in einer Spalte, die nur noch 70 Pixel breit
   war), und der Knopf „Entziehen" lag hinter dem rechten Rand — anfassen konnte
   man ihn nicht.

   Das betrifft BEIDE Zugangsseiten: `laden-zugaenge.html` hat dieselbe Tabelle
   und dasselbe Verhalten, seit es sie gibt (12.08.2026). Deshalb steht die
   Regel hier und nicht in einer der beiden Dateien.

   Verzichtet wird auf „Zugang seit". Von den vier Spalten ist das Datum die
   einzige, die nichts entscheidet — wer wen entzieht, hängt an Adresse und
   Status. Ein waagerechter Rollbalken wäre die Alternative gewesen; er
   versteckt den Knopf nur anders. */
@media (max-width:640px){
  .zg-liste .sp-tab th:nth-child(2),
  .zg-liste .sp-tab td:nth-child(2){ display:none }
  .zg-liste .sp-tab th,
  .zg-liste .sp-tab td{ padding-left:6px; padding-right:6px }
  .zg-liste .sp-tab th:first-child,
  .zg-liste .sp-tab td:first-child{ padding-left:0 }
  /* Der Knopf schmaler, aber NICHT flacher — angetippt wird er mit dem Daumen.
     Ohne das ragte die Tabelle 31 Pixel über die Kartenkante hinaus; sichtbar
     blieb sie nur, weil `handysicht.css` den Überlauf der Seite abschneidet. */
  .zg-liste .sp-tab .sp-btn--klein{ padding-left:10px; padding-right:10px }
  /* Status und Knopf bekommen genau ihre Breite (`width:1%` heißt in einer
     Tabelle „so schmal wie der Inhalt"), die Adresse fordert den Rest an. */
  .zg-liste .sp-tab th:nth-child(3),
  .zg-liste .sp-tab td:nth-child(3),
  .zg-liste .sp-tab th:last-child,
  .zg-liste .sp-tab td:last-child{ width:1% }
  .zg-liste .sp-tab th:last-child,
  .zg-liste .sp-tab td:last-child{ white-space:nowrap }
  .zg-liste .sp-tab th:first-child,
  .zg-liste .sp-tab td:first-child{ width:99% }

  /* Warum die Breitenangaben oben überhaupt greifen können: die MINDESTBREITE
     einer Spalte schlägt jede Breitenangabe, und sie ist so breit wie das
     längste Wort, das nicht umbrechen darf (`.sp-badge` steht in `ui-wise.css`
     auf `white-space:nowrap`). Genau daran ist der erste Versuch gescheitert —
     das Abzeichen „Anmeldeadresse" stand in der Status-Spalte und zwang sie auf
     141 Pixel, während der Adresse 65 blieben. Es steht jetzt bei der Adresse
     (siehe `marke-zugaenge.html`); in der Status-Spalte stehen nur noch „aktiv"
     und „entzogen", und die sind kurz. Wer dort ein längeres Wort einbaut,
     bekommt dasselbe Verhalten zurück. */
}

/* --- Fußnote unter der Liste ---------------------------------------------- */

/* Wird gebraucht, solange die Zugangstabelle in der Datenbank fehlt: dann hat
   die Fußnote nichts, worauf sie sich beziehen könnte. Eine Klasse statt eines
   Inline-Stils, damit in der HTML-Datei kein Aussehen steht. */
.zg-versteckt{ display:none }