/* Platform brand Kwanhan (KG15, board card 883e2c). Black and white only: #0B0B0B / #FFFFFF. The school's colours stay on the school
   level; nothing here reads --ui-action or --ui-primary. Wordmark: Unbounded 600 (SIL OFL 1.1, self-hosted, Latin subset). */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/unbounded-600-latin.woff2") format("woff2"); }

/* The bar. Top (office): always black. Foot (tablet, family, learning, login): light grey on light, black on dark. Small by rule. */
.kw-bar { box-sizing: border-box; display: flex; flex: none; align-self: stretch; width: 100%; align-items: center; justify-content: center; gap: .5rem; min-height: 2rem; padding: .3rem 1rem;
  font-family: var(--ui-font, "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-size: .75rem; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.kw-bar-top { justify-content: flex-start; padding-inline: clamp(16px, 4vw, 56px); background: #fff; color: #0b0b0b; border-bottom: 1px solid #e3e3e3; }
.kw-bar-foot { margin-top: 1.5rem; background: #fafafa; color: #0b0b0b; border-top: 1px solid #e3e3e3; }
.kw-mark { flex: none; width: 1.15rem; height: 1.06rem; background: currentColor;
  -webkit-mask: url("brand/kwanhan-zeichen-klein-schwarz.svg") center / contain no-repeat; mask: url("brand/kwanhan-zeichen-klein-schwarz.svg") center / contain no-repeat; }
.kw-word { font-family: "Unbounded", var(--ui-font, "Archivo"), sans-serif; font-weight: 600; font-size: .6875rem; letter-spacing: .12em; }
.kw-slogan, .kw-long { overflow: hidden; text-overflow: ellipsis; }
.kw-bar-top .kw-slogan, .kw-bar-top .kw-tagline { opacity: .92; }
.kw-bar-top .kw-tagline::before { content: "· "; }
.kw-bar-top .kw-tagline, .kw-bar-foot .kw-slogan, .kw-bar-foot .kw-tagline { margin-inline-start: -.3rem; }
@media (max-width: 640px) { .kw-long { display: none; } .kw-bar { padding-inline: 12px; } }

:root[data-theme="dark"] .kw-bar-foot { background: #0b0b0b; color: #fff; border-top-color: #333; }
@media print { .kw-bar { display: none; } }

/* The school's own logo (Kum-Gang V6a, plain): blue on light, white on dark. Set the size with --kg-logo-size. */
.kg-logo { flex: none; display: inline-block; width: var(--kg-logo-size, 52px); height: var(--kg-logo-size, 52px); }
.kg-logo-light, .kg-logo-dark { display: block; width: 100%; height: 100%; background: center / contain no-repeat; }
.kg-logo-light { background-image: var(--school-logo-light, url("brand/kum-gang-logo-blau.svg")); }
.kg-logo-dark { display: none; background-image: var(--school-logo-dark, url("brand/kum-gang-logo-weiss.svg")); }
:root[data-theme="dark"] .kg-logo-light { display: none; }
:root[data-theme="dark"] .kg-logo-dark { display: block; }

/* On a dark header band the white logo shows in every colour scheme. */
.kg-logo-onband .kg-logo-light { display: none !important; }
.kg-logo-onband .kg-logo-dark { display: block !important; }
/* School logo beside the school name on the tablet screens. */
.ct-head .ct-school { display: inline-flex; align-items: center; gap: .6rem; }
.ct-head .ct-school .kg-logo { --kg-logo-size: 36px; }
/* The counter tablet darkens only on an explicit data-theme="dark" (counter-tablet.css), never by the system setting, so its
   header logo follows the same rule; otherwise a tablet in system dark mode shows the white logo on the white header. */
:root:not([data-theme="dark"]) .ct-head .kg-logo-light { display: block; }
:root:not([data-theme="dark"]) .ct-head .kg-logo-dark { display: none; }
.ev2-top .ev2-school { display: flex; align-items: center; gap: 12px; }
.ev2-top .ev2-school .kg-logo { --kg-logo-size: 40px; }
/* The entrance tablet fills exactly one screen: leave room for the foot bar so it is visible without scrolling. */
.ui.ev2:has(.kw-bar-foot) .ev2-app { height: calc(100dvh - 56px); }