/* =====================================================================================================
   Radici v0.14.0 – UI-Komponenten «Variante 3: Ruhig / Outline» (Entscheid Ale, 09.10.2026)
   Zentrale Komponenten-Schicht, wird NACH radici.css und app.css geladen.
   - Neue Klassen nur mit Praefix «ui-» (Lehre aus der Kollision der sa-card-Klassen, v0.13.0).
   - Bestehende Klassen der Vorlage (btn, btn-new, btn-ghost, chip, seg, sa-tabs, filterbar, subnav ...) werden hier
     auf dieselben Tokens abgebildet, statt neue Sonderfaelle anzulegen. Markup und Formulare bleiben unveraendert.
   - Farben und Schriften der Vorlage (Tokens aus radici.css :root) bleiben, nur Form und Gewichtung aendern sich.
   Hinweis: In Kommentaren keine Klassenmuster mit Stern schreiben (Kommentar-Ende), siehe LEARNINGS 0.11.0.
   ===================================================================================================== */
:root{
  --ui-h:44px;
  --ui-h-sm:36px;
  --ui-h-xs:32px;
  --ui-radius:8px;
  --ui-bw:1.5px;
  --ui-gap:10px;
  --ui-line:var(--sand);
  --ui-line-soft:var(--sand-hell);
}

/* ---------- 1. Buttons ----------
   ui-btn = Grundform (weiss mit Rand). Varianten: ui-btn--pri (Primaer, nur einer pro Bereich: rot umrandet),
   ui-btn--sec (Sekundaer/Outline), ui-btn--dan (Gefahr-Outline), ui-btn--sm (klein).
   Abbildung Vorlage: btn = Grundform, btn-new/btn-rot = Primaer, btn-ghost = Sekundaer,
   btn-danger / btn-ghost.danger / sa-btn-danger = Gefahr-Outline, btn-sm/btn-xs = klein. */
.btn,.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-h);padding:0 18px;border-radius:var(--ui-radius);border:var(--ui-bw) solid var(--ui-line);background:var(--weiss);color:var(--anthrazit);font-family:inherit;font-weight:600;font-size:14px;line-height:1.25;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover,.ui-btn:hover{border-color:var(--anthrazit);text-decoration:none}
.btn:active,.ui-btn:active{transform:translateY(1px)}
.ui-btn svg{width:16px;height:16px;flex:none}

/* Primaer: rot umrandet, beim Darueberfahren rot gefuellt */
.btn-new,.btn-rot,.ui-btn--pri{background:var(--weiss);border-color:var(--rot);color:var(--rot)}
.btn-new:hover,.btn-rot:hover,.ui-btn--pri:hover{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.btn-rot[aria-busy="true"]{background:var(--rot-dunkel);border-color:var(--rot-dunkel);color:var(--weiss)}

/* Sekundaer / Outline */
.btn-ghost,.ui-btn--sec{background:var(--weiss);border-color:var(--ui-line);color:var(--anthrazit);padding:0 16px}
.btn-ghost:hover,.ui-btn--sec:hover{border-color:var(--anthrazit)}
.tbl a.btn{font-weight:600;color:var(--anthrazit)}
/* Sekundaer auf dunklem Grund (laufende Sitzung, Zeitstempel) – transparent statt weiss */
.btn-ghost.inv,.zstamp.on .btn-ghost,.ts-hero.running .btn-ghost{background:transparent;color:var(--offwhite);border-color:rgba(255,255,255,.35)}
.btn-ghost.inv:hover,.zstamp.on .btn-ghost:hover,.ts-hero.running .btn-ghost:hover{border-color:var(--offwhite)}

/* Gefahr-Outline: rot umrandet und klar abgesetzt (Loeschen, Archivieren usw.) */
.btn-danger,.btn-ghost.danger,.tbl a.btn.danger,.sa-btn-danger,.ui-btn--dan{background:var(--weiss);border-color:var(--rot);color:var(--rot)}
.btn-danger:hover,.btn-ghost.danger:hover,.tbl a.btn.danger:hover,.sa-btn-danger:hover,.ui-btn--dan:hover{background:var(--rot-hauch);border-color:var(--rot-dunkel);color:var(--rot-dunkel)}

/* Klein */
.btn-sm,.ui-btn--sm{min-height:var(--ui-h-sm);padding:0 14px;font-size:13px}
.btn-xs{min-height:var(--ui-h-xs);padding:0 12px;font-size:12.5px;font-weight:600;border-radius:var(--ui-radius)}
.btn.is-disabled,.ui-btn[disabled],.btn[disabled]{opacity:.45;cursor:not-allowed}

/* v0.15.2 – Button-Hoehe robust erzwingen (Fehler «ungleich hohe Kopf-Buttons», Meldung Ale).
   Die alten Padding-Regeln in radici.css (.btn 14px, .btn-new 12px, .btn-ghost 10px) und app.css (.btn-danger 12px)
   haben unterschiedliches VERTIKALES Padding. Bisher gewann die Hoehe nur ueber die Ladereihenfolge (ui.css nach
   radici.css) – fragil. a.btn/button.btn (Spezifitaet 0,1,1) schlaegt die Legacy-Klassenregeln (0,1,0) sicher und
   erzwingt padding-block:0 + feste min-height. KEINE radici.css-Klasse wird entfernt (Lehre v0.15.0). */
a.btn,button.btn,.ui-btn{padding-block:0;min-height:var(--ui-h);box-sizing:border-box}
a.btn-sm,button.btn-sm,.ui-btn--sm{min-height:var(--ui-h-sm)}
a.btn-xs,button.btn-xs{min-height:var(--ui-h-xs)}

/* ---------- 2. Textlink-Aktionen ----------
   ui-lk = Aktion als Textlink (Button oder Link), ui-lk--d = gefaehrliche Aktion (rot). */
.ui-lk{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 2px;border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--anthrazit);text-decoration:underline;text-decoration-color:var(--ui-line);text-underline-offset:3px;cursor:pointer;text-align:left}
.ui-lk:hover{color:var(--rot);text-decoration-color:currentColor}
.ui-lk--d{color:var(--rot);text-decoration-color:currentColor}
.ui-lk--d:hover{color:var(--rot-dunkel)}

/* Aktionen untereinander (Administration Benutzer): Hauptaktion als Button, uebrige als Textlinks,
   gefaehrliche Aktionen durch Trennlinie abgesetzt. */
.ui-vlinks{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:170px}
.ui-vlinks > .ui-btn,.ui-vlinks > .btn{margin-bottom:6px}
.ui-vlinks form{margin:0;display:block}
.ui-vlinks .ui-vsep{display:block;align-self:stretch;height:0;border-top:1px solid var(--ui-line-soft);margin:6px 0 4px}
.ui-vlinks .ui-vnote{font-size:12px;color:var(--text-2);min-height:34px;display:inline-flex;align-items:center}

/* ---------- 3. Icon-Button ---------- */
.ibtn,.ui-ibtn{border:var(--ui-bw) solid var(--ui-line-soft);border-radius:var(--ui-radius);background:var(--weiss)}
.ibtn:hover:not(:disabled),.ui-ibtn:hover:not(:disabled){border-color:var(--ui-line);background:var(--weiss);color:var(--anthrazit)}
.ui-ibtn{display:grid;place-items:center;width:var(--ui-h);height:var(--ui-h);padding:0;color:var(--text-2)}
.ui-ibtn svg{width:16px;height:16px}

/* ---------- 4. Tabs mit Zaehler ----------
   ui-tabs; abgebildet: seg (Teamsitzung, Handwerkerauftraege), seg sub (Verzeichnis, Sanierungen, Schluessel),
   sa-tabs (Schadenaufnahme), subnav (Administration). Aktiv: weiss mit feinem Rand, Zaehler in Klammern. */
.ui-tabs,.seg:not(.sk-sort),.sa-tabs,.subnav{display:flex;flex-wrap:nowrap;gap:6px;background:none;border:0;border-bottom:1px solid var(--ui-line-soft);border-radius:0;padding:0 0 8px;margin:0 0 22px;max-width:100%;overflow-x:auto;scrollbar-width:none;box-shadow:none}
.ui-tabs > a,.ui-tabs > button,.seg:not(.sk-sort) > a,.seg:not(.sk-sort) > button,.sa-tabs > a,.subnav > a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--ui-h);padding:0 14px;margin:0;border:0;border-radius:var(--ui-radius);background:none;box-shadow:none;color:var(--text-2);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;text-align:left}
.ui-tabs > a:hover,.ui-tabs > button:hover,.seg:not(.sk-sort) > a:hover,.seg:not(.sk-sort) > button:hover,.sa-tabs > a:hover,.subnav > a:hover{color:var(--anthrazit)}
.ui-tabs > .on,.ui-tabs > [aria-selected="true"],.ui-tabs > [aria-current="page"],.seg:not(.sk-sort) > a[aria-selected="true"],.seg:not(.sk-sort) > button[aria-selected="true"],.sa-tabs > a.active,.subnav > a[aria-current="page"]{background:var(--weiss);color:var(--anthrazit);font-weight:600;border:0;box-shadow:inset 0 0 0 1px var(--ui-line)}
.sa-tabs{margin:4px 0 12px}
.sa-tabs > a{gap:0}

/* Zaehler: klein, grau, in Klammern (Format Variante 3). Nur in Tabs, Chips und Filtern – Ueberschriften-Zaehler
   (z. B. «3/7», «2 offen») bleiben unveraendert. */
.ui-n,.ui-tabs .n,.seg .n,.chip .n,.filterbar .cnt,.ui-chip .n{font-size:11.5px;font-weight:500;color:var(--text-2);opacity:1;font-variant-numeric:tabular-nums}
.ui-n::before,.ui-tabs .n::before,.seg .n::before,.chip .n::before,.filterbar .cnt::before,.ui-chip .n::before{content:"("}
.ui-n::after,.ui-tabs .n::after,.seg .n::after,.chip .n::after,.filterbar .cnt::after,.ui-chip .n::after{content:")"}

/* ---------- 5. Filter-Chips ----------
   ui-chip; abgebildet: chip (Pinnwand, Pendenzen, Verzeichnis, Auftraege, Ereignisse, Sanierungen, Schluessel)
   und filterbar (Administration). Aktiv: dunkler Rand und Text, kein gefuellter Hintergrund. */
.ui-chip,.chip,a.chip,.filterbar a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:var(--ui-bw) solid var(--ui-line-soft);border-radius:var(--ui-radius);background:none;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.ui-chip:hover,.chip:hover,a.chip:hover,.filterbar a:hover{border-color:var(--ui-line);color:var(--anthrazit)}
.ui-chip.on,.ui-chip[aria-pressed="true"],.chip[aria-pressed="true"],a.chip[aria-pressed="true"],.filterbar a[aria-current]{background:none;border-color:var(--anthrazit);color:var(--anthrazit);font-weight:600}
.filterbar{gap:8px}

/* ---------- 6. Segment-Umschalter ----------
   ui-seg; abgebildet: seg sk-sort (Schluessel: Sortierung). Aktiv: feine rote Linie unten. */
.ui-seg,.seg.sk-sort{display:inline-flex;gap:0;background:none;border:0;border-radius:0;padding:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ui-seg > a,.ui-seg > button,.seg.sk-sort > a,.seg.sk-sort > button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--ui-h);padding:0 16px;margin:0;border:var(--ui-bw) solid var(--ui-line);border-radius:0;background:var(--weiss);box-shadow:none;color:var(--text-2);font-size:13.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.ui-seg > :not(:first-child),.seg.sk-sort > :not(:first-child){border-left:0}
.ui-seg > :first-child,.seg.sk-sort > :first-child{border-radius:var(--ui-radius) 0 0 var(--ui-radius)}
.ui-seg > :last-child,.seg.sk-sort > :last-child{border-radius:0 var(--ui-radius) var(--ui-radius) 0}
.ui-seg > .on,.ui-seg > [aria-selected="true"],.ui-seg > [aria-pressed="true"],.seg.sk-sort > a[aria-selected="true"],.seg.sk-sort > button[aria-selected="true"]{background:var(--weiss);color:var(--anthrazit);font-weight:600;box-shadow:inset 0 -2px 0 var(--rot)}

/* ---------- 7. Abstaende in Werkzeugleisten ---------- */
.pw-tools{gap:8px}
.row-actions{gap:8px}

/* ---------- 8. Touch-Geraete (iPad, Handy): alle Ziele mindestens 44 px ---------- */
@media (pointer:coarse){
  .btn-sm,.btn-xs,.ui-btn--sm{min-height:var(--ui-h)}
  .ui-chip,.chip,.filterbar a{min-height:var(--ui-h)}
  .ui-lk,.ui-vlinks .ui-vnote{min-height:var(--ui-h)}
  .sa-tabs > a{padding:0 14px}
}
@media (max-width:640px){
  .ui-vlinks{min-width:0}
}

/* ---------- 10. Karten-Fusszeilen mit Aktionen (Ale 09.10.: Handwerker-Karten, Schluessel im Haken-Detail) ----------
   Hauptaktion als Button, uebrige als Textlinks darunter; nichts ragt aus der Karte (min-width:0, Umbruch). */
.au-hw{min-width:0;overflow-wrap:anywhere}
.au-hwfoot{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-width:0}
.au-hwfoot i,.au-hwfoot .ha-cnt{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.au-hwfoot .ha-cnt{display:inline-block}
.hw-act{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:100%}
.hw-act > .ui-btn{margin-bottom:4px;max-width:100%;white-space:normal;text-align:center}
.hw-act .ui-lk,.sk-hka .ui-lk{font-size:13px;margin:0}
.sk-hkeys > li.sk-hk{display:block;min-width:0;max-width:100%;overflow:hidden}
.sk-hkm{min-width:0}
.sk-hkm b{white-space:nowrap}
.sk-kst{white-space:nowrap}
.sk-hkeys .sk-hka{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:2px;margin-top:8px;min-width:0}
.sk-hka > form.inline{display:block;margin:0;max-width:100%}
.sk-hka .ui-btn{margin:0 0 4px;max-width:100%;width:auto;flex:none}
.sk-hka .ui-btn[disabled]{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){.hw-act .ui-lk,.sk-hka .ui-lk{min-height:var(--ui-h)}}

/* ---------- 9. Druck: Bedienelemente dieser Schicht ausblenden ---------- */
@media print{
  .ui-tabs,.ui-seg,.ui-vlinks,.ui-ibtn{display:none!important}
}

/* ---------- 11. Teamsitzung: Inline-Pendenzzeile breiter und lesbar (v0.16.0, Auftrag Ale) ----------
   Die Inline-Zeile im Traktandum (Neue Pendenz, zustaendig, Liegenschaft, Datum, Hinzufuegen) war im starren Raster
   zu schmal, Text abgeschnitten. Flex mit Umbruch und Mindestbreiten statt festem Grid -> Desktop und iPad lesbar.
   Scope .ti-body .tk-form trifft nur die Teamsitzungs-Inline-Zeile (Pendenzen-Seite nutzt .pd-add, Abhak-Zeile .tk-f). */
.ti-body .tk-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ti-body .tk-form > *{min-height:var(--ui-h-sm)}
.ti-body .tk-form input[name="text"]{flex:1 1 100%;min-width:220px}
.ti-body .tk-form select[name="zustaendig"]{flex:1 1 180px;min-width:170px}
.ti-body .tk-form input[name="liegenschaft"]{flex:2 1 240px;min-width:210px}
.ti-body .tk-form input[name="termin"]{flex:0 1 170px;min-width:155px}
.ti-body .tk-form button{flex:0 0 auto;min-height:var(--ui-h-sm)}
@media (max-width:820px){.ti-body .tk-form select[name="zustaendig"],.ti-body .tk-form input[name="liegenschaft"]{flex:1 1 100%}}