/* ==========================================================================
 gast.css — Section-Layout-SSOT fuer Gast-UI (externe B2B-Seiten)

 Konsumenten:
 web/js/sections/gast/gst-home.js (.gast-home Landingpage)
 web/js/sections/gast/gst-stammdaten.js (.gast-stamm Firma + Kontakte)
 web/js/sections/gast/gst-vertraege.js (.gast-vertr Vertragsliste)
 web/js/sections/gast/gst-mein-bereich.js (Mein-Bereich-Variante fuer Gaeste)

 Klassen-Praefixe:
 .gast-home — Landingpage mit Modul-Kacheln
 .gast-stamm — Firma + Kontakte zweispaltig
 .gast-vertr — Vertragsliste + PDF-Aktionen
 .gast-chip — Interessen-Chips (Toggle)

 Aus web/styles/gast.css verschoben in die
 Mirror-Topologie web/styles/sections/gast/.
 ========================================================================== */

/* ── Home: Landingpage ─────────────────────────────────────── */

.gast-home {
  /* Home bekommt einen inneren max-width-Content fuer bessere Lesbarkeit der Kacheln,
   * aber das Padding-Pattern entspricht Mein Tag. */
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.gast-home-banner {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  /* Warn-Farben analog zu .badge-warn / .na-warn in base.css */
  border: 1px solid var(--color-warn-border);
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
  font-size: var(--fs-body);
}
.gast-home-banner--warn { /* Variant-Marker, selbe Werte wie Basis */ }

.gast-home-hd { text-align: center; margin-bottom: var(--space-7); }
.gast-home-title {
  margin: 0 0 var(--space-2); font-size: var(--font-size-xxl); font-weight: var(--fw-semibold);
  color: var(--color-text); line-height: 1.2;
}
.gast-home-subtitle { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-md); }

.gast-home-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.gast-tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: var(--space-2);
  min-height: 170px;
  padding: var(--space-5);
  background: var(--surface-bg);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft), transform var(--duration-quick) var(--ease-soft);
  position: relative;
  font-family: inherit;
}
.gast-tile:not([disabled]):hover {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.gast-tile:not([disabled]):focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.gast-tile-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
}
.gast-tile-label { font-size: var(--fs-section); font-weight: var(--fw-semibold); color: var(--color-text); }
.gast-tile-desc { font-size: var(--fs-body); color: var(--color-text-secondary); }

.gast-tile--locked, .gast-tile--planned {
  cursor: not-allowed;
  background: var(--color-bg-muted);
}
.gast-tile--locked .gast-tile-ico,
.gast-tile--planned .gast-tile-ico {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-muted);
  filter: grayscale(1);
}
.gast-tile--locked .gast-tile-label,
.gast-tile--planned .gast-tile-label { color: var(--color-text-tertiary); }
.gast-tile--locked .gast-tile-desc,
.gast-tile--planned .gast-tile-desc { color: var(--color-text-muted); }

.gast-tile-badge {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-size: var(--fs-badge); font-weight: var(--fw-medium);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-circular);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.gast-tile-badge--locked { background: var(--red-100); color: var(--red-900); }

.gast-home-foot {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

/* ── Stammdaten: Firma + Kontakte ──────────────────────────── */

.gast-stamm {
  /* Kompaktes Padding damit die Seite ohne Scroll auf Standardbildschirmen passt.
   * Horizontal etwas mehr (24px) fuer Atmung an den Raendern, vertikal eng (12/16px). */
  padding: var(--space-3) var(--space-5);
  box-sizing: border-box;
}

/* Stammdaten-Inputs: einheitlicher reinweisser Hintergrund + feste Hoehe.
 *
 * Hintergrund-Override: .zeit-input erbt global var(--color-bg) = #f5f5f5
 * (hellgrau). In Stammdaten wirkte das in Kombination mit Browser-Autofill
 * (Telefon/E-Mail-Felder) inkonsistent — manche Felder wurden vom Browser
 * mit minimal anderem Grau ueberschrieben, andere blieben im Default-Grau.
 * Wir forcen auf reines Weiss (var(--color-surface) = #ffffff), damit alle
 * Felder visuell identisch sind und der autofill-Effekt unsichtbar wird.
 *
 * Hoehen-Override: 38px Mindesthoehe + 1.4 line-height verhindern, dass
 * autofilled Felder durch Browser-Schrift-Renderung minimal anders hoch
 * wirken als andere.
 *
 * Autofill-Inset: box-shadow inset mit 1000px voll-weiss neutralisiert die
 * native Chrome/Edge-Autofill-Faerbung; die 9999s-Transition haelt diesen
 * Zustand auch nach einem Field-Change aktiv. */
.gast-stamm input.zeit-input,
.gast-stamm select.zeit-select {
  background: var(--color-surface) !important;
  min-height: 38px;
  line-height: 1.4;
  box-sizing: border-box;
}
.gast-stamm input.zeit-input:-webkit-autofill,
.gast-stamm input.zeit-input:-webkit-autofill:hover,
.gast-stamm input.zeit-input:-webkit-autofill:focus,
.gast-stamm input.zeit-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
  /* 9999s ist KEIN Motion-Token-Kandidat, sondern der bekannte Autofill-Hack:
     die gelbe Chrome-Autofill-Hintergrundfarbe wird praktisch nie eingeblendet. */
  transition: background-color 9999s var(--ease-inout-soft) 0s;
}
/* Page-Header: Firma-Avatar (quadratisch, leicht abgerundet) links, Titel+Subtitle rechts. */
.gast-stamm-hd {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.gast-stamm-hd-text { flex: 1; min-width: 0; }
.gast-stamm-title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.01em; }
.gast-stamm-subtitle { margin: var(--space-xxs) 0 0; color: var(--color-text-secondary); font-size: var(--fs-caption); }

/* Firma-Header-Avatar: quadratisch, leicht abgerundet, 64px.
 * Gleiche Dimension wie der Kontakt-Avatar (.gast-kont-av--xl), damit links
 * und rechts im Header visuell symmetrisch wirken. Fuer Logos (meist quadratisch
 * oder breit) ist object-fit: contain sinnvoll — wir beschneiden nichts. */
.gast-firma-hd-av {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: var(--fw-semibold);
  background: linear-gradient(135deg, var(--indigo-50) 0%, var(--indigo-100) 100%);
  color: var(--indigo-700);
  overflow: hidden;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--indigo-700) 15%, transparent);
}
/* Bild-Mode: weisser BG (fuer transparente PNGs sichtbar), schmales Padding damit
 * Logos mit eigenem Padding nicht doppelt "Luft" haben. contain erhaelt Aspect-Ratio. */
.gast-firma-hd-av--image {
  background: var(--color-surface);
  padding: var(--space-1-5);
  box-sizing: border-box;
}
.gast-firma-hd-av--image img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* Drei-Spalten-Dashboard:
 *   Spalte 1 — Firma (Kontakt/Adresse/Interessen/SLA) + darunter Marketing-Card
 *   Spalte 2 — Kontaktliste (fix 300px)
 *   Spalte 3 — Kontakt-Detail (flex-grow, 2-spaltige Felder)
 * Auf Notebook (<1400): Firma + Kontakt-Split untereinander (Firma oben full-width)
 * Auf Tablet (<1000):   Alles einspaltig
 */
.gast-stamm-grid {
  display: grid;
  /* Kontaktliste breiter (420px) damit Namen + Subtext (Position, E-Mail)
   * nicht mehr mit Ellipsis abgeschnitten werden. */
  grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
/* Firma-Spalte + Detail-Spalte koennen mehrere Cards uebereinander enthalten.
 * Bewusster grosser Gap (16px), damit zwischen den Cards eine klare visuelle
 * Trennung entsteht und sie nicht als eine zusammenhaengende Card wirken. */
.gast-stamm-col-firma,
.gast-stamm-col-kont-detail {
  display: flex; flex-direction: column; gap: var(--space-4);
  /* min-width: 0 ist Pflicht in Grid-Zellen, damit Flex-Kinder die Zellen-Breite
   * nicht ueberschreiben (Default: min-content). Ohne das kann eine breite
   * Card die Grid-Column auf Mobile aus dem Viewport druecken. */
  min-width: 0;
}

/* Meta-Card: Zugangs-Info + Datenschutz-Kurzhinweis unter dem Kontakt-Detail.
 * Ersetzt die reine Datenschutz-Card. Key-Value-Zeilen links, Hint unten.
 * Zweck: rechte Spalte sinnvoll fuellen + Zugangsdaten transparent machen. */
.gast-stamm-meta {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.gast-stamm-meta-hd {
  display: flex; align-items: center; gap: var(--space-1-5);
  margin-bottom: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gast-stamm-meta-hd .ui-ico { opacity: 0.7; }
.gast-stamm-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1-5) var(--space-3);
  font-size: var(--fs-caption);
  align-items: center;
}
.gast-stamm-meta-key { color: var(--color-text-muted); }
.gast-stamm-meta-val { color: var(--color-text); font-weight: var(--fw-medium); }
.gast-stamm-meta-val--warn { color: var(--yellow-900); }

/* Datenschutz-Punkte als kompakte Icon-Liste mit gruenen Haken */
.gast-stamm-meta-points {
  list-style: none;
  margin: var(--space-2-5) 0 0;
  padding: var(--space-2-5) 0 0;
  border-top: 1px solid var(--color-border-light);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.gast-stamm-meta-points li {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}
.gast-stamm-meta-points .ui-ico img {
  /* gruen faerben */
  filter: invert(52%) sepia(76%) saturate(438%) hue-rotate(86deg) brightness(95%);
}
.gast-stamm-meta-contact {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.gast-stamm-meta-contact a { color: var(--brand-default); text-decoration: none; }
.gast-stamm-meta-contact a:hover { text-decoration: underline; }
/* Stammdaten-spezifisches Kontakt-Layout: Liste + Detail teilen sich eine Card-Huelle.
 * Die drei Spalten sind: [Firma-Card] [Kontaktliste-Card] [Detail-Card]. */
.gast-stamm-col-firma    { grid-column: 1; }
.gast-stamm-col-kont-list { grid-column: 2; }
.gast-stamm-col-kont-detail { grid-column: 3; }

.gast-stamm-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* overflow: hidden wurde entfernt, damit das Interessen-Dropdown-Panel
   * (position:absolute) aus der Card rausragen kann ohne abgeschnitten zu werden.
   * Die Card-Kopf-Tönung wird stattdessen via border-radius am gradient gehalten. */
  transition: border-color var(--duration-slow) var(--ease-soft), box-shadow var(--duration-slow) var(--ease-soft);
}
/* Save-Feedback: 1.5s gruener Rand + sanfter Schatten nach erfolgreichem Speichern */
.gast-stamm-card--saved {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-600) 15%, transparent);
}

/* Dirty-Indikator: kleiner blauer Punkt vor dem Card-Titel wenn ungespeicherte
 * Aenderungen vorliegen. Zeigt dem User dass Klicks noch nicht persistiert sind. */
.gast-stamm-card--dirty .gast-stamm-card-title::before,
.gast-stamm-card--dirty .gast-kont-detail-hd-name::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-default);
  margin-right: var(--space-1-5);
  vertical-align: middle;
  animation: gastDirtyPulse var(--duration-pulse) var(--ease-inout-soft) infinite;
}
@keyframes gastDirtyPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
/* Save-Feedback am Button: Text wechselt kurz zu "Gespeichert" mit gruenem BG */
.fk-buchen.gast-saved-flash {
  background: var(--green-600) !important;
  transition: background var(--duration-normal) var(--ease-soft);
}
.fk-buchen.gast-saved-flash:hover { background: var(--green-700) !important; }
/* Card-Header-Gradient bekommt top-radius damit er ohne overflow:hidden sauber aussieht. */
.gast-stamm-card-hd {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(to bottom, var(--color-bg-muted), var(--color-surface));
  min-width: 0;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.gast-stamm-card-hd > .gast-stamm-card-title {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gast-stamm-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  flex-shrink: 0;
  overflow: hidden;
}
.gast-stamm-card-title { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-semibold); flex: 1; letter-spacing: -0.005em; }
.gast-stamm-card-tag {
  padding: 3px var(--space-2-5);
  border-radius: var(--radius-circular);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-border-light);
}

/* Kompakter Icon-Button im Kontakt-Header (nur "+") */
.gast-kont-new-btn {
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  flex-shrink: 0;
}
.gast-kont-new-btn .ui-ico { width: 16px; height: 16px; }

/* Save-Button disabled: dezent statt vollfarbig blau.
 * Affordance bleibt (Button sichtbar, User weiss "hier kann gespeichert werden"),
 * aber keine Handlungs-Aufforderung solange keine Aenderung vorliegt. */
.gast-stamm-card-hd .fk-buchen:disabled,
.gast-kont-detail-hd .fk-buchen:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 1;
}
.gast-stamm-card-hd .fk-buchen:disabled:hover,
.gast-kont-detail-hd .fk-buchen:disabled:hover {
  background: var(--color-bg-subtle);
}
/* Disabled: Icon bleibt dunkel (nicht invertiert), sonst waere weisses Icon
 * auf hellem bg-subtle unsichtbar. !important muss die nachfolgende allgemeine
 * invert-Regel ueberschreiben — sowohl auf dem Wrapper als auch auf dem img,
 * da beide den invert-Filter bekommen (Filter stacken visuell). */
.gast-stamm-card-hd .fk-buchen:disabled .ui-ico,
.gast-kont-detail-hd .fk-buchen:disabled .ui-ico {
  filter: none !important;
}
.gast-stamm-card-hd .fk-buchen:disabled .ui-ico img,
.gast-kont-detail-hd .fk-buchen:disabled .ui-ico img {
  filter: brightness(0) opacity(0.55) !important;
}

/* Defensive: Buttons in Stammdaten-Cards haben weissen Text — Icons muessen
 * immer invertiert sein, auch wenn die on-dark-Klasse von irgendwo abgeschnitten
 * wird. Gilt fuer alle .fk-buchen im Stammdaten-Kontext. */
.gast-stamm-card-hd .fk-buchen .ui-ico img,
.gast-kont-detail-hd .fk-buchen:not(.fk-buchen--cancel) .ui-ico img,
.gast-stamm-card-hd .fk-buchen .ui-ico,
.gast-kont-detail-hd .fk-buchen:not(.fk-buchen--cancel) .ui-ico {
  filter: brightness(0) invert(1);
}
/* Icon-Groesse im Save-Button defensiv — fuer alle sizes einheitlich 16px */
.gast-stamm-card-hd .fk-buchen .ui-ico,
.gast-kont-detail-hd .fk-buchen .ui-ico {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gast-stamm-card-hd .fk-buchen .ui-ico img,
.gast-kont-detail-hd .fk-buchen .ui-ico img {
  width: 16px; height: 16px;
  display: block;
}

.gast-stamm-section {
  padding: var(--space-2-5) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.gast-stamm-section:last-child { border-bottom: none; }
.gast-stamm-section-label {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: 11px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-2);
}
.gast-stamm-section-label .ui-ico {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}
.gast-stamm-hint { color: var(--color-text-muted); font-size: var(--fs-caption); margin-top: var(--space-1); }

/* Felder: 2-spaltig in Kontakt/Adresse, 1-spaltig bei Interessen/Choices */
.gast-stamm-section .bm-field { margin-bottom: var(--space-1-5); }
.gast-stamm-section .bm-field:last-child { margin-bottom: 0; }
.gast-stamm-fields-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1-5) var(--space-2-5);
}
.gast-stamm-fields-2col .bm-field { margin-bottom: 0; }
.gast-stamm-fields-2col .bm-field--full { grid-column: 1 / -1; }

/* 4-spaltig fuer kompakte Adresszeile: PLZ (1) | Ort (2) | Land (1) = 4 Spalten.
 * Strasse + Zusatz bleiben full-width darueber. */
.gast-stamm-fields-4col {
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--space-1-5) var(--space-2-5);
}
.gast-stamm-fields-4col .bm-field { margin-bottom: 0; }
.gast-stamm-fields-4col .bm-field--full { grid-column: 1 / -1; }
/* Stacked-Variante: folgt auf ein anderes Grid und bekommt oben einen kleinen Abstand. */
.gast-stamm-fields-4col--stacked { margin-top: var(--space-1-5); }

/* Toggle-Switch (iOS-Stil): versteckte Checkbox + Track + Thumb.
 * Markup: <label class="gast-switch"><input type="checkbox"><span class="gast-switch-track"></span><span class="gast-switch-text"></span></label>
 */
.gast-switch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer; user-select: none;
}
.gast-switch input { position: absolute; opacity: 0; pointer-events: none; }
.gast-switch-track {
  position: relative;
  width: 36px; height: 20px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circular);
  transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
  flex-shrink: 0;
}
.gast-switch-track::after {
  content: '';
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--duration-snappy) var(--ease-soft);
}
.gast-switch input:checked + .gast-switch-track {
  background: var(--brand-default);
  border-color: var(--brand-default);
}
.gast-switch input:checked + .gast-switch-track::after {
  transform: translateX(16px);
}
.gast-switch input:focus-visible + .gast-switch-track {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.gast-switch input:disabled + .gast-switch-track {
  opacity: 0.5; cursor: not-allowed;
}
.gast-switch-text {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  min-width: 28px;
  /* Font-Weight bleibt konstant auf Medium (auch inaktiv), damit beim Toggle
   * kein Layout-Jitter durch geaenderte Text-Breite entsteht. */
  font-weight: var(--fw-medium);
}
.gast-switch input:checked ~ .gast-switch-text { color: var(--color-text); }

.gast-stamm-sla {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.gast-stamm-sla-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-2-5);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  border-radius: var(--radius-circular);
  font-weight: var(--fw-medium); font-size: var(--fs-body);
}
.gast-stamm-sla-hint { color: var(--color-text-muted); font-size: var(--fs-caption); flex: 1; min-width: 200px; }

/* Interessen-Picker (Edit-Mode): rendert via LoD.MultiSelect (SSOT-Chip-Picker,
 * Trigger = button.app-ms-trigger). Der Trigger ist global nur in .app-scope
 * gestyled (drawer-fields.css) — Stammdaten lebt ausserhalb davon, deshalb
 * hier ein expliziter Trigger-Stil im selben Look wie die anderen
 * .zeit-input-Felder der Section (border + flat radius oben + bottom-2px-Border).
 * Ohne diese Regeln faellt der Button auf den nativen UA-Look zurueck.
 * Das Popover-Panel (.app-ms-panel) ist ungescoped und braucht kein Override. */
.gast-stamm-interessen-host .app-ms-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 38px;
  line-height: 1.4;
  box-sizing: border-box;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  /* Reinweiss wie .zeit-input in der Section — kein --color-bg-Grau. */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.gast-stamm-interessen-host .app-ms-trigger:hover {
  border-color: var(--color-border-strong);
}
.gast-stamm-interessen-host .app-ms-trigger:focus,
.gast-stamm-interessen-host .app-ms-trigger:focus-visible,
.gast-stamm-interessen-host .app-ms-trigger[aria-expanded="true"] {
  outline: none;
  border-bottom-color: var(--brand-default);
  box-shadow: 0 1px 0 var(--brand-default);
}
/* Wert/Placeholder fuellt verfuegbare Breite, Ellipsis statt Umbruch */
.gast-stamm-interessen-host .app-ms-value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gast-stamm-interessen-host .app-ms-placeholder { color: var(--color-text-muted); }
.gast-stamm-interessen-host .app-ms-count {
  flex-shrink: 0;
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-circular);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.gast-stamm-interessen-host .app-ms-chev {
  margin-left: auto;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity var(--duration-quick) var(--ease-soft);
}
.gast-stamm-interessen-host .app-ms-trigger:hover .app-ms-chev { opacity: 0.8; }
/* Read-Only Pills */
.gast-interessen-readonly {
  display: flex; flex-wrap: wrap; gap: var(--space-1-5);
}
.gast-interessen-pill {
  padding: 3px var(--space-2-5);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  border-radius: var(--radius-circular);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  max-width: 100%;
  word-break: break-word;
}
.gast-stamm-readonly-empty {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-style: italic;
}

/* Kontaktliste: Suchfeld oben (erscheint ab 5+ Kontakten) */
.gast-kont-search {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}
.gast-kont-search-input {
  width: 100%;
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--fs-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.gast-kont-search-input:focus {
  outline: none;
  border-color: var(--brand-default);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.gast-kont-search-input::placeholder {
  color: var(--color-text-muted);
}

/* Kontakte-Liste als eigenstaendige Card (Spalte 2 im 3-Spalten-Layout) */
.gast-kont-split-list {
  max-height: 640px; overflow-y: auto;
}
.gast-kont-list { list-style: none; margin: 0; padding: var(--space-2); }
.gast-kont-item {
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft), transform var(--duration-quick) var(--ease-soft);
  margin-bottom: var(--space-xxs);
  position: relative;
}
/* Prominenterer Hover: background + dezenter Brand-Shadow-Ring + leichter Lift.
 * Macht die Klickbarkeit eindeutig erkennbar und hebt die Zeile visuell heraus. */
.gast-kont-item:hover:not(.gast-kont-item--active) {
  background: var(--color-bg-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 3px 0 0 color-mix(in srgb, var(--brand-default) 35%, transparent);
}
.gast-kont-item--active {
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--brand-default);
}
.gast-kont-item--active .gast-kont-name { color: var(--brand-default); }
.gast-kont-av {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  background: var(--indigo-50); color: var(--indigo-700);
  overflow: hidden;
}
/* Wenn der Avatar ein Bild enthaelt: kein Hintergrund, Bild fuellt den Kreis. */
.gast-kont-av--image { background: transparent; padding: 0; }
.gast-kont-av--image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Upload-Wrap: klickbarer Container um den Avatar mit Hover-Overlay.
 * Cursor pointer macht klar dass das Element interaktiv ist. */
.gast-av-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  outline: none;
}
.gast-av-wrap:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 35%, transparent);
}
/* Page-Header-Avatar-Wrap: abgerundet wie der Avatar selbst (.radius-lg) */
.gast-av-wrap--firma-hd {
  border-radius: var(--radius-lg);
}
.gast-av-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--duration-snappy) var(--ease-soft);
  pointer-events: none;
}
.gast-av-overlay--firma-hd { border-radius: var(--radius-lg); }
.gast-av-wrap:hover .gast-av-overlay,
.gast-av-wrap:focus-visible .gast-av-overlay {
  opacity: 1;
}
.gast-av-overlay .ui-ico img { filter: brightness(0) invert(1); }
.gast-av-input { display: none; }

/* Remove-Button oben rechts am Avatar — nur bei Hover sichtbar.
 * Verhindert versehentliches Loeschen, gleichzeitig aber gut erreichbar.
 * Position: absolute in den rechten oberen Rand des Avatars. */
.gast-av-remove {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  padding: 0;
  border: 1.5px solid var(--color-surface);
  background: var(--status-danger-fg);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.gast-av-wrap:hover .gast-av-remove,
.gast-av-wrap:focus-visible .gast-av-remove,
.gast-av-remove:hover,
.gast-av-remove:focus-visible {
  display: inline-flex;
}
.gast-av-remove:hover { background: var(--red-800); }
.gast-av-wrap--loading .gast-av-remove { display: none !important; }

/* Upload-Spinner: ueberblendet den Avatar waehrend des Uploads.
 * Der Avatar darunter bleibt sichtbar (leicht gedimmt), der Spinner dreht
 * in der Brand-Farbe. Nach dem Upload wird die Section neu gerendert,
 * der Spinner verschwindet automatisch mit dem Wrap. */
.gast-av-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  pointer-events: none;
}
.gast-av-spinner::before {
  content: '';
  width: 24px; height: 24px;
  border: 2.5px solid color-mix(in srgb, var(--brand-default) 20%, transparent);
  border-top-color: var(--brand-default);
  border-radius: 50%;
  animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
}
.gast-av-wrap--loading .gast-av-spinner { display: flex; }
.gast-av-wrap--loading { cursor: wait; }
.gast-av-wrap--loading .gast-av-overlay { opacity: 0 !important; }
.gast-kont-av--lg { width: 44px; height: 44px; font-size: 15px; }
.gast-kont-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gast-kont-name { font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-body); }
.gast-kont-sub { font-size: var(--fs-caption); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--space-px); }
.gast-kont-you {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  color: var(--brand-default);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  padding: var(--space-xxs) var(--space-1-5);
  border-radius: var(--radius-circular);
  margin-left: var(--space-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gast-kont-item-badge {
  flex-shrink: 0;
  font-size: var(--fs-badge);
  padding: var(--space-xxs) var(--space-1-5);
  border-radius: var(--radius-circular);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: var(--space-1-5);
}

/* Wrap ohne eigenes Padding — Header und Sections bringen ihr Padding selbst mit.
 * Placeholder (leere Auswahl) bekommt Padding ueber .gast-kont-placeholder. */
.gast-kont-detail-wrap { padding: 0; }
.gast-kont-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  min-height: 340px;
  width: 100%;
}
.gast-kont-placeholder-ico { opacity: 0.55; }
.gast-kont-placeholder-text {
  font-size: var(--fs-section); font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.gast-kont-placeholder-hint { font-size: var(--fs-body); color: var(--color-text-muted); }
/* Profil-Header: grosser Avatar, Name prominent, Mail als Subtext.
 * Der Kontakt ist hier der Hauptakteur der Card — die Dimensionen
 * entsprechen dem. Avatar 64px, Name im xl-Schritt, satter Kontrast. */
.gast-kont-detail-hd {
  display: flex; align-items: center; gap: var(--space-3-5, 14px);
  padding: var(--space-4-5, 18px) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: linear-gradient(to bottom, var(--color-bg-muted), var(--color-surface));
}
.gast-kont-detail-hd-text { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.gast-kont-detail-hd-name {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gast-kont-detail-hd-sub {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gast-kont-detail-hd-actions {
  display: flex; gap: var(--space-1-5); flex-wrap: nowrap;
  align-self: center;
}
.gast-kont-detail-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-1-5) var(--space-2-5);
}
.gast-kont-detail-body .bm-field { margin-bottom: 0; }
.gast-kont-detail-body .bm-field--full { grid-column: 1 / -1; }

/* Avatar gross fuer Detail-Header (deutlich praesenter als Liste-Avatare) */
.gast-kont-av--xl {
  width: 64px; height: 64px;
  font-size: 22px;
  background: linear-gradient(135deg, var(--indigo-50) 0%, var(--indigo-100) 100%);
  color: var(--indigo-700);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--indigo-700) 15%, transparent);
}

.gast-stamm-empty {
  padding: var(--space-5) var(--space-4); text-align: center;
  color: var(--color-text-muted); font-size: var(--fs-body);
}

/* Marketing-Card: eigene Karte unter Firma. Der Card-Header bekommt einen
 * dezenten Brand-Akzent (linke Rand-Linie in Brand-Blau), damit sie sich
 * vom Rest absetzt ohne aufdringlich getoent zu sein. */
.gast-stamm-card.gast-mk-card .gast-stamm-card-hd {
  box-shadow: inset 3px 0 0 var(--brand-default);
}
.gast-stamm-card.gast-mk-card .gast-stamm-card-ico {
  background: color-mix(in srgb, var(--brand-default) 12%, transparent);
}

.gast-mk-intro {
  padding: var(--space-2-5) var(--space-4) 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.gast-mk-q {
  padding: var(--space-2-5) var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
.gast-mk-q:first-of-type { border-top: none; }
.gast-mk-q-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-xxs);
}
.gast-mk-q-hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1-5);
  line-height: 1.4;
}
.gast-mk-pills {
  display: flex; flex-wrap: wrap; gap: var(--space-1-5);
}
/* Dezenter Hint unter den Pills wenn noch keine Antwort gewaehlt wurde.
 * Ziel: einladend wirken, nicht wie ein fehlendes Pflichtfeld. */
.gast-mk-open-hint {
  margin-top: var(--space-1-5);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  font-style: italic;
}
.gast-mk-open {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  font-style: italic;
}
.gast-mk-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circular);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-soft);
  font-family: inherit;
  line-height: 1.3;
}
.gast-mk-pill:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.gast-mk-pill--active {
  border-color: var(--brand-default);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  font-weight: var(--fw-medium);
}
.gast-mk-pill--active-yes {
  border-color: var(--green-600);
  background: color-mix(in srgb, var(--green-600) 8%, transparent);
  color: var(--green-700);
  font-weight: var(--fw-medium);
}
.gast-mk-pill--active-no {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}
.gast-mk-pill[disabled] { cursor: not-allowed; opacity: 0.6; }

/* Audit-Log: Historie der Marketing-Freigaben. Als <details> ausklappbar.
 * Dezent, keine Dominanz — der User soll wissen "es gibt einen Nachweis",
 * nicht "hier ist ein juristisches Dokument". */
.gast-audit {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-2-5) var(--space-4);
}
.gast-audit-summary {
  display: flex; align-items: center; gap: var(--space-1-5);
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  list-style: none;
  user-select: none;
  padding: var(--space-1) 0;
}
.gast-audit-summary::-webkit-details-marker { display: none; }
.gast-audit-summary::after {
  content: '\u25be';
  margin-left: auto;
  font-size: 10px;
  transition: transform var(--duration-quick) var(--ease-soft);
}
.gast-audit[open] .gast-audit-summary::after { transform: rotate(180deg); }
.gast-audit-summary:hover { color: var(--color-text); }
.gast-audit-count {
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

.gast-audit-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 280px;
  overflow-y: auto;
}
.gast-audit-item {
  padding: var(--space-2) var(--space-2-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-default);
  font-size: var(--fs-caption);
}
.gast-audit-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-xxs);
}
.gast-audit-feld {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.gast-audit-datum {
  color: var(--color-text-muted);
  font-size: var(--fs-badge);
}
.gast-audit-change {
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.gast-audit-vor { color: var(--color-text-muted); }
.gast-audit-arrow { color: var(--color-text-muted); font-weight: var(--fw-semibold); margin: 0 var(--space-xxs); }
.gast-audit-nach { color: var(--color-text); font-weight: var(--fw-medium); }
.gast-audit-wer {
  color: var(--color-text-muted);
  font-size: var(--fs-badge);
  font-style: italic;
  margin-top: var(--space-xxs);
}
.gast-audit-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Newsletter laeuft via .gast-kont-inline-toggle (siehe unten). */

/* Inline-Pill-Gruppe fuer Bevorzugter-Kanal & kleine Choices im Detail.
 * Segmented-Control-Style statt Dropdown — visueller weniger "aufdringlich"
 * und man sieht alle Optionen ohne Klick. */
.gast-kont-kanal-row { margin-top: var(--space-2); }
.gast-kont-segments {
  display: inline-flex; flex-wrap: wrap; gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  /* Im Flex-Column-Parent (.bm-field) bekaeme das Element align-self:stretch.
   * Wir wollen es nur so breit wie der Inhalt. */
  align-self: flex-start;
  max-width: 100%;
}
.gast-kont-segment {
  /* 36px Touch-Target-Hoehe (barrierefreies Minimum) */
  min-height: 32px;
  padding: var(--space-1-5) var(--space-3);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - var(--radius-xs));
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-soft);
  font-family: inherit;
  line-height: 1.3;
  display: inline-flex; align-items: center; gap: var(--space-1-5);
}
/* Icon im Segment: kleiner als Text, folgt der Textfarbe (ausser Teams-Logo,
 * das ist Multicolor und soll seine Original-Markenfarbe behalten). */
.gast-kont-segment .ui-ico { width: 14px; height: 14px; }
.gast-kont-segment .ui-ico img { width: 14px; height: 14px; display: block; }
.gast-kont-segment:hover { color: var(--color-text); }
.gast-kont-segment--active {
  background: var(--color-surface);
  color: var(--brand-default);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.gast-kont-segment[disabled] { cursor: not-allowed; opacity: 0.5; }

/* Newsletter als Inline-Row im Detail (kein Section-Label, kein Toggle-Block) */
.gast-kont-inline-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-2);
}
.gast-kont-inline-toggle-text { flex: 1; min-width: 0; }
.gast-kont-inline-toggle-title {
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text);
}
.gast-kont-inline-toggle-hint {
  font-size: var(--fs-caption); color: var(--color-text-muted); margin-top: var(--space-xxs);
}

/* ── GuestBoard SSOT ─────────────────────────────────────────────
 * Paket einheitliches Shell-CSS fuer Gast-Sektionen
 * Anfragen, Wissen und (zukuenftig) Vertraege. Die Sections nutzen das
 * GuestBoard-Modul (web/js/components/lists/guest-board.js), das ein Markup
 * mit den Klassen .gast-board, .gast-board-hd, .gast-board-toolbar,
 * .gast-board-list rendert.
 *
 * Layout-Modi:
 * .gast-board-list--list → Karten in voller Breite (Anfragen/Vertraege)
 * .gast-board-list--grid → Card-Grid auto-fill 280-360px (Wissen)
 *
 * Backwards-Compat-Aliase fuer .gast-anfr / .gast-wiss / .gast-vertr stehen
 * darunter (selbe Properties), damit alter Code (Notiz-/Anhang-Klassen im
 * anfrage-drawer Gast-Body) weiter laeuft. */
.gast-board,
.gast-anfr,
.gast-wiss {
  padding: var(--space-3) var(--space-5);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gast-board-hd {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.gast-board-hd-ico {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--indigo-50) 0%, var(--indigo-100) 100%);
  color: var(--indigo-700);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--indigo-700) 15%, transparent);
}
.gast-board-hd-ico .ui-ico img { width: 28px; height: 28px; filter: brightness(0) saturate(100%) invert(20%) sepia(53%) saturate(2034%) hue-rotate(228deg) brightness(95%) contrast(94%); }
.gast-board-hd-text { flex: 1; min-width: 0; }
.gast-board-title { margin: 0; font-size: var(--font-size-xl); font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: -0.01em; }
.gast-board-subtitle { margin: var(--space-xxs) 0 0; color: var(--color-text-secondary); font-size: var(--fs-caption); }

/* GuestBoard-Listen-Container — die GroupedList rendert sich rein, aber
 * der Wrapper steuert das eigene Spacing (Toolbar-zu-Liste-Abstand sorgt
 * der .gast-board-Container ueber gap; innerhalb der Liste regelt
 * .grouped-list bzw. .gl-group-cards das Karten-Spacing). */
.gast-board-list { min-height: 0; }

/* List-Layout: Karten flach untereinander, GroupedList nutzt cardLayout='flex'
 * (.gl-group-cards mit gap var(--space-2) = 8px). Wir bumpen den Gap im
 * GuestBoard-Kontext auf var(--space-3) = 12px, damit das Layout luftiger
 * wirkt — wie der User in der Vertrieb-Liste schon hatte (Pull-Through-CSS). */
.gast-board-list--list .grouped-list,
.gast-board-list--list .gl-group-cards { gap: var(--space-3); }

/* Grid-Layout: GroupedList nutzt .gl-group-cards--grid (display: grid +
 * auto-fill 280-360px). Hier nur sicherstellen, dass die GroupedList als
 * volle Breite rendert (kein zusaetzlicher Container-Constraint). */
.gast-board-list--grid .grouped-list { gap: var(--space-4); }

/* Mobile: Hero kompakter. */
@media (max-width: 599px) {
  .gast-board { padding: var(--space-2-5); }
  .gast-board-hd-ico { width: 48px; height: 48px; }
  .gast-board-title { font-size: var(--font-size-lg); }
}

/* ── Vertraege ─────────────────────────────────────────────── */

.gast-vertr {
  /* Full-width wie Mein Tag — keine max-width-Begrenzung */
  padding: var(--space-4);
  box-sizing: border-box;
}
/* Vertrag-Section nutzt heute die generische .gast-board-*-Hero-Variante.
   .gast-vertr-toolbar entfernt — Module-First nutzt LoD.PageToolbar
   (.app-page-toolbar / .app-toolbar via .app-scope). */

.gast-vertr-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.gast-vertr-item:hover { border-color: var(--brand-default); box-shadow: var(--shadow-md); }

/* Klickbare Card (Paket Gast-SSOT-2 2026-04-30): Card oeffnet den
   Vertrag-Drawer; Cursor + Hover signalisieren das. Tab-Fokus via
   tabindex=0 + role=button → Focus-Ring konsistent zu anderen Cards. */
.gast-vertr-item--clickable { cursor: pointer; }
.gast-vertr-item--clickable:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.gast-vertr-item-chevron {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: opacity var(--duration-quick) var(--ease-soft), transform var(--duration-quick) var(--ease-soft);
}
.gast-vertr-item--clickable:hover .gast-vertr-item-chevron {
  opacity: 1; transform: translateX(2px);
}
.gast-vertr-item-head { display: flex; align-items: flex-start; gap: var(--space-3); flex: 1; min-width: 0; }
.gast-vertr-item-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
  display: inline-flex; align-items: center; justify-content: center;
}
.gast-vertr-item-text { min-width: 0; flex: 1; }
.gast-vertr-item-title {
  margin: 0 0 var(--space-1); font-size: var(--fs-section); font-weight: var(--fw-semibold);
  color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gast-vertr-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.gast-vertr-meta-sep { color: var(--color-text-muted); }
.gast-vertr-chip {
  display: inline-flex; padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-circular);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--fs-badge); font-weight: var(--fw-medium);
}
.gast-vertr-dok { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-caption); color: var(--color-text-tertiary); }
.gast-vertr-dok--missing { color: var(--color-text-muted); font-style: italic; }
.gast-vertr-item-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ── Responsive — 4 Breakpoints (CLAUDE.md Standard) ───────── */

/* Notebook (1000–1399px):
   Firma bekommt eigene Zeile (full-width), darunter Kontakt-Split (Liste | Detail).
   Grund: Bei ~1200px reicht der Platz nicht fuer 3 Spalten nebeneinander ohne dass
   Firma-Felder quetschen. */
@media (min-width: 1000px) and (max-width: 1399px) {
  .gast-home { padding: var(--space-4); }
  .gast-stamm { padding: var(--space-4); }
  .gast-stamm-grid {
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .gast-stamm-col-firma       { grid-column: 1 / -1; grid-row: 1; }
  .gast-stamm-col-kont-list   { grid-column: 1; grid-row: 2; }
  .gast-stamm-col-kont-detail { grid-column: 2; grid-row: 2; }
  .gast-vertr { padding: var(--space-4); }
}

/* Tablet (600–999px): alles einspaltig, Kontaktliste horizontal gescrollt */
@media (min-width: 600px) and (max-width: 999px) {
  .gast-home { padding: var(--space-4); }
  .gast-home-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .gast-home-title { font-size: var(--font-size-xl); }

  .gast-stamm { padding: var(--space-3); }
  .gast-stamm-title { font-size: var(--font-size-lg); }
  .gast-stamm-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .gast-stamm-col-firma       { grid-column: 1; grid-row: 1; }
  .gast-stamm-col-kont-list   { grid-column: 1; grid-row: 2; }
  .gast-stamm-col-kont-detail { grid-column: 1; grid-row: 3; }
  .gast-kont-split-list { max-height: 260px; }
  .gast-kont-detail-body { grid-template-columns: 1fr; }

  .gast-vertr { padding: var(--space-3); }
  .gast-vertr-title { font-size: var(--font-size-lg); }
  .gast-vertr-item { flex-direction: column; align-items: stretch; }
  .gast-vertr-item-actions { width: 100%; }
}

/* Mobile (<600px): Alles einspaltig, kleinere Paddings/Fonts. */
@media (max-width: 599px) {
  .gast-home { padding: var(--space-3); }
  .gast-home-hd { margin-bottom: var(--space-5); }
  .gast-home-tiles { grid-template-columns: 1fr; gap: var(--space-2-5); }
  .gast-tile { min-height: auto; padding: var(--space-3); }
  .gast-home-title { font-size: var(--font-size-lg); }
  .gast-home-subtitle { font-size: var(--fs-body); }
  .gast-home-banner { padding: var(--space-2) var(--space-3); font-size: var(--fs-body); }

  .gast-stamm, .gast-vertr { padding: var(--space-2-5); }
  .gast-stamm-title, .gast-vertr-title { font-size: var(--font-size-lg); }
  .gast-stamm-subtitle, .gast-vertr-subtitle { font-size: var(--fs-body); }
  /* minmax(0, 1fr) statt 1fr — sonst waechst die Spalte auf min-content-Width
   * der Kinder (z.B. langer Button-Text) und sprengt das Grid auf Mobile. */
  .gast-stamm-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2-5); }
  /* Kinder muessen auch explizit auf Spalte 1 gesetzt werden, sonst erweitert
   * das implicit Grid wegen grid-column: 2/3 der Basisregel auf 3 Spalten. */
  .gast-stamm-col-firma       { grid-column: 1; grid-row: 1; }
  .gast-stamm-col-kont-list   { grid-column: 1; grid-row: 2; }
  .gast-stamm-col-kont-detail { grid-column: 1; grid-row: 3; }

  .gast-stamm-card-hd { padding: var(--space-2-5) var(--space-3); }
  .gast-stamm-section { padding: var(--space-2-5) var(--space-3); }
  .gast-stamm-fields-2col { grid-template-columns: 1fr; gap: var(--space-2); }
  /* PLZ/Ort/Land + 4er-Felder bleiben sonst eng nebeneinander auf <600px und
   * Texte brechen unsauber. Auf Mobile lieber ganz stacken. */
  .gast-stamm-fields-4col { grid-template-columns: 1fr; gap: var(--space-2); }

  .gast-kont-split-list { max-height: 220px; }
  .gast-kont-detail-wrap { padding: var(--space-3); }
  .gast-kont-detail-body { grid-template-columns: 1fr; }

  .gast-vertr-item { flex-direction: column; align-items: stretch; padding: var(--space-3); }
  .gast-vertr-item-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .gast-vertr-item-title { white-space: normal; }
}

/* ============================================================
 Gast: Gueltigkeits-Banner (Sticky-Top).
 aus components.css extrahiert.
 ============================================================ */
.gast-expiry-banner {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: center;
  border-bottom: 1px solid transparent;
}
.gast-expiry-banner--warn {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
  border-bottom-color: var(--color-warning-border);
}
.gast-expiry-banner--expired {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border-bottom-color: var(--color-danger-border);
}
@media (max-width: 599px) {
  .gast-expiry-banner { padding: var(--space-2); font-size: var(--fs-caption); }
}
@media (min-width: 600px) and (max-width: 999px) {
  .gast-expiry-banner { padding: var(--space-2) var(--space-3); }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  .gast-expiry-banner { padding: var(--space-2) var(--space-4); }
}

/* .gast-list-item-meta wird in admin-extern-zugaenge.js genutzt.
 aus components.css extrahiert. */
.gast-list-item-meta { color: var(--color-text-muted); font-size: var(--fs-caption); }