/* ==========================================================================
   stratdata — gemeinsames Bedienelement-System
   Eine einzige Quelle für Schaltflächen, Chips und Eingabefelder. Webseite,
   Arbeitsplatz und Wiki laden diese Datei, damit nichts auseinanderläuft.

   Vokabular: `.btn` plus eine Ausprägung. Beide Schreibweisen sind erlaubt,
   weil beide Teile historisch unterschiedlich benannt haben:
       primär       .btn.primary   ==  .btn-fill
       umrandet     .btn.outline   ==  .btn-line
       still        .btn.ghost     ==  .btn-quiet
       gefährlich   .btn.danger
   Grössen: .btn.sm · Standard · .btn-lg    Breite: .btn-block
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   Das hidden-Attribut muss gewinnen.
   Der Browser bringt zwar `[hidden]{display:none}` mit, aber jede eigene
   Regel mit `display:flex|grid|block` schlägt sie — Autoren-Stile stehen
   immer über denen des Browsers. Wer dann `element.hidden = true` setzt,
   versteckt nichts: genau daran liess sich der Assistent nicht schliessen.
   Die eine Zeile hier gilt für Arbeitsplatz, Webseite, Konto und Wiki. */
[hidden]{display:none !important}

:root{
  --ctl-h:44px;            /* Standardhöhe; deckt sich mit Googles Schaltfläche */
  --ctl-h-sm:32px;
  --ctl-h-lg:48px;
  --ctl-r:12px;            /* EINE Rundung für alles Bedienbare — keine zweite */
  --ctl-ease:cubic-bezier(.22,.68,.28,1);
  /* Abgeleitet, nicht erfunden: derselbe Ton wie --ctl-danger, nur als Hof.
     Die Ersetzung geschieht beim Benutzen, also greift automatisch der Wert
     des jeweiligen Themas. */
  --ctl-danger-soft:color-mix(in srgb,var(--ctl-danger,#ff3c5a) 16%,transparent);
}

/* ─────────────────────────────────────────────────────────── Schaltflächen */
.btn{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--ctl-h);padding:0 18px;
  font-family:inherit;font-size:14.5px;font-weight:500;line-height:1;
  letter-spacing:-.005em;white-space:nowrap;text-align:center;
  /* Standardform ist die umrandete: eine Schaltfläche muss als solche
     erkennbar sein. Randlos wird sie erst über .ghost / .btn-quiet. */
  background:var(--ctl-surface,#fff);
  border:1px solid var(--ctl-line,#d3daed);
  color:var(--ctl-ink,#0a0f1e);
  border-radius:var(--ctl-r);
  cursor:pointer;
  transition:transform .14s var(--ctl-ease),background .2s var(--ctl-ease),
             border-color .2s var(--ctl-ease),color .2s var(--ctl-ease),
             box-shadow .2s var(--ctl-ease);
}
.btn:hover{transform:translateY(-1px);border-color:var(--ctl-accent,#5b3df5);color:var(--ctl-accent,#5b3df5)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* primär — der Markenverlauf
   Kein Rand: ein transparenter 1px-Rand über einem Verlauf erzeugt an den
   Ecken eine sichtbare Naht, weil Aussen- und Innenradius um 1px abweichen.
   Kein Schlagschatten: er ragt aus dem Knopf heraus und wird von jedem
   Elternelement mit overflow:hidden hart abgeschnitten — genau der Effekt,
   der im Assistenten zu sehen war. Die Hebung beim Überfahren genügt. */
.btn.primary,.btn-fill{
  background:var(--grad);
  border:0;
  color:#fff;font-weight:500;
  box-shadow:none;
}
.btn.primary:hover,.btn-fill:hover{color:#fff;filter:brightness(1.06)}

/* ── Schaltflächen gegen Umgebungsregeln absichern ────────────────────────
   Seiten setzen für ihren Fliesstext gern «.blatt a{color:var(--link)}» oder
   «.wz-schluss a{color:var(--link)}». Solche Selektoren sind mit (0,1,1)
   SPEZIFISCHER als «.btn-fill» (0,1,0) und färbten den Text auf dem
   Verlaufsknopf violett — auf blau-violettem Grund praktisch unlesbar.
   Diese Zeilen sind (0,2,1) und gewinnen, ohne dass jede Seite einzeln
   nachgebessert werden muss. */
   ACHTUNG bei der Rechnung: «a.btn-fill» ist (0,1,1) — GLEICHAUF mit
   «.wz-schluss a», und bei Gleichstand gewinnt die später geladene Regel,
   also die der Seite. Es braucht deshalb ZWEI Klassen: «a.btn.btn-fill»
   ist (0,2,1) und gewinnt zuverlässig. */
a.btn.primary,a.btn.btn-fill{color:#fff}
a.btn.outline,a.btn.btn-line{color:var(--ctl-ink,#0a0f1e)}
a.btn.ghost,a.btn.btn-quiet{color:var(--ctl-ink-2,#4a5680)}
a.btn.danger{color:var(--ctl-danger,#ff3c5a)}

/* umrandet — entspricht der Grundform, als ausdrückliche Ausprägung */
.btn.outline,.btn-line{background:var(--ctl-surface,#fff);border-color:var(--ctl-line,#d3daed)}

/* still — nur Text */
.btn.ghost,.btn-quiet{
  background:transparent;border-color:transparent;color:var(--ctl-ink-2,#4a5680);
  padding:0 12px;
}
.btn.ghost:hover,.btn-quiet:hover{color:var(--ctl-accent,#5b3df5);
                                  background:var(--ctl-hover,#f2f5ff);border-color:transparent}

/* gefährlich */
.btn.danger{background:transparent;border-color:var(--ctl-danger,#ff3c5a);color:var(--ctl-danger,#ff3c5a)}
.btn.danger:hover{background:var(--ctl-danger,#ff3c5a);color:#fff;
                  border-color:var(--ctl-danger,#ff3c5a)}

/* Grössen und Breite */
.btn.sm{height:var(--ctl-h-sm);padding:0 13px;font-size:13.5px}
.btn-lg{height:var(--ctl-h-lg);padding:0 26px;font-size:16px}
.btn-block{width:100%}
.btn.active{background:var(--grad);border:0;color:#fff}
.btn.active:hover{color:#fff;filter:brightness(1.06)}

/* nur ein Symbol */
.icon-btn{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--ctl-h);height:var(--ctl-h);
  /* Auch ein Knopf, der nur ein Symbol trägt, braucht eine feste Schriftgrösse:
     sonst erbt er die des Fliesstextes, und die ist im Arbeitsplatz eine andere
     als auf der Webseite. Sichtbar wird das beim Aufträge-Zähler, der eine Zahl
     statt eines Symbols zeigt. */
  font-family:inherit;font-size:14.5px;line-height:1;
  background:transparent;border:1px solid transparent;border-radius:var(--ctl-r);
  cursor:pointer;color:var(--ctl-ink-2,#4a5680);
  transition:background .2s var(--ctl-ease),color .2s var(--ctl-ease);
}
.icon-btn:hover{background:var(--ctl-hover,#f2f5ff);color:var(--ctl-accent,#5b3df5)}

/* ──────────────────────────────────────────────────────────────── Chips ── */
.chip,.as-chip{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--ctl-h-sm);padding:0 13px;
  font-family:inherit;font-size:13.5px;font-weight:400;line-height:1.3;
  background:var(--ctl-surface-2,#f6f8ff);
  border:1px solid var(--ctl-line-soft,#e6eaf5);border-radius:var(--ctl-r);
  color:var(--ctl-ink-2,#4a5680);cursor:pointer;text-align:left;
  transition:border-color .2s var(--ctl-ease),color .2s var(--ctl-ease),
             background .2s var(--ctl-ease);
}
.chip:hover,.as-chip:hover{border-color:var(--ctl-accent,#5b3df5);color:var(--ctl-accent,#5b3df5)}
.chip.on{background:var(--grad);border:0;color:#fff}
.chip:disabled,.as-chip:disabled{opacity:.5;cursor:default}

/* ────────────────────────────────────────────────────── Eingabefelder ── */
.ctl-field,
.field input,
.tl-in,.tl-area,.tl-sel,.con-input,.con-sel,.dk-in,
.notes-area,.todo-add input,.as-in{
  font-family:inherit;font-size:14.5px;color:var(--ctl-ink,#0a0f1e);
  background:var(--ctl-surface-2,#f6f8ff);
  border:1px solid var(--ctl-line,#d3daed);border-radius:var(--ctl-r);
  padding:0 14px;outline:none;
  transition:border-color .2s var(--ctl-ease),box-shadow .2s var(--ctl-ease),
             background .2s var(--ctl-ease);
}
.field input,
.tl-in,.tl-sel,.con-input,.con-sel,.dk-in,.todo-add input,.as-in{height:var(--ctl-h)}
.tl-area,.notes-area{padding:11px 14px;line-height:1.55}

/* Eigengrösse von Formularfeldern ist nicht null, sondern historisch: ein
   <textarea> ist 20 Zeichen mal 2 Zeilen breit, ein <input> 20 Zeichen, ein
   <select> so breit wie sein längster Eintrag. Steht so ein Feld allein in
   einer Karte, bleibt rechts genau die Lücke stehen, die man auf jedem
   Screenshot sieht — und sie ist je nach Schriftgrösse verschieden gross.
   Deshalb bekommen alle Felder hier eine Breite, statt sie einzeln in jedem
   Werkzeug nachzureichen; box-sizing:border-box gilt global, Rahmen und
   Innenabstand sind also schon eingerechnet.

   In einer Flex-Zeile kostet das nichts: dort setzt flex:1 die Basis auf 0,
   und width wird für die Hauptachse gar nicht erst befragt. */
.tl-in,.tl-area,.tl-sel,.con-input,.con-sel,.dk-in,
.notes-area,.todo-add input,.as-in,.ctl-field{width:100%}

/* Nur senkrecht ziehbar. Waagerecht liesse sich das Feld aus der Karte
   herausziehen — der Griff sitzt unten rechts, und genau dorthin rutscht die
   Maus beim Verlängern. */
.tl-area,.notes-area{resize:vertical}
.ctl-field:focus,
.field input:focus,
.tl-in:focus,.tl-area:focus,.tl-sel:focus,.con-input:focus,.con-sel:focus,
.dk-in:focus,.notes-area:focus,.todo-add input:focus,.as-in:focus{
  border-color:var(--ctl-accent,#5b3df5);
  background:var(--ctl-surface,#fff);
  box-shadow:0 0 0 4px var(--ctl-accent-soft,#eceaff);
}

/* ══════════════════════════════════════════════════ Eingabe-Rückmeldung ══
   Ein Feld, das eine Form erwartet, sagt das auch. Die Meldung steht UNTER
   der Zeile statt im Feld: nur so bleibt die Zeilenhöhe stabil, wenn ein Satz
   erscheint und wieder verschwindet — sonst springt beim Tippen das halbe
   Widget. Farben kommen ausschliesslich aus den bestehenden Variablen, damit
   helles und dunkles Thema ohne Sonderfall stimmen. */
.ctl-field.ungueltig,
.field input.ungueltig,
.tl-in.ungueltig,.tl-area.ungueltig,.tl-sel.ungueltig,
.con-input.ungueltig,.con-sel.ungueltig,.dk-in.ungueltig,
.notes-area.ungueltig,.todo-add input.ungueltig,.as-in.ungueltig{
  border-color:var(--ctl-danger,#ff3c5a);
}
/* Muss die Fokus-Regel oben schlagen, sonst färbt sich der Rand beim
   Hineinklicken wieder in die Markenfarbe und der Fehler verschwindet. */
.ctl-field.ungueltig:focus,
.field input.ungueltig:focus,
.tl-in.ungueltig:focus,.tl-area.ungueltig:focus,.tl-sel.ungueltig:focus,
.con-input.ungueltig:focus,.con-sel.ungueltig:focus,.dk-in.ungueltig:focus,
.notes-area.ungueltig:focus,.todo-add input.ungueltig:focus,.as-in.ungueltig:focus{
  border-color:var(--ctl-danger,#ff3c5a);
  box-shadow:0 0 0 4px var(--ctl-danger-soft);
}

.feld-hinweis{
  display:block;
  margin:-6px 2px 10px;
  font-family:inherit;font-size:11.5px;line-height:1.45;
  color:var(--ctl-ink-2,#4a5680);
}
/* Deutlich, sobald das Feld verlassen oder abgeschickt wurde. */
.feld-hinweis.fehler{color:var(--ctl-danger,#ff3c5a)}
/* Dezent, solange noch getippt wird — ein Zwischenstand ist kein Fehler. */
.feld-hinweis.leise{opacity:.7}
/* Ruhiger Haken: bestätigt, ohne zu feiern. Kein grelles Grün. */
.feld-ok{color:var(--ctl-ink-2,#4a5680);opacity:.85}

/* Textschaltflächen — sehen wie Links aus, verhalten sich wie Knöpfe */
.as-step-go,.jobs-clear,.switch{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:500;
  color:var(--ctl-accent,#5b3df5);
}
.as-step-go:hover,.jobs-clear:hover,.switch:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════ Zeilen-Regel ══
   Ein Knopf neben einem Eingabefeld muss dessen Höhe haben — sonst wirkt die
   Zeile zusammengewürfelt. Das gilt unabhängig davon, ob der Knopf im Code
   als .sm angelegt wurde; die Umgebung entscheidet, nicht die Aufrufstelle. */
.tl-row > .btn, .con-row > .btn, .as-form > .btn,
.todo-add > .btn, .tl-row > .icon-btn, .con-row > .icon-btn{
  height:var(--ctl-h);
  padding:0 18px;
  font-size:14.5px;
  border-radius:var(--ctl-r);
  flex:none;
}
.tl-row > .icon-btn, .con-row > .icon-btn{width:var(--ctl-h);padding:0}

/* Reine Knopfleisten ohne Feld dürfen kompakt bleiben — dort gibt es nichts,
   woran sie sich ausrichten müssten. */
.tl-actions > .btn, .con-actions > .btn, .dlg-actions > .btn{height:var(--ctl-h-sm)}

@media(prefers-reduced-motion:reduce){
  .btn,.icon-btn,.chip,.as-chip{transition:none}
  .btn:hover,.btn:active{transform:none}
}


/* ── Font-Awesome-Symbole ────────────────────────────────────────────────────
   Sie kommen aus assets/icons.svg als gefüllte Pfade, nicht als Striche wie
   das ältere Sprite (#i-…). Deshalb fill statt stroke — sonst bleiben sie
   unsichtbar. Die Grösse hängt an der Textgrösse, damit ein Symbol neben
   einem Wort immer zu diesem Wort passt und nicht zu einer festen Pixelzahl. */
.fa{
  width:1em;height:1em;flex:none;
  fill:currentColor;stroke:none;
  vertical-align:-.125em;
}
.fa.gross{width:1.25em;height:1.25em}