/* =========================================================================
   tillY — die Seiten des Patientenportals
   =========================================================================
   Ausgezogen am 07.08.2026 aus den <style>-Bloecken von neun Vorlagen.

   WARUM DAS NICHT NUR AUFRAEUMEN IST
     Punkt A6 in PROGRESS.md: die CSP traegt bis heute 'unsafe-inline' fuer
     style-src, weil ohne sie jede dieser Seiten farblos waere. Solange
     Stile im Markup stehen, laesst sich das nicht abstellen -- und
     'unsafe-inline' hebt genau den Schutz auf, fuer den es eine CSP gibt.
     Das hier ist ein Schritt darauf zu, nicht das Ziel: die
     style=-Attribute im Markup stehen noch aus.

   WARUM EINE DATEI UND NICHT NEUN
     Neun Dateien fuer je dreissig Zeilen waeren neun Ladevorgaenge und
     neun Orte zum Suchen. Geladen wird sie nur, wo sie gebraucht wird --
     ueber {% block extra_head %} in der jeweiligen Vorlage, also GENAU an
     der Stelle, an der vorher der <style>-Block stand.

   DIE STELLE IST DER PUNKT
     extra_head kommt in base.html NACH design-tokens, style, tafel und
     knoepfe. Ein <link> dort hat dieselbe Kaskadenposition wie der
     <style>-Block vorher -- bei gleicher Spezifitaet gewinnt weiterhin,
     was hier steht. Wer die Zeile nach oben schiebt, dreht stillschweigend
     Regeln um, die sich heute gegenseitig schlagen.
   ========================================================================= */

/* ===========================================================================
   Der Hub — Familienleiste und Kacheln
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von patient_portal.html.
   ======================================================================== */
  /* .kopf-zeile, .hub-grid und .hub-kachel stehen seit dem 06.08.2026 in
     style.css (Paket 7): sie galten fuer sieben Seiten, standen aber in
     dieser einen. Hier bleibt, was wirklich nur diese Seite braucht. */
  .portal-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  .familie-karte { background: var(--farbe-karte);
                   border: 1px solid var(--farbe-flaeche-rand);
                   border-radius: var(--radius-gross); padding: 16px 18px; margin-bottom: 20px; }
  .familie-karte h2 { font-size: 15px; margin: 0 0 4px; }
  .familie-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 0;
                   border-bottom: 1px solid var(--farbe-flaeche-rand); }
  .familie-zeile:last-child { border-bottom: 0; }
  .familie-zeile .wer { font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0; }
  .familie-zeile .lage { font-size: 12.5px; color: var(--farbe-text-gedaempft); }
  .familie-zeile .punkt { display: inline-block; font-size: 11.5px; padding: 2px 9px;
                          border-radius: var(--radius-gross); margin-right: 5px;
                          background: var(--status-erinnerung-bg); color: var(--status-erinnerung); }
  .familie-zeile .punkt.ruhig { background: var(--farbe-flaeche);
                                color: var(--farbe-text-gedaempft); }
  .familie-zeile button { width: auto; padding: 7px 13px; font-size: 12.5px; }

/* ===========================================================================
   Rechnungen
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von rechnungen.html.
   ======================================================================== */
  .sektion-titel { font-size: 15px; font-weight: 600; margin: 28px 0 14px; }
  .sektion-titel:first-of-type { margin-top: 0; }
  /* umbrechen: drei Schaltflächen plus Status-Pille sind auf dem Handy 438 px
     breit und passen nicht in eine 362 px schmale Karte. Ohne den Umbruch
     wurde die ganze Seite seitlich verschiebbar — man musste wischen, um
     "Kommentar" überhaupt zu sehen. */
  .rechnung-aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  /* Schmaler Schirm: Angaben über die Knöpfe stapeln statt nebeneinander.
     Bei 834 px blieben für die linke Spalte gut 200 px -- der Betrag brach
     dort auf zwei Zeilen um ("1.456,83" / "€"), was aussieht wie ein Fehler.
     Am 28.07.2026 auf dem 11-Zoll-iPad aufgefallen. */
  @media (max-width: 900px) {
    .rechnung-karte { flex-direction: column; align-items: stretch; gap: 14px; }
    .rechnung-aktionen { width: 100%; }
    .rechnung-aktionen button { flex: 1 1 46%; }
  }
  /* Ein Geldbetrag wird nie umgebrochen -- auch nicht zwischen Zahl und
     Währungszeichen. */
  .rechnung-details .rechnung-betrag { white-space: nowrap; }
  .pdf-btn, .bezahlen-btn { width: auto; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  /* .frage-link ist am 16.08.2026 mit dem Knopf "Frage zur Rechnung"
     gegangen (Til): es soll genau einen Einstieg in den Briefkasten geben. */
  .zahlungs-banner { padding: 14px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 13.5px; }
  .zahlungs-banner.erfolg { background: var(--status-bezahlt-bg); color: var(--status-bezahlt); }
  .zahlungs-banner.abgebrochen { background: var(--farbe-fehler-sanft); color: var(--farbe-fehler); }

/* ===========================================================================
   Individuelle Therapievorschläge
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von kostenvoranschlaege.html.
   ======================================================================== */
  .kv-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .kv-karte {
    border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross); padding: 18px 20px;
    background: var(--farbe-karte); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  }
  .kv-info .betrag { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
  .kv-info .status { font-size: 12.5px; color: var(--farbe-text-gedaempft); margin-top: 3px; }
  /* HIER STAND `.kv-status-pille`. Sie war bis auf den Eckenradius wortgleich
     mit `.status-pille` in style.css -- dieselbe Monospace-Ticketoptik,
     derselbe Punkt davor, dieselben zwei Farben unter anderen Namen
     (offen/unterschrieben statt erinnerung/bezahlt). Am 24.08.2026 auf die
     eine Pille zusammengezogen; das Markup nimmt jetzt .status-pille. */
  .kv-aktionen { display: flex; gap: 8px; }
  .kv-aktionen a, .kv-aktionen button { width: auto; padding: 8px 14px; font-size: 13px; white-space: nowrap; }

  .unterschreiben-overlay {
    position: fixed; inset: 0; background: rgba(33, 21, 16,0.55); display: none;
    align-items: center; justify-content: center; z-index: 1100; padding: 20px;
  }
  .unterschreiben-overlay.offen { display: flex; }
  .unterschreiben-karte {
    background: var(--farbe-karte); border-radius: var(--radius); padding: 28px; max-width: 620px; width: 100%;
    max-height: 90vh; overflow-y: auto;
  }
  /* .signatur-canvas und .signatur-aktionen stehen seit dem 06.08.2026 in
     style.css: sie standen hier UND im Anamnese-Bogen, mit zwei
     verschiedenen Koerpern fuer dieselbe Flaeche. */
  .leere-liste { color: var(--farbe-text-gedaempft); font-size: 13.5px; padding: 24px 0; text-align: center; }

/* ===========================================================================
   Dokumente hochladen, samt Kamera-Scan
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von dokumente.html.
   ======================================================================== */
  .upload-karte {
    padding: 20px; border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross);
    margin-bottom: 28px; background: var(--farbe-flaeche);
  }
  .upload-karte label { margin-top: 12px; }
  .dokument-eintrag {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 14px 16px; border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross); margin-bottom: 10px;
  }
  .dokument-info .beschreibung { font-weight: 600; font-size: 14px; }
  .dokument-info .datum { font-size: 12.5px; color: var(--farbe-text-schwach); margin-top: 2px; }
  .dokument-status { font-size: 12.5px; padding: 4px 10px; border-radius: var(--radius-gross); white-space: nowrap; }
  .status-wartet { background: var(--status-erinnerung-bg); color: var(--status-erinnerung); }
  .status-fertig { background: var(--status-bezahlt-bg); color: var(--status-bezahlt); }
  .herunterladen-btn { width: auto; padding: 7px 14px; font-size: 12.5px; }

  /* --- Scannen ---------------------------------------------------------- */
  .oder-trenner {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 14px; color: var(--farbe-text-gedaempft); font-size: 12.5px;
  }
  .oder-trenner::before, .oder-trenner::after {
    content: ""; flex: 1; height: 1px; background: var(--farbe-flaeche-rand);
  }
  .scan-hinweis {
    font-size: 12.5px; line-height: 1.5; color: var(--farbe-text-gedaempft);
    margin: 8px 0 0;
  }
  .scan-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .scan-kopf h2 { margin: 0 0 4px; font-size: 16px; }

  .scan-seiten { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
  .scan-seite {
    position: relative; width: 92px; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--farbe-flaeche-rand); background: var(--farbe-karte);
  }
  .scan-seite img { display: block; width: 100%; }
  .scan-seite .nummer {
    position: absolute; top: 4px; left: 4px; background: var(--farbe-aktion);
    color: var(--farbe-karte); font-size: 11px; font-weight: 600; border-radius: var(--radius); padding: 1px 6px;
  }
  .scan-seite .weg {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
    border-radius: 50%; background: rgba(255,255,255,.92); color: var(--farbe-fehler);
    border: 1px solid var(--farbe-flaeche-rand); font-size: 13px; line-height: 1;
  }
  .scan-seite.laedt { min-height: 120px; display: grid; place-items: center;
    font-size: 12px; color: var(--farbe-text-gedaempft); }

  /* --- Ecken zurechtziehen ---------------------------------------------- */
  .ecken-fenster {
    display: none; position: fixed; inset: 0; z-index: 1200;
    background: rgba(33, 21, 16,.72); padding: 16px;
    align-items: center; justify-content: center;
  }
  .ecken-fenster.offen { display: flex; }
  .ecken-karte {
    background: var(--farbe-karte); border-radius: var(--radius); width: 100%; max-width: 560px;
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  }
  .ecken-kopf { padding: 16px 18px 10px; }
  .ecken-kopf h2 { margin: 0; font-size: 16px; }
  .ecken-buehne {
    flex: 1; min-height: 0; padding: 0 18px; display: grid; place-items: center;
    touch-action: none;                 /* sonst scrollt die Seite beim Ziehen */
  }
  .ecken-buehne canvas { max-width: 100%; max-height: 62vh; border-radius: var(--radius); }
  .ecken-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px 18px;
  }
  .ecken-fuss button { width: auto; padding: 11px 20px; }

/* ===========================================================================
   Nachricht an die Praxis
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von patient_nachrichten.html.
   ======================================================================== */
  /* Der Hinweis auf den Notruf steht VOR dem Formular und ist nicht
     wegklickbar: ein Briefkasten wird nicht ständig geleert. */
  .notfall {
    background: var(--status-erinnerung-bg); color: var(--status-erinnerung);
    border-radius: var(--radius-gross); padding: 13px 16px; font-size: 13.5px; font-weight: 600;
    margin-bottom: 24px;
  }

  .anliegen-liste { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .anliegen {
    text-align: left; width: 100%; background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross);
    padding: 14px 16px; cursor: pointer; color: var(--farbe-text);
  }
  .anliegen:hover { border-color: var(--farbe-akzent); }
  .anliegen[aria-pressed="true"] { border-color: var(--farbe-akzent); background: var(--farbe-akzent-sanft); }
  .anliegen .titel { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
  .anliegen .hilfe { font-size: 12.5px; color: var(--farbe-text-gedaempft); margin-top: 3px; line-height: 1.45; }

  /* Sieht bewusst anders aus als die Anliegen daneben: es ist keine Wahl
     im Formular, sondern ein Weg hinaus. */
  .termin-weg {
    display: flex; align-items: center; gap: 13px; margin-top: 14px;
    padding: 14px 16px; border-radius: var(--radius-gross); text-decoration: none;
    background: var(--farbe-akzent-sanft); color: var(--farbe-text);
    border: 1px solid transparent;
  }
  .termin-weg:hover { border-color: var(--farbe-akzent); }
  .termin-weg .symbol { font-size: 20px; line-height: 1; }
  .termin-weg .titel { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; display: block; }
  .termin-weg .hilfe { font-size: 12.5px; color: var(--farbe-text-gedaempft); margin-top: 3px; line-height: 1.45; display: block; }
  /* Der Pfeil rechts ist am 07.08.2026 entfallen (Briefing 8): Klickbarkeit
     zeigt kein Symbol an, sondern der Druckschatten. Die Regel bleibt als
     Grabstein NICHT stehen -- ein Selektor ohne Element ist Ballast. */

  .schreib-karte {
    padding: 20px; border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross);
    background: var(--farbe-flaeche); margin-bottom: 30px;
  }
  .vorgang {
    border: 1px solid var(--farbe-flaeche-rand); border-radius: var(--radius-gross);
    margin-bottom: 14px; overflow: hidden;
  }
  .vorgang-kopf {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 13px 16px; background: var(--farbe-flaeche); cursor: pointer;
  }
  .vorgang-kopf .titel { font-weight: 600; font-size: 14px; flex: 1; }
  .vorgang-kopf .datum { font-size: 12px; color: var(--farbe-text-gedaempft); }
  .zustand { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-gross); white-space: nowrap; }
  .zustand-neu { background: var(--status-info-bg); color: var(--status-info); }
  .zustand-in_arbeit { background: var(--status-erinnerung-bg); color: var(--status-erinnerung); }
  .zustand-erledigt { background: var(--status-bezahlt-bg); color: var(--status-bezahlt); }

  .verlauf { padding: 16px; display: none; }
  .verlauf.offen { display: block; }
  .blase { max-width: 82%; padding: 11px 14px; border-radius: var(--radius-gross); margin-bottom: 10px; font-size: 13.5px; line-height: 1.55; }
  .blase .wer { font-size: 11.5px; color: var(--farbe-text-gedaempft); margin-bottom: 3px; }
  .von-patient { background: var(--farbe-akzent-sanft); margin-left: auto; }
  .von-praxis { background: var(--farbe-flaeche); border: 1px solid var(--farbe-flaeche-rand); }
  .antwort-zeile { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
  .antwort-zeile textarea { flex: 1; min-height: 62px; }
  .antwort-zeile button { width: auto; padding: 10px 18px; }

/* ===========================================================================
   Meine Daten
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von patient_stammdaten.html.
   ======================================================================== */
  .karte { background: var(--farbe-karte); border: 1px solid var(--farbe-flaeche-rand);
           border-radius: var(--radius-gross); padding: 18px 18px 22px; margin-bottom: 16px; }
  .karte h2 { font-size: 16px; margin: 0 0 6px; }
  .fest { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
          border-bottom: 1px solid var(--farbe-flaeche-rand); font-size: 14px; }
  .fest:last-child { border-bottom: 0; }
  .fest .bez { color: var(--farbe-text-gedaempft); }
  .fest .wert { font-weight: 600; text-align: right; }
  .reihe { display: flex; gap: 10px; flex-wrap: wrap; }
  .reihe > * { flex: 1; min-width: 130px; }
  .hinweis { font-size: 13px; color: var(--farbe-text-gedaempft); margin-top: 6px; }
  .offen { background: var(--status-erinnerung-bg); border: 1px solid var(--status-erinnerung); color: var(--status-erinnerung);
           border-radius: var(--radius-gross); padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px; }
  .offen b { display: block; margin-bottom: 4px; }
  .offen ul { margin: 4px 0 0 18px; padding: 0; }
  .schalter-zeile { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
                    padding: 10px 0; font-weight: 400; }
  .schalter-zeile input { width: auto; margin: 3px 0 0; flex: none; }
  .schalter-zeile b { display: block; font-size: 14.5px; }
  .schalter-zeile .hinweis { margin-top: 2px; }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip { padding: 8px 16px; font-size: 14px; border-radius: var(--radius-gross); cursor: pointer;
          border: 1px solid var(--farbe-flaeche-rand);
          background: var(--farbe-karte); user-select: none; }
  .chip.an { border-color: var(--farbe-akzent);
             background: var(--farbe-akzent-sanft);
             color: var(--farbe-akzent-dunkel); font-weight: 600; }
  .chip.gesperrt { opacity: .45; cursor: not-allowed; }

/* ===========================================================================
   Meine Unterlagen
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von patient_archiv.html.
   ======================================================================== */
  .jahre { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 20px; }
  .jahr { padding: 7px 15px; font-size: 13.5px; border-radius: var(--radius-gross); cursor: pointer;
          border: 1px solid var(--farbe-flaeche-rand);
          background: var(--farbe-karte); user-select: none; }
  .jahr.an { border-color: var(--farbe-akzent);
             background: var(--farbe-akzent-sanft);
             color: var(--farbe-akzent-dunkel); font-weight: 600; }
  .eintrag { display: flex; align-items: center; gap: 14px; padding: 14px 0;
             border-bottom: 1px solid var(--farbe-flaeche-rand); }
  .eintrag:last-child { border-bottom: 0; }
  .eintrag .datum { font-size: 12.5px; color: var(--farbe-text-gedaempft);
                    min-width: 82px; }
  .eintrag .haupt { flex: 1; min-width: 0; }
  .eintrag .titel { font-weight: 600; font-size: 14.5px; }
  .eintrag .neben { font-size: 12.5px; color: var(--farbe-text-gedaempft); }
  .eintrag .aktion { flex: none; }
  .eintrag .aktion a { font-size: 13px; font-weight: 600; }
  .marke-art { display: inline-block; font-size: 11px; letter-spacing: .04em;
               text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-gross);
               background: var(--farbe-flaeche);
               color: var(--farbe-text-gedaempft); margin-right: 6px; }
  .marke-offen { background: var(--status-erinnerung-bg); color: var(--status-erinnerung); }

/* ===========================================================================
   Die Anmeldung
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von anmelden.html.
   ======================================================================== */
  /* Zwei Schritte, EIN Fenster. Kein Seitenwechsel zwischen Angaben und
     Code -- wer zwischendurch ins Postfach geht und zurueckkommt, soll
     dieselbe Seite vorfinden und nicht von vorn anfangen. */
  .schritt { display: none; }
  .schritt.aktiv { display: block; }

  .namenszeile { display: flex; gap: 10px; }
  .namenszeile > div { flex: 1; min-width: 0; }


  /* Das Codefeld ist absichtlich gross und weit gesperrt: es wird
     abgetippt, oft am Handy, oft von jemandem mit Lesebrille. */
  #code {
    font-size: 30px; letter-spacing: 10px; text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 14px 10px;
  }
  .code-hinweis { text-align: center; color: var(--farbe-text-leise); font-size: 13px; }
  .an-adresse { font-weight: 600; overflow-wrap: anywhere; }

  .zurueck {
    background: none; border: none; color: var(--farbe-akzent);
    text-decoration: underline; cursor: pointer; padding: 6px 0;
    font-size: 14px; width: auto;
  }
  .fusszeile { margin-top: 22px; text-align: center; }

  @media (pointer: coarse) {
    /* Am Finger bedienbar: 44 px ist die Kante, unter der man danebentippt. */
    .zurueck { min-height: 44px; }
  }

/* ===========================================================================
   Anmeldung mit Passwort
   ---------------------------------------------------------------------------
   Stand bis zum 07.08.2026 im <style>-Block von patient_login.html.
   ======================================================================== */