/* Solms.Jetzt fuer Fider (ideen.solms.jetzt)
 *
 * Wird von scripts/fider-postinstall.sh in tenants.custom_css geschrieben.
 * Fider haelt seine Einstellungen ausschliesslich in der Datenbank; diese
 * Datei ist die versionierte Quelle dafuer.
 *
 * Fider bringt eine saubere Erweiterungsstelle mit: die gesamte Primaerfarbe
 * haengt an drei Variablen (--primary-color, --primary-color-dark,
 * --primary-color-light), die es selbst nur als Vorgabewert setzt. Sie zu
 * ueberschreiben faerbt Knoepfe, Verweise und Stimmzaehler auf einen Schlag um
 * und uebersteht ein Fider-Update - anders als das Ueberschreiben einzelner
 * Klassennamen, die sich zwischen Versionen aendern.
 *
 * Farbrollen laut Design-Manual:
 *   Berry  #a9124e  Aktionen und Hervorhebungen -> Fiders "primary"
 *   Indigo #1f4a6c  Flaechen und Navigation     -> Kopfzeile
 */

@font-face {
  font-family: "General Sans";
  src: url("/branding/fonts/GeneralSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/branding/fonts/GeneralSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/branding/fonts/GeneralSans-Semibold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("/branding/fonts/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --solms-indigo: #1f4a6c;
  --solms-indigo-dark: #163751;
  --solms-berry: #a9124e;
  --solms-berry-dark: #870e3e;
  --solms-berry-light: #c8185e;
  --solms-font: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --solms-font-display: "Fredoka", "General Sans", sans-serif;

  /* Die drei Stellschrauben, an denen Fiders Primaerfarbe haengt. */
  --primary-color: var(--solms-berry);
  --primary-color-dark: var(--solms-berry-dark);
  --primary-color-light: var(--solms-berry-light);
}

/* Im dunklen Modus liegt Berry zu dicht am Hintergrund und wird unleserlich;
   die hellere Abstufung haelt den Kontrast. */
body[data-theme="dark"] {
  --primary-color: #e0518a;
  --primary-color-dark: #c8185e;
  --primary-color-light: #f08fb5;
}

body,
input,
textarea,
select,
button {
  font-family: var(--solms-font);
}

/* Fredoka bleibt laut Manual den Ueberschriften vorbehalten. */
.text-display,
.text-display2,
.text-title,
h1,
h2 {
  font-family: var(--solms-font-display);
  letter-spacing: -0.01em;
}

/* Kopfzeile in Indigo - die Flaechenfarbe des Manuals. */
.c-header {
  background: var(--solms-indigo);
  border-bottom: 1px solid var(--solms-indigo-dark);
}
.c-header a,
.c-header .c-menu-item,
.c-header span {
  color: #ffffff;
}

.c-button {
  border-radius: 10px;
  font-weight: 500;
}

/* Der Anmeldeknopf ist die einzige Handlung auf der Anmeldeseite, traegt in
   Fiders Vorgabe aber nur einen grauen Rahmen ohne Flaeche - er liest sich
   dadurch wie ein deaktiviertes Eingabefeld. Die Regel gilt auch fuer die
   Kindelemente, weil Fider Symbol und Beschriftung in eigene Elemente mit
   eigener Farbe legt. */
.c-signin-social-button {
  background: var(--solms-berry);
  border: 1px solid var(--solms-berry);
  border-radius: 10px;
  font-weight: 500;
}
/* Die Beschriftung steckt in einem eigenen span, den Fider selbst grau faerbt.
   Ein Nachkommen-Sternchen (.c-signin-social-button *) hat Gewicht null und
   verliert gegen Fiders span-Regel - deshalb Element und Klasse ausschreiben,
   damit die Regel ohne !important gewinnt. */
a.c-signin-social-button,
a.c-signin-social-button span,
a.c-signin-social-button svg {
  color: #ffffff;
  fill: currentColor;
}
.c-signin-social-button:hover {
  background: var(--solms-berry-dark);
  border-color: var(--solms-berry-dark);
}

body[data-theme="dark"] .c-signin-social-button {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
body[data-theme="dark"] a.c-signin-social-button,
body[data-theme="dark"] a.c-signin-social-button span {
  color: #14202b;
}

/* Der Fokusring darf nicht der Fider-Vorgabe folgen, sonst blitzt bei jedem
   Tabsprung das urspruengliche Blau auf. */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}