/* ============================================================
   idf-kontakt-kacheln.css - Kacheln für wichtige Adressen
   Aus safeguard/safeguard.css übernommen (vorher .sg-adresse-*), seit
   Arbeitsschutz und Datenschutz denselben Baustein nutzen (Issue 114, 218).
   Karten-Familie wie die kompakten Hub-Karten (blocks/hub-card): 24 px
   Innenabstand, 12 px Radius, 160 px Mindesthöhe. Hover nur Rand und
   leichter Schatten, kein Anheben: die Kachel enthält Auswahlen und
   Inline-Edits, ein Lift würde beim Tippen mitwackeln.
   ============================================================ */

/* Seitenrahmen: der Host steht in <main class="idf-list-page">. Die Leiste mit
   dem Knopf „+ Adresse" ist .idf-list-bar, der Seitenrand des Rasters kommt
   aus .idf-list-inset (beides functions/list-view/grid-css). Hier nur der
   Abstand oben und unten, wie bei den Kachel-Seiten der anderen Module.
   Mindestbreite 360 px: bei 300 px standen über die volle Seitenbreite vier
   Spalten, und dem Titel blieben neben Symbol, Stift und Papierkorb rund
   106 px (gemessen 10.10.2026), jeder Titel brach mitten im Wort um. */
.idf-kontakt-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-10);
}

.idf-kontakt-kacheln-laden {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  color: var(--ink-75);
  font-size: var(--font-base);
}

/* Leer- und Fehlerzustand: .idf-empty-state.is-boxed aus blocks/empty-state. */

.idf-kontakt-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  min-height: 160px;
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  color: var(--ink);
  line-height: var(--leading-base);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.idf-kontakt-kachel:hover {
  border-color: var(--accent);
  /* Schatten-Geometrie 0 2px 8px bewusst ausserhalb der Schatten-Tokens
     (--shadow-card wäre 10px Blur, sichtbar weicher), Audit L5. */
  box-shadow: 0 2px 8px var(--ink-8-a);
}

/* Kopf: Symbol, Rolle als Text, Papierkorb rechts. Der Titel steht in der
   Zeile darunter (.idf-kontakt-kachel-titel-wrap). */
.idf-kontakt-kachel-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Die Rolle im Kopf füllt den Platz zwischen Symbol und Papierkorb; den
   seitlichen Abstand gibt hier die Lücke des Kopfs, nicht die Zelle. */
.idf-kontakt-kachel-kopf .idf-kontakt-kachel-feld {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* Griff zum Sortieren: Optik aus blocks/sortable (.idf-sortable-handle).
   Er liegt im linken Innenabstand der Karte (24 px, so breit wie der Griff)
   statt im Kopf, damit er dort keinen Platz belegt, und erscheint erst
   am Karten-Hover. Mit Touch steht er immer. */
.idf-kontakt-kachel-griff {
  position: absolute;
  left: 0;
  top: calc(var(--space-6) + var(--space-1));
  opacity: 0;
  transition: opacity 120ms ease;
}
.idf-kontakt-kachel:hover .idf-kontakt-kachel-griff,
html[data-input-mode="touch"] .idf-kontakt-kachel-griff {
  opacity: 1;
}

/* Symbol rahmenlos in Schwarz, 28 px wie die Symbole der kompakten
   Hub-Karten. Bewusst ohne Tönung und ohne Blase. */
.idf-kontakt-kachel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: var(--font-xxl);
  flex-shrink: 0;
}

/* Titel-Zeile unter dem Kopf, über die ganze Kachelbreite. Neben Symbol,
   Stift und Papierkorb blieb dem Titel zu wenig Platz: „DATENSCHUTZBEAUFTRAGTER“
   braucht 265 px und brach mitten im Wort um. Eingerückt wie die Felder
   darunter. */
.idf-kontakt-kachel-titel-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-3);
}

/* Gewicht, Versalien und Laufweite kommen aus .idf-headline (idf-tokens.css).
   min-width: 0, weil der Titel ein Flex-Element ist: sonst wäre er mindestens
   so breit wie sein längstes Wort und liefe bei sehr langen Wörtern über den
   Kartenrand. */
.idf-kontakt-kachel-titel {
  min-width: 0;
  font-size: var(--font-lg);
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Papierkorb: .idf-list-delete-btn aus list-grid, voll da wie jede Pille,
   rot unter der Maus. Bis Issue 2021 stand er hier auf Deckkraft 0.4,
   beim Überfahren der Kachel auf 0.75. */
.idf-kontakt-kachel .idf-list-delete-btn {
  margin-left: auto;
}

/* Auswahl füllt die Kachelbreite. */
.idf-kontakt-kachel-combo,
.idf-kontakt-kachel-combo .combobox {
  width: 100%;
}

/* Auswahl als Text mit Inline-Edit: kein Kasten, Hover tönt leicht, der
   Pfeil kommt erst beim Drüberfahren. Geöffnet Akzent-Rand und Fokus-Ring. */
.idf-kontakt-kachel-combo .combobox-trigger {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.idf-kontakt-kachel-combo .combobox-trigger:hover {
  background: var(--ink-4-a);
  border-color: var(--ink-10);
}

.idf-kontakt-kachel-combo .combobox-trigger:focus,
.idf-kontakt-kachel-combo .combobox-trigger:focus-visible {
  outline: none;
  background: var(--white);
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.idf-kontakt-kachel-combo .combobox-arrow {
  opacity: 0;
  transition: opacity 120ms ease;
}

.idf-kontakt-kachel-combo .combobox:hover .combobox-arrow {
  opacity: 0.5;
}

.idf-kontakt-kachel-combo .combobox-placeholder {
  font-style: italic;
  font-weight: var(--weight-normal);
  color: var(--ink-50);
}

/* Der gewählte Name ist der Visitenkarten-Name der Kachel, also fett. */
.idf-kontakt-kachel-combo .combobox-value {
  font-weight: var(--weight-bold);
}

/* Rolle und Notiz sind Zellen aus blocks/form-cell. Die Notiz bekommt hier
   den Abstand zur Kachelkante, damit sie mit den Auswahlen fluchtet; die
   Rolle steht im Kopf (siehe oben). */
.idf-kontakt-kachel-feld {
  padding: 0 var(--space-3);
}

/* Anschrift und Kontakt, live aus dem verknüpften Datensatz. */
.idf-kontakt-kachel-kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  font-size: var(--font-base);
}

.idf-kontakt-kachel-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.idf-kontakt-kachel-zeile i {
  width: 16px;
  margin-top: 3px;
  color: var(--ink-75);
  flex-shrink: 0;
}

.idf-kontakt-kachel-zeile a {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.idf-kontakt-kachel-zeile a:hover {
  text-decoration: underline;
}

@media (max-width: 800px) {
  .idf-kontakt-kacheln {
    grid-template-columns: 1fr;
  }
}