.demo-planung{--dp-ink:#193b4b;--dp-accent:#176c72;--dp-line:#d6e1e6;max-width:1160px;margin:auto;padding:24px 28px 40px;color:var(--dp-ink);font-family:system-ui,sans-serif;font-size:14px;line-height:1.5}
.demo-planung *{box-sizing:border-box}.demo-kopf{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--dp-line);padding-bottom:20px;gap:12px}.demo-marke{font-size:28px;font-weight:850;letter-spacing:-1.5px}.demo-marke>span{color:var(--dp-accent)}.demo-kennzeichen{font-size:11px;font-weight:700;letter-spacing:.045em;color:var(--dp-accent);background:#e3eff0;padding:7px 10px;border-radius:5px}
.demo-auftakt{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:28px 0}.demo-oberzeile{font-size:11px;font-weight:650;letter-spacing:.035em;color:#526c78;margin:0 0 7px}.demo-planung h1{font-size:34px;letter-spacing:-1.3px;line-height:1.1;margin:0}.demo-entwurf{text-align:right;font-size:11px;color:#526c78}.demo-entwurf strong{font-weight:650;color:var(--dp-ink)}.demo-arbeitsflaeche{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px}.demo-hauptspalte,.demo-seitenspalte{min-width:0}
.demo-auswahl{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-planung label{display:grid;gap:6px;color:#526c78;font-size:12px;font-weight:600}.demo-planung input,.demo-planung select{font:inherit;font-size:15px;font-weight:500;color:var(--dp-ink);border:1px solid #b8cbd3;border-radius:6px;min-height:46px;padding:10px 12px;background:white;width:100%;min-width:0}.demo-planung button{font:inherit;cursor:pointer;min-height:44px;border:1px solid var(--dp-line);background:white;color:var(--dp-ink);border-radius:6px;padding:9px 13px;transition:background-color .13s ease,border-color .13s ease}.demo-planung button:hover{background:#e8f1f2;border-color:#8fb5ba}.demo-planung button:disabled{opacity:.4;cursor:default}.demo-planung button:focus-visible,.demo-planung input:focus-visible,.demo-planung select:focus-visible{outline:3px solid var(--dp-accent);outline-offset:3px}.demo-planung .demo-primaer{background:var(--dp-accent);border-color:var(--dp-accent);color:white;font-weight:650}.demo-planung .demo-primaer:hover{background:#10555a}
.demo-tagesleiste{display:flex;align-items:center;gap:12px;padding:20px 0}.demo-tagesleiste>div{display:grid;flex:1;gap:1px}.demo-tagesleiste>div>span{font-size:12px;color:#526c78}.demo-tagesleiste strong{font-size:19px;font-weight:700;letter-spacing:-.5px}.demo-planung .demo-pfeil{padding:8px;width:44px;font-size:19px}.demo-planung .demo-heute{border:0;background:transparent;color:var(--dp-accent);font-size:12px;padding:8px}.demo-veranstaltung{display:flex;align-items:center;gap:13px;padding:16px 0;border-top:3px solid var(--dp-accent);border-bottom:1px solid var(--dp-line)}.demo-veranstaltungssymbol{font-size:29px;color:var(--dp-accent);width:38px;text-align:center}.demo-veranstaltung p{margin:0;color:#526c78;font-size:11px}.demo-veranstaltung h2{margin:2px 0 0;font-size:16px;font-weight:650;letter-spacing:-.3px}
.demo-plan-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 14px}.demo-plan-kopf h2{font-size:17px;letter-spacing:-.4px;margin:0}.demo-plan-kopf p{font-size:11px;color:#526c78;margin:4px 0 0}.demo-plan-kopf button{white-space:nowrap}.demo-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}.demo-planung .demo-filter button{border-color:transparent;background:transparent;padding:8px 11px;font-size:12px;min-height:44px;color:#526c78}.demo-planung .demo-filter button[aria-pressed=true]{background:#e3eff0;color:#10555a;font-weight:650}
.demo-bereich{margin-bottom:24px;background:white;border-radius:8px;padding:0 16px 2px}.demo-bereich-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--dp-line)}.demo-bereich h3{font-size:15px;font-weight:750;margin:0}.demo-besetzung{color:var(--dp-accent);font-size:11px;font-weight:650}.demo-besetzung.demo-offen{color:#875c12}.demo-planung .demo-schicht{display:grid;grid-template-columns:48px minmax(0,1fr) auto 14px;align-items:center;gap:12px;min-height:90px;border:none;border-radius:0;border-bottom:1px solid #e8eef1;width:100%;text-align:left;padding:13px 0;background:transparent}.demo-planung .demo-schicht:hover{background:#f4f8f9}.demo-zeit{display:grid;gap:3px;font-size:12px;font-variant-numeric:tabular-nums}.demo-zeit strong{font-weight:650}.demo-zeit>span{color:#617986}.demo-person{display:flex;align-items:center;gap:10px;min-width:0;border-left:2px solid #a6c7cb;padding-left:12px}.demo-avatar{display:inline-flex;justify-content:center;align-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#edf3f5;color:#365d6e;font-size:10px;font-weight:750}.demo-person>span:last-child{min-width:0}.demo-person strong{font-size:13px;font-weight:650;display:block}.demo-person small{display:block;font-size:10px;color:#617986;overflow-wrap:anywhere}.demo-rueckmeldung{font-size:10px;color:#526c78;white-space:nowrap}.demo-bearbeiten{font-size:14px;color:#6e8792}.demo-fehlbedarf{color:#875c12;font-size:11px;padding:10px 0;margin:0}.demo-zaehlhinweis{font-size:10px;color:#617986;margin-top:-5px;max-width:460px}
.demo-seitenspalte{padding-top:0}.demo-einordnung{border-top:3px solid #c4d7df;padding:20px 0}.demo-einordnung h2{font-size:23px;line-height:1.2;letter-spacing:-.8px;margin:10px 0 16px}.demo-einordnung>p:not(.demo-oberzeile){color:#526c78;font-size:13px;line-height:1.7}.demo-statuszeile{display:grid;gap:4px;border-top:1px solid var(--dp-line);padding:14px 0;font-size:12px}.demo-statuszeile strong{font-weight:650}.demo-statuszeile span{color:#617986}.demo-transparenz{margin-top:20px;padding:18px 0;border-top:1px solid var(--dp-line);font-size:11px;color:#526c78}.demo-transparenz strong{color:var(--dp-ink);font-size:12px}.demo-transparenz p{line-height:1.7;margin:9px 0}.demo-planung .demo-reset{border:0;color:var(--dp-accent);padding-left:0;background:transparent;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.demo-formular{background:white;padding:20px;border-radius:8px;border-top:3px solid var(--dp-accent);animation:demo-einblenden .16s ease}.demo-formkopf{display:flex;justify-content:space-between;align-items:center;gap:10px}.demo-formkopf h2{font-size:17px;margin:0;letter-spacing:-.4px}.demo-planung .demo-formkopf button{border:0;font-size:24px;padding:4px 9px}.demo-formular>p{font-size:11px;color:#617986;margin:0 0 19px}.demo-formular form{display:grid;gap:15px}.demo-zeiten{display:grid;grid-template-columns:1fr 1fr;gap:10px}.demo-formular label>span{font-weight:400}.demo-formhinweis{font-size:10px;color:#617986;margin:0}.demo-formaktionen{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}.demo-formaktionen button{font-size:12px}.demo-fehler{border-left:3px solid #a63c2c;padding:10px;background:#fff1ee;color:#832c20;font-size:12px;margin:0}.demo-meldung{font-size:12px;color:var(--dp-accent);min-height:18px}
@keyframes demo-einblenden{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.demo-arbeitsflaeche{grid-template-columns:minmax(0,1fr);gap:18px}.demo-seitenspalte:has(.demo-formular){grid-row:1}.demo-einordnung{display:none}.demo-transparenz{margin-top:0}.demo-auftakt{margin:22px 0}.demo-planung{max-width:650px}}
@media(max-width:480px){.demo-planung{padding:18px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.demo-kopf{padding-bottom:14px}.demo-marke{font-size:25px}.demo-kennzeichen{font-size:9px;padding:6px 7px}.demo-entwurf{font-size:10px}.demo-planung h1{font-size:29px}.demo-auswahl{gap:8px}.demo-planung select,.demo-planung input{font-size:16px;padding:9px 8px}.demo-tagesleiste{gap:8px;padding:16px 0}.demo-tagesleiste strong{font-size:16px}.demo-planung .demo-heute{padding:5px;font-size:11px}.demo-bereich{padding-inline:12px}.demo-planung .demo-schicht{grid-template-columns:43px minmax(0,1fr) 14px;gap:4px 8px}.demo-zeit{grid-column:1;grid-row:1 / 3;align-self:center}.demo-person{grid-column:2;grid-row:1;padding-left:8px;gap:7px}.demo-avatar{flex-basis:26px;height:26px;font-size:9px}.demo-rueckmeldung{grid-column:2;grid-row:2;padding-left:10px;margin-top:3px}.demo-bearbeiten{grid-column:3;grid-row:1 / 3}.demo-person strong{font-size:12px}.demo-plan-kopf h2{font-size:16px}.demo-plan-kopf p{max-width:190px}.demo-plan-kopf .demo-primaer{padding:8px 10px;font-size:12px}.demo-formular{padding:15px}}
@media(prefers-reduced-motion:reduce){.demo-planung button{transition:none}.demo-formular{animation:none}}