/* Disco Orga CI 2.0 – gemeinsame Bausteine. Werte nur über Tokens (design/tokens.json). */
[data-do-root]{font-family:var(--do-font);font-stretch:var(--do-widthUi)}
[data-do-root] .do-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-do-root] .do-display{font-family:var(--do-font);font-stretch:var(--do-widthDisplay);font-weight:850;line-height:var(--do-lineHeight-heading,.95);letter-spacing:-.01em}
[data-do-root] .do-catalog{padding:var(--do-space-6);max-width:var(--do-desktopMax);margin:auto}
[data-do-root] .do-catalog h1,[data-do-root] .do-catalog h2{font-family:var(--do-font);font-stretch:var(--do-widthDisplay);font-weight:850;font-size:var(--do-text-heading);line-height:1;letter-spacing:-.01em;margin:0 0 var(--do-space-5)}
[data-do-root] .do-catalog h3{font-size:var(--do-text-subheading);font-weight:600;margin:0 0 var(--do-space-4)}
[data-do-root] .do-section{padding:var(--do-space-6) 0;border-top:1px solid var(--do-divider)}
[data-do-root] .do-stack{display:grid;gap:var(--do-space-4)}
[data-do-root] .do-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--do-space-6)}
[data-do-root] .do-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--do-space-3)}

/* Schaltflächen: eine Form, drei Varianten, Druckfeedback */
[data-do-root] .do-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:var(--do-touchMin);padding:var(--do-space-3) var(--do-space-5);border:1px solid var(--do-line);background:var(--do-panel);color:var(--do-ink);font-size:var(--do-text-body);font-weight:600;line-height:1.3;border-radius:var(--do-controlRadius);max-width:100%;white-space:normal;cursor:pointer;transition:transform var(--do-motion-pressMs) var(--do-motion-easeOut),background-color var(--do-motion-fastMs) ease,border-color var(--do-motion-fastMs) ease}
[data-do-root] .do-button:active:not(:disabled){transform:scale(var(--do-motion-pressScale))}
[data-do-root] .do-button[data-variant="primary"]{background:var(--do-action);color:var(--do-onAction);border-color:transparent}
[data-do-root] .do-button[data-variant="danger"]{color:var(--do-danger);border-color:var(--do-danger);background:transparent}
[data-do-root] .do-button:disabled{color:var(--do-muted);background:var(--do-soft);border-color:var(--do-divider);cursor:not-allowed}
[data-do-root] .do-button[aria-busy="true"]{gap:var(--do-space-2)}
[data-do-root] .do-button[aria-busy="true"]::before{content:'';width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:do-spin 700ms linear infinite}
@media(hover:hover) and (pointer:fine){[data-do-root] .do-button:hover:not(:disabled){border-color:var(--do-ink)}[data-do-root] .do-button[data-variant="primary"]:hover:not(:disabled){border-color:transparent;filter:brightness(1.06)}}

/* Halten zum Auslösen (z. B. Schichtleitung rufen): CSS-Teil, Zeitsteuerung im Skript */
[data-do-root] .do-hold{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
[data-do-root] .do-hold::after{content:'';position:absolute;inset:0;background:var(--do-ink);opacity:.22;clip-path:inset(0 100% 0 0);transition:clip-path var(--do-motion-fastMs) var(--do-motion-easeOut)}
[data-do-root] .do-hold[data-holding="true"]::after{clip-path:inset(0 0 0 0);transition:clip-path var(--do-motion-holdMs) linear}

/* Felder */
[data-do-root] .do-field{display:grid;gap:var(--do-space-2);align-content:start;font-size:var(--do-text-body);font-weight:500;max-width:100%}
[data-do-root] .do-field input,[data-do-root] .do-field textarea,[data-do-root] .do-field select{width:100%;min-width:0;max-width:100%;padding:var(--do-space-3);background:var(--do-panel);color:var(--do-ink);border:1px solid var(--do-line);border-radius:var(--do-controlRadius);font:400 var(--do-text-input)/1.5 var(--do-font);transition:border-color var(--do-motion-fastMs) ease}
[data-do-root] .do-field textarea{resize:vertical;min-height:120px}
[data-do-root] .do-field [aria-invalid="true"]{border-color:var(--do-danger);border-width:2px}
[data-do-root] .do-help{font-size:var(--do-text-caption);color:var(--do-muted);line-height:1.5;margin:0;font-weight:400}
[data-do-root] .do-error{color:var(--do-danger);font-size:var(--do-text-body);line-height:1.5;margin:0}

/* Hinweise: Rahmen in Statusfarbe, Text bleibt lesbar beschriftet */
[data-do-root] .do-banner{display:flex;gap:var(--do-space-3);align-items:flex-start;padding:var(--do-space-4);border:1px solid currentColor;border-radius:var(--do-radius);background:var(--do-panel);color:var(--do-ink);font-size:var(--do-text-body)}
[data-do-root] .do-banner[data-kind="success"]{color:var(--do-success)}
[data-do-root] .do-banner[data-kind="warning"]{color:var(--do-warning)}
[data-do-root] .do-banner[data-kind="danger"]{color:var(--do-danger)}
[data-do-root] .do-banner[data-kind="info"]{color:var(--do-info)}

/* Tabs: mitlaufende Markierung */
[data-do-root] .do-tabs{display:flex;flex-wrap:wrap;gap:var(--do-space-2);border-bottom:1px solid var(--do-divider)}
[data-do-root] .do-tab{padding:var(--do-space-3) var(--do-space-4);border:0;color:var(--do-muted);background:transparent;min-height:var(--do-touchMin);position:relative;font-weight:500}
[data-do-root] .do-tab::after{content:'';position:absolute;left:var(--do-space-3);right:var(--do-space-3);bottom:-1px;height:3px;border-radius:2px;background:var(--do-action);transform:scaleX(0);transition:transform var(--do-motion-baseMs) var(--do-motion-easeOut)}
[data-do-root] .do-tab[aria-selected="true"]{color:var(--do-ink);font-weight:650}
[data-do-root] .do-tab[aria-selected="true"]::after{transform:scaleX(1)}
[data-do-root] .do-tabpanel{padding:var(--do-space-4) 0}

/* Tabellen */
[data-do-root] .do-table{width:100%;border-collapse:collapse;font-size:var(--do-text-body)}
[data-do-root] .do-table th{color:var(--do-muted);font:500 var(--do-text-caption)/1.5 var(--do-font);text-align:left}
[data-do-root] .do-table td,[data-do-root] .do-table th{padding:var(--do-space-4) var(--do-space-2);border-bottom:1px solid var(--do-divider);vertical-align:top}
[data-do-root] .do-table td:first-child,[data-do-root] .do-table th:first-child{padding-left:0}
[data-do-root] .do-table td{overflow-wrap:anywhere}
[data-do-root] .do-table [data-numeric]{font-variant-numeric:tabular-nums}

/* Leer, Laden, Medien */
[data-do-root] .do-empty{padding:var(--do-space-6) 0;max-width:40rem}
[data-do-root] .do-empty p{margin:var(--do-space-2) 0 var(--do-space-4);color:var(--do-muted)}
[data-do-root] .do-loading{display:flex;align-items:center;gap:var(--do-space-3);padding:var(--do-space-4) 0;color:var(--do-muted)}
[data-do-root] .do-skeleton{display:block;height:1em;border-radius:6px;background:var(--do-soft)}
[data-do-root] .do-photo{margin:0;max-width:320px}
[data-do-root] .do-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--do-radius)}
[data-do-root] .do-image-empty{aspect-ratio:4/3;display:grid;place-items:center;padding:var(--do-space-5);background:var(--do-panel);border:1px dashed var(--do-line);border-radius:var(--do-radius);color:var(--do-muted);font-size:var(--do-text-body)}
[data-do-root] .do-photo figcaption{padding-top:var(--do-space-2);color:var(--do-muted);font-size:var(--do-text-caption)}
[data-do-root] .do-document{background:var(--do-panel);border-radius:var(--do-radius);padding:var(--do-space-4);display:grid;gap:var(--do-space-3)}
[data-do-root] .do-document strong{font-weight:600;overflow-wrap:anywhere}

/* Dialog: Desktop zentriert, Handy als Bottom-Sheet; öffnet mit Bewegung */
[data-do-root] dialog.do-dialog{background:var(--do-panel);color:var(--do-ink);padding:var(--do-space-6);border:0;border-radius:var(--do-sheetRadius);width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;opacity:1;transform:none;transition:opacity var(--do-motion-fastMs) ease,transform var(--do-motion-sheetMs) var(--do-motion-easeOut),overlay var(--do-motion-fastMs) allow-discrete,display var(--do-motion-fastMs) allow-discrete}
[data-do-root] dialog.do-dialog h2{font-stretch:var(--do-widthTitle);font-weight:800}
[data-do-root] dialog.do-dialog::backdrop{background:var(--do-scrim);opacity:1;transition:opacity var(--do-motion-fastMs) ease}
@starting-style{[data-do-root] dialog.do-dialog[open]{opacity:0;transform:scale(.97)}[data-do-root] dialog.do-dialog[open]::backdrop{opacity:0}}
@media(max-width:600px){
 [data-do-root] dialog.do-dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:var(--do-sheetRadius) var(--do-sheetRadius) 0 0;padding:var(--do-space-5) var(--do-space-5) var(--do-space-8);transition:opacity var(--do-motion-fastMs) ease,transform var(--do-motion-sheetMs) var(--do-motion-easeDrawer),overlay var(--do-motion-fastMs) allow-discrete,display var(--do-motion-fastMs) allow-discrete}
 @starting-style{[data-do-root] dialog.do-dialog[open]{opacity:1;transform:translateY(100%)}}
}

[data-do-root] .do-logo-sample{width:128px;max-width:100%;height:40px;display:flex;align-items:center;font-family:var(--do-font);font-stretch:var(--do-widthDisplay);font-size:32px;font-weight:850}
[data-do-root] .do-call{display:flex;align-items:center;justify-content:center;gap:var(--do-space-3);background:var(--do-action);color:var(--do-onAction);min-height:56px;padding:var(--do-space-4);font-weight:650;border:0;border-radius:var(--do-radius);max-width:100%;transition:transform var(--do-motion-pressMs) var(--do-motion-easeOut)}
[data-do-root] .do-call:active{transform:scale(var(--do-motion-pressScale))}
[data-do-root] .do-call[data-critical="true"]{background:var(--do-panel);border:2px solid var(--do-danger);color:var(--do-danger)}
[data-do-root] .do-check{display:flex;gap:var(--do-space-3);align-items:center;min-height:var(--do-touchMin);font-size:var(--do-text-body)}
[data-do-root] .do-check input{width:24px;height:24px;min-height:24px;accent-color:var(--do-action)}
[data-do-root] .do-live{min-height:var(--do-touchMin);font-size:var(--do-text-body);padding-top:var(--do-space-3)}
[data-do-root] .do-bad-example{color:var(--do-muted);text-decoration:line-through}
@media(max-width:600px){[data-do-root] .do-catalog{padding:var(--do-space-4)}[data-do-root] .do-table,[data-do-root] .do-table tbody{display:block}[data-do-root] .do-table thead{display:none}[data-do-root] .do-table tr{display:grid;gap:var(--do-space-2);padding:var(--do-space-4) 0;border-bottom:1px solid var(--do-divider)}[data-do-root] .do-table td{display:grid;grid-template-columns:minmax(72px,30%) minmax(0,1fr);gap:var(--do-space-3);border:0;padding:4px 0}[data-do-root] .do-table td::before{content:attr(data-label);font-size:var(--do-text-caption);color:var(--do-muted)}}

/* 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}

@keyframes do-spin{to{transform:rotate(360deg)}}
@keyframes do-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 [data-do-root] *,[data-do-root] *::before,[data-do-root] *::after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
 [data-do-root] .do-button,[data-do-root] .do-call,[data-do-root] .do-tab::after,[data-do-root] dialog.do-dialog{transition:opacity 160ms ease!important}
 [data-do-root] .do-button:active,[data-do-root] .do-call:active{transform:none!important}
 [data-do-root] dialog.do-dialog{transform:none!important}
}
/* Weitere Aktionen (Styleguide „Einträge mit Aktionen“): ab vier Aktionen Hauptaktion plus dieses aufklappbare Menü. */
[data-do-root] .do-more{display:inline-block;max-width:100%}
[data-do-root] .do-more>summary{list-style:none}
[data-do-root] .do-more>summary::-webkit-details-marker{display:none}
[data-do-root] .do-more[open]>summary{border-color:var(--do-action)}
[data-do-root] .do-more-list{display:flex;flex-wrap:wrap;gap:var(--do-space-3);margin-top:var(--do-space-3)}