/* ==========================================================================
   WHL Keycloak Theme — Login CSS
   Design language: Inter, slate-900 dark panel, teal-600 accent (#16a48e)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --panel-bg: #0f172a; /* slate-900  */
  --panel-text: #ffffff;
  --panel-muted: #94a3b8; /* slate-400  */
  --accent: #16a48e; /* teal-600   */
  --accent-hover: #128372; /* teal-700   */
  --bg: #ffffff;
  --text: #1e293b; /* slate-800  */
  --text-muted: #64748b; /* slate-500  */
  --border: #e2e8f0; /* slate-200  */
  --input-bg: #f8fafc; /* slate-50   */
  --radius: 0.625rem;
  --error: #ef4444;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --info: #2563eb;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Two-column page layout
   -------------------------------------------------------------------------- */
.kc-page {
  display: flex;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Left panel (2/5 = 40%)
   -------------------------------------------------------------------------- */
.kc-left {
  width: 40%;
  background: var(--panel-bg);
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2.5rem;
  flex-shrink: 0;
  position: relative;
}

/* Top row: back arrow left, logo flush right */
.kc-left__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Back arrow button */
.kc-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  flex-shrink: 0;
}

.kc-back:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.kc-back svg {
  width: 1rem;
  height: 1rem;
}

/* Centered body — extra bottom padding shifts content upward */
.kc-left__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 0 6rem;
  position: relative;
}

.kc-left__content {
  max-width: 400px;
  /* consistent left indent for title + footer, past the back arrow */
  margin-left: calc(2.25rem + 6rem);
}

/* Logo in the top row, same height as the back arrow */
.kc-logo {
  height: 1.875rem;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  display: block;
}

.kc-left__title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--panel-text);
  letter-spacing: -0.02em;
}

/* Green highlight on a specific word */
.kc-green {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Right panel (60%)
   -------------------------------------------------------------------------- */
.kc-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3rem 2rem 3rem 5rem;
  background: #ffffff;
}

.kc-form-container {
  width: 100%;
  max-width: 420px;
}

/* --------------------------------------------------------------------------
   Alert / feedback messages
   -------------------------------------------------------------------------- */
.kc-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  border: 1px solid;
}

.kc-alert--error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}
.kc-alert--success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}
.kc-alert--warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}
.kc-alert--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

/* --------------------------------------------------------------------------
   Notice box (info banner above the login form)
   -------------------------------------------------------------------------- */
.kc-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
  background: var(--info-bg);
}

.kc-notice__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  color: var(--info);
}

.kc-notice__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e40af; /* blue-800 */
}

.kc-notice__text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1d4ed8; /* blue-700 */
}

/* --------------------------------------------------------------------------
   Form elements
   -------------------------------------------------------------------------- */
.kc-form {
  display: flex;
  flex-direction: column;
}

.kc-field {
  margin-bottom: 1.25rem;
}

.kc-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

/* Pflichtfeld-Markierung: rotes Sternchen hinter dem Label. Rein visuell
   (aria-hidden am span) -- die Pflicht selbst tragen das required-Attribut
   bzw. die serverseitige Prüfung in LegacyDbRegistrationAction. */
.kc-label__required {
  margin-left: 0.15rem;
  font-weight: 700;
  color: var(--error);
}

.kc-input {
  display: block;
  width: 100%;
  padding: 0.8125rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.kc-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 164, 142, 0.12);
  background: #ffffff;
}

.kc-input.is-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.kc-input::placeholder {
  color: #b0bec5;
}

/* .kc-input strips the native control chrome, so a select needs its arrow drawn
   back on. Inlined as a data URI: the login theme is served by Keycloak, which
   has no build step to resolve an image reference here. */
select.kc-input {
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2378909c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

/* Nur die Platzhalter-Option graut sich aus, nicht der ganze select. Die
   fruehere Fassung setzte die Farbe zusaetzlich ueber select.kc-input:invalid
   -- damit erbte beim Aufklappen die gesamte Liste die graue Farbe des
   Elternelements (Chromium rendert offene Options nach der Select-Farbe),
   und erst nach der ersten Auswahl (:invalid greift nicht mehr) sahen die
   Eintraege wieder normal aus. Ohne :invalid bleibt die Liste immer normal
   gefaerbt, nur die Platzhalter-Zeile selbst ist grau. */
select.kc-input option[value=""] {
  color: #b0bec5;
}

/* --------------------------------------------------------------------------
   Two-step registration: tier cards, then the details form
   -------------------------------------------------------------------------- */

/* Everything below only splits the form once script has run. Without it both
   steps stay visible and the form still submits -- the step buttons are what
   gets hidden, not the fields. */
.kc-step__nav,
.kc-chosen {
  display: none;
}

.js .kc-step__nav {
  display: block;
}

.js .kc-form[data-step="tier"] .kc-step--details,
.js .kc-form[data-step="details"] .kc-step--tier {
  display: none;
}

/* Two cards do not fit the 420px the details form is tuned for. Widening the
   container is scoped to the tier step so the fields keep their comfortable
   measure; if :has is missing, the grid below stacks instead of squeezing. */
.js .kc-form-container:has(.kc-form[data-step="tier"]) {
  max-width: 46rem;
}

/* Details step, ~30% breiter als die 420px-Basis (auf Kundenwunsch, die
   Felder wirkten schmal). Scoped statt am Standardwert der Container-Klasse
   zu drehen, damit Login & Co. bei ihrem schmaleren Mass bleiben. */
.js .kc-form-container:has(.kc-form[data-step="details"]) {
  max-width: 34rem;
}

.kc-plans {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

.kc-plans__legend {
  padding: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

.kc-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.kc-plan {
  display: block;
  cursor: pointer;
}

.kc-plan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-bg);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}

.kc-plan:hover .kc-plan__card {
  border-color: #cbd5e1;
}

.kc-plan:has(input:checked) .kc-plan__card {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow:
    0 0 0 1px var(--accent),
    0 6px 20px rgba(15, 23, 42, 0.06);
}

/* Keyboard users get the focus ring on the card, not on the small radio. */
.kc-plan:has(input:focus-visible) .kc-plan__card {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Visually hidden, not display:none: the input stays in the tab order and
   keeps native radio semantics (keyboard selection, :has(input:checked/
   :focus-visible) above still fire), it just isn't drawn -- the card border
   and background from :has(input:checked) are already the selection cue,
   a second dot next to it was redundant. */
.kc-plan input[type="radio"] {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.kc-plan__title {
  padding-right: 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}

.kc-plan__subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.kc-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0.75rem 0 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}

.kc-plan__tax {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.kc-plan__features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kc-plan__feature {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text);
}

.kc-plan__feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Premium is a request, not an instant upgrade -- saying so on the card is
   cheaper than answering the same question by e-mail afterwards. */
.kc-plan__note {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Chosen-tier bar above the details form: states the decision and takes the
   user back to it. */
.js .kc-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: none;
}

.kc-chosen__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kc-chosen__label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.kc-chosen__value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

.kc-chosen__change {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.kc-chosen__change:hover {
  color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   Conditional premium block
   -------------------------------------------------------------------------- */
/* The premium block is shown by default and hidden for the free tier, never the
   other way round. A browser that does not understand :has then shows fields the
   user does not need instead of hiding fields the form insists on — the failure
   mode has to be "too much", because the FormAction rejects the submission when
   a required premium field is missing. */
.kc-form:has(#tier-free:checked) .kc-premium-block {
  display: none;
}

.kc-premium-block {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.kc-premium-block__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.kc-premium-block__hint {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.kc-premium-block .kc-field:last-child {
  margin-bottom: 0;
}

/* Street/number and postcode/city belong on one line — splitting them across
   full-width rows makes a short field look like it wants a long answer. */
.kc-field-row {
  display: flex;
  gap: 0.75rem;
}

.kc-field-row .kc-field--grow {
  flex: 1 1 auto;
  min-width: 0;
}

.kc-field-row .kc-field--narrow {
  flex: 0 0 8rem;
}

@media (max-width: 480px) {
  .kc-field-row {
    display: block;
  }

  .kc-field-row .kc-field--narrow {
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   Conditional university field
   -------------------------------------------------------------------------- */
/* Shown by default and hidden for every sector except Studierende (Branche_ID
   31), never the other way round — the same reasoning as the premium block
   above. A browser without :has drops the whole selector as invalid and keeps
   the field visible, which is the harmless direction: the FormAction demands
   the value when sector 31 was chosen, so a hidden mandatory field would be a
   dead end.

   Deliberately independent of the tier: a student can ask for premium, and
   then the company is the invoicing party while this stays their university. */
.kc-form:not(:has(#sector option[value="31"]:checked)) .kc-university {
  display: none;
}

/* --------------------------------------------------------------------------
   Consent checkbox — multi-line legal text next to the box, so the label is a
   two-column grid instead of the single-line .kc-checkbox-label row above.
   -------------------------------------------------------------------------- */
.kc-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.kc-consent input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.kc-consent a {
  color: var(--accent);
}

.kc-field-error {
  font-size: 0.875rem;
  color: var(--error);
  margin-top: 0.375rem;
  display: block;
}

/* .kc-field-error setzt display:block und schlaegt damit die UA-Regel fuer
   [hidden]; die clientseitige E-Mail-Pruefung (js/login-validate.js) blendet
   ihre Meldung ueber das hidden-Attribut ein und aus. */
.kc-field-error[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Password rules
   --------------------------------------------------------------------------
   The list itself is rendered by register.ftl from the realm's password policy
   and ticked off by password-rules.js while typing. Without JavaScript it stays
   as it is rendered: a plain, neutral list of what is required. That is the
   reason nothing here is red by default -- an untouched form that already
   complains reads as broken, and a browser without script would show exactly
   that forever.
   -------------------------------------------------------------------------- */
.kc-pwrules {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kc-pwrule {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color 0.15s;
}

/* Der Marker ist ein Pseudo-Element: der Zustand haengt damit an EINER Klasse pro
   Zeile, und im Markup steht kein Icon, das ein Skript austauschen muesste.

   Die Zeichen stehen als echte Zeichen da, nicht als CSS-Escape: eine Escape-Sequenz
   fuer den Bullet wurde beim Erzeugen der Datei einmal als OKTAL-Escape gelesen
   und landete als U+0082 im Stylesheet; im Formular standen daraufhin Ersatz-
   zeichen statt Haken und Kreuz. Einem Zeichen, das man liest, passiert das nicht. */
.kc-pwrule::before {
  content: "•"; /* grau: noch nichts beurteilt */
  position: absolute;
  left: 0.25rem;
  font-weight: 700;
}

/* Gruen, sobald die Regel erfuellt ist -- auch mitten im Tippen. Eine erfuellte
   Regel abzuhaken stoert niemanden; sie vorzeitig rot zu faerben schon. */
.kc-pwrule.is-met {
  color: var(--success);
}

.kc-pwrule.is-met::before {
  content: "✓";
}

/* Rot erst, wenn die Eingabe abgeschlossen ist -- siehe password-rules.js. */
.kc-pwrule.is-unmet {
  color: var(--error);
}

.kc-pwrule.is-unmet::before {
  content: "✕";
}

/* Live hint under the confirmation field. Hidden until something is typed. */
.kc-field-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}

.kc-field-hint[hidden] {
  display: none;
}

.kc-field-hint.is-met {
  color: var(--success);
}
.kc-field-hint.is-unmet {
  color: var(--error);
}

/* The submit button stays visible while it is locked, rather than vanishing or
   turning into something that no longer looks like a button: the registrant has
   to be able to see WHAT they are being kept from, with the unmet rules right
   above it saying why. */
.kc-btn-primary:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

.kc-btn-primary:disabled:hover {
  background: var(--border);
}

/* --------------------------------------------------------------------------
   Checkbox row (remember me + forgot password)
   -------------------------------------------------------------------------- */
.kc-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  min-height: 1.25rem;
}

.kc-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.kc-checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.kc-forgot {
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.kc-forgot:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.kc-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.9375rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
  letter-spacing: 0.01em;
}

/* Auf der Info-Seite ist der Button ein Link. */
a.kc-btn-primary {
  text-decoration: none;
}

.kc-btn-primary:hover {
  background: var(--accent-hover);
}
.kc-btn-primary:active {
  transform: scale(0.99);
}

/* --------------------------------------------------------------------------
   Erklaerender Fliesstext
   Seiten ohne Eingabefeld (E-Mail bestaetigen, neues Passwort setzen) bestehen
   ueberwiegend aus Text. Ohne eigene Klasse faende der auf den Browser-Default
   zurueck -- schwarz statt slate-800 und mit anderer Zeilenhoehe als die Labels
   daneben.
   -------------------------------------------------------------------------- */
.kc-prose {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.kc-prose + .kc-prose {
  margin-top: 0.875rem;
}

.kc-prose--small {
  font-size: 0.8125rem;
}

/* Ueberschrift fuer textlastige Seiten ohne Eingabefeld, direkt im
   Formular-Container statt im linken Panel (z. B. E-Mail bestaetigen). */
.kc-prose-heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* Die Adresse, an die die Mail ging, ist die eine Information, wegen der der
   Benutzer die Seite liest -- sie darf nicht im Fliesstext untergehen. */
.kc-prose strong {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Divider & secondary links
   -------------------------------------------------------------------------- */
.kc-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.625rem 0;
}

.kc-divider::before,
.kc-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.kc-divider span {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.kc-secondary-link {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.kc-secondary-link a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}

.kc-secondary-link a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Back-to-login text link
   -------------------------------------------------------------------------- */
.kc-link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 1.5rem;
  transition: color 0.15s;
}

.kc-link-back:hover {
  color: var(--text);
}

.kc-link-back svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------------------------------------------------------------
   Left panel footer (IML service + legal links)
   -------------------------------------------------------------------------- */
.kc-left__footer {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* same left indent as the title above */
  margin-left: calc(2.25rem + 6rem);
}

.kc-left__service {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.kc-left__service-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #475569;
}

.kc-left__iml-logo {
  background: #ffffff;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
}

.kc-left__iml-logo img {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
  display: block;
}

.kc-left__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
}

.kc-left__legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s;
}

.kc-left__legal a:hover {
  color: #ffffff;
}

.kc-left__legal-dot {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

/* --------------------------------------------------------------------------
   Responsive — mobile: stacked layout

   Der dunkle Balken oben (.kc-left) traegt normalerweise Titel UND den Footer
   mit "Ein Service des" plus den Rechtslinks. Auf dem Handy soll dieser Footer
   nicht mit oben im Balken stehen, sondern ganz unten unter dem Formular.

   Dafuer loest sich .kc-left per `display: contents` auf: seine Kinder
   (__top, __body, __footer) werden zu direkten Flex-Elementen von .kc-page und
   lassen sich einzeln per order() sortieren -- Formular (.kc-right) dazwischen,
   Footer zuletzt. Hintergrund und Innenabstand, die vorher an .kc-left hingen,
   ziehen dabei auf die einzelnen Bloecke um. Der Desktop bleibt unberuehrt.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .kc-page {
    flex-direction: column;
  }

  .kc-left {
    display: contents;
  }

  .kc-left__top,
  .kc-left__body {
    background: var(--panel-bg);
  }

  .kc-left__top {
    order: 1;
    padding: 1.5rem 1.5rem 0;
  }

  .kc-left__body {
    order: 2;
    flex: none;
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .kc-right {
    order: 3;
    padding: 2rem 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .kc-left__footer {
    order: 4;
    margin-left: 0;
    padding: 1.5rem;
    background: var(--panel-bg);
    border-top: none;
  }

  .kc-left__title {
    font-size: 1.5rem;
  }

  .kc-logo {
    margin-bottom: 1.5rem;
  }

  .kc-left__content {
    margin-left: 0;
  }
}