/* Produktrahmen der Web-App nach CI 2.0. Werte nur über Tokens. */
html{font-family:var(--do-font);font-stretch:var(--do-widthUi);font-size:100%;background:var(--do-background);color:var(--do-ink);color-scheme:dark}html[data-mode=light]{color-scheme:light}html[data-mode=system]{color-scheme:light dark}
*{box-sizing:border-box}body{margin:0;min-width:0;font-size:var(--do-text-body);line-height:1.5}a{color:inherit}
button,a,input,select,textarea{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--do-focus);outline-offset:3px}
h1,h2,h3,p{overflow-wrap:anywhere}
h1,h2{font-family:var(--do-font);line-height:1;margin:0 0 var(--do-space-5);letter-spacing:-.01em}
h1{font-size:var(--do-text-desktopHeading);font-stretch:var(--do-widthDisplay);font-weight:850}
h2{font-size:var(--do-text-component36);font-stretch:var(--do-widthTitle);font-weight:800}
h3{font-size:var(--do-text-subheading);font-weight:650;margin:var(--do-space-2) 0 var(--do-space-3)}

/* Kopf: Wortmarke links, Darstellung kompakt rechts */
.mast{max-width:var(--do-desktopMax);margin:auto;padding:var(--do-space-3) var(--do-space-6);display:flex;justify-content:space-between;align-items:center;gap:var(--do-space-4);border-bottom:1px solid var(--do-divider)}
.wordmark{font:850 var(--do-text-component31)/1 var(--do-font);font-stretch:var(--do-widthDisplay);letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;min-height:var(--do-touchMin)}
.mode{flex:0 0 auto;width:auto;max-width:180px}
[data-do-root] .mode select{width:auto;border-radius:var(--do-pillRadius);padding:var(--do-space-2) var(--do-space-8) var(--do-space-2) var(--do-space-4);font-size:var(--do-text-body);background-color:var(--do-panel);border-color:var(--do-divider);min-height:var(--do-touchMin)}

/* Seitenaufbau */
.shell{max-width:1040px;padding:var(--do-space-10) var(--do-space-6);margin:auto;display:grid;grid-template-columns:1fr 1.2fr;gap:var(--do-space-10);align-items:start}
.intro{padding-top:var(--do-space-2)}
.intro p{color:var(--do-muted);line-height:1.6;font-size:var(--do-text-lead)}
.panel{min-width:0}
form,.stack{display:grid;gap:var(--do-space-4)}
form+.do-button{margin-top:var(--do-space-3)}
.section{border-top:1px solid var(--do-divider);margin-top:var(--do-space-6);padding-top:var(--do-space-6)}
.muted{color:var(--do-muted);line-height:1.5}
.link-button{background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;color:var(--do-ink);min-height:var(--do-touchMin);padding:var(--do-space-3) 0;max-width:100%;text-align:left}

/* Einträge: Titel und Status oben, Aktionen als kompakte Reihe statt Knopfwand */
.item{padding:var(--do-space-4) 0;border-bottom:1px solid var(--do-divider);display:flex;flex-wrap:wrap;align-items:center;gap:var(--do-space-2) var(--do-space-2)}
.item>:not(button){flex:1 0 100%;margin:0}
.item>p{margin-bottom:var(--do-space-2)}
.item strong{font-weight:600}
.item>.do-button{flex:0 1 auto;padding:var(--do-space-2) var(--do-space-4);font-size:var(--do-text-caption);background:transparent;border-color:var(--do-divider)}
.item>.do-button[data-variant="primary"]{background:var(--do-action);border-color:transparent}
.item>.do-button:first-of-type:not([data-variant]){border-color:var(--do-line)}
.item>.do-more{flex:0 1 auto}.item>.do-more>summary,.item .do-more-list>.do-button{padding:var(--do-space-2) var(--do-space-4);font-size:var(--do-text-caption);background:transparent;border-color:var(--do-divider)}

.code{font-family:var(--do-font);font-variant-numeric:tabular-nums;letter-spacing:.04em;overflow-wrap:anywhere;background:var(--do-panel);border-radius:var(--do-controlRadius);padding:var(--do-space-4);line-height:1.7}
.chip{font:500 var(--do-text-caption)/1.5 var(--do-font);color:var(--do-muted)}
#notice:not(:empty){padding:var(--do-space-4);margin-bottom:var(--do-space-5);border:1px solid var(--do-info);border-radius:var(--do-radius);background:var(--do-panel);overflow-wrap:anywhere;animation:do-enter var(--do-motion-baseMs) var(--do-motion-easeOut)}
#notice[data-error=true]{border-color:var(--do-danger);color:var(--do-danger)}
footer{max-width:var(--do-desktopMax);margin:auto;padding:var(--do-space-6);border-top:1px solid var(--do-divider);font-size:var(--do-text-caption);color:var(--do-muted);display:flex;justify-content:space-between;gap:var(--do-space-4)}
.authed .intro{display:none}.authed{grid-template-columns:1fr;max-width:1000px}
.controls{display:flex;gap:var(--do-space-3);flex-wrap:wrap}

/* Rechte: Gruppen als ruhige Flächen */
.permissions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--do-space-3)}
.permissions fieldset{min-width:0;border:0;background:var(--do-panel);border-radius:var(--do-radius);padding:var(--do-space-3) var(--do-space-4)}
.permissions legend{overflow-wrap:anywhere;float:left;width:100%;font-weight:600;padding:var(--do-space-1) 0 var(--do-space-2)}
.permissions label{overflow-wrap:anywhere}

/* Verwaltung: Seitenleiste mit Bereichen, rechts der gewählte Bereich mit Titel. Auf dem Handy öffnet „Menü“ dieselbe Liste als Sheet. */
.authed.shell{max-width:var(--do-desktopMax)}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--do-space-10);align-items:start}
.app-main{min-width:0}
.side{position:sticky;top:var(--do-space-6);max-height:calc(100dvh - var(--do-space-10));overflow:auto;display:grid;gap:var(--do-space-3);align-content:start}
.side>p{margin:0}
.side-place{font-weight:600}
.nav{display:grid;gap:var(--do-space-4)}
.nav-group{display:grid;gap:var(--do-space-1)}
.nav-label{margin:0;padding-left:var(--do-space-3);font-size:var(--do-text-caption);font-weight:600;color:var(--do-muted)}
.nav-items{display:grid;gap:var(--do-space-1)}
.nav .do-button{justify-content:flex-start;text-align:left;border:0;border-radius:var(--do-controlRadius);padding:var(--do-space-2) var(--do-space-3);font-weight:500;background:transparent}
.nav .do-button[aria-current=page]{background:var(--do-soft);font-weight:650}
/* Desktop with a mouse: dense rows so all areas fit without scrolling the bar; touch keeps the 48px target. */
@media (min-width:701px) and (pointer:fine){.nav{gap:var(--do-space-3)}.nav-group,.nav-items{gap:0}.nav .do-button{min-height:var(--do-space-8);padding:var(--do-space-1) var(--do-space-3)}}
.fold{border-top:1px solid var(--do-divider);padding:var(--do-space-2) 0}.fold>summary{display:flex;align-items:center;min-height:var(--do-touchMin);font-weight:650;cursor:pointer}.fold[open]>summary{margin-bottom:var(--do-space-4)}.fold:last-of-type{border-bottom:1px solid var(--do-divider)}
.invite{display:block;margin-bottom:var(--do-space-4)}.invite>form{margin-top:var(--do-space-5)}
.area-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--do-space-4);margin-bottom:var(--do-space-4)}
.area-name{min-width:0}.area-name p{margin:0}
.area-name h1.chip{font:500 var(--do-text-caption)/1.5 var(--do-font);font-stretch:normal;letter-spacing:normal;margin:0}
.area-head h2{font-size:var(--do-text-component31);font-stretch:var(--do-widthTitle);font-weight:850;margin:var(--do-space-1) 0 0}
.area-head h2:focus{outline:none}
[data-do-root] .menu-button{display:none}
.call-slot{margin-bottom:var(--do-space-5)}
/* A lone action inside an area keeps its own width instead of stretching across the page. */
#pane>.do-button,#pane>.stack>.do-button{justify-self:start}
/* Start page „Heute“: one large line for the next evening, then a quiet ledger with one row per area. */
.today-lead{display:grid;gap:var(--do-space-3);padding-bottom:var(--do-space-8);border-bottom:1px solid var(--do-divider)}
.today-lead .do-row{margin-top:var(--do-space-2)}
.today-date{margin:0;font-size:var(--do-text-heading)}
@media(min-width:701px){.today-date{font-size:var(--do-text-desktopHeading)}}
.today-sub{margin:0;font-size:var(--do-text-lead)}
.today-ledger{display:grid}
.today-row{display:flex;justify-content:space-between;align-items:center;gap:var(--do-space-4);min-height:var(--do-touchMin);padding:var(--do-space-3) 0;border:0;border-bottom:1px solid var(--do-divider);background:none;color:var(--do-ink);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--do-motion-fastMs) ease}
.today-row>span{color:var(--do-muted)}.today-row>strong{font-weight:600;text-align:right}
.today-row[data-urgent]>strong{color:var(--do-danger)}
@media(hover:hover){.today-row:hover>strong{text-decoration:underline;text-underline-offset:3px}}
button.today-row:active{background:var(--do-soft)}div.today-row{cursor:default}.today-row:last-child{border-bottom:0}
/* Calling for help is a phone action: on desktop widths neither the bar nor the send form is shown (decision Yves, 24.10.2026). */
@media(min-width:701px){.call-slot,.call-send{display:none}}
.menu-head{display:flex;justify-content:space-between;align-items:center;gap:var(--do-space-4);margin-bottom:var(--do-space-4)}.menu-head h2{margin:0}
.menu-sheet .side{position:static;max-height:none;overflow:visible}.menu-sheet .nav-label{padding-left:0}
.menu-sheet .nav-items{display:flex;flex-wrap:wrap;gap:var(--do-space-2)}
.menu-sheet .nav .do-button{border:1px solid var(--do-divider);border-radius:var(--do-pillRadius);padding:var(--do-space-2) var(--do-space-4);font-size:var(--do-text-caption);font-weight:550}
.menu-sheet .nav .do-button[aria-current=page]{background:var(--do-ink);color:var(--do-background);border-color:var(--do-ink)}
@media(max-width:700px){.app{grid-template-columns:minmax(0,1fr);gap:0}.app>.side,.app>.side-slot{display:none}[data-do-root] .menu-button{display:inline-flex;flex:0 0 auto}.area-head h2{font-size:var(--do-text-component25)}}
textarea{resize:vertical}dialog{color:var(--do-ink)}
.recovery-codes{display:grid;grid-template-columns:1fr 1fr;gap:var(--do-space-2)}
@media(max-width:700px){.shell{grid-template-columns:1fr;gap:var(--do-space-6);padding:var(--do-space-6) var(--do-space-4)}.intro{padding-top:0}.intro h1{font-size:var(--do-text-heading)}.intro p{display:none}.mast{padding:var(--do-space-2) var(--do-space-4)}.wordmark{font-size:var(--do-text-component25)}footer{padding:var(--do-space-4);flex-wrap:wrap}.recovery-codes{grid-template-columns:1fr}h2{font-size:var(--do-text-component31)}}

/* Auswahlkarten */
.choices{min-width:0;border:0;padding:0;margin:0;display:grid;gap:var(--do-space-2)}
.choices legend{padding:0 0 var(--do-space-2);font-size:var(--do-text-body);font-weight:500}
.choices input[type=radio]{width:24px;height:24px;min-width:24px;accent-color:var(--do-action)}
.choices .do-check{align-items:center;padding:var(--do-space-3) var(--do-space-4);border:1px solid var(--do-divider);border-radius:var(--do-controlRadius);background:var(--do-panel);overflow-wrap:anywhere;transition:border-color var(--do-motion-fastMs) ease}
.choices .do-check:has(input:checked){border-color:var(--do-action)}
.choices .do-check input{flex-shrink:0}
.choices .do-check span{min-width:0}
.mast{flex-wrap:wrap}.do-check span{min-width:0;overflow-wrap:anywhere}.permissions .do-check{align-items:flex-start}

.test-note{padding:var(--do-space-4);border:1px dashed var(--do-line);border-radius:var(--do-radius);background:var(--do-panel);color:var(--do-ink);line-height:1.5}.total{font-size:var(--do-text-lead);font-weight:600;font-variant-numeric:tabular-nums}.do-field input{max-width:100%}

[hidden]{display:none!important}

/* Let native iOS date/time controls shrink inside grid fields. */
[data-do-root] .do-field{min-width:0;grid-template-columns:minmax(0,1fr)}

[data-do-root] .do-field input:is([type=date],[type=time],[type=month],[type=datetime-local]){display:block;appearance:none;-webkit-appearance:none;min-height:var(--do-touchMin)}
[data-do-root] .do-field input::-webkit-date-and-time-value{text-align:left;min-width:0}
.poster{display:grid;gap:var(--do-space-4);justify-items:center;text-align:center;padding:var(--do-space-6);border:1px solid var(--do-line)}
.poster-qr{width:min(100%,360px);height:auto;background:#fff;image-rendering:pixelated}
@media print{.mast,footer,.nav,.side,.menu-button,.call-slot,#notice,.do-row,.do-help,.do-banner,h3,.item,.do-empty,.do-field,form,.muted:not(.poster .muted){display:none!important}.poster{border:0}.poster *{color:#000!important}.poster-qr{width:12cm}html,body{background:#fff!important}}

/* Sprunglink: erst bei Tastaturfokus sichtbar */
.skip{position:absolute;left:var(--do-space-4);top:var(--do-space-2);z-index:10;padding:var(--do-space-3) var(--do-space-4);background:var(--do-panel);color:var(--do-ink);border:1px solid var(--do-line);border-radius:var(--do-controlRadius);transform:translateY(-200%)}
.skip:focus{transform:none}
/* Betriebsname als Seitenüberschrift nach der Anmeldung (Größe wie bisher h2) */
h1.place{font-size:var(--do-text-component36);font-stretch:var(--do-widthTitle);font-weight:800}
@media(max-width:700px){h1.place{font-size:var(--do-text-component31)}}
.do-required{font-weight:400;color:var(--do-muted)}
details>summary{min-height:var(--do-touchMin);display:flex;align-items:center;cursor:pointer}
[data-do-root] .mode{display:flex;align-items:center;gap:var(--do-space-2)}.mode-label{font-size:var(--do-text-caption);color:var(--do-muted)}
@media(max-width:420px){.mode-label{display:none}}
/* Einwilligung als Auswahlkarte wie die übrigen Antworten */
.do-check.consent{align-items:flex-start;padding:var(--do-space-3) var(--do-space-4);border:1px solid var(--do-divider);border-radius:var(--do-controlRadius);background:var(--do-panel)}
.do-check.consent:has(input:checked){border-color:var(--do-action)}
.do-check.consent input{width:24px;height:24px;min-width:24px;accent-color:var(--do-action)}
.privacy-text{white-space:pre-line}