/* App-Shell auf Basis der Basecoat-Design-Tokens (lib/basecoat-rhea.min.css).
   Komponenten (btn, card, input, table, …) kommen von Basecoat – hier nur Layout & Kleinkram. */

:root { color-scheme: light; }
:root.dark { color-scheme: dark; }

body { margin:0; background:var(--background); color:var(--foreground); font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Native Bedienelemente auf das Farbschema ziehen. Basecoat liefert Klassen für Knöpfe, Felder
   und Auswahllisten, aber nichts für Kontrollkästchen, Optionsfelder oder Fortschrittsbalken –
   die blieben in jedem Schema im Browser-Blau stehen und stachen sichtbar heraus. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color: var(--primary);
}

.topbar { display:flex; align-items:center; gap:.75rem; padding:.55rem 1.25rem; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar .brand, .sidebar .brand { font-weight:700; font-size:1.05rem; letter-spacing:-.01em; text-decoration:none; color:var(--foreground); }
.topbar-title { font-weight:600; font-size:.95rem; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar .theme-toggle { margin-left:auto; }

/* Nur für Screenreader – Basecoat setzt .sr-only voraus, liefert es aber nicht mit. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
           clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Suche in der Topbar. Unterhalb von 64rem wird es dort eng (Menü-Button, Seitentitel,
   Design-Umschalter) – dann verschwindet sie hier und taucht stattdessen als Punkt in der
   Seitennavigation auf (.nav-search-item im Layout). Genau eine von beiden ist sichtbar. */
.topbar-search { position:relative; flex:0 1 22rem; min-width:12rem; }
.topbar-search > svg { position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
                       color:var(--muted-foreground); pointer-events:none; }
.topbar-search .input { padding-left:2rem; height:2rem; }
.topbar-search .input::-webkit-search-cancel-button { cursor:pointer; }
.nav-search-item { display:none; }
@media (max-width: 64rem) {
    .topbar-search { display:none; }
    .nav-search-item { display:revert; }
}
.theme-toggle .icon-sun { display:none; }
.dark .theme-toggle .icon-sun { display:block; }
.dark .theme-toggle .icon-moon { display:none; }

.app-main { min-height:100vh; display:flex; flex-direction:column; }

/* Ladebalken für die htmx-Navigation (js/app-nav.js). Kriecht Richtung 90 %, springt beim
   Abschluss auf 100 % und blendet aus – der Ablauf steckt komplett in diesen Transitions. */
#nav-progress { position:fixed; top:0; left:0; height:2px; width:0; background:var(--primary);
                opacity:0; z-index:60; pointer-events:none;
                transition:width 8s cubic-bezier(0,.75,.2,1), opacity .25s linear; }
#nav-progress[data-state=run]   { width:90%; opacity:1; }
#nav-progress[data-state=done]  { width:100%; opacity:0; transition:width .12s ease-out, opacity .25s linear .1s; }
#nav-progress[data-state=reset] { width:0; opacity:0; transition:none; }
@media (prefers-reduced-motion: reduce) { #nav-progress { transition:opacity .25s linear; } }

/* Sidebar-Feintuning (Komponente selbst kommt aus Basecoat) */
.sidebar nav > header { padding:.85rem 1rem; border-bottom:1px solid var(--color-sidebar-border, var(--border)); justify-content:center; }
.sidebar nav > footer { border-top:1px solid var(--color-sidebar-border, var(--border)); }
.sidebar-user { padding:.25rem .5rem 0; font-size:.85rem; font-weight:500; color:var(--muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Projekt-Kontext: Tab-Leiste Bautagebuch/Aufgaben/Mängel/Zeiterfassung */
.project-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.project-tabs a { padding:.5rem .75rem; text-decoration:none; color:var(--muted-foreground); border-bottom:2px solid transparent; margin-bottom:-1px; font-size:.9rem; }
.project-tabs a:hover { color:var(--foreground); }
.project-tabs a[aria-current=page] { color:var(--foreground); border-bottom-color:var(--primary); font-weight:500; }

.content { max-width:1080px; width:100%; margin:1.5rem auto; padding:0 1.25rem; display:grid; gap:1rem; align-content:start; box-sizing:border-box; }

h1 { font-size:1.45rem; font-weight:600; letter-spacing:-.02em; margin:0; }
/* --link trennt die Textfarbe von der Füllfarbe: Eine Markenfarbe, die als Knopf-Hintergrund
   gut aussieht, ist als Fließtext auf hellem Grund oft zu hell (helles Orange kommt auf ~2,5:1).
   Schemen setzen --link nur dort, wo sie das brauchen; sonst gilt weiterhin --primary. */
main a:not(.btn) { color:var(--link, var(--primary)); }

/* Formular-Zeile: Felder nebeneinander, Beschriftung über Eingabe.
   Damit die Eingabefelder einer Zeile auf einer Linie liegen, müssen zwei Dinge zusammenkommen:

   1. Unten bündig (flex-end) statt oben. Sonst schiebt eine zweizeilig umbrechende Beschriftung
      („Basisdatum (z. B. Abnahme)") ihr eigenes Feld nach unten, während die Nachbarn oben
      bleiben – die Zeile franst aus.
   2. Was UNTER dem Eingabefeld steht, darf nicht zur Feldhöhe zählen. Basecoats .field hat
      gap:12px, also kostet schon eine LEERE Validierungszeile 12 px und hebt ihr Feld aus der
      Linie – bündig unten allein hätte den Fehler nur gespiegelt. Fehler- und Hinweistexte
      liegen deshalb absolut in einem für alle Felder gleich reservierten Streifen. Nebeneffekt:
      Eine erscheinende Fehlermeldung verschiebt das Formular nicht mehr. */
.row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end; }
.row > .field { flex:1; min-width:180px; position:relative; padding-bottom:1.15rem; }

/* Bedienelemente füllen ihr Feld. Basecoats .select hat width:fit-content – bei einer langen
   Option („VOB/B – 4 Jahre (Bauwerk)") wuchs es über sein Feld hinaus und schob sich über das
   Nachbarfeld. */
.row > .field > .select,
.row > .field > .input,
.row > .field > .datumswahl { width:100%; max-width:100%; }

/* Nur kurze Hinweise und die (meist leere) Validierungszeile wandern in den reservierten
   Streifen. Ein ganzer Absatz gehört in den Fluss – absolut gesetzt liefe er aus der Karte
   heraus und würde von deren overflow:hidden abgeschnitten. */
.row > .field > .error,
.row > .field > span.muted:last-child { position:absolute; top:100%; left:0; right:0; margin:.15rem 0 0; }

/* Optionsgruppen sind eine Liste, kein einzelnes Bedienelement: Sie bündig unten zu setzen
   würde die Beschriftung der kürzeren Gruppe nach unten drücken. */
.row > .field:has(input[type="radio"]) { align-self:flex-start; }
/* .actions nimmt oft mehr als den Knopf auf (z. B. ein Kontrollkästchen davor). Ohne eigenes
   Layout stapelten sich diese Elemente übereinander und standen neben der Zeile in der Luft. */
/* Gleicher reservierter Streifen wie bei .field – sonst sitzt der Knopf um dessen Höhe tiefer
   als die Eingabefelder, mit denen er in einer Zeile steht. */
.row > .actions { flex:0 0 auto; display:flex; gap:.6rem; align-items:center; padding-bottom:1.15rem; }

/* Vertikal gestapeltes Formular */
.form-grid { display:grid; gap:.9rem; }

/* Button-Leiste über/zwischen Cards */
.toolbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.muted { color:var(--muted-foreground); }
.error { color:var(--destructive); font-size:.85rem; }
.btn-danger { color:var(--destructive); }
form.inline { display:inline; margin:0; }

/* Aufklapper, dessen Auslöser eine Aktion anbietet („Nachtrag hinzufügen"): <summary class="btn">
   sieht aus wie die übrigen Aktionen, bleibt aber ein natives details/summary – Tastatur und
   Screenreader ohne eigenes JS. Nur der Aufklapp-Marker muss weg, sonst steht das Dreieck im
   Button (Blink über list-style, WebKit über das eigene Pseudo-Element). */
summary.btn { list-style:none; }
summary.btn::-webkit-details-marker { display:none; }

.auth { max-width:400px; width:100%; margin:3.5rem auto; }

/* ------------------------------------------------------------------ Dashboard */

.dash-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1rem; }
.stat { display:block; padding:1rem 1.15rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl, 1rem); text-decoration:none !important; color:inherit; transition:border-color .15s ease, box-shadow .15s ease; }
a.stat:hover { border-color:var(--muted-foreground); box-shadow:0 1px 3px color-mix(in oklab, var(--foreground) 8%, transparent); }
.stat-label { display:block; font-size:.8rem; color:var(--muted-foreground); }
.stat-value { display:block; font-size:2rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; margin-top:.1rem; }
.stat-value small { font-size:1rem; font-weight:500; color:var(--muted-foreground); }
.stat-delta { display:block; font-size:.8rem; color:var(--muted-foreground); margin-top:.1rem; }
.stat-delta.warn { color:var(--destructive); font-weight:500; }

.dash-cols { display:grid; grid-template-columns:5fr 3fr; gap:1rem; align-items:start; }
.dash-cols-2 { grid-template-columns:1fr 1fr; }
@media (max-width: 900px) { .dash-cols, .dash-cols-2 { grid-template-columns:1fr; } }

/* KI-Inbox-Banner */
.ki-banner { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:var(--radius-xl, 1rem); padding:.9rem 1.15rem; display:grid; gap:.6rem; }
.ki-banner-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ki-banner-head svg { flex-shrink:0; }
.ki-banner-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .7rem; border:1px solid var(--border); border-radius:999px; font-size:.8rem; text-decoration:none !important; color:inherit; background:var(--background); transition:border-color .15s ease; }
.chip:hover { border-color:var(--muted-foreground); }
.chip-count { background:var(--primary); color:var(--primary-foreground); border-radius:999px; font-size:.7rem; font-weight:600; min-width:1.15rem; height:1.15rem; display:inline-flex; align-items:center; justify-content:center; padding:0 .3rem; }

/* Listen (Heute, Aufgaben, Mängel, Einträge) */
.dash-list { list-style:none; margin:0; padding:0; }
.dash-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem 0; border-top:1px solid var(--border); }
.dash-row:first-child { border-top:none; padding-top:0; }
.dash-row .main { min-width:0; display:grid; gap:.05rem; }
.dash-row .title { font-size:.9rem; font-weight:500; color:var(--foreground); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-row a.title:hover { text-decoration:underline; }
.dash-row .sub { font-size:.8rem; color:var(--muted-foreground); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-row .badge { flex-shrink:0; }

.live-dot { display:inline-block; width:.5rem; height:.5rem; border-radius:999px; background:var(--primary); margin-right:.4rem; animation:live-pulse 2s ease-in-out infinite; vertical-align:middle; }
@keyframes live-pulse { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }

.dash-onboarding { margin:0; padding-left:1.2rem; display:grid; gap:.5rem; }

/* Stunden-Chart (serverseitiges SVG) */
.chart svg { width:100%; height:auto; display:block; }
.chart-grid { stroke:var(--border); stroke-width:1; }
.chart-tick { font-size:11px; fill:var(--muted-foreground); }
.chart-tick-today { font-weight:600; fill:var(--foreground); }
.chart-value { font-size:11px; font-weight:600; fill:var(--foreground); }
.bar { fill:var(--muted-foreground); opacity:.4; }
.bar-today { fill:var(--primary); opacity:1; }
.chart-slot:hover .bar { opacity:.65; }
.chart-slot:hover .bar-today { opacity:.85; }
/* Vorwochen-Referenz: dezente graue Marke am Stand desselben Wochentags der Vorwoche */
.chart-ref { stroke:var(--muted-foreground); stroke-width:2; stroke-dasharray:3 2; opacity:.7; }

/* PDF-Vorschau-Popup: großformatiger Dialog, iframe füllt die Fläche */
.pdf-dialog > * { max-width: min(960px, calc(100% - 2rem)); width: 100%; height: calc(100% - 3rem); }
.pdf-dialog iframe { width: 100%; height: 100%; min-height: 320px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }

/* Alpine: Elemente mit x-cloak bleiben bis zur Initialisierung unsichtbar
   (verhindert das Aufblitzen der Jahres-Preise auf der Tarifauswahl). */
[x-cloak] { display: none !important; }

/* Telefon-Eingabe mit Länder-Vorwahl (_PhoneInput) als Basecoat-Input-Group:
   Vorwahl-Auswahl schmal mit Trennlinie, Nummer füllt den Rest der Gruppe. */
.phone-input select[data-phone-code] { flex: 0 0 auto; width: auto; max-width: 11rem;
    appearance: auto; background: transparent; border-inline-end: 1px solid var(--border); }
.phone-input input[data-phone-number] { flex: 1; min-width: 6rem; }
/* In Formularzeilen braucht die Gruppe mehr Platz als das 180px-Feldminimum –
   sonst wird das Nummernfeld zerquetscht (die Zeile bricht stattdessen um). */
.row > .field:has(.phone-input) { min-width: 20rem; }

/* Foto-Vorschau-Popup (Erfassungen/Beweisfotos): Bild skaliert in den Dialog */
.image-dialog > * { max-width: min(960px, calc(100% - 2rem)); }
.image-dialog img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }

/* Projekt-Fortschrittsleiste (Projektliste): erledigte/alle bestätigten Aufgaben */
.progress-link { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; vertical-align:middle; }
.progress-track { display:inline-block; width:96px; height:6px; border-radius:3px; background:var(--muted); overflow:hidden; }
.progress-fill { display:block; height:100%; border-radius:3px; background:var(--primary); }
.progress-text { font-size:.85em; }

/* ------------------------------------------------------------------ Unternehmensseite
   Stammdaten/Logo nebeneinander, Buchhaltungs-Anbindungen als Kachelraster – neun
   gestapelte Karten waren auf großen Bildschirmen nur Scrollstrecke. */

/* auto-fit statt Media-Query: die nutzbare Breite hängt auch daran, ob die Sidebar steht.
   min(100%, …) verhindert, dass eine Spalte breiter wird als der Platz, den sie hat. */
.company-top { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap:1rem; align-items:start; }

/* Zwischenüberschrift zwischen Kartengruppen */
.section-head { display:grid; gap:.15rem; margin-top:.5rem; }
.section-head h2 { margin:0; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
.section-head p { margin:0; font-size:.85rem; }

.logo-section { display:grid; gap:.75rem; }
.logo-preview { display:flex; align-items:center; justify-content:center; min-height:6rem; padding:.75rem;
    border:1px solid var(--border); border-radius:var(--radius-lg, .75rem); background:var(--muted); }
.logo-preview[data-empty] { border-style:dashed; background:transparent; font-size:.85rem; }
.logo-preview img { max-height:5rem; max-width:100%; object-fit:contain; }
.logo-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.logo-foot p { margin:0; font-size:.8rem; }

.provider-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap:1rem; align-items:start; }

.provider-card > header { align-items:center; }
.provider-card h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:-.01em; }
.provider-card > header > .card-action { display:flex; align-items:center; margin:0; }
.provider-card > section { display:grid; gap:.6rem; }

.provider-state { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin:0; font-size:.85rem; font-weight:500; }
.state-dot { width:.5rem; height:.5rem; border-radius:999px; background:var(--muted-foreground); flex-shrink:0; }
.provider-state[data-state=on] .state-dot { background:var(--primary); }
.provider-state[data-state=warn] { color:var(--destructive); }
.provider-state[data-state=warn] .state-dot { background:var(--destructive); }

.provider-desc { margin:0; font-size:.82rem; line-height:1.55; }
.provider-hint { margin:0; font-size:.82rem; line-height:1.5; color:var(--destructive); }

/* Zugangsdaten stecken hinter einem Aufklapper – sichtbar nur, wenn die Anbindung klemmt. */
.provider-config { border-top:1px solid var(--border); padding-top:.6rem; }
.provider-config > summary { display:flex; align-items:center; gap:.4rem; cursor:pointer; list-style:none;
    font-size:.85rem; font-weight:500; color:var(--muted-foreground); }
.provider-config > summary::-webkit-details-marker { display:none; }
.provider-config > summary::before { content:""; width:.4rem; height:.4rem; border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease; margin-left:.15rem; }
.provider-config[open] > summary::before { transform:rotate(45deg); }
.provider-config > summary:hover { color:var(--foreground); }
.provider-config-body { display:grid; gap:.75rem; margin-top:.75rem; }
.provider-actions { display:flex; gap:.35rem; flex-wrap:wrap; }

.provider-list { display:flex; flex-direction:column; gap:.5rem; margin:.75rem 0; }
.provider-list .btn { width:100%; gap:.5rem; }
/* Unsichtbarer Google-SDK-Button liegt klickbar über dem gestylten Button. */
.google-signin-wrap { position:relative; }
.google-signin-wrap > .btn { pointer-events:none; }
.google-signin-wrap .gsi-target { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0; }
.divider { display:flex; align-items:center; gap:.6rem; color:var(--muted-foreground); margin:1rem 0; font-size:.85rem; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--border); }

/* ------------------------------------------------------------------ Sub-Erfassung (/c/{token})
   Mobile-first: große Touch-Ziele, wenig Text, klare Schritte. */

.sub-capture { max-width:480px; width:100%; margin:0 auto; display:grid; gap:1rem; padding-bottom:2.5rem; }

.sc-head { display:grid; gap:.25rem; }
.sc-head h2 { margin:0; font-size:1.35rem; letter-spacing:-.02em; }
.sc-head p { margin:0; }
.sc-project-label { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; color:var(--muted-foreground); margin:0; }

.sc-form { display:grid; gap:1rem; }
.sc-step { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl, 1rem); padding:1rem 1.1rem; display:grid; gap:.75rem; }
.sc-step h3 { margin:0; font-size:1.05rem; display:flex; align-items:center; gap:.55rem; }
.sc-num { flex-shrink:0; background:var(--primary); color:var(--primary-foreground); width:1.6rem; height:1.6rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }

.sc-photo-buttons { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.sc-bigbtn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; min-height:5.5rem; border-radius:var(--radius-lg, .75rem); background:var(--primary); color:var(--primary-foreground); font-weight:600; font-size:.95rem; cursor:pointer; text-align:center; padding:.5rem; -webkit-tap-highlight-color:transparent; }
.sc-bigbtn:active { opacity:.85; }
.sc-bigbtn-outline { background:var(--background); color:var(--foreground); border:2px dashed var(--border); }
.sc-file { display:none; }

.sc-previews { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:.5rem; margin-top:.25rem; }
.sc-tile { position:relative; aspect-ratio:1; border-radius:var(--radius, .5rem); overflow:hidden; border:1px solid var(--border); background:var(--muted); }
.sc-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.sc-tile-file { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:.35rem; font-size:.7rem; color:var(--muted-foreground); word-break:break-all; text-align:center; }
/* Nicht angekommene Aufnahmen: bewusst auffällig, sie brauchen eine Entscheidung. */
.sc-failed { margin-top:1rem; border:1px solid var(--destructive); border-radius:var(--radius, .5rem); padding:.75rem; }
.sc-failed-head { margin:0 0 .5rem; font-weight:600; color:var(--destructive); }
.sc-failed-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.35rem 0; border-top:1px solid var(--border); }
.sc-failed-row:first-of-type { border-top:none; }
.sc-failed-text { flex:1 1 12rem; min-width:0; font-size:.9rem; word-break:break-word; }
.sc-failed-btn { border:1px solid var(--border); background:var(--background); color:var(--foreground); border-radius:var(--radius, .5rem); padding:.35rem .6rem; font-size:.85rem; cursor:pointer; }
.sc-failed-drop { color:var(--muted-foreground); }

/* Sprachnotiz-Kachel: vor dem Senden anhörbar, damit niemand eine leere Aufnahme abschickt.
   Volle Zeilenbreite statt Foto-Quadrat – sonst sind die Bedienelemente abgeschnitten. */
.sc-tile-audiorow { grid-column:1 / -1; aspect-ratio:auto; }
.sc-tile-audio { display:flex; align-items:center; padding:.4rem 2.2rem .4rem .4rem; }
.sc-tile-audio audio { width:100%; max-width:100%; height:2.25rem; }
/* Laufende Aufnahme deutlich erkennbar (der Knopf trägt die Restzeit als Text). */
.sc-bigbtn.sc-recording { border-color:var(--destructive); color:var(--destructive); animation:sc-pulse 1.4s ease-in-out infinite; }
@keyframes sc-pulse { 0%, 100% { opacity:1; } 50% { opacity:.6; } }
.sc-tile-remove { position:absolute; top:.25rem; right:.25rem; width:1.6rem; height:1.6rem; border-radius:999px; border:none; background:color-mix(in oklab, var(--foreground) 70%, transparent); color:var(--background); font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.sc-mic-hint { display:flex; gap:.6rem; align-items:flex-start; background:color-mix(in oklab, var(--primary) 8%, var(--background)); border:1px solid color-mix(in oklab, var(--primary) 25%, var(--border)); border-radius:var(--radius-lg, .75rem); padding:.7rem .8rem; font-size:.9rem; line-height:1.45; }
.sc-mic-hint svg { flex-shrink:0; margin-top:.1rem; color:var(--primary); }
.sc-text { font-size:1rem; min-height:7rem; }

.sc-send-area { display:grid; gap:.6rem; }
.sc-geo { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted-foreground); padding:0 .15rem; }
.sc-geo svg { flex-shrink:0; }
.sc-geo-retry { border:1px solid var(--border); background:var(--background); color:var(--foreground); border-radius:999px; padding:.2rem .7rem; font-size:.8rem; cursor:pointer; flex-shrink:0; margin-left:auto; }
.sc-sendbtn { width:100%; min-height:3.5rem; font-size:1.15rem; font-weight:700; border:none; border-radius:var(--radius-lg, .75rem); background:var(--primary); color:var(--primary-foreground); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sc-sendbtn:active { opacity:.85; }
.sc-sendbtn:disabled { opacity:.45; cursor:default; }

.sc-small { font-size:.82rem; margin:0; }
.sc-center { text-align:center; }

.sc-success { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl, 1rem); padding:2rem 1.25rem; display:grid; gap:.6rem; justify-items:center; text-align:center; }
.sc-success h3 { margin:0; font-size:1.3rem; }
.sc-success p { margin:0; }
.sc-success-check { width:3.5rem; height:3.5rem; border-radius:999px; background:color-mix(in oklab, var(--primary) 15%, var(--background)); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.sc-againbtn { margin-top:.75rem; min-height:2.9rem; }

/* ------------------------------------------- Geteilte Inhaltsdokumente (Rechtstexte, Anleitungen)
   Der Inhalt kommt aus BauLedger.Content (Markdown); hier steht nur, wie er in der Produkt-App
   aussieht. Marketing-Site und MAUI-App gestalten dieselben Dokumente jeweils eigenständig. */
.doc-prose { max-width:70ch; line-height:1.65; }
.doc-prose > *:first-child { margin-top:0; }
.doc-prose > *:last-child { margin-bottom:0; }
.doc-prose h2 { font-size:1.1rem; font-weight:600; margin:1.75rem 0 .6rem; letter-spacing:-.01em; }
.doc-prose h3 { font-size:.98rem; font-weight:600; margin:1.35rem 0 .5rem; color:var(--muted-foreground); }
.doc-prose p { margin:0 0 .9rem; }
.doc-prose ul, .doc-prose ol { margin:0 0 .9rem; padding-left:1.35rem; display:grid; gap:.35rem; }
.doc-prose li { padding-left:.15rem; }
.doc-prose code { font-size:.88em; background:var(--muted); border-radius:var(--radius-sm, .25rem); padding:.1rem .35rem; }

/* Rechtslinks am Seitenfuß – im Layout und auf den anonymen Seiten (Login, Einladung, Sub-Link). */
.legal-links { display:flex; flex-wrap:wrap; gap:.15rem .9rem; justify-content:center; font-size:.82rem; color:var(--muted-foreground); margin:1.5rem 0 .5rem; }
.legal-links a { color:var(--muted-foreground) !important; text-decoration:none; }
.legal-links a:hover { text-decoration:underline; }
.sidebar .legal-links { justify-content:flex-start; margin:.4rem .25rem .1rem; font-size:.75rem; gap:.1rem .6rem; }

/* ---------------------------------------------------------------- Datumsauswahl (js/date-picker.js)
   Vollständig aus den Schema-Variablen gebaut, damit sie jedes Farbschema und den Dunkelmodus
   mitzieht – die Auswahl des Browsers kommt vom Betriebssystem und tut das nicht. */
.datumswahl { position:relative; display:block; }
.datumswahl > .input { width:100%; padding-right:2.25rem; }

/* Das native Feld bleibt im Formular, wird aber unerreichbar: kein Klick, kein Tab – nur so
   holt der Browser seinen eigenen Kalender nicht zurück. Es sitzt bewusst an der unteren linken
   Kante des sichtbaren Felds, damit die native required-Meldung dort aufpoppt, wo der Nutzer
   auch hinsieht. */
/* Spezifität bewusst über .datumswahl > .input – sonst gewinnt dort das width:100%. */
.datumswahl > .input.datumswahl-original {
    position:absolute; left:.75rem; bottom:.35rem; width:1px; height:1px;
    min-width:0; padding:0; margin:0; border:0; opacity:0; pointer-events:none; }

/* Eigener Kalenderknopf. Der native Indikator im Feld wird darunter ausgeblendet, sonst
   stünden zwei Symbole nebeneinander und beide öffneten etwas anderes. */
.dp-trigger { position:absolute; top:50%; right:.45rem; transform:translateY(-50%);
              display:flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem;
              border:none; background:transparent; color:var(--muted-foreground);
              border-radius:calc(var(--radius) - 2px); cursor:pointer; }
.dp-trigger:hover { color:var(--foreground); background:var(--muted); }
.dp-trigger:focus-visible { outline:2px solid var(--ring); outline-offset:1px; }

/* Hängt am <body> und wird per JS positioniert – innerhalb der Karte würde sie deren
   overflow:hidden abschneiden. */
.dp { position:fixed; z-index:60; min-width:19rem;
      background:var(--popover); color:var(--popover-foreground);
      border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:0 10px 30px color-mix(in oklab, var(--foreground) 18%, transparent);
      padding:.75rem; }

.dp-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.dp-title { display:flex; align-items:center; gap:.35rem; border:none; background:transparent;
            color:inherit; font:inherit; font-weight:600; padding:.3rem .5rem;
            border-radius:calc(var(--radius) - 2px); cursor:pointer; }
.dp-title:hover { background:var(--muted); }
.dp-nav { display:flex; gap:.25rem; }
.dp-nav button, .dp-yearbar button {
    width:1.9rem; height:1.9rem; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--background); color:var(--foreground);
    border-radius:999px; cursor:pointer; font-size:1rem; line-height:1; }
.dp-nav button:hover, .dp-yearbar button:hover { background:var(--muted); }

.dp-weekdays, .dp-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:.15rem; }
.dp-weekdays span { text-align:center; font-size:.75rem; font-weight:600;
                    color:var(--muted-foreground); padding:.25rem 0; }

.dp-day { aspect-ratio:1; border:none; background:transparent; color:var(--foreground);
          font:inherit; font-size:.875rem; border-radius:999px; cursor:pointer; }
.dp-day:hover:not(:disabled) { background:var(--muted); }
.dp-day.dp-outside { color:var(--muted-foreground); opacity:.55; }
/* Heute nur umrandet – die Füllung ist für die tatsächliche Auswahl reserviert. */
.dp-day.dp-today { box-shadow:inset 0 0 0 1px var(--foreground); }
.dp-day.dp-selected { background:var(--primary); color:var(--primary-foreground); font-weight:600; box-shadow:none; }
.dp-day:disabled { opacity:.3; cursor:not-allowed; }
.dp-day:focus-visible { outline:2px solid var(--ring); outline-offset:-2px; }

.dp-monthview { margin-top:.5rem; border-top:1px solid var(--border); padding-top:.5rem; }
.dp-yearbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.dp-year { font-weight:600; }
.dp-months { display:grid; grid-template-columns:repeat(3, 1fr); gap:.25rem; }
.dp-month { border:none; background:transparent; color:var(--foreground); font:inherit; font-size:.8rem;
            padding:.4rem 0; border-radius:calc(var(--radius) - 2px); cursor:pointer; }
.dp-month:hover { background:var(--muted); }
.dp-month.dp-selected { background:var(--primary); color:var(--primary-foreground); font-weight:600; }

.dp-foot { display:flex; justify-content:flex-end; margin-top:.5rem;
           border-top:1px solid var(--border); padding-top:.5rem; }
.dp-today-btn { border:none; background:transparent; color:var(--foreground); font:inherit;
                font-weight:600; padding:.3rem .5rem; border-radius:calc(var(--radius) - 2px); cursor:pointer; }
.dp-today-btn:hover { background:var(--muted); }

/* ------------------------------------------------- Fotodokumentation (/projectentry, Runde 3)
   Die Bausteinliste ist zugleich die Layout-Vorschau: data-layout trägt die gewählte Breite,
   halbe/Drittel-Karten stehen dadurch nebeneinander – wie später im PDF. Die Reihenfolge im
   DOM bleibt die Speicher-Reihenfolge (flex-wrap ändert daran nichts). */
#block-rows { display:flex; flex-wrap:wrap; gap:.5rem; align-items:stretch; }
#block-rows .block-row { flex:1 1 100%; min-width:0; display:flex; flex-direction:column; gap:.4rem;
                         border:1px solid var(--border); border-radius:.5rem; padding:.5rem; }
#block-rows .block-row[data-layout="1"] { flex:0 1 calc(50% - .25rem); }
#block-rows .block-row[data-layout="2"] { flex:0 1 calc(33.333% - .34rem); }
/* Auf schmalen Schirmen bringt nebeneinander nichts – volle Breite, die Wahl bleibt gespeichert. */
@media (max-width: 640px) {
    #block-rows .block-row[data-layout="1"], #block-rows .block-row[data-layout="2"] { flex-basis:100%; }
}
/* Einklappbare Navigationsgruppen (js/app-nav.js, Kundenwunsch Runde 3). */
#sidebar [data-navfold] > h3 { cursor:pointer; user-select:none; position:relative; padding-right:1.5rem; }
#sidebar [data-navfold] > h3::after { content:""; position:absolute; right:.65rem; top:50%; width:.35rem; height:.35rem;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-70%) rotate(45deg); transition:transform .15s ease; }
#sidebar [data-navfold][data-folded] > h3::after { transform:translateY(-50%) rotate(-45deg); }
#sidebar [data-navfold][data-folded] > ul { display:none; }
#sidebar [data-navfold] > h3:hover { color:var(--foreground); }

.block-head { display:flex; align-items:center; gap:.4rem; min-height:1.8rem; }
.block-drag { cursor:grab; user-select:none; padding:0 .25rem; color:var(--muted-foreground);
              font-size:1.05em; touch-action:none; }
.block-drag:active { cursor:grabbing; }
.block-preview { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:.35rem;
                 border:1px solid var(--border); display:block; }
.block-foot { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.block-foot .block-layout { flex:1; min-width:0; max-width:14rem; }
.block-ghost { opacity:.4; }

/* Deckblattfoto-Auswahl (/projectentry, Runde 4): Thumbnails als Radio-Optionen – das
   gewählte Foto erscheint halbseitig auf Seite 1 des Berichts-PDFs. */
.cover-picker { display:flex; flex-wrap:wrap; gap:.5rem; }
.cover-picker .cover-option { position:relative; cursor:pointer; margin:0; }
.cover-picker input { position:absolute; opacity:0; pointer-events:none; }
.cover-picker img, .cover-picker .cover-none { display:flex; align-items:center; justify-content:center;
    width:5.5rem; height:4.2rem; object-fit:cover; border:2px solid var(--border);
    border-radius:.4rem; color:var(--muted-foreground); font-size:.8em; background:var(--muted); }
.cover-picker input:checked + img, .cover-picker input:checked + .cover-none {
    border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.cover-picker .cover-option:focus-within img, .cover-picker .cover-option:focus-within .cover-none {
    outline:2px solid var(--ring); outline-offset:2px; }

/* --------------------------------------------------- Einklappbare Karten (js/card-fold.js)
   data-fold macht die Kopfzeile zur Klickfläche; der Chevron-Knopf kommt per JS dazu.
   Zugeklappt verschwinden nur die section-Blöcke – Kopfzeile (Titel + Beschreibung) bleibt. */
.card[data-fold] > header { cursor:pointer; user-select:none; position:relative; padding-right:2.2rem; }
.card[data-fold] > header .fold-toggle { position:absolute; top:.15rem; right:.25rem; width:1.7rem; height:1.7rem;
    border:none; background:transparent; cursor:pointer; border-radius:calc(var(--radius) - 2px);
    color:var(--muted-foreground); }
.card[data-fold] > header .fold-toggle:hover { background:var(--muted); color:var(--foreground); }
.card[data-fold] > header .fold-toggle::before { content:""; position:absolute; inset:0; margin:auto;
    width:.45rem; height:.45rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px); transition:transform .15s ease; }
.card[data-folded] > header .fold-toggle::before { transform:rotate(-45deg) translate(-1px,1px); }
.card[data-folded] > section { display:none; }



/* --------------------------------------------------- Toasts (js/app-toast.js)
   Basecoat setzt im Toast-Text word-break:break-all. Das ist für Kurzmeldungen aus einem
   Wort gedacht, zerlegt deutsche Sätze aber mitten im Wort ("Fotodokumentation gespei-
   chert"). anywhere bricht nur dann innerhalb eines Wortes, wenn es allein nicht in die
   Zeile passt – genau das, was hier gebraucht wird. */
.toaster .toast .toast-content section p { word-break:normal; overflow-wrap:anywhere; }