/* ==========================================================================
   Buchungsstrecke "Einstieg" — bkm consultants
   Token verbindlich nach tokens.md vom 10.08.2026.
   Aenderungen nur mit ausdruecklicher Freigabe.
   ========================================================================== */

/* --- Schrift, lokal aus /einstieg/fonts/, ohne externen Aufruf ----------- */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-tight-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-tight-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-tight-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-tight-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Token -------------------------------------------------------------- */

:root {
  --flaeche:       #fffefb;
  --text:          #3c3c37;
  --titel:         #2a2f36;
  --primaer:       #2e6e68;
  --akzent:        #1e4b64;
  --warmweiss:     #faf5e8;
  --fehler:        #b82105;

  --tcg-navy:      #041D3F;
  --tcg-gold:      #D0A562;

  /* Neutrale Kante. Nicht die Primaerfarbe von bkm: die Kachel der
     Akademie darf keine bkm-Kante tragen. */
  --kante:         #7c7c73;

  /* Heller Schleier ueber dem Hintergrundbild. 0.72 ist der gepruefte
     Wert: dunkelster Text erreicht damit 8,00:1 ueber der hellsten
     Bildstelle. Niedriger nicht ohne erneute Kontrastpruefung. */
  --schleier:      rgba(253, 251, 245, 0.72);
  --schleier-tief: rgba(253, 251, 245, 0.84);

  --breite:        640px;
  --rand:          1.5rem;
  --sp-s:          1.25rem;
  --sp-m:          2rem;
  --sp-l:          2.5rem;

  --schrift:       'Inter Tight', system-ui, sans-serif;
}

/* --- Grundlage ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--sp-l) var(--rand) var(--sp-m);
  min-height: 100vh;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Hintergrundbuehne --------------------------------------------------
   Feststehend, damit auf Mobilgeraeten kein Ruckeln beim Scrollen
   entsteht. Der Schleier haelt den Kontrast unabhaengig davon, wie
   hell oder unruhig das Bild an einer Stelle ist.
   ------------------------------------------------------------------------ */

.buehne {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--flaeche);
  background-image:
    linear-gradient(var(--schleier-tief), var(--schleier) 40%, var(--schleier-tief)),
    url('bild/hintergrund.webp');
  background-size: cover;
  /* Rechte untere Ecke bleibt im Bild: dort sitzt die
     KI-Kennzeichnung. Bei einem anderen Wert schneidet
     "cover" sie auf Hochformat-Anzeigen weg. */
  background-position: right bottom;
  background-repeat: no-repeat;
}

.huelle {
  max-width: var(--breite);
  margin: 0 auto;
}

/* --- Kopf --------------------------------------------------------------- */

.kopf { margin-bottom: var(--sp-m); }

.kopf__titel {
  margin: 0;
  color: var(--titel);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.kopf__unter {
  margin: 0.5rem 0 0;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.45;
}

/* --- Kacheln ------------------------------------------------------------ */

.kacheln {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kacheln > li + li { margin-top: var(--sp-s); }

.kachel {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 88px;
  padding: 1.25rem 1.375rem;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  color: var(--titel);
  text-decoration: none;
  transition: transform 120ms ease-out;
}

/* min-width: 0 ist hier die entscheidende Zeile. Ohne sie schrumpft ein
   Flex-Element nie unter seine kleinste Inhaltsbreite — bei einem Wort
   wie "Sicherheitsverantwortung" verdraengt der Titel dann das Logo aus
   der Kachel. Mit 0 darf die Spalte schmaler werden als das laengste Wort.

   hyphens: auto greift, weil das Dokument auf lang="de" steht. Damit
   trennt der Browser deutsche Komposita an zulaessigen Stellen, statt
   sie umbruchlos ueberstehen zu lassen. overflow-wrap ist der Notnagel
   fuer den Fall, dass keine Trennstelle gefunden wird.

   Die Schriftgroesse folgt der Breite: 18 px auf schmalen Geraeten,
   22 px ab etwa 470 px Fensterbreite. */

.kachel__text {
  flex: 1 1 auto;
  min-width: 0;
}

.kachel__titel {
  display: block;
  font-size: clamp(1.125rem, 4.2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Traegerlogo rechts. Feste Hoehe, damit beide Marken optisch
   gleich gross wirken; die Breite folgt dem Seitenverhaeltnis.
   flex-shrink 0 verhindert, dass das Logo bei langen Titeln
   zusammengedrueckt wird. */

/* Fester Platz fuer das Logo, unabhaengig vom Seitenverhaeltnis.
   Beide Zeichen sitzen dadurch in einer Flucht und wirken gleich
   gewichtet, obwohl das eine breiter ist als das andere.
   object-fit haelt das Verhaeltnis, object-position bindet es rechts. */

/* Das Logo darf die Kachelhoehe nicht bestimmen. Die Hoehe von 34 px
   liegt unter dem, was Titel plus Innenabstand ohnehin ergeben — die
   Kachel bleibt damit exakt so hoch wie ohne Logo. */

.kachel__logo {
  flex: 0 0 84px;
  width: 84px;
  height: 32px;
  object-fit: contain;
  object-position: right center;
}

/* Hinweis auf den Wechsel des Anbieters. Steht unter dem Titel in
   derselben Spalte; das Logo bleibt rechts in seiner Flucht. */

.kachel__extern {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Alle Kacheln sind gleich. Die Trägerzugehoerigkeit traegt
   allein das Logo — in Bild und in der Alternativbeschriftung.
   Keine Farbcodierung, damit keine Marke bevorzugt wirkt. */

/* --- Zustaende ---------------------------------------------------------- */

.kachel:hover  { transform: translateY(-1px); }
.kachel:active { transform: translateY(0); }

.kachel:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

/* --- Fuss --------------------------------------------------------------- */

.fuss {
  margin-top: var(--sp-l);
  padding-top: var(--sp-s);
  border-top: 1px solid rgba(42, 47, 54, 0.25);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.fuss a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.fuss a:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.fuss__trenner { padding: 0 0.375rem; }

/* --- Grosse Anzeigen ---------------------------------------------------- */

@media (min-width: 40rem) {
  body { padding-top: 4rem; }
  .kopf__titel { font-size: 2.125rem; }
  .kachel { padding: 1.5rem 1.625rem; }
  .kachel__logo { flex-basis: 112px; width: 112px; height: 38px; }
  .kachel { gap: 1.25rem; }
  .buehne { background-position: center bottom; }
}

/* --- Zugaenglichkeit ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .kachel { transition: none; }
  .kachel:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --schleier: rgba(253, 251, 245, 0.92); --schleier-tief: rgba(253, 251, 245, 0.96); }
}

/* ==========================================================================
   Formularseite
   ========================================================================== */

.kopf__anlass {
  margin: 0.5rem 0 0;
  padding-left: 0.875rem;
  border-left: 4px solid var(--primaer);
  color: var(--titel);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

/* --- Hinweisblock ------------------------------------------------------- */

.hinweis {
  margin-bottom: var(--sp-m);
  padding: 1rem 1.125rem;
  background: var(--flaeche);
  border: 1px solid var(--primaer);
}
.hinweis p { margin: 0; }
.hinweis--fehler { border-color: var(--fehler); }

/* --- Felder -------------------------------------------------------------- */

.feld { margin-bottom: 1.25rem; }

.feld label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--titel);
  font-size: 1rem;
  font-weight: 700;
}

.feld input,
.feld select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--titel);
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.feld select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--titel) 50%),
                    linear-gradient(135deg, var(--titel) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.feld input:focus-visible,
.feld select:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"] {
  border-color: var(--fehler);
  border-width: 2px;
}

.feld__fehler {
  margin: 0.375rem 0 0;
  color: var(--fehler);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Koeder: fuer Menschen und Vorlesesoftware unerreichbar,
   fuer einfache Skripte aber ein normales Feld. Bewusst nicht
   allein ueber display:none geloest. */

.koeder {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Datenschutzhinweis und Knopf --------------------------------------- */

.datenschutz {
  margin: 1.5rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.datenschutz a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.knopf {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1.25rem;
  background: var(--primaer);
  border: 1px solid var(--primaer);
  border-radius: 0;
  color: var(--flaeche);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.knopf:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

.knopf:disabled {
  background: var(--titel);
  border-color: var(--titel);
  cursor: default;
}

/* --- Status und Bestaetigung -------------------------------------------- */

.status {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
}
.status:empty { margin: 0; }
.status--fehler {
  color: var(--fehler);
  font-weight: 700;
}

.bestaetigung {
  padding: 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--primaer);
}
.bestaetigung:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}
.bestaetigung h2 {
  margin: 0 0 0.75rem;
  color: var(--titel);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}
.bestaetigung p { margin: 0 0 0.5rem; }
.bestaetigung p:last-child { margin-bottom: 0; }
.bestaetigung a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Nur fuer Vorlesesoftware. Ein Verweis, der ein neues Fenster oeffnet,
   muss angekuendigt werden — sichtbar stoert der Zusatz, hoerbar fehlt
   er sonst. */

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}