:root {
  --dunkel: #19687c;
  --dunkel-tief: #125365;
  --dunkel-hell: #e8f0f3;
  --gruen: #d5d914;
  --gruen-tief: #585c00;
  --gruen-hell: #f7f8dd;
  --papier: #f8f8f6;
  --flaeche: #ffffff;
  --tinte: #123842;
  --tinte2: #5c757e;
  --linie: #dfe4e5;
  --linie2: #eef1f1;
  --rost: #a03a2e;
  --rost-hell: #faece9;
  --schrift: "Frutiger 45 Light Com", "Frutiger LT Com", Frutiger, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --akzent: "Ariana Pro", "Ariana Pro Bold", "Frutiger 65 Bold Com", Frutiger, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--akzent); font-weight: 700; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }
p { margin: 0; }
a { color: var(--dunkel); }

:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; }
.kopf :focus-visible { outline-color: var(--gruen); }

.kopf { background: var(--dunkel); color: #fff; padding: 22px 24px; }
.kopf-innen { max-width: 880px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kopf .logo { height: 34px; color: #fff; }
.kopf .logo svg { height: 100%; width: auto; display: block; }
.kopf-titel { font-family: var(--akzent); font-weight: 700; color: var(--gruen); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.band { height: 6px; background: var(--gruen); }

main { max-width: 880px; margin: 0 auto; padding: 30px 24px 60px; }

.fuss { max-width: 880px; margin: 0 auto; padding: 0 24px 40px; color: var(--tinte2); font-size: 13px; }
.fuss a { color: var(--dunkel); }

.karte { background: var(--flaeche); border: 1px solid var(--linie); padding: 24px; }
.karte + .karte { margin-top: 16px; }

.anmeldung { max-width: 460px; margin: 20px auto; text-align: center; }
.anmeldung p { color: var(--tinte2); font-size: 14px; margin: 8px 0 20px; }
.anmeldung input {
  font-family: var(--akzent); font-weight: 700; font-size: 19px; letter-spacing: .12em;
  text-align: center; text-transform: uppercase; width: 100%; padding: 12px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--dunkel);
}
.anmeldung .knopf { width: 100%; margin-top: 12px; }

.knopf {
  font: inherit; font-size: 14px; padding: 9px 18px; border: 1px solid var(--dunkel);
  background: var(--dunkel); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; text-align: center;
}
.knopf:hover { background: var(--dunkel-tief); border-color: var(--dunkel-tief); }
.knopf.leise { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); font-weight: 400; }
.knopf.leise:hover { border-color: var(--dunkel); color: var(--dunkel); background: var(--flaeche); }
.knopf.klein { font-size: 13px; padding: 6px 12px; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

.meldung { padding: 11px 14px; font-size: 14px; margin-bottom: 16px; }
.meldung.fehler { background: var(--rost-hell); border-left: 3px solid var(--rost); color: var(--rost); }
.meldung.gut { background: var(--gruen-hell); border-left: 3px solid var(--gruen); color: var(--gruen-tief); }
.meldung:empty { display: none; }

.objektkopf { border-left: 4px solid var(--gruen); padding-left: 16px; margin-bottom: 6px; }
.objektkopf p { color: var(--tinte2); font-size: 14px; }
.zugangszeile { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--linie2); margin-top: 20px; padding-top: 14px; font-size: 13px; color: var(--tinte2); }

.gruppe { margin-top: 26px; }
.gruppe h3 { color: var(--dunkel); border-bottom: 2px solid var(--gruen); padding-bottom: 5px; margin-bottom: 4px; }

.zeile { display: flex; align-items: center; gap: 16px; padding: 13px 2px; border-bottom: 1px solid var(--linie2); flex-wrap: wrap; }
.zeile-text { flex: 1; min-width: 220px; }
.zeile strong { font-family: var(--akzent); font-weight: 700; display: block; }
.zeile span { display: block; font-size: 12.5px; color: var(--tinte2); }

.leer { border: 1px solid var(--linie); border-top: 3px solid var(--gruen); background: var(--flaeche); padding: 26px; text-align: center; color: var(--tinte2); }

/* Verwaltung */
.reiter { display: flex; gap: 20px; border-bottom: 1px solid var(--linie); margin-bottom: 20px; flex-wrap: wrap; }
.reiter button { border: 0; background: none; font: inherit; font-size: 14px; color: var(--tinte2);
  padding: 9px 0; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.reiter button.an { color: var(--dunkel); font-family: var(--akzent); font-weight: 700; border-bottom-color: var(--gruen); }

label.feld { display: block; margin-bottom: 12px; }
label.feld > span { display: block; font-size: 12px; color: var(--tinte2); margin-bottom: 4px; }
input, select, textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--tinte); width: 100%; }
textarea { resize: vertical; font-size: 13px; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-family: var(--akzent); font-weight: 700; font-size: 12px; color: var(--dunkel);
  border-bottom: 2px solid var(--gruen); padding: 9px 10px; }
td { padding: 9px 10px; border-bottom: 1px solid var(--linie2); vertical-align: top; }

.marke { display: inline-block; font-size: 11.5px; padding: 1px 8px; border: 1px solid; }
.marke.offen { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen-tief); }
.marke.zu { border-color: #e5c1bb; background: var(--rost-hell); color: var(--rost); }
.marke.still { border-color: var(--linie); background: var(--linie2); color: var(--tinte2); }

.codebox { font-family: var(--akzent); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  background: var(--dunkel-hell); border: 1px solid #b8d0d7; color: var(--dunkel); padding: 10px 12px; word-break: break-all; }

@media (max-width: 620px) {
  .zweispaltig { grid-template-columns: 1fr; }
  .kopf .logo { height: 26px; }
  main { padding: 22px 16px 50px; }
}

/* Besichtigungstermine */
.slotreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.slot {
  font: inherit; text-align: left; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--linie); border-left: 3px solid var(--gruen); background: var(--flaeche);
  min-width: 132px;
}
.slot:hover { border-color: var(--dunkel); border-left-color: var(--gruen); }
.slot strong { display: block; font-family: var(--akzent); font-weight: 700; font-size: 15px; color: var(--dunkel); }
.slot span { display: block; font-size: 11.5px; color: var(--tinte2); margin-top: 2px; }
.slotplan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.slotplan .slot { min-width: 118px; cursor: default; }
.slotplan .slot.belegt { border-left-color: var(--dunkel); background: var(--dunkel-hell); }
.slotplan .slot.abgesagt { opacity: .55; border-left-color: var(--rost); }

/* Vertraulichkeitserklärung */
.erklaerungstext { border: 1px solid var(--linie); border-left: 3px solid var(--gruen);
  background: var(--papier); padding: 18px 20px; max-height: 340px; overflow-y: auto; }
.erklaerungstext h3 { color: var(--dunkel); font-size: 13px; margin-top: 14px; }
.erklaerungstext h3:first-child { margin-top: 0; }
.erklaerungstext p { font-size: 13.5px; line-height: 1.65; margin-top: 4px; }
.unterschriftfeld { border: 1px solid var(--linie); background: var(--flaeche); padding: 10px; }
.unterschriftfeld canvas { width: 100%; height: 150px; display: block; border-bottom: 1px solid var(--linie);
  touch-action: none; cursor: crosshair; background: #fff; }
.unterschriftfeld .knopf { margin-top: 10px; }