/* Ginkobert – was nur dieses Werkzeug braucht (GUSCH-020, ADR 0028).

   Formensprache, Rahmen und Bausteine kommen aus portal-ui (tokens.css,
   components.css, kit.js, Präfix p-). Hier steht nur, was das Kit nicht hat:
   Wochenplan, Kalender Zeit × Tag, Balkendiagramme (ADR 0013), Kästchenauswahl,
   Datenliste, ein paar Rasterhilfen und die lokale Schrift. Präfix g-, nur
   --p-*-Tokens, kein Hex — tests/test_oberflaeche.py prüft das. */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@layer portal.components {
  /* ── Gerüst ─────────────────────────────────────────────────────────── */
  /* `hidden` muss gewinnen, auch gegen eine Klasse mit display (filter.js, thema.js). */
  [hidden] { display: none !important; }
  .g-sprung { position: absolute; inset-inline-start: var(--p-2); inset-block-start: -10rem; z-index: 70; padding: var(--p-2) var(--p-3); background: var(--p-surface-3); border-radius: var(--p-radius-sm); }
  .g-sprung:focus { inset-block-start: var(--p-2); }
  .g-symbole { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .g-symbol { inline-size: 1.125rem; block-size: 1.125rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  h1 > .g-symbol, h2 > .g-symbol, h3 > .g-symbol, .p-tile-title > .g-symbol { display: inline-block; margin-inline-end: var(--p-2); vertical-align: -0.15em; color: var(--p-text-3); }
  .g-zahl { margin-inline-start: auto; font-size: var(--p-size-meta); font-variant-numeric: tabular-nums; color: var(--p-text-3); }
  .g-suche { flex: 0 1 20rem; align-self: center; min-inline-size: 0; }
  .p-topbar { padding-inline-end: var(--p-4); }
  .g-konto .p-nav-item { inline-size: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
  .g-thema > .p-meta { padding-inline: var(--p-2); }
  .g-thema { display: flex; flex-direction: column; gap: var(--p-2); padding-block-start: var(--p-2); }
  .g-thema .p-segmented { display: flex; }
  .g-thema .p-segmented label { flex: 1 1 0; min-inline-size: 0; }
  .g-thema .p-segmented span { padding-inline: var(--p-1); font-size: var(--p-size-meta); }

  /* ── Raster und Reihen ──────────────────────────────────────────────── */
  .g-raster { display: grid; gap: var(--p-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
  .g-raster--haupt { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1100px) { .g-raster--haupt { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); } }
  .g-schmal { inline-size: 100%; max-inline-size: 44rem; }
  .g-breit { inline-size: 100%; max-inline-size: 60rem; }
  .g-innen { padding: var(--p-4) var(--p-pad-card) 0; }
  caption.g-innen { padding-block-end: var(--p-2); text-align: start; font-weight: 600; }
  .g-inline { display: inline; }
  .g-feld-kurz { flex: 1 1 10rem; inline-size: auto; max-inline-size: 18rem; }
  .g-stapel { display: flex; flex-direction: column; gap: var(--p-4); }
  .g-seitenkopf { display: flex; flex-direction: column; gap: var(--p-2); }
  .g-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--p-3); }
  .g-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-2); }
  .g-schritte { display: flex; align-items: center; gap: var(--p-1); }
  .g-schritte > .p-input { flex: 1 1 8rem; min-inline-size: 0; }
  /* Ein <select> ist als Rasterelement sonst so breit wie seine längste Option. */
  .p-field { min-inline-size: 0; }

  /* Zeile einer Arbeitsliste: Text links, Handlungen rechts, am Telefon darunter. */
  .g-liste { display: flex; flex-direction: column; }
  .g-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-2) var(--p-4); padding-block: var(--p-3); border-block-end: var(--p-hairline) solid var(--p-border-soft); }
  .g-zeile:last-child { border-block-end: 0; }
  .g-zeile-text { flex: 1 1 18rem; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--p-1); }
  .g-zeile > .g-aktionen { margin-inline-start: auto; }

  /* Name–Wert-Paare auf einer Karte */
  .g-daten { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--p-2) var(--p-4); margin: 0; }
  .g-daten dt { color: var(--p-text-3); }
  .g-daten dd { margin: 0; overflow-wrap: anywhere; }

  .g-summe td { font-weight: 600; }
  /* Abgesagt: durchgestrichen und grau, die Pille daneben sagt es in Worten. */
  .g-abgesagt, .g-abgesagt a { color: var(--p-text-3); text-decoration: line-through; }

  /* Rückfrage ohne Skript: das Aufklappen ist die Rückfrage. */
  .g-absage > summary { list-style: none; }
  .g-absage > summary::-webkit-details-marker { display: none; }
  .g-absage[open] > summary { margin-block-end: var(--p-2); }

  /* ── Filterleiste (USCH-038) ────────────────────────────────────────── */
  .g-filter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--p-3); padding: var(--p-4) var(--p-5); }
  .g-filter > .p-field { flex: 1 1 10rem; max-inline-size: 16rem; }
  .g-filter-stand { margin-inline-start: auto; align-self: center; }

  /* ── Kästchenauswahl: viele Ankreuzfelder in einem Kasten ───────────── */
  .g-kaestchen { max-block-size: 20rem; overflow: auto; padding: var(--p-2) var(--p-3); background: var(--p-field); border: var(--p-hairline) solid var(--p-border); border-radius: var(--p-radius-sm); columns: 2; column-gap: var(--p-6); }
  .g-kaestchen > div { break-inside: avoid; }
  .g-kaestchen label { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--p-2); min-block-size: 2rem; }
  .g-kaestchen input { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--p-accent); }
  .g-kaestchen small { color: var(--p-text-3); font-size: var(--p-size-meta); }
  .g-kaestchen > .g-passend label { font-weight: 600; }
  .g-kaestchen > .g-trenner { column-span: all; margin-block-start: var(--p-2); padding-block-start: var(--p-2); border-block-start: var(--p-hairline) solid var(--p-border); font-size: var(--p-size-label); font-weight: 600; letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--p-text-3); }
  .g-auswahlkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-2); margin-block-end: var(--p-2); }
  .g-auswahlkopf > .p-input, .g-auswahlkopf > .p-select { flex: 1 1 9rem; inline-size: auto; min-inline-size: 0; }

  /* ── Balkendiagramme (ADR 0013): Datenfarben des Kits ───────────────── */
  .g-balken { display: grid; gap: 0.125rem; }
  .g-balken-zeile { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) minmax(3.5rem, max-content); align-items: center; gap: var(--p-3); min-block-size: 1.5rem; }
  .g-balken--schmal .g-balken-zeile { grid-template-columns: minmax(3.5rem, 5rem) minmax(0, 1fr) minmax(3.5rem, max-content); }
  .g-balken-zeile--saldo { grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) minmax(4.5rem, max-content); }
  .g-balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-text-2); }
  .g-balken-wert { text-align: end; font-variant-numeric: tabular-nums; color: var(--p-text-2); }
  .g-balken-leer { grid-column: 2 / -1; }
  .g-spur { position: relative; display: block; block-size: 0.875rem; border-radius: var(--p-radius-xs); background: var(--p-surface-2); }
  .g-fuellung { display: block; block-size: 100%; min-inline-size: 2px; border-radius: 0 var(--p-radius-xs) var(--p-radius-xs) 0; background: var(--p-data-3); }
  .g-fuellung--minus { background: var(--p-data-4); }
  /* Die Bezugslinie steht fest: sonst sähe Überlast aus wie Vollauslastung. */
  .g-bezug { position: absolute; inset-block: -0.1875rem; inline-size: 1px; background: var(--p-border-hover); }
  .g-achse { position: relative; display: grid; grid-template-columns: 1fr 1fr; block-size: 0.875rem; }
  .g-halb { display: flex; block-size: 100%; border-radius: var(--p-radius-xs); background: var(--p-surface-2); }
  .g-halb--minus { justify-content: flex-end; margin-inline-end: 1px; }
  .g-halb--plus { margin-inline-start: 1px; }
  .g-halb--minus .g-fuellung { border-radius: var(--p-radius-xs) 0 0 var(--p-radius-xs); }
  .g-null { position: absolute; inset-inline-start: 50%; inset-block: -0.1875rem; inline-size: 1px; background: var(--p-border-hover); }

  /* ── Termin als Kachel: Streifen trägt den Zustand, der Text sagt ihn ── */
  .g-termin { display: block; margin-block-start: var(--p-1); padding: var(--p-1) var(--p-2); border-radius: var(--p-radius-xs); border-inline-start: 3px solid var(--p-success); background: var(--p-surface-2); font-size: var(--p-size-meta); line-height: 1.4; }
  .g-termin a { display: block; font-weight: 600; }
  .g-termin small { display: block; color: var(--p-text-3); }
  .g-termin--angeboten { border-inline-start-style: dashed; border-inline-start-color: var(--p-warning); }
  .g-termin--abgesagt { border-inline-start-color: var(--p-text-3); }
  .g-termin--abgesagt a { color: var(--p-text-3); text-decoration: line-through; }

  /* ── Wochenplan: Zeilen × Tage ──────────────────────────────────────── */
  .g-plan-huelle { overflow-x: auto; }
  .g-plan { inline-size: 100%; min-inline-size: 46rem; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
  .g-plan thead th:first-child { inline-size: 11rem; }
  .g-plan th, .g-plan td { padding: var(--p-1) var(--p-2); vertical-align: top; text-align: start; }
  .g-plan thead th { border-radius: var(--p-radius-xs); color: var(--p-text-3); font-size: var(--p-size-meta); font-weight: 600; white-space: nowrap; }
  .g-plan thead th small { display: block; font-weight: 400; }
  .g-plan thead th.g-heute { background: var(--p-accent-tint); color: var(--p-text); }
  .g-plan tbody th { border-radius: var(--p-radius-xs); background: var(--p-surface-2); font-weight: 600; }
  .g-plan tbody td { border-radius: var(--p-radius-xs); background: var(--p-surface-2); }
  .g-plan tbody td.g-leer { background: none; }
  .g-plan .g-verfuegbar { display: block; color: var(--p-text-3); font-size: var(--p-size-meta); font-variant-numeric: tabular-nums; }
  .g-geschlossen, .g-plan tbody td.g-abwesend { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--p-border-soft) 6px 8px); }

  /* ── Kalender Zeit × Tag ────────────────────────────────────────────── */
  .g-kalender { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr)); gap: 2px; }
  .g-kalender-kopf { padding: var(--p-1); border-radius: var(--p-radius-xs); color: var(--p-text-3); font-size: var(--p-size-meta); font-weight: 600; text-align: center; }
  .g-kalender-kopf.g-heute { background: var(--p-accent-tint); color: var(--p-text); }
  .g-spalte { position: relative; display: grid; grid-template-rows: repeat(var(--zeilen), 0.6875rem); border-radius: var(--p-radius-xs); background: var(--p-surface-2); }
  .g-spalte--zeit { background: none; }
  .g-stunde { grid-column: 1; padding-inline-end: var(--p-2); color: var(--p-text-3); font-size: var(--p-size-label); text-align: end; }
  .g-linie { grid-column: 1; border-block-start: var(--p-hairline) solid var(--p-border-soft); pointer-events: none; }
  .g-frei { grid-column: 1; margin-inline: 2px; border-radius: var(--p-radius-xs); background: var(--p-success-tint); }
  .g-da { grid-column: 1; justify-self: start; inline-size: 3px; margin-inline-start: 2px; border-radius: 2px; background: var(--p-success); }
  .g-kalender .g-termin { grid-column: 1; z-index: 1; margin: 1px 3px 1px 7px; padding-block: 0; overflow: hidden; font-size: var(--p-size-label); line-height: 1.25; }
  .g-abw { position: absolute; inset: var(--p-1) var(--p-1) auto; color: var(--p-text-3); font-size: var(--p-size-meta); }
  .g-kalender-liste { display: none; }
  .g-legende { display: flex; flex-wrap: wrap; gap: var(--p-2) var(--p-4); color: var(--p-text-2); font-size: var(--p-size-meta); }
  .g-legende span::before { content: ""; display: inline-block; inline-size: 0.6875rem; block-size: 0.6875rem; margin-inline-end: var(--p-2); vertical-align: -1px; border-radius: 3px; border: var(--p-hairline) solid var(--p-border); }
  .g-legende .g-frei-schluessel::before { background: var(--p-success-tint); }
  .g-legende .g-da-schluessel::before { background: var(--p-success); }
  .g-legende .g-abw-schluessel::before { background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--p-border-strong) 3px 4px); }

  /* ── Anmeldung: ohne Seitenleiste, mittig ───────────────────────────── */
  .g-anmelden { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--p-6) var(--p-4); }
  .g-anmelden > .p-card { inline-size: min(26rem, 100%); }
  .g-wortmarke { font-size: var(--p-size-lg); font-weight: 700; letter-spacing: var(--p-track-title); }

  /* ── Schmale Geräte ─────────────────────────────────────────────────── */
  @media (max-width: 720px) {
    /* Die Kopfleiste darf zweizeilig werden: die Suche bekommt die zweite Zeile ganz. */
    .p-topbar { flex-wrap: wrap; block-size: auto; min-block-size: var(--p-topbar-h); padding-block: var(--p-2); padding-inline-end: var(--p-3); row-gap: var(--p-2); }
    .g-suche { order: 3; flex-basis: 100%; }
    .g-kaestchen { columns: 1; max-block-size: none; }
    /* Kalender wird Tagesliste: sieben Spalten auf 390 px wären je 45 px breit. */
    .g-kalender, .g-legende { display: none; }
    .g-kalender-liste { display: grid; gap: var(--p-4); }
    /* Wochenplan wird Liste je Zeile: die Kopfzeile fällt weg, jede Zelle nennt ihren Tag. */
    .g-plan-huelle { overflow: visible; }
    .g-plan, .g-plan tbody, .g-plan tr, .g-plan td, .g-plan th { display: block; min-inline-size: 0; inline-size: auto; }
    .g-plan thead { display: none; }
    .g-plan tbody tr { margin-block-end: var(--p-4); }
    .g-plan tbody td.g-leer, .g-plan tbody td:empty { display: none; }
    .g-plan tbody td::before { content: attr(data-tag); display: block; color: var(--p-text-3); font-size: var(--p-size-meta); font-weight: 600; }
  }
}