/* Strauch's Designsystem 1.1 - components.css
Voraussetzung: tokens.css davor laden. Alle Klassen mit Praefix sd-.
Opt-in: Basisstil gilt nur unter body.sd (oder .sd-scope), damit alte Seiten nicht kippen.
Keine externen Ressourcen; Icons sind eingebettete Masken (data:-URI, img-src data:). */
/* ===== Icons (Masken, erben currentColor) ===== */
:root {
--sd-ico-check: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5l4.5%204.5L19%207'/%3E%3C/svg%3E");
--sd-ico-x: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");
--sd-ico-warn: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204l9%2016H3z'/%3E%3Cpath%20d='M12%2010v4M12%2017.2v.1'/%3E%3C/svg%3E");
--sd-ico-info: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v6M12%207.5v.1'/%3E%3C/svg%3E");
--sd-ico-clock: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E");
--sd-ico-plus: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M5%2012h14'/%3E%3C/svg%3E");
--sd-ico-home: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2011l8-7%208%207M6%2010v10h12V10'/%3E%3C/svg%3E");
--sd-ico-calendar: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='5'%20width='16'%20height='15'%20rx='2'/%3E%3Cpath%20d='M4%2010h16M8%203v4M16%203v4'/%3E%3C/svg%3E");
--sd-ico-list: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%207h11M9%2012h11M9%2017h11M4.5%207v.1M4.5%2012v.1M4.5%2017v.1'/%3E%3C/svg%3E");
--sd-ico-user: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='3.8'/%3E%3Cpath%20d='M4.5%2020c0-4%203.4-6.5%207.5-6.5s7.5%202.5%207.5%206.5'/%3E%3C/svg%3E");
--sd-ico-settings: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208h9M19%208h1M4%2016h1M11%2016h9'/%3E%3Ccircle%20cx='16'%20cy='8'%20r='2.5'/%3E%3Ccircle%20cx='8'%20cy='16'%20r='2.5'/%3E%3C/svg%3E");
--sd-ico-sun: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202.5v2.5M12%2019v2.5M2.5%2012H5M19%2012h2.5M5.3%205.3l1.8%201.8M16.9%2016.9l1.8%201.8M18.7%205.3l-1.8%201.8M7.1%2016.9l-1.8%201.8'/%3E%3C/svg%3E");
--sd-ico-moon: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2014.5A8%208%200%201%201%209.5%204a6.5%206.5%200%200%200%2010.5%2010.5z'/%3E%3C/svg%3E");
--sd-ico-print: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%209V4h10v5M7%2017H4v-7h16v7h-3M7%2014h10v6H7z'/%3E%3C/svg%3E");
--sd-ico-search: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='6.5'/%3E%3Cpath%20d='M16%2016l4.5%204.5'/%3E%3C/svg%3E");
}
.sd-icon {
display: inline-block; flex: none; inline-size: 1.25em; block-size: 1.25em;
background-color: currentColor; vertical-align: -.2em;
-webkit-mask: var(--sd-ico, none) center / contain no-repeat;
mask: var(--sd-ico, none) center / contain no-repeat;
}
.sd-icon--check { --sd-ico: var(--sd-ico-check); }
.sd-icon--x { --sd-ico: var(--sd-ico-x); }
.sd-icon--warn { --sd-ico: var(--sd-ico-warn); }
.sd-icon--info { --sd-ico: var(--sd-ico-info); }
.sd-icon--clock { --sd-ico: var(--sd-ico-clock); }
.sd-icon--plus { --sd-ico: var(--sd-ico-plus); }
.sd-icon--home { --sd-ico: var(--sd-ico-home); }
.sd-icon--calendar { --sd-ico: var(--sd-ico-calendar); }
.sd-icon--list { --sd-ico: var(--sd-ico-list); }
.sd-icon--user { --sd-ico: var(--sd-ico-user); }
.sd-icon--settings { --sd-ico: var(--sd-ico-settings); }
.sd-icon--sun { --sd-ico: var(--sd-ico-sun); }
.sd-icon--moon { --sd-ico: var(--sd-ico-moon); }
.sd-icon--print { --sd-ico: var(--sd-ico-print); }
.sd-icon--search { --sd-ico: var(--sd-ico-search); }
/* ===== Basis ===== */
.sd-scope, body.sd {
font-family: var(--sd-font); font-size: var(--sd-fs-base); line-height: var(--sd-lh-text);
color: var(--sd-ink); background: var(--sd-bg);
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
body.sd { margin: 0; min-block-size: 100vh; min-block-size: 100dvh; }
.sd *, .sd *::before, .sd *::after, .sd-scope *, .sd-scope *::before, .sd-scope *::after { box-sizing: border-box; }
.sd h1, .sd h2, .sd h3, .sd h4, .sd-scope h1, .sd-scope h2, .sd-scope h3, .sd-scope h4 {
line-height: var(--sd-lh-head); font-weight: 700; margin: 0 0 var(--sd-space-3); text-wrap: balance; letter-spacing: -.005em;
}
.sd h1, .sd-h1 { font-size: var(--sd-fs-h1); }
.sd h2, .sd-h2 { font-size: var(--sd-fs-h2); }
.sd h3, .sd-h3 { font-size: var(--sd-fs-h3); }
.sd h4, .sd-h4 { font-size: var(--sd-fs-lead); }
.sd p, .sd-scope p { margin: 0 0 var(--sd-space-4); max-inline-size: var(--sd-measure); }
.sd a, .sd-scope a { color: var(--sd-accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
.sd a:hover, .sd-scope a:hover { text-decoration-thickness: .16em; }
.sd :focus-visible, .sd-scope :focus-visible, :focus-visible.sd-btn {
outline: 3px solid var(--sd-focus); outline-offset: 3px; border-radius: var(--sd-radius-sm);
}
.sd ::selection { background: var(--sd-signature); color: #17231b; }
.sd-meta { font-size: var(--sd-fs-meta); color: var(--sd-ink-muted); }
.sd-lead { font-size: var(--sd-fs-lead); }
.sd-display { font-size: var(--sd-fs-display); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.sd-num { font-variant-numeric: tabular-nums; }
.sd-strong { font-weight: 700; }
.sd-mt-0 { margin-block-start: 0 !important; } .sd-mb-0 { margin-block-end: 0 !important; } .sd-mb-4 { margin-block-end: var(--sd-space-4) !important; } .sd-mt-4 { margin-block-start: var(--sd-space-4) !important; }
.sd-visually-hidden {
position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
/* Hilfsklassen fuers Layout (bewusst wenige) */
.sd-container { inline-size: 100%; max-inline-size: var(--sd-container); margin-inline: auto; padding-inline: var(--sd-gutter); }
.sd-container--narrow { max-inline-size: var(--sd-container-narrow); }
.sd-stack > * + * { margin-block-start: var(--sd-stack, var(--sd-space-4)); }
.sd-stack--lg { --sd-stack: var(--sd-space-6); }
.sd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sd-space-3); }
.sd-row--between { justify-content: space-between; }
.sd-grid { display: grid; gap: var(--sd-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
/* ===== Seite: Skip-Link, Kopfzeile, Navigation ===== */
.sd-skip {
position: absolute; inset-inline-start: var(--sd-space-3); inset-block-start: -10rem; z-index: var(--sd-z-toast);
background: var(--sd-ink); color: var(--sd-bg); padding: var(--sd-space-3) var(--sd-space-5);
border-radius: var(--sd-radius); font-weight: 700; text-decoration: none;
}
.sd-skip:focus { inset-block-start: var(--sd-space-3); }
.sd-header {
position: sticky; inset-block-start: 0; z-index: var(--sd-z-sticky);
background: var(--sd-surface); color: var(--sd-ink);
border-block-start: 6px solid var(--sd-signature); /* Markerstreifen: Signatur */
border-block-end: 1px solid var(--sd-line);
}
.sd-header__inner {
display: flex; align-items: center; gap: var(--sd-space-4);
min-block-size: 4rem; padding-block: var(--sd-space-2);
}
.sd-brand { display: inline-flex; align-items: center; gap: var(--sd-space-3); color: var(--sd-ink) !important; text-decoration: none !important; font-weight: 700; font-size: var(--sd-fs-lead); line-height: 1.1; min-block-size: var(--sd-target); }
.sd-brand img { block-size: 2.5rem; inline-size: auto; }
.sd-brand small { display: block; font-size: var(--sd-fs-meta); font-weight: 400; color: var(--sd-ink-muted); }
.sd-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sd-space-2); }
/* Navigation: <64em = feste Leiste unten (Daumen-Reichweite), >=64em = Links in der Kopfzeile */
.sd-nav { display: flex; }
.sd-nav__list { display: flex; margin: 0; padding: 0; list-style: none; gap: var(--sd-space-1); }
.sd-nav__link {
position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sd-space-2);
min-block-size: var(--sd-target); padding: var(--sd-space-2) var(--sd-space-4);
color: var(--sd-ink) !important; text-decoration: none !important; font-weight: 400; border-radius: var(--sd-radius);
}
.sd-nav__link:hover { background: var(--sd-hover); }
.sd-nav__link[aria-current="page"] { font-weight: 700; background: var(--sd-accent-soft); }
.sd-nav__link[aria-current="page"]::after { /* Marker unter dem aktuellen Punkt */
content: ""; position: absolute; inset-inline: var(--sd-space-4); inset-block-end: 3px; block-size: 4px;
background: var(--sd-signature); border-radius: 2px;
}
@media (min-width: 64em) { .sd-header .sd-nav { margin-inline-start: var(--sd-space-4); } }
@media (max-width: 63.999em) {
.sd-nav {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--sd-z-nav);
background: var(--sd-surface); border-block-start: 1px solid var(--sd-line);
padding-block-end: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px hsl(var(--sd-shadow-color) / .10);
}
.sd-nav__list { inline-size: 100%; gap: 0; }
.sd-nav__list > li { flex: 1 1 0; min-inline-size: 0; }
.sd-nav__link { flex-direction: column; gap: 2px; min-block-size: var(--sd-nav-h); padding: var(--sd-space-2) var(--sd-space-1); font-size: var(--sd-fs-meta); border-radius: 0; text-align: center; line-height: 1.15; }
.sd-nav__link[aria-current="page"]::after { inset-block: 0 auto; inset-inline: 20%; block-size: 5px; border-radius: 0 0 3px 3px; }
.sd-has-nav { padding-block-end: calc(var(--sd-nav-h) + env(safe-area-inset-bottom)); }
}
.sd-main { padding-block: var(--sd-space-5) var(--sd-space-8); }
.sd-page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sd-space-3); margin-block-end: var(--sd-space-5); }
.sd-page-head h1 { margin: 0; }
.sd-footer { padding-block: var(--sd-space-5); color: var(--sd-ink-muted); font-size: var(--sd-fs-meta); border-block-start: 1px solid var(--sd-line); }
/* Theme-Schalter (sd.js) */
.sd-theme-toggle { gap: var(--sd-space-2); }
/* ===== Knoepfe ===== */
.sd-btn {
--_bg: var(--sd-surface); --_fg: var(--sd-accent); --_bd: var(--sd-accent);
display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2);
min-block-size: var(--sd-target); padding: var(--sd-space-2) var(--sd-space-5);
font: 700 var(--sd-fs-base)/1.2 var(--sd-font); text-align: center; text-decoration: none !important; cursor: pointer;
color: var(--_fg) !important; background: var(--_bg); border: var(--sd-border-w) solid var(--_bd); border-radius: var(--sd-radius);
transition: background-color var(--sd-dur-fast) var(--sd-ease), transform var(--sd-dur-fast) var(--sd-ease), box-shadow var(--sd-dur-fast) var(--sd-ease);
-webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.sd-btn:hover { --_bg: var(--sd-accent-soft); }
.sd-btn:active { transform: translateY(1px); }
.sd-btn--primary { --_bg: var(--sd-accent); --_fg: var(--sd-on-accent); --_bd: var(--sd-accent); box-shadow: var(--sd-shadow-1); }
.sd-btn--primary:hover { --_bg: var(--sd-accent-hover); --_bd: var(--sd-accent-hover); }
.sd-btn--danger { --_bg: var(--sd-danger-solid); --_fg: var(--sd-on-danger-solid); --_bd: var(--sd-danger-solid); }
.sd-btn--danger:hover { --_bg: var(--sd-danger-solid); filter: brightness(.92); }
.sd-btn--quiet { --_bg: transparent; --_bd: transparent; --_fg: var(--sd-accent); }
.sd-btn--quiet:hover { --_bg: var(--sd-hover); }
.sd-btn--ghost-danger { --_fg: var(--sd-danger); --_bd: var(--sd-danger); }
.sd-btn--ghost-danger:hover { --_bg: var(--sd-danger-bg); }
.sd-btn--lg { min-block-size: var(--sd-target-lg); font-size: var(--sd-fs-lead); padding-inline: var(--sd-space-6); }
.sd-btn--block { display: flex; inline-size: 100%; }
.sd-btn--icon { padding-inline: var(--sd-space-2); min-inline-size: var(--sd-target); }
.sd-btn[disabled], .sd-btn[aria-disabled="true"] {
--_bg: var(--sd-sunken); --_fg: var(--sd-ink-muted); --_bd: var(--sd-line); box-shadow: none; cursor: not-allowed; transform: none; filter: none;
}
.sd-btn[aria-busy="true"] { cursor: progress; }
.sd-btn[aria-busy="true"]::before { content: ""; inline-size: 1em; block-size: 1em; border: 3px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: sd-spin .8s linear infinite; }
.sd-btn-group { display: flex; flex-wrap: wrap; gap: var(--sd-space-3); align-items: center; }
@media (pointer: coarse) { .sd-btn { min-block-size: var(--sd-target-lg); } .sd-btn--icon { min-inline-size: var(--sd-target-lg); } }
/* ===== Segment-Schalter (Radio-Gruppe, rein CSS) =====
...
*/
.sd-segmented { display: inline-flex; max-inline-size: 100%; border: var(--sd-border-w) solid var(--sd-border-strong); border-radius: var(--sd-radius); background: var(--sd-surface); overflow: hidden; }
.sd-segmented label { position: relative; display: flex; flex: 1 1 auto; }
.sd-segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.sd-segmented span {
display: flex; align-items: center; justify-content: center; gap: var(--sd-space-2); flex: 1;
min-block-size: calc(var(--sd-target) - 2 * var(--sd-border-w)); padding: var(--sd-space-2) var(--sd-space-4);
font-weight: 400; color: var(--sd-ink); text-align: center; transition: background-color var(--sd-dur-fast) var(--sd-ease);
}
.sd-segmented label + label span { border-inline-start: 1px solid var(--sd-border-strong); }
.sd-segmented input:hover + span { background: var(--sd-hover); }
.sd-segmented input:checked + span { background: var(--sd-accent); color: var(--sd-on-accent); font-weight: 700; }
.sd-segmented input:checked + span::before { /* Haken: Auswahl nie nur ueber Farbe */
content: ""; inline-size: 1.1em; block-size: 1.1em; background: currentColor;
-webkit-mask: var(--sd-ico-check) center / contain no-repeat; mask: var(--sd-ico-check) center / contain no-repeat;
}
.sd-segmented input:focus-visible + span { outline: 3px solid var(--sd-focus); outline-offset: -5px; }
.sd-segmented input:disabled + span { color: var(--sd-ink-muted); background: var(--sd-sunken); cursor: not-allowed; }
@media (pointer: coarse) { .sd-segmented span { min-block-size: calc(var(--sd-target-lg) - 2 * var(--sd-border-w)); } }
@media (max-width: 30em) { .sd-segmented { display: flex; } .sd-segmented span { padding-inline: var(--sd-space-2); } }
/* ===== Toggle (Schalter) =====
*/
.sd-switch { display: inline-flex; align-items: center; gap: var(--sd-space-3); min-block-size: var(--sd-target); cursor: pointer; position: relative; }
.sd-switch input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; inset: 0; margin: 0; cursor: pointer; }
.sd-switch__track {
position: relative; flex: none; inline-size: 3.75rem; block-size: 2.25rem; border-radius: var(--sd-radius-pill);
background: var(--sd-surface); border: var(--sd-border-w) solid var(--sd-border-strong); transition: background-color var(--sd-dur) var(--sd-ease);
}
.sd-switch__track::before { /* Griff */
content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 3px; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: -.75rem;
border-radius: 50%; background: var(--sd-ink); transition: transform var(--sd-dur) var(--sd-ease), background-color var(--sd-dur) var(--sd-ease);
}
.sd-switch__track::after { /* Haken im Griff, nur wenn an */
content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 3px; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: -.75rem;
background: var(--sd-accent); -webkit-mask: var(--sd-ico-check) center / 70% no-repeat; mask: var(--sd-ico-check) center / 70% no-repeat;
opacity: 0; transform: translateX(1.5rem); transition: opacity var(--sd-dur) var(--sd-ease);
}
.sd-switch input:checked + .sd-switch__track { background: var(--sd-accent); border-color: var(--sd-accent); }
.sd-switch input:checked + .sd-switch__track::before { transform: translateX(1.5rem); background: var(--sd-on-accent); }
.sd-switch input:checked + .sd-switch__track::after { opacity: 1; }
.sd-switch input:focus-visible + .sd-switch__track { outline: 3px solid var(--sd-focus); outline-offset: 3px; }
.sd-switch input:disabled + .sd-switch__track { opacity: .55; }
.sd-switch input:disabled ~ .sd-switch__text { color: var(--sd-ink-muted); }
[dir="rtl"] .sd-switch input:checked + .sd-switch__track::before { transform: translateX(-1.5rem); }
/* ===== Formularfelder =====
*/
.sd-field { display: flex; flex-direction: column; gap: var(--sd-space-2); margin-block-end: var(--sd-space-5); }
.sd-field > label, .sd-label { font-weight: 700; }
.sd-field .sd-hint, .sd-hint { margin: 0; color: var(--sd-ink-muted); font-size: var(--sd-fs-meta); }
.sd-input, .sd-select, .sd-textarea {
inline-size: 100%; min-block-size: 3.25rem; padding: var(--sd-space-3) var(--sd-space-4);
font: 400 var(--sd-fs-base)/1.4 var(--sd-font); color: var(--sd-ink); background: var(--sd-surface);
border: var(--sd-border-w) solid var(--sd-border-strong); border-radius: var(--sd-radius);
transition: border-color var(--sd-dur-fast) var(--sd-ease); accent-color: var(--sd-accent);
}
.sd-textarea { min-block-size: 7rem; resize: vertical; }
.sd-input::placeholder, .sd-textarea::placeholder { color: var(--sd-ink-muted); opacity: 1; }
.sd-input:hover, .sd-select:hover, .sd-textarea:hover { border-color: var(--sd-ink); }
.sd-input:focus-visible, .sd-select:focus-visible, .sd-textarea:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; border-color: var(--sd-ink); }
.sd-input:disabled, .sd-select:disabled, .sd-textarea:disabled { background: var(--sd-sunken); color: var(--sd-ink-muted); border-style: dashed; cursor: not-allowed; }
.sd-input[aria-invalid="true"], .sd-select[aria-invalid="true"], .sd-textarea[aria-invalid="true"], .sd-field--error .sd-input, .sd-field--error .sd-select, .sd-field--error .sd-textarea {
border-color: var(--sd-danger); border-inline-start-width: 8px; /* dicke Kante + Text + Icon: nie nur Farbe */
}
.sd-error { display: flex; gap: var(--sd-space-2); align-items: flex-start; margin: 0; color: var(--sd-danger); font-weight: 700; font-size: var(--sd-fs-base); }
.sd-error::before { content: ""; flex: none; inline-size: 1.25em; block-size: 1.25em; margin-block-start: .1em; background: currentColor; -webkit-mask: var(--sd-ico-warn) center / contain no-repeat; mask: var(--sd-ico-warn) center / contain no-repeat; }
.sd-fieldset { border: 0; padding: 0; margin: 0 0 var(--sd-space-5); }
.sd-fieldset legend { font-weight: 700; padding: 0; margin-block-end: var(--sd-space-2); }
/* Checkbox / Radio: native Controls, vergroessert, volle Zeile klickbar */
.sd-check { display: flex; align-items: center; gap: var(--sd-space-3); min-block-size: var(--sd-target); cursor: pointer; }
.sd-check input { inline-size: 1.75rem; block-size: 1.75rem; flex: none; margin: 0; accent-color: var(--sd-accent); cursor: pointer; }
/* ===== Karten ("Bon-Kante": Marker oben, optional Perforation) ===== */
.sd-card {
position: relative; background: var(--sd-surface); color: var(--sd-ink);
border: 1px solid var(--sd-line); border-radius: var(--sd-radius-lg); padding: var(--sd-space-5); box-shadow: var(--sd-shadow-1);
}
.sd-card--bon { border-block-start: 6px solid var(--sd-signature); border-start-start-radius: var(--sd-radius); border-start-end-radius: var(--sd-radius); }
.sd-card--flat { box-shadow: none; }
.sd-card__title { margin: 0 0 var(--sd-space-2); font-size: var(--sd-fs-h3); }
.sd-card__meta { color: var(--sd-ink-muted); font-size: var(--sd-fs-meta); margin: 0 0 var(--sd-space-3); }
.sd-card__foot { margin-block-start: var(--sd-space-4); display: flex; flex-wrap: wrap; gap: var(--sd-space-3); }
.sd-perf { /* Perforationslinie wie am Kassenbon / Bestellblock */
block-size: 0; border: 0; margin: var(--sd-space-4) calc(-1 * var(--sd-space-5)); border-block-start: 3px dotted var(--sd-border-strong); opacity: .8;
}
.sd-card--select { cursor: pointer; }
.sd-card--select:hover { box-shadow: var(--sd-shadow-2); }
.sd-card--select[aria-current="true"], .sd-card--select[aria-selected="true"], .sd-card.is-selected {
border-color: var(--sd-accent); outline: 3px solid var(--sd-accent); outline-offset: -3px;
}
.sd-card.is-selected::before, .sd-card--select[aria-selected="true"]::before { /* Plakette */
content: ""; position: absolute; inset-block-start: var(--sd-space-3); inset-inline-end: var(--sd-space-3); inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--sd-accent);
}
.sd-card.is-selected::after, .sd-card--select[aria-selected="true"]::after { /* Haken darin */
content: ""; position: absolute; inset-block-start: var(--sd-space-3); inset-inline-end: var(--sd-space-3); inline-size: 2rem; block-size: 2rem; background: var(--sd-on-accent);
-webkit-mask: var(--sd-ico-check) center / 65% no-repeat; mask: var(--sd-ico-check) center / 65% no-repeat;
}
/* ===== Listen ===== */
.sd-list { list-style: none; margin: 0; padding: 0; background: var(--sd-surface); border: 1px solid var(--sd-line); border-radius: var(--sd-radius-lg); overflow: hidden; }
.sd-list__item { display: flex; align-items: center; gap: var(--sd-space-4); min-block-size: 4rem; padding: var(--sd-space-3) var(--sd-space-4); }
.sd-list__item + .sd-list__item { border-block-start: 1px solid var(--sd-line); }
.sd-list__main { flex: 1; min-inline-size: 0; }
.sd-list__title { font-weight: 700; display: block; overflow-wrap: anywhere; }
.sd-list__sub { color: var(--sd-ink-muted); font-size: var(--sd-fs-meta); display: block; }
a.sd-list__item { color: var(--sd-ink); text-decoration: none; }
a.sd-list__item:hover { background: var(--sd-hover); }
a.sd-list__item[aria-current="page"] { background: var(--sd-accent-soft); box-shadow: inset 6px 0 0 var(--sd-signature); }
/* ===== Tabellen (mobil: jede Zeile wird eine Karte; td braucht data-label) ===== */
.sd-table-wrap { overflow-x: auto; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-lg); background: var(--sd-surface); }
.sd-table { inline-size: 100%; border-collapse: collapse; font-size: var(--sd-fs-base); }
.sd-table caption { text-align: start; padding: var(--sd-space-3) var(--sd-space-4); font-weight: 700; font-size: var(--sd-fs-lead); }
.sd-table th, .sd-table td { text-align: start; padding: var(--sd-space-3) var(--sd-space-4); vertical-align: top; }
.sd-table thead th { background: var(--sd-sunken); font-weight: 700; border-block-end: 2px solid var(--sd-border-strong); white-space: nowrap; }
.sd-table tbody tr + tr > * { border-block-start: 1px solid var(--sd-line); }
.sd-table tbody tr:hover { background: var(--sd-hover); }
.sd-table .sd-num, .sd-table td.sd-num { text-align: end; }
@media (max-width: 40em) {
.sd-table, .sd-table tbody, .sd-table tr, .sd-table td { display: block; inline-size: 100%; }
.sd-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.sd-table tbody tr { padding: var(--sd-space-3) 0; }
.sd-table tbody tr + tr { border-block-start: 6px solid var(--sd-sunken); }
.sd-table tbody tr + tr > * { border-block-start: 0; }
.sd-table td { display: grid; grid-template-columns: minmax(6rem, 35%) 1fr; gap: var(--sd-space-3); padding: var(--sd-space-2) var(--sd-space-4); text-align: start !important; }
.sd-table td::before { content: attr(data-label); font-weight: 700; color: var(--sd-ink-muted); font-size: var(--sd-fs-meta); }
.sd-table td:not([data-label])::before { content: none; }
}
/* ===== Badges / Chips: IMMER Symbol + Wort ===== */
.sd-badge {
display: inline-flex; align-items: center; gap: .4em; padding: .15em .7em .15em .55em; min-block-size: 1.9rem;
font-size: var(--sd-fs-meta); font-weight: 700; line-height: 1.2; border-radius: var(--sd-radius-pill);
color: var(--_c, var(--sd-ink)); background: var(--_b, var(--sd-sunken)); border: 2px solid currentColor; white-space: nowrap;
}
.sd-badge::before { content: ""; flex: none; inline-size: 1.1em; block-size: 1.1em; background: currentColor; -webkit-mask: var(--_i, var(--sd-ico-info)) center / contain no-repeat; mask: var(--_i, var(--sd-ico-info)) center / contain no-repeat; }
.sd-badge--success { --_c: var(--sd-success); --_b: var(--sd-success-bg); --_i: var(--sd-ico-check); }
.sd-badge--warning { --_c: var(--sd-warning); --_b: var(--sd-warning-bg); --_i: var(--sd-ico-clock); }
.sd-badge--danger { --_c: var(--sd-danger); --_b: var(--sd-danger-bg); --_i: var(--sd-ico-warn); }
.sd-badge--info { --_c: var(--sd-info); --_b: var(--sd-info-bg); --_i: var(--sd-ico-info); }
.sd-badge--neutral { --_c: var(--sd-ink); --_b: var(--sd-sunken); --_i: var(--sd-ico-clock); }
.sd-badge--plain::before { content: none; }
.sd-chip { /* bedienbarer Filter: Checkbox in Pillenform */
position: relative; display: inline-flex; align-items: center; gap: var(--sd-space-2); min-block-size: var(--sd-target); padding: 0 var(--sd-space-4);
border: var(--sd-border-w) solid var(--sd-border-strong); border-radius: var(--sd-radius-pill); background: var(--sd-surface); color: var(--sd-ink); cursor: pointer;
}
.sd-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
.sd-chip:has(input:checked) { background: var(--sd-accent); color: var(--sd-on-accent); border-color: var(--sd-accent); font-weight: 700; }
.sd-chip:has(input:checked)::before { content: ""; inline-size: 1.1em; block-size: 1.1em; background: currentColor; -webkit-mask: var(--sd-ico-check) center / contain no-repeat; mask: var(--sd-ico-check) center / contain no-repeat; }
.sd-chip:has(input:focus-visible) { outline: 3px solid var(--sd-focus); outline-offset: 3px; }
/* ===== Hinweise (inline) und Toasts ===== */
.sd-alert {
--_c: var(--sd-info); --_b: var(--sd-info-bg); --_i: var(--sd-ico-info);
display: grid; grid-template-columns: auto 1fr auto; gap: var(--sd-space-3); align-items: start;
padding: var(--sd-space-4); background: var(--_b); color: var(--sd-ink); border: 2px solid var(--_c); border-inline-start-width: 8px; border-radius: var(--sd-radius);
}
.sd-alert::before { content: ""; inline-size: 1.75rem; block-size: 1.75rem; background: var(--_c); -webkit-mask: var(--_i) center / contain no-repeat; mask: var(--_i) center / contain no-repeat; }
.sd-alert__title { display: block; font-weight: 700; color: var(--_c); }
.sd-alert__body { margin: 0; }
.sd-alert--success { --_c: var(--sd-success); --_b: var(--sd-success-bg); --_i: var(--sd-ico-check); }
.sd-alert--warning { --_c: var(--sd-warning); --_b: var(--sd-warning-bg); --_i: var(--sd-ico-warn); }
.sd-alert--danger { --_c: var(--sd-danger); --_b: var(--sd-danger-bg); --_i: var(--sd-ico-warn); }
.sd-alert > .sd-btn { align-self: center; }
.sd-toast-region {
position: fixed; z-index: var(--sd-z-toast); inset-inline: var(--sd-gutter); inset-block-end: calc(var(--sd-gutter) + env(safe-area-inset-bottom));
display: flex; flex-direction: column; align-items: center; gap: var(--sd-space-3); pointer-events: none;
}
@media (max-width: 63.999em) { .sd-toast-region { inset-block-end: calc(var(--sd-nav-h) + var(--sd-space-4) + env(safe-area-inset-bottom)); } }
.sd-toast-region > * { pointer-events: auto; inline-size: min(100%, 34rem); box-shadow: var(--sd-shadow-3); animation: sd-rise var(--sd-dur-slow) var(--sd-ease); }
/* ===== Dialog / Sheet (natives