/* MKB Patientengewinnung – gemeinsames Aussehen (MKB-Farben: Petrol + warmes Gelb, Schrift Poppins) */
@font-face { font-family:"Poppins"; src:url(fonts/poppins-latin-400-normal.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Poppins"; src:url(fonts/poppins-latin-500-normal.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Poppins"; src:url(fonts/poppins-latin-600-normal.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Poppins"; src:url(fonts/poppins-latin-700-normal.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root {
  --petrol:#005550; --petrol-dunkel:#003330; --petrol-mittel:#3ca1a1; --petrol-hell:#e6efee; --petrol-zart:#f3f8f7;
  --gelb:#f1b140; --gelb-hell:#fff4dc; --gelb-dunkel:#9a6a12;
  --tinte:#1f2d2c; --leise:#5b6b69; --linie:#e2e8e6; --papier:#ffffff; --flaeche:#f6f8f7;
  --blau:var(--petrol); --blau-hell:var(--petrol-hell);
  --anruf:#0f7a4f; --anruf-dunkel:#0b603e;
  /* Sabines Farben (Status) */
  --rot:#fbe7e4; --rot-rand:#c4473b; --grau:#eceff1; --grau-rand:#7d8794;
  --beige:#f6ead3; --beige-rand:#b0843a; --tuerkis:#d6f1ec; --tuerkis-rand:#13897d;
  --radius-klein:8px; --radius:14px; --schatten:0 1px 2px rgba(0,51,48,.06), 0 4px 16px rgba(0,51,48,.06);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--flaeche); color:var(--tinte); font:15px/1.55 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; }
h1,h2,h3 { font-weight:700; line-height:1.25; margin:0; letter-spacing:-.01em; }
h1 { font-size:1.55rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; font-weight:600; }
p { margin:0; }
a { color:var(--petrol); }
button, select, input, textarea { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--gelb); outline-offset:2px; }
.leise { color:var(--leise); } .klein { font-size:.85rem; }

/* Kopfleiste */
.kopf { position:sticky; top:0; z-index:20; background:var(--petrol); color:#fff; }
.kopf-innen { display:flex; align-items:center; gap:12px; padding:10px 20px; max-width:1500px; margin:0 auto; }
.marke { font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:10px; }
.marke::before { content:""; width:30px; height:30px; border-radius:8px; background:var(--gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003330' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E") center/18px no-repeat; flex:0 0 auto; }
.marke small { display:block; font-weight:400; font-size:.76rem; opacity:.8; }
.kopf .rechts { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.kopf .knopf { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.kopf .knopf:hover { border-color:#fff; }
.kopf .knopf.haupt { background:var(--gelb); border-color:var(--gelb); color:var(--petrol-dunkel); }
.kopf .chip.neutral { background:rgba(255,255,255,.12); border-color:transparent; color:#fff; }

/* Knöpfe */
.knopf { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 15px; border-radius:999px; border:1px solid var(--linie); background:var(--papier); cursor:pointer; text-decoration:none; color:var(--tinte); font-weight:500; white-space:nowrap; transition:background .15s, border-color .15s; }
.knopf:hover { border-color:var(--petrol-mittel); }
.knopf.haupt { background:var(--petrol); border-color:var(--petrol); color:#fff; }
.knopf.haupt:hover { background:var(--petrol-dunkel); }
.knopf.gelb { background:var(--gelb); border-color:var(--gelb); color:var(--petrol-dunkel); font-weight:600; }
.knopf.anruf { background:var(--anruf); border-color:var(--anruf); color:#fff; font-weight:600; }
.knopf.anruf:hover { background:var(--anruf-dunkel); }
.knopf.still { border-color:transparent; background:transparent; color:var(--petrol); }
.knopf[aria-disabled="true"], .knopf:disabled { background:var(--flaeche); color:var(--leise); border-style:dashed; cursor:not-allowed; }
.knopf.gross { min-height:50px; font-size:1.02rem; padding:0 20px; }
.knopf.klein { min-height:32px; padding:0 11px; font-size:.84rem; }

/* Bausteine */
.feld { display:flex; flex-direction:column; gap:4px; }
.feld label, .feld .titel { font-size:.78rem; color:var(--leise); font-weight:500; }
select, input[type=text], input[type=date], input[type=datetime-local], input[type=password], input[type=number], input[type=tel], textarea {
  min-height:40px; padding:7px 10px; border:1px solid var(--linie); border-radius:var(--radius-klein); background:var(--papier); width:100%; }
textarea { min-height:72px; resize:vertical; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px; background:var(--petrol-hell); color:var(--petrol); font-size:.8rem; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.chip.neutral { background:var(--papier); color:var(--leise); border-color:var(--linie); }
.chip.gelb { background:var(--gelb-hell); color:var(--gelb-dunkel); }
.karte-weiss { background:var(--papier); border-radius:var(--radius); box-shadow:var(--schatten); }

/* Status-Farben (Sabines Schema) */
.farbe-rot { --rand:var(--rot-rand); --bg:var(--rot); }
.farbe-grau { --rand:var(--grau-rand); --bg:var(--grau); }
.farbe-beige { --rand:var(--beige-rand); --bg:var(--beige); }
.farbe-tuerkis { --rand:var(--tuerkis-rand); --bg:var(--tuerkis); }
.farbe-weiss { --rand:var(--linie); --bg:var(--papier); }
.statussatz { display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:500; color:var(--tinte); }
.statussatz::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--rand); flex:0 0 auto; }
.legende { display:flex; flex-wrap:wrap; gap:12px; font-size:.8rem; color:var(--leise); }
.legende span::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:var(--rand); }
.legende .l-rot { --rand:var(--rot-rand); } .legende .l-grau { --rand:var(--grau-rand); }
.legende .l-beige { --rand:var(--beige-rand); } .legende .l-tuerkis { --rand:var(--tuerkis-rand); }

/* Filter */
.reiter { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.reiter button { flex:0 0 auto; min-height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--linie); background:var(--papier); cursor:pointer; font-weight:500; font-size:.88rem; }
.reiter button[aria-pressed="true"] { background:var(--petrol); border-color:var(--petrol); color:#fff; }
.reiter b { font-weight:600; opacity:.65; margin-left:5px; }

/* Seitenfenster: Leitfaden-Bild + Gesprächsassistent */
.leitfaden, .gespraech { position:fixed; z-index:40; background:var(--papier); box-shadow:0 0 0 1px var(--linie), 0 18px 50px rgba(0,51,48,.22); display:none; flex-direction:column; }
.leitfaden.offen, .gespraech.offen { display:flex; }
.leitfaden header, .gespraech > header { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--linie); }
.leitfaden header .knopf:first-of-type, .gespraech > header .knopf { margin-left:auto; }
.leitfaden .bild { flex:1; overflow:auto; background:var(--flaeche); touch-action:pan-x pan-y pinch-zoom; }
.leitfaden .bild img { display:block; width:100%; height:auto; }
.leitfaden .bild.gross img { width:220%; max-width:none; }
.leitfaden .unten { padding:10px 16px; border-top:1px solid var(--linie); display:grid; gap:8px; }
@media (min-width:900px) { .leitfaden, .gespraech { top:0; right:0; bottom:0; width:min(560px,44vw); } }
@media (max-width:899px) { .leitfaden, .gespraech { left:0; right:0; bottom:0; height:92vh; border-radius:18px 18px 0 0; } }

/* Gesprächsassistent */
.gespraech .inhalt-g { flex:1; overflow:auto; padding:16px; display:grid; gap:14px; align-content:start; }
.g-schritt { display:grid; gap:8px; }
.g-schritt > .titel { font-size:.76rem; font-weight:600; color:var(--leise); text-transform:none; }
.g-sagen { background:var(--petrol-zart); border-left:4px solid var(--petrol); border-radius:0 var(--radius-klein) var(--radius-klein) 0; padding:10px 12px; font-size:.98rem; }
.g-antwort { color:var(--leise); font-size:.88rem; padding-left:14px; font-style:italic; }
.g-knoepfe { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; }
.g-knoepfe .knopf { white-space:normal; text-align:left; justify-content:flex-start; min-height:52px; border-radius:var(--radius-klein); padding:8px 12px; line-height:1.3; }
.g-knoepfe .knopf[aria-pressed="true"] { border-color:var(--petrol); box-shadow:inset 0 0 0 2px var(--petrol); background:var(--petrol-zart); }
.g-nummer { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.g-nummer b { font-size:1.35rem; letter-spacing:.01em; }
.g-schnell { display:flex; flex-wrap:wrap; gap:6px; }
.g-hinweis { font-size:.8rem; color:var(--leise); }
.g-fuss { padding:12px 16px; border-top:1px solid var(--linie); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* Dialog */
dialog { border:none; border-radius:var(--radius); padding:0; width:min(640px,94vw); box-shadow:0 20px 60px rgba(0,51,48,.3); }
dialog::backdrop { background:rgba(0,51,48,.45); }
dialog .innen { padding:20px; display:grid; gap:12px; }
dialog footer { display:flex; gap:8px; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--linie); background:var(--flaeche); }

.fuss { max-width:1500px; margin:0 auto; padding:24px 20px 40px; font-size:.78rem; color:var(--leise); display:flex; flex-wrap:wrap; gap:14px; }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--petrol-dunkel); color:#fff; padding:11px 18px; border-radius:999px; font-weight:500; z-index:60; opacity:0; transition:opacity .2s; pointer-events:none; max-width:92vw; text-align:center; }
.toast.zeigen { opacity:1; }

/* App-Ergänzungen */
.anmelden { max-width:400px; margin:56px auto; padding:0 16px; }
.anmelden form { background:var(--papier); border-radius:var(--radius); box-shadow:var(--schatten); padding:24px; display:grid; gap:14px; }
.fehlertext { color:var(--rot-rand); font-weight:500; min-height:1.2em; margin:0; }
.seite-schmal { max-width:680px; margin:48px auto; padding:0 16px; display:grid; gap:12px; }
.lauf-anzeige { display:flex; align-items:center; gap:12px; background:var(--gelb-hell); color:var(--gelb-dunkel); border-radius:var(--radius); padding:12px 16px; font-weight:500; }
.lauf-anzeige .balken { flex:1; height:6px; background:#fff; border-radius:99px; overflow:hidden; min-width:80px; }
.lauf-anzeige .balken i { display:block; height:100%; background:var(--gelb); transition:width .3s; }
.pruef { font-size:.76rem; color:var(--leise); }
.pruef.ok { color:var(--anruf); }
.pruef.warn { color:var(--gelb-dunkel); }
[hidden] { display:none !important; }
@media (max-width:640px) {
  .kopf-innen { flex-wrap:wrap; padding:10px 14px; }
  .kopf .rechts { margin-left:0; width:100%; }
  .kopf .rechts .knopf { flex:1 1 120px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }