/* ============================================================
   Belegungsplan – Gestaltung nach dem Vorbild eines Emailleschilds:
   tiefes Blau, weisse Keyline, DIN-Schrift, gesetzte Plaketten.
   Die Plakette ist das wiederkehrende Element: Objektname, Reiter,
   Buchungen im Kalender – immer dasselbe Objekt.
   ============================================================ */

:root {
  color-scheme: light;

  /* Abgestimmt auf das Haus in Barcelona: der Backsteinturm mit den
     rostroten Balkonbrüstungen, dazu Bäume davor und der katalanische
     Himmel – daher das Mittelmeerblau als verbindender Akzent. */
  --tinte: #1e2f3f;
  --email: #2a72a3;
  --papier: #f3efe6;
  --flaeche: #ffffff;
  --linie: #dcd4c2;
  --kies: #6f6255;
  --signal: #9c3c2b;

  /* Wochenendspalten und Vergangenheit – warme, sehr leise Tönung. */
  --wochenende: #f7f1e5;
  --vorbei: #eee7d8;

  --plakette-1: #2a72a3;
  --plakette-2: #5f7a52;
  --plakette-3: #9c3c2b;
  --plakette-4: #c08a3e;
  --plakette-5: #6a5a95;
  --plakette-6: #6d4a3a;
  --plakette-7: #2e6b63;
  --plakette-8: #3d5a78;

  --schrift-schild: Bahnschrift, "DIN Alternate", "Avenir Next Condensed",
    "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --schrift-text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --rand: 3px;
  --keyline: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --spur: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--schrift-schild);
  font-stretch: semi-condensed;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Plakette: das Signaturelement ------------------------------------- */

.plakette {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fff;
  background: var(--email);
  border: 0;
  border-radius: var(--rand);
  box-shadow: var(--keyline);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: left;
}

/* --- Kopfzeile --------------------------------------------------------- */

.kopf {
  background: var(--tinte);
  color: #fff;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.kopf__marke {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8125rem;
  margin-right: auto;
  opacity: 0.85;
}

.kopf__aktion {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rand);
  color: #fff;
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: background var(--spur), border-color var(--spur);
}

.kopf__aktion:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Aktive Adminrechte – muss nach .kopf__aktion stehen, sonst gewinnt bei
   gleicher Spezifität die frühere Regel. */
.kopf__aktion--aktiv,
.kopf__aktion--aktiv:hover {
  background: var(--signal);
  border-color: var(--signal);
}

/* Das Admin-Feld sitzt direkt neben seinem Knopf. Vorher stand es am
   Seitenfuss – der Fokussprung riss die Seite ans Ende. */
.kopf__admin {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.kopf__admin input {
  font: inherit;
  font-size: 0.875rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rand);
  padding: 0.35rem 0.6rem;
  width: 11rem;
}

.kopf__admin input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.kopf__admin input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

/* Fehlermeldung direkt am Feld statt am Seitenfuss. */
.kopf__fehler {
  background: var(--signal);
  color: #fff;
  border-radius: var(--rand);
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
}

/* --- Anmeldung --------------------------------------------------------- */

.tor {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tinte);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.tor__karte {
  width: min(30rem, 100%);
  background: var(--flaeche);
  border-radius: var(--rand);
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.tor__bild {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  background: var(--papier);
}

.tor__inhalt {
  padding: 1.75rem;
}

.tor__titel {
  font-size: 1.75rem;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tor__text {
  color: var(--kies);
  margin: 0.5rem 0 1.5rem;
  font-size: 0.9375rem;
}

/* --- Bild und Objektname ---------------------------------------------- */

.buehne {
  position: relative;
  margin: 0 auto;
  max-width: 78rem;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 0;
}

/* Bandhöhe – hier drehen, wenn das Foto grösser oder kleiner sein soll.
   Das Band bleibt immer über die ganze Breite; die Zahl bestimmt nur, wie
   hoch es ist und damit, wie gross das Foto darin erscheint.
     8/3   ausgewogen                          (aktuell)
     12/5  flacher, Foto kleiner, Kalender höher
     2/1   höher, Foto grösser, Kalender tiefer */
.buehne {
  --bild-format: 8 / 3;
}

.buehne__rahmen {
  position: relative;
  aspect-ratio: var(--bild-format);
  border-radius: var(--rand);
  overflow: hidden;
  background: var(--tinte);
}

.buehne__grund,
.buehne__bild {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Der Untergrund füllt die Breite, stark weichgezeichnet und abgedunkelt.
   Das leichte Vergrössern verhindert helle Ränder durch die Weichzeichnung. */
.buehne__grund {
  object-fit: cover;
  filter: blur(28px) saturate(0.7) brightness(0.62);
  transform: scale(1.15);
}

/* Das eigentliche Foto: vollständig, nichts abgeschnitten. */
.buehne__bild {
  object-fit: contain;
}

/* Schattenverlauf unter dem Schild, damit der Name auf hellem wie dunklem
   Bild lesbar bleibt. */
.buehne__rahmen::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(35, 48, 61, 0.6), rgba(35, 48, 61, 0));
  pointer-events: none;
}

.buehne__schild {
  position: absolute;
  z-index: 1;
  left: clamp(1.75rem, 5vw, 3.5rem);
  bottom: -1.25rem;
  background: var(--tinte);
  padding: 0.7rem 1.25rem;
  max-width: calc(100% - 6rem);
}

.buehne__name {
  display: block;
  font-size: clamp(1.125rem, 3.2vw, 1.5rem);
  letter-spacing: 0.07em;
}

.buehne__ort {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-top: 0.15rem;
}

/* --- Lage: Wetter, Anfahrt, Adresse ----------------------------------- */
/* Schmales Band unter dem Foto. Steht ausserhalb der Reiter, damit die
   Adresse auch beim Eintragen sichtbar bleibt. */

.lage {
  max-width: 78rem;
  margin: 1.75rem auto 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linie);
  border-radius: var(--rand);
  /* Die 1px-Luecken sind die Trennlinien – der Hintergrund scheint durch. */
  background-clip: content-box;
}

.lage__feld {
  background: var(--flaeche);
  padding: 0.55rem 1rem 0.6rem;
  min-width: 0;
}

.lage__feld:first-child {
  border-radius: var(--rand) 0 0 var(--rand);
}

.lage__feld:last-child {
  border-radius: 0 var(--rand) var(--rand) 0;
}

/* Beschriftung inline – als eigene Zeile kostete sie 19 Pixel Bandhöhe. */
.lage__marke {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.6875rem;
  color: var(--kies);
  margin-right: 0.5rem;
}

/* Wert und Zusatz laufen auf einer Zeile weiter – als eigene Zeilen war das
   Band 92 Pixel hoch und schob den Kalender unter die Falz. */
.lage__wert,
.lage__zusatz {
  display: inline;
  margin: 0;
}

.lage__wert {
  font-family: var(--schrift-schild);
  font-stretch: semi-condensed;
  font-size: 1rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}

.lage__wert--adresse {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

.lage__zusatz {
  font-size: 0.8125rem;
  color: var(--kies);
}

.lage__zusatz:not(:empty)::before {
  content: ' · ';
}

/* Flüge: eigene Klasse statt .lage__wert, weil hier Links statt Zahlen
   stehen und der Bahnschrift-Schnitt dafür nicht passt. */
.lage__fluege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0.2rem 0 0;
  font-size: 0.9375rem;
}

.lage__stau {
  color: var(--signal);
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lage__veraltet {
  font-style: italic;
}

.lage__link {
  color: var(--email);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lage__link:hover {
  color: var(--tinte);
}

/* Unter dem Band braucht es weniger Luft als direkt unter dem Bild. */
.lage:not([hidden]) ~ .blatt .reiter {
  margin-top: 1.25rem;
}

/* --- Reiter ----------------------------------------------------------- */

.blatt {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem;
}

.reiter {
  display: flex;
  /* Umbrechen statt überstehen: mit dem vierten Reiter passt die Leiste auf
     einem Telefon nicht mehr in eine Zeile, und eine quer scrollende Seite
     ist das Letzte, was man sucht, während man in Barcelona steht. */
  flex-wrap: wrap;
  gap: 0.375rem;
  /* Oben Luft für das Schild, das unter dem Bild hängt. */
  margin: 2rem 0 1rem;
}

/* Flache Notebook-Bildschirme: das Foto zurücknehmen, damit der Kalender –
   die Hauptansicht – nicht komplett unter die Falz rutscht. */
@media (min-width: 40rem) and (max-height: 56rem) {
  .buehne {
    --bild-format: 16 / 5;
    padding-top: 1rem;
  }
}

.reiter__knopf {
  background: transparent;
  color: var(--email);
  box-shadow: inset 0 0 0 1px var(--linie);
  cursor: pointer;
  padding: 0.6rem 1.4rem;
  transition: background var(--spur), color var(--spur), box-shadow var(--spur);
}

.reiter__knopf:hover {
  background: rgba(58, 110, 165, 0.08);
}

.reiter__knopf[aria-selected='true'] {
  background: var(--email);
  color: #fff;
  box-shadow: var(--keyline);
}

/* --- Kalender --------------------------------------------------------- */

.monatskopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}

.monatskopf__titel {
  font-size: 1.375rem;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  min-width: 11ch;
  font-variant-numeric: tabular-nums;
}

.pfeil {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  border-radius: var(--rand);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color var(--spur), background var(--spur);
}

.pfeil:hover {
  border-color: var(--email);
  background: #fff;
}

.monatskopf__bilanz {
  margin-left: auto;
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--kies);
  font-variant-numeric: tabular-nums;
}

.gitter {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  overflow: hidden;
}

.gitter__kopf {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--linie);
  background: #faf6ea;
}

.gitter__kopf span {
  padding: 0.5rem 0.625rem;
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
  color: var(--kies);
}

.woche {
  position: relative;
}

.woche + .woche {
  border-top: 1px solid var(--linie);
}

.woche__tage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.tag {
  min-height: 5.25rem;
  padding: 0.375rem 0.5rem;
  background: none;
  border: 0;
  border-left: 1px solid var(--linie);
  text-align: left;
  font: inherit;
  cursor: default;
}

.tag:first-child {
  border-left: 0;
}

.tag__zahl {
  font-family: var(--schrift-schild);
  font-stretch: semi-condensed;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}

/* Sa/So leicht getönt – Anreisen häufen sich am Wochenende, das Raster
   liest sich damit ohne Kopfrechnen. */
.tag--wochenende {
  background: var(--wochenende);
}

.tag--fremd {
  background: #fbf9f2;
}

.tag--fremd .tag__zahl,
.tag--vorbei .tag__zahl {
  color: var(--kies);
  opacity: 0.5;
}

.tag--vorbei {
  background: var(--vorbei);
}

.tag--frei {
  cursor: pointer;
}

.tag--frei:hover {
  background: rgba(58, 110, 165, 0.09);
}

/* Heute: nicht nur die Zahl markieren, sondern die ganze Zelle rahmen –
   sonst geht der Tag zwischen den Plaketten verloren. */
.tag--heute {
  box-shadow: inset 0 0 0 2px var(--signal);
}

.tag--heute .tag__zahl {
  display: inline-block;
  background: var(--signal);
  color: #fff;
  border-radius: 2px;
  padding: 0 0.3rem;
  opacity: 1;
}

/* Spur: die Plaketten liegen als eigene Ebene über der Woche,
   damit ein Aufenthalt als ein durchgehendes Schild lesbar bleibt. */
.woche__spur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  display: grid;
  /* Zwei Halbspalten pro Tag: eine Plakette laeuft von Mittag zu Mittag, damit
     sich am Wechseltag zwei Buchungen beruehren statt ueberdecken. */
  grid-template-columns: repeat(14, 1fr);
  pointer-events: none;
}

.belegung {
  grid-row: 1;
  height: 1.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  box-shadow: var(--keyline);
  color: #fff;
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  gap: 0.5rem;
  transition: filter var(--spur);
}

.belegung__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nächtezahl am rechten Rand der Plakette – verschwindet, wenn es eng wird. */
.belegung__naechte {
  margin-left: auto;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.belegung:hover,
.belegung--gewaehlt {
  filter: brightness(1.15);
}

.belegung--gewaehlt {
  box-shadow: var(--keyline), 0 0 0 2px var(--tinte);
}

.belegung--start {
  border-top-left-radius: var(--rand);
  border-bottom-left-radius: var(--rand);
  margin-left: 0.25rem;
}

.belegung--ende {
  border-top-right-radius: var(--rand);
  border-bottom-right-radius: var(--rand);
  margin-right: 0.25rem;
}

/* Der Aufenthalt geht in der nächsten Zeile weiter. Das Zeichen steht hinter
   der Nächtezahl, deshalb hier kein margin-left:auto (das hat die Zahl). */
.belegung--laeuft-weiter::after {
  content: '›';
  opacity: 0.7;
}

.belegung--laeuft-weiter:not(:has(.belegung__naechte))::after {
  margin-left: auto;
}

/* --- Detailkarte ------------------------------------------------------ */

.detail {
  margin-top: 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--email);
  border-radius: var(--rand);
  padding: 1.125rem 1.25rem;
}

.detail__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail__name {
  font-size: 1.125rem;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.detail__zeit {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  letter-spacing: 0.08em;
  color: var(--kies);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.detail__liste {
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.9375rem;
}

.detail__liste dt {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--kies);
  padding-top: 0.15rem;
}

.detail__liste dd {
  margin: 0;
  white-space: pre-wrap;
}

.detail__aktionen {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* --- Liste kommender Aufenthalte -------------------------------------- */

.abschnitt-titel {
  font-size: 0.8125rem;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--kies);
  margin: 2.5rem 0 0.875rem;
}

.aufenthalte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.aufenthalt {
  display: grid;
  grid-template-columns: 0.5rem 1fr auto;
  align-items: center;
  gap: 0.875rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.625rem 0.875rem 0.625rem 0;
  overflow: hidden;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--spur), transform var(--spur);
}

.aufenthalt:hover {
  border-color: var(--email);
  transform: translateX(2px);
}

.aufenthalt__marke {
  align-self: stretch;
  background: var(--email);
}

.aufenthalt__name {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.9375rem;
}

.aufenthalt__zeit {
  font-variant-numeric: tabular-nums;
  color: var(--kies);
  font-size: 0.875rem;
}

.leer {
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: var(--rand);
  padding: 1.5rem;
  color: var(--kies);
  text-align: center;
  font-size: 0.9375rem;
}

/* --- Formular --------------------------------------------------------- */

.formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 44rem;
}

.formular__titel {
  font-size: 1.25rem;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.formular__hinweis {
  color: var(--kies);
  font-size: 0.9375rem;
  margin: 0.4rem 0 1.5rem;
}

.reihe {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 34rem) {
  .reihe--zwei {
    grid-template-columns: 1fr 1fr;
  }
}

.feld {
  display: grid;
  gap: 0.35rem;
}

.feld > span {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--kies);
}

.feld input,
.feld textarea {
  font: inherit;
  color: var(--tinte);
  background: #fdfcf6;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.6rem 0.7rem;
  width: 100%;
  transition: border-color var(--spur), box-shadow var(--spur);
}

.feld input:focus,
.feld textarea:focus {
  border-color: var(--email);
  box-shadow: 0 0 0 3px rgba(58, 110, 165, 0.14);
  outline: none;
}

.feld textarea {
  resize: vertical;
  min-height: 5rem;
}

.ampel {
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  border-radius: var(--rand);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid currentColor;
  background: #faf6ea;
}

.ampel--frei {
  color: var(--plakette-7);
  background: rgba(46, 107, 99, 0.09);
}

.ampel--belegt {
  color: var(--signal);
  background: rgba(168, 65, 44, 0.09);
}

/* Wechseltag: erlaubt, aber es fehlt noch die Absprache. */
.ampel--wechsel {
  color: var(--plakette-4);
  background: rgba(184, 134, 47, 0.1);
}

/* Pflichtfeld, solange ein Wechseltag im Spiel ist. */
.feld--pflicht > span {
  color: var(--plakette-4);
}

.feld--pflicht textarea {
  border-color: var(--plakette-4);
}

.knopfreihe {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.knopf {
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  transition: filter var(--spur);
}

.knopf:hover:not(:disabled) {
  filter: brightness(1.12);
}

.knopf:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.knopf--stil {
  background: transparent;
  color: var(--email);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.knopf--stil:hover:not(:disabled) {
  background: rgba(58, 110, 165, 0.08);
  filter: none;
}

.knopf--gefahr {
  background: var(--signal);
}

.meldung {
  margin-top: 1rem;
  border-radius: var(--rand);
  padding: 0.7rem 0.9rem;
  font-size: 0.9375rem;
  border-left: 4px solid currentColor;
}

.meldung--fehler {
  color: var(--signal);
  background: rgba(168, 65, 44, 0.09);
}

.meldung--gut {
  color: var(--plakette-7);
  background: rgba(46, 107, 99, 0.1);
}

/* --- Adminleiste ------------------------------------------------------ */

.adminleiste {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--kies);
  font-size: 0.875rem;
}

.textknopf {
  background: none;
  border: 0;
  padding: 0;
  color: var(--email);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: 0.875rem;
}

/* --- Hinweisstreifen -------------------------------------------------- */

.streifen {
  background: var(--signal);
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-family: var(--schrift-schild);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

/* --- Auftritt --------------------------------------------------------- */

@keyframes einsetzen {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.buehne__schild {
  animation: einsetzen 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: 120ms;
}

.gitter {
  animation: einsetzen 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* --- Klein ------------------------------------------------------------ */

@media (max-width: 40rem) {
  .tag {
    min-height: 4rem;
    padding: 0.25rem 0.3rem;
  }

  .belegung {
    height: 1.625rem;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    padding: 0 0.3rem;
    gap: 0.25rem;
  }

  /* Auf dem Handy zählt der Name, die Nächte stehen in der Liste darunter. */
  .belegung__naechte {
    display: none;
  }

  .woche__spur {
    bottom: 0.25rem;
  }

  /* Auf dem Handy hat das Band das Format des Fotos – dort füllt es die Breite
     ganz aus, der unscharfe Untergrund ist gar nicht zu sehen. */
  .buehne {
    --bild-format: 4 / 3;
  }

  .buehne__schild {
    left: 1.5rem;
    max-width: calc(100% - 3rem);
  }

  .gitter__kopf span {
    padding: 0.4rem 0.3rem;
    /* Nicht kleiner als 11px – darunter wird die Spaltenbeschriftung raterei. */
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }

  /* Drei Felder nebeneinander werden auf dem Handy zu Schnipseln. */
  .lage {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .lage__feld:first-child {
    border-radius: var(--rand) var(--rand) 0 0;
  }

  .lage__feld:last-child {
    border-radius: 0 0 var(--rand) var(--rand);
  }
}

/* Dazwischen: zwei Felder pro Zeile, 2x2 statt einer Reihe zu viert. */
@media (min-width: 40rem) and (max-width: 58rem) {
  .lage {
    grid-template-columns: 1fr 1fr;
  }

  .lage__feld:first-child {
    border-radius: var(--rand) 0 0 0;
  }

  .lage__feld:nth-child(2) {
    border-radius: 0 var(--rand) 0 0;
  }

  .lage__feld:nth-child(3) {
    border-radius: 0 0 0 var(--rand);
  }

  .lage__feld:last-child {
    border-radius: 0 0 var(--rand) 0;
  }
}

/* --- Querformat am Handy / flache Fenster ------------------------------- */
/* Bei 375 Pixel Hoehe nahm das Bild 61% des Bildschirms ein und der Kalender
   lag komplett darunter. Hier zaehlt das Raster, nicht das Foto. */
@media (max-height: 30rem) {
  .buehne {
    --bild-format: 16 / 3;
    padding-top: 0.5rem;
  }

  .buehne__schild {
    padding: 0.45rem 0.9rem;
    bottom: -1rem;
  }

  .buehne__ort {
    display: none;
  }

  .reiter {
    margin: 1.25rem 0 0.75rem;
  }

  .tag {
    min-height: 3.5rem;
  }

  .abschnitt-titel {
    margin-top: 1.5rem;
  }
}

/* --- Finger statt Maus -------------------------------------------------- */
/* Bedienelemente auf das Mindestmass 44x44 bringen, aber nur dort, wo mit dem
   Finger gezielt wird. Am Desktop bleiben die knapperen Proportionen. */
@media (pointer: coarse) {
  .pfeil {
    width: 2.75rem;
    height: 2.75rem;
  }

  .reiter__knopf,
  .kopf__aktion,
  .knopf {
    min-height: 2.75rem;
  }

  .reiter {
    gap: 0.5rem;
  }

  .kopf {
    gap: 0.5rem;
  }

  .textknopf {
    min-height: 2.75rem;
    padding: 0 0.5rem;
  }

  .kopf__admin input {
    min-height: 2.75rem;
  }

  /* Die Plakette kann in einer Tageszelle keine 44 Pixel hoch werden. Dafuer
     ist die Liste "Naechste Aufenthalte" der bequeme Weg – deren Zeilen sind
     gross genug. Hier nur so viel Hoehe, dass man sicher trifft. */
  .belegung {
    height: 1.75rem;
  }

  .aufenthalt {
    min-height: 2.75rem;
  }

  /* Der Link bleibt im Textfluss, wird aber auf Fingermass gebracht. Das
     negative Aussenmass haelt das Band dabei gleich hoch. */
  .lage__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.25rem;
    margin-block: -0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .aufenthalt:hover {
    transform: none;
  }
}

/* --- Orte: Lieblingsorte mit Foto und Notiz -------------------------------- */

.orte {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ort {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Feste Höhe für die Bühne: sonst springt das Raster, während die Fotos
   nacheinander eintreffen. */
.ort__buehne {
  aspect-ratio: 3 / 2;
  background: var(--vorbei);
  display: grid;
  place-items: center;
}

.ort__buehne--leer span {
  font-family: var(--schrift-schild);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--kies);
}

.ort__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ort__koerper {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.ort__titel {
  font-family: var(--schrift-schild);
  font-size: 1.05rem;
  margin: 0;
  color: var(--tinte);
}

/* Die Notiz behält ihre Zeilenumbrüche – sie ist so getippt worden. */
.ort__notiz {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--kies);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ort__link {
  color: var(--email);
  font-size: 0.85rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ort__link:hover,
.ort__link:focus-visible {
  text-decoration: underline;
}

.ort__streifen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ort__streifen > li {
  position: relative;
}

.ort__miniatur {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  display: block;
  transition: border-color var(--spur);
}

.ort__miniatur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ort__miniatur--aktiv {
  border-color: var(--email);
  box-shadow: 0 0 0 2px var(--email);
}

.ort__miniaturweg {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  line-height: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
}

.ort__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

.ort__aktionen .knopf {
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
}

/* Vorschau der noch nicht hochgeladenen Fotos im Formular. */
.vorschau {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.vorschau img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: 2px;
  display: block;
}

/* --- Kategorien: eine Farbe, drei Verwendungen ----------------------------- */

/* Die Farbe steht genau einmal je Kategorie. Plakette, Kartennadel und
   Legendenpunkt holen sie sich aus derselben Variablen – sonst laufen die drei
   Darstellungen desselben Dings irgendwann auseinander. */
.kat--restaurant, .kat-nadel--restaurant, .kat-punkt--restaurant { --kat-farbe: #9c3c2b; }
.kat--tapas,      .kat-nadel--tapas,      .kat-punkt--tapas      { --kat-farbe: #c08a3e; }
.kat--bar,        .kat-nadel--bar,        .kat-punkt--bar        { --kat-farbe: #6a5a95; }
.kat--club,       .kat-nadel--club,       .kat-punkt--club       { --kat-farbe: #8e3b6b; }
.kat--cafe,       .kat-nadel--cafe,       .kat-punkt--cafe       { --kat-farbe: #6d4a3a; }
.kat--shopping,   .kat-nadel--shopping,   .kat-punkt--shopping   { --kat-farbe: #2e6b63; }
.kat--erlebnis,   .kat-nadel--erlebnis,   .kat-punkt--erlebnis   { --kat-farbe: #5f7a52; }
.kat--strand,     .kat-nadel--strand,     .kat-punkt--strand     { --kat-farbe: #2a72a3; }
.kat--aussicht,   .kat-nadel--aussicht,   .kat-punkt--aussicht   { --kat-farbe: #3d5a78; }
.kat--sonstiges,  .kat-nadel--sonstiges,  .kat-punkt--sonstiges  { --kat-farbe: #6f6255; }

.kat {
  display: inline-block;
  background: var(--kat-farbe, #6f6255);
  color: #fff;
  font-family: var(--schrift-schild);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: var(--keyline);
}

.ort__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ort__marke {
  flex: none;
}

/* --- Karte ---------------------------------------------------------------- */

.kartenleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.2rem 0 0.7rem;
}

.kartenleiste__hinweis {
  color: var(--kies);
  font-size: 0.85rem;
  flex: 1 1 14rem;
}

.karte {
  height: min(62vh, 560px);
  min-height: 300px;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  /* Leaflet legt eigene Ebenen übereinander; ohne isolation klettert die
     Sprechblase sonst über die Kopfzeile der Seite. */
  isolation: isolate;
  background: var(--vorbei);
}

/* Die Nadel ist reine Form – kein Text, kein Bild, nichts Fremdes. */
.nadel::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--kat-farbe, #6f6255);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Die eigene Position: blauer Punkt, wie man ihn kennt. */
.nadel--ich::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: none;
  background: #1a73e8;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.genauigkeit {
  stroke: #1a73e8;
  stroke-opacity: 0.6;
  stroke-width: 1;
  fill: #1a73e8;
  fill-opacity: 0.12;
}

.legende {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.legende__eintrag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--kies);
}

.legende__punkt {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--kat-farbe, #6f6255);
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px var(--linie);
  flex: none;
}

/* Sprechblase an der Nadel */
.blase {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.blase__titel {
  font-family: var(--schrift-schild);
  font-size: 1rem;
  color: var(--tinte);
}

.blase__bild {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.blase__notiz {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--kies);
}

.blase__link {
  color: var(--email);
  font-size: 0.82rem;
}

/* Leaflet bringt eigene Schriften mit – hier die der Seite durchsetzen. */
.leaflet-container {
  font-family: var(--schrift-text);
  background: var(--vorbei);
}

/* Schmale Geräte: weniger Polsterung an den Reitern, damit sie in zwei
   aufgeräumte Zeilen fallen statt in drei. */
@media (max-width: 30rem) {
  .reiter__knopf {
    padding: 0.55rem 0.9rem;
  }
}

/* --- Nachrichten an einer Buchung ------------------------------------------ */

.nachrichten {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
}

.nachrichten__titel {
  font-family: var(--schrift-schild);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--kies);
  margin: 0 0 0.6rem;
}

.nachrichten__liste {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nachricht {
  background: var(--papier);
  border-radius: var(--rand);
  padding: 0.55rem 0.7rem;
  /* Der farbige Streifen hebt eine Nachricht von der Bemerkung darüber ab. */
  border-left: 3px solid var(--email);
}

.nachricht__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.nachricht__name {
  font-family: var(--schrift-schild);
  font-size: 0.9rem;
  color: var(--tinte);
}

.nachricht__zeit {
  font-size: 0.78rem;
  color: var(--kies);
  margin-right: auto;
}

.nachricht__weg {
  border: none;
  background: none;
  color: var(--signal);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
  flex: none;
}

.nachricht__text {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tinte);
}

.nachrichten__formular {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nachrichten__hinweis {
  font-size: 0.8rem;
  color: var(--kies);
  align-self: center;
}

.formular__hinweis--klein {
  font-size: 0.82rem;
  margin-top: -0.4rem;
}

.leer--klein {
  font-size: 0.85rem;
  padding: 0.4rem 0;
}