:root {
  --gruen: #1e4a38;
  --papier: #f3efe6;
  --karte: #fffdf8;
  --tinte: #1d1a16;
  --grau: #5e584f;
  --linie: #ddd4c6;
  --rot: #8d2e2e;
  --ui-seite-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-seite-size: 17px;
  --ui-kopf-bg: var(--gruen);
  --ui-kopf-fg: #f7f4ee;
  --ui-marke-fg: #f7f4ee;
  --ui-marke-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-marke-size: 1.35rem;
  --ui-marke-weight: 400;
  --ui-kopf-nav-fg: #f7f4ee;
  --ui-kopf-nav-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-kopf-nav-size: 17px;
  --ui-kopf-nav-weight: 400;
  --ui-admin-menue-bg: transparent;
  --ui-admin-menue-fg: #f7f4ee;
  --ui-admin-menue-hover-bg: rgba(255, 255, 255, 0.16);
  --ui-admin-menue-hover-fg: #fff;
  --ui-admin-menue-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-admin-menue-size: 15px;
  --ui-admin-menue-weight: 700;
  --ui-admin-drop-bg: var(--karte);
  --ui-admin-drop-fg: var(--tinte);
  --ui-admin-drop-hover-bg: #e7f0eb;
  --ui-admin-drop-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-admin-drop-size: 16px;
  --ui-admin-drop-weight: 400;
  --ui-admin-session-fg: #f7f4ee;
  --ui-admin-session-size: 0.85rem;
  --ui-admin-session-weight: 400;
  --ui-h1-fg: var(--tinte);
  --ui-h1-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-h1-size: 2rem;
  --ui-h1-weight: 700;
  --ui-h2-fg: var(--tinte);
  --ui-h2-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-h2-size: 1.5rem;
  --ui-h2-weight: 700;
  --ui-h3-fg: var(--tinte);
  --ui-h3-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-h3-size: 1.15rem;
  --ui-h3-weight: 700;
  --ui-btn-bg: var(--gruen);
  --ui-btn-fg: #fff;
  --ui-btn-font: inherit;
  --ui-btn-size: inherit;
  --ui-btn-weight: 400;
  --ui-btn2-bg: transparent;
  --ui-btn2-fg: var(--gruen);
  --ui-btn2-border: var(--gruen);
  --ui-btn2-font: inherit;
  --ui-btn2-size: inherit;
  --ui-btn2-weight: 400;
  --ui-link-fg: var(--gruen);
  --ui-link-weight: 400;
  --ui-karte-border: var(--linie);
  --ui-input-bg: #fff;
  --ui-input-fg: var(--tinte);
  --ui-input-border: var(--linie);
  --ui-input-size: inherit;
  --ui-output-bg: #ebe5e0;
  --ui-label-fg: var(--tinte);
  --ui-label-size: inherit;
  --ui-label-weight: 400;
  --ui-table-bg: var(--karte);
  --ui-table-head-bg: var(--karte);
  --ui-table-head-fg: var(--tinte);
  --ui-table-fg: var(--tinte);
  --ui-table-head-weight: 700;
  --ui-blitz-bg: #e7f0eb;
  --ui-blitz-fg: var(--tinte);
  --ui-fehler-bg: #f8ecec;
  --ui-fehler-fg: var(--rot);
  --ui-kunde-nav-fg: var(--gruen);
  --ui-kunde-nav-aktiv-fg: var(--gruen);
  --ui-kunde-nav-size: inherit;
  --ui-kunde-nav-aktiv-weight: 700;
  --ui-fuss-bg: var(--gruen);
  --ui-fuss-fg: #f7f4ee;
  --ui-fuss-font: Tahoma, Verdana, Geneva, sans-serif;
  --ui-fuss-size: 0.92rem;
  --ui-fuss-weight: 400;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: var(--ui-seite-size)/1.5 var(--ui-seite-font);
}
body.art-embed {
  background: transparent;
}
body.art-embed .rahmen,
body.art-embed main {
  max-width: none;
  margin: 0;
  padding: 0 0.4rem 0.4rem;
}
body.art-embed .kopf,
body.art-embed .fuss {
  display: none !important;
}
body.art-embed main,
main:has(> .kalenderblatt) {
  padding-top: 0 !important;
}
a { color: var(--ui-link-fg); font-weight: var(--ui-link-weight); }
h1, h2, h3 { line-height: 1.2; }
h1 {
  color: var(--ui-h1-fg);
  font-family: var(--ui-h1-font);
  font-size: var(--ui-h1-size);
  font-weight: var(--ui-h1-weight);
}
h2 {
  color: var(--ui-h2-fg);
  font-family: var(--ui-h2-font);
  font-size: var(--ui-h2-size);
  font-weight: var(--ui-h2-weight);
}
h3 {
  color: var(--ui-h3-fg);
  font-family: var(--ui-h3-font);
  font-size: var(--ui-h3-size);
  font-weight: var(--ui-h3-weight);
}
.kopf { background: var(--ui-kopf-bg); color: var(--ui-kopf-fg); }
.kopf a { color: inherit; text-decoration: none; }
.kopf a.marke { color: var(--ui-marke-fg); }
.innen, main { max-width: 1080px; margin: 0 auto; }
.kopfzeile { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.9rem 1.2rem; }
.fuss .innen { padding: 1rem 1.2rem 0; }
.fuss-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  align-items: start;
}
.fuss-spalte { line-height: 1.45; }
.fuss-spalte strong { display: inline-block; margin-top: 0.35rem; }
.fuss-spalte strong:first-child { margin-top: 0; }
.fuss-links {
  margin-top: 1.1rem;
  padding-top: 0.85rem !important;
  padding-bottom: 1rem !important;
  border-top: 1px solid rgba(247, 244, 238, 0.25);
  font-size: 0.9rem;
}
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { text-decoration: underline; opacity: 0.9; }
@media (max-width: 900px) {
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .fuss-raster { grid-template-columns: 1fr; }
}
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; flex-wrap: wrap; }
.kopf nav { display: flex; gap: 1rem; }
.kopf nav a {
  color: var(--ui-kopf-nav-fg);
  font-family: var(--ui-kopf-nav-font);
  font-size: var(--ui-kopf-nav-size);
  font-weight: var(--ui-kopf-nav-weight);
}
.kopfzeile-admin { max-width: 1500px; gap: 0.45rem 1rem; flex-wrap: wrap; }
.admin-menue {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0;
}
.kopfzeile-admin .admin-session { margin-left: auto; font-size: var(--ui-admin-session-size); }
.admin-session {
  margin: 0;
  font-size: var(--ui-admin-session-size);
  font-weight: var(--ui-admin-session-weight);
  color: var(--ui-admin-session-fg);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  white-space: nowrap;
}
.admin-session form.inline { margin: 0; }
.kopf button.linkartig { color: inherit; }
.kopf button.linkartig:hover { color: var(--ui-admin-menue-hover-fg); opacity: 0.85; }
.marke {
  color: var(--ui-marke-fg);
  font-family: var(--ui-marke-font);
  font-size: var(--ui-marke-size);
  font-weight: var(--ui-marke-weight);
  white-space: nowrap;
}
main { padding: 1.2rem; }
.fuss {
  margin-top: 1.5rem;
  background: var(--ui-fuss-bg);
  color: var(--ui-fuss-fg);
  font-family: var(--ui-fuss-font);
  font-size: var(--ui-fuss-size);
  font-weight: var(--ui-fuss-weight);
}
.buchung { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr); gap: 1rem; align-items: start; }
.buchung-nachfrage { margin-top: 1rem; }
.nachfrage-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.7rem;
}
.nachfrage-aktionen button,
.nachfrage-aktionen .knopf { margin-top: 0; }
.preis { position: sticky; top: 1rem; background: var(--karte); border: 1px solid var(--ui-karte-border); border-radius: 16px; padding: 1rem; }
.karten { display: grid; gap: 0.7rem; }
.karte, fieldset, .karte-form, .kennzahlen article {
  background: var(--karte);
  border: 1px solid var(--ui-karte-border);
  border-radius: 16px;
  padding: 0.9rem 1rem;
}
.karte { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.karte span, .karte small, .karte em { display: block; }
#wohnung-info { color: var(--grau); margin: 0.7rem 0 0; }
.karte small, .karte em, .klein { color: var(--grau); }
.karte em { font-style: normal; margin-top: 0.25rem; }
label {
  display: block;
  margin: 0.7rem 0 0.2rem;
  color: var(--ui-label-fg);
  font-size: var(--ui-label-size);
  font-weight: var(--ui-label-weight);
}
input, select, textarea, button { font: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="color"]),
select,
textarea {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ui-input-border);
  border-radius: 10px;
  background-color: var(--ui-input-bg);
  background-image: none;
  color: var(--ui-input-fg);
  font-size: var(--ui-input-size);
}
input[type="color"] {
  display: inline-block;
  width: 2.75rem;
  height: 2.35rem;
  margin-top: 0.25rem;
  padding: 0.1rem;
  border: 1px solid var(--ui-input-border);
  border-radius: 8px;
  background-color: var(--ui-input-bg);
  cursor: pointer;
  vertical-align: middle;
}
input[readonly],
output,
.ausgabe {
  background-color: var(--ui-output-bg);
  color: var(--tinte);
}
.passwort-feld {
  position: relative;
  display: block;
  margin-top: 0.25rem;
}
.passwort-feld input {
  width: 100%;
  margin-top: 0;
  padding-right: 6.8rem;
}
.passwort-feld .passwort-schalter {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  line-height: 1.2;
  background: transparent;
  color: var(--gruen);
  border: 1px solid var(--linie);
  border-radius: 999px;
}
.passwort-feld .passwort-schalter:hover { border-color: var(--gruen); }
.passwort-feld .passwort-schalter[aria-pressed="true"] {
  background: var(--gruen);
  color: #fff;
  border-color: var(--gruen);
}
textarea { min-height: 6rem; }
button, .knopf {
  display: inline-block;
  margin-top: 0.8rem;
  background: var(--ui-btn-bg);
  color: var(--ui-btn-fg);
  font-family: var(--ui-btn-font);
  font-size: var(--ui-btn-size);
  font-weight: var(--ui-btn-weight);
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  cursor: pointer;
}
.zweite {
  background: var(--ui-btn2-bg);
  color: var(--ui-btn2-fg);
  border: 1px solid var(--ui-btn2-border);
  font-family: var(--ui-btn2-font);
  font-size: var(--ui-btn2-size);
  font-weight: var(--ui-btn2-weight);
}
.mit-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.2rem;
  margin-top: 0.8rem;
}
.mit-hinweis form { margin: 0; }
.mit-hinweis button { margin-top: 0; }
.mit-hinweis .klein { margin: 0; flex: 1 1 16rem; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; }
fieldset .check.inline { display: inline-flex; width: auto; margin: 0.35rem 0.7rem 0 0; }
.check input { width: auto; }
.fehler { background: var(--ui-fehler-bg); color: var(--ui-fehler-fg); border-radius: 12px; padding: 0.7rem 1rem 0.7rem 2rem; }
.blitz { background: var(--ui-blitz-bg); color: var(--ui-blitz-fg); border-radius: 12px; padding: 0.7rem 1rem; }
.zeilen { list-style: none; padding: 0; }
.zeilen li, .summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--linie); }
.zeilen li strong, .summe strong { white-space: nowrap; }
.summe { font-size: 1.15rem; }
.firma { position: absolute; left: -10000px; }
.raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.raster span, .tag {
  min-height: var(--zelle-groesse, 42px);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--zelle, #fff);
  border: var(--rahmen-breite, 1px) solid var(--rahmen, #ddd);
  font-size: var(--schrift, 14px);
}
.tag { width: 100%; padding: 0; margin: 0; }
.tag.frei, .zelle.frei { background: var(--frei); }
.tag.belegt, .zelle.belegt { background: var(--belegt); color: white; }
.tag.reserviert, .zelle.reserviert { background: var(--reserviert); }
.tag.geschlossen, .zelle.geschlossen { background: var(--geschlossen); }
.tag.kante-anreise, .zelle.kante-anreise {
  background: linear-gradient(135deg, var(--frei) 50%, var(--kante, var(--belegt)) 50%);
  color: var(--tinte);
}
.tag.kante-abreise, .zelle.kante-abreise {
  background: linear-gradient(135deg, var(--kante, var(--belegt)) 50%, var(--frei) 50%);
  color: var(--tinte);
}
.tag.kante-wechsel, .zelle.kante-wechsel {
  background: linear-gradient(135deg, var(--kante-ab, var(--belegt)) 50%, var(--kante-an, var(--belegt)) 50%);
  color: var(--tinte);
}
.tag.vorbei { opacity: 0.45; }
.tag.von, .tag.bis, .tag.spanne { outline: 2px solid var(--gruen); }
.monate { display: grid; gap: 1rem; }
.monat h3 { margin-bottom: 0.4rem; }
.kalenderblatt {
  background: var(--blatt, var(--papier));
  border-radius: 16px;
  padding: 0 1rem 1rem;
  margin: 0;
  font-family: var(--schriftart, Tahoma, Verdana, Geneva, sans-serif);
  font-size: var(--schrift, 14px);
}
.kalenderblatt > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.kalenderblatt h1,
.kalenderblatt h2,
.kalenderblatt h3,
.kalenderblatt .matrix,
.kalenderblatt .raster,
.kalenderblatt .legende {
  font-family: inherit;
}
.kalenderblatt h1 {
  margin: 0 0 0.35rem;
  line-height: 1.15;
}
.kalenderblatt > p {
  margin: 0 0 0.55rem;
}
.monate-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
  margin: 0.7rem 0;
}
.monate-wahl label { margin: 0; flex: 1 1 12rem; }
.monate-wahl select { margin-top: 0.25rem; }
.monate-wahl button { margin: 0; width: auto; }
.monate-mehr { margin: 0 0 0.8rem; }
.matrix-scroll { overflow-x: visible; margin: 0.8rem 0 1.2rem; }
.matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}
.matrix th, .matrix td {
  border: var(--rahmen-breite, 1px) solid var(--rahmen, #ddd);
  padding: 0.25rem 0.05rem;
  text-align: center;
  background: var(--zelle, white);
  font-size: var(--schrift, 14px);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.matrix .matrix-ecke, .matrix .matrix-wohnung {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  width: 6.5rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  background: var(--kopfboden, var(--zelle, white));
  box-shadow: 1px 0 0 var(--rahmen, #ddd);
  text-overflow: ellipsis;
}
.matrix .matrix-tag {
  font-weight: 700;
  color: var(--mofr, var(--tinte));
}
.matrix td.zelle.wochentag { color: var(--wd-mf, var(--tinte)); }
.matrix td.zelle.wochenende,
.matrix td.zelle.belegt.wochenende,
.matrix td.zelle.reserviert.wochenende,
.matrix td.zelle.geschlossen.wochenende,
.matrix td.zelle.kante-anreise.wochenende,
.matrix td.zelle.kante-abreise.wochenende,
.matrix td.zelle.kante-wechsel.wochenende {
  color: var(--wd-ss, #8d2e2e);
}
.matrix caption { text-align: left; font-weight: 700; color: var(--kopf); background: var(--kopfboden); padding: 0.4rem; }
.auswertung-kalender-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  list-style: none;
  padding: 0.65rem 0.8rem;
  margin: 0 0 1rem;
  border: 1px solid var(--linie, #DDD4C6);
  border-radius: 10px;
  background: var(--papier, #FFFDF8);
}
.auswertung-kalender-legende i {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: -0.1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.auswertung-kalender-matrix td.auswertung-kalender-buchung {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.3rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.auswertung-kalender-matrix td.auswertung-kalender-buchung a {
  color: inherit;
  text-decoration: none;
}
.auswertung-kalender-matrix td.auswertung-kalender-buchung:hover,
.auswertung-kalender-matrix td.auswertung-kalender-buchung:hover a {
  filter: brightness(0.92);
  text-decoration: underline;
}
.auswertung-kalender-matrix .matrix-tag-we { color: var(--wd-ss, #8d2e2e); }
.legende { display: flex; flex-wrap: wrap; gap: 0.8rem; list-style: none; padding: 0.7rem; border-radius: 12px; }
.legende i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; margin-right: 0.3rem; }
.mit-nav { display: grid; grid-template-columns: 220px 1fr; }
.nav { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem; }
.nav a {
  text-decoration: none;
  color: var(--ui-kunde-nav-fg);
  font-size: var(--ui-kunde-nav-size);
}
.nav a.aktiv {
  color: var(--ui-kunde-nav-aktiv-fg);
  font-weight: var(--ui-kunde-nav-aktiv-weight);
}
.nav-gruppe { position: relative; }
.admin-menue .nav-gruppe-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: auto;
  margin: 0;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: var(--ui-admin-menue-bg);
  color: var(--ui-admin-menue-fg);
  font-family: var(--ui-admin-menue-font);
  font-size: var(--ui-admin-menue-size);
  font-weight: var(--ui-admin-menue-weight);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.admin-menue .nav-gruppe-titel:hover,
.admin-menue .nav-gruppe.ist-offen > .nav-gruppe-titel,
.admin-menue .nav-gruppe.ist-aktiv > .nav-gruppe-titel {
  background: var(--ui-admin-menue-hover-bg);
  color: var(--ui-admin-menue-hover-fg);
}
.admin-menue .nav-gruppe-titel::after {
  content: '';
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 0.12s ease;
}
.admin-menue .nav-gruppe.ist-offen > .nav-gruppe-titel::after { transform: translateY(0.1rem) rotate(-135deg); }
.nav-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 12.5rem;
  width: max-content;
  max-width: 16rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--ui-admin-drop-bg);
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(29, 26, 22, 0.12);
}
.admin-menue .nav-gruppe:nth-last-child(-n+2) .nav-dropdown { left: auto; right: 0; }
.nav-dropdown[hidden] { display: none; }
.kopf .nav-dropdown a,
.nav-dropdown a {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  color: var(--ui-admin-drop-fg);
  font-family: var(--ui-admin-drop-font);
  font-size: var(--ui-admin-drop-size);
  font-weight: var(--ui-admin-drop-weight);
}
.nav-dropdown a:hover,
.nav-dropdown a.aktiv { background: var(--ui-admin-drop-hover-bg); }
table { width: 100%; border-collapse: collapse; background: var(--ui-table-bg); color: var(--ui-table-fg); }
th, td { text-align: left; vertical-align: top; padding: 0.55rem; border-bottom: 1px solid var(--linie); }
th {
  background: var(--ui-table-head-bg);
  color: var(--ui-table-head-fg);
  font-weight: var(--ui-table-head-weight);
}
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.kennzahlen strong { display: block; font-size: 1.8rem; font-family: Tahoma, Verdana, Geneva, sans-serif; }
.liste { padding-left: 1.1rem; }
.inline { display: inline; }
.farbvorschau { display: inline-block; width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--linie); vertical-align: middle; }
[data-farbpaar] {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.25rem;
}
[data-farbpaar] input[type="color"] {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.35rem;
  margin-top: 0;
  padding: 0.1rem;
}
[data-farbpaar] input[type="text"] {
  flex: 1 1 auto;
  min-width: 7rem;
  width: auto;
  margin-top: 0;
}
.maske { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.2rem; align-items: start; }
.variablen { display: flex; flex-direction: column; gap: 0.35rem; position: sticky; top: 1rem; }
.variable { margin: 0.2rem; background: #e7f0eb; color: var(--gruen); }
.variablen .variable { display: block; width: 100%; margin: 0; text-align: left; }
.feldname { margin: 0.7rem 0 0.2rem; }
.werkzeug {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
  align-items: center;
}
.werkzeug button {
  margin: 0;
  background: #e7f0eb;
  color: var(--gruen);
  border: 1px solid transparent;
}
.werkzeug button.aktiv,
.werkzeug button[aria-pressed="true"] {
  background: var(--gruen);
  color: #fff;
  border-color: var(--gruen);
}
.werkzeug-wahl {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--grau);
}
.werkzeug-wahl select {
  width: auto;
  min-width: 7rem;
  margin: 0;
  padding: 0.35rem 0.5rem;
}
.editor {
  min-height: 8rem;
  height: 8rem;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ui-input-border);
  border-radius: 10px;
  background-color: var(--ui-input-bg);
  color: var(--ui-input-fg);
  font-size: var(--ui-input-size);
  overflow: auto;
  resize: vertical;
}
.editor:focus { outline: 2px solid var(--gruen); outline-offset: 1px; }
.werkzeug .vorschau-schalter { margin: 0; align-items: center; }
.vorschau { margin-top: 0.8rem; }
.vorschau[hidden] { display: none; }
.brief { background: white; border: 1px solid var(--linie); border-radius: 12px; padding: 1rem 1.1rem; }
.brief h2 { margin: 0.2rem 0 0.8rem; font-size: 1.15rem; }
.brieftext p { margin: 0.45rem 0; }
.leistung { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 0.85rem; }
.leistung span { display: block; }
.leistung strong, .leistung small { display: block; }
.leistung small { margin-top: 0.35rem; color: var(--grau); }
.leistung input { width: 5rem; margin-top: 0; }
.leistung input[type="checkbox"] { width: auto; }
.datumfeld { position: relative; display: flex; gap: 0.4rem; align-items: center; }
.datumfeld input { flex: 1; width: auto; margin-top: 0; }
.kalender-wahl {
  margin-top: 0;
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
  color: #fff;
}
.kalender-popup { position: absolute; z-index: 30; top: calc(100% + 0.35rem); right: 0; width: 280px; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 0.6rem; box-shadow: 0 8px 24px rgba(29, 26, 22, 0.12); }
.kalender-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.kalender-popup button { margin-top: 0; padding: 0; border-radius: 8px; background: transparent; color: var(--tinte); width: 100%; }
.kalender-popup .kalender-kopf button { width: auto; padding: 0.2rem 0.55rem; background: var(--gruen); color: white; }
.kalender-popup .raster span, .kalender-popup .kalender-tag { min-height: 32px; font-size: 13px; }
.kalender-tag.gewaehlt { background: var(--gruen); color: white; }
.kalender-tag.ist-gesperrt,
.kalender-tag:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.filter a { margin-right: 0.6rem; }
.filter a.aktiv { font-weight: 700; text-decoration: underline; }
.filter-label { margin-right: 0.45rem; color: var(--grau); }
tr.archiviert td { color: var(--grau); }
.siegel { display: inline-block; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.85rem; }
.siegel-bezahlt { background: #e7f0eb; color: var(--gruen); }
.siegel-offen { background: #f3efe6; color: var(--grau); }
.geheimnis {
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
  background-color: var(--ui-output-bg);
  color: var(--tinte);
  border: 1px solid var(--ui-input-border);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
}
.mfa-qr {
  display: inline-block;
  margin: 0.8rem 0 1rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  line-height: 0;
}
.mfa-qr svg,
.mfa-qr img,
.mfa-qr canvas { display: block; max-width: 100%; height: auto; }
form.inline { display: inline-block; margin-right: 0.5rem; }
.einbinden { margin: 0 0 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie); }
.einbinden h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.einbinden-aktionen { margin: 0.35rem 0 0; }
.einbinden-aktionen form.inline { margin: 0; }
button.linkartig {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gruen);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
button.linkartig:hover { color: var(--tinte); }
button.linkartig:disabled,
button.linkartig:disabled:hover {
  color: var(--grau);
  opacity: 0.65;
  cursor: not-allowed;
  text-decoration: none;
}
@media (max-width: 860px) {
  .buchung, .mit-nav, .kennzahlen, .zwei, .drei, .maske { grid-template-columns: 1fr; }
  .kopfzeile { align-items: flex-start; flex-direction: column; }
  .admin-menue { flex-wrap: wrap; }
  .kopfzeile-admin .admin-session { margin-left: 0; }
  .kopf-rechts { width: 100%; justify-content: space-between; }
  .admin-session { white-space: normal; }
  .preis { position: static; }
  .matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .matrix {
    table-layout: auto;
    width: max-content;
    min-width: max(100%, 920px);
  }
  .matrix th, .matrix td {
    min-width: 2.1rem;
    padding: 0.25rem 0.2rem;
    overflow: visible;
  }
  .matrix .matrix-ecke, .matrix .matrix-wohnung {
    width: auto;
    min-width: 7.5rem;
  }
  .matrix .matrix-tag { min-width: 2.1rem; }
}
.formular-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}
.formular-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.formular-masse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: end;
}
.formular-start form { margin: 0; min-width: 16rem; }
.formular-start .knopf { margin: 0; }
.formular-masse fieldset {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}
.formular-masse fieldset label { min-width: 9rem; margin: 0; }
.formular-masse select { min-width: 16rem; }
.formular-masse-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  align-items: center;
}
.formular-masse-aktionen button { margin: 0; }
.formular-raster-aktionen {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
.formular-raster-aktionen button { margin: 0; }
.formular-raster-abstand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
}
.formular-raster-abstand select {
  margin: 0;
  width: auto;
  min-width: 5rem;
}
.formular-anlegen { max-width: 36rem; }
.formular-admin-form { max-width: 46rem; }
.formular-admin-form fieldset { margin: 0 0 1rem; }
.formular-admin-form .variablen-zeile { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; }
.formular-admin-editor { margin: 0.35rem 0 0.75rem; }
.formular-admin-editor .editor { min-height: 7rem; }
.formular-lauf { overflow: auto; max-width: 100%; }
.formular-lauf .formular-flaeche {
  margin: 0 auto 1rem;
  border: 1px solid #c8d2cc;
}
.formular-lauf .formular-feld,
.formular-lauf .formular-feld-name {
  cursor: default;
  user-select: auto;
  touch-action: auto;
}
.formular-lauf .formular-feld-name { pointer-events: none; }
.formular-lauf .formular-feld input,
.formular-lauf .formular-feld select,
.formular-lauf .formular-feld textarea,
.formular-lauf .formular-feld button {
  pointer-events: auto;
}
.formular-mail-liste {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.formular-mail-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  cursor: grab;
}
.formular-mail-liste li.ist-gezogen { opacity: 0.55; }
.formular-mail-liste li.ist-ziel { border-color: var(--gruen); }
.formular-mail-liste .check { margin: 0; }
.formular-mail-typ {
  color: var(--grau);
  font-size: 0.9rem;
}
.formular-mail-reihenfolge {
  display: inline-flex;
  gap: 0.25rem;
}
.formular-mail-reihenfolge button {
  margin: 0;
  min-width: 2rem;
  padding: 0.2rem 0.4rem;
}
body.art-verwaltung:has([data-formular-editor]) main {
  max-width: none;
  width: 100%;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.seitenbreite-meter {
  width: 100%;
  max-width: 1080px;
  height: 0;
  margin: 0;
  padding: 0 1.2rem;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
}
.formular-editor {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 260px;
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.6rem;
}
.formular-palette h2 { font-size: 1rem; margin: 0.8rem 0 0.45rem; }
.formular-palette h2:first-child { margin-top: 0; }
.formular-typ, .formular-entfernen, .formular-duplizieren {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.6rem;
  text-align: left;
  background: #e7f0eb;
  color: var(--gruen);
  border-radius: 8px;
}
.formular-feld-aktionen { margin-top: 0.45rem; }
.formular-duplizieren { margin: 0 0 0.35rem; }
.formular-entfernen { margin: 0; background: transparent; border: 1px solid var(--rot); color: var(--rot); }
.formular-buehne {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: #e7e2d8;
  padding: 0.5rem;
}
.formular-flaeche {
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(29, 26, 22, 0.12);
}
.formular-flaeche.hat-raster {
  background-image:
    linear-gradient(to right, rgba(30, 74, 56, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 74, 56, 0.18) 1px, transparent 1px);
  background-size: var(--raster, 10px) var(--raster, 10px);
  background-position: 0 0;
}
.formular-raster-leiste {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.35rem;
}
.formular-selektion-rahmen {
  position: absolute;
  z-index: 20;
  box-sizing: border-box;
  border: 1px solid #2f6f55;
  background: rgba(47, 111, 85, 0.12);
  pointer-events: none;
}
.formular-feld,
.formular-feld-name {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.formular-feld-name {
  z-index: 4;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  pointer-events: auto;
  display: block;
}
.formular-feld-name .formular-name-edit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.1rem 0.2rem;
  border: 1px solid var(--gruen);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.formular-feld.ist-markiert,
.formular-feld-name.ist-markiert { outline: 2px solid #8fb3a4; z-index: 2; }
.formular-feld.ist-gewaehlt,
.formular-feld-name.ist-gewaehlt { outline: 2px solid var(--gruen); z-index: 3; }
.formular-feld.ist-teil-aktiv,
.formular-feld-name.ist-teil-aktiv { outline: 2px solid #2f6f55; z-index: 5; }
.formular-griff {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--gruen);
  border: 1px solid #fff;
  border-radius: 2px;
  z-index: 6;
  box-sizing: border-box;
}
.formular-griff-o {
  top: 50%;
  right: -5px;
  margin-top: -5px;
  cursor: ew-resize;
}
.formular-griff-s {
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  cursor: ns-resize;
}
.formular-griff-so {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}
[data-formular-editor].ist-vorschau .formular-griff { display: none; }
.formular-inspector h3 {
  font-size: 0.8rem;
  margin: 0.35rem 0 0.12rem;
}
.formular-feld-inhalt {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.formular-feld[data-textausrichtung="zentriert"] .formular-feld-inhalt {
  align-items: center;
  text-align: center;
}
.formular-feld[data-textausrichtung="rechts"] .formular-feld-inhalt {
  align-items: flex-end;
  text-align: right;
}
.formular-feld[data-textausrichtung="zentriert"] .formular-beschriftung,
.formular-feld[data-textausrichtung="rechts"] .formular-beschriftung,
.formular-feld-name[data-textausrichtung="zentriert"],
.formular-feld-name[data-textausrichtung="rechts"] {
  width: 100%;
}
.formular-ausrichten { margin: 0.35rem 0 0.25rem; }
.formular-ausrichten-gruppe { margin-top: 0.3rem; }
.formular-ausrichten-label { margin: 0.2rem 0 0.08rem; font-weight: 700; font-size: 0.78rem; }
.formular-ausrichten-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: 0.1rem;
}
.formular-ausrichten-knoepfe button {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.22rem 0.35rem;
  font-size: 0.78rem;
}
.formular-beschriftung {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow: hidden;
  word-break: break-word;
}
[data-formular-editor].ist-vorschau .formular-palette,
[data-formular-editor].ist-vorschau .formular-inspector {
  display: none;
}
[data-formular-editor].ist-vorschau .formular-editor {
  grid-template-columns: 1fr;
}
[data-formular-editor].ist-vorschau .formular-feld,
[data-formular-editor].ist-vorschau .formular-feld-name {
  cursor: default;
  outline: 0;
}
[data-formular-editor].ist-vorschau .formular-buehne {
  background: transparent;
  border-color: transparent;
  padding: 0;
}
[data-formular-editor].ist-vorschau .formular-flaeche {
  box-shadow: none;
  border: 1px solid var(--linie);
}
[data-formular-editor].ist-vorschau .formular-flaeche.hat-raster {
  background-image: none;
}
[data-formular-editor].ist-vorschau .formular-raster-leiste label {
  display: none;
}
.formular-feld input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
.formular-feld select,
.formular-feld textarea {
  width: 100%;
  height: 100%;
  margin-top: 0;
  box-sizing: border-box;
  border: 1px solid var(--ui-input-border);
  border-radius: 10px;
  background-color: var(--ui-input-bg);
  background-image: none;
  color: var(--ui-input-fg);
  font-size: var(--ui-input-size);
  padding: 0.35rem 0.55rem;
}
.formular-feld button {
  color: inherit;
  font: inherit;
}
.formular-feld.formular-eingabe {
  background: transparent !important;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.formular-feld.formular-ausgabe {
  background-color: var(--ui-output-bg) !important;
  border-radius: 10px;
}
.formular-feld-name {
  color: var(--ui-label-fg);
  font-size: var(--ui-label-size);
  font-weight: var(--ui-label-weight);
}
.formular-pflicht-ziele {
  display: grid;
  gap: 0.35rem;
  max-height: 220px;
  overflow: auto;
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d7e0db;
  border-radius: 8px;
  background: #f7faf8;
}
.formular-pflicht-ziele .check {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
}
.formular-pflicht-stern[hidden] {
  display: none !important;
}
.formular-lauf .formular-feld-versteckt {
  display: none !important;
}
/* Nicht position:relative – sonst überschreibt es absolute und Y/X greifen nicht */
.formular-feld-formel {
  position: absolute;
}
.formular-feld-formel .formular-formel-vorschau {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 0;
  opacity: 0.85;
  line-height: 1.25;
}
.formular-feld-versteckt-editor {
  outline: 1px dashed #8aa89a;
  background: repeating-linear-gradient(
    -45deg,
    rgba(30, 74, 56, 0.04),
    rgba(30, 74, 56, 0.04) 6px,
    rgba(30, 74, 56, 0.09) 6px,
    rgba(30, 74, 56, 0.09) 12px
  ) !important;
}
.formular-formel-marke {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 2;
  font-size: 0.7rem;
  line-height: 1;
  color: #1e4a38;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  border-radius: 4px;
}
.formular-formel-variablen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}
.formular-formel-chip {
  margin: 0;
  padding: 0.2rem 0.45rem;
  font-size: 0.85rem;
}
.formular-feld .datumfeld {
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  align-items: stretch;
}
.formular-feld .datumfeld input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  align-self: stretch;
}
.formular-feld .kalender-wahl {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.formular-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}
.formular-radio.vertikal {
  flex-direction: column;
  align-items: flex-start;
}
.formular-radio.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.formular-radio label,
.formular-datenschutz {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  width: auto;
  max-width: 100%;
  line-height: 1.25;
  vertical-align: middle;
}
.formular-radio input[type="radio"],
.formular-datenschutz input[type="checkbox"] {
  width: 1em;
  min-width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
  position: relative;
  top: 0;
}
.formular-linie { padding: 0; }
.formular-linie-strich { border-radius: 2px; }
.formular-recaptcha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.55rem;
  align-items: center;
  height: 100%;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  padding: 0.45rem 0.6rem;
  box-sizing: border-box;
}
.formular-recaptcha-haken {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #c1c1c1;
  background: #fff;
  grid-row: span 2;
}
.formular-recaptcha small { color: #555; }
.formular-absenden { width: 100%; margin: 0; border-radius: 999px; }
.formular-inspector {
  position: sticky;
  top: 0.4rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 0.45rem 0.55rem 0.55rem;
  font-size: 0.84rem;
  line-height: 1.25;
}
.formular-inspector h2 {
  font-size: 0.88rem;
  margin: 0.35rem 0 0.2rem;
}
.formular-inspector h2:first-child { margin-top: 0; }
.formular-inspector .klein {
  margin: 0.1rem 0 0.2rem;
  font-size: 0.72rem;
  line-height: 1.25;
}
.formular-inspector label {
  margin: 0.22rem 0 0;
  font-size: 0.78rem;
}
.formular-inspector input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.formular-inspector select,
.formular-inspector textarea {
  margin-top: 0.08rem;
  padding: 0.28rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--ui-input-border);
  background-color: var(--ui-input-bg);
  color: var(--ui-input-fg);
  font-size: var(--ui-input-size);
}
.formular-inspector textarea {
  min-height: 2.6rem;
  resize: vertical;
}
.formular-inspector input[type="color"] {
  width: 2.35rem;
  height: 1.65rem;
  padding: 0.08rem;
}
.formular-inspector input[type="checkbox"] {
  width: auto;
  margin: 0 0.25rem 0 0;
  padding: 0;
}
.formular-inspector .formular-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.35rem;
}
.formular-inspector .formular-duplizieren,
.formular-inspector .formular-entfernen {
  padding: 0.28rem 0.45rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  border-radius: 6px;
}
.formular-stilwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  margin-top: 0.25rem;
}
.formular-stilwahl label { margin: 0; font-size: 0.78rem; }
@media (max-width: 1100px) {
  .formular-editor { grid-template-columns: 1fr; }
  .formular-inspector { position: static; }
}

.menue-editor { max-width: 52rem; }
.protokoll-filter-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 0.9rem;
  align-items: end;
}
.protokoll-filter .aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.protokoll-filter .aktionen .knopf { margin-top: 0.8rem; }
.menue-gruppen,
.menue-module {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.menue-gruppe {
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  padding: 0.65rem 0.75rem;
}
.menue-gruppe.ist-gezogen,
.menue-modul.ist-gezogen { opacity: 0.55; }
.menue-gruppe.ist-ziel,
.menue-modul.ist-ziel { border-color: var(--gruen); }
.menue-gruppe-kopf,
.menue-modul {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) auto;
  gap: 0.45rem 0.65rem;
  align-items: center;
}
.menue-modul {
  grid-template-columns: auto minmax(0, 1.2fr) minmax(7rem, 0.8fr) auto;
  padding: 0.45rem 0.5rem;
  border: 1px solid #e4ddd2;
  border-radius: 8px;
  background: #fffdf8;
}
.menue-module { margin-top: 0.55rem; }
.menue-griff {
  cursor: grab;
  color: var(--grau);
  user-select: none;
  padding: 0 0.2rem;
  font-size: 0.95rem;
  letter-spacing: -0.08em;
}
.menue-name,
.menue-gruppe-wahl { margin: 0; }
.menue-name input,
.menue-gruppe-wahl select { margin-top: 0.15rem; }
.menue-reihenfolge { display: inline-flex; gap: 0.25rem; }
.menue-reihenfolge button { margin: 0; padding: 0.2rem 0.45rem; }
.menue-pfad {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--grau);
}
@media (max-width: 700px) {
  .menue-gruppe-kopf,
  .menue-modul {
    grid-template-columns: auto 1fr;
  }
  .menue-gruppe-wahl,
  .menue-reihenfolge { grid-column: 2; }
  .menue-pfad { grid-column: 2; }
}