/* ==========================================================================
   FeWo Manager
   Farben stammen aus dem Foto der Baie des Anges in der Dämmerung:
   Dunkelblau des Himmels, Meerblau, Pastellrosa, heller Kalkstein.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('schrift/fraunces-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('schrift/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  src: url('schrift/karla-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('schrift/karla-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Dämmerung */
  --tiefe:       #10243c;
  --tiefe-2:     #24405e;
  /* Beide Töne wurden angehoben: #6b7f95 kam auf 4,1:1, #93a3b5 auf 2,6:1 –
     nötig sind 4,5:1. Sie tragen jeden Hilfstext und jede Spaltenüberschrift,
     also genau die Sätze, mit denen sich diese Anwendung erklärt. */
  --gedaempft:   #5c6f85;
  --leise:       #64758a;

  /* Meer */
  --see:         #2e7fb0;
  --see-dunkel:  #23648b;
  --see-hell:    #7fc0de;
  --see-blass:   #e3eef6;

  /* Himmel und Stein */
  --himmel:      #c9d4ec;
  --daemmer:     #e9c3d4;
  --stein:       #d9d0c5;
  --stein-hell:  #f1ece5;

  /* Flächen */
  --seite:       #eef2f6;
  --papier:      #ffffff;
  --rand:        #dde4ec;

  /* Zustände im Kalender */
  --belegt:      #c0554a;
  --belegt-hell: #f3ddd9;
  --angefragt:   #d19434;
  --angefragt-hell: #faedd6;
  --frei:        #4f8f6a;
  --frei-hell:   #dceee4;
  --gesperrt:    #a8afb8;
  --gesperrt-hell: #e6e9ec;

  --schrift-anzeige: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift-text:    'Karla', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius:      4px;
  --schatten:    0 1px 2px rgba(16, 36, 60, .06), 0 8px 24px -12px rgba(16, 36, 60, .18);
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

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

/* Browser geben Formularen von sich aus einen Abstand nach unten. In
   Tabellenzellen und Kartenköpfen sah das aus wie eine verrutschte Zeile. */
form { margin: 0; }

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

body {
  margin: 0;
  background: var(--seite);
  color: var(--tiefe);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em 0;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -.005em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; font-family: var(--schrift-text); font-weight: 700; }

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }

a { color: var(--see-dunkel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tiefe); }

:focus-visible {
  outline: 2px solid var(--see);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Überschrift-Zeile über einem Abschnitt: kurz, gesperrt, leise. */
.eyebrow {
  font-size: .69rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gedaempft);
  font-weight: 600;
  margin: 0 0 .55em 0;
}

.leise { color: var(--gedaempft); }
.klein { font-size: .85rem; }
.mittig { text-align: center; }
.rechts { text-align: right; }

/* --------------------------------------------------------------------------
   Seitenkopf
   -------------------------------------------------------------------------- */

.kopf {
  background: var(--tiefe);
  color: #fff;
  border-bottom: 3px solid var(--see-dunkel);
}

.kopf__innen {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 60px;
  flex-wrap: wrap;
}

.marke {
  font-family: var(--schrift-anzeige);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.marke:hover { color: var(--see-hell); }
.marke span { color: var(--see-hell); }

.navi {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.navi a {
  color: #c3d3e2;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
}
.navi a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.navi a[aria-current="page"] { background: rgba(127, 192, 222, .18); color: #fff; }

.kopf__rechts {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  color: #a9bccd;
}
.kopf__rechts a { color: #a9bccd; }

/* Abmelden ist ein Formular (sonst genügte ein fremdes Bild-Tag), soll aber
   aussehen wie die Links daneben. */
.alslink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #a9bccd;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alslink:hover { color: #fff; }

/* Dieselbe Sache im Seiteninhalt: dort steht sie auf hellem Grund und muss
   die Farbe der übrigen Links haben. */
.alslink--inhalt { color: var(--see); }
.alslink--inhalt:hover { color: var(--see-dunkel); }
.kopf__rechts a:hover { color: #fff; }

/* Objektwahl – erscheint nur, wenn es mehr als eine Wohnung gibt. */
.objektwahl select {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
  font-size: .9rem;
}
.objektwahl select option { color: var(--tiefe); }

/* --------------------------------------------------------------------------
   Inhalt
   -------------------------------------------------------------------------- */

.inhalt {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 64px 20px;
}

.seitenkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.seitenkopf h1 { margin-bottom: 0; }

.karte {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--schatten);
}
.karte--eng { padding: 16px 18px; }

/* Kennzahl in einer Kachel: deutlich, aber leiser als der eigene Endbetrag
   in der Abrechnung – sonst liest man die Kosten der Wohnung als eigene. */
.summe {
  font-size: 1.35rem;
  font-family: var(--schrift-anzeige);
  font-variation-settings: 'opsz' 96;
  color: var(--tiefe-2);
  margin: 0 0 .2em 0;
}
.karte > :last-child { margin-bottom: 0; }

.karte__titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.karte__titel h2 { margin-bottom: 0; }

.raster {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* --------------------------------------------------------------------------
   Hinweise
   -------------------------------------------------------------------------- */

.hinweis {
  border: 1px solid var(--rand);
  border-left: 3px solid var(--see);
  background: var(--papier);
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 16px;
  font-size: .95rem;
}
.hinweis--erfolg { border-left-color: var(--frei);   background: var(--frei-hell); border-color: #c6e0d2; }
.hinweis--fehler { border-left-color: var(--belegt); background: var(--belegt-hell); border-color: #e8c9c3; }
.hinweis--info   { border-left-color: var(--see);    background: var(--see-blass); border-color: #cbe0ee; }

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.feld { margin-bottom: 16px; }

.feld label,
.feld__label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 5px;
  color: var(--tiefe-2);
}

/* Alle Bedienelemente teilen sich Polsterung, Schriftgrösse und Zeilenhöhe.
   Ohne das ist ein Knopf neben einem Feld ein, zwei Pixel höher oder
   niedriger – und Datumsfelder bringen ihre eigene Zeilenhöhe mit, was den
   Unterschied noch vergrössert. */
input[type="text"], input[type="email"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--tiefe);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Safari gibt Datumsfeldern sonst eine eigene, grössere Innenhöhe. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 0;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--see);
  outline: 2px solid rgba(46, 127, 176, .22);
  outline-offset: 0;
}
textarea { min-height: 120px; resize: vertical; }

.feld__hilfe {
  font-size: .82rem;
  color: var(--gedaempft);
  margin-top: 5px;
}

.feldreihe {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.knopf {
  display: inline-block;
  background: var(--see);
  color: #fff;
  border: 1px solid var(--see);
  border-radius: var(--radius);
  /* Dieselbe Höhe wie ein Eingabefeld: 10px + 1rem × 1,4 + 10px. */
  padding: 10px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--see-dunkel); border-color: var(--see-dunkel); color: #fff; }

.knopf--leise {
  background: transparent;
  color: var(--tiefe-2);
  border-color: var(--stein);
}
.knopf--leise:hover { background: var(--stein-hell); color: var(--tiefe); border-color: var(--stein); }

.knopf--gefahr { background: var(--belegt); border-color: var(--belegt); }
.knopf--gefahr:hover { background: #a5453b; border-color: #a5453b; }

/* Passt zu den kompakten Feldern in Tabellen und Bearbeitungszeilen:
   7px + .9rem × 1,4 + 7px. */
.knopf--klein { padding: 7px 13px; font-size: .9rem; }

/* Ein deaktivierter Pfeil bleibt stehen, statt zu verschwinden – sonst
   springt die Zeile bei jedem Verschieben. */
.knopf:disabled {
  opacity: .35;
  cursor: default;
}
.knopf:disabled:hover { background: transparent; border-color: var(--stein); }

.knopfreihe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */

.tabelle-huelle { overflow-x: auto; }

table.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
table.liste th {
  text-align: left;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  font-weight: 700;
  padding: 0 14px 9px 14px;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}

/* Oben ausgerichtet: viele Zeilen haben eine mehrzeilige Spalte (Name plus
   Adresse, Aufenthalt plus Notiz) neben einzeiligen. Mittig ausgerichtet
   driften die ersten Zeilen dann gegeneinander. */
table.liste td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
  line-height: 1.45;
}

/* Eingabefelder in Zellen kompakter, sonst wird die Zeile doppelt so hoch. */
table.liste input[type="text"],
table.liste input[type="email"],
table.liste input[type="number"],
table.liste input[type="date"],
table.liste select {
  padding: 7px 9px;
  font-size: .9rem;
  line-height: 1.4;
}

/* Summenzeile bekommt Luft nach oben. */
table.liste tfoot td { padding-top: 14px; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tbody tr:hover { background: #f7fafc; }
table.liste th:first-child, table.liste td:first-child { padding-left: 0; }
table.liste th:last-child,  table.liste td:last-child  { padding-right: 0; }

.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Merkmale (kleine Etiketten)
   -------------------------------------------------------------------------- */

.merkmal {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.merkmal--belegt    { background: var(--belegt-hell);    color: #8e3a31; border-color: #e5c4be; }
/* Bestätigt ist eine gute Nachricht und darf nicht wie eine Warnung aussehen –
   deshalb Meerblau statt des Rots, das im Kalender „belegt“ bedeutet. */
.merkmal--bestaetigt { background: var(--see-blass);     color: var(--see-dunkel); border-color: #bcd8ea; }
.merkmal--angefragt { background: var(--angefragt-hell); color: #8a5c14; border-color: #ecd6a9; }
.merkmal--frei      { background: var(--frei-hell);      color: #33654a; border-color: #bfdccd; }
.merkmal--gesperrt  { background: var(--gesperrt-hell);  color: #576069; border-color: #d3d8dd; }
.merkmal--rolle     { background: var(--see-blass);      color: var(--see-dunkel); border-color: #c9dfef; }

/* --------------------------------------------------------------------------
   Fliesstext aus den Info-Abschnitten
   -------------------------------------------------------------------------- */

.fliesstext > :first-child { margin-top: 0; }
.fliesstext > :last-child  { margin-bottom: 0; }

.fliesstext h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.12rem;
  margin: 1.4em 0 .45em 0;
}
.fliesstext h4 {
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 1.2em 0 .35em 0;
}
.fliesstext p  { margin: 0 0 .9em 0; }
.fliesstext ul { margin: 0 0 .9em 0; padding-left: 1.25em; }
.fliesstext li { margin-bottom: .25em; }

.fliesstext hr {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 1.4em 0;
}

.fliesstext code {
  background: var(--stein-hell);
  border: 1px solid var(--stein);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fliesstext a { word-break: break-word; }

/* Ein offener Verschiebewunsch. Dieselbe Farbe wie eine offene Anfrage im
   Kalender – es ist derselbe Zustand: wartet auf eine Entscheidung. */
.karte--hinweis {
  border-left: 3px solid var(--angefragt);
}
.karte--hinweis p { margin: 0; }

/* Zugangscode: gross genug, um ihn vom Bildschirm abzutippen, während man
   mit der anderen Hand am Schloss steht. */
.karte--code {
  border-left: 3px solid var(--see);
  background: var(--see-blass);
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tiefe);
  margin: 0 0 .35em 0;
  word-break: break-word;
  user-select: all;
}

/* Ein Block je Zusatzkategorie in der Abrechnung. Die Trennlinie steht
   zwischen den Blöcken – nach dem letzten wäre sie nur ein Strich kurz vor
   dem Kartenrand. */
.zusatzblock {
  padding: 14px 0;
  border-bottom: 1px solid var(--rand);
}
.zusatzblock:first-of-type { padding-top: 0; }
.zusatzblock:last-of-type  { padding-bottom: 0; border-bottom: 0; }

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */

.galerie {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.galerie__stueck { margin: 0; }

.galerie__stueck img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--stein-hell);
  transition: filter .15s ease;
}
.galerie__stueck a:hover img { filter: brightness(1.06); }

.galerie__stueck figcaption {
  font-size: .82rem;
  color: var(--gedaempft);
  margin-top: 5px;
  line-height: 1.4;
}

/* PDF und Video bekommen kein Vorschaubild, sondern ein Feld mit Kürzel. */
.galerie__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--see-blass);
  color: var(--see-dunkel);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}
.galerie__symbol:hover { background: var(--himmel); }

.galerie--verwaltung .galerie__stueck {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.galerie--verwaltung input[type="text"],
.galerie--verwaltung input[type="number"] { padding: 6px 8px; font-size: .85rem; }

.galerie__zeile {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}

/* Kurze Merkhilfe unter dem Eingabefeld. */
.syntax {
  font-size: .82rem;
  color: var(--gedaempft);
  background: var(--stein-hell);
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 10px 13px;
  margin-top: 8px;
  line-height: 1.8;
}
.syntax code {
  background: var(--papier);
  border: 1px solid var(--stein);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
}

.leerer-hinweis {
  text-align: center;
  padding: 34px 20px;
  color: var(--gedaempft);
}
.leerer-hinweis p { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Jahresband – das Jahr auf einen Blick
   -------------------------------------------------------------------------- */

.jahr {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.jahr__monat {
  display: grid;
  grid-template-columns: 3.2rem repeat(31, 1fr);
  gap: 2px;
  align-items: center;
  /* 31 Kästchen brauchen Platz, sonst sind sie nicht mehr zu treffen. */
  min-width: 33rem;
}

.jahr__name {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gedaempft);
  padding-right: 6px;
  white-space: nowrap;
}

.tag {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 15px;
  border-radius: 2px;
  background: var(--gesperrt-hell);
  border: 0;
  padding: 0;
  width: 100%;
  /* Auf schmalen Bildschirmen ist kein Platz für die Tagesziffer. */
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Die Tagesziffer steht immer im Kästchen. Damit dafür Platz bleibt, hat das
   Band eine Mindestbreite und wird auf schmalen Geräten seitlich gescrollt –
   lieber schieben als raten, welchen Tag man antippt. */
.tag {
  font-size: 9.5px;
  line-height: 1;
  /* .45 war zu blass zum Ablesen – und die Regel, die das beheben sollte,
     stand an einer Klasse, die im Markup nicht vorkommt. */
  color: rgba(16, 36, 60, .72);
  letter-spacing: -.02em;
}
.tag--belegt    { color: rgba(255, 255, 255, .8); }
.tag--angefragt { color: rgba(16, 36, 60, .62); }
.tag--leer      { color: transparent; }
.jahr .tag--gewaehlt,
.jahr .tag--vorschau { color: #fff; }

.tag--frei      { background: var(--frei-hell);   box-shadow: inset 0 0 0 1px #c3e0d0; }
.tag--belegt    { background: var(--belegt); }
.tag--angefragt { background: repeating-linear-gradient(
                    45deg, var(--angefragt), var(--angefragt) 3px,
                    #e9b45f 3px, #e9b45f 6px); }
.tag--gesperrt  { background: var(--gesperrt-hell); }
.tag--leer      { background: transparent; }

/* Vergangene Tage treten zurück, damit der Blick am laufenden Jahr hängen
   bleibt. Nur im aktuellen Jahr gesetzt – sonst wäre ein altes Jahr komplett
   blass und dadurch unlesbar. */
/* Früher opacity auf dem ganzen Kästchen. Das blendet aber die Tagesziffer
   mit ab: bei .55 landete eine Ziffer mit 72 % Deckkraft effektiv bei 40 % –
   also genau dort, wo sie vorher zu blass war. Stattdessen legt sich jetzt
   ein heller Schleier über den Hintergrund, und weil ::before vor dem Text
   gezeichnet wird, bleibt die Ziffer in voller Stärke darüber stehen.
   (::after ist für das Wochenende reserviert, beide zusammen ergeben bei
   einem vergangenen Samstag hell über dunkel – gewollt: der Tag ist vorbei,
   das Wochenende bleibt erkennbar.) */
.tag--vorbei::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
}

.tag--heute { box-shadow: inset 0 0 0 2px var(--tiefe); }

a.tag { cursor: pointer; text-decoration: none; }
a.tag:hover { filter: brightness(.94); }
a.tag:focus-visible { outline: 2px solid var(--tiefe); outline-offset: 1px; z-index: 1; }

/* Ausgewählter Zeitraum. Höhere Spezifität als .tag--frei, damit die
   Auswahl gewinnt, ohne mit !important nachhelfen zu müssen. */
.jahr .tag--gewaehlt {
  background: var(--see);
  box-shadow: inset 0 0 0 1px var(--see-dunkel);
}
.jahr .tag--vorschau {
  background: var(--see-hell);
  box-shadow: inset 0 0 0 1px var(--see);
}

/* Feste Höhe: die Zeile wechselt bei jeder Mausbewegung den Text und darf
   das Band darunter nicht verschieben. */
.band__hinweis {
  font-size: .95rem;
  color: var(--gedaempft);
  margin: 0 0 14px 0;
  min-height: 1.55em;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.band__hinweis strong {
  color: var(--tiefe);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.band__punkt {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}

.jahr__kopf {
  display: grid;
  grid-template-columns: 3.2rem repeat(31, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.jahr__tagnummer {
  font-size: .58rem;
  color: rgba(16, 36, 60, .75);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Samstag und Sonntag.

   Bewusst kein eigener Farbton und keine geringere Deckkraft des Kästchens:
   dessen Farbe sagt bereits, ob der Tag belegt, frei oder gesperrt ist, und
   die muss ablesbar bleiben. Stattdessen legt sich ein dünner grauer Schleier
   darüber, der jeden Zustand gleichmässig abdunkelt.

   Das Band ist nach Tagesnummern gerastert, Wochenenden liegen also nicht
   untereinander. Sie helfen trotzdem: man sieht auf einen Blick, welche
   Wochenenden eines Monats noch frei sind – und genau danach wird gefragt. */
.tag--wochenende::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(16, 36, 60, .12);
  pointer-events: none;
}

.legende {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: .83rem;
  color: var(--tiefe-2);
}
.legende span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legende i {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Anmeldeseite
   -------------------------------------------------------------------------- */

.tor {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  /* Verlauf aus dem Foto: falls das Bild fehlt, bleibt die Stimmung erhalten. */
  background:
    linear-gradient(180deg, #b9c6e8 0%, #e6c3d6 34%, #9fc4dd 58%, #5ea6cd 78%, #7d8794 100%);
  background-size: cover;
  background-position: center 38%;
  position: relative;
}
/* Der dunkle Verlauf nach unten ist kein Effekt, sondern Zweck: darunter
   liegt heller Kalkstein, auf dem weisse Schrift sonst nicht lesbar wäre. */
.tor--bild {
  background-image:
    linear-gradient(180deg, rgba(16, 36, 60, 0) 38%, rgba(16, 36, 60, .62) 100%),
    url('bild/kueste.jpg');
  background-size: cover;
  background-position: center 42%;
  background-color: #7d8794;
}

@media (max-width: 1100px) {
  .tor--bild {
    background-image:
      linear-gradient(180deg, rgba(16, 36, 60, 0) 34%, rgba(16, 36, 60, .68) 100%),
      url('bild/kueste-klein.jpg');
  }
}

/* Eine einzelne Karte, sonst nichts: von aussen soll nicht erkennbar sein,
   was hinter der Anmeldung liegt. */
.tor__innen {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 9vh 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Die Karte sitzt wie ein erleuchtetes Fenster über der Bucht. */
.tor__karte {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-radius: 5px;
  padding: 28px 30px 30px 30px;
  width: 100%;
  max-width: 27rem;
  box-shadow: 0 24px 60px -18px rgba(16, 36, 60, .5);
  border-top: 3px solid var(--see);
}
.tor__karte h2 {
  font-size: 1.22rem;
  margin-bottom: .35em;
}
.tor__karte .knopf { width: 100%; }

.tor__fuss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-size: .72rem;
  color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   Seitenfuss
   -------------------------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--rand);
  margin-top: 10px;
  padding: 18px 20px 30px 20px;
  text-align: center;
  font-size: .8rem;
  color: var(--leise);
}
.fuss a { color: var(--gedaempft); }

/* --------------------------------------------------------------------------
   Kleine Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .inhalt { padding: 18px 14px 48px 14px; }
  .karte  { padding: 16px 14px; margin-bottom: 16px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }

  /* Kopfzeile: Marke und Konto in einer Reihe, Navigation darunter als
     schiebbare Leiste. So bricht oben nichts unschoen um. */
  .kopf__innen { min-height: 52px; padding: 8px 14px; gap: 8px; row-gap: 6px; }
  .marke { font-size: .98rem; }
  .kopf__rechts { margin-left: auto; font-size: .82rem; gap: 9px; }
  .navi {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navi::-webkit-scrollbar { display: none; }
  .navi a { padding: 6px 10px; font-size: .88rem; }
  .objektwahl select { padding: 5px 8px; font-size: .84rem; max-width: 8.5rem; }

  /* Seitenkopf gestapelt: Titel oben, Knoepfe darunter. */
  .seitenkopf { align-items: stretch; gap: 12px; margin-bottom: 18px; }
  .seitenkopf .knopfreihe { justify-content: flex-start; }

  .raster { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .jahr__name { font-size: .66rem; padding-right: 4px; }
  /* 13 px waren als Ziel zu klein (empfohlen sind 24). Lieber breiter
     schieben als danebentippen. */
  .tag { min-height: 20px; border-radius: 1px; }

  /* Tabellen enger setzen, damit weniger geschoben werden muss. */
  table.liste { font-size: .88rem; }
  table.liste th { padding: 0 10px 8px 10px; }
  table.liste td { padding: 10px 10px; }

  /* Knoepfe in Tabellenzellen untereinander statt gequetscht nebeneinander. */
  table.liste .knopfreihe { flex-direction: column; align-items: stretch; gap: 5px; }
  table.liste .knopfreihe .knopf { width: 100%; }

  .knopf { padding: 10px 16px; }
  .knopf--klein { padding: 7px 12px; }

  .tor__innen { padding: 28px 14px 5vh 14px; }
  .tor__karte { padding: 20px 18px 22px 18px; }

  .legende { gap: 12px; font-size: .8rem; }
  .band__hinweis { font-size: .88rem; }
  .band__hinweis strong { font-size: 1rem; }
}

/* Sehr schmale Geraete: etwas mehr Luft fuer den Daumen im Jahresband. */
@media (max-width: 420px) {
  .jahr__monat { min-width: 30rem; grid-template-columns: 2.4rem repeat(31, 1fr); }
  .inhalt { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .kopf, .fuss, .knopfreihe { display: none; }
  body { background: #fff; }
  .karte { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}


/* ---------------------------------------------------------------------------
   Sprunglink: fünf Navigationspunkte plus Wohnungswahl stehen auf jeder Seite
   vor dem Inhalt. Mit der Tastatur ist das jedes Mal derselbe Weg.
   --------------------------------------------------------------------------- */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--papier);
  color: var(--tiefe);
  padding: 10px 16px;
  border: 2px solid var(--see);
  border-radius: var(--radius);
}
.sprung:focus { left: 8px; top: 8px; }

/* Breite Tabellen: der Name bleibt stehen, damit man beim Schieben nicht
   vergisst, in wessen Zeile man ist. Der Schatten am rechten Rand zeigt
   überhaupt erst an, dass da noch etwas kommt. */
.tabelle-huelle--breit { position: relative; }
.tabelle-huelle--breit table.liste td:first-child,
.tabelle-huelle--breit table.liste th:first-child {
  position: sticky;
  left: 0;
  background: var(--papier);
  z-index: 1;
}
.tabelle-huelle--breit table.liste tfoot td:first-child { background: var(--stein-hell); }
.tabelle-huelle--breit::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 18px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(16, 36, 60, .10), transparent);
}

/* Überschrift über einer Kachelgruppe in der Verwaltung. Trennt, was für die
   gewählte Wohnung gilt, von dem, was überall gilt. */
.gruppenkopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rand);
}
.gruppenkopf:first-of-type { margin-top: 8px; }
.gruppenkopf h2 {
  margin: 0;
  font-size: 1.15rem;
}


/* --------------------------------------------------------------------------
   Bearbeitungszeile

   Eine Zeile, in der ein vorhandener Eintrag geändert wird: Einzelposten,
   Zahlungen, Zusatzkosten ohne Aufenthalt. Bewusst keine Tabelle – vier bis
   sechs Felder in einer Tabellenzelle laufen aus ihr heraus, und was rechts
   überhängt, sieht man nicht mehr. Hier bricht die Zeile stattdessen um.
   -------------------------------------------------------------------------- */

.bzeile {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--rand);
}
.bzeile:last-of-type { border-bottom: none; }

/* Der Name links, danach das Formular, ganz rechts das Entfernen. */
.bzeile__wer { flex: 1 1 7rem; min-width: 0; padding-bottom: 8px; }
.bzeile form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.bzeile form:first-of-type { flex: 4 1 20rem; }
.bzeile .feld { margin: 0; }

/* Dieselbe kompakte Grösse wie in Tabellen – sonst steht ein grosses Feld
   neben einem kleinen Knopf. */
.bzeile input[type="text"],
.bzeile input[type="number"],
.bzeile input[type="date"],
.bzeile select {
  padding: 7px 9px;
  font-size: .9rem;
  line-height: 1.4;
}

/* Inhaltsverzeichnis der Info-Seite.

   Bewusst keine Reiter: die Seite wird vor der Tür gelesen, oft am Telefon –
   da soll alles da sein und auffindbar bleiben, auch für die Suchfunktion des
   Browsers. Und bewusst kein gefüllter Kasten mit Knöpfen: das sah aus wie
   ein Hinweisbanner und drängte sich vor den Inhalt. Eine Zeile Text unter
   einer Haarlinie reicht – wie das Inhaltsverzeichnis eines Buchs. */
.sprungleiste {
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rand);
}
.sprungleiste__ziele {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  align-items: baseline;
}
.sprungleiste__ziele a {
  color: var(--tiefe-2);
  text-decoration: none;
  border-bottom: 1px solid var(--stein);
  padding-bottom: 1px;
}
.sprungleiste__ziele a:hover {
  color: var(--see-dunkel);
  border-bottom-color: var(--see);
}
/* Trennpunkt zwischen den Einträgen, nicht hinter dem letzten. */
.sprungleiste__ziele a:not(:last-child)::after {
  content: "·";
  color: var(--leise);
  margin-left: 6px;
  border: 0;
}

@media print { .sprungleiste { display: none; } }

/* Zeilen, die nichts mehr erwarten.

   Über die Textfarbe statt über opacity: eine abgesagte Zeile ist ohnehin
   schon gedämpft, und zwei gestapelte Deckkräfte ergäben unleserlichen Nebel.
   Die Zustandsetiketten behalten ihre Farbe – gerade bei einer abgesagten
   Zeile ist das die Information, auf die es ankommt. */
tr.zeile--vorbei td { color: var(--gedaempft); }
tr.zeile--vorbei td strong { font-weight: 600; color: var(--gedaempft); }
tr.zeile--erledigt td { opacity: .6; }
tr.zeile--erledigt .merkmal { opacity: 1; }

/* --------------------------------------------------------------------------
   Dateiauswahl beim Bearbeiten eines Info-Abschnitts
   -------------------------------------------------------------------------- */

.dateiwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.dateiwahl__stueck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--papier);
  cursor: pointer;
  font-size: .85rem;
}
.dateiwahl__stueck--an { border-color: var(--see); background: var(--see-blass); }
.dateiwahl__stueck img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 2px; flex: 0 0 auto;
}
.dateiwahl__symbol { font-size: 1.3rem; width: 44px; text-align: center; flex: 0 0 auto; }
.dateiwahl__name { min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Lichtkasten

   Ein Bild gross ansehen, ohne die Seite zu verlassen. Auf dem Telefon ist das
   der eigentliche Zweck: die Vorschaubilder sind dort zwangsläufig klein, und
   ein Schlüsselkasten oder ein Sicherungskasten ist auf 150 Pixel nicht zu
   erkennen. Ohne JavaScript bleibt jedes Bild ein gewöhnlicher Link.
   -------------------------------------------------------------------------- */

.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 36, 60, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.lichtkasten[hidden] { display: none; }
.lichtkasten img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lichtkasten__titel {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: .9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  padding: 0 60px;
}
.lichtkasten__zu,
.lichtkasten__pfeil {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  cursor: pointer;
  line-height: 1;
  border-radius: 100px;
  /* Grosse Trefferflächen – das hier wird mit dem Daumen bedient. */
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
}
.lichtkasten__zu:hover,
.lichtkasten__pfeil:hover { background: rgba(255, 255, 255, .25); }
.lichtkasten__zu { top: 12px; right: 12px; font-size: 1.6rem; }
.lichtkasten__pfeil--zurueck { left: 12px; }
.lichtkasten__pfeil--vor { right: 12px; }

@media (max-width: 720px) {
  /* Auf dem Telefon wischt man; die Pfeile nehmen dort nur Bild weg. */
  .lichtkasten__pfeil { display: none; }
  .lichtkasten__titel { padding: 0 12px; }
}

/* --------------------------------------------------------------------------
   Eingebettete Karten

   Zwei Stufen: erst ein Platzhalter, nach dem Klick der Rahmen. So erfährt der
   Kartendienst nichts von Leuten, die die Seite nur überfliegen – dieselbe
   Überlegung wie bei den selbst gehosteten Schriften.
   -------------------------------------------------------------------------- */

.karte-platz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 180px;
  margin: 16px 0;
  padding: 20px;
  border: 1px dashed var(--stein);
  border-radius: var(--radius);
  background: var(--stein-hell);
}
.karte-platz p { margin: 0; max-width: 34rem; }

/* Nur die Verwaltung sieht das: eine Kartenadresse, die kein bekannter Dienst
   ist. Gäste bekommen an derselben Stelle schlicht den Link. */
.karte-fehler {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px dashed var(--angefragt);
  border-radius: var(--radius);
  background: var(--stein-hell);
  font-size: .92rem;
  color: var(--gedaempft);
  word-break: break-word;
}
.karte-fehler a { display: inline-block; margin-top: 4px; }

/* Karte samt Leiste darunter. Der Rahmen traegt den Abstand, damit zwischen
   Karte und Knopf keine Luecke entsteht. */
.karte-rahmen { margin: 16px 0; }
.karte-rahmen iframe { margin: 0; }
.karte-leiste {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.fliesstext iframe {
  display: block;
  width: 100%;
  height: 380px;
  margin: 16px 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
@media (max-width: 720px) {
  .fliesstext iframe { height: 260px; }
}