/* ============================================================
   Verordnungsprüfung – Styles der Anwendung (Fassung 2)
   Formensprache der Internetseite www.ergo-vision.de:
   flächig, kantig, dünne schwarze Linien, fette Überschriften.
   Baut auf colors_and_type.css (Designsystem ERGOVISION) auf
   und überschreibt, wo die Internetseite davon abweicht.
   ============================================================ */
:root {
  --ink: #1D1D1B;            /* Textfarbe der Internetseite */
  --gelb: #FFCD00;
  --rosa: #F3B2D1;
  --weiss: #FFFFFF;
  --linie: 1px solid var(--ink);
  /* Statusfarben: Ergänzung für diese Anwendung */
  --status-ok: #1F7A5C;      /* weiße Schrift */
  --status-warn: #FFCD00;    /* dunkle Schrift */
  --status-stop: #C8102E;    /* weiße Schrift */
  --breite: 1040px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-primary); font-size: 18px; line-height: 1.5; letter-spacing: 0.8px; color: var(--ink); background: var(--weiss); }
h1, h2, h3, h4 { font-weight: 700; color: var(--ink); letter-spacing: 0.8px; margin: 0; }
/* Geomanist Bold aus dem lizenzierten Paket (Atipo). Die frühere Übergangslösung mit Kontur
   ist abgeschaltet (--fett-kontur: 0); die Regel unten bleibt, damit sie bei Bedarf wieder greift. */
@font-face {
  font-family: 'Geomanist';
  src: url('./fonts/Geomanist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root { --fett-kontur: 0; }
h1, h2, h3, h4, .fett, .status .wort, .skala > div, .pfeilzeile .kopfwert, .flaeche .titel, table.liste th, .ausgeschlossen { -webkit-text-stroke: var(--fett-kontur) currentColor; }
h1 { font-size: 64px; line-height: 1.15; }
h2 { font-size: 30px; line-height: 1.3; }
h3 { font-size: 22px; line-height: 1.3; }
p { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.5; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fett { font-weight: 700; }
.gross { font-size: 24px; }
.schmal { max-width: 860px; }

/* Kopfzeile */
.kopf { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; height: 65px; border-bottom: var(--linie); background: var(--weiss); }
.kopf .logo { display: flex; align-items: center; padding-left: 15px; }
.kopf .logo img { height: 36px; display: block; }
.kopf nav { display: flex; align-items: center; gap: 48px; }
.kopf nav a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.kopf nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.kopf nav a:hover { text-decoration: none; border-bottom-color: var(--ink); }
.kopf .block { display: flex; align-items: center; padding: 0 60px; background: var(--ink); color: var(--weiss); border: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.kopf .block:hover { text-decoration: none; background: #000; }

/* Inhaltsbreite */
.innen { max-width: var(--breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Gelbes Band mit Eingabe */
.band { background: var(--gelb); }
.band .innen { padding-top: 56px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 28px; }
.eingabe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; align-items: end; margin: 0; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld label, .feld legend { font-size: 15px; }
.feld.breit { grid-column: span 2; }   /* Diagnosegruppe mit Titel */
.feld input, .feld select { height: 56px; border: var(--linie); border-radius: 0; background: var(--weiss); padding: 0 16px; font: inherit; font-size: 20px; letter-spacing: 0.8px; color: var(--ink); width: 100%; }
/* Safari (iOS): Felder nicht breiter als ihre Spalte; Datumsfelder wie Textfelder (Breite, 56 px, linksbündig, auch leer) */
.feld { min-width: 0; }
.feld input, .feld select { min-width: 0; max-width: 100%; }
.feld select { contain: paint; }   /* WebKit zählt sonst den langen Text der gewählten Option zur Seitenbreite */
.feld input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; line-height: 54px; }   /* 56 px abzüglich Rand: Datum mittig */
.feld input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.feld .fehler { font-size: 15px; background: var(--weiss); padding: 2px 8px; border-left: 4px solid var(--status-stop); }
.knopf { height: 56px; border: none; border-radius: 0; background: var(--ink); color: var(--weiss); font: inherit; padding: 0 48px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.knopf:hover { background: #000; text-decoration: none; }
.pille { display: inline-flex; align-items: center; background: var(--weiss); color: var(--ink); border-radius: 9999px; padding: 10px 24px; font-size: 16px; white-space: nowrap; border: none; cursor: pointer; font-family: inherit; letter-spacing: inherit; }
.pille.dunkel { background: var(--ink); color: var(--weiss); padding: 6px 18px; cursor: default; }
.pille.gelb { background: var(--gelb); }
.pille.umrandet { border: var(--linie); padding: 6px 18px; cursor: default; }
.pfeile { display: flex; gap: 40px; flex-wrap: wrap; }
.pfeil::before { content: "→ "; }
details.mehr > summary { list-style: none; cursor: pointer; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr[open] > summary { margin-bottom: 20px; }
.wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.wahl label { display: inline-flex; align-items: center; gap: 8px; background: var(--weiss); border: var(--linie); padding: 0 16px; height: 56px; font-size: 18px; cursor: pointer; }
.wahl input { width: 20px; height: 20px; accent-color: var(--ink); }

/* Ergebnis */
.haupt { padding-top: 64px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 48px; }
.abschnitt { display: flex; flex-direction: column; gap: 24px; }
.titelzeile { display: flex; align-items: center; gap: 12px; border-top: var(--linie); padding-top: 15px; }
.titelzeile svg { flex: none; }
.status { padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.status .wort { font-size: 43px; line-height: 1.2; font-weight: 700; }
.status.rot { background: var(--status-stop); color: var(--weiss); }
.status.gelb { background: var(--status-warn); color: var(--ink); }
.status.gruen { background: var(--status-ok); color: var(--weiss); }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px 32px; align-items: start; }
.spalten h3 { padding-bottom: 16px; }

/* Stufen-Skala A bis E */
.skala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: var(--linie); }
.skala > div { text-align: center; padding: 12px 0; font-size: 24px; font-weight: 700; border-right: var(--linie); }
.skala > div:last-child { border-right: none; }
.skala .aktiv.rot { background: var(--status-stop); color: var(--weiss); }
.skala .aktiv.gelb { background: var(--status-warn); }
.skala .aktiv.gruen { background: var(--status-ok); color: var(--weiss); }
.ausgeschlossen { border: var(--linie); background: var(--status-stop); color: var(--weiss); text-align: center; padding: 12px; font-size: 24px; font-weight: 700; }

/* Linierte Zeilen (wie „Standorte & Öffnungszeiten“) */
.zeilen { display: flex; flex-direction: column; }
.zeilen.oben { border-top: var(--linie); }
.zeile { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 8px; border-bottom: var(--linie); align-items: start; }
.zeile.mitte { align-items: center; }
.zeile > *, .pfeilzeile > *, .meldung > * { overflow-wrap: anywhere; min-width: 0; }
/* Pfeilzeilen (wie „Unser Therapieangebot“) */
.pfeilzeile { display: grid; grid-template-columns: 170px minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 16px 8px; border-bottom: var(--linie); color: var(--ink); }
.pfeilzeile:first-of-type { border-top: var(--linie); }
.pfeilzeile:hover { text-decoration: none; background: #F6F6F6; }
.pfeilzeile .kopfwert { font-size: 22px; font-weight: 700; }

/* Flächen */
.flaeche { padding: 28px 40px; display: flex; flex-direction: column; gap: 4px; }
.flaeche.rosa { background: var(--rosa); }
.flaeche.gelb { background: var(--gelb); }
.flaeche .titel { font-size: 22px; font-weight: 700; }

/* Meldungen der erweiterten Prüfung */
.meldungen h3 { padding: 24px 0 12px; }
.meldung { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; padding: 16px 8px; border-bottom: var(--linie); }
.meldungen h3 + .meldung { border-top: var(--linie); }
.meldung .id { font-size: 15px; padding-top: 3px; }
.meldung .korrektur { font-size: 16px; margin-top: 4px; }

/* Tabelle (Erfahrungsliste) */
table.liste { width: 100%; border-collapse: collapse; }
table.liste th { text-align: left; font-weight: 700; padding: 16px 8px; border-top: var(--linie); border-bottom: var(--linie); }
table.liste td { padding: 16px 8px; border-bottom: var(--linie); vertical-align: top; }

/* Fußzeile */
.fuss { border-top: var(--linie); padding-top: 20px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; font-size: 15px; }
.fuss > :first-child { max-width: 720px; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; grid-template-rows: 65px 1fr; }
.anmeldung .band { display: grid; place-items: center; }
.anmeldung form { width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 760px) {
  h1 { font-size: 40px; }
  h2 { font-size: 26px; }
  .gross { font-size: 20px; }
  .kopf { height: auto; flex-wrap: wrap; gap: 0; }
  .kopf .logo { padding: 14px 15px; }
  .kopf .logo img { height: 28px; }
  .kopf .block { padding: 0 24px; margin-left: auto; }
  .kopf nav { order: 3; width: 100%; gap: 24px; padding: 12px 15px; border-top: var(--linie); }
  .band .innen { padding-top: 36px; padding-bottom: 32px; }
  .haupt { padding-top: 40px; gap: 40px; }
  .status { padding: 24px; }
  .status .wort { font-size: 32px; }
  .zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .zeile > :first-child { font-size: 15px; }
  .pfeilzeile { grid-template-columns: minmax(0, 1fr) 24px; }
  .pfeilzeile .kopfwert { grid-column: 1 / -1; }
  .flaeche { padding: 24px; }
  .knopf { width: 100%; }
  .eingabe { grid-template-columns: minmax(0, 1fr); }
  .feld.breit { grid-column: auto; }
}