/* Marke Ibavi - wird NACH styles.css geladen (BRAND_THEME=/brand/theme.css).
 *
 * Grundsatz: nur Farben und die Kopfzeile. Kein Layout, keine Abstaende, keine
 * Schriftarten - alles andere bleibt exakt wie in styles.css. So bleibt ein
 * kuenftiger Nachtrag an der Oberflaeche fuer beide Traeger gueltig.
 *
 * Palette gemessen, nicht geraten:
 *   #4c87ca  Primaerblau   (20x auf ibavi.de)
 *   #3d6ca2  dunkles Blau  (Akzent/Hover auf ibavi.de)
 *   #4a86c6  Blau im Logo  (Doktorhut, aus der PNG ausgelesen)
 *   #7a7a7a  Grau im Logo  (Wortmarke, aus der PNG ausgelesen)
 *   #777777  Grau der Site
 *   #f5f5f5  heller Grund der Site
 * Ibavi hat kein Cyan. Wo Stepgoal Cyan benutzt, stehen hier hellere Stufen
 * desselben Blaus - sonst haette die Oberflaeche eine Farbe, die die Marke
 * nicht kennt.
 */

:root {
  /* --- Blau: Ibavi statt Royal/Cyan --- */
  --royal-deep: #3d6ca2;
  --royal:      #4c87ca;
  --cyan:       #6d9fd6;
  --sky:        #8ab4e0;
  --cyan-light: #aecbe9;
  --sky-tint:   #e9f0f8;

  /* --- Grundflaechen: Ibavi ist grauer als Stepgoal, nicht blaustichig --- */
  --bg:    #f5f5f5;
  --paper: #ffffff;
  --field: #ffffff;
  --line:  #e3e3e3;

  /* --- Schrift: neutrales Grau statt blaugrau. --gray ist bereits exakt die
         Farbe der Wortmarke und bleibt deshalb unveraendert. --- */
  --text:  #4a4a4a;
  --muted: #777777;
  --char:  #353636;

  /* --- Verlaeufe und Schatten auf das Ibavi-Blau ziehen --- */
  --grad-band: linear-gradient(100deg, #3d6ca2 0%, #4c87ca 55%, #6d9fd6 100%);
  --grad-btn:  linear-gradient(135deg, #4c87ca 0%, #3d6ca2 100%);
  --shadow:    0 12px 34px rgba(61, 108, 162, .13);
  --shadow-sm: 0 4px 14px rgba(61, 108, 162, .09);
  --focus:     0 0 0 3px rgba(76, 135, 202, .24);

  /* --amber, --warn, --warn-line, --bad, --ok bleiben: Statusfarben sind
     keine Markenfarben. Rot muss rot bleiben. */
}

/* --- Kopfzeile oben links: Wortmarke statt Schriftzug -----------------------
 * Die Kopfzeile ist markup-seitig <span class="brand">Ibavi <span
 * class="brand-ki">KI-Assistent</span></span>. Der Name kommt aus BRAND_NAME
 * und wird fuer den Browser-Titel gebraucht; sichtbar soll an seiner Stelle
 * aber das Logo stehen. Deshalb hier: Schriftgroesse der aeusseren Spanne auf
 * 0 (das schluckt den Textknoten "Ibavi" samt Leerzeichen), Logo als
 * Hintergrund - als SVG aus logo.pdf, skaliert also auf jedem Bildschirm -
 * und fuer .brand-ki die Groesse wieder herstellen.
 * .brand-ki hat in styles.css bewusst keine eigene Regel - hier ist die erste.
 */
.brand {
  display: flex;
  align-items: center;
  min-height: 28px;
  font-size: 0;
  padding-left: 70px;
  background-image: url("/brand/logo-wort.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 22px;
}
.brand-ki {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
}

/* --- Die Stellen, die in styles.css feste Farbwerte tragen ------------------
 * Sie folgen den Variablen nicht. Es sind durchweg helle Tuepfelchen auf
 * Abzeichen, Tabellenkoepfen und Hover-Zustaenden - in Stepgoals Cyan. Ohne
 * diesen Block saehe die Oberflaeche zweifarbig aus.
 */
#login {
  background: linear-gradient(140deg, var(--sky-tint) 0%, var(--bg) 55%, #e4ecf6 100%);
}
.dtable th { background: #eef2f7; }

.badge.admin        { background: #e9eff7; color: #35618f; border-color: #c4d7ec; }
.badge.coach        { border-color: #c9dbf0; }
.badge.fallmanager  { background: #eaf0fa; color: #35618f; border-color: #cbdcf0; }
.chip.t-16k         { background: #e9eff9; border-color: #cbdcf0; }
.type.dis           { background: #f0f2f5; }
.iconbtn.regen:hover        { background: #dde8f5; }
.wl-akt .iconbtn.open       { border-color: #cbdcf0; background: #eef3fa; }
.wl-akt .iconbtn.open:hover { background: #e2ebf7; }
.wl-betr em                 { color: #c4cfda; }

/* --- Eingebettete Grafiken --------------------------------------------------
 * styles.css traegt drei SVGs als data:-URI im Stylesheet. Ihre Farben stehen
 * INNERHALB der Grafik und folgen deshalb keiner Variablen. Ohne diesen Block
 * behielte die Ibavi-Oberflaeche Stepgoals Royalblau und Cyan im Seitenmuster
 * und in den Auswahlpfeilen. Erzeugt von faerbe_grafiken.py.
 */
/* Hintergrundmuster: Doktorhuete und Funken, in styles.css als base64-SVG
 * eingebettet. Variablen erreichen es nicht - hier dieselbe Grafik, nur mit
 * den Ibavi-Farben. Formen Zeichen fuer Zeichen unveraendert. */
body::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjQwIDI0MCI+CiAgPGcgZmlsbD0iIzNkNmNhMiIgZmlsbC1vcGFjaXR5PSIwLjA1Ij4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyIDI4KSByb3RhdGUoLTEwKSBzY2FsZSgxLjU1KSI+CiAgICAgIDxwYXRoIGQ9Ik0yMCAzIEwzOSAxMiBMMjAgMjEgTDEgMTIgWiIvPgogICAgICA8cGF0aCBkPSJNOCAxNS41IEw4IDI0IEMxMS41IDI3LjUgMTUuNSAyOSAyMCAyOSBDMjQuNSAyOSAyOC41IDI3LjUgMzIgMjQgTDMyIDE1LjUgTDIwIDIxIFoiLz4KICAgICAgPHJlY3QgeD0iMzguMiIgeT0iMTIiIHdpZHRoPSIxLjUiIGhlaWdodD0iMTMiLz4KICAgICAgPHBhdGggZD0iTTM2LjcgMjQuNSBoNSBsLTEuMyA2IGgtMi40IHoiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAxMzApIHJvdGF0ZSgxMikgc2NhbGUoMS4yKSI+CiAgICAgIDxwYXRoIGQ9Ik0yMCAzIEwzOSAxMiBMMjAgMjEgTDEgMTIgWiIvPgogICAgICA8cGF0aCBkPSJNOCAxNS41IEw4IDI0IEMxMS41IDI3LjUgMTUuNSAyOSAyMCAyOSBDMjQuNSAyOSAyOC41IDI3LjUgMzIgMjQgTDMyIDE1LjUgTDIwIDIxIFoiLz4KICAgICAgPHJlY3QgeD0iMzguMiIgeT0iMTIiIHdpZHRoPSIxLjUiIGhlaWdodD0iMTMiLz4KICAgICAgPHBhdGggZD0iTTM2LjcgMjQuNSBoNSBsLTEuMyA2IGgtMi40IHoiLz4KICAgIDwvZz4KICA8L2c+CiAgPGcgZmlsbD0iIzZkOWZkNiIgZmlsbC1vcGFjaXR5PSIwLjA3Ij4KICAgIDxwYXRoIGQ9Ik0xOTIgNDAgQzE5MyA0NC40IDE5My42IDQ1IDE5OCA0NiBDMTkzLjYgNDcgMTkzIDQ3LjYgMTkyIDUyIEMxOTEgNDcuNiAxOTAuNCA0NyAxODYgNDYgQzE5MC40IDQ1IDE5MSA0NC40IDE5MiA0MCBaIi8+CiAgICA8cGF0aCBkPSJNNTQgMTUwIEM1NC44IDE1My41IDU1LjMgMTU0IDU4LjggMTU0LjggQzU1LjMgMTU1LjYgNTQuOCAxNTYuMSA1NCAxNTkuNiBDNTMuMiAxNTYuMSA1Mi43IDE1NS42IDQ5LjIgMTU0LjggQzUyLjcgMTU0IDUzLjIgMTUzLjUgNTQgMTUwIFoiLz4KICAgIDxwYXRoIGQ9Ik0xNTAgMTk2IEMxNTAuNiAxOTguNyAxNTEgMTk5IDE1My44IDE5OS42IEMxNTEgMjAwLjIgMTUwLjYgMjAwLjYgMTUwIDIwMy40IEMxNDkuNCAyMDAuNiAxNDkgMjAwLjIgMTQ2LjIgMTk5LjYgQzE0OSAxOTkgMTQ5LjQgMTk4LjcgMTUwIDE5NiBaIi8+CiAgICA8cGF0aCBkPSJNMTAwIDIwIEMxMDAuNSAyMi4yIDEwMC44IDIyLjUgMTAzIDIzIEMxMDAuOCAyMy41IDEwMC41IDIzLjggMTAwIDI2IEM5OS41IDIzLjggOTkuMiAyMy41IDk3IDIzIEM5OS4yIDIyLjUgOTkuNSAyMi4yIDEwMCAyMCBaIi8+CiAgPC9nPgo8L3N2Zz4K"); }
.ueb-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23777777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); }
.ueb-field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%233d6ca2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); }