/*
 * QM-Portal — Gestaltung nach UI-Standard.
 *
 * Natives CSS mit Ebenen, Tokens und BEM. Mobil zuerst; groessere Bildschirme
 * erweitern das Layout. Zielgruppe sind wenig technikaffine Nutzer: ruhige
 * Flaechen, klare Hierarchie, grosse Trefferflaechen, kein Zierrat.
 *
 * Barrierefreiheit: Kontrast durchgehend ueber 4,5:1, sichtbarer Fokus,
 * Bedeutung nie allein ueber Farbe, Bewegung nur auf Wunsch.
 *
 * Bewusst **ohne** Dunkelmodus: Das Erscheinungsbild von
 * betreuungsdienst-schimana.de ist hell und warm. Ein dunkler Modus liesse das
 * Portal wie ein fremdes Werkzeug wirken und war zudem schwer lesbar. Sollte er
 * spaeter gewuenscht sein, genuegt ein zweiter Satz Tokens an dieser Stelle.
 */

@layer reset, tokens, basis, layout, komponenten, hilfen;

/* -------------------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  body, h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  fieldset { border: 0; padding: 0; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

/* -------------------------------------------------------------------- */
@layer tokens {
  /*
   * Farben aus dem Erscheinungsbild von betreuungsdienst-schimana.de
   * (Gold #dbc269, Creme #fffadc, Off-White #fbfbf5, Text #282828).
   *
   * Eine Abweichung ist noetig: Das Gold hat auf hellem Grund nur 1,8:1
   * Kontrast. Fuer grosse Ueberschriften auf einer Werbeseite genuegt das,
   * fuer Bedienelemente in einem Nachweissystem nicht (WCAG 2.2 AA verlangt
   * 4,5:1). Das Gold bleibt deshalb **Flaechenfarbe** — Knoepfe, Markenzeichen,
   * Kopfzeile — mit dunkler Beschriftung, genau wie auf der Website. Fuer
   * Verweise und Beschriftungen dient ein abgedunkeltes Gold.
   *
   * Alle Kombinationen sind nachgerechnet; die Werte stehen als Kommentar.
   */
  :root {
    /* Flaechen und Text */
    --farbe-seite: #fbfbf5;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-still: #fffadc;
    --farbe-text: #282828;          /* 14,7:1 auf Karte */
    --farbe-text-leise: #5f5b4e;    /*  6,8:1 auf Karte */
    --farbe-rand: #e8e3d2;
    --farbe-rand-kraeftig: #ded8c4;

    /* Marke */
    --farbe-akzent: #7d6a20;        /* Verweise und Beschriftungen, 5,3:1 */
    --farbe-akzent-dunkel: #665618; /* 7,2:1 */
    --farbe-akzent-flaeche: #dbc269;/* das Gold der Website */
    --farbe-akzent-text: #282828;   /* auf Gold: 8,4:1 */
    --farbe-akzent-sanft: #fffadc;

    /* Statusfarben */
    --farbe-erledigt: #1a6b43;
    --farbe-erledigt-sanft: #e4f3ea;
    --farbe-offen: #8a5000;
    --farbe-offen-sanft: #fbeedd;
    --farbe-fehler: #9d1f26;
    --farbe-fehler-sanft: #fbe8e9;

    /* Schrift — die Website nutzt Roboto. Bewusst NICHT von Google geladen:
       Das uebertruege bei jedem Aufruf die IP der Mitarbeiter an Google und
       waere in einem Portal mit Nachweisdaten datenschutzrechtlich heikel.
       Wenn Roboto gewuenscht ist, gehoert die Schrift selbst gehostet. */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-mini: 0.75rem;
    --text-klein: 0.875rem;
    --text-basis: 1rem;
    --text-gross: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --text-titel: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);

    /* Abstaende */
    --raum-1: 0.25rem;
    --raum-2: 0.5rem;
    --raum-3: 0.75rem;
    --raum-4: 1rem;
    --raum-5: 1.5rem;
    --raum-6: 2rem;
    --raum-abschnitt: clamp(2rem, 1.5rem + 2vw, 3rem);

    /* Formen */
    --radius: 0.75rem;
    --radius-klein: 0.5rem;
    --schatten: 0 1px 2px rgb(40 40 40 / 5%), 0 4px 12px -6px rgb(40 40 40 / 12%);
    --breite-inhalt: 64rem;
    --breite-schmal: 25rem;
  }

}

/* -------------------------------------------------------------------- */
@layer basis {
  html { -webkit-text-size-adjust: 100%; }

  body {
    font-family: var(--schrift);
    font-size: var(--text-basis);
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-seite);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }

  h1 { font-size: var(--text-titel); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
  h2 { font-size: var(--text-gross); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
  h3 { font-size: var(--text-basis); line-height: 1.4; font-weight: 650; }

  a { color: var(--farbe-akzent); text-underline-offset: 0.18em; }
  a:hover { color: var(--farbe-akzent-dunkel); }

  :focus-visible {
    outline: 3px solid var(--farbe-akzent);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* -------------------------------------------------------------------- */
@layer layout {
  .inhalt {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-inline: var(--raum-4);
  }

  .inhalt--schmal { max-width: var(--breite-schmal); }

  .haupt { flex: 1; padding-block: var(--raum-6) var(--raum-abschnitt); }

  .stapel > * + * { margin-block-start: var(--raum-4); }
  .stapel--weit > * + * { margin-block-start: var(--raum-abschnitt); }
  .stapel--eng > * + * { margin-block-start: var(--raum-2); }

  .raster {
    display: grid;
    gap: var(--raum-4);
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  }
}

/* -------------------------------------------------------------------- */
@layer komponenten {

  .sprunglink {
    position: absolute;
    inset-inline-start: -100vw;
    top: 0;
    z-index: 20;
    padding: var(--raum-2) var(--raum-4);
    background: var(--farbe-akzent-flaeche);
    color: var(--farbe-akzent-text);
    text-decoration: none;
  }
  .sprunglink:focus {
    inset-inline-start: 0;
    color: var(--farbe-akzent-text);
  }

  /* ---- Kopfzeile ---------------------------------------------------- */
  .kopf {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--farbe-flaeche);
    border-block-end: 1px solid var(--farbe-rand);
  }

  .kopf__reihe {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    min-height: 3.5rem;
  }

  .marke {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    text-decoration: none;
    color: var(--farbe-text);
    margin-inline-end: auto;
  }
  .marke__zeichen {
    inline-size: auto;
    block-size: 2.25rem;
    flex: none;
  }
  .marke__name { font-weight: 700; line-height: 1.15; }
  .marke__zusatz {
    display: block;
    font-size: var(--text-mini);
    font-weight: 500;
    color: var(--farbe-text-leise);
  }

  .kopf__person {
    display: none;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
    white-space: nowrap;
  }
  @media (min-width: 40rem) {
    .kopf__person { display: inline; }
  }

  /* Navigation: auf schmalen Geraeten eine eigene, scrollbare Reihe. */
  .navi {
    display: flex;
    gap: var(--raum-1);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: var(--raum-2);
  }
  .navi::-webkit-scrollbar { display: none; }
  @media (min-width: 48rem) {
    .navi { overflow: visible; padding-block-end: 0; }
  }

  .navi__punkt {
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: var(--farbe-text-leise);
    font-weight: 550;
    white-space: nowrap;
  }
  .navi__punkt:hover { background: var(--farbe-flaeche-still); color: var(--farbe-text); }
  .navi__punkt[aria-current="page"] {
    background: var(--farbe-akzent-sanft);
    color: var(--farbe-akzent);
  }

  /* ---- Seitenkopf --------------------------------------------------- */
  .seitenkopf__titel { margin-block-end: var(--raum-1); }
  .seitenkopf__text { color: var(--farbe-text-leise); }

  /* ---- Abschnitt ---------------------------------------------------- */
  .abschnitt__kopf {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    margin-block-end: var(--raum-4);
  }
  .abschnitt__kopf::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--farbe-rand);
  }
  .zaehler {
    flex: none;
    order: 1;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--farbe-flaeche-still);
    color: var(--farbe-text-leise);
    font-size: var(--text-mini);
    font-weight: 650;
  }

  /* ---- Karte -------------------------------------------------------- */
  .karte {
    display: flex;
    flex-direction: column;
    gap: var(--raum-2);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: var(--raum-4);
    box-shadow: var(--schatten);
  }
  .karte__titel { margin: 0; }
  .karte__meta {
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
  }
  .karte__text { font-size: var(--text-klein); }

  /* Aktionen in gleich breiten Spalten — sonst wirken unterschiedlich
     lange Beschriftungen unruhig. */
  .karte__aktionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--raum-2);
    margin-block-start: auto;
    padding-block-start: var(--raum-2);
  }
  .karte__aktionen--einspaltig { grid-template-columns: 1fr; }

  /* Ein Formular soll das Raster nicht unterbrechen: Sein Knopf wird selbst
     zur Rasterzelle und ist damit genauso breit wie die Nachbarn. */
  .karte__aktionen form { display: contents; }

  .karte--offen { border-inline-start: 4px solid var(--farbe-offen); }

  /* ---- Schaltflaechen ----------------------------------------------- */
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Grosszuegige Trefferflaeche (WCAG 2.2 Zielgroesse). */
    min-block-size: 2.75rem;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    background: var(--farbe-akzent-flaeche);
    color: var(--farbe-akzent-text);
    font-size: var(--text-klein);
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
    /* Beim Ueberfahren nur leicht abdunkeln — die Beschriftung bleibt dunkel,
     damit der Kontrast von 8,4:1 erhalten bleibt. */
  .knopf:hover { background: #cbb055; color: var(--farbe-akzent-text); }

  .knopf--zweitrangig {
    background: var(--farbe-flaeche);
    color: var(--farbe-akzent);
    border-color: var(--farbe-rand-kraeftig);
  }
  .knopf--zweitrangig:hover {
    background: var(--farbe-flaeche-still);
    color: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
  }

  .knopf--schlicht {
    background: none;
    color: var(--farbe-akzent);
    padding-inline: 0.5rem;
    min-block-size: 2.25rem;
  }
  .knopf--schlicht:hover { background: var(--farbe-flaeche-still); color: var(--farbe-akzent); }

  .knopf[disabled], .knopf[aria-disabled="true"] {
    background: var(--farbe-flaeche-still);
    color: var(--farbe-text-leise);
    border-color: var(--farbe-rand);
    cursor: not-allowed;
  }

  /* ---- Statusanzeige ------------------------------------------------ */
  .abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentcolor;
    font-size: var(--text-mini);
    font-weight: 650;
    line-height: 1.5;
  }
  .abzeichen::before {
    content: "";
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: 50%;
    background: currentcolor;
  }
  .abzeichen--erledigt { background: var(--farbe-erledigt-sanft); color: var(--farbe-erledigt); }
  .abzeichen--offen { background: var(--farbe-offen-sanft); color: var(--farbe-offen); }
  .abzeichen--neutral {
    background: var(--farbe-flaeche-still);
    color: var(--farbe-text-leise);
    border-color: var(--farbe-rand-kraeftig);
  }

  /* ---- Formular ----------------------------------------------------- */
  .feld { display: flex; flex-direction: column; gap: var(--raum-1); }
  .feld__marke { font-weight: 650; font-size: var(--text-klein); }
  .feld__eingabe {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand-kraeftig);
    border-radius: var(--radius-klein);
  }
  .feld__eingabe::placeholder { color: var(--farbe-text-leise); }
  .feld__eingabe[aria-invalid="true"] { border-color: var(--farbe-fehler); border-width: 2px; }
  .feld__hinweis { font-size: var(--text-klein); color: var(--farbe-text-leise); }

  /* ---- Meldungen ---------------------------------------------------- */
  .meldung {
    padding: var(--raum-3) var(--raum-4);
    border-radius: var(--radius-klein);
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
    font-size: var(--text-klein);
  }
  .meldung--erfolg {
    background: var(--farbe-erledigt-sanft);
    border-color: var(--farbe-erledigt);
    color: var(--farbe-erledigt);
  }
  .meldung--fehler {
    background: var(--farbe-fehler-sanft);
    border-color: var(--farbe-fehler);
    color: var(--farbe-fehler);
  }

  /* ---- Leerer Zustand ----------------------------------------------- */
  .leer {
    text-align: center;
    padding: var(--raum-6) var(--raum-4);
    border: 1px dashed var(--farbe-rand-kraeftig);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text-leise);
    font-size: var(--text-klein);
  }

  /* ---- Fusszeile ---------------------------------------------------- */
  .fuss {
    border-block-start: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
    padding-block: var(--raum-4);
    font-size: var(--text-mini);
    color: var(--farbe-text-leise);
  }

  /* ---- Filterleiste -------------------------------------------------- */
  .filter {
    display: grid;
    gap: var(--raum-3);
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }
  .filter__arten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3);
    margin-block-start: var(--raum-3);
  }
  .wahl {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-klein);
  }

  /* ---- Tabelle ------------------------------------------------------- */
  /* Breite Tabellen scrollen in ihrem eigenen Rahmen — die Seite selbst
     darf nie waagerecht scrollen. */
  .tabellenrahmen {
    overflow-x: auto;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
  }
  .tabelle {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-klein);
  }
  .tabelle th,
  .tabelle td {
    text-align: start;
    padding: var(--raum-2) var(--raum-3);
    border-block-end: 1px solid var(--farbe-rand);
    vertical-align: top;
  }
  .tabelle th {
    background: var(--farbe-flaeche-still);
    font-weight: 650;
    white-space: nowrap;
  }
  .tabelle tbody tr:last-child td { border-block-end: 0; }
  .tabelle code { font-size: var(--text-mini); }

  /* ---- Entwicklungsbereich ------------------------------------------ */
  .entwicklung {
    border: 2px dashed var(--farbe-offen);
    background: var(--farbe-offen-sanft);
    border-radius: var(--radius);
    padding: var(--raum-4);
  }
  .entwicklung__titel {
    color: var(--farbe-offen);
    font-weight: 700;
    font-size: var(--text-mini);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: var(--raum-2);
  }
}

/* -------------------------------------------------------------------- */
@layer hilfen {
  .leise { color: var(--farbe-text-leise); }
  .klein { font-size: var(--text-klein); }
  .mini { font-size: var(--text-mini); }
  .nur-fuer-screenreader {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}