/* ATTORI Intern: Grundlage für Team- und Kundenseiten. Werkstatt-Register aus dem Kundenraum
   (web/src/components/werkstatt/werkstatt.css): gebürstetes Aluminium, Chrom nur grau, Perlen für
   Fortschritt, Apple-Blau als einzige Aktionsfarbe. Bewegung kurz (unter 300 ms) und auf der Kurve
   cubic-bezier(.32,.72,0,1); bei reduzierter Bewegung nur Überblendungen. Tippziele mindestens 44 px,
   Hauptknöpfe 52 px.
   Schrift wie attori.at (web/docs/schriftbild.md): Space Grotesk für Überschriften und große Zahlen,
   Geist für Bedienung, Geist Mono für Kennzeilen und Zeiten, Source Serif 4 für die Worte des Kunden.
   Alles selbst gehostet, Lizenzen in public/schrift/. */
@font-face { font-family: 'Geist'; src: url('/public/schrift/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; src: url('/public/schrift/geist-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; src: url('/public/schrift/space-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; src: url('/public/schrift/space-grotesk-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('/public/schrift/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; src: url('/public/schrift/geist-mono-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; src: url('/public/schrift/source-serif-4-latin-standard-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; src: url('/public/schrift/source-serif-4-latin-ext-standard-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; src: url('/public/schrift/source-serif-4-latin-standard-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; src: url('/public/schrift/source-serif-4-latin-ext-standard-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --grund: #F2F2F5;
  --karte: #FFFFFF;
  --erhoben: #F9F9FB;
  --gedrueckt: #EDEDF0;
  --linie: #E3E3E8;
  --t1: #1D1D1F;
  --t2: #333336;
  --t3: #48484A;
  --t4: #6E6E73;
  --aktion: #0071E3;
  --aktion-hell: #0A84FF;
  --aktion-text: #0066CC;
  --aktion-flaeche: #EAF3FE;
  --gut: #2FB35A;
  --gut-text: #1B7F3C;
  --gut-flaeche: #E9F7EE;
  --dran: #EDB800;
  --dran-flaeche: #FFF6D6;
  --dran-text: #6B5200;
  --rot: #E5482E;
  --fehler: #C9301C;
  --schrift: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --display: 'Space Grotesk', 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --stimme: 'Source Serif 4', Charter, Georgia, serif;
  --kurve: cubic-bezier(.32, .72, 0, 1);
  --weich: cubic-bezier(.4, 0, .2, 1);
  --alu: linear-gradient(180deg, #FFFFFF 0%, #F5F5F8 34%, #E9EAEE 100%);
  --alu-kante: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.1);
  --metall-schatten: 0 1px 1px rgba(0,0,0,.04), 0 14px 34px -16px rgba(22,26,36,.24), 0 44px 90px -44px rgba(22,26,36,.28);
  --glanz: linear-gradient(104deg, transparent 32%, rgba(255,255,255,.8) 47%, rgba(255,255,255,.25) 54%, transparent 68%);
  --licht: radial-gradient(90% 55% at 50% -12%, rgba(255,255,255,.75), transparent 62%);
  --chrom: conic-gradient(from 210deg, #FFFFFF, #AEB3BC 16%, #F2F3F6 32%, #9398A2 50%, #F2F3F6 66%, #AEB3BC 84%, #FFFFFF);
  --chrom-ring: conic-gradient(from 210deg, #F4F5F7, #B9BDC4 16%, #FFFFFF 32%, #8E939B 50%, #E6E8EB 66%, #A8ACB3 84%, #F4F5F7);
  --perle-gruen: radial-gradient(circle at 50% 26%, #7BE59A 0%, #34B95F 52%, #1E8A43 100%);
  --perle-blau: radial-gradient(circle at 50% 26%, #6FB4FF 0%, #0A7BEA 52%, #0059B8 100%);
  --perle-rot: radial-gradient(circle at 50% 30%, #FF8A73 0%, #E5482E 55%, #B02A15 100%);
  --rille: rgba(0,0,0,.07);
  --rille-schatten: inset 0 1px 1.5px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.8);
  --riffel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><g transform='translate(5.5 5.5) rotate(45)'><ellipse rx='4.2' ry='1.25' cy='.7' fill='rgba(0,0,0,.075)'/><ellipse rx='4.2' ry='1.25' fill='rgba(255,255,255,.95)'/></g><g transform='translate(16.5 16.5) rotate(-45)'><ellipse rx='4.2' ry='1.25' cy='.7' fill='rgba(0,0,0,.075)'/><ellipse rx='4.2' ry='1.25' fill='rgba(255,255,255,.95)'/></g></svg>");
  --niete: #FFFFFF 0 1px, #C9CCD2 1.6px, #8D9199 3.2px, rgba(0,0,0,.22) 3.9px, transparent 4.6px;
  --schatten-1: 0 .5px 0 rgba(0,0,0,.04), 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.14);
  --schatten-2: 0 1px 2px rgba(16,24,40,.05), 0 18px 44px -18px rgba(16,24,40,.24);
  --r-gross: 24px;
  --r: 18px;
  --r-klein: 14px;
  --glas: rgba(248,248,250,.74);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; color: var(--t1); font: 17px/1.5 var(--schrift); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto;
  background: radial-gradient(120% 60% at 50% -20%, #FFFFFF 0%, rgba(255,255,255,0) 60%), var(--grund);
  background-attachment: fixed;
}
h1, h2, h3 { margin: 0; color: var(--t1); text-wrap: balance; font-family: var(--display); }
h1 { font-size: clamp(32px, 3.8vw, 44px); line-height: 1.04; letter-spacing: -.042em; font-weight: 700; }
h2 { font-size: 23px; line-height: 1.16; letter-spacing: -.028em; font-weight: 600; }
h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0; }
a { color: var(--aktion-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--aktion) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--aktion) 22%, transparent); }
.eyebrow { font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; color: var(--t4); text-transform: uppercase; }
.leise { color: var(--t4); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zahlen { font-variant-numeric: tabular-nums; }

/* ---------- Symbole (24er Raster, Kontur) ---------- */
.sym { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Knöpfe ---------- */
.knopf {
  --h: 52px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 17px/1 var(--schrift); letter-spacing: -.01em; white-space: nowrap; text-decoration: none !important;
  color: var(--t1); background: var(--alu); box-shadow: var(--alu-kante), 0 2px 6px -3px rgba(0,0,0,.2);
  transition: transform 160ms var(--kurve), box-shadow 200ms var(--weich), background-color 200ms var(--weich), opacity 200ms var(--weich);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.knopf:active { transform: scale(.97); }
.knopf .sym { width: 20px; height: 20px; }
.knopf.haupt {
  color: #fff; background: linear-gradient(180deg, #1A86F2 0%, #0071E3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,60,140,.3), 0 10px 22px -10px rgba(0,113,227,.7);
}
.knopf.haupt:active { background: linear-gradient(180deg, #0B78E6 0%, #0064CC 100%); }
.knopf.leise { background: transparent; box-shadow: none; color: var(--aktion-text); padding: 0 14px; }
.knopf.leise:active { background: var(--gedrueckt); }
.knopf.klein { --h: 44px; padding: 0 18px; font-size: 15px; }
.knopf.rund { width: var(--h); padding: 0; }
.knopf.breit { width: 100%; }
.knopf.gross { --h: 60px; font-size: 18px; padding: 0 30px; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .knopf:not([disabled]):hover { box-shadow: var(--alu-kante), 0 6px 14px -6px rgba(0,0,0,.28); }
  .knopf.haupt:not([disabled]):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,60,140,.3), 0 14px 28px -10px rgba(0,113,227,.8); }
  .knopf.leise:not([disabled]):hover { background: color-mix(in srgb, var(--aktion) 8%, transparent); box-shadow: none; }
}

/* ---------- Felder ---------- */
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
  width: 100%; min-height: 52px; padding: 14px 16px; border: 0; border-radius: var(--r-klein);
  font: 400 17px/1.4 var(--schrift); letter-spacing: -.011em; color: var(--t1);
  background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--linie), inset 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow 200ms var(--weich), background-color 200ms var(--weich);
  -webkit-appearance: none; appearance: none;
}
textarea { resize: none; field-sizing: content; min-height: 52px; }
select { padding-right: 44px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 18px center; }
input::placeholder, textarea::placeholder { color: #A1A1A6; }
input:focus, textarea:focus, select:focus { outline: none; background-color: var(--karte); box-shadow: inset 0 0 0 2px var(--aktion), 0 0 0 4px color-mix(in srgb, var(--aktion) 14%, transparent); }
input[type="date"] { min-width: 0; }
label { display: block; }
.feld { display: grid; gap: 8px; min-width: 0; }
.feld-titel { font-size: 15px; font-weight: 600; color: var(--t2); letter-spacing: -.01em; }
.feld-hilfe { font-size: 14px; color: var(--t4); line-height: 1.4; }

/* ---------- Chips (Auswahl zum Tippen) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  font: 500 16px/1.2 var(--schrift); color: var(--t2); background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie), 0 1px 2px rgba(0,0,0,.04);
  transition: background-color 180ms var(--weich), color 180ms var(--weich), box-shadow 180ms var(--weich), transform 160ms var(--kurve);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.chip span::before {
  content: ""; display: none; width: 14px; height: 14px; opacity: 0; transform: scale(.4);
  background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/contain no-repeat;
  transition: opacity 180ms var(--weich), transform 220ms var(--kurve);
}
.chip input:checked + span { color: #fff; background: linear-gradient(180deg, #1A86F2, #0071E3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(0,113,227,.8); }
.chip input:checked + span::before { display: block; opacity: 1; transform: none; }
@starting-style { .chip input:checked + span::before { opacity: 0; transform: scale(.4); } }
.chip input:active + span { transform: scale(.96); }
.chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--aktion) 55%, transparent); outline-offset: 2px; }
.chip input:disabled + span { opacity: .55; }

/* ---------- Segmentschalter (Alu-Schieber in einer Rille) ---------- */
.segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--gedrueckt); box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9); }
.segment > a, .segment > label > span, .segment > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  font: 600 15px/1 var(--schrift); color: var(--t3); background: transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background-color 200ms var(--weich), color 200ms var(--weich), box-shadow 200ms var(--weich), transform 160ms var(--kurve);
}
.segment > label { position: relative; display: inline-flex; }
.segment > label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment > label > span { pointer-events: none; }
.segment > a[aria-current="page"], .segment > label input:checked + span, .segment > button[aria-pressed="true"] {
  color: var(--t1); background: var(--alu); box-shadow: var(--alu-kante), 0 2px 6px -2px rgba(0,0,0,.18);
}
.segment > a:active, .segment > label input:active + span, .segment > button:active { transform: scale(.97); }
.segment > label input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--aktion) 55%, transparent); outline-offset: 1px; }
.segment.gross > a, .segment.gross > label > span, .segment.gross > button { min-height: 46px; padding: 0 20px; font-size: 16px; }

/* ---------- Karten und Metallflächen ---------- */
.karte { background: var(--karte); border-radius: var(--r-gross); box-shadow: var(--schatten-1); padding: 24px; min-width: 0; }
.alu-flaeche { background: var(--alu); border-radius: var(--r-gross); box-shadow: var(--alu-kante), var(--schatten-1); }
.riffel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-gross); padding: 28px;
  background: var(--riffel) 0 0 / 22px 22px, var(--alu);
  box-shadow: var(--alu-kante), var(--metall-schatten);
}
.riffel.nieten {
  background:
    radial-gradient(circle at 18px 18px, var(--niete)), radial-gradient(circle at calc(100% - 18px) 18px, var(--niete)),
    radial-gradient(circle at 18px calc(100% - 18px), var(--niete)), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), var(--niete)),
    var(--riffel) 0 0 / 22px 22px, var(--alu);
}
.riffel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--licht); }
.riffel.glanz::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--glanz); opacity: 0; transform: translateX(-110%); animation: glanz-fahrt 1.5s .3s var(--weich) both; }
@keyframes glanz-fahrt { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(110%); } }

/* ---------- Flüssiges Metall (metall.js) ---------- */
.lm-flaeche { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lm-flaeche canvas { display: block; width: 100%; height: 100%; }
.logo-metall {
  position: relative; isolation: isolate; display: block; aspect-ratio: 1200 / 371; height: auto;
  background: linear-gradient(180deg, #F4F5F7 0%, #B9BDC4 30%, #FFFFFF 48%, #8E939B 70%, #D9DBDF 100%);
  -webkit-mask: url('/public/logo-hell.svg') center / contain no-repeat; mask: url('/public/logo-hell.svg') center / contain no-repeat;
}
.logo-metall.lm-an { background: none; -webkit-mask: none; mask: none; }
.chromring { position: relative; isolation: isolate; border-radius: 50%; border: 3px solid transparent; background: radial-gradient(circle at 50% 35%, var(--karte), var(--erhoben) 72%) padding-box, var(--chrom-ring) border-box; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 6px 14px -6px rgba(0,0,0,.28); }
[data-metall="kreis"].lm-an { border: 0; padding: var(--rand, 3px); background: none; }
[data-metall="kreis"].lm-an::after { content: ""; position: absolute; inset: var(--rand, 3px); z-index: -1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--karte), var(--erhoben) 70%); box-shadow: inset 0 2px 7px rgba(0,0,0,.16), inset 0 0 0 .5px rgba(0,0,0,.12); }

/* ---------- Perlen (Fortschritt) ---------- */
.perle {
  position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--t4); font: 650 14px/1 var(--schrift); font-variant-numeric: tabular-nums;
  border: 2px solid transparent;
  background: radial-gradient(circle at 50% 30%, var(--karte), var(--erhoben)) padding-box, var(--chrom) border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 3px 8px -3px rgba(0,0,0,.18);
  transition: background 240ms var(--weich), color 240ms var(--weich), box-shadow 240ms var(--weich);
}
.perle .sym { width: 18px; height: 18px; stroke-width: 1.9; }
.perle.gruen, .fertig > .perle, .gestellt .perle { border: 0; color: #fff; background: var(--perle-gruen); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,60,20,.25), 0 3px 8px -2px rgba(31,142,68,.55); }
.perle.gruen .sym, .fertig > .perle .sym, .gestellt .perle .sym { stroke-width: 2.6; }
.perle.blau, .jetzt > .perle { border: 0; color: #fff; background: var(--perle-blau); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,40,110,.3), 0 0 0 5px color-mix(in srgb, var(--aktion) 15%, transparent), 0 4px 12px -2px rgba(0,113,227,.55); }
.perle.klein { width: 26px; height: 26px; font-size: 12px; }
.perle.klein .sym { width: 14px; height: 14px; }

/* ---------- Drehzahlmesser ---------- */
.tacho { position: relative; width: 148px; height: 148px; flex: none; border-radius: 50%; }
.tacho.chromring { --rand: 5px; border-width: 5px; background: radial-gradient(circle at 50% 38%, var(--karte), var(--erhoben) 70%) padding-box, var(--chrom-ring) border-box; box-shadow: 0 2px 3px rgba(0,0,0,.08), 0 10px 22px -10px rgba(0,0,0,.35), inset 0 2px 6px rgba(0,0,0,.12); }
.tacho svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.tacho-spur { fill: none; stroke: var(--gedrueckt); stroke-width: 5; stroke-linecap: round; }
.tacho-wert { fill: none; stroke: var(--gut); stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--anteil, 0) 1; transition: stroke-dasharray 300ms var(--kurve); }
.tacho-wert.null { stroke-width: 0; }
.tacho-strich { stroke: var(--t4); stroke-width: .9; stroke-linecap: round; opacity: .55; }
.tacho-strich.gross { stroke: var(--t2); stroke-width: 1.6; opacity: .9; }
.tacho-zahl { font: 500 8px var(--mono); fill: var(--t3); font-variant-numeric: tabular-nums; }
.tacho-nadel { transform-box: view-box; transform-origin: 60px 60px; transform: rotate(var(--winkel)); transition: transform 300ms cubic-bezier(.34, 1.4, .55, 1); animation: nadel-rein 1.1s cubic-bezier(.34, 1.45, .55, 1) .35s backwards; }
.tacho-nadel path { fill: var(--rot); }
.tacho-nabe { fill: #2B2D31; }
.tacho-nabe-licht { fill: rgba(255,255,255,.55); }
.tacho-text { position: absolute; left: 0; right: 0; bottom: 13%; display: grid; justify-items: center; pointer-events: none; }
.tacho-text b { font: 700 28px/1 var(--display); letter-spacing: -.045em; color: var(--t1); font-variant-numeric: tabular-nums; }
.tacho-text span { font: 600 10px/1.25 var(--schrift); letter-spacing: 0; color: var(--t4); white-space: nowrap; }
@keyframes nadel-rein { from { transform: rotate(-120deg); } }

/* ---------- Abzeichen ---------- */
.marke-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px; border-radius: 999px; font: 600 13px/1 var(--schrift); white-space: nowrap; }
.marke-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.marke-status.gut { color: var(--gut-text); background: var(--gut-flaeche); }
.marke-status.warten { color: var(--dran-text); background: var(--dran-flaeche); }
.marke-status.warten::before { background: var(--dran); }
.marke-status.laeuft { color: var(--aktion-text); background: var(--aktion-flaeche); }
.marke-status.still { color: var(--t3); background: var(--gedrueckt); }
.marke-status.still::before { display: none; }

/* ---------- Blatt von unten (Dialog) ---------- */
dialog.blatt {
  position: fixed; inset: auto 0 0 0; width: min(680px, 100%); max-width: 100%; max-height: min(92dvh, 860px); margin: 0 auto; padding: 0;
  border: 0; border-radius: 30px 30px 0 0; color: var(--t1); overflow: auto; overscroll-behavior: contain;
  background: rgba(252,252,253,.97); box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 -24px 60px -20px rgba(0,0,0,.35);
}
@supports (backdrop-filter: blur(1px)) { dialog.blatt { background: rgba(250,250,252,.88); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } }
dialog.blatt[open] { animation: blatt-rein 300ms var(--kurve); }
dialog.blatt.geht { animation: blatt-raus 220ms var(--weich) forwards; }
dialog.blatt::backdrop { background: rgba(20,20,24,.32); animation: schleier-rein 260ms var(--weich); }
dialog.blatt.geht::backdrop { animation: schleier-raus 220ms var(--weich) forwards; }
.blatt-innen { padding: 10px 28px calc(28px + env(safe-area-inset-bottom)); display: grid; gap: 22px; }
.blatt-griff { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.16); margin-bottom: 2px; }
.blatt-kopf { display: grid; gap: 6px; }
.blatt-kopf p { color: var(--t3); font-size: 16px; }
.blatt-fuss { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.blatt fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.blatt legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--t2); }
@keyframes blatt-rein { from { transform: translateY(100%); } }
@keyframes blatt-raus { to { transform: translateY(100%); } }
@keyframes schleier-rein { from { opacity: 0; } }
@keyframes schleier-raus { to { opacity: 0; } }
@media (min-width: 900px) and (min-height: 700px) {
  dialog.blatt.mitte { inset: 0; margin: auto; border-radius: 30px; max-height: min(86dvh, 820px); }
  dialog.blatt.mitte[open] { animation: blatt-auf 280ms var(--kurve); }
  dialog.blatt.mitte.geht { animation: blatt-zu 200ms var(--weich) forwards; }
  dialog.blatt.mitte .blatt-griff { display: none; }
  dialog.blatt.mitte .blatt-innen { padding-top: 28px; padding-bottom: 28px; }
}
@keyframes blatt-auf { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes blatt-zu { to { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- Hinweis unten (mit Rückgängig) ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); min-height: 52px; padding: 0 8px 0 22px; border-radius: 999px;
  color: #fff; font: 500 16px/1.3 var(--schrift); background: rgba(29,29,31,.9); box-shadow: 0 16px 40px -14px rgba(0,0,0,.5);
  animation: toast-rein 280ms var(--kurve);
}
@supports (backdrop-filter: blur(1px)) { .toast { background: rgba(29,29,31,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } }
.toast.allein { padding-right: 22px; }
.toast button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 15px/1 var(--schrift); color: #6AB1FF; background: rgba(255,255,255,.1); cursor: pointer; }
.toast.geht { animation: toast-raus 200ms var(--weich) forwards; }
@keyframes toast-rein { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes toast-raus { to { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Glasleiste ---------- */
.glas { background: rgba(248,248,250,.92); box-shadow: 0 .5px 0 rgba(0,0,0,.1); }
@supports (backdrop-filter: blur(1px)) { .glas { background: var(--glas); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); } }

/* ---------- Erscheinen ---------- */
.auftritt > * { animation: auftritt 300ms var(--kurve) backwards; }
.auftritt > *:nth-child(2) { animation-delay: 50ms; }
.auftritt > *:nth-child(3) { animation-delay: 100ms; }
.auftritt > *:nth-child(4) { animation-delay: 150ms; }
.auftritt > *:nth-child(5) { animation-delay: 200ms; }
.auftritt > *:nth-child(n+6) { animation-delay: 240ms; }
@keyframes auftritt { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .riffel.glanz::after { display: none; }
  .knopf:active, .chip input:active + span { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glas, dialog.blatt, .toast { background: #FAFAFC; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .toast { background: #1D1D1F; }
}

/* ---------- Gemeinsam für Team und Kunde: Schalter, Werkzeug-Kärtchen, Skizzen-Bausteine ---------- */
.schalter-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 12px 18px; border-radius: var(--r); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; }
.schalter-zeile b { font-weight: 600; }
.schalter-zeile small { display: block; color: var(--t4); font-size: 14px; }
.schalter { position: relative; width: 51px; height: 31px; flex: none; }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.schalter i { position: absolute; inset: 0; border-radius: 999px; background: #E9E9EB; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); transition: background-color 200ms var(--weich); pointer-events: none; }
.schalter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform 240ms var(--kurve); }
.schalter input:checked + i { background: var(--gut); }
.schalter input:checked + i::after { transform: translateX(20px); }
.schalter input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--aktion) 55%, transparent); outline-offset: 2px; }

.wz-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.wz { display: grid; gap: 3px; align-content: center; padding: 7px 12px 8px; min-height: 44px; border: 0; border-radius: 12px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); text-align: left; font: inherit; color: var(--t1); }
button.wz { cursor: pointer; transition: box-shadow 160ms var(--weich), transform 160ms var(--kurve); }
button.wz:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { button.wz:hover { box-shadow: inset 0 0 0 1px #C7C7CC, 0 2px 6px -3px rgba(0,0,0,.2); } }
.wz b { font: 600 14.5px/1.2 var(--schrift); }
.wz > span { display: flex; gap: 6px; align-items: center; font: 500 10.5px/1.2 var(--mono); letter-spacing: .05em; color: var(--t4); text-transform: uppercase; }
.wz.klein { min-height: 0; padding: 6px 10px; }
.wz.klein b { font-size: 13.5px; }
.zufrieden { width: 7px; height: 7px; border-radius: 50%; background: var(--linie); flex: none; }
.zufrieden.gut { background: var(--gut); } .zufrieden.geht { background: var(--dran); } .zufrieden.nervt { background: var(--rot); }

.skizze-mini { display: grid; justify-items: start; gap: 6px; }
.skizze-schirm { width: 200px; display: grid; gap: 6px; padding: 12px 10px; border-radius: 22px; background: var(--grund); box-shadow: 0 0 0 6px #E9EAEE, 0 0 0 7px #C9CCD2, 0 12px 24px -16px rgba(0,0,0,.45); margin: 8px; }
.skizze-mini > small { font-size: 12px; color: var(--t4); margin-left: 4px; }
.sk-titel { font: 600 14px/1.15 var(--display); letter-spacing: -.02em; padding: 2px 4px; }
.bs { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; background: var(--karte); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 12px; line-height: 1.25; }
.bs .sym { width: 15px; height: 15px; color: var(--t3); }
.bs em { font-style: normal; font: 500 10.5px/1 var(--mono); color: var(--t4); }
.bs-status .sym { color: var(--gut); }
.bs.bs-knopf { grid-template-columns: 1fr; display: grid; place-items: center; text-align: center; min-height: 32px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; background: var(--aktion); }