/* The page supplies its font (Figtree on kc-g.de). No remote font requests. */
.ws {
  --ws-ink: #0c2867;
  --ws-primary: #002367;
  --ws-muted: #536481;
  --ws-line: #d5deec;
  --ws-paper: #fff;
  --ws-amber: #855100;
  container: waffelstand / inline-size;
  color: var(--ws-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  background: var(--ws-paper);
  border: 1px solid var(--ws-line);
  border-top: 3px solid var(--ws-primary);
  border-radius: 0;
  box-shadow: none;
  max-width: 1160px;
  min-width: 0;
  margin: 24px auto;
  overflow: hidden;
}
.ws * { box-sizing: border-box; }
.ws [hidden] { display: none !important; }
.ws h2, .ws h3, .ws p { margin: 0; }
.ws a { color: var(--ws-primary); text-decoration: underline; text-underline-offset: 3px; }
.ws a:hover { color: #315998; }
.ws :where(button, input, select) { font: inherit; }
.ws button { cursor: pointer; }
.ws button:disabled { opacity: .5; cursor: not-allowed; }
.ws :focus-visible { outline: 3px solid #376cc2; outline-offset: 4px; }

.ws .ws-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 32px;
  background: #f1f5fb;
  border-bottom: 1px solid var(--ws-line);
}
.ws-hero-copy { min-width: 0; max-width: 760px; }
.ws .ws-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .065em; line-height: 1.7; }
.ws-hero .ws-eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 28px 1px 0;
  border-radius: 50%;
  background: #bf3025;
  box-shadow: 11px 0 #ffca0a, 22px 0 #0c2867;
}
.ws h2 {
  font-family: inherit;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -.025em;
  color: var(--ws-primary);
  margin: 12px 0 16px;
}
.ws .ws-hero-sub { font-size: 14px; color: var(--ws-muted); }
.ws .ws-hero-image { width: 164px; height: 150px; object-fit: contain; flex-shrink: 0; }
.ws-content { padding: 28px 32px 0; }
.ws .ws-intro { font-size: 15px; max-width: 960px; }
.ws-intro > p + p { margin-top: 12px; }
.ws-details { margin: 16px 0 25px; font-size: 14px; }
.ws-details summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ws-details p { margin: 12px 0; }
.ws-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.ws h3 { font-family: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--ws-primary); }
.ws-section-head h3 { margin-top: 5px; }
.ws .ws-total { font-size: 12px; font-weight: 600; padding: 7px 10px; border: 1px solid var(--ws-line); background: #f5f7fb; white-space: nowrap; }
.ws .ws-help { font-size: 14px; margin: 14px 0; color: var(--ws-muted); }
.ws .ws-recommendation { font-size: 13px; background: #fff7df; border-left: 3px solid #e0aa0b; padding: 11px 14px; margin-bottom: 20px; color: #6c4d00; }

.ws-shift-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ws-shifts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ws label.ws-shift { display: block; position: relative; min-width: 0; margin: 0; border: 1px solid #cbd6e8; border-radius: 0; background: #fff; cursor: pointer; font-weight: 400; transition: border-color .15s, background-color .15s; }
.ws label.ws-shift:hover:not(.is-disabled) { border-color: #4c6b9d; background: #f7f9fd; }
.ws .ws-shift > input { position: absolute; right: 12px; top: 51px; width: 18px; height: 18px; margin: 0; accent-color: var(--ws-primary); }
.ws-shift:focus-within { outline: 3px solid #376cc2; outline-offset: 3px; }
.ws label.ws-shift.is-selected { border: 2px solid var(--ws-primary); background: #edf3ff; }
.ws-shift.is-selected .ws-shift-body { padding: 12px; }
.ws label.ws-shift.is-disabled { cursor: default; background: #f0f2f6; color: #61708a; border-color: #d6dce6; }
.ws-shift-body { display: flex; flex-direction: column; height: 100%; padding: 13px; }
.ws .ws-badge { font-size: 11px; font-weight: 650; line-height: 1.35; min-height: 30px; color: var(--ws-amber); }
.ws .ws-shift-available .ws-badge { color: #216347; }
.ws .ws-shift-full .ws-badge { color: #61708a; }
.ws .ws-time { display: block; font-size: 27px; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; margin: 8px 20px 0 0; color: var(--ws-primary); }
.ws .ws-time-unit { font-size: 10px; margin-top: 4px; color: var(--ws-muted); }
.ws .ws-count { font-size: 11px; margin-top: 20px; font-weight: 600; }
.ws-meter { display: flex; gap: 3px; margin: 9px 0; }
.ws-meter i { display: block; flex: 1; height: 11px; background: #e8edf4; border-radius: 1px; }
.ws-meter .is-filled { background: #c9962e; }
.ws-shift-available .ws-meter .is-filled { background: #51866c; }
.ws-shift-full .ws-meter .is-filled { background: #8c9ab0; }
.ws .ws-free { font-size: 12px; font-weight: 650; color: var(--ws-amber); }
.ws .ws-shift-available .ws-free { color: #216347; }
.ws .ws-shift-full .ws-free { color: #61708a; }
.ws-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; margin: 14px 0 28px; color: var(--ws-muted); }
.ws-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.ws-dot-urgent { background: #c9962e; }
.ws-dot-available { background: #51866c; }
.ws-dot-full { background: #8c9ab0; }

.ws-person { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; max-width: 700px; }
.ws label:not(.ws-shift):not(.ws-privacy) { font-size: 14px; font-weight: 600; color: var(--ws-primary); }
.ws input:not([type=checkbox]),
.ws select,
.ws .ws-person select[name="school_class"] {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 7px 0 0;
  padding: 11px 12px;
  border: 1px solid #b7c5dc;
  border-radius: 0;
  background-color: #fff;
  color: var(--ws-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  box-shadow: none;
}
.ws .ws-person select[name="school_class"] { appearance: auto; background-image: none; padding-right: 12px; }
.ws input::placeholder { color: #64728a; opacity: 1; }
.ws-person small { display: block; font-size: 12px; color: var(--ws-muted); margin-top: 5px; }
.ws label.ws-privacy { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; font-weight: 400; line-height: 1.65; max-width: 860px; margin: 24px 0; color: var(--ws-muted); cursor: pointer; }
.ws .ws-privacy input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ws-primary); }
.ws .ws-button { border: 1px solid var(--ws-primary); border-radius: 0; padding: 12px 20px; background: var(--ws-primary); color: #fff; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.5; min-height: 48px; box-shadow: none; transition: background-color .15s; }
.ws .ws-button:hover:not(:disabled) { background: #173e7b; border-color: #173e7b; color: #fff; }
.ws-button span { margin-left: 24px; }
.ws .ws-button-secondary { background: #fff; color: var(--ws-primary); margin-top: 12px; }
.ws-submit-row { display: flex; align-items: center; gap: 18px; }
.ws-submit-row p { font-size: 12px; color: var(--ws-muted); }
.ws-message { background: #edf4ef; border: 1px solid #bbd1c3; padding: 13px 16px; border-radius: 0; font-size: 14px; margin-top: 20px; color: #205c3d; }
.ws .ws-error { background: #fff1ec !important; border: 1px solid #cd9b87 !important; color: #843a21; padding: 13px 16px; border-radius: 0; }
.ws-receipt { background: #f1f5fb; border: 1px solid #b8c9e3; padding: 22px; margin-top: 20px; }
.ws-receipt p { margin: 12px 0; font-size: 13px; }
.ws-receipt input { font-family: monospace !important; font-size: 12px !important; }
.ws-cancel { border-top: 1px solid var(--ws-line); padding-top: 22px; margin-top: 30px; }
.ws-cancel form { max-width: 640px; }
.ws-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; border-top: 1px solid var(--ws-line); padding: 19px 0; font-size: 12px; color: var(--ws-muted); }
.ws-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; }
.ws-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.ws-admin { padding: 24px; }
.ws-admin h2 { font-size: 28px; }
.ws-admin select { max-width: 650px; }
.ws-admin-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.ws-admin-toolbar .ws-button { margin-top: 0; }
.ws-admin-table-wrap { overflow: auto; }
.ws-admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-admin th, .ws-admin td { padding: 10px; text-align: left; border-bottom: 1px solid var(--ws-line); }
.ws-admin th { background: #f1f5fb; }
.ws-admin td .ws-button { padding: 6px 10px; min-height: 36px; font-size: 12px; margin: 0; }
.ws-admin-danger { margin-top: 30px; border-top: 1px solid #ddc5b6; padding-top: 18px; }
.ws-admin-danger input { max-width: 300px; }
.ws-admin .ws-button-danger { background: #8a351e; border-color: #8a351e; color: #fff; }
.ws .ws-admin-summary { font-size: 13px; margin: 18px 0; }
.ws-admin small { display: block; color: var(--ws-muted); margin-top: 6px; }

/* Container queries also cover narrow article columns on wide desktop pages. */
@container waffelstand (max-width: 760px) {
  .ws .ws-hero { padding: 24px; gap: 18px; }
  .ws h2 { font-size: 32px; }
  .ws .ws-hero-image { width: 136px; height: 130px; }
  .ws-content { padding: 24px 24px 0; }
  .ws-shifts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container waffelstand (max-width: 460px) {
  .ws .ws-hero { padding: 22px 18px; gap: 12px; }
  .ws h2 { font-size: 27px; }
  .ws .ws-eyebrow { font-size: 10px; letter-spacing: .03em; }
  .ws .ws-hero-image { width: 88px; height: 96px; }
  .ws .ws-hero-sub { font-size: 13px; }
  .ws-content { padding: 22px 18px 0; }
  .ws-section-head { flex-wrap: wrap; gap: 12px; }
  .ws h3 { font-size: 24px; }
  .ws .ws-intro { font-size: 15px; }
  .ws-shifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-person { grid-template-columns: 1fr; gap: 14px; }
  .ws-submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .ws .ws-button { width: 100%; }
  .ws-footer { flex-direction: column; gap: 8px; }
  .ws-receipt { padding: 16px; }
  .ws-admin-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .ws-admin td .ws-button { width: auto; }
}
@media (max-width: 540px) {
  .ws { margin: 10px auto; }
  .ws-admin { padding: 18px; }
}
@container waffelstand (max-width: 300px) {
  .ws .ws-hero { padding: 20px 16px; gap: 8px; }
  .ws h2 { font-size: 25px; }
  .ws .ws-hero-image { width: 56px; height: 70px; }
  .ws .ws-eyebrow { font-size: 9px; }
  .ws-shifts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ws * { transition: none !important; } }
@media print {
  .ws { border: 0; box-shadow: none; }
  .ws-form, .ws-cancel, .ws-details, .ws-footer, .ws-admin-toolbar, .ws-admin-danger, .ws-admin td:last-child, .ws-admin th:last-child { display: none; }
  .ws .ws-hero-image { width: 100px; height: 100px; }
  .ws-receipt { break-inside: avoid; }
  .ws-receipt button { display: none; }
}