/* GesundPass – Portale (privat und Pflegedienst)
   Warme Creme-Grundfläche, Salbeigrün als Primärfarbe, Koralle nur für echte
   Warnungen. Systemschrift, keine externen Ressourcen. */

:root {
  color-scheme: light dark;

  /* ---- Referenzpalette GesundPass ----
     Beige   #EDE3D1   Creme  #F6F2EA   Weiß   #FFFFFF
     Salbei  #A7C9AB   Grün   #7BA37F   Apricot #F2815E
     Salbei, Grün und Apricot tragen als Textfarbe zu wenig Kontrast und
     werden daher nur für Flächen, Symbole und Akzente eingesetzt.
     Für Text und Bedienelemente dient das dunklere Markengrün aus dem
     Logo (#50745C). */

  --beige: #EDE3D1;
  --creme: #F6F2EA;
  --salbei: #A7C9AB;
  --apricot: #F2815E;

  --grund: var(--creme);
  --grund-tief: var(--beige);
  --karte: #FFFFFF;
  --text: #2C3A33;
  --sek: #6B6B6B;
  --gruen: #7BA37F;
  --dunkel: #50745C;
  --linie: #DDD2BD;
  --koralle: #AC4227;
  --koralle-flaeche: #FCE2DA;
  --gruen-flaeche: #DCE9DD;
  --radius: 24px;
  --radius-klein: 16px;
  --leiste: 268px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16201B; --grund-tief: #1E2A24; --karte: #232F28;
    --text: #F3EFE6; --sek: #C3CBC5; --gruen: #A7C9AB; --dunkel: #A7C9AB;
    --linie: #45534B; --koralle: #F0A092;
    --koralle-flaeche: #4F2E27; --gruen-flaeche: #33493C;
  }
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: .1em 0 .3em; }
h2 { font-size: 1.4rem; margin: 0 0 .5em; }
h3 { font-size: 1.1rem; margin: 0; }
p { max-width: 68ch; }
a { color: var(--dunkel); }

:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 3px; border-radius: 6px; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: #e8dfcd; } }

.ueberspringen {
  position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--karte);
  color: var(--text); padding: 14px 20px; border-radius: 0 0 var(--radius-klein) 0;
  text-decoration: none; font-weight: 700;
}
.ueberspringen:focus { left: 0; }

.marke {
  display: inline-flex; align-items: center; min-height: 52px; text-decoration: none;
}
/* Originalasset statt Nachbau: Die Wortmarke ist serifenbetont. */
.marke-bild { height: 34px; width: auto; display: block; }
/* Logofassung nach Farbschema. Die dunkelgruene Wortmarke traegt auf dunklem
   Grund zu wenig Kontrast, deshalb eine helle Zweitfassung. */
.marke-bild.dunkel-modus { display: none; }
@media (prefers-color-scheme: dark) {
  .marke-bild.hell-modus { display: none; }
  .marke-bild.dunkel-modus { display: block; }
}
.bereichsname {
  color: var(--sek); padding-left: 18px; border-left: 1px solid var(--linie);
  font-size: .98rem;
}

/* --- Schlichte Hülle (Anmeldung, Rechtstexte) --- */
.kopf {
  max-width: 1120px; margin: auto; padding: 16px 22px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
main.schlicht { max-width: 1120px; margin: auto; padding: 18px 22px 56px; }

/* --- Angemeldete Hülle mit Seitenleiste --- */
.app-kopf {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 26px; border-bottom: 1px solid var(--linie); background: var(--karte);
}
.kopf-link {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 48px;
  padding: 6px 16px; border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 600; color: var(--text);
}
.kopf-link:hover { background: var(--grund-tief); }

.app-rahmen { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); align-items: start; }
.app-rahmen > * { min-width: 0; }

.seitenleiste {
  position: sticky; top: 0; padding: 22px 18px; border-right: 1px solid var(--linie);
  min-height: calc(100vh - 74px); display: flex; flex-direction: column;
}
.seitenleiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.seitenleiste a {
  display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 16px;
  border-radius: var(--radius-klein); text-decoration: none; color: var(--text); font-weight: 600;
}
.seitenleiste a:hover { background: var(--grund-tief); }
.seitenleiste a[aria-current="page"] { background: var(--gruen-flaeche); color: var(--dunkel); }
.seitenleiste svg { flex: none; }
.abmeldelink {
  margin-top: auto; display: flex; align-items: center; gap: 14px; min-height: 54px;
  padding: 8px 16px; border-top: 1px solid var(--linie); padding-top: 20px;
  text-decoration: none; color: var(--text); font-weight: 600;
}

main#inhalt { padding: 34px 34px 60px; max-width: 1020px; }
.kicker {
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
  font-weight: 800; color: var(--gruen); margin: 0;
}
.einleitung { color: var(--sek); font-size: 1.08rem; }

/* --- Karten --- */
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px; margin: 0 0 20px;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }

.statusband {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 22px;
}
.statusband .kreis { flex: none; }
.statusband .text { flex: 1 1 260px; }
.statusband p { margin: .2em 0 0; color: var(--sek); }

.kreis {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gruen-flaeche); color: var(--dunkel);
}
.kreis.warn { background: var(--koralle-flaeche); color: var(--koralle); }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 22px; }
.kachel {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 6px;
}
.kachel-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.kachel h3 { font-size: 1.05rem; }
.kachel .zahl { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--dunkel); }
.kachel p { color: var(--sek); margin: 0; flex-grow: 1; font-size: .98rem; }

.pille {
  display: inline-block; border-radius: 999px; padding: 5px 16px;
  font-weight: 750; font-size: .95rem;
}
.pille.aus { background: var(--koralle-flaeche); color: var(--koralle); }
.pille.an { background: var(--gruen-flaeche); color: var(--dunkel); }

/* --- Aktionen --- */
.hauptaktion, .nebenaktion, .warnaktion, button.hauptaktion, button.nebenaktion, button.warnaktion {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 22px; border-radius: var(--radius-klein);
  font-weight: 700; font-size: 1rem; font-family: inherit; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
}
.hauptaktion { background: var(--dunkel); color: var(--grund); }
.hauptaktion:hover { background: var(--gruen); }
@media (prefers-color-scheme: dark) { .hauptaktion { color: #16201B; } }
.nebenaktion { border-color: var(--linie); color: var(--dunkel); background: var(--karte); }
.nebenaktion:hover { border-color: var(--gruen); }
.warnaktion { border-color: var(--koralle); color: var(--koralle); background: transparent; }
.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 700; color: var(--dunkel); text-decoration: none; margin-top: 4px;
}
.pfeil-link:hover { gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .pfeil-link { transition: gap .15s; } }
.zurueck { display: inline-flex; align-items: center; min-height: 48px; color: var(--dunkel); }

/* --- Formulare --- */
.formularseite, .textseite {
  max-width: 640px; margin: 30px auto; background: var(--karte); padding: 34px;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
form { display: grid; gap: 18px; margin-top: 24px; }
label { display: grid; gap: 7px; font-weight: 700; }
input[type="email"], input[type="password"], input[type="text"] {
  font: inherit; min-height: 54px; border: 1px solid var(--linie); border-radius: 14px;
  background: var(--grund); color: var(--text); padding: 12px 15px; width: 100%;
}
input:focus-visible { border-color: var(--dunkel); }
.haken { grid-template-columns: 28px 1fr; align-items: start; }
.haken input { min-height: 24px; width: 24px; }

/* --- Meldungen --- */
.fehler, .erfolg, .hinweis, .warnung {
  border-radius: var(--radius-klein); padding: 16px 20px; margin: 0 0 20px;
}
.fehler { background: var(--koralle-flaeche); color: var(--koralle); font-weight: 600; }
.erfolg { background: var(--gruen-flaeche); color: var(--dunkel); font-weight: 600; }
.hinweis { background: var(--karte); border-left: 5px solid var(--gruen); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.warnung { background: var(--karte); border-left: 5px solid var(--koralle); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.hinweis p, .warnung p { margin: .4em 0 0; color: var(--sek); }
.klein { font-size: .93rem; color: var(--sek); }

/* --- Angaben und Listen --- */
.angaben { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 12px 26px; margin: 0; }
.angaben dt { font-weight: 700; }
.angaben dd { margin: 0; color: var(--sek); }

.punkte { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.punkte li { position: relative; padding-left: 32px; }
.punkte li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; text-align: center; color: var(--dunkel); font-weight: 800; }
.punkte.minus li::before { content: "✕"; color: var(--koralle); }

.sitzungsliste { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.sitzungsliste li {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 16px 18px;
}
.sitzungsliste span { display: block; color: var(--sek); font-size: .95rem; }
.sitzungsliste form { margin: 0; }

.grundsaetze { display: flex; flex-wrap: wrap; gap: 26px; }
.grundsaetze > div { display: grid; justify-items: center; text-align: center; gap: 6px; min-width: 130px; }
.grundsaetze span { font-size: .93rem; color: var(--sek); }

/* --- Fußzeile --- */
.fuss {
  border-top: 1px solid var(--linie); padding: 24px 34px; display: flex;
  flex-wrap: wrap; gap: 12px 28px; align-items: center;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; }
.fuss .notruf { margin: 0 0 0 auto; color: var(--koralle); font-size: .95rem; }

/* --- Schmale Displays --- */
@media (max-width: 900px) {
  .kacheln { grid-template-columns: 1fr; }
  .app-rahmen { grid-template-columns: 1fr; }
  .seitenleiste {
    position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--linie);
    padding: 12px 16px;
  }
  .seitenleiste ul {
    grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px;
    overflow-x: auto; max-width: 100%; padding-bottom: 4px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .seitenleiste a { flex-direction: column; gap: 4px; min-width: 84px; font-size: .9rem; text-align: center; }
  .abmeldelink { margin-top: 12px; border-top: 1px solid var(--linie); }
  main#inhalt { padding: 24px 20px 48px; max-width: 100%; }
  .statusband, .karte, .kachel { padding: 20px; }
  .statusband { flex-direction: column; align-items: flex-start; }
  .grundsaetze { gap: 18px; }
  .grundsaetze > div { min-width: 96px; }
  .angaben { grid-template-columns: 1fr; gap: 2px 0; }
  .angaben dd { margin-bottom: 14px; }
  .fuss { padding: 20px; }
  .fuss .notruf { margin-left: 0; width: 100%; }
  .bereichsname { padding-left: 0; border-left: 0; }
}

@media (prefers-contrast: more) {
  :root { --linie: #55645E; --sek: #3C4A45; }
  .karte, .kachel, .statusband { border-width: 2px; }
}