:root{
  /* ====== Farben der Praxis. Nur hier ändern. ======
     Abgeleitet vom Logo-Blau #4383BB. Die Hauptfarbe ist etwas dunkler,
     damit weiße Schrift darauf gut lesbar bleibt. */
  --marke:#305E87;
  --marke-dunkel:#284F70;
  --marke-hell:#E8F0F7;
  --marke-text:#274C6C;
  --logo-blau:#4383BB;      /* das reine Logo-Blau, für feine Akzente */
  --logo-hoehe:58px;

  /* Ab hier normalerweise nichts ändern */
  --park:var(--marke); --park-2:var(--marke-dunkel); --blatt:var(--marke-hell); --ink:#1C2529;
  --grau:#5D686D; --linie:#D5DBE0; --grund:#F5F7F9; --weiss:#fff;
  --warn:#854F0B; --warn-bg:#FAEEDA; --info-bg:#E6F1FB; --info:#185FA5;
  --fehler:#A32D2D; --fehler-bg:#FCEBEB;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--ink);line-height:1.55;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--park-2)}
.kopf{background:var(--park);color:#fff;padding:1.1rem 1rem}
.kopf .innen{max-width:640px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap}
.kopf .titel{display:flex;align-items:center;gap:.85rem;min-width:0}
.kopf .logo{height:var(--logo-hoehe);width:auto;flex:0 0 auto;display:block}
.kopf .logo-zeichen{display:none}
@media (max-width:560px){
  .kopf .logo-voll{display:none}
  .kopf .logo-zeichen{display:block}
}
.kopf .rechts{display:flex;gap:1.1rem;align-items:center;flex:0 0 auto}
.kopf .rechts a{white-space:nowrap}
@media (max-width:560px){
  .kopf .innen{flex-direction:column;align-items:flex-start;gap:.55rem}
  .kopf .rechts{width:100%;gap:1.4rem}
}
@media (max-width:420px){:root{--logo-hoehe:46px}.kopf h1{font-size:1.1rem}}
/* Helle Kopfzeile: weiße Leiste, Logo in Originalfarben */
.kopf.hell{background:var(--weiss);color:var(--ink);border-bottom:3px solid var(--marke)}
.kopf.hell h1{color:var(--ink)}
.kopf.hell p{color:var(--grau);opacity:1}
.kopf.hell a{color:var(--marke-text)}
.kopf .innen.weit{max-width:1180px}
.kopf h1{margin:0;font-size:1.35rem;font-weight:550;letter-spacing:-.01em}
.kopf p{margin:.15rem 0 0;font-size:.9rem;opacity:.85}
.kopf a{color:#fff}
main{max-width:640px;margin:0 auto;padding:1.25rem 1rem 3rem}
main.weit{max-width:1180px}
footer{max-width:1180px;margin:0 auto;padding:0 1rem 2rem;font-size:.8rem;color:var(--grau)}
fieldset{border:0;padding:0;margin:0 0 1.4rem}
legend{font-weight:550;color:var(--park);margin-bottom:.35rem}
label{display:block;margin:.55rem 0 .2rem;font-size:.92rem}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=search],select,textarea{
  width:100%;padding:.62rem .7rem;border:1px solid var(--linie);border-radius:8px;font:inherit;background:var(--weiss);color:inherit}
textarea{min-height:4.5rem;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,.chip input:focus-visible+span{
  outline:3px solid #5DCAA5;outline-offset:1px}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
@media (max-width:540px){.reihe{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.chip{margin:0;position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;cursor:pointer}
.chip span{display:inline-block;padding:.5rem 1rem;border:1px solid var(--linie);border-radius:999px;background:var(--weiss);font-size:.92rem}
.chip input:checked+span{background:var(--park);border-color:var(--park);color:#fff}
.hinweis{font-size:.84rem;color:var(--grau);margin:.3rem 0 0}
.kasten{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;background:var(--weiss);
  border:1px solid var(--linie);border-radius:8px;padding:.7rem .8rem;margin:.6rem 0}
.kasten input{margin:.25rem 0 0;flex:0 0 auto}
button,.knopf{background:var(--park);color:#fff;border:0;border-radius:8px;padding:.7rem 1.3rem;
  font:inherit;font-weight:550;cursor:pointer;text-decoration:none;display:inline-block}
button:hover{background:var(--park-2)}
button.leise{background:var(--weiss);color:var(--ink);border:1px solid var(--linie);padding:.42rem .8rem;font-weight:400;font-size:.88rem}
button.leise:hover{background:#EDF2EF}
button.gefahr{background:var(--weiss);color:var(--fehler);border:1px solid #E7C9C9;padding:.42rem .8rem;font-weight:400;font-size:.88rem}
.meldung{padding:.8rem .9rem;border-radius:8px;margin-bottom:1.1rem}
.meldung.ok{background:var(--blatt)}
.meldung.fehler{background:var(--fehler-bg);color:#6A1F1F}
.meldung.info{background:var(--info-bg);color:#0C447C}
.meldung ul{margin:.4rem 0 0;padding-left:1.2rem}
.hp{position:absolute;left:-9999px}
/* Admin */
.werte{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.wert{background:var(--weiss);border:1px solid var(--linie);border-radius:10px;padding:.6rem .8rem}
.wert b{display:block;font-size:1.4rem;font-weight:550;line-height:1.2}
.wert span{font-size:.82rem;color:var(--grau)}
.filter{background:var(--weiss);border:1px solid var(--linie);border-radius:10px;padding:.8rem;margin-bottom:1rem}
.filter .zeile{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter h2{margin:0 0 .3rem;font-size:.95rem;font-weight:550}
.filter .suche{display:flex;gap:.5rem;margin-top:.6rem}
.filter .suche input{flex:1;min-width:0}
.filter .statusform{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;flex:1 1 20rem}
.filter .statusform select{flex:1 1 12rem;min-width:0}
@media (max-width:540px){
  .filter .statusform{flex-direction:column;align-items:stretch;width:100%}
  .filter .statusform select{flex:0 0 auto;width:100%}
}
.karten{display:grid;gap:.7rem}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:10px;padding:.8rem}
.karte.dringend{border-left:4px solid var(--warn)}
.kz{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.kz strong{font-size:1rem;font-weight:550}
.kz .wartet{font-size:.86rem;color:var(--grau);white-space:nowrap}
.meta{margin:.25rem 0 0;font-size:.88rem;color:var(--grau)}
.meta.achtung{color:var(--warn);font-weight:550}
.marke{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.78rem;background:#EDF2EF}
.marke.wartend{background:var(--warn-bg);color:var(--warn)}
.marke.kontaktiert{background:var(--info-bg);color:var(--info)}
.marke.eingeplant{background:var(--marke-hell);color:var(--marke-text)}
.marke.abgemeldet{background:#EEE;color:var(--grau)}
.marke.eilig{background:var(--warn-bg);color:var(--warn)}
.aktionen{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.6rem}
.aktionen form{display:contents}
.tel{font-size:.92rem;text-decoration:none;border:1px solid var(--linie);border-radius:8px;padding:.42rem .8rem;background:var(--weiss)}
.notiz{margin-top:.5rem}
.notiz form{display:flex;gap:.4rem}
.notiz input{flex:1;font-size:.88rem;padding:.42rem .55rem}
details.mehr{margin-top:.5rem;font-size:.88rem}
details.mehr summary{cursor:pointer;color:var(--park-2)}
.klein{font-size:.82rem;color:var(--grau)}

button[disabled]{background:#AFBAC4;cursor:not-allowed}
button[disabled]:hover{background:#AFBAC4}