/* Farbwelt „Weiterbildungen Online", Fassung Nachtblau und Gold (final 13.08.2026).
   Farbwerte und Logo-Paket: siehe README im Logo-Paket der Vertriebsmarke.

   Diese Datei laden NUR die öffentlichen, WBO-gebrandeten Seiten über das
   Include templates/public/_wbo_kopf.html, immer NACH portal.css:
   Landingpages /p/<code> und /b/<code>, Zugangsseite /zugang,
   Registrierungsseite /partner-werden samt Danke-Seite.
   Der interne Bereich (Träger, Netzwerk, Partner nach Anmeldung) lädt sie
   nicht. Er sieht trotzdem gleich aus: portal.css trägt seit dem 14.08.2026
   selbst die WBO-Palette. Der frühere Satz an dieser Stelle, der interne
   Bereich behalte „die SkillSprinters-Farben aus portal.css", stimmt seitdem
   nicht mehr und ist am 28.08.2026 bei der Markenprüfung des Kanals
   aufgefallen; gemessen ist in portal.css kein Farbwert der Trägermarke mehr
   enthalten. Was hier übrig bleibt, sind die Overrides der öffentlichen
   Seiten, vor allem die .held-Regeln der Landingpages. */

:root {
  /* WBO-Palette */
  --wbo-nachtblau: #0E2A47;      /* Primär: Headlines, Flächen, Buttons */
  --wbo-nachtblau-tief: #0A1F36; /* Hover auf Nachtblau */
  --wbo-gold: #C9A227;           /* Akzente, Linien */
  --wbo-dunkelgold: #B08D2F;     /* goldene Schrift auf hellem Grund */
  --wbo-sand: #F4EFE6;           /* helle Flächen */
  --wbo-sand-linie: #E5D4A3;     /* Linien auf und um Sandflächen */
  --wbo-dunkel: #0E1826;         /* dunkle Kopf- und Fußflächen */
  --wbo-creme: #F2ECE0;          /* Schrift auf dunklem Grund */
  --wbo-gold-dunkel: #D4AF37;    /* Gold auf dunklem Grund */

  /* Die Akzentvariablen aus portal.css auf die WBO-Welt umgelenkt. Alles,
     was var(--orange), var(--blau) und Co. benutzt, folgt automatisch. */
  --orange: var(--wbo-nachtblau);
  --orange-dark: var(--wbo-nachtblau-tief);
  --orange-light: var(--wbo-sand);
  --blau: var(--wbo-gold);
  --blau-dark: var(--wbo-dunkelgold);
  --blau-light: var(--wbo-sand);
  --dark: var(--wbo-dunkel);
}

/* Kopf: die dunkle Fläche trägt Gold statt Orange. */
.kopf .marke span { color: var(--wbo-gold-dunkel); }

/* Trägerzeile: die AZAV-Pflichtangabe bleibt kontraststark lesbar,
   deshalb Nachtblau statt Goldschrift auf der hellen Fläche. */
.traegerzeile { border-bottom-color: var(--wbo-sand-linie); }
.traegerzeile strong { color: var(--wbo-nachtblau); }

/* Sandflächen bekommen eine goldgetönte Linie statt der alten Pastellränder. */
.karte.hell { border-color: var(--wbo-sand-linie); }
.karte.blau { border-color: var(--wbo-sand-linie); }
.hinweis.info { color: var(--wbo-nachtblau); border-color: var(--wbo-sand-linie); }

/* Zweiter Knopf: Gold mit Nachtblau-Schrift statt Türkis mit Weiß,
   weil weiße Schrift auf Gold zu wenig Kontrast hat. */
.knopf.blau { background: var(--wbo-gold); color: var(--wbo-nachtblau); }
.knopf.blau:hover { background: var(--wbo-dunkelgold); }

/* Auf der dunklen Heldfläche wäre ein Nachtblau-Knopf unsichtbar: dort ist
   der erste Knopf Gold, der zweite eine Kontur in Creme und Gold. */
.held .knopf { background: var(--wbo-gold-dunkel); color: var(--wbo-nachtblau); }
.held .knopf:hover { background: var(--wbo-gold); }
.held .knopf.blau { background: transparent; color: var(--wbo-creme);
  box-shadow: inset 0 0 0 1px var(--wbo-gold-dunkel); }
.held .knopf.blau:hover { background: rgba(212, 175, 55, .16); }

/* Zustandschip „Zulassung läuft" in den Produkttabellen. */
.zustand.neu { background: var(--wbo-sand); color: var(--wbo-nachtblau);
  box-shadow: inset 0 0 0 1px var(--wbo-sand-linie); }

/* Fuß: dunkle Fläche mit Goldlinie, Schrift Creme, der Träger in Gold.
   Die Trägerkennung steht hier und muss sichtbar bleiben (AZAV-Auflage). */
.fuss { background: var(--wbo-dunkel); border-top: 3px solid var(--wbo-gold);
  color: var(--wbo-creme); }
.fuss strong { color: var(--wbo-gold-dunkel); }
.fuss a { color: var(--wbo-gold-dunkel); }

/* ==========================================================================
   Zugangsschwelle: das Schloss unter / und die Codeseite /zugang
   ==========================================================================
   Beide Seiten sind der erste Eindruck des Vertriebskanals und dürfen deshalb
   nicht nach dem Träger aussehen. Sie tragen die Marke der aufgerufenen
   Adresse, und welche das ist, entscheiden die Daten und nicht diese Datei:
   hier steht kein einziger Dateiname und kein Markenname.

   Alles hängt an der Körperklasse `schlossseite`. Ohne sie greift keine dieser
   Regeln, damit die übrigen öffentlichen Seiten unberührt bleiben.
   `info.html` bringt gleichnamige Klassen in einem eigenen Style-Block mit und
   lädt diese Datei gar nicht erst, deshalb kollidiert dort nichts.

   Die Flächen sind bewusst hell. Ein fremdes Netzwerklogo kommt als genau eine
   Datei, und die ist fast immer für hellen Grund gezeichnet; auf einer dunklen
   Leiste wäre sie im Zweifel unlesbar und das Schloss unbrauchbar. */

body.schlossseite {
  background: var(--wbo-sand);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.schlossseite > main { flex: 1 0 auto; }

/* Kopf: helle Fläche, Goldkante nach oben. Es ist dieselbe Linie, die den Fuß
   der übrigen Kanalseiten trägt, und sie bindet die Schwelle sichtbar an die
   Marke, ohne dass dafür eine Fläche oder ein Schriftzug nötig wäre. */
.schlossseite .schlosskopf {
  background: #fff;
  border-top: 3px solid var(--wbo-gold);
  border-bottom: 1px solid var(--wbo-sand-linie);
  padding: 22px 24px;
  text-align: center;
}
.schlossseite .schlosskopf img.logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: min(280px, 72vw);
  margin: 0 auto;
}
/* Der Schriftzug ist der Rückfall, wenn die hinterlegte Logodatei fehlt. Er
   steht von Anfang an im Quelltext und wird erst sichtbar, wenn das Bild nicht
   lädt: ein kaputtes Bild wäre als erster Eindruck schlimmer als kein Bild. */
.schlossseite .schlosskopf .wortmarke { display: none; }
.schlossseite .schlosskopf .wortmarke.zeigen {
  display: block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .2px;
  color: var(--wbo-nachtblau);
}

.schlossseite .inhalt { max-width: 780px; padding-top: 34px; }

/* Vorspann. Er sagt, worum es geht, bevor die Seite etwas verlangt, und
   entfällt auf Adressen mit `zugang_nackt`. */
.schlossseite .vorspann { max-width: 660px; margin: 0 auto; text-align: center; }
.schlossseite .vorspann h1 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -.4px;
  color: var(--wbo-nachtblau);
}
.schlossseite .vorspann .lead {
  margin: 0 auto;
  max-width: 600px;
  font-size: 16px;
  color: var(--g700);
}
.schlossseite .punkte {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  max-width: 660px;
  display: grid;
  /* Zwei feste Spalten statt einer automatischen Aufteilung: die vier Punkte
     ergeben so einen geschlossenen Block. Automatisch gesetzt fielen drei in
     die erste Zeile und einer blieb als Waise darunter stehen. */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.schlossseite .punkte li {
  background: #fff;
  border: 1px solid var(--wbo-sand-linie);
  border-radius: 10px;
  padding: 15px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--g700);
  text-align: left;
}
.schlossseite .punkte li b {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  color: var(--wbo-nachtblau);
}
/* Ein goldener Strich statt eines Aufzählungszeichens: er wiederholt die
   Kante des Kopfes und hält die vier Kacheln ohne Farbfläche zusammen. */
.schlossseite .punkte li b:before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 9px;
  background: var(--wbo-gold);
}

/* Die Codekarte. Sie ist die einzige Stelle, an der die Seite etwas verlangt,
   und deshalb das schwerste Element der Seite. */
.schlossseite .schlosskarte {
  max-width: 460px;
  margin: 32px auto 0;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--wbo-sand-linie);
  border-top: 3px solid var(--wbo-gold);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(14, 42, 71, .10);
}
/* Ohne Vorspann steht die Karte allein. Dann rückt sie tiefer ins Bild, damit
   auf den ersten Blick klar ist, dass es hier nichts anderes zu tun gibt. */
.schlossseite .schlosskarte.nurschloss { margin-top: 74px; }
.schlossseite .schlosskarte h1,
.schlossseite .schlosskarte h2 {
  margin: 0 0 8px;
  font-size: 21px;
  text-align: center;
  color: var(--wbo-nachtblau);
}
.schlossseite .schlosskarte .lead {
  margin: 0 0 20px;
  font-size: 14.5px;
  text-align: center;
  color: var(--g700);
}
.schlossseite .schlosskarte label {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--g500);
}
/* Das Codefeld ist die Aufgabe der Seite: groß, mittig, mit gesperrter
   Schrift, weil ein Code Zeichen für Zeichen gelesen und abgetippt wird. */
.schlossseite #kennung,
.schlossseite #code {
  padding: 13px 14px;
  border: 1.5px solid var(--g300);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .08em;
  color: var(--wbo-nachtblau);
}
.schlossseite #kennung::placeholder,
.schlossseite #code::placeholder {
  font-weight: 400;
  letter-spacing: .04em;
  color: #B4B4B4;
}
.schlossseite #kennung:focus,
.schlossseite #code:focus {
  border-color: var(--wbo-gold);
  outline: 3px solid rgba(201, 162, 39, .32);
  outline-offset: 0;
}
.schlossseite .schlosskarte .knopf {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 15.5px;
}
.schlossseite .schlosskarte .klein { text-align: center; }
/* Ein Fehler an der Schwelle muss auffallen. Sonst tippt jemand denselben
   falschen Code ein zweites Mal und hält die Seite für kaputt. */
.schlossseite .hinweis.error {
  border-left: 4px solid var(--rot);
  font-weight: 500;
  text-align: left;
}

.schlossseite .ohnecode {
  max-width: 460px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--g500);
}

/* Fuß: nur eine Haarlinie, keine dunkle Fläche. Was hier steht, sind
   Pflichtangaben und die Sachangabe zum Träger, kein Absender. */
.schlossseite .schlossfuss {
  margin-top: 36px;
  padding: 30px 20px 44px;
  border-top: 1px solid var(--wbo-sand-linie);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--g500);
}
.schlossseite .schlossfuss strong { font-weight: 600; color: var(--g700); }
.schlossseite .schlossfuss a { color: var(--g700); }
.schlossseite .schlossfuss a:hover { color: var(--wbo-nachtblau); }

@media (max-width: 640px) {
  .schlossseite .schlosskopf { padding: 16px; }
  .schlossseite .schlosskopf img.logo { height: 34px; }
  .schlossseite .inhalt { max-width: none; padding: 26px 14px 40px; }
  .schlossseite .vorspann h1 { font-size: 24px; }
  .schlossseite .punkte { grid-template-columns: 1fr; }
  .schlossseite .schlosskarte {
    margin-top: 24px;
    padding: 20px 18px 22px;
    border-radius: 12px;
  }
  .schlossseite .schlosskarte.nurschloss { margin-top: 36px; }
}