/* Dahlke Verwaltung – Aussehen. Die Farben kommen aus api/design.php (in der Verwaltung unter „Design“ einstellbar);
   die Werte hier sind nur der Rückfall, falls das nicht geladen werden kann. */
:root {
  --primary:#587d55; --secondary:#243628; --accent:#b9cfa8; --muted:#f4f3ea; --surface:#e1e5d4;
  --text:#212721; --muted-text:#636a58; --border:#d9decb;
  --danger:#9b3a2f; --danger-bg:#f6e9e7; --sonder:#e8ae45; --sonder-bg:#fbf0d9; --sonder-ink:#3d2b06;
  --primary-dunkel: color-mix(in srgb, var(--primary) 82%, black);
  --we-tint: color-mix(in srgb, var(--muted) 82%, var(--surface));
  --radius-karte:16px; --radius-feld:10px; --radius-knopf:8px;
  --font:"Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 var(--font); color:var(--text); background:var(--muted); }
h1, h2, h3 { margin:.2em 0 .6em; color:var(--secondary); line-height:1.25; }
h1 { font-size:1.9rem; }
h2 { font-size:1.3rem; }
h3 { font-size:1.1rem; }
a { color:var(--primary-dunkel); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 55%, white); outline-offset:2px; }

/* Rahmen: Seitenleiste links, Inhalt rechts */
.rahmen { display:grid; grid-template-columns:270px minmax(0, 1fr); min-height:100vh; }
.rahmen:not(.angemeldet) { grid-template-columns:minmax(0, 1fr); }
.rahmen:not(.angemeldet) .seite { display:none; }
.seite { background:var(--secondary); color:#fff; display:flex; flex-direction:column; gap:1rem; padding:1.1rem .9rem; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; }
.seite-kopf { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.logo-kachel { display:block; background:#fff; border-radius:12px; padding:.55rem .7rem; flex:1; }
.logo-kachel img { display:block; width:100%; max-width:200px; height:auto; margin:0 auto; }
.menueknopf { display:none; }
.menue { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.menue .gruppe { margin:.7rem .5rem .2rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--accent) 80%, var(--secondary)); }
.menue button { text-align:left; background:transparent; color:#fff; border:0; border-radius:var(--radius-knopf); padding:.42rem .75rem; font:inherit; cursor:pointer; }
.menue button:hover { background:color-mix(in srgb, var(--secondary) 80%, white); }
.menue button.aktiv { background:var(--primary); font-weight:600; }
.seite-fuss { font-size:.85rem; color:color-mix(in srgb, var(--accent) 80%, var(--secondary)); }
.seite-fuss #nutzer { color:#fff; margin-bottom:.5rem; }
.seite-fuss button { background:transparent; color:#fff; border:1px solid color-mix(in srgb, var(--secondary) 55%, white); margin-top:.4rem; }
.haupt { min-width:0; }
.logo-mitte { display:none; text-align:center; padding:2rem 1rem 0; }
.rahmen:not(.angemeldet) .logo-mitte { display:block; }
.logo-mitte img { width:260px; max-width:70%; height:auto; }
main { width:100%; max-width:80rem; margin:0 auto; padding:1.4rem 1.4rem 3rem; }
.rahmen:not(.angemeldet) main { max-width:34rem; }
main:has(.kal) { max-width:none; }

/* Karten, Felder, Knöpfe */
.karte { background:#fff; border:1px solid var(--border); border-radius:var(--radius-karte); padding:1.3rem 1.4rem; margin-bottom:1.1rem; }
label { display:block; margin:.7rem 0 .25rem; font-weight:600; }
input, select, textarea { width:100%; max-width:26rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--radius-feld); font:inherit; color:var(--text); background:#fff; }
input[type=checkbox] { width:auto; }
textarea { max-width:44rem; }
input:focus, select:focus, textarea:focus { border-color:var(--primary); }
button { padding:.6rem 1.1rem; border:0; border-radius:var(--radius-knopf); background:var(--primary); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:hover { background:var(--primary-dunkel); }
button.zweit { background:#fff; color:var(--primary-dunkel); border:1px solid var(--primary); }
button.zweit:hover { background:var(--muted); }
button.sonder { background:var(--sonder); color:var(--sonder-ink); border:1px solid var(--sonder); }
button.sonder:hover { background:color-mix(in srgb, var(--sonder) 85%, black); }
button.sonder:disabled { opacity:.5; }
button.gefahr { background:#fff; color:#a33224; border:1px solid #a33224; }
button.gefahr:hover { background:#fbeceb; }
button[disabled] { opacity:.5; cursor:default; }
.reihe { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.fehler { color:var(--danger); margin:.6rem 0; }
.hinweis { color:var(--muted-text); }
.karte.warnung { border-color:var(--sonder); background:var(--sonder-bg); color:var(--sonder-ink); }
.karte.warnung .hinweis { color:var(--sonder-ink); }
.karte input[readonly] { max-width:100%; background:var(--muted); }
.wahl { flex-wrap:nowrap; align-items:center; }
.wahl input { width:1.1rem; height:1.1rem; margin:0; flex:none; }
.wahl label { margin:0; font-weight:400; }

/* Tabellen */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; font-size:.95rem; }
th { background:var(--muted); color:var(--secondary); font-weight:600; }
.scroll { overflow-x:auto; }

/* Kalender: fortlaufende Zeitleiste, die Balken liegen über dem Tagesraster und haben schräge Enden (Anreise und Abreise sind halbe Tage) */
.kal { --monat-h:1.8rem; --tag-h:3rem; --feldhoehe:2.8rem; --namen-b:9.5rem; display:grid; grid-template-columns:var(--namen-b) minmax(0, 1fr); border:1px solid var(--border); border-radius:var(--radius-feld); background:#fff; overflow:clip; }
.kal.hoehe-hoch { --feldhoehe:3.8rem; }
.kal.hoehe-sehr_hoch { --feldhoehe:5rem; }
.kal-links { position:sticky; left:0; z-index:5; background:#fff; border-right:1px solid var(--border); }
.kal-ecke { height:calc(var(--monat-h) + var(--tag-h)); border-bottom:1px solid var(--border); background:var(--muted); }
.kal-name { height:var(--feldhoehe); display:flex; align-items:center; padding:0 .7rem; font-weight:600; font-size:.9rem; line-height:1.2; border-bottom:1px solid var(--border); }
.kal-rechts { position:relative; min-width:0; }
.kal-monate, .kal-tagesband, .kal-tage { display:grid; }
.kal-monate { height:var(--monat-h); background:var(--muted); }
.kal-monat { display:flex; align-items:center; padding:0 .6rem; font-weight:700; font-size:.88rem; color:var(--secondary); white-space:nowrap; overflow:hidden; }
.kal-tagesband { height:var(--tag-h); background:var(--muted); border-bottom:1px solid var(--border); }
.kal-tag { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; font-size:.8rem; line-height:1; }
.kal-tag .wt { font-style:italic; color:var(--muted-text); font-size:.7rem; }
.kal-tag .nr.heute { background:var(--primary); color:#fff; border-radius:999px; padding:.2rem .4rem; font-weight:700; }
.kal-tag.we, .kal-feld.we { background:var(--we-tint); }
.kal-tag.we { background:color-mix(in srgb, var(--surface) 70%, var(--muted)); }
.trenner { border-left:2px solid color-mix(in srgb, var(--secondary) 55%, white); }
.kal-tage { position:relative; }
.kal-feld { height:var(--feldhoehe); background:#fff; border-bottom:1px solid var(--border); cursor:pointer; }
.kal-feld.we { background:color-mix(in srgb, var(--surface) 55%, #fff); }
.kal-feld:hover { background:var(--accent); }
.kal-heute { position:absolute; top:0; bottom:0; width:2px; background:#b3402f; z-index:4; pointer-events:none; transform:translateX(-1px); }
.kal.eng .kal-tag .wt { display:none; }
.kal.eng .kal-tag { font-size:.6rem; }
.kal-werkzeuge { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.6rem 1rem; margin:.9rem 0 1rem; }
.kal-mitte, .kal-rechts-knoepfe { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.kal-mitte { justify-content:flex-start; flex:none; flex-wrap:nowrap; gap:.3rem; }
.kal-mitte button, .kal-rechts-knoepfe button { padding:.5rem .7rem; font-size:.88rem; white-space:nowrap; }
.kal-monatswahl { width:10rem; padding:.5rem .6rem; font-size:.9rem; }
.kal-schieber { display:block; width:100%; max-width:none; margin:.9rem 0 .2rem; padding:0; accent-color:var(--primary); cursor:pointer; }
.kal-zeitraum { text-align:center; margin:0; }
.kal-feld.auswahl { background:var(--accent); outline:2px solid var(--primary); outline-offset:-2px; }
.kal-tage { user-select:none; }
.schnellwahl { position:fixed; z-index:70; background:#fff; border:1px solid var(--border); border-radius:var(--radius-karte); box-shadow:0 8px 28px rgba(0,0,0,.28); padding:.9rem 1rem; max-width:22rem; }
.schnellwahl p { margin:0 0 .3rem; }
.dialog-hintergrund { position:fixed; inset:0; z-index:60; background:rgba(20,30,20,.5); display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:2rem 1rem; }
.dialog { background:#fff; border-radius:var(--radius-karte); width:100%; max-width:42rem; }
.dialog.klein { max-width:30rem; }
.dialog.gross { max-width:64rem; }
.dialog-innen { padding:1.3rem 1.4rem; }
.dialog .karte { margin:0; }
.segment { display:inline-flex; background:var(--muted); border:1px solid var(--border); border-radius:999px; padding:.2rem; gap:.15rem; }
.segment button { background:transparent; color:var(--text); border-radius:999px; padding:.4rem .9rem; font-weight:500; }
.segment button:hover { background:var(--surface); }
.segment button.aktiv { background:var(--primary); color:#fff; font-weight:600; }
.balken { position:absolute; top:0; bottom:1px; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.78rem; color:#fff; cursor:pointer; }
.balken.gast { background:var(--primary); }
.balken.vorlaeufig { background:var(--sonder); color:var(--sonder-ink); }
.balken.sperre, i.sperre { background:repeating-linear-gradient(45deg, #cfd2c4, #cfd2c4 6px, #e1e4d6 6px, #e1e4d6 12px); color:var(--text); }
.balken.reinigung, i.reinigung { background:#4a6572; }
.streifen-unten .balken.holidu { box-shadow:inset 0 -5px 0 var(--holidu); }
.streifen-oben .balken.holidu { box-shadow:inset 0 5px 0 var(--holidu); }
.streifen-links .balken.holidu { box-shadow:inset 5px 0 0 var(--holidu); }
.streifen-rechts .balken.holidu { box-shadow:inset -5px 0 0 var(--holidu); }
.balkentext { display:flex; align-items:center; justify-content:center; gap:.3rem; min-width:0; }
.balkenwort { overflow:hidden; text-overflow:ellipsis; }
.holidu-bild { height:1.05rem; width:auto; flex:none; border-radius:3px; background:#fff; padding:1px; }
.balkentext.unter { flex-direction:column; gap:.1rem; }


/* Herkunft im Kalender: Farben je Plattform (.pf-<Nummer>) kommen aus api/design.php */
.balken.pf-offen, i.pf-offen { background:#6f7566; }
.legende { display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:.5rem 1rem; margin:.4rem 0 .8rem; font-size:.88rem; }
.legendenpunkt { display:inline-flex; align-items:center; gap:.35rem; }
.legendenpunkt i { display:inline-block; width:1.7rem; height:.9rem; clip-path:polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.legendenpunkt i.holidu-strich { background:#8a9a86; }
.legendenpunkt i.streifen-unten { box-shadow:inset 0 -4px 0 var(--holidu); }
.legendenpunkt i.streifen-oben { box-shadow:inset 0 4px 0 var(--holidu); }
.legendenpunkt i.streifen-links { box-shadow:inset 4px 0 0 var(--holidu); }
.legendenpunkt i.streifen-rechts { box-shadow:inset -4px 0 0 var(--holidu); }
i.vorlaeufig { background:var(--sonder); }
.diag { margin-top:.8rem; padding:.8rem 1rem; background:var(--muted); border-radius:var(--radius-feld); }
.diag details { margin:.3rem 0; }
.diag table td { font-size:.82rem; padding:.2rem .5rem; word-break:break-all; }
.diag textarea { max-width:100%; font-family:ui-monospace, monospace; font-size:.8rem; }
.plattformen input[type=text] { max-width:14rem; }
.plattformen input.kurz { width:5.5rem; }

/* Designeinstellungen */
.farbzeile { display:flex; align-items:center; gap:.7rem; margin:.4rem 0; flex-wrap:wrap; }
.farbzeile input[type=color] { width:3rem; height:2.4rem; padding:.15rem; flex:none; }
.farbzeile input[type=text] { width:8rem; font-family:ui-monospace, monospace; }
.farbzeile span { min-width:15rem; }
.bildvorschau { display:block; max-width:260px; max-height:120px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-feld); padding:.5rem; margin:.5rem 0; }
.bildvorschau.klein { max-width:64px; max-height:64px; }

/* Schmale Bildschirme: Seitenleiste wird zur Kopfleiste mit ausklappbarem Menü */
@media (max-width: 900px) {
  .rahmen { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto 1fr; }
  .seite { position:static; height:auto; overflow:visible; padding:.7rem .8rem; gap:.6rem; }
  .logo-kachel { flex:none; width:11rem; padding:.35rem .5rem; }
  .menueknopf { display:block; background:transparent; border:1px solid color-mix(in srgb, var(--secondary) 55%, white); }
  .menue, .seite-fuss { display:none; }
  .seite.offen .menue { display:flex; }
  .seite.offen .seite-fuss { display:block; }
  main { padding:1rem .8rem 2.5rem; }
  .karte { padding:1rem; }
}

/* Kleine Meldung unten */
.toast { position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%, 1rem); background:var(--secondary); color:#fff; padding:.65rem 1.1rem; border-radius:var(--radius-knopf); box-shadow:0 4px 16px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; max-width:90vw; }
.toast.sichtbar { opacity:1; transform:translate(-50%, 0); }

/* Gruppen im Menü zum Auf- und Zuklappen */
.menue button.gruppe { padding:.25rem .5rem; margin:.6rem .25rem .1rem; width:calc(100% - .5rem); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:400; color:color-mix(in srgb, var(--accent) 80%, var(--secondary)); }
.menue button.gruppe:hover { color:#fff; }

/* Auswertung */
.haken { display:inline-flex; align-items:center; gap:.4rem; margin-right:.9rem; }
.zeitraum { min-width:11rem; text-align:center; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.7rem; }
.kachel { background:var(--muted); border-radius:var(--radius-feld); padding:.7rem .85rem; display:flex; flex-direction:column; gap:.1rem; }
.kachel strong { font-size:1.35rem; color:var(--secondary); }
.kname { font-size:.8rem; color:var(--muted-text); }
.kzusatz { font-size:.78rem; color:var(--muted-text); }
.diagramm { margin-bottom:1.2rem; }
.dlegende { display:flex; gap:1rem; font-size:.85rem; margin-bottom:.3rem; }
.dlegende .farbe { display:inline-block; width:.8rem; height:.8rem; border-radius:3px; margin-right:.35rem; vertical-align:-1px; }
.saeulen { display:flex; align-items:flex-end; gap:.35rem; height:190px; padding-bottom:1.6rem; border-bottom:1px solid var(--border); position:relative; }
.spalte { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.paar { flex:1; display:flex; align-items:flex-end; gap:2px; }
.saeule { flex:1; border-radius:4px 4px 0 0; min-height:1px; }
.saeule.jetzt, .dlegende .jetzt { background:var(--primary); }
.saeule.vor, .dlegende .vor { background:var(--accent); }
.etikett { position:absolute; left:0; right:0; bottom:-1.5rem; text-align:center; font-size:.78rem; color:var(--muted-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.etikett.klein { font-size:.62rem; }
.hbalken { display:flex; flex-direction:column; gap:.4rem; }
.hzeile { display:grid; grid-template-columns:minmax(90px, 160px) 1fr; gap:.2rem .6rem; align-items:center; }
.bspur { background:var(--muted); border-radius:6px; height:1.1rem; display:block; }
.bfuell { display:block; height:100%; background:var(--primary); border-radius:6px; }
.bwert { grid-column:2; font-size:.82rem; color:var(--muted-text); margin-top:-.15rem; }
.tabellenrahmen { overflow-x:auto; }
.tabellenrahmen th.z, .tabellenrahmen td.z { text-align:right; white-space:nowrap; }
table.matrix th.z { text-align:center; font-size:.8rem; padding:.4rem .3rem; }
td.mz { text-align:center; font-size:.85rem; padding:.4rem .3rem; border:2px solid #fff; }
td.mz.leer { color:var(--muted-text); background:var(--muted); }
table.matrix tr.summe td:first-child { font-weight:600; }
@media (max-width:640px) { .hzeile { grid-template-columns:1fr; } .bwert { grid-column:1; } }
.tabellenrahmen select { min-width:9rem; }

/* Reinigungszeichen im Kalender */
:root { --zw:#2f6f9f; }
/* Reinigungsmarken (E, Z): weißer Kreis mit dunkelblauem Rand und weißem Ring, liegt immer vor dem Balken */
.kal-rg { position:absolute; bottom:1px; transform:translateX(-50%); z-index:5; min-width:1.3rem; height:1.3rem; padding:0 .15rem; border-radius:999px; font:700 .68rem/1 var(--font); cursor:pointer; background:#fff; color:#24475a; border:2px solid #24475a; box-shadow:0 0 0 2px #fff, 0 1px 5px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.kal-rg.zwischen { border-style:dashed; border-color:#2f6f9f; color:#2f6f9f; }
.kal-rg.fertig { background:#24475a; color:#fff; border-color:#24475a; }
.kal-rg.zwischen.fertig { background:#2f6f9f; color:#fff; border-color:#2f6f9f; }
.kal-rg.vorschlag { opacity:.8; border-style:dotted; background:var(--sonder-bg); color:var(--sonder-ink); border-color:#24475a; }
.kal-rg:hover { opacity:1; box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(36,71,90,.35); }
.kal.eng .kal-rg { min-width:1rem; height:1rem; font-size:.55rem; }
.kal-rg-legende { flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.2rem; height:1.2rem; border-radius:999px; border:2px solid #24475a; font-size:.65rem; margin-right:.35rem; }

/* Unterkunftsnamen: am Handy als Kürzel, bleiben beim seitlichen Verschieben stehen */
.kal-name .kurz { display:none; }
@media (max-width:700px) {
  .kal { --namen-b:3.2rem; }
  .kal-name { padding:0; justify-content:center; font-size:.85rem; }
  .kal-name .voll { display:none; }
  .kal-name .kurz { display:inline; }
}
.rg-modus .kal-feld, .rg-modus .balken { cursor:copy; }
.kal-werkzeuge button.aktiv { background:var(--primary); color:#fff; }

.tabellenrahmen tr.aus td { opacity:.5; }

/* Ansicht der Reinigungskräfte (Handy zuerst, große Tippflächen) */
.putz-tag { margin:1.2rem 0 .5rem; }
.putz-karte { display:flex; flex-direction:column; gap:.3rem; width:100%; text-align:left; background:#fff; color:var(--secondary); border:1px solid var(--border); border-radius:var(--radius-feld); padding:.9rem 1rem; margin-bottom:.6rem; min-height:4.5rem; }
.putz-karte.fertig { opacity:.7; }
.putz-kopf { display:flex; align-items:center; gap:.6rem; font-size:1.05rem; }
.putz-zeile { font-size:.9rem; color:#5c6b5a; }
.putz-balken { display:block; height:.5rem; background:var(--muted); border-radius:9px; overflow:hidden; margin-top:.2rem; }
.putz-balken i { display:block; height:100%; background:var(--primary); }
.putz-abschluss { width:100%; margin:.4rem 0 1rem; padding:1rem; font-size:1.05rem; font-weight:700; }
.putz-abschluss:disabled { background:#9aa896; }
.kal-rg-legende.z { border-style:dashed; border-color:var(--zw); color:var(--zw); }
.putz-titel { display:flex; align-items:center; gap:.4rem; margin:.8rem 0 .2rem; }
.putz-hinweis { background:#fff6d8; border:1px solid #e6d58f; border-radius:10px; padding:.6rem .8rem; margin:.5rem 0; }
.putz-punkt { display:flex; gap:.8rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--muted); }
.putz-haken { flex:none; width:2.8rem; height:2.8rem; border:2px solid var(--primary); border-radius:10px; background:#fff; color:#fff; font-size:1.6rem; line-height:1; padding:0; }
.putz-punkt.ok .putz-haken { background:var(--primary); }
.putz-text { flex:1; min-width:0; font-size:1.05rem; }
.putz-text small { color:#5c6b5a; }
.putz-foto { margin-top:.4rem; }
.putz-bilder { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.putz-bild { position:relative; display:inline-block; }
.putz-bild img { width:5rem; height:5rem; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; }
.putz-weg { position:absolute; top:-.4rem; right:-.4rem; width:1.7rem; height:1.7rem; padding:0; border-radius:50%; font-size:.8rem; }
.putz-mangel summary { font-weight:700; cursor:pointer; padding:.3rem 0; }
.putz-schritt { display:flex; align-items:center; gap:.8rem; }
.putz-schritt button { width:3.2rem; height:3.2rem; font-size:1.6rem; padding:0; }
.putz-zahl { min-width:3.5rem; text-align:center; font-size:1.6rem; font-weight:700; }
.putz-etikett { margin:.9rem 0 .3rem; font-size:.9rem; color:#5c6b5a; }
.putz-summe { margin:1rem 0 .2rem; font-weight:700; }
.putz-summe.falsch { color:#a33; }
.putz-verteil { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.4rem 0; border-bottom:1px solid var(--muted); }
.putz-verteil .putz-schritt button { width:2.6rem; height:2.6rem; font-size:1.3rem; }
.putz-verteil .putz-zahl { font-size:1.2rem; min-width:2.6rem; }

.rg-mangel { color:#a33; font-weight:700; font-size:.9rem; }
.rg-haken { flex:none; width:1.6rem; text-align:center; font-weight:700; color:var(--primary); }
.rg-foto { width:7rem; height:7rem; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; }
.kal-rg.mangel::after { content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:#c33; border:1px solid #fff; }

/* Reinigung: Stammdaten am Desktop zweispaltig, Checkliste als Matrix */
.rg-stamm { display:grid; gap:1rem; grid-template-columns:minmax(0, 1fr); align-items:start; }
.rg-stamm .karte { margin:0; }
table.eng th, table.eng td { padding:.35rem .5rem; }
table.matrix th.c, table.matrix td.c { text-align:center; }
table.matrix select { min-width:7rem; max-width:9rem; padding:.2rem .3rem; font-size:.85rem; }
table.matrix tr.std-zeile td { background:#f4f9ee; }
table.matrix .eigen { color:#9aa896; font-weight:700; }
table.matrix td:first-child { min-width:11rem; }
table.matrix select { max-width:8rem; }
table.matrix td:first-child { min-width:9rem; }
table.matrix select { max-width:7.2rem; }
table.matrix button, table.eng button { padding:.3rem .6rem; font-size:.85rem; }

/* Lücken zwischen Einträgen */
.kal-luecke { position:absolute; top:3px; bottom:4px; z-index:1; border-radius:6px; pointer-events:none; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.kal-luecke.kurz { background:repeating-linear-gradient(45deg, rgba(232,174,69,.35), rgba(232,174,69,.35) 5px, rgba(251,240,217,.6) 5px, rgba(251,240,217,.6) 10px); border:1.5px dashed var(--sonder); }
.kal-luecke.lang { background:rgba(88,125,85,.09); border:1.5px dashed rgba(88,125,85,.5); }
.kal-luecke b { pointer-events:auto; cursor:pointer; font:700 .68rem/1 var(--font); padding:.15rem .3rem; border-radius:6px; background:rgba(255,255,255,.85); color:var(--sonder-ink); white-space:nowrap; }
.kal-luecke.lang b { color:var(--secondary); }
.kal.eng .kal-luecke b { font-size:.55rem; padding:.1rem .15rem; }
.legendenpunkt i.luecke-kurz { clip-path:none; border:1.5px dashed var(--sonder); background:repeating-linear-gradient(45deg, rgba(232,174,69,.35), rgba(232,174,69,.35) 4px, rgba(251,240,217,.6) 4px, rgba(251,240,217,.6) 8px); }
.legendenpunkt i.luecke-lang { clip-path:none; border:1.5px dashed rgba(88,125,85,.5); background:rgba(88,125,85,.09); }
table.luecken td, table.luecken th { white-space:nowrap; }
table.luecken tr.kurz td:nth-child(4) { font-weight:700; color:var(--sonder-ink); background:var(--sonder-bg); }
/* Reinigungsart */
.rg-pille { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; padding:.2rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem; border:2px solid var(--primary); color:var(--secondary); background:#fff; }
.rg-pille small { font-weight:400; font-size:.72rem; }
.rg-pille.z { border-style:dashed; border-color:var(--zw); color:var(--zw); background:#eef5fa; }

/* Saisonkalender und Zeiträume */
:root { --st0:#cfe0ea; --st0-ink:#1f3340; --st1:#b9cfa8; --st1-ink:#243628; --st2:#e8c35a; --st2-ink:#3d2b06; --st3:#b94a30; --st3-ink:#fff; --st0-bg:#eef4f8; --st1-bg:#edf3e7; --st2-bg:#fbf3d6; --st3-bg:#f6e1da; --akt:#6a4c93; --akt-bg:#f1eaf8; --akt-ink:#4b3670; }
button.klein { padding:.2rem .7rem; min-height:0; }
button.link { background:none; border:0; padding:0; color:var(--secondary); text-decoration:underline; font:inherit; font-size:.9rem; cursor:pointer; min-height:0; }
.sk { margin:.6rem 0 1rem; }
.sk-kopf { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.sk-kopf b { min-width:3rem; text-align:center; font-size:1.05rem; }
.sk-reihe { display:flex; gap:.6rem; align-items:center; margin-top:.35rem; }
.sk-abstand { margin-top:.8rem; }
.sk-name { flex:0 0 7.2rem; text-align:right; font-size:.78rem; color:#3f4538; }
.sk-name.akt { color:var(--akt-ink); font-weight:700; }
.sk-bahn, .sk-monate { position:relative; flex:1 1 0; min-width:0; }
.sk-bahn { height:1.9rem; border-radius:8px; overflow:hidden; }
.sk-monate { height:1rem; font-size:.7rem; color:var(--muted-text); }
.sk-monate span { position:absolute; top:0; }
.sk-seg { position:absolute; top:3px; bottom:3px; border-radius:6px; font-size:.74rem; padding:0 .4rem; display:flex; align-items:center; overflow:hidden; white-space:nowrap; box-sizing:border-box; }
.sk-seg.akt { background:var(--akt); color:#fff; }
@media (max-width:640px) { .sk-name { flex-basis:4.6rem; font-size:.66rem; } .sk-seg { font-size:.65rem; padding:0 .2rem; } }
.zr-liste { border-top:1px solid var(--border); margin-top:.4rem; }
.zr-zeile { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; padding:.75rem 0 .75rem .9rem; border-bottom:1px solid var(--border); border-left:6px solid var(--border); }
.zr-haupt { flex:1 1 15rem; min-width:0; }
.zr-haupt b { display:block; }
.zr-haupt span { display:block; font-size:.85rem; color:var(--muted-text); }
.zr-stufe { display:flex; flex-direction:column; gap:.2rem; }
.zr-label { font-size:.75rem; color:var(--muted-text); }
.st-schild { display:inline-block; padding:.25rem .7rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.st-schild.stufe-0 { background:var(--st0); color:var(--st0-ink); } .st-schild.stufe-1 { background:var(--st1); color:var(--st1-ink); }
.st-schild.stufe-2 { background:var(--st2); color:var(--st2-ink); } .st-schild.stufe-3 { background:var(--st3); color:var(--st3-ink); }
.pille { display:inline-flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:999px; padding:3px; background:var(--muted); }
.pille button { border:0; background:transparent; color:var(--text); font:inherit; font-size:.85rem; padding:.45rem .8rem; border-radius:999px; cursor:pointer; min-height:2.2rem; }
.pille button:hover { background:#e8eadc; }
.pille button[aria-pressed="true"] { font-weight:700; background:var(--primary); color:#fff; }
.pille button[aria-pressed="true"][data-st="0"] { background:var(--st0); color:var(--st0-ink); }
.pille button[aria-pressed="true"][data-st="1"] { background:var(--st1); color:var(--st1-ink); }
.pille button[aria-pressed="true"][data-st="2"] { background:var(--st2); color:var(--st2-ink); }
.pille button[aria-pressed="true"][data-st="3"] { background:var(--st3); color:var(--st3-ink); }
.dialog .zd { padding:1.2rem 1.4rem; }
.zd-daten { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.zd-wt { font-size:.82rem; color:var(--muted-text); margin-top:.2rem; min-height:1.1rem; }
.zd-nav { display:flex; align-items:center; justify-content:center; gap:.8rem; margin:.4rem 0 .6rem; }
.zd-monate { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.zd-monat { border:1px solid var(--border); border-radius:12px; padding:.7rem; }
.zd-monat h4 { margin:0 0 .5rem; font-weight:400; }
.zd-raster { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.zd-wk { text-align:center; font-size:.68rem; font-weight:700; color:var(--muted-text); }
.zd-wk.we { color:var(--primary); }
button.zd-tag { aspect-ratio:1/1; min-height:1.9rem; padding:0; display:flex; align-items:center; justify-content:center; border-radius:7px; font-size:.8rem; border:1px solid var(--border); background:var(--muted); color:var(--text); cursor:pointer; }
button.zd-tag.leer { border:0; background:transparent; cursor:default; }
button.zd-tag.we { background:var(--we-tint, #eceee0); }
button.zd-tag.drin { background:#d3e0c6; border-color:#d3e0c6; }
button.zd-tag.rand { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:700; }
button.zd-tag:hover:not(.leer) { border-color:var(--primary); }
.zd-legende { display:flex; flex-wrap:wrap; gap:1rem; margin:.6rem 0; font-size:.75rem; color:var(--muted-text); }
.zd-legende span { display:inline-flex; align-items:center; gap:.35rem; }
.zd-legende i { width:.9rem; height:.9rem; border-radius:4px; border:1px solid var(--border); background:var(--muted); display:inline-block; }
.zd-legende i.we { background:var(--we-tint, #eceee0); } .zd-legende i.sel { background:var(--primary); border-color:var(--primary); }
.zd-legende i.andere { box-shadow:inset 0 -4px 0 var(--st2); }
.zd-schritt { display:inline-flex; align-items:center; gap:.4rem; }
.zd-schritt input { width:5rem; text-align:center; }
.zd-schritt button { width:2.6rem; padding:0; font-size:1.2rem; }
.zd-tagkopf { display:flex; justify-content:space-between; align-items:baseline; margin-top:1rem; }
.zd-tage { display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; text-align:center; }
.zd-tagwahl { display:flex; flex-direction:column; align-items:center; gap:.3rem; font-size:.8rem; margin:0; }
.zd-tagwahl input { width:auto; }
.zd-fuss { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; align-items:center; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border); }
@media (max-width:640px) { .zd-monate, .zd-daten { grid-template-columns:1fr; } }
.zw { background:var(--muted); border-radius:12px; padding:1rem; margin:.6rem 0 1rem; }
.zw textarea { max-width:100%; }
.zw-zeile { display:flex; align-items:flex-start; gap:.6rem; font-weight:400; margin:.2rem 0; }
.zw-zeile input { margin-top:.25rem; }
button.zweit[aria-pressed="true"] { background:var(--primary-dunkel); color:#fff; }

/* Preise je Unterkunft */
.hp-zeile { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--border); }
.hp-name { flex:1 1 16rem; }
.hp-felder { display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; }
.hp-einheit { display:inline-flex; align-items:center; gap:.35rem; }
.hp-einheit[hidden] { display:none; }
.hp-einheit input { width:7.5rem; }
.hp-tabelle td { vertical-align:middle; }
.hp-tabelle td .hinweis { margin:0; }

/* Saisonstreifen im Belegungskalender */
.kal-saison { position:absolute; left:0; right:0; bottom:0; height:6px; z-index:3; pointer-events:none; }
.kal-saison i { position:absolute; display:block; pointer-events:auto; }
.kal-saison i.kal-st { bottom:0; height:4px; }
.kal-saison i.kal-akt { bottom:4px; height:2px; background:var(--akt); }
.kal.mit-saison .kal-rg { bottom:7px; }
.legendenpunkt i.saison-punkt { clip-path:none; width:1.4rem; height:.5rem; border-radius:2px; }

/* Reinigung vorgemerkt */
.kal-plan { position:absolute; bottom:8px; transform:translateX(-50%); z-index:4; width:.8rem; height:1.5rem; padding:0; border:0; border-left:2px dashed var(--zw); border-right:2px dashed var(--zw); border-radius:0; background:rgba(47,111,159,.12); cursor:pointer; min-height:0; }
.kal-plan:hover { background:rgba(47,111,159,.3); }
.kal.eng .kal-plan { width:.5rem; height:1.1rem; }
.legendenpunkt i.plan-strich { clip-path:none; width:.5rem; height:1.1rem; border-left:2px dashed var(--zw); border-right:2px dashed var(--zw); background:rgba(47,111,159,.12); }

/* Codebeispiele (Buchungskalender einbinden) */
pre.code { margin:.4rem 0 1rem; padding:.7rem .9rem; background:var(--muted); border:1px solid var(--border); border-radius:var(--radius-feld); font:13px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-all; user-select:all; }


/* Raster: Karten nebeneinander statt untereinander (PC); auf schmalen Fenstern wieder eine Spalte */
.raster { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap:1.1rem; align-items:start; margin-bottom:1.1rem; }
.raster > .karte { margin-bottom:0; }
.raster.drei { grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.raster > .voll { grid-column:1 / -1; }
.raster > .karte input, .raster > .karte select { max-width:100%; }
.raster > .karte textarea { max-width:100%; }
.segment.reiter { margin:0 0 1.1rem; flex-wrap:wrap; }

/* Kalenderabgleich: eine Zeile je Unterkunft */
table.abgleich { width:100%; border-collapse:collapse; }
table.abgleich th, table.abgleich td { text-align:left; vertical-align:top; padding:.7rem .6rem; border-bottom:1px solid var(--border); }
table.abgleich td:first-child { min-width:10rem; }
table.abgleich td .hinweis { margin:0 0 .4rem; }
table.abgleich td input[type=text] { max-width:100%; }
table.abgleich td .reihe { margin-top:.4rem; }

/* Textbausteine: Platzhalter-Knöpfe und Vorschau */
.chips { display:flex; flex-wrap:wrap; gap:.35rem; }
button.chip { padding:.15rem .5rem; font-size:.8rem; font-weight:500; background:var(--muted); color:var(--secondary); border:1px solid var(--border); font-family:ui-monospace, monospace; }
button.chip:hover { background:var(--surface); }
.karte.vorschau { background:var(--muted); }
.mailvorschau { background:#fff; border:1px solid var(--border); border-radius:var(--radius-feld); overflow:hidden; }
.mailkopf { padding:.7rem .9rem; border-bottom:1px solid var(--border); background:#fafaf6; font-size:.88rem; }
.mailkopf > div { display:flex; gap:.6rem; padding:.1rem 0; }
.mailkopf span { flex:0 0 3.6rem; color:var(--muted-text); }
.mailtext { padding:.9rem; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; }
.rechnungsvorschau { background:#fff; border:1px solid var(--border); border-radius:var(--radius-feld); padding:.9rem; }
.rv-summe { display:flex; justify-content:space-between; padding-bottom:.5rem; border-bottom:1px solid var(--border); margin-bottom:.6rem; }
.rv-text { margin:.4rem 0; white-space:pre-wrap; font-size:.92rem; }

/* Legende einklappbar */
details.legende-box > summary { font-weight:700; font-size:1.05rem; cursor:pointer; margin:-.1rem 0 .1rem; }
details.legende-box[open] > summary { margin-bottom:.8rem; }

/* Handy (bis 700 px): nur das Wichtigste, nichts läuft aus dem Bildschirm */
@media (max-width:700px) {
  .nur-pc { display:none !important; }
  .kal-werkzeuge { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; }
  .kal-werkzeuge .segment { align-self:flex-start; }
  .kal-mitte { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
  .kal-mitte select { grid-column:1 / -1; grid-row:1; width:100%; }
  .kal-rechts-knoepfe { display:flex; flex-wrap:wrap; gap:.4rem; }
  .kal-werkzeuge button { padding:.55rem .7rem; }

  /* Lücken als Karten statt Tabelle */
  table.luecken, table.luecken tbody { display:block; }
  table.luecken thead { display:none; }
  table.luecken tr { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.15rem .6rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
  table.luecken td { display:block; padding:0; border:0; }
  table.luecken td.l-haus { grid-column:1 / -1; font-weight:700; }
  table.luecken td[data-l]::before { content:attr(data-l); display:block; font-size:.72rem; color:var(--muted-text); }
  table.luecken td:not([data-l]):not(.l-haus) { grid-column:1 / -1; }
  table.luecken td:empty { display:none; }
  table.luecken td button { margin:.3rem .4rem 0 0; }
}
@media (max-width:700px) {
  .scroll td button { padding:.4rem .6rem; font-size:.85rem; white-space:nowrap; }
  .scroll th, .scroll td { padding-left:.45rem; padding-right:.45rem; }
  .dialog-hintergrund { padding:.5rem; align-items:flex-start; }
  .dialog { max-height:calc(100vh - 1rem); overflow-y:auto; }
  .dialog.klein, .dialog.gross { max-width:100%; }
}

/* Unterkünfte: Liste und Bearbeiten */
table.u-liste tr.klick { cursor:pointer; }
table.u-liste tr.klick:hover td { background:var(--muted); }
table.u-liste tr.inaktiv td { opacity:.55; }
td.u-mini { width:5.5rem; padding-right:0; }
td.u-mini img { display:block; width:4.8rem; height:3.2rem; object-fit:cover; border-radius:.35rem; }
.u-stand { display:inline-block; padding:.05rem .45rem; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--muted); color:var(--muted-text); }
.u-stand.ok { background:#dfeadb; color:#2c5a2c; }
.u-kopf { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; }
.u-kopf h2 { margin:0; }
.galerie { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:1rem; margin-bottom:1rem; }
.gal-zelle { border:1px solid var(--border); border-radius:var(--radius-feld); padding:.6rem; background:#fff; display:flex; flex-direction:column; gap:.5rem; }
.gal-zelle img { width:100%; height:9.5rem; object-fit:cover; border-radius:.35rem; background:var(--muted); }
.gal-text { display:flex; flex-direction:column; gap:.35rem; }
.gal-text[hidden] { display:none; }
.u-bild + .gal-text { margin:.6rem 0; max-width:26rem; }
.gal-text input { font-size:.85rem; padding:.4rem .5rem; max-width:none; }
.gal-zelle .reihe { margin-top:0; }
.gal-zelle button { padding:.35rem .6rem; }
.faq-zeile { border:1px solid var(--border); border-radius:var(--radius-feld); padding:.7rem; margin-bottom:.7rem; display:flex; flex-direction:column; gap:.4rem; }
.faq-zeile input, .faq-zeile textarea { max-width:none; }
.raster > .karte textarea { max-width:100%; }
@media (max-width:700px) {
  td.u-mini { display:none; }
  table.u-liste th:first-child { display:none; }
  .segment.reiter { display:flex; overflow-x:auto; flex-wrap:nowrap; border-radius:var(--radius-feld); max-width:100%; }
  .segment.reiter button { flex:none; white-space:nowrap; }
}
table.u-liste td:nth-child(6) { white-space:nowrap; }
@media (max-width:700px) {
  table.u-liste th:nth-child(4), table.u-liste td:nth-child(4), table.u-liste th:nth-child(5), table.u-liste td:nth-child(5) { display:none; }
}
.tipp-vorschau { height: 3.2rem; width: auto; border-radius: .35rem; }

/* Ausstattung zum Anhaken */
.ausw { display: grid; gap: .6rem; }
.ausw-gruppe { border: 1px solid var(--rand, #d9d9d0); border-radius: 10px; padding: .6rem .9rem; background: #fff; }
.ausw-gruppe summary { cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.ausw-zahl { font-weight: 400; opacity: .6; }
.ausw-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .9rem; margin: .7rem 0; }
.ausw-punkt { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.ausw-punkt input { width: auto; margin: 0; }
.ausw-eigene { display: block; font-size: .85rem; }
.ausw-gruppe.frei { display: grid; gap: .5rem; }

/* Schriftvorschau (Design) */
.schrift-probe { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; background: #fff; margin: .8rem 0; }
.schrift-probe-kopf { margin: 0 0 .4rem; font-size: 1.5rem; }
.schrift-probe-text { margin: 0; }

/* Schriften für die Vorschau im Design (gleiche Dateien wie die Homepage) */
@font-face{font-family:"S-inter";font-weight:400;font-display:swap;src:url(../urlaub/schriften/inter-400.woff2) format("woff2")}
@font-face{font-family:"S-inter";font-weight:700;font-display:swap;src:url(../urlaub/schriften/inter-700.woff2) format("woff2")}
@font-face{font-family:"S-open-sans";font-weight:400;font-display:swap;src:url(../urlaub/schriften/open-sans-400.woff2) format("woff2")}
@font-face{font-family:"S-open-sans";font-weight:700;font-display:swap;src:url(../urlaub/schriften/open-sans-700.woff2) format("woff2")}
@font-face{font-family:"S-lato";font-weight:400;font-display:swap;src:url(../urlaub/schriften/lato-400.woff2) format("woff2")}
@font-face{font-family:"S-lato";font-weight:700;font-display:swap;src:url(../urlaub/schriften/lato-700.woff2) format("woff2")}
@font-face{font-family:"S-montserrat";font-weight:400;font-display:swap;src:url(../urlaub/schriften/montserrat-400.woff2) format("woff2")}
@font-face{font-family:"S-montserrat";font-weight:700;font-display:swap;src:url(../urlaub/schriften/montserrat-700.woff2) format("woff2")}
@font-face{font-family:"S-poppins";font-weight:400;font-display:swap;src:url(../urlaub/schriften/poppins-400.woff2) format("woff2")}
@font-face{font-family:"S-poppins";font-weight:700;font-display:swap;src:url(../urlaub/schriften/poppins-700.woff2) format("woff2")}
@font-face{font-family:"S-nunito";font-weight:400;font-display:swap;src:url(../urlaub/schriften/nunito-400.woff2) format("woff2")}
@font-face{font-family:"S-nunito";font-weight:700;font-display:swap;src:url(../urlaub/schriften/nunito-700.woff2) format("woff2")}
@font-face{font-family:"S-source-sans-3";font-weight:400;font-display:swap;src:url(../urlaub/schriften/source-sans-3-400.woff2) format("woff2")}
@font-face{font-family:"S-source-sans-3";font-weight:700;font-display:swap;src:url(../urlaub/schriften/source-sans-3-700.woff2) format("woff2")}
@font-face{font-family:"S-merriweather";font-weight:400;font-display:swap;src:url(../urlaub/schriften/merriweather-400.woff2) format("woff2")}
@font-face{font-family:"S-merriweather";font-weight:700;font-display:swap;src:url(../urlaub/schriften/merriweather-700.woff2) format("woff2")}
@font-face{font-family:"S-playfair-display";font-weight:400;font-display:swap;src:url(../urlaub/schriften/playfair-display-400.woff2) format("woff2")}
@font-face{font-family:"S-playfair-display";font-weight:700;font-display:swap;src:url(../urlaub/schriften/playfair-display-700.woff2) format("woff2")}

.recht-zeile { border-top: 1px solid var(--border); padding: .6rem 0; word-break: break-all; }
.recht-zeile .reihe { margin-top: .3rem; align-items: center; }
.hinweis-karte { grid-column:1 / -1; background:var(--muted); border-left:6px solid var(--primary); }
.hinweis-karte p { margin:.2rem 0; }
.hinweis-karte button { margin-left:.4rem; }
.zr-abw { margin-top:.25rem; }
.zr-abw.ok { color:var(--muted-text); }
.zr-chip { display:inline-block; background:#fff3cd; border:1px solid #e0c36a; color:#5c4a00; border-radius:999px; padding:.05rem .6rem; margin:.15rem .3rem .15rem 0; font-size:.8rem; }
.zr-eigen { font-size:.75rem; color:#8a5a00; font-weight:600; }
.rahmen.ohne-logo .logo-kachel { display:none; }

.probe { max-width:60rem; }
.probe-gitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.8rem 1.2rem; margin:.6rem 0; }
.probe-gitter label { display:block; font-weight:600; font-size:.9rem; }
.probe-gitter input, .probe-gitter select { display:block; width:100%; margin-top:.25rem; }
.probe-haeuser { display:grid; gap:.5rem; }
.probe-haus { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem; padding:.6rem .9rem; border:1px solid var(--border); border-radius:12px; background:var(--muted); }
.probe-haus > label:first-child { flex:1 1 12rem; margin:0; }
.probe-klein { display:flex; align-items:center; gap:.5rem; margin:0; font-size:.9rem; }
.probe-klein input { width:4.5rem; margin:0; }
.probe-summe { font-size:2rem; font-weight:700; margin:.2rem 0; color:var(--primary); }

.unterbereich { border-top:1px solid var(--border); margin-top:1rem; padding-top:.6rem; }
.hv-vorschau { margin:.4rem 0 .8rem; }
.hv-balken { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); border-radius:6px; padding:.45rem .8rem; min-width:14rem; }
.hv-balken.hv-unten { box-shadow:inset 0 -5px 0 var(--holidu); }
.hv-balken.hv-oben { box-shadow:inset 0 5px 0 var(--holidu); }
.hv-balken.hv-links { box-shadow:inset 5px 0 0 var(--holidu); }
.hv-balken.hv-rechts { box-shadow:inset -5px 0 0 var(--holidu); }

/* Zustand der Homepage: kleines Feld oben in der Seitenleiste */
#hpstatus:empty { display:none; }
.statuszeile { display:flex; gap:.4rem; align-items:stretch; margin:.2rem 0 .1rem; }
.statuszeile #hpstatus { flex:1; min-width:0; margin:0; }
.suchknopf { flex:none; width:2.4rem; display:flex; align-items:center; justify-content:center; padding:0; border-radius:var(--radius-knopf); background:transparent; color:inherit; border:1px solid color-mix(in srgb, var(--secondary) 55%, white); cursor:pointer; }
.suchknopf[hidden] { display:none; }
.suchknopf:hover { background:rgba(255,255,255,.12); }
.suche-feld { width:100%; font-size:1.05rem; padding:.7rem .9rem; }
.suche-gruppe { margin:1rem 0 .3rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-text); }
.suche-treffer { display:block; width:100%; text-align:left; background:transparent; color:inherit; border:0; border-radius:.5rem; padding:.5rem .6rem; font:inherit; cursor:pointer; }
.suche-treffer small { display:block; color:var(--muted-text); }
.suche-treffer:hover, .suche-treffer:focus-visible { background:var(--muted); }
#hpstatus { margin:.2rem 0 .1rem; }
.hpstatus { display:block; width:100%; text-align:left; font:inherit; font-size:.82rem; line-height:1.3; padding:.4rem .6rem; border-radius:var(--radius-knopf); border:1px solid transparent; cursor:default; }
.hpstatus b { display:block; font-weight:600; }
.hpstatus.klick { cursor:pointer; }
.hpstatus.wartung { background:var(--sonder-bg); color:var(--sonder-ink); border-color:var(--sonder); }
.hpstatus.live { background:#e3f0df; color:#24401f; border-color:#9cc590; }
.zustandswahl { display:grid; gap:.6rem; margin:.6rem 0; }
.zustand { font-weight:400; display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .85rem; border:1px solid var(--border); border-radius:var(--radius); background:#fff; cursor:pointer; }
.zustand.gewaehlt { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.zustand input { width:auto; flex:none; margin:.2rem 0 0; }
.zustand span { flex:1; }
.zustand b { display:block; font-weight:600; }
.zustand small { display:block; color:var(--muted-text); font-weight:400; font-size:.88rem; }
.testlink { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.testlink input { flex:1 1 20rem; font-family:ui-monospace, monospace; font-size:.85rem; }

.wartung-raster { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:.8rem; }
.wartung-vorschau { width:100%; height:26rem; border:1px solid var(--border); border-radius:var(--radius); background:#2f5d78; }
@media (min-width:1100px) { .wartung-raster { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .wartung-vorschau { height:32rem; } }
.testlink-block { margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--border); }
.testlink-block h3 { margin-top:0; }

/* Buchungsdialog (Übersicht und Bearbeiten) */
.bk [hidden], .bk [hidden].g { display:none !important; }
.bk .g { display:grid; gap:.2rem 1rem; }
.bk .g2 { grid-template-columns:1fr 1fr; } .bk .g3 { grid-template-columns:repeat(3, 1fr); } .bk .g4 { grid-template-columns:repeat(4, 1fr); }
.bk .g input, .bk .g select, .bk .g textarea { max-width:100%; }
.bk-kopf { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start; margin-bottom:.8rem; }
.bk-kopf h2 { margin:.4rem 0 .2rem; font-size:1.4rem; }
.bk-kopf img { width:15rem; height:8rem; object-fit:cover; border-radius:10px; display:block; }
.bk-meta { color:var(--muted-text); }
.bk-badge { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:6px; padding:.2rem .5rem; }
.bk-badge.ok { background:#e3f3e6; color:#1b6b2f; } .bk-badge.warn { background:#fff1d6; color:#8a5a00; } .bk-badge.aus { background:#fbe3e3; color:#9b1c1c; }
.bk-zeit { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; border:1px solid var(--border); border-radius:12px; padding:.8rem 1.1rem; }
.bk-zeit small { display:block; color:var(--muted-text); font-weight:600; }
.bk-zeit b { font-size:1.15rem; } .bk-zeit input[type=date] { max-width:11rem; }
.bk-wt { display:block; color:var(--muted-text); font-size:.9rem; min-height:1.2em; }
.bk-pfeil { font-size:1.4rem; color:var(--muted-text); }
.bk-naechte { margin-left:auto; background:var(--muted); border-radius:999px; padding:.3rem .8rem; font-weight:600; }
.bk-grp { margin:1.1rem 0 .2rem; padding-top:.7rem; border-top:1px solid var(--border); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-text); font-weight:700; }
.bk-zeilen { margin-top:.6rem; }
.bk-zeile { display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--border); }
.bk-zeile > span { color:var(--muted-text); font-weight:600; }
@media (max-width:700px) { .bk-kopf { grid-template-columns:1fr; } .bk-kopf img { width:100%; } .bk .g3, .bk .g4 { grid-template-columns:1fr 1fr; } .bk-zeile { grid-template-columns:1fr; gap:0; } }
.bk-gast { position:relative; }
.bk-liste { position:absolute; z-index:5; left:0; right:0; top:100%; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.15); padding:.3rem; }
.bk-treffer { display:block; width:100%; text-align:left; background:none; border:0; color:inherit; font-weight:400; padding:.45rem .6rem; border-radius:6px; cursor:pointer; }
.bk-treffer:hover { background:var(--muted); }
.bk-neuknopf { font-weight:700; color:var(--primary); }
.bk-neu { padding:.6rem; }
.bk-zeit input[type=time] { max-width:8rem; }
textarea.recht-text { max-width:100%; }
textarea[readonly] { background:var(--muted); }
.bk-wt.bk-leer { font-style: italic; opacity: .7; }

/* Startseite: nächste 7 Tage, nach Tagen gegliedert */
.rs-gruppe + .rs-gruppe { margin-top:1.1rem; }
.rs-tag { font-weight:700; padding:.2rem .2rem .45rem; display:flex; align-items:center; gap:.6rem; }
.rs-heute { background:var(--primary); color:#fff; font-size:.75rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; }
.rs-zeile { display:grid; grid-template-columns:9rem 1fr 1fr; gap:1rem; align-items:center; background:var(--muted); border-radius:10px; padding:.7rem 1rem; margin-bottom:.4rem; min-height:3.6rem; }
.rs-art { font-weight:700; display:flex; align-items:center; gap:.55rem; }
.rs-pfeil { font-size:1.25rem; line-height:1; color:var(--primary-dunkel); }
.rs-ab .rs-pfeil { color:#9a6a2a; }
.rs-gast small { display:block; color:var(--muted-text); font-weight:400; }
@media (max-width:640px) { .rs-zeile { grid-template-columns:1fr; gap:.15rem; } }
.rs-art small { display:block; color:var(--muted-text); font-weight:400; font-size:.85rem; }

/* Seitenleiste: wenige Hauptpunkte, größere Trefferfläche */
.menue button { padding:.6rem .85rem; }

/* Bearbeiten-Schutz */
.schutzleiste { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; background:var(--muted); border:1px solid var(--border); border-radius:var(--radius-feld); padding:.55rem .9rem; margin:0 0 1rem; }
.schutzleiste.offen { background:#fff7e0; border-color:#e3cf94; }
.schutzleiste span { color:var(--muted-text); }
input:disabled, select:disabled, textarea:disabled { background:var(--muted); color:var(--text); opacity:.85; cursor:not-allowed; }

/* Rechnungsdialog: für den PC ausgelegt, Felder nur so breit wie nötig */
.rg-spalten { display:grid; grid-template-columns:1.35fr 1fr; gap:0 2rem; }
.rg-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr)); gap:0 1rem; }
.rg-feld.breit { grid-column:1 / -1; }
.rg-raster input, .rg-raster select { max-width:none; }
.rg-spalten textarea, .rg-spalten input[type=text] { max-width:none; }
@media (max-width:820px) { .rg-spalten { grid-template-columns:1fr; } }
.rg-pos { position:relative; display:grid; grid-template-columns:1fr 6rem 9rem 6rem; gap:0 .8rem; align-items:end; margin:.5rem 0; padding-right:3rem; }
.rg-pos .rg-weg { position:absolute; top:.45rem; right:.5rem; width:1.9rem; height:1.9rem; padding:0; line-height:1; font-size:1rem; border-radius:50%; background:transparent; color:var(--muted-text); border:1px solid transparent; box-shadow:none; }
.rg-pos .rg-weg:hover, .rg-pos .rg-weg:focus-visible { background:color-mix(in srgb, var(--danger) 12%, white); color:var(--danger); border-color:currentColor; }
.rg-pos textarea { max-width:none; }
.rg-pos .kurz, .rg-pos input { max-width:none; }
@media (max-width:820px) { .rg-pos { grid-template-columns:1fr 1fr; } .rg-pos textarea { grid-column:1 / -1; } }
.zz-zeile { display:grid; grid-template-columns:1fr 4.5rem auto; gap:.4rem .6rem; align-items:center; margin:.5rem 0; }
.zz-zeile select, .zz-zeile input { max-width:none; }
.zz-zeile .hinweis { grid-column:1 / 3; margin:0; }

/* Untermenü unter dem aktiven Hauptpunkt */
.menue button.unter { margin-left:.9rem; width:calc(100% - .9rem); padding:.32rem .75rem; font-size:.92rem; color:color-mix(in srgb, #fff 82%, var(--secondary)); border-left:2px solid color-mix(in srgb, var(--secondary) 55%, white); border-radius:0 var(--radius-knopf) var(--radius-knopf) 0; }
.menue button.unter.aktiv { background:transparent; color:#fff; font-weight:600; border-left-color:var(--accent); }
.menue button.unter:hover { background:color-mix(in srgb, var(--secondary) 80%, white); }
.gilt-liste { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; }
.gilt-liste .gilt { display:inline-flex; align-items:center; gap:.4rem; margin:0; font-weight:400; }
.gilt-box { margin-top:.4rem; }

/* Handy-Ansicht der Belegung */
.hy-kopf { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.hy-umschalter { display:flex; background:var(--surface); border-radius:999px; padding:.2rem; }
.hy-umschalter button { background:transparent; color:var(--secondary); border:0; border-radius:999px; padding:.5rem .9rem; font-weight:600; min-height:2.6rem; }
.hy-umschalter button.gewaehlt { background:var(--primary); color:#fff; }
button.klein { padding:.4rem .7rem; font-size:.85rem; min-height:2.4rem; }
.hy-woche { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; font-weight:600; color:var(--secondary); }
.hy-woche button { min-width:2.8rem; min-height:2.8rem; font-size:1.3rem; padding:0; }
.hy-streifen { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; margin-bottom:.8rem; }
.hy-tag { display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.45rem 0; min-height:3.2rem; background:#fff; color:var(--secondary); border:1px solid var(--border); border-radius:var(--radius-knopf); }
.hy-tag small { font-size:.7rem; color:var(--muted-text); }
.hy-tag strong { font-size:1.05rem; }
.hy-tag.heute { border-color:var(--primary); border-width:2px; }
.hy-tag.gewaehlt { background:var(--primary); color:#fff; border-color:var(--primary); }
.hy-tag.gewaehlt small { color:#fff; }
.hy-titel { margin:.4rem 0 .6rem; }
.hy-liste { display:flex; flex-direction:column; gap:.55rem; margin-top:.6rem; }
.hy-haus { background:#fff; border:1px solid var(--border); border-left:6px solid var(--primary); border-radius:var(--radius-knopf); padding:.65rem .8rem; }
.hy-haus.belegt { border-left-color:var(--zw, #2f6f9f); cursor:pointer; }
.hy-haus.gesperrt { border-left-color:var(--danger); }
.hy-haus.frei { border-left-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, #fff); }
.hy-name { font-weight:700; color:var(--secondary); }
.hy-haupt { font-size:1rem; }
.hy-neben { font-size:.88rem; color:var(--muted-text); }
.hy-datum { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.6rem; }
.hy-datum label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--muted-text); }
.hy-datum input { width:100%; min-height:2.8rem; }
.hy-start { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.hy-start button { flex:1 1 10rem; min-height:3rem; }

/* Buchungsliste: Reiter, Suche, Monatsgruppen, Karten */
.bl-kopf { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.bl-tabs { display:flex; flex-wrap:wrap; gap:.2rem; }
.bl-tab { background:transparent; color:var(--secondary); border:0; border-bottom:3px solid transparent; border-radius:0; padding:.7rem .9rem; font-weight:600; font-size:1rem; }
.bl-tab small { color:var(--muted-text); font-weight:500; }
.bl-tab.gewaehlt { color:var(--primary-dunkel); border-bottom-color:var(--primary); }
.bl-suche { display:flex; gap:.5rem; align-items:center; padding-bottom:.4rem; }
.bl-suchfeld { min-width:15rem; max-width:100%; }
.bl-filter { margin-bottom:1rem; padding:.8rem 1rem; }
.bl-filter[hidden] { display:none; }
.bl-monat { margin:1.4rem 0 .6rem; font-size:1.1rem; color:var(--muted-text); font-weight:600; }
.bl-karte { display:grid; grid-template-columns:11rem 1.6fr 1fr 8rem; align-items:stretch; background:#fff; border:1px solid var(--border); border-radius:var(--radius-karte); overflow:hidden; margin-bottom:.6rem; cursor:pointer; }
.bl-karte:hover { border-color:var(--primary); box-shadow:0 1px 6px rgba(0,0,0,.08); }
.bl-karte.storniert { opacity:.65; }
.bl-bild { background:var(--surface); display:flex; align-items:center; justify-content:center; min-height:6.5rem; }
.bl-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.bl-ohnebild { font-weight:700; color:var(--secondary); font-size:1.4rem; }
.bl-haupt, .bl-mitte, .bl-rechts { padding:.8rem 1rem; display:flex; flex-direction:column; justify-content:center; gap:.15rem; }
.bl-mitte { border-left:1px solid var(--border); }
.bl-rechts { align-items:flex-end; font-size:1.1rem; }
.bl-name { font-weight:700; font-size:1.1rem; color:var(--secondary); display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.bl-meta { font-size:.9rem; color:var(--muted-text); }
.bl-chip { font-size:.72rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; background:var(--sonder-bg); color:var(--sonder-ink); border:1px solid var(--sonder); }
.bl-chip.storno { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
@media (max-width:720px) {
  .bl-karte { grid-template-columns:5.5rem 1fr; }
  .bl-mitte { grid-column:2; border-left:0; padding-top:0; }
  .bl-rechts { grid-column:2; align-items:flex-start; padding-top:0; }
  .bl-bild { grid-row:1 / span 3; }
  .bl-tabs { flex-wrap:nowrap; overflow-x:auto; width:100%; }
  .bl-tab { padding:.6rem .55rem; font-size:.9rem; white-space:nowrap; }
  .bl-suchfeld { min-width:0; width:100%; }
  .bl-suche { width:100%; }
  .bl-suche input { flex:1; }
}

.zl-liste { max-height:16rem; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-feld); padding:.4rem .7rem; margin:.4rem 0 .8rem; }
.zl-liste .reihe.wahl { padding:.15rem 0; }
.bl-chip.bezahlt { background:var(--accent); color:var(--secondary); }

/* Wahlknöpfe (Chips) mit verstecktem Kästchen */
.chip-reihe { display:flex; flex-wrap:wrap; gap:.4rem; margin:.3rem 0 .6rem; }
.chip-wahl { margin:0; font-weight:400; cursor:pointer; }
.chip-wahl input { position:absolute; opacity:0; width:1px; height:1px; }
.chip-wahl span { display:inline-block; padding:.35rem .8rem; border:1px solid var(--border); border-radius:999px; background:#fff; color:inherit; font-size:.95rem; }
.chip-wahl input:checked + span { background:var(--primary, #5a7f5a); border-color:var(--primary, #5a7f5a); color:#fff; }
.chip-wahl input:focus-visible + span { outline:2px solid var(--primary, #5a7f5a); outline-offset:2px; }
/* Putztermin ohne Unterkunft: gepunktete orange Linie durch alle Unterkunftszeilen, „P“ im Tageskopf */
.kal-putzlinie { position:absolute; top:calc(var(--monat-h) + var(--tag-h)); bottom:0; width:12px; transform:translateX(-50%); z-index:3; cursor:help; }
.kal-putzlinie::before { content:''; position:absolute; left:50%; top:0; bottom:0; border-left:3px dotted #c0762a; transform:translateX(-1.5px); }
.kal-putzlinie:hover::before { border-left-style:solid; }
.kal-tag .putz-p { font-size:.62rem; font-weight:700; line-height:1; color:#fff; background:#c0762a; border-radius:3px; padding:.05rem .22rem; }
.legendenpunkt i.putz-linie { clip-path:none; width:0; height:1.1rem; border-left:3px dotted #c0762a; background:none; }

/* Gästeliste: Zeile öffnet die Gästeakte */
tr.klickzeile { cursor:pointer; }
tr.klickzeile:hover td, tr.klickzeile:focus td { background:var(--muted); }

.putz-mangel-eintrag { margin: .75rem 0; padding-top: .5rem; border-top: 1px solid var(--border); }
.putz-mangel-eintrag textarea { width: 100%; }

/* Zwei-Faktor-Anmeldung */
.zf-qr { width: 12rem; max-width: 100%; margin: .5rem 0; border: 1px solid #ccc; }
.zf-qr svg { display: block; width: 100%; height: auto; }
.zf-schluessel { font-family: ui-monospace, monospace; letter-spacing: .08em; word-break: break-all; }
.zf-codes { font-family: ui-monospace, monospace; font-size: 1.1rem; line-height: 1.7; background: #f4f4f4; padding: .75rem 1rem; border-radius: 6px; user-select: all; }

/* Rechnungsartikel */
.rg-satz select { width:auto; }
.artikel-liste { display:grid; gap:.5rem; margin:.5rem 0 1rem; }
.artikel-wahl { display:flex; justify-content:space-between; gap:1rem; text-align:left; }
.artikel-wahl span { color:var(--muted-text); }

/* WhatsApp-Vorschau (Textbausteine) */
.wavorschau { margin:.5rem 0; }
.wavorschau small { color:var(--muted-text); }
.wavorschau .watext { white-space:pre-wrap; background:#dcf8c6; color:#1d2a1a; border-radius:12px 12px 12px 3px; padding:.6rem .8rem; max-width:32rem; box-shadow:0 1px 2px rgba(0,0,0,.12); }
#wa_text { max-width:none; width:100%; }