/* eAs-Farben + HAPUG-Branding für die Termin-Buchung */
:root {
  --eas-bg:        #f6fbf3;
  --eas-hover:    #e0f0d4;
  --eas-rot:       #da0000;
  --eas-dunkel:    #17380a;
  --eas-grau:      #5a6a4a;
  /* Reiter-Farben analog zu den deutschen Rezept-Farben:
     GKV = rosa (Kassenrezept), PV = blau (Privatrezept), IGeL = grün (grünes Rezept) */
  --eas-tab-allgemein: var(--eas-dunkel);  /* HAPUG-Dunkelgrün */
  --eas-tab-gkv:       #be185d;            /* Rosa */
  --eas-tab-pv:        #1e3a8a;            /* Marineblau */
  --eas-tab-igel:      #15803d;            /* Grün */
  --hapug-gruen:   #b3c43e;
  --white:         #ffffff;
  --border:        #cdd5c2;

  --radius:        12px;
  --pad:           16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--eas-bg);
  color: var(--eas-dunkel);
  font-family: "Selawik", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.topbar {
  background: var(--hapug-gruen);
}
.topbar-inner {
  max-width: 1010px; margin: 0 auto;
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar h1 {
  margin: 0; color: var(--white); font-weight: 700; font-size: 24px;
}
.topbar h1 em {
  font-style: italic; font-weight: 400; opacity: .9; margin-left: 8px;
}
.logo { height: 60px; width: auto; }
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-link:hover .logo { opacity: 0.85; }

/* Mobile: schmalere Geräte (Handy hochkant) */
@media (max-width: 600px) {
  .topbar-inner {
    padding: 8px 14px;
    gap: 12px;
  }
  .logo { height: 44px; }
  .topbar h1 {
    font-size: 16px; line-height: 1.2;
    text-align: right;
  }
  .topbar h1 em {
    display: block;
    margin-left: 0;
    font-size: 13px;
  }
  main { padding: 16px; }
  .breadcrumbs:not([hidden]) { padding: 8px 14px; }
}

.breadcrumbs {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--eas-grau);
}
.breadcrumbs:not([hidden]) {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 1010px; margin: 0 auto;
  padding: 10px 32px;
}
.breadcrumbs button {
  background: none; border: none; padding: 4px 8px;
  color: var(--eas-grau); cursor: pointer; font-size: 14px;
  border-radius: 6px;
}
.breadcrumbs button:hover { background: var(--eas-hover); color: var(--eas-dunkel); }
.breadcrumbs .sep { color: var(--border); padding: 4px 0; }

main {
  max-width: 1010px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* Schritt-Titel */
h2.step {
  color: var(--eas-dunkel); font-size: 20px; margin: 0 0 16px;
}

/* „Nächster verfügbarer Termin"-Button — liegt unter der Hinweis-Box (oder direkt unter dem H2, falls keine Box). */
.cache-hint {
  margin: 0 0 14px; text-align: left;
}
.naechster-termin-label {
  color: var(--eas-rot); font-weight: 600; font-style: italic; font-size: 14px;
  margin-right: 8px; vertical-align: middle;
}
/* Übersicht oben in der Multi-Behandler-Matrix: links die „Nächster Termin
   pro Ärzt*in"-Liste, rechts der Mini-Kalender. Auf Mobile untereinander. */
.termine-uebersicht {
  display: flex; gap: 12px; align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.termine-uebersicht > .cache-hint {
  flex: 1 1 320px; min-width: 0; margin: 0;
}
.termine-uebersicht > .kalender-mount {
  flex: 0 0 auto;
}

/* Mini-Monatskalender: Tage mit verfügbaren Slots farbig + klickbar.
   Click scrollt zur Day-Card des entsprechenden Tages. */
.kalender {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  min-width: 252px;
}
.kalender-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; gap: 8px;
}
.kalender-month {
  font-weight: 600; color: var(--eas-dunkel); font-size: 14px;
}
.kalender-nav {
  background: var(--white); border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; padding: 2px 10px; color: var(--eas-dunkel);
  font-family: inherit; font-size: 16px; line-height: 1;
}
.kalender-nav:hover { background: var(--eas-hover); }
.kalender-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.kalender-dow {
  text-align: center; font-weight: 600; color: var(--eas-grau);
  font-size: 11px; padding: 4px 0;
}
.kalender-day {
  text-align: center; padding: 6px 0; border-radius: 4px;
  font-size: 12px; color: var(--eas-grau);
  font-family: "JetBrains Mono", monospace;
}
.kalender-day.other-month { visibility: hidden; }
.kalender-day.has-slots {
  background: var(--eas-hover); color: var(--eas-dunkel);
  font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s;
}
.kalender-day.has-slots:hover {
  background: var(--hapug-gruen); color: var(--white);
}
.kalender-day.today { outline: 2px solid var(--eas-rot); outline-offset: -2px; }
.kalender-day.zukunft-nachladbar {
  color: var(--eas-dunkel); cursor: pointer;
  border: 1px dashed var(--border);
}
.kalender-day.zukunft-nachladbar:hover {
  background: var(--eas-hover); border-color: var(--hapug-gruen);
}

@media (max-width: 768px) {
  /* Inhalte zentrieren: Liste + Kalender + alle Beschriftungen mittig ausgerichtet. */
  .termine-uebersicht { flex-direction: column; align-items: center; }
  .termine-uebersicht > .cache-hint { width: 100%; max-width: 360px; text-align: center; }
  .kalender { min-width: 0; width: 100%; max-width: 320px; }
}

/* Liste mit „Nächster Termin pro Ärzt*in" — Desktop: 2-Spalten-Grid (Name links,
   Button rechts, alle Buttons gleich breit). Mobile: einspaltig, Name jeweils
   über dem Button. */
.naechste-termine-liste {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px 16px;
  align-items: center;
  margin-top: 6px;
}
.naechste-termine-name {
  color: var(--eas-dunkel); font-size: 14px;
}
.naechste-termine-liste .naechster-termin-btn {
  width: 100%;
}
.naechste-termine-none {
  color: var(--eas-grau); font-style: italic; font-size: 13px;
}
@media (max-width: 768px) {
  .naechste-termine-liste {
    grid-template-columns: 1fr;
    gap: 4px;
    justify-items: center;     /* Inhalte (Name, Button) mittig */
    text-align: center;
  }
  .naechste-termine-name { margin-top: 12px; font-weight: 600; }
  .naechste-termine-name:first-child { margin-top: 0; }
  .naechster-termin-label { display: block; text-align: center; margin-right: 0; }
}
.cache-hint:empty { display: none; }
.naechster-termin-btn {
  background: var(--white);
  color: var(--eas-rot);
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 16px;
  border: 1.5px solid var(--eas-rot); border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.naechster-termin-btn:hover {
  background: var(--eas-rot);
  color: var(--white);
}

.hinweis-vor-buchung {
  background: var(--eas-hover);
  border: 1px solid var(--border);
  border-left: 4px solid var(--hapug-gruen);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--eas-dunkel);
  margin: 0 0 16px;
  white-space: pre-wrap;
}

/* Hinweis-Block mit drei Reitern (Allgemein / Privatpatient*innen / IGeL).
   Tab-Farbe wird via --tab-color gesetzt — durch .hinweis-block--allgemein/--pv/--igel
   gesteuert. So bekommt die Content-Box automatisch den linken Akzent
   in der Farbe des gerade aktiven Reiters. */
.hinweis-block {
  --tab-color: var(--eas-dunkel);
  margin: 0 0 16px;
}
.hinweis-block--allgemein { --tab-color: var(--eas-tab-allgemein); }
.hinweis-block--gkv       { --tab-color: var(--eas-tab-gkv); }
.hinweis-block--pv        { --tab-color: var(--eas-tab-pv); }
.hinweis-block--igel      { --tab-color: var(--eas-tab-igel); }

/* Aktenordner-Reiter-Pattern: Tabs sitzen direkt auf der Box-Oberkante,
   aktiver Tab überlappt 1.5px nach unten in die Box (= optisch durchgehend).
   Horizontal: gap: 0 + margin-right: -1.5px → Tabs überlappen sich um eine
   Border-Breite, dadurch durchgängiges Reiter-Band statt einzelner Pills. */
.hinweis-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0;
  position: relative; z-index: 2;
}
.hinweis-tab {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 6px 14px;
  background: var(--white);
  border: 1.5px solid;
  border-radius: 8px 8px 0 0;
  margin-right: -1.5px;      /* überlappt rechten Nachbar-Border */
  margin-bottom: -1.5px;     /* überlappt Box-Oberkante */
  cursor: pointer;
  position: relative;
  transition: background .12s, color .12s;
}
.hinweis-tab.active { z-index: 3; }  /* aktiver Tab liegt vor den Nachbar-Borders */
.hinweis-tab--allgemein { color: var(--eas-tab-allgemein); border-color: var(--eas-tab-allgemein); }
.hinweis-tab--gkv       { color: var(--eas-tab-gkv);       border-color: var(--eas-tab-gkv);       }
.hinweis-tab--pv        { color: var(--eas-tab-pv);        border-color: var(--eas-tab-pv);        }
.hinweis-tab--igel      { color: var(--eas-tab-igel);      border-color: var(--eas-tab-igel);      }
.hinweis-tab--allgemein.active { background: var(--eas-tab-allgemein); color: var(--white); }
.hinweis-tab--gkv.active       { background: var(--eas-tab-gkv);       color: var(--white); }
.hinweis-tab--pv.active        { background: var(--eas-tab-pv);        color: var(--white); }
.hinweis-tab--igel.active      { background: var(--eas-tab-igel);      color: var(--white); }
.hinweis-tab:hover:not(.active):not(.disabled) {
  filter: brightness(1.05);
}
.hinweis-tab.disabled {
  opacity: .35; cursor: not-allowed;
}

.hinweis-content {
  background: var(--white);
  border: 1.5px solid var(--tab-color);
  border-left: 4px solid var(--tab-color);
  border-radius: 0 8px 8px 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--tab-color);     /* gesamter Tab-Inhalt in der Farbe des aktiven Reiters */
  position: relative; z-index: 1;
}
.hinweis-content > p:first-child { margin-top: 0; }
.hinweis-content > p:last-child  { margin-bottom: 0; }
.hinweis-content p  { margin: 0 0 10px; }
.hinweis-content ul { margin: 0 0 10px; padding-left: 22px; }
.hinweis-content li { margin: 2px 0; }
.hinweis-content hr {
  border: none; border-top: 1px solid var(--border); margin: 14px 0;
}
.hinweis-content a {
  color: var(--tab-color); text-decoration: underline;
}
.hinweis-content a:hover { filter: brightness(1.15); }
.hinweis-content strong { font-weight: 700; }
.hinweis-content em     { font-style: italic; }

/* Highlight-Flash beim Scroll-To */
.highlight-flash {
  animation: highlight-pulse 1.5s ease-out;
}
@keyframes highlight-pulse {
  0%   { box-shadow: 0 0 0 3px var(--eas-rot); }
  100% { box-shadow: 0 0 0 0 rgba(218,0,0,0); }
}

/* Kachel-Grid (Ebene 1, Ebene 2) */
.tile-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tile-grid--stack { grid-template-columns: 1fr; }
.tile {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, transform .05s;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit; font-size: 16px; color: var(--eas-dunkel);
}
.tile:hover {
  background: var(--eas-hover);
  border-color: var(--hapug-gruen);
}
.tile:active { transform: translateY(1px); }
.tile .tile-title { font-weight: 600; font-size: 17px; }
.tile .tile-meta { color: var(--eas-grau); font-size: 13px; }

/* Akuttermin-Kachel: Label rot; Sub-Text zweizeilig — erster Satz schwarz, zweiter rot+kursiv. */
.tile--akut .tile-title  { color: var(--eas-rot); }
.tile--akut .akut-line-1 { color: var(--eas-dunkel); }
.tile--akut .akut-line-2 { color: var(--eas-rot); font-style: italic; }

/* IGeL-Kachel: linker Akzentbalken im IGeL-Grün (analog grünes Rezept) */
.tile--igel { border-left: 4px solid var(--eas-tab-igel); }
.tile--igel .tile-title { color: var(--eas-tab-igel); }

/* IGeL-Listenseite */
.igel-intro {
  background: var(--eas-hover);
  border-left: 4px solid var(--eas-tab-igel);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--eas-dunkel);
  border-radius: 6px;
}
.igel-intro a { color: var(--eas-tab-igel); font-weight: 600; }
.igel-section { margin-bottom: 22px; }
.igel-section-title {
  font-weight: 600;
  color: var(--eas-tab-igel);
  font-size: 15px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.igel-item {
  display: block;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--eas-dunkel);
}
.igel-item:hover { background: var(--eas-hover); border-color: var(--eas-tab-igel); }
.igel-item-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.igel-item-text { display: block; flex: 1; min-width: 0; }
.igel-titel { display: block; font-weight: 600; font-size: 15px; }
.igel-sub   { display: block; color: var(--eas-grau); font-size: 13px; margin-top: 2px; }
.igel-preis {
  display: block;
  color: var(--eas-tab-igel);
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.igel-item--disabled { opacity: 0.55; }
.igel-item--disabled:hover { background: var(--white); border-color: var(--border); cursor: not-allowed; }
.igel-section-footer {
  margin-top: 8px;
  padding: 4px 4px;
  font-size: 12px;
  color: var(--eas-grau);
  font-style: italic;
}
.igel-section-footer a { color: var(--eas-tab-igel); font-weight: 600; }
.footnote-star { color: var(--eas-rot); font-weight: 700; }

/* Info-Block (z.B. Orientierungszeitpunkt-Erklärung) — unauffällig, ohne Box.
   Schrift in HAPUG-Dunkelgrün; Überschrift kursiv + an .wichtig-titel angeglichen. */
.info-box {
  background: transparent;
  border: none;
  padding: 4px 4px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--eas-dunkel);
}
.info-box strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--eas-dunkel); font-weight: 700; font-style: italic; }
.info-box p { margin: 0; }
.info-box a { color: var(--eas-dunkel); text-decoration: underline; }
.info-box a:hover { color: var(--hapug-gruen); }

/* Abschnitts-Überschrift „Erläuterungen" über der Orientierungszeitpunkt-Box —
   Dunkelgrün, fett, kursiv. */
.erlaeuterungen-titel {
  color: var(--eas-dunkel);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  margin: 28px 0 0;
}
/* Info-Box sitzt direkt unter der „Erläuterungen"-Überschrift → kleiner Abstand */
.erlaeuterungen-titel + .info-box { margin-top: 6px; }

/* Wichtig-Block (Überschrift + Reiter mit allgemeinen Termin-Erläuterungen) */
.wichtig-block { margin-top: 18px; }
.wichtig-titel {
  color: var(--eas-dunkel);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  margin: 0 0 10px;
}
.wichtig-titel em { font-style: italic; font-weight: 400; }
.wichtig-titel .wichtig-rot { color: var(--eas-rot); }

/* Listen-Items (Termintypen-Liste in Ebene 3) */
.list-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.list-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  cursor: pointer; text-align: left;
  font-family: inherit; font-size: 15px; color: var(--eas-dunkel);
  display: flex; justify-content: space-between; align-items: center;
}
.list-item:hover { background: var(--eas-hover); border-color: var(--hapug-gruen); }
.list-item .dauer { color: var(--eas-grau); font-size: 13px; }

/* Slot-Matrix Container */
.matrix {
  display: flex; flex-direction: column; gap: 10px;
}
.matrix-day {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.matrix-day-head {
  padding: 12px 16px;
  background: var(--eas-hover);
  border-bottom: 1px solid var(--border);
  color: var(--eas-dunkel); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-size: 16px;
}
.matrix-day-head .summary {
  color: var(--eas-grau); font-size: 13px; font-weight: 400;
}
.matrix-day-body { padding: 14px 16px; }

/* Slot-Tabelle (Desktop: Spalten = Ärzt*innen) */
.slot-table {
  width: 100%; border-collapse: collapse;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  table-layout: fixed;  /* alle Ärzt*innen-Spalten gleich breit */
}
.slot-table th, .slot-table td {
  border: 1px solid var(--border); padding: 6px 8px; text-align: center;
  vertical-align: middle;
}
.slot-table th {
  background: var(--eas-bg); color: var(--eas-dunkel);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.2;
  padding: 4px 6px;
  white-space: normal;
}
.slot-table th.time-col { background: var(--white); }
.slot-table td.time-cell {
  background: var(--white); color: var(--eas-grau);
  font-weight: 600; width: 70px;
}
.slot-cell {
  background: var(--white);
  cursor: pointer;
  transition: background .12s;
}
.slot-cell:hover { background: var(--hapug-gruen); color: var(--white); }
.slot-cell.empty { background: var(--eas-bg); cursor: default; }
.slot-cell.empty:hover { background: var(--eas-bg); color: inherit; }
.slot-cell.dead {
  background: repeating-linear-gradient(
    45deg, #ffe5e5, #ffe5e5 6px, #ffd0d0 6px, #ffd0d0 12px);
  color: var(--eas-rot); cursor: default;
}
.slot-cell.dead:hover { background: repeating-linear-gradient(
  45deg, #ffe5e5, #ffe5e5 6px, #ffd0d0 6px, #ffd0d0 12px); color: var(--eas-rot); }

/* Status-Notizen unter der Matrix: leere / dead Behandler*innen erklaeren */
.status-note {
  font-size: 13px; color: var(--eas-grau); margin: 16px 0 0;
  padding: 10px 14px; background: var(--eas-bg);
  border-left: 3px solid var(--border); border-radius: 4px;
}
.status-note.dead {
  color: var(--eas-rot); background: #ffe5e5;
  border-left-color: var(--eas-rot);
}
.slot-cell.no-sprechstunde {
  background: repeating-linear-gradient(
    45deg, var(--eas-bg), var(--eas-bg) 6px,
    var(--eas-hover) 6px, var(--eas-hover) 12px);
  color: var(--eas-grau);
  cursor: default;
}

/* Mobile-Variante: Ärzt*innen werden zu Zeilen */
@media (max-width: 760px) {
  .slot-table { display: block; }
  .slot-table thead { display: none; }
  .slot-table tr { display: block; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .slot-table td { display: inline-block; border: none; margin: 4px; }
  .slot-table td.time-cell { display: block; background: var(--eas-hover); padding: 8px 12px; text-align: left; }
  .matrix-day-body { padding: 8px; }
}

/* Mobile: Pro Ärzt*in eine Karte mit Slots als Buttons (alternativ-Layout) */
/* Zwei Views der Slot-Matrix: Karten (Mobile, schmal) + Tabelle (Desktop, breit).
   Media-Query versteckt jeweils die nicht passende. Breakpoint bei 768px. */
@media (max-width: 768px) {
  .matrix-view--tabelle { display: none; }
}
@media (min-width: 769px) {
  .matrix-view--karten  { display: none; }
}

/* Pro-Datum-Block: Karten je Behandler*in (Name + Slot-Pills) nebeneinander. */
.behandler-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px;
}
.behandler-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 180px;
}
.behandler-name {
  font-weight: 600; color: var(--eas-dunkel);
  margin-bottom: 8px; font-size: 14px;
}
.behandler-slots {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.behandler-slots .slot-btn {
  font-family: "JetBrains Mono", monospace;
  background: var(--eas-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--eas-dunkel);
  font-size: 13px;
  transition: background .12s, color .12s, border-color .12s;
}
.behandler-slots .slot-btn:hover {
  background: var(--hapug-gruen); color: var(--white); border-color: var(--hapug-gruen);
}

.arzt-row {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.arzt-row .arzt-name {
  font-weight: 600; color: var(--eas-dunkel);
  margin-bottom: 8px; font-size: 15px;
}
.arzt-row .arzt-slots {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.arzt-row .slot-btn {
  font-family: "JetBrains Mono", monospace;
  background: var(--eas-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; cursor: pointer;
  color: var(--eas-dunkel); font-size: 13px;
}
.arzt-row .slot-btn:hover { background: var(--hapug-gruen); color: var(--white); }
.arzt-row .no-slots { color: var(--eas-grau); font-style: italic; font-size: 13px; }

.more-weeks {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 12px;
  color: var(--eas-dunkel);
  font-size: 14px;
}
.more-weeks .btn-secondary { font-size: 13px; padding: 8px 14px; }
.more-months-input {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px; font-weight: 600;
  width: 60px; padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--eas-bg);
  color: var(--eas-dunkel);
}
.more-months-input:focus {
  outline: none;
  border-color: var(--hapug-gruen);
  background: var(--white);
}

/* Datums-Block (Mobile + Desktop nutzen das) */
.date-block { margin-bottom: 4px; }
.date-block h3 {
  margin: 0 0 4px; font-size: 16px; color: var(--eas-dunkel);
  font-weight: 600;
}

/* Patient-Formular */
.form-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  max-width: 560px;
}
.form-wrap label {
  display: block; margin-bottom: 14px;
  font-size: 14px; color: var(--eas-grau);
}
.form-wrap input, .form-wrap textarea {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px; color: var(--eas-dunkel);
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--eas-bg);
  margin-top: 6px;
}
.form-wrap input:focus, .form-wrap textarea:focus {
  outline: none; border-color: var(--hapug-gruen); background: var(--white);
}
.form-wrap textarea { min-height: 80px; resize: vertical; }
.form-wrap .row2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form-wrap .checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; }
.form-wrap .checkbox-row input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.form-wrap .checkbox-row a { color: var(--eas-dunkel); text-decoration: underline; }
.form-wrap .checkbox-row a:hover { color: var(--hapug-gruen); }
.form-wrap .datenschutz-hinweis {
  background: var(--eas-hover);
  border-left: 4px solid var(--hapug-gruen);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 18px 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--eas-dunkel);
}
.form-wrap .datenschutz-hinweis a { color: var(--eas-dunkel); font-weight: 600; text-decoration: underline; }
.form-wrap .datenschutz-hinweis a:hover { color: var(--hapug-gruen); }
.form-wrap .summary-line {
  font-size: 14px; color: var(--eas-grau); margin-bottom: 16px;
  padding: 10px 12px; background: var(--eas-bg); border-radius: 8px;
}

.btn-primary {
  display: inline-block;
  background: var(--eas-dunkel); color: var(--white);
  border: none; border-radius: 8px;
  padding: 12px 22px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: #0e2606; }
.btn-primary:disabled { background: var(--eas-grau); cursor: not-allowed; }

.btn-secondary {
  background: var(--white); color: var(--eas-dunkel);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 18px; font-size: 14px; font-family: inherit;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--eas-hover); border-color: var(--hapug-gruen); }

.loading {
  padding: 24px; text-align: center; color: var(--eas-grau);
}
.loading::before {
  content: "";
  display: block;
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  border: 4px solid var(--eas-hover);
  border-top-color: var(--eas-dunkel);
  border-radius: 50%;
  animation: spinner-rotate 0.9s linear infinite;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

.success {
  background: var(--white); border: 2px solid var(--hapug-gruen);
  border-radius: var(--radius); padding: 28px;
  text-align: center;
}
.success h2 { color: var(--eas-dunkel); margin-top: 0; }
.success .marker {
  display: inline-block; background: var(--eas-hover); color: var(--eas-dunkel);
  padding: 6px 12px; border-radius: 6px; font-family: "JetBrains Mono", monospace;
  font-size: 13px; margin-top: 8px;
}

.error {
  background: #ffe5e5; border: 1px solid var(--eas-rot);
  color: var(--eas-rot); padding: 12px 16px; border-radius: 8px;
  margin-bottom: 16px; font-size: 14px;
}
.error a { color: var(--eas-rot); text-decoration: underline; }
.error a:hover { filter: brightness(1.2); }

footer.legal {
  border-top: 1px solid var(--border);
  background: var(--white); margin-top: 40px;
}
footer.legal .legal-inner {
  max-width: 1010px; margin: 0 auto;
  padding: 24px 32px;
  text-align: center; color: var(--eas-grau); font-size: 12px;
}
footer.legal .legal-links {
  margin-bottom: 6px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px;
}
footer.legal .legal-links a { color: var(--eas-dunkel); font-weight: 600; }
footer.legal .legal-links a:hover { color: var(--hapug-gruen); }
footer.legal .legal-sep { color: var(--border); }
footer.legal .legal-text { font-size: 12px; line-height: 1.4; }