@import url("/assets/theme.css");
:root {
  color-scheme: light;
  --accent-text: #9b2c2c;
  --surface-background: #ffffff;
  --status-text: #162b4d;
  --status-background: #efe8da;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #f5f1e8;
  color: #162b4d;
}

* { box-sizing: border-box; }

body:not(.ui) {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #fff 0, #f5f1e8 58%);
}

.shell {
  width: min(100% - 2rem, 62rem);
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid #d8cfbd;
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 1.5rem 4rem rgb(22 43 77 / 12%);
}

.eyebrow {
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: .4rem 0 1rem;
  font-size: clamp(2.25rem, 8vw, 5rem);
  line-height: .95;
}

p { max-width: 42rem; line-height: 1.65; }

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .8rem;
  margin-top: 2rem;
}

.area-grid a,
.back {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: .8rem;
  background: #162b4d;
  color: white;
  font-weight: 700;
  text-decoration: none;
}

.back { display: inline-block; margin-top: 1rem; }

.module-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d8cfbd;
}

.module-head a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  color: inherit;
  font-weight: 800;
  text-underline-offset: .2em;
}

.module-head p { margin: 0; color: #4d5b70; font-weight: 700; }
.module-head { flex-wrap: wrap; }
.module-nav { display: flex; min-width: 0; max-width: 100%; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; }
.module-nav a { min-width: 3rem; justify-content: center; }
.module-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: .15em; }
.module-help-start { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.account-menu { position: relative; flex: none; margin-left: auto; color: var(--ui-ink); }
.account-menu-button {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; aspect-ratio: 1; padding: 0;
  border: 0; border-radius: 50%; background: var(--ui-action); color: var(--ui-on-action);
  font: inherit; font-weight: 900; letter-spacing: .02em; cursor: pointer;
}
.account-menu-button:hover { filter: brightness(.94); }
.account-menu-silhouette { position: relative; display: block; width: 1.35rem; height: 1.35rem; }
.account-menu-silhouette::before, .account-menu-silhouette::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: currentColor;
}
.account-menu-silhouette::before { top: .05rem; width: .55rem; height: .55rem; border-radius: 50%; }
.account-menu-silhouette::after { bottom: .05rem; width: 1.15rem; height: .58rem; border-radius: .7rem .7rem .25rem .25rem; }
.account-menu-button:focus-visible, .account-menu-item:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.account-menu-panel {
  position: absolute; z-index: 40; top: calc(100% + .5rem); right: 0; display: grid; gap: .25rem;
  width: min(22rem, calc(100vw - 2rem)); padding: .6rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}
.account-menu-panel[hidden] { display: none; }
.account-menu-identity { display: grid; gap: .15rem; padding: .7rem .75rem .85rem; border-bottom: 1px solid var(--ui-line); }
.account-menu-name { overflow-wrap: anywhere; font-size: 1.05rem; }
.account-menu-role { color: var(--ui-muted); font-size: .86rem; font-weight: 700; }
.account-menu-item {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 3rem; padding: .65rem .75rem;
  border: 0; border-radius: var(--ui-radius-small); background: transparent; color: inherit;
  font: inherit; font-weight: 750; text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu-item:hover { background: var(--ui-soft); text-decoration: none; }
.account-menu-item:disabled { opacity: .6; cursor: progress; }
.module-help-start, .help-here-holder { justify-content: flex-end; }
/* The grey area label repeats the highlighted link; show it only when no link is highlighted. */
.module-head:has(a[aria-current="page"]) > p { display: none; }
/* On a phone eleven links must not eat a third of the first screen: one swipeable line. */
@media (max-width: 40rem) {
  .module-head { flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: .5rem; }
  .module-nav {
    flex: 1 1 100%; order: 2;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .module-head > p { order: 3; }
  .module-head > .account-menu { order: 1; }
  .account-menu-panel { position: fixed; top: .5rem; right: 1rem; max-height: calc(100dvh - 1rem); overflow-y: auto; }
}

.module-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

.module-card {
  display: grid;
  gap: .6rem;
  min-height: 11rem;
  padding: 1.25rem;
  border: 1px solid #d8cfbd;
  border-radius: 1rem;
  color: inherit;
  text-decoration: none;
  background: rgb(255 255 255 / 78%);
}

.module-card:hover { border-color: #162b4d; box-shadow: 0 .8rem 2rem rgb(22 43 77 / 12%); }
.module-card h2,
.module-card p { margin: 0; }
.module-card p { color: #4d5b70; }

.module-state {
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: .8rem;
  background: var(--status-background);
  color: var(--status-text);
}

.module-state:empty { display: none; }
.module-state[role="alert"] { border: 1px solid #9b2c2c; color: #7a1f1f; }

.module-button {
  appearance: none;
  min-height: 2.75rem;
  padding: .7rem 1rem;
  border: 1px solid #162b4d;
  border-radius: .7rem;
  background: #162b4d;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.module-button-danger { border-color: #9b2c2c; background: transparent; color: #7a1f1f; }
.module-button-danger:hover { background: #9b2c2c; color: #fff; }
a:focus-visible,
button:focus-visible { outline: 3px solid #9b2c2c; outline-offset: 3px; }

/* Shared product foundation. It is opt-in so existing specialist pages retain their layout. */
.ui {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font: 16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}

.ui .shell {
  width: min(100% - 2rem, 73.75rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) 0 4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui .eyebrow {
  margin: 0 0 .75rem;
  color: var(--ui-muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.ui h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.ui h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.ui h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.ui p { max-width: 47.5rem; }
.ui .lead { margin: .75rem 0 0; color: var(--ui-muted); font-size: 1.1rem; }
.ui .page-intro { margin-bottom: 2rem; }

/* Shared surface for the school, examination and family workflows. */
.ui .ui-page-grid { display: grid; gap: 1rem; }
.ui .ui-section-card,
.ui :is(.exam-card, .family-panel, .family-change, .family-person, .consent-card, .tr-card, .id-card, .id-item, .doc-card, .p6-card) {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}
.ui .ui-state,
.ui :is(.exam-boundary, .family-state, .consent-warning, .tr-legal, .id-banner, .doc-status, .p6-status) {
  min-width: 0;
  padding: .85rem 1rem;
  border-left: 4px solid var(--ui-accent);
  border-radius: 0 var(--ui-radius-small) var(--ui-radius-small) 0;
  background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface));
  color: var(--ui-ink);
  overflow-wrap: anywhere;
}
.ui :is(.family-state, .id-status, .doc-status, .p6-status):empty { display: none; }
.ui :is(.exam-grid, .exam-list, .family-people, .family-actions, .p6-grid, .id-stack) {
  min-width: 0;
}
.ui :is(.exam-heading, .p6-heading) { margin-bottom: 1rem; }
.ui :is(.exam-shell, .family-shell, .consent-shell, .tr-shell, .id-shell, .doc-shell, .p6-shell) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.ui :is(.exam-card, .family-panel, .family-change, .consent-card, .tr-card, .id-card, .doc-card, .p6-card) > :first-child { margin-top: 0; }
.ui :is(.exam-card, .family-panel, .family-change, .consent-card, .tr-card, .id-card, .doc-card, .p6-card) > :last-child { margin-bottom: 0; }
.ui :is(.exam-skip, .family-skip, .consent-skip, .tr-skip, .p6-skip) {
  position: absolute;
  left: -999rem;
}
.ui :is(.exam-skip, .family-skip, .consent-skip, .tr-skip, .p6-skip):focus {
  z-index: 10;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--ui-radius-small);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.ui .office-groups { display: grid; gap: 2rem; }
.ui .office-group { display: grid; gap: .85rem; min-width: 0; }
.ui .office-tile-grid,
.ui .tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.ui .office-tile,
.ui .ui-card,
.ui .module-card {
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}

.ui .office-tile {
  display: grid;
  gap: .45rem;
  min-height: 8rem;
  padding: 1.15rem;
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ui .office-tile:hover,
.ui .module-card:hover {
  border-color: var(--ui-primary);
  box-shadow: 0 12px 30px rgb(23 54 95 / 13%);
  transform: translateY(-2px);
}

.ui .office-tile-title { font-weight: 800; }
.ui .office-tile-description,
.ui .module-description { color: var(--ui-muted); }
.ui .office-tile-description { font-size: .94rem; }

.ui .module-head { border-color: var(--ui-line); }
.ui .module-head p { color: var(--ui-muted); }
.ui .module-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ui .module-card { align-content: start; min-height: 12rem; padding: 1.25rem; }
.ui a.module-card { grid-template-rows: auto 1fr; }

.ui .module-chip,
.ui .chip {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--status-background);
  color: var(--status-text);
  font-size: .85rem;
  font-weight: 800;
}

.ui .module-chip.is-enabled,
.ui .chip-success { background: var(--ui-success-bg); color: var(--ui-success); }

.ui button,
.ui .button,
.ui .back {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid var(--ui-action);
  border-radius: var(--ui-radius-small);
  background: var(--ui-action);
  color: var(--ui-on-action);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.ui .button-secondary,
.ui .module-button-danger {
  border-color: var(--ui-primary);
  background: transparent;
  color: var(--ui-primary);
}

.ui .back { margin-top: 2rem; }
.ui .module-toggle { justify-self: start; margin-top: .35rem; border-radius: 999px; }
.ui .module-button-danger:hover { background: var(--ui-danger); color: #fff; }
.ui .module-dialog {
  width: min(calc(100% - 2rem), 30rem);
  padding: 1.4rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}
.ui .module-dialog::backdrop { background: rgb(10 20 38 / 72%); }
.ui .module-dialog h2 { margin: 0; }
.ui .module-dialog p { margin: .75rem 0 1.25rem; color: var(--ui-muted); }
.ui .module-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.ui button:disabled { cursor: wait; opacity: .65; }

.ui label { display: grid; gap: .35rem; font-weight: 700; }
/* Checkboxes and radio buttons keep a normal size; the generic full-width input rule below blew them up (exams page). */
.ui input[type="checkbox"],
.ui input[type="radio"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; flex: none; accent-color: var(--ui-primary); }
.ui label:has(input[type="checkbox"], input[type="radio"]) { min-height: 48px; align-items: center; }
.ui input,
.ui select,
.ui textarea {
  width: 100%;
  min-height: 48px;
  padding: .65rem .75rem;
  border: 1px solid #8893a2;
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font: inherit;
}

.ui textarea { min-height: 7rem; resize: vertical; }
/* KG3 (153303): the school's consent text at every Yes/No switch ("Text lesen"); always plain text via textContent. */
.kgp-consent-read { min-width: 0; margin: .4rem 0; }
.kgp-consent-read > summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-weight: 700;
  color: var(--ui-primary, inherit); text-decoration: underline; text-underline-offset: .2em; }
.kgp-consent-read > summary:focus-visible { outline: 3px solid var(--ui-primary, currentColor); outline-offset: 2px; }
.kgp-consent-text { display: grid; gap: .55rem; min-width: 0; margin-top: .4rem; }
.kgp-consent-text h3 { margin: 0; font-size: 1.05rem; }
.kgp-consent-text-meta { margin: 0; font-size: .9rem; color: var(--ui-muted, inherit); overflow-wrap: anywhere; }
.kgp-consent-text-body { max-height: min(50vh, 28rem); overflow: auto; padding: .85rem 1rem; border: 1px solid var(--ui-line, currentColor);
  border-radius: .7rem; background: var(--ui-surface, Canvas); color: var(--ui-ink, CanvasText); white-space: pre-wrap;
  overflow-wrap: anywhere; line-height: 1.5; text-align: left; font-weight: 400; }
.kgp-consent-text-body:focus-visible { outline: 3px solid var(--ui-primary, currentColor); outline-offset: 2px; }
.kgp-consent-text-languages { display: flex; flex-wrap: wrap; gap: .4rem; }
.kgp-consent-text-languages button { min-height: 2.75rem; min-width: 2.75rem; padding: .4rem .8rem; border: 1px solid var(--ui-line, currentColor);
  border-radius: .6rem; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.kgp-consent-text-languages button[aria-pressed="true"] { background: var(--ui-primary, #162b4d); color: #fff; }
.kgp-consent-text-missing { margin: 0; padding: .75rem .9rem; border-left: .35rem solid #ba6b00; border-radius: .6rem;
  background: var(--ui-surface, transparent); color: var(--ui-ink, inherit); font-weight: 700; }
.ui table { width: 100%; border-collapse: collapse; }
.ui th,
.ui td { padding: .75rem; border-bottom: 1px solid var(--ui-line); text-align: left; }

.ui .module-state,
.ui .status-message {
  padding: .85rem 1rem;
  border-left: 4px solid var(--ui-accent);
  border-radius: 0 var(--ui-radius-small) var(--ui-radius-small) 0;
  background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface));
  color: var(--ui-ink);
}

.ui .module-state[role="alert"],
.ui .status-error { border-color: var(--ui-danger); background: var(--ui-danger-bg); color: var(--ui-danger); }
.ui :focus-visible {
  outline: 3px solid var(--ui-ring);
  outline-offset: 3px;
}

.ui :where(a, button, p, h1, h2, h3, td, th, span) { overflow-wrap: anywhere; }

@media (min-width: 48rem) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ui .shell { width: min(100% - 2rem, 73.75rem); padding-top: 1.25rem; }
  .ui .office-tile-grid,
  .ui .tile-grid { grid-template-columns: 1fr; }
  .ui .office-tile { min-height: 0; }
  .ui table,
  .ui thead,
  .ui tbody,
  .ui tr,
  .ui th,
  .ui td { display: block; }
  .ui thead { display: none; }
  .ui tr { padding: .65rem 0; border-bottom: 1px solid var(--ui-line); }
  .ui td { padding: .25rem 0; border: 0; }
  .ui :is(.exam-heading, .p6-heading, .doc-row, .id-actions) { align-items: stretch; flex-direction: column; }
  .ui :is(.exam-heading button, .doc-row > *, .id-actions > *, .tr-form button) { width: 100%; }
}



/* Walkthrough surfaces: shared treatment for the existing office workflows. */
.ui .page-intro {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.ui .page-intro > :is(p, h1) { margin: 0; }
.ui .page-intro > :last-child { color: var(--ui-muted); font-size: 1.08rem; }

.ui .workflow-card,
.ui .mb-card,
.ui .ad-card,
.ui .p6-card,
.ui .setup-card,
.ui .id-card {
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}

.ui .page-actions,
.ui .mb-row,
.ui .ad-actions,
.ui .p6-actions,
.ui .id-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}

.ui :is(.mb-button, .ad-button, .p6-button, .setup-button, .id-button) {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-action);
  border-radius: var(--ui-radius-small);
  background: var(--ui-action);
  color: var(--ui-on-action);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}

.ui :is(.mb-button, .ad-button, .p6-button, .setup-button, .id-button).secondary {
  border-color: var(--ui-primary);
  background: transparent;
  color: var(--ui-primary);
}

.ui .ui-skip,
.ui :is(.mb-skip, .ad-skip, .p6-skip) {
  position: fixed;
  z-index: 20;
  top: -6rem;
  left: 1rem;
  padding: .7rem 1rem;
  border-radius: var(--ui-radius-small);
  background: var(--ui-action);
  color: var(--ui-on-action);
}

.ui :is(.mb-skip, .ad-skip, .p6-skip):focus { top: 1rem; left: 1rem; }

.ui :is(.mb-status, .ad-status, .p6-status, .setup-state, .id-status) {
  min-height: 1.5rem;
  margin-block: .75rem;
  font-weight: 700;
}

.ui :is(.mb-status, .ad-status, .p6-status, .setup-state, .id-status):not(:empty) {
  padding: .8rem 1rem;
  border-left: 4px solid var(--ui-accent);
  border-radius: 0 var(--ui-radius-small) var(--ui-radius-small) 0;
  background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface));
}

.ui.ui-login {
  display: block;
  padding: clamp(1rem, 5vw, 3rem) 0;
  background:
    linear-gradient(180deg, var(--ui-band, #0b1d36) 0 13rem, transparent 13rem),
    var(--ui-bg);
}

.ui.ui-login .id-shell {
  width: min(100% - 2rem, 38rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: 0 18px 48px rgb(11 29 54 / 18%);
}

.ui .id-stack { display: grid; gap: 1rem; }
.ui .id-field { display: grid; gap: .4rem; font-weight: 750; }
.ui .id-links { display: flex; flex-wrap: wrap; gap: .65rem; }
.ui .id-banner { padding: 1rem; border-left: 4px solid var(--ui-accent); background: var(--status-background); }
.ui .id-banner.ok { border-color: var(--ui-success); background: var(--ui-success-bg); color: var(--ui-success); }
.ui .id-secret { display: block; padding: .8rem; border-radius: var(--ui-radius-small); background: var(--status-background); overflow-wrap: anywhere; }
.ui [hidden] { display: none !important; }
.ui[data-page-state="neutral"] [data-when="ready"],
.ui[data-page-state="ready"] [data-when="neutral"] { display: none; }

/* Roles page: Kum-Gang person cards. */
.ui[data-page="roles"] .id-stack,
.ui[data-page="roles"] .id-list { min-width: 0; }
.ui[data-page="roles"] .id-card {
  min-width: 0;
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-inline-start: .3rem solid var(--ui-accent);
  box-shadow: var(--ui-shadow);
}
.ui[data-page="roles"] .id-item {
  min-width: 0;
  padding: 1rem;
  gap: .8rem;
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-inline-start: .3rem solid var(--ui-accent);
  box-shadow: var(--ui-shadow);
}
.ui[data-page="roles"] .id-item-head { align-items: center; gap: .65rem; }
.ui[data-page="roles"] .id-item-head > span { min-width: 0; flex: 1 1 14rem; font-size: 1.05rem; }
.ui[data-page="roles"] .id-chips { gap: .5rem; }
.ui[data-page="roles"] .id-chip {
  max-width: 100%;
  border: 1px solid var(--ui-line);
  background: var(--ui-soft);
  color: var(--ui-ink);
  overflow-wrap: anywhere;
}
.ui[data-page="roles"] :is(.id-banner, .id-secret) {
  border-color: var(--ui-accent);
  background: var(--ui-soft);
  color: var(--ui-ink);
}
.ui[data-page="roles"] .id-banner.ok {
  border-color: var(--ui-success);
  background: var(--ui-success-bg);
  color: var(--ui-success);
}
.ui[data-page="roles"] .id-add-role {
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-small);
  background: var(--ui-soft);
}
.ui[data-page="roles"] .id-add-role select { max-width: 100%; }

@media (max-width: 600px) {
  .ui[data-page="roles"] .id-item-head { align-items: stretch; }
  .ui[data-page="roles"] .id-item-head > span { flex-basis: 100%; }
  .ui[data-page="roles"] .id-item-head > .id-button { width: 100%; }
  .ui[data-page="roles"] .id-chip { width: 100%; justify-content: space-between; }
}
/* End roles page. */

@media (max-width: 600px) {
  .ui .page-actions > :is(button, .button, .mb-button, .ad-button, .p6-button, .setup-button, .id-button) {
    width: 100%;
  }

  .ui :is(.mb-card, .ad-card, .p6-card, .setup-card, .id-card) { padding: 1rem; }
  .ui.ui-login { padding-top: 2rem; background-size: 100% 11rem; }
}

.ui .id-card > summary { cursor: pointer; font-weight: 700; }
.ui .id-card[open] > summary { margin-bottom: 0.75rem; }

/* Wide, modern office layout (Hakan 03.11.2026: "nicht mal auf voller breite"). The page uses the screen, cards get
   a clear hierarchy, the shared navigation becomes one bar. Text columns keep their reading width. */
.ui .shell {
  width: min(100% - clamp(2rem, 6vw, 8rem), 112rem); min-width: 0;
  grid-template-columns: minmax(0, 1fr); padding-top: clamp(1rem, 2vw, 2rem);
}
.ui .module-nav {
  position: sticky; top: 0; z-index: 5; gap: .35rem; min-width: 0; max-width: 100%;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2.25rem); padding: .5rem .6rem;
  border: 1px solid var(--ui-line); border-radius: 999px;
  background: color-mix(in srgb, var(--ui-surface) 92%, transparent); backdrop-filter: blur(8px);
  box-shadow: var(--ui-shadow);
}
.ui .module-nav a {
  flex: 0 0 auto; min-width: 48px; min-height: 3rem; padding: .45rem .95rem; border-radius: .65rem;
  font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--ui-ink);
}
.ui .module-nav a:hover { background: color-mix(in srgb, var(--ui-primary) 9%, transparent); }
.ui .module-nav a[aria-current="page"] { background: var(--ui-action); color: var(--ui-on-action); text-decoration: none; }
.ui .page-intro h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.ui .office-groups { gap: clamp(2rem, 3vw, 3rem); }
.ui .office-group > h2 {
  display: flex; align-items: center; gap: 1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-muted);
}
.ui .office-group > h2::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.ui .office-tile-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.ui .office-tile {
  position: relative; min-height: 8.5rem; padding: 1.35rem 1.4rem 1.25rem; overflow: hidden;
  border: 1px solid var(--ui-line); border-radius: 1.1rem; background: var(--ui-surface);
  box-shadow: var(--ui-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ui .office-tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: .3rem; background: var(--ui-action); opacity: .85;
}
.ui .office-tile:hover, .ui .office-tile:focus-visible {
  transform: translateY(-2px); border-color: var(--ui-primary); box-shadow: 0 .9rem 2.2rem rgb(22 43 77 / 14%);
}
.ui .office-tile-title { font-size: 1.12rem; }
@media (prefers-reduced-motion: reduce) { .ui .office-tile { transition: none; } .ui .office-tile:hover { transform: none; } }
@media (max-width: 600px) { .ui .module-nav { border-radius: 1rem; } }

/* School logo and short name at the start of the staff navigation (KG17 578246, variant A). Blue logo on light, white on dark. */
.module-nav a.module-brand { display: inline-flex; align-items: center; gap: .55rem; padding-inline: .6rem .8rem; font-weight: 800; white-space: nowrap; }
.school-logo { flex: none; display: block; width: 28px; height: 28px; }
.school-logo-dark { display: none; }
.module-brand-name { font-size: 1rem; letter-spacing: .01em; }
.module-brand-sep { flex: none; align-self: center; width: 1px; height: 1.75rem; margin-inline: .15rem .35rem; background: var(--ui-line, #d8cfbd); }
:root[data-theme="dark"] .school-logo-light { display: none; }
:root[data-theme="dark"] .school-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .school-logo-light { display: none; }
  :root:not([data-theme="light"]) .school-logo-dark { display: block; }
}
/* Where the full name would push the links onto a second line (below 75rem) and on a phone, the logo stands alone; on a phone the
   swipeable line also keeps it at its left edge while the links move. */
@media (max-width: 75rem) { .module-brand-name, .module-brand-sep { display: none; } .module-nav a.module-brand { padding-inline: .35rem; margin-right: .2rem; border-right: 1px solid var(--ui-line, #d8cfbd); border-radius: .65rem; } }
/* The logo takes room the links had on a narrow laptop or a tablet held wide: they close ranks a little so the line does not break earlier than before. */
@media (min-width: 40.0625rem) and (max-width: 75rem) { .ui .module-nav a:not(.module-brand) { padding-inline: .7rem; } }
@media (max-width: 40rem) {
  .module-brand-sep { display: none; }
  .module-nav a.module-brand { position: sticky; left: 0; z-index: 1; padding-inline: .6rem; background: var(--ui-surface, #fff); border-right: 1px solid var(--ui-line, #d8cfbd); border-radius: .65rem 0 0 .65rem; }
}

/* Type scale for people who do not work with computers all day: large, calm, readable from a tablet. */
.ui { font-family: var(--ui-font); font-size: 18px; line-height: 1.55; background: var(--ui-bg); color: var(--ui-ink); }
.ui h1 { font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: 700; }
.ui h2 { font-size: 1.35rem; font-weight: 700; }
.ui .lead { font-size: 1.25rem; }
.ui :is(button, .id-button, input, select, textarea) { font-family: inherit; font-size: 1rem; }
.ui :is(button, .id-button, a.button):not(.secondary) { min-height: 3rem; padding-inline: 1.3rem; border-radius: var(--ui-radius-small); font-weight: 700; }
.ui :is(input:not([type=checkbox], [type=radio]), select, textarea) { min-height: 3rem; border-radius: var(--ui-radius-small); }
.ui label, .ui .id-field > span { font-weight: 700; font-size: .98rem; }

.ui .ct-price-label { display: grid; gap: .3rem; }
.ui .ct-price-input { width: 100%; }

/* "So geht's" box: large, coloured, the first thing on every page. */
.ui .page-help {
  margin: 0 0 1.5rem; border: 2px solid var(--ui-accent); border-radius: var(--ui-radius);
  background: color-mix(in srgb, var(--ui-accent) 22%, var(--ui-surface)); box-shadow: var(--ui-shadow);
}
.ui .page-help > summary { display: flex; align-items: center; min-height: 3rem; cursor: pointer; padding: .9rem 1.2rem; font-size: 1.25rem; font-weight: 800; color: var(--ui-ink); list-style: none; }
.ui .page-help > summary::before { content: "💡 "; }
.ui .page-help > summary::after { content: " ▾"; color: var(--ui-muted); }
.ui .page-help:not([open]) > summary::after { content: " ▸"; }
.ui .page-help > p { margin: 0; padding: 0 1.2rem 1.1rem; font-size: 1.2rem; line-height: 1.55; max-width: 60rem; }

/* "?" help button and its text. */
.ui [data-hint] { position: relative; }
.ui [data-hint] > .hint-btn { position: absolute; top: -.15rem; right: 0; }
.ui .hint-btn { display: inline-grid; place-items: center; width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 2px solid var(--ui-primary); background: var(--ui-surface); color: var(--ui-primary); font: 800 .9rem/1 var(--ui-font); cursor: pointer; vertical-align: middle; }
.ui .hint-btn:hover, .ui .hint-btn[aria-expanded="true"] { background: var(--ui-action); color: var(--ui-on-action); }
.ui .hint-text { grid-column: 1 / -1; margin: .5rem 0 0; padding: .8rem 1rem; border-radius: var(--ui-radius-small); white-space: pre-line;
  background: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-surface)); border: 1px solid var(--ui-accent); font-weight: 400; font-size: 1rem; line-height: 1.5; }
.ui input.german-date.is-invalid { border-color: var(--ui-danger); background: var(--ui-danger-bg); }

.ui .ad-prospect { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); background: var(--ui-surface); }
.ui .ad-prospect > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; font-size: 1.1rem; }
.ui .ad-prospect > summary::-webkit-details-marker { display: none; }
.ui .ad-prospect-state { padding: .2rem .7rem; border-radius: 999px; background: var(--ui-success-bg); color: var(--ui-success); font-weight: 700; font-size: .9rem; }
.ui .ad-prospect-open { margin-left: auto; color: var(--ui-primary); font-weight: 700; }
.ui .ad-prospect > :not(summary) { margin: 0 1.1rem 1.1rem; }
.ui .ct-change-price { margin-top: .6rem; } .ui .ct-change-price > summary { cursor: pointer; font-weight: 700; color: var(--ui-primary); }
.ui .ct-price-label { display: grid; gap: .3rem; }
.ui .ct-price-input { width: 100%; }
.ui .ct-confirm { font-weight: 700; font-size: 1.05rem; }
.ui .ct-change-price { margin-top: .6rem; }
.ui .ct-change-price > summary { cursor: pointer; font-weight: 700; color: var(--ui-primary); }
.ui .id-check { display: flex; align-items: center; gap: .6rem; font-weight: 600; } .ui .id-check input { width: 1.4rem; height: 1.4rem; accent-color: var(--ui-primary); }
/* KG3 (153303): the school's contract text, readable and scrollable before a signature; always plain text. */
.kgp-terms { display: grid; gap: .55rem; min-width: 0; }
.kgp-terms h3 { margin: 0; }
.kgp-terms-meta { margin: 0; font-size: .9rem; color: var(--ui-muted, inherit); overflow-wrap: anywhere; }
.kgp-terms-text { max-height: min(55vh, 32rem); overflow: auto; padding: .85rem 1rem; border: 1px solid var(--ui-line, currentColor);
  border-radius: .7rem; background: var(--ui-surface, var(--surface-background)); color: var(--ui-ink, inherit); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.kgp-terms-text:focus-visible { outline: 3px solid var(--ui-primary, currentColor); outline-offset: 2px; }
.kgp-terms-languages { display: flex; flex-wrap: wrap; gap: .4rem; }
.kgp-terms-languages button { min-height: 2.75rem; min-width: 2.75rem; padding: .4rem .8rem; border: 1px solid var(--ui-line, currentColor);
  border-radius: .6rem; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.kgp-terms-languages button[aria-pressed="true"] { background: var(--ui-primary, #162b4d); color: #fff; }
.kgp-terms-missing { margin: 0; padding: .75rem .9rem; border-left: .35rem solid #ba6b00; border-radius: .6rem; background: var(--ui-surface, transparent); color: var(--ui-ink, inherit); font-weight: 700; }

/* "Help for this page" link of the shared header and of the pages that carry only the link (card 43c240). */
.module-help-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .25rem; font-weight: 700; }
.help-here-holder { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.module-help-start { margin: .75rem 0 0; }

/* Account disclosure controls stay visually consistent even on `.ui` pages whose generic button rules load later. */
/* Card 5c1f1f: the avatar is a circle on every page. The doubled class (0,4,0) out-ranks the generic `.ui :is(button, ...)`
   rule (0,3,1: padding 1.3rem, 10 px corners). No fixed width or height: a page that raises the minimum touch target
   (`.ui .oh ... { min-block-size: 56px }`, trainer 3rem) is carried over to the width by the 1:1 ratio, so the circle just
   grows to that size instead of turning into an oval. */
.ui .account-menu.account-menu .account-menu-button {
  width: auto; height: auto; min-width: 2.75rem; min-height: 2.75rem; aspect-ratio: 1; padding: 0;
  border: 0; border-radius: 50%; overflow: hidden; object-fit: cover;
}
.ui .account-menu-panel .account-menu-item {
  justify-content: flex-start; width: 100%; min-height: 3rem; padding: .65rem .75rem;
  border: 0; border-radius: var(--ui-radius-small); background: transparent; color: inherit; text-align: left;
}
.ui .account-menu-panel .account-menu-item:hover { background: var(--ui-soft); }
.help-here-holder > .account-menu { min-height: 2.75rem; }
.help-here-holder .account-menu-panel { position: fixed; top: 4rem; right: 1rem; max-height: calc(100dvh - 4.5rem); overflow-y: auto; }
@media (max-width: 40rem) {
  .help-here-holder .account-menu-panel { top: .5rem; max-height: calc(100dvh - 1rem); }
}

/* Compact phone header: the logo and account stay visible; navigation opens on demand. */
:is(.ui, .kf) .module-nav .module-nav-toggle { display: none; }
@media (max-width: 64rem) {
  :is(.ui, .kf) .module-head { position: relative; display: block; margin-bottom: .75rem; padding-bottom: .5rem; }
  :is(.ui, .kf) .module-head > .account-menu { position: absolute; top: .5rem; right: .5rem; z-index: 10; }
  :is(.ui, .kf) .module-head > p { display: none; }
  :is(.ui, .kf) .module-nav { position: static; display: flex; flex-wrap: wrap; overflow: visible; white-space: normal; gap: .25rem; margin: 0; padding: .5rem 4rem .5rem .5rem; border-radius: 1rem; }
  :is(.ui, .kf) .module-nav a.module-brand { order: -2; position: static; border: 0; margin: 0; }
  :is(.ui, .kf) .module-nav a.module-brand .school-logo { width: 40px; height: 40px; }
  :is(.ui, .kf) .module-nav .module-nav-toggle { order: -1; white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; padding: .5rem .8rem; border: 1px solid var(--ui-line); border-radius: .65rem; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-weight: 700; cursor: pointer; }
  .module-nav-toggle::after { content: " ▾"; margin-left: .4rem; }
  .module-nav-toggle[aria-expanded="true"]::after { content: " ▴"; }
  :is(.ui, .kf) .module-nav:not(.is-open) > .module-nav-link { display: none; }
  :is(.ui, .kf) .module-nav.is-open > .module-nav-link { display: flex; flex: 1 1 100%; justify-content: flex-start; }
  :is(.ui, .kf) .module-nav.is-open { padding-right: .5rem; }
  :is(.ui, .kf) .module-nav.is-open .module-nav-toggle { margin-right: 4rem; }
}