/* Kodran · Simulationen als Erweiterung der bestehenden Gestaltung · 0.260906.4 */
.kd-demo{width:min(1220px,calc(100vw - 48px));height:min(900px,90dvh);max-width:none;max-height:none;padding:0;border:1px solid var(--linie-stark);border-radius:18px;background:var(--grund);color:var(--tinte);box-shadow:0 24px 64px #0006;overflow:auto;overscroll-behavior:contain;font-family:inherit}
.kd-demo::backdrop{background:#020d09bc;backdrop-filter:blur(9px)}
.kd-demo[open]{animation:demo-auf .2s ease-out}
@keyframes demo-auf{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
html:has(.kd-demo[open]){overflow:hidden}
.demo-kopf{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 30px;background:var(--grund);border-bottom:1px solid var(--linie)}
.demo-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gedaempft)}
.kd-demo h2{font-size:clamp(23px,2.6vw,32px);letter-spacing:-.04em;line-height:1.15;margin:6px 0 0;font-weight:500}
.kd-demo h3{font-size:17px;line-height:1.4;margin:0 0 16px;font-weight:550;letter-spacing:-.02em}
.kd-demo button,.kd-demo input,.kd-demo select{font:inherit}
.demo-schliessen{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:var(--wisch);border:1px solid var(--linie);border-radius:50%;color:var(--tinte);font-size:28px!important;cursor:pointer;line-height:1}
.demo-schliessen:hover{border-color:var(--glut)}
.demo-hinweis{padding:12px 30px;background:var(--grund-hoch);border-bottom:1px solid var(--linie);font-size:12px;color:var(--gedaempft);line-height:1.6}
.demo-layout{display:grid;grid-template-columns:300px minmax(0,1fr)}
.demo-regler{padding:28px 24px;border-right:1px solid var(--linie);margin:0;align-self:start}
.demo-regler>label,.demo-feldpaar label,.demo-details label{display:grid;gap:6px;font-size:12px;color:var(--gedaempft);margin:0 0 16px}
.demo-feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-regler input[type=number],.demo-regler select{width:100%;min-width:0;height:44px;border:1px solid var(--linie-stark);border-radius:8px;padding:7px 10px;background:var(--grund-hoch);color:var(--tinte);font-size:14px;color-scheme:dark}
html[data-theme=hell] .demo-regler input,html[data-theme=hell] .demo-regler select{color-scheme:light}
.demo-details{margin:4px 0 20px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:12px 0;font-size:12px}
.demo-details summary{cursor:pointer;color:var(--tinte)}
.demo-details[open] summary{margin-bottom:16px}.demo-details p{color:var(--gedaempft);font-size:12px;line-height:1.6;margin:0}
.demo-ergebnis{font-size:13px;line-height:1.65;color:var(--gedaempft);padding:13px 0;margin-bottom:13px;border-top:1px solid var(--linie)}
.demo-ergebnis strong{display:block;color:var(--glut);font-size:16px;font-weight:550;margin-bottom:3px}
.demo-ergebnis[data-fehler=true] strong{color:var(--befund)}
.demo-primaer{width:100%;min-height:46px;border:0;border-radius:9px;background:var(--glut);color:var(--auf-glut);font-size:13px!important;font-weight:600!important;cursor:pointer;padding:12px}
.demo-primaer:disabled{opacity:.4;cursor:not-allowed}
.demo-textknopf{font-size:12px!important;background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;color:var(--gedaempft);cursor:pointer;min-height:40px;padding:6px 0}
.demo-textknopf:disabled{opacity:.4;cursor:default}
.demo-rueckmeldung{font-size:12px;color:var(--glut);margin:12px 0 0;line-height:1.6}
.demo-arbeitsflaeche{padding:28px 30px;min-width:0;background:var(--wisch)}
.demo-plan-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.demo-plan-kopf h3{margin:4px 0 0;font-size:21px;font-weight:500}
.demo-marke{font-size:12px;color:var(--gedaempft);border:1px solid var(--linie);border-radius:20px;padding:6px 10px;white-space:nowrap}
.demo-legende{display:flex;flex-wrap:wrap;gap:15px;font-size:12px;color:var(--gedaempft);margin:18px 0}
.demo-legende span{display:inline-flex;align-items:center;gap:6px}.demo-legende i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid #82958a}.demo-legende .frei{background:#edf2ee}.demo-legende .belegt{background:#d8baa4}.demo-legende .vorschlag{background:#2b9567}
.demo-plan{background:#eef2ed;border:1px solid #b9c8bd;border-radius:12px;overflow:hidden}.demo-plan svg{display:block;width:100%;height:auto;font-family:inherit}.demo-plan text{fill:#294937}.demo-plan .plan-label{font-size:12px;letter-spacing:1px}.demo-plan .tischtext{font-size:17px;font-weight:600}.demo-plan .platztext{font-size:12px}.demo-raum svg{max-height:470px}
.demo-kennzahlen{display:flex;gap:26px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--linie);margin-bottom:23px}.demo-kennzahlen strong{display:block;font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.03em}.demo-kennzahlen span{display:block;color:var(--gedaempft);font-size:12px;margin-top:6px}
.demo-buchungskopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.demo-buchungskopf h3{font-size:14px}.demo-buchungen{list-style:none;margin:0;padding:0}.demo-buchungen li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:12px}.demo-buchungen small{display:block;color:var(--gedaempft);font-size:12px}.demo-buchungen .eigene{color:var(--glut)}
.demo-fussnote{font-size:12px;line-height:1.7;color:var(--gedaempft);margin:18px 0 0}.demo-optionen,.demo-varianten{padding:0;margin:4px 0 20px;border:0}.demo-optionen legend,.demo-varianten legend{font-size:12px;color:var(--gedaempft);margin-bottom:12px}.demo-optionen label{display:flex;align-items:center;gap:10px;min-height:38px;font-size:13px}.demo-optionen small{margin-left:auto;color:var(--gedaempft);font-size:12px}.demo-optionen input,.demo-varianten input{accent-color:var(--glut);width:17px;height:17px;flex-shrink:0}.demo-varianten label{display:flex;align-items:center;gap:10px;padding:12px 9px;border:1px solid var(--linie);border-radius:8px;margin-bottom:8px;font-size:13px;cursor:pointer}.demo-varianten label:has(input:checked){border-color:var(--glut);background:var(--grund-hoch)}.demo-varianten small{display:block;color:var(--gedaempft);font-size:12px;margin-top:3px}.demo-varianten b{font-size:12px;font-weight:500;margin-left:auto;color:var(--glut)}.demo-varianten b[data-voll=true]{color:var(--befund)}
@media(max-width:780px){.kd-demo{width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}.demo-layout{grid-template-columns:1fr}.demo-kopf{padding:17px 20px}.demo-hinweis{padding:12px 20px}.demo-regler{padding:22px 20px;border-right:0;border-bottom:1px solid var(--linie)}.demo-arbeitsflaeche{padding:22px 20px}.demo-plan-kopf{flex-wrap:wrap}.demo-buchungskopf{display:block}.demo-kennzahlen{gap:18px}.demo-schliessen{width:40px;height:40px}.demo-kopf h2{font-size:24px}.demo-regler h3{margin-bottom:16px}.demo-plan svg{min-height:190px}.demo-raum svg{min-height:260px}}
@media(prefers-reduced-motion:reduce){.kd-demo[open]{animation:none}}
/* Locationplanung: Arbeitsfläche passt auf übliche Desktop-Bildschirme. */
@media(min-width:1000px) and (min-height:650px){
 #demo-location{width:min(1500px,calc(100vw - 32px));height:calc(100dvh - 32px);max-height:980px}
 #demo-location[open]{display:flex;flex-direction:column}
 #demo-location .demo-kopf{padding:13px 22px;flex:none}
 #demo-location .demo-kopf h2{font-size:26px;margin-top:3px}
 #demo-location .demo-hinweis{padding:8px 22px;flex:none;font-size:12px}
 #demo-location .demo-layout{flex:1;min-height:0;grid-template-columns:276px minmax(0,1fr)}
 #demo-location .demo-regler{padding:10px 18px;align-self:stretch}
 #demo-location .demo-regler h3{display:none}
 #demo-location .demo-regler>label,#demo-location .demo-feldpaar label{margin-bottom:7px;gap:3px;font-size:12px}
 #demo-location .demo-regler input[type=number],#demo-location .demo-regler select{height:32px;font-size:13px}
 #demo-location .demo-optionen,#demo-location .demo-varianten{margin:0 0 7px}
 #demo-location .demo-optionen legend,#demo-location .demo-varianten legend{margin-bottom:5px}
 #demo-location .demo-optionen label{min-height:26px}
 #demo-location .demo-varianten label{padding:6px;margin-bottom:4px}
 #demo-location .demo-varianten small{display:none}
 #demo-location .demo-textknopf{min-height:28px;padding:3px 0}
 #demo-location .demo-arbeitsflaeche{min-height:0;padding:15px 22px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:9px}
 #demo-location .demo-plan-kopf{margin:0}
 #demo-location .demo-plan-kopf h3{font-size:19px}
 #demo-location .demo-ergebnis{margin:0;padding:8px 0;font-size:12px;line-height:1.5}
 #demo-location .demo-ergebnis strong{font-size:14px}
 #demo-location .demo-plan{min-height:0;height:100%;background:#eff2ec}
 #demo-location .demo-plan svg{height:100%;max-height:none;width:100%}
 #demo-location .demo-kennzahlen{margin:0;padding:5px 0 8px;gap:30px}
 #demo-location .demo-kennzahlen strong{font-size:21px}
 #demo-location .demo-kennzahlen span{margin-top:3px}
 #demo-location .demo-fussnote{margin:0;font-size:12px;line-height:1.45}
}

/* 0.260906.5: Geometrisch zentriertes Schließen-Symbol ohne Schrift-Grundlinie. */
.demo-schliessen{padding:0;line-height:0;position:relative}.demo-schliessen svg{display:block;flex:none;width:20px;height:20px}

/* 0.260906.11 · Gästeauswahl und Betriebsregeln klar getrennt. */
.demo-rollenmarke{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--glut);font-weight:600;margin-bottom:10px}.demo-rollentext{font-size:12px;line-height:1.6;color:var(--gedaempft);margin:0 0 18px}.demo-betrieb{background:var(--grund-hoch);padding:14px;border:1px solid var(--linie);border-radius:8px}.demo-betrieb>label{display:grid;gap:6px;margin-bottom:12px}.demo-betrieb input,.demo-betrieb select{width:100%;padding:8px;background:var(--grund);color:var(--tinte);border:1px solid var(--linie-stark);border-radius:6px}.demo-betrieb summary{font-weight:550}

.demo-kicker{text-transform:none;letter-spacing:.04em}

/* 0.260914.1 · Design-Kritik 14.09.2026: Lesbarkeit, Ausweg im Fehlerfall, Anschluss, Mobil. */
/* Schriftgroessen: 12 px war die Regel fuer Hinweise, Labels, Legenden -- fuer die Zielgruppe zu klein. */
.demo-hinweis,.demo-regler>label,.demo-feldpaar label,.demo-details label,.demo-details,.demo-details p,.demo-textknopf,.demo-rueckmeldung,.demo-legende,.demo-fussnote,.demo-buchungen li,.demo-buchungen small,.demo-kennzahlen span,.demo-optionen legend,.demo-varianten legend,.demo-optionen small,.demo-varianten small,.demo-varianten b,.demo-rollentext,.demo-marke{font-size:13px}
.demo-textknopf{font-size:13px!important}.demo-ergebnis{font-size:14px}.demo-optionen label,.demo-varianten label{font-size:14px}
/* Gesperrter Hauptknopf bleibt lesbar und nennt den Grund im Text ("Nicht buchbar", "Vorgemerkt"). */
.demo-primaer:disabled{opacity:1;background:var(--grund-hoch);color:var(--gedaempft);border:1px solid var(--linie-stark);cursor:not-allowed}
.demo-ergebnis[data-gebucht=true] strong{color:var(--glut)}
/* Vorschlaege als anklickbare Chips direkt unter der Fehlermeldung. */
.demo-vorschlag-titel{display:block;margin-top:10px;color:var(--tinte);font-weight:550}
.demo-vorschlaege{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.demo-vorschlag{min-height:36px;padding:6px 12px;border:1px solid var(--glut);border-radius:20px;background:transparent;color:var(--glut);font-size:13px!important;cursor:pointer;text-align:left}
.demo-vorschlag:hover,.demo-vorschlag:focus-visible{background:var(--glut);color:var(--auf-glut)}
.demo-ergebnis:focus{outline:none}
/* Anschluss: der Weg von der Simulation zur Anfrage, ruhig, am Ende der Arbeitsflaeche. */
.demo-anschluss{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 30px;border-top:1px solid var(--linie);background:var(--grund)}
.demo-anschluss p{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--gedaempft)}.demo-anschluss strong{color:var(--tinte);font-weight:550}
.demo-anschluss-knopf{flex:none;display:inline-flex;align-items:center;min-height:46px;padding:12px 20px;border-radius:9px;background:var(--glut);color:var(--auf-glut);font-weight:600;font-size:14px;text-decoration:none}
.demo-anschluss-knopf:hover,.demo-anschluss-knopf:focus-visible{filter:brightness(1.08)}
#demo-location[open] .demo-anschluss{flex:none}
/* Mobile Statusleiste: nur unter 780 px, klebt am unteren Rand des Dialogs. */
.demo-leiste{display:none}
@media(max-width:780px){
 .demo-leiste{display:flex;position:sticky;bottom:0;z-index:3;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--grund-hoch);border-top:1px solid var(--linie-stark);font-size:14px;color:var(--tinte);box-shadow:0 -8px 24px #0004}
 .demo-leiste a{flex:none;color:var(--glut);font-weight:550;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
 .demo-leiste:empty{display:none}
 /* Plaene bleiben lesbar: Mindestbreite und seitliches Wischen statt 5-px-Schrift. */
 .demo-plan{overflow-x:auto;-webkit-overflow-scrolling:touch}
 #demo-restaurant .demo-plan svg{min-width:640px}
 #demo-location .demo-plan svg{min-width:560px;max-height:none}
 .demo-anschluss{padding:20px}.demo-anschluss-knopf{width:100%;justify-content:center}
 .demo-plan{scroll-margin-top:12px}
}
/* Bedienziele im kompakten Location-Layout: mindestens 38 px Feldhoehe, 20 px Kaestchen. */
@media(min-width:1000px) and (min-height:650px){
 #demo-location .demo-regler input[type=number],#demo-location .demo-regler select{height:38px;font-size:14px}
 #demo-location .demo-optionen label{min-height:32px}
 #demo-location .demo-optionen input,#demo-location .demo-varianten input{width:20px;height:20px}
 #demo-location .demo-textknopf{min-height:36px}
 #demo-location .demo-regler{overflow:auto}
 #demo-location .demo-arbeitsflaeche{grid-template-rows:auto auto minmax(0,1fr) auto auto}
}
.demo-optionen input,.demo-varianten input{width:20px;height:20px}