/* asterbuild.ai — System-Steuerelemente zaehmen
 * ─────────────────────────────────────────────────────────────
 * Auswahlfelder und Zahlenfelder zeichnet das Betriebssystem sonst
 * selbst: grauer Verlaufsbalken mit Doppelpfeil, Drehknoepfe an jedem
 * Preisfeld. In einer Tabelle mit hunderten Zeilen sieht das aus wie
 * ein Formular von 2003 und schlaegt jedes Layout darueber.
 *
 * Diese Datei wird als LETZTES im Kopf eingebunden, damit sie die
 * seiteneigenen Regeln bei gleicher Spezifitaet gewinnt.
 *
 * Bewusst NICHT angefasst: Groesse, Farbe und Rahmen der Felder. Die
 * kommen weiter von der jeweiligen Seite, hier geht es nur um das
 * Aussehen, das der Browser von sich aus draufsetzt.
 */

/* Der Pfeil als Variable, damit die drei Seiten mit eigenem
   Hintergrundverlauf ihn danebenlegen koennen, statt ihn zu kopieren. */
:root {
  --feld-pfeil: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236F6962' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Auswahlfelder ──────────────────────────────────────────────── */
/* Die Spezifitaet ist Absicht.
 *
 * Fast jede Seite hat eine eigene Regel wie ".kf select { background:#fff }".
 * Die Kurzform "background" setzt background-image auf none zurueck — und
 * damit war der Pfeil weg, obwohl ihn niemand wegnehmen wollte. Bei
 * ".kf select" (0,1,1) verliert ein blosses "select" (0,0,1).
 *
 * ":not(.eigener-hintergrund)" bringt die Klasse mit, ohne dass am Feld
 * eine stehen muss: der Selektor zaehlt (0,1,1). Bei Gleichstand gewinnt,
 * was spaeter kommt, und diese Datei wird als letztes geladen. Damit
 * traegt jedes Auswahlfeld seinen Pfeil, auch das auf der naechsten neuen
 * Seite, deren Autor an diese Falle nicht denkt.
 *
 * (Ein blosses "select[class]" reichte NICHT: es verlangt eine Klasse am
 * Feld selbst, und fast alle werden ueber die Elternklasse gestylt.)
 *
 * Wer bewusst ein eigenes Hintergrundbild will — die Glas-Verlaeufe in
 * lvs.html, dashboard.html und preisbasis.html — schreibt den Pfeil als
 * zweite Lage in seine eigene Regel und hebt sie ueber (0,1,1), indem er
 * die Klasse verdoppelt: ".field.field select". Kein Eingriff ins Markup,
 * und im Selektor steht, dass hier Absicht im Spiel ist. */
select,
select:not(.eigener-hintergrund) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Eigener Pfeil als Data-URI: kein zusaetzlicher Netzabruf, und er
     erbt ueber currentColor die Textfarbe des Feldes. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236F6962' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  /* Platz fuer den Pfeil, sonst laeuft langer Text darunter durch. */
  padding-right: 30px;
  cursor: pointer;
}
/* Ohne das bleibt in Firefox der gepunktete Fokusrahmen im Text stehen. */
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
/* Der Pfeil gehoert nur an aufgeklappte Felder, nicht an Mehrfachlisten. */
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 10px; }

/* ── Zahlenfelder ───────────────────────────────────────────────── */
/* Die Drehknoepfe helfen bei Preisen niemandem: man tippt 2500,00 und
   klickt nicht 250.000 Mal. In einer Tabelle stehlen sie ausserdem die
   Breite, die die Zahl braucht. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Datumsfelder ───────────────────────────────────────────────── */
/* Das Kalendersymbol bleibt, es ist die einzige Bedienhilfe. Nur der
   Innenabstand wird angeglichen, sonst sitzt es am Rand fest. */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Die Auf-/Ab-Pfeilchen in Datum und Zeit gehoeren zu keinem Layout,
   das wir gebaut haben. Getippt wird ohnehin. */
input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button { display: none; }

/* ── Dateifelder ────────────────────────────────────────────────── */
/* Meistens sind sie versteckt und ein eigener Knopf steht davor. Wo
   eines doch sichtbar ist, zeichnet der Browser sonst seinen grauen
   Systemknopf mitten in die Seite. */
input[type="file"] { font: inherit; color: var(--muted, #6F6962); }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  margin-right: 12px;
  border: 1px solid var(--line, #EDEBE7);
  border-radius: 9px;
  background: #fff;
  color: var(--text-2, #2A2522);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
input[type="file"]::file-selector-button:hover {
  background: var(--bg, #F4F5F8);
  border-color: var(--muted-2, #A09A93);
}

/* ── Farbwaehler ────────────────────────────────────────────────── */
/* Ohne das hier ist es ein grauer Kasten mit einem Farbfleck darin.
   Gewollt ist der Farbfleck, sonst nichts. */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--line, #EDEBE7);
  border-radius: 9px;
  padding: 3px;
  background: #fff;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }

/* ── Schieberegler ──────────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: var(--line, #EDEBE7);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 99px; background: var(--line, #EDEBE7);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--orange, #ED3206); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11,8,7,.25);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange, #ED3206); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11,8,7,.25);
}

/* ── Suchfelder ─────────────────────────────────────────────────── */
/* Safari setzt in jedes type=search ein eigenes Loeschkreuz und rundet
   das Feld selbst ab. Beides passt nicht zu den uebrigen Feldern. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }