/* ============================ Kontrast ============================
   So hat Evi es gewollt: nicht alles in einem Ton. Statt etwas
   einzufaerben, bekommt alles, was man aufklappt oder ausfuellt, einen
   Rahmen in der Akzentfarbe des Designs - auf hellem Grund ein dunkler
   Rahmen (Navy, Graphit ...), auf dunklem Grund ein heller (Hellblau,
   Silber, Gold ...). Die Flaechen bleiben, wie sie sind. Nur Aussehen,
   liegt ganz zuletzt. `node werkzeuge/kontrast-pruefen.js` rechnet nach,
   dass der Rahmen in jedem Design gegen Karte und Grund mindestens
   3 : 1 hat.

   Der Rahmen ist 1,5 px: 1 px Rand plus ein halber Pixel als Ring nach
   innen (kein anderes border-width, sonst ruckelt das Feld beim Tippen,
   siehe "Kein Sprung beim Auswaehlen" in der Politur). */
:root{
  --kn-rahmen:var(--accent);
  --kn-rahmen-fein:color-mix(in srgb, var(--accent) 55%, var(--line));
}

/* ----------------- Aufgeklappter Inhalt einer Liste ----------------- */
:root .cat:not(.is-shut) > .cat-body:not([hidden]){
  margin:2px 10px 10px;
  padding:12px;
  border:1px solid var(--kn-rahmen);
  box-shadow:inset 0 0 0 .5px var(--kn-rahmen);
  border-radius:var(--r-feld);
}

/* Zeilen und Kacheln darin tragen einen feineren Rahmen. */
:root .cat:not(.is-shut) > .cat-body :is(.set-zahlen > *,.hl-liste > *,.zg-modell,.ds-text,.set-stand){
  border:1px solid var(--kn-rahmen-fein);
}

/* ------------------------ Felder zum Ausfuellen ----------------------
   Ueberall in der App. */
:root :is(.field,.af-neu,.pl-neu-zeile,.gb-reihe,.ls-werte,.sg-neu-feld,.sk-neu,.spick-neu,.su-feld,.search-wrap)
  :is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden],[type=range],[type=color],[type=submit],[type=button]),select,textarea),
:root input.sk-name{
  border-color:var(--kn-rahmen);
  box-shadow:inset 0 0 0 .5px var(--kn-rahmen);
}
:root :is(.field,.af-neu,.pl-neu-zeile,.gb-reihe,.ls-werte,.sg-neu-feld,.sk-neu,.spick-neu,.su-feld,.search-wrap)
  :is(input,select,textarea):focus,
:root input.sk-name:focus{
  border-color:var(--kn-rahmen);
  box-shadow:inset 0 0 0 .5px var(--kn-rahmen), 0 0 0 3px var(--accent-soft);
}

/* Die Auswahl der Leistung sieht aus wie ein Feld und traegt denselben Rahmen. */
:root .spick-toggle{
  border-color:var(--kn-rahmen);
  box-shadow:inset 0 0 0 .5px var(--kn-rahmen);
}

/* ---------------- Knoepfe der zweiten Stufe und Chips ----------------
   So hat Evi es gewollt: die getoenten Knoepfe (.btn.subtle: WhatsApp, SMS,
   "Einwilligung unterschreiben lassen", "Bearbeiten" ...) und die Chips
   (Nachrichtenvorlagen, Filter) waren auf dem Grund kaum zu sehen - die
   Toenung lag fast im Ton der Seite, der Rand war 13 % Schrift. Sie tragen
   jetzt den feinen Rahmen in der Akzentfarbe. Die Flaeche bleibt. Der
   gewaehlte Chip bleibt gefuellt, die Reiter mit Strich (Organisation,
   Kundenakte) bleiben ohne Rahmen, "Erledigt" bleibt gruen. :where()
   haelt die Regel der Chips leicht, damit die Reiter sie ueberstimmen. */
:root .btn.subtle:not(.af-fertig),
:root :is(.cf-chip,.chip):where(:not(.on,.an,:has(input:checked))){
  border-color:var(--kn-rahmen-fein);
}
:root :is(.pl-teile,.ka-reiter) .cf-chip:not(.on){border-color:transparent;}
@media (hover:hover) and (pointer:fine){
  :root .btn.subtle:not(.af-fertig):hover:not([disabled]),
  :root :is(.cf-chip,.chip):where(:not(.on,.an,:has(input:checked))):hover{border-color:var(--kn-rahmen);}
  :root :is(.pl-teile,.ka-reiter) .cf-chip:not(.on):hover{border-color:transparent;}
}