/* ══════════════════════════════════════════════════════
   Schriften — 15.09.2026 von Google auf den eigenen Server geholt
   ══════════════════════════════════════════════════════
   Die Dateien liegen unter app/fonts/. Bewusst NICHT von
   Google: Eine Einbindung über fonts.googleapis.com schickt
   beim Seitenaufruf die IP-Adresse jeder Kundin an Google —
   in Deutschland ein bekannter Abmahngrund
   (LG München, 20.01.2022).

   Die Blöcke unten sind Zeile für Zeile dieselben, die Google
   vorher ausgeliefert hat — gleiche Dateien, gleiche Schnitte,
   nur die Adresse zeigt jetzt auf den eigenen Server. Deshalb
   sieht alles aus wie vorher. Die Gewichte stehen einzeln da
   (600/700 bzw. 400/500/700) und nicht als Bereich: Genau so
   hat Google es geliefert, und nur so bleibt das Schriftbild
   unverändert.

   Zeichensätze Kyrillisch und Vietnamesisch sind weggelassen —
   wie auf der Website auch. Herkunft und Lizenz: fonts/LIZENZ.txt
   ────────────────────────────────────────────────────── */

/* Cormorant Garamond — Überschriften */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/cormorant.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:600;
  font-display:swap;src:url(fonts/cormorant-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/cormorant.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/cormorant-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* DM Sans — Fließtext, Knöpfe, Zwischenüberschriften */
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/dm-sans.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url(fonts/dm-sans-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/dm-sans.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url(fonts/dm-sans-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/dm-sans.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:700;
  font-display:swap;src:url(fonts/dm-sans-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --navy: #1A2744;
  --gold: #C9A475;
  --bordeaux: #6B2D3E;
  --beige: #F4EDE4;
  --white: #FFFFFF;
}

* {
  box-sizing: border-box;
}

/* Knöpfe und Eingabefelder erben die Schrift nicht von selbst — ohne diese
   Zeile setzt der Browser sie in seiner eigenen Schrift (bei uns Arial).
   Das fiel am 15.09.2026 beim Vermessen des Anmelde-Knopfes auf und war
   vorher jahrelang so. Einzelne Stellen im Stylesheet hatten sich bereits
   selbst geholfen (.week-day, .back-to-list-btn, .post-menu-item); hier gilt
   es jetzt für alle. Felder mit eigener Schrift im style-Attribut, etwa die
   Wissensbasis-Textfelder in monospace, bleiben davon unberührt. */
button, input, select, textarea {
  font-family: inherit;
}

body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  background: var(--beige);
  color: var(--navy);
}

h1 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--gold);
  margin: 0 0 0.5rem;
}

h2, h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gold);
}

h2 {
  font-size: 1.9rem;
}

header.app-header {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 1rem 1.25rem;
  z-index: 10;
}

header.app-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

.eyebrow-badge {
  display: inline-block;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.callout {
  background: var(--beige);
  color: var(--navy);
  font-weight: 700;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}

.brand-footer {
  text-align: right;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: #8b93a3;
  margin-top: 2rem;
}

.brand-footer strong {
  color: var(--gold);
  font-weight: 700;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.card {
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(26, 39, 68, 0.08);
  margin-bottom: 1.25rem;
}

.card.optional {
  background: #ECE7DF;
}

label {
  display: block;
  font-weight: 600;
  margin: 1rem 0 0.35rem;
  font-size: 0.95rem;
}

label:first-child {
  margin-top: 0;
}

.hint {
  font-size: 0.9rem;
  color: #6b7280;
  margin: -0.15rem 0 0.35rem;
}

input, textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid #D9CFC2;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  background: var(--white);
}

textarea {
  resize: vertical;
  min-height: 4.5rem;
}

input:focus, textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

button.primary {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  cursor: pointer;
}

button.primary:hover {
  background: #24345c;
}

button.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-box {
  background: #F6E4E8;
  border: 1px solid var(--bordeaux);
  color: var(--bordeaux);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  display: none;
}

.error-box.visible {
  display: block;
}

.success-box {
  background: #E7F0E8;
  border: 1px solid #3F7A4C;
  color: #3F7A4C;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  display: none;
}

.success-box.visible {
  display: block;
}

.link-row {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.link-row a {
  color: var(--bordeaux);
  text-decoration: none;
  font-weight: 600;
}

.field-row {
  display: flex;
  gap: 0.75rem;
}

.field-row > div {
  flex: 1;
}

.file-picker-label {
  display: block;
  border: 2px dashed var(--gold);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
  background: var(--beige);
}

.file-picker-label input {
  display: none;
}

.thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.thumb-grid .thumb {
  position: relative;
  width: 72px;
  height: 72px;
}

.thumb-grid img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #D9CFC2;
  display: block;
}

.thumb-grid .thumb button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--bordeaux);
  color: var(--white);
  font-size: 0.7rem;
  line-height: 20px;
  padding: 0;
  cursor: pointer;
}

.dictation-tip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--beige);
  border: 1px solid #E5DCCB;
  border-radius: 10px;
  padding: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}

.dictation-tip-svg {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.dictation-tip p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--navy);
}

.password-field-wrapper {
  position: relative;
}

.password-field-wrapper input {
  padding-right: 2.6rem;
}

.password-toggle-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem;
  line-height: 1;
  opacity: 0.6;
}

.password-toggle-btn:hover {
  opacity: 1;
}

/* ---------- Wochenbericht "Meine Woche" ---------- */
/* Wird von patient.html (Kundinnen-Ansicht) und doctor.html (Freigabe)
   gemeinsam genutzt — Aenderungen wirken in beiden. */

.week-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.week-range { font-size: 0.9rem; color: #6b7280; }

.week-overall { display: flex; align-items: center; gap: 0.85rem; margin: 0.75rem 0 0.25rem; }
.week-overall .week-dot-big { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(26, 39, 68, 0.15); }
.week-overall-text { font-size: 1rem; }
.week-overall-text strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bordeaux); margin-bottom: 0.15rem; }

.week-ampel { display: flex; gap: 0.35rem; margin: 0.9rem 0 0.5rem; }
.week-day { flex: 1; min-width: 0; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.week-day-label { display: block; font-size: 0.7rem; font-weight: 700; color: #6b7280; margin-bottom: 0.3rem; }
.week-dot { display: block; width: 100%; max-width: 42px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; border: 1px solid rgba(26, 39, 68, 0.15); }
.week-day.selected .week-dot { outline: 2px solid var(--navy); outline-offset: 2px; }

.week-dot.gruen, .week-dot-big.gruen { background: #5C9A4A; }
.week-dot.gelb, .week-dot-big.gelb { background: #E3B23C; }
.week-dot.rot, .week-dot-big.rot { background: #B4453D; }
.week-dot.grau, .week-dot-big.grau { background: #DCD6CC; }

.week-day-detail { font-size: 0.95rem; background: var(--beige); border-radius: 8px; padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; }
.week-day-detail strong { display: block; font-size: 0.75rem; color: var(--bordeaux); margin-bottom: 0.15rem; }
.week-legend { font-size: 0.75rem; color: #6b7280; }

.week-section { margin-top: 1rem; }
.week-section h4 { margin: 0 0 0.35rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bordeaux); border: none; padding: 0; font-weight: 700; }
.week-section p { margin: 0; font-size: 1.05rem; white-space: pre-wrap; }

.week-facts { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid #E5DCCB; font-size: 0.95rem; }
.week-facts h4 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bordeaux); border: none; padding: 0; font-weight: 700; }
.week-facts ul { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; }
.week-facts li { margin-bottom: 0.2rem; }
.week-facts .week-fact-empty { color: #6b7280; font-style: italic; }
.week-recipe-tag { display: inline-block; font-size: 0.72rem; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; }
.week-recipe-tag.empfehlung { background: #E7F0E3; color: #3F6B32; }
.week-recipe-tag.fehler { background: #F6E4E8; color: var(--bordeaux); }

.week-archive-row { margin-top: 1rem; }
.week-archive-row label { margin-top: 0; }

/* ---------- Wochenbericht: Grafik-Kopf (Umbau 03.09.2026) ---------- */
/* Ziel: beim Oeffnen sofort ein Bild, kein Textblock. Erst der Balken,
   dann die Ampel mit Legende, die langen Texte danach eingeklappt. */

.week-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 0.9rem 0 0.5rem; }
.week-bar span { display: block; height: 100%; }
.week-bar .gruen { background: #5C9A4A; }
.week-bar .gelb { background: #E3B23C; }
.week-bar .rot { background: #B4453D; }
.week-bar .grau { background: #DCD6CC; }

.week-counts { font-size: 0.88rem; color: #4b5563; line-height: 1.6; margin: 0 0 0.9rem; }

.week-overall-line { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
.week-overall-line .week-dot-mid { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 0.15rem; }
.week-dot-mid.gruen { background: #5C9A4A; }
.week-dot-mid.gelb { background: #E3B23C; }
.week-dot-mid.rot { background: #B4453D; }
.week-dot-mid.grau { background: #DCD6CC; }

.week-legend-list { font-size: 0.85rem; line-height: 2; margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid #E5DCCB; }
.week-legend-list span.sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 0.55rem; vertical-align: middle; }

.week-red-day { background: #F9EDEE; border-left: 3px solid var(--bordeaux); border-radius: 0; padding: 0.65rem 0.8rem; margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.5; }
.week-red-day strong { display: block; color: #8A2F32; margin-bottom: 0.15rem; }

.week-fold { border-top: 1px solid #E5DCCB; }
.week-fold summary { list-style: none; cursor: pointer; padding: 0.85rem 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bordeaux); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.week-fold summary::-webkit-details-marker { display: none; }
.week-fold summary::after { content: '+'; font-size: 1.1rem; font-weight: 700; color: var(--gold); line-height: 1; }
.week-fold[open] summary::after { content: '–'; }
.week-fold p { margin: 0 0 0.9rem; font-size: 1.05rem; line-height: 1.6; white-space: pre-wrap; }

.week-trend-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 84px; margin-top: 0.5rem; }
.week-trend-bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.week-trend-bars .col span { display: block; border-radius: 4px 4px 0 0; }
.week-trend-bars .gruen { background: #5C9A4A; height: 100%; }
.week-trend-bars .gelb { background: #E3B23C; height: 65%; }
.week-trend-bars .rot { background: #B4453D; height: 35%; }
.week-trend-bars .grau { background: #DCD6CC; height: 12%; }
.week-trend-labels { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.week-trend-labels div { flex: 1; text-align: center; font-size: 0.7rem; color: #6b7280; }

/* ---------- Vorschau der Kundinnen-Ansicht (nur doctor.html) ---------- */
/* Handy-Rahmen, damit Dr. Wiesen am PC sieht, wie es auf dem Handy wirkt */
.wr-preview-frame { display: flex; justify-content: center; margin-top: 1.25rem; padding: 1rem; background: var(--beige); border-radius: 12px; }
.wr-preview-phone { width: 360px; max-width: 100%; background: var(--white); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 2px 12px rgba(26,39,68,0.12); }

/* ---------- Wochen-Säulen (ersetzen den waagerechten Balken, 03.09.2026) ---------- */
/* Dr. Wiesen: der gestapelte Balken las sich wie ein Strich und war kein
   Ueberblick. Stattdessen vier Saeulen, Hoehe = Anzahl Tage. Kategorien mit
   0 Tagen bekommen keine Saeule, werden aber mit "0" ausgewiesen — die vier
   Zahlen ergeben immer 7. */
.week-cols { display: flex; align-items: flex-end; gap: 0.6rem; margin: 1.1rem 0 0; }
.week-col { flex: 1; height: 118px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.week-col .num { font-size: 1.15rem; font-weight: 700; line-height: 1; margin-bottom: 0.3rem; color: var(--navy); }
.week-col .num.leer { color: #b0aaa1; font-weight: 500; }
.week-col .bar { display: block; width: 100%; border-radius: 5px 5px 0 0; }
.week-col .bar.gruen { background: #5C9A4A; }
.week-col .bar.gelb { background: #E3B23C; }
.week-col .bar.rot { background: #B4453D; }
.week-col .bar.grau { background: #DCD6CC; }
.week-col-labels { display: flex; gap: 0.6rem; margin-top: 0.45rem; }
.week-col-labels div { flex: 1; text-align: center; font-size: 0.68rem; line-height: 1.3; color: #4b5563; hyphens: auto; }

/* Tagespunkte auf die Haelfte verkleinert — sie waren zu dominant */
.week-dot { max-width: 21px; }
.week-ampel { gap: 0.3rem; margin: 1rem 0 0.5rem; }

/* Kategorie mit 0 Tagen: dünner Strich in der Farbe statt einer Lücke —
   die Reihe bleibt optisch geschlossen, die Null darüber sagt das Ergebnis. */
.week-col .bar.stumpf { height: 5px; }

/* Freigegebene Wochenberichte klappen sich zu (nur doctor.html) — Dr. Wiesen
   soll auf einen Blick sehen, wo noch Arbeit liegt. Entwürfe bleiben offen. */
.wr-fold-report { margin-top: 0.85rem; border-top: 1px solid #E5DCCB; }
.wr-fold-report summary { list-style: none; cursor: pointer; padding: 0.75rem 0 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--bordeaux); display: flex; align-items: center; gap: 0.4rem; }
.wr-fold-report summary::-webkit-details-marker { display: none; }
.wr-fold-report summary::before { content: '▸'; font-size: 0.9rem; color: var(--gold); }
.wr-fold-report[open] summary::before { content: '▾'; }

/* Erledigte Check-ins klappen zu (nur doctor.html): Antwort ist freigegeben
   und die Kundin hat nicht zurückgeschrieben. Eine neue Rückmeldung rendert
   die Karte wieder offen. */
.checkin-fold summary { list-style: none; cursor: pointer; padding: 0.4rem 0 0.2rem; font-size: 0.85rem; font-weight: 600; color: #4A7A3A; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.checkin-fold summary::-webkit-details-marker { display: none; }
.checkin-fold summary::before { content: '▸'; color: var(--gold); font-weight: 700; }
.checkin-fold[open] summary::before { content: '▾'; }
.checkin-fold-note { font-weight: 400; color: #6b7280; font-size: 0.82rem; }
.upload-card:has(.checkin-fold:not([open])) { padding-top: 0.9rem; padding-bottom: 0.9rem; opacity: 0.85; }
.upload-card:has(.checkin-fold:not([open])):hover { opacity: 1; }

/* ---------- "Braucht Ihre Aufmerksamkeit" (nur doctor.html) ---------- */
.attention-card { border-left: 4px solid var(--bordeaux); border-radius: 12px 0 0 12px; }
.attention-ok { background: #F2F6F0; }
.attention-ok p { color: #3F6B32; }
.attention-row { padding: 0.7rem 0.85rem; border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; background: var(--beige); border-left: 3px solid #DCD6CC; }
.attention-row:hover { background: #ECE3D6; }
.attention-row.stufe-1 { background: #F9EDEE; border-left-color: #B4453D; }
.attention-row.stufe-1:hover { background: #F4E0E2; }
.attention-row.stufe-2 { background: #FBF3E2; border-left-color: #E3B23C; }
.attention-row.stufe-2:hover { background: #F7EBD1; }
.attention-name { font-weight: 700; color: var(--navy); margin-bottom: 0.3rem; }
.attention-reason { font-size: 0.86rem; line-height: 1.5; color: #3f4756; margin-top: 0.2rem; }
.attention-tag { display: inline-block; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.72rem; font-weight: 700; margin-right: 0.45rem; vertical-align: middle; }
.attention-tag.stufe-1 { background: #B4453D; color: #fff; }
.attention-tag.stufe-2 { background: #E3B23C; color: #5A4310; }
.attention-tag.stufe-3 { background: #DCD6CC; color: #4b5563; }