:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: linksbündige Bänder im 4-px-Raster, Live-Ansicht als einzige dunkle Fläche oben rechts. Tokens aus dem Protocore-Designsystem. */
/* Schriften liegen neben der Seite im Ordner fonts/ (SIL Open Font License, Lizenztexte dort). Kein Abruf bei Google. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/Barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/Barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/Barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/BarlowCondensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/BarlowCondensed-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexMono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexMono-500.woff2) format('woff2'); }
:root{--papier:#f3f1eb;--lichtgrau:#e3e4df;--werkstattgrau:#2b3236;--ink:#24292c;--ink-muted:#565d59;--linie:#c9cbc4;--linie-stark:#7a807b;--maschinengruen:#4a6656;--maschinengruen-tief:#3a5144;--on-maschinengruen:#ffffff;--hammerschlag:#3e5666;--on-hammerschlag:#ffffff;--messing:#b8925a;--signalgelb:#f2a900;--on-signal:#24292c;--notaus-rot:#a52019;--on-notaus:#ffffff;--lampe-gruen:#2f8a4a;--fokus:#3e5666;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-0:0px;--radius-full:999px;--fase-sm:4px;--fase-md:8px;--fase-lg:16px;--border-haar:1px;--border-kontur:1.5px;--border-schild:2px;--font-sans:"Barlow", "DIN Next", "Helvetica Neue", Arial, sans-serif;--font-condensed:"Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--papier:#15191b;--lichtgrau:#1f2427;--werkstattgrau:#2a3034;--ink:#ebe9e2;--ink-muted:#a3aaa5;--linie:#3a4246;--linie-stark:#7c8580;--maschinengruen:#86a593;--maschinengruen-tief:#a3bfae;--on-maschinengruen:#101416;--hammerschlag:#8fa8b8;--on-hammerschlag:#101416;--messing:#c9a56d;--signalgelb:#f2b31e;--on-signal:#101416;--notaus-rot:#e0574d;--on-notaus:#101416;--lampe-gruen:#5cc27a;--fokus:#f2b31e;color-scheme:dark}}
:root[data-theme="dark"]{--papier:#15191b;--lichtgrau:#1f2427;--werkstattgrau:#2a3034;--ink:#ebe9e2;--ink-muted:#a3aaa5;--linie:#3a4246;--linie-stark:#7c8580;--maschinengruen:#86a593;--maschinengruen-tief:#a3bfae;--on-maschinengruen:#101416;--hammerschlag:#8fa8b8;--on-hammerschlag:#101416;--messing:#c9a56d;--signalgelb:#f2b31e;--on-signal:#101416;--notaus-rot:#e0574d;--on-notaus:#101416;--lampe-gruen:#5cc27a;--fokus:#f2b31e;color-scheme:dark}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--papier); color: var(--ink); font: 400 17px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--papier); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.wrap { max-width: 1180px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band { padding-block: var(--space-16); }
.band--grau { background: var(--lichtgrau); }
.band--grau .pc-order { background-color: var(--papier); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font: 600 clamp(30px, 4vw, 44px)/1.05 var(--font-condensed); letter-spacing: .005em; }
h3 { font: 600 20px/26px var(--font-sans); }
p { margin: 0; max-width: 62ch; }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink); }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: var(--space-4); align-content: start; }
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); max-width: 760px; }

/* Kopf */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--papier); border-bottom: var(--border-haar) solid var(--linie); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-3); transition: padding-block .3s ease; }
.kopf--unten .wrap { padding-block: var(--space-2); }
/* Fortschritt der Seite als Messinglinie an der Unterkante, wie ein Auftragsbalken */
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--messing); transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0)); }
.kopf__logo { display: block; line-height: 0; flex: none; }
.kopf__logo svg { height: 38px; width: auto; overflow: visible; }
/* Kopf-Logo: oben die geschlossene Passung, beim Scrollen gehen die Hälften auseinander und nehmen den Schriftzug in die Mitte */
.kopf-logo__l, .kopf-logo__r, .kopf-logo__t { transition: transform .55s cubic-bezier(.7, 0, .2, 1) .15s; }
.kopf-logo__r { transform: translateX(0px); }
.kopf-logo__t { transform: translateX(26px); }
.kopf--offen .kopf-logo__r { transform: translateX(var(--dx)); }
.kopf--offen .kopf-logo__t { transform: translateX(0px); }
.kopf--bewegt .kopf-logo__t { animation: kopf-t-zu .9s linear; }
.kopf--bewegt.kopf--offen .kopf-logo__t { animation-name: kopf-t-auf; }
@keyframes kopf-t-auf { 0% { opacity: 1; } 18%, 76% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kopf-t-zu { 0% { opacity: 1; } 18%, 76% { opacity: 0; } 100% { opacity: 1; } }
.kopf__aktionen { display: flex; align-items: center; gap: var(--space-3); }
.thema { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; color: var(--ink); border: var(--border-kontur) solid var(--linie-stark); border-radius: var(--fase-sm); corner-shape: bevel; cursor: pointer; flex: none; }
.thema:hover { border-color: var(--ink); }
.thema svg { width: 20px; height: 20px; }
.thema .thema__mond { display: none; }
:root[data-theme="dark"] .thema .thema__sonne { display: none; }
:root[data-theme="dark"] .thema .thema__mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thema .thema__sonne { display: none; }
  :root:not([data-theme="light"]) .thema .thema__mond { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .kopf .wrap, .kopf-logo__l, .kopf-logo__r, .kopf-logo__t { transition: none; }
  .kopf--bewegt .kopf-logo__t { animation: none; }
}
.kopf nav { display: flex; align-items: center; gap: var(--space-6); font: 500 15px/1 var(--font-sans); }
.kopf nav a { text-decoration: none; }
.kopf nav a:not(.pc-btn):hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 820px) { .kopf nav a:not(.pc-btn) { display: none; } .kopf__logo svg { height: 32px; } }
@media (max-width: 820px) { .kopf .wrap { gap: var(--space-3); } .kopf .pc-btn { white-space: nowrap; } }
@media (max-width: 420px) { .kopf__logo svg { height: 28px; } .kopf .pc-btn { padding-inline: var(--space-3); } .kopf__aktionen { gap: var(--space-2); } .thema { width: 36px; height: 36px; } }

/* Einstieg */
.einstieg { padding-block: var(--space-12) var(--space-16); }
.einstieg .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-12); align-items: center; }
.einstieg h1 { font: 600 clamp(44px, 6.4vw, 80px)/.95 var(--font-condensed); letter-spacing: -.01em; }
.einstieg__text { display: grid; gap: var(--space-6); min-width: 0; }
.einstieg__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.fakten { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; font: 600 13px/16px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.fakten li { display: flex; align-items: center; gap: var(--space-2); }
.fakten li::before { content: ""; width: 8px; height: 8px; background: var(--messing); }
@media (max-width: 900px) { .einstieg .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Live-Ansicht */
.display { --fase: var(--fase-lg); background: var(--werkstattgrau); color: #f3f1eb; padding: var(--space-4); display: grid; gap: var(--space-3); min-width: 0; }
.display__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-2) 0; font: 600 13px/16px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: #c9cbc4; }
.display__live { display: inline-flex; align-items: center; gap: var(--space-2); }
.display__live::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--lampe-gruen); }
.display__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.display__karten .pc-order { max-width: none; }
.display__karten .pc-order:first-child { grid-column: 1 / -1; }
.display .pc-order__count strong { font-size: 36px; }
.display__karten .pc-order:first-child .pc-order__count strong { font-size: 52px; }
.display__fuss { padding: 0 var(--space-2) var(--space-1); font: 500 12px/16px var(--font-sans); color: #a3aaa5; }
@media (max-width: 560px) { .display__karten { grid-template-columns: minmax(0, 1fr); } }

/* Heute */
.heute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.laufzettel { --fase: var(--fase-md); background: var(--papier); border: var(--border-haar) solid var(--linie-stark); --fase-rand: var(--linie-stark); --fase-bw: var(--border-haar); padding: var(--space-6); min-width: 0; }
.laufzettel__titel { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: var(--border-haar) solid var(--linie); font: 600 13px/16px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.laufzettel ol { list-style: none; margin: 0; padding: 0; }
.laufzettel li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-haar) dashed var(--linie); }
.laufzettel li:last-child { border-bottom: 0; }
.laufzettel time { font: 500 15px/24px var(--font-mono); color: var(--ink-muted); }
.laufzettel span { font-size: 16px; line-height: 24px; }
.heute__mit { display: grid; gap: var(--space-6); }
.vergleich { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); margin: 0; }
.vergleich dt { font: 600 13px/24px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.vergleich dd { margin: 0; }
@media (max-width: 860px) { .heute { grid-template-columns: minmax(0, 1fr); } }

/* Erfassung */
.erfassung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.quelle { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: var(--border-kontur) solid var(--ink); }
.quelle svg { width: 40px; height: 40px; color: var(--ink); }
.quelle p { font-size: 16px; color: var(--ink-muted); }
@media (max-width: 960px) { .erfassung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .erfassung { grid-template-columns: minmax(0, 1fr); } }

/* 80/20 */
.verhaeltnis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.angebot { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; }
.angebot__punkt { --fase: var(--fase-md); border-radius: var(--fase); corner-shape: bevel; background: var(--papier); padding: var(--space-4); display: grid; gap: var(--space-2); }
.angebot dt { font: 600 13px/16px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.angebot dd { margin: 0; display: grid; gap: var(--space-1); }
.angebot b { font: 600 28px/1 var(--font-condensed); color: var(--maschinengruen); }
.angebot span { font-size: 16px; color: var(--ink-muted); }
.fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); min-width: 0; }
.fragen__spalte { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-4); border-top: var(--border-kontur) solid var(--maschinengruen); }
.fragen__spalte--weg { border-top-color: var(--linie-stark); }
.fragen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.fragen li { font: 500 19px/1.35 var(--font-sans); }
.fragen__spalte--weg li { color: var(--ink-muted); font-weight: 400; }
@media (max-width: 900px) { .verhaeltnis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fragen { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); counter-reset: schritt; }
.schritt { --fase: var(--fase-md); background: var(--lichtgrau); padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.schritt__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.schritt__nr { font: 500 15px/1 var(--font-mono); color: var(--ink-muted); }
.schritt__marke { width: 40px; height: 40px; }
.schritt h3 { font: 600 28px/1 var(--font-condensed); }
.schritt p { font-size: 16px; color: var(--ink-muted); }
.schritt__kopf svg { width: 40px; height: 40px; color: var(--ink); flex: none; }
tbody th { font-weight: 500; }
@media (max-width: 860px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }

/* Bestand */
.bestand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.baujahre { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.baujahre li { --fase: var(--fase-sm); background: var(--papier); border: var(--border-haar) solid var(--linie-stark); --fase-rand: var(--linie-stark); --fase-bw: var(--border-haar); padding: var(--space-2) var(--space-3); display: grid; gap: 2px; }
.baujahre b { font: 600 20px/1.1 var(--font-condensed); }
.baujahre span { font: 600 12px/14px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 860px) { .bestand { grid-template-columns: minmax(0, 1fr); } }

/* Technik */
.technik { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.technik dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); border-top: var(--border-kontur) solid var(--ink); }
.technik dt, .technik dd { padding-block: var(--space-4); border-bottom: var(--border-haar) solid var(--linie); }
.technik dt { font: 600 13px/24px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding-right: var(--space-6); }
.technik dd { margin: 0; font-size: 17px; }
@media (max-width: 900px) { .technik { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .technik dl { grid-template-columns: minmax(0, 1fr); } .technik dt { padding-bottom: 0; border-bottom: 0; } }

/* Zusagen */
.zusagen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.zusage { --fase: var(--fase-md); border-radius: var(--fase); corner-shape: bevel; background: var(--papier); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.zusage h3 { font: 600 26px/1.05 var(--font-condensed); }
.zusage p { font-size: 16px; color: var(--ink-muted); }
@media (max-width: 760px) { .zusagen { grid-template-columns: minmax(0, 1fr); } }

/* Kontakt */
.kontakt { background: var(--werkstattgrau); color: #f3f1eb; }
.kontakt .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.kontakt h2 { color: #f3f1eb; }
.kontakt p { color: #c9cbc4; }
.kontaktdaten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-6); margin: 0; align-items: baseline; }
.kontaktdaten dt { font: 600 13px/16px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: #a3aaa5; }
.kontaktdaten dd { margin: 0; font-size: 18px; color: #f3f1eb; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.mailadresse { font-size: 18px; color: #f3f1eb; user-select: all; }
.telefon { font-size: 18px; color: #f3f1eb; text-decoration: none; border-bottom: 1px solid #7c8580; }
.telefon:hover { border-bottom-color: #f2b31e; }
.platzhalter { font-family: var(--font-mono); font-size: 15px; color: #f2b31e; border-bottom: 1px dashed #f2b31e; }
.kopieren { --fase: var(--fase-sm); font: 600 13px/1 var(--font-sans); padding: var(--space-2) var(--space-3); background: transparent; color: #f3f1eb; border: var(--border-haar) solid #7c8580; --fase-rand: #7c8580; --fase-bw: var(--border-haar); cursor: pointer; }
.kontakt__claim { font: 600 clamp(30px, 4vw, 44px)/1.05 var(--font-condensed); color: #f3f1eb; }
@media (max-width: 860px) { .kontakt .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Fuß */
.fuss { background: var(--werkstattgrau); color: #a3aaa5; border-top: var(--border-haar) solid #3a4246; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding-block: var(--space-8); font-size: 14px; }
.fuss svg { height: 32px; width: auto; }
.fuss nav { display: flex; gap: var(--space-6); }
.fuss__esp { flex-basis: 100%; max-width: none; display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--border-haar) solid #3a4246; font: 400 12px/16px var(--font-mono); color: #7c8580; }
.fuss__lampe { width: 8px; height: 8px; border-radius: 50%; background: #5cc27a; flex: none; }

/* Komponenten aus dem Designsystem (bundle.css) */

/* Protocore: Komponenten. Alle Werte aus tokens.css. */

/* Fase: gebrochene Kanten statt Rundungen.
   Jedes Element mit Fase setzt --fase (fase-sm/-md/-lg); Elemente mit Rahmen zusätzlich
   --fase-rand (Rahmenfarbe) und --fase-bw (Rahmenstärke). */
.pc-fase, .pc-btn, .pc-plate, .pc-order {
  --fase: var(--fase-sm);
  border-radius: var(--fase);
  corner-shape: bevel;
}
.pc-fase--md { --fase: var(--fase-md); }
.pc-fase--lg { --fase: var(--fase-lg); }
.pc-fase--rand { --fase-rand: var(--linie); --fase-bw: var(--border-haar); border: var(--fase-bw) solid var(--fase-rand); }
/* Fallback für Browser ohne corner-shape: Ecken wegschneiden, Rahmen auf der Schräge nachzeichnen */
@supports not (corner-shape: bevel) {
  .pc-fase, .pc-btn:not(.pc-btn--text), .pc-plate, .pc-order {
    --d: calc(var(--fase) * 0.7071);
    --s: calc(var(--fase) + 4px);
    border-radius: 0;
    clip-path: polygon(var(--fase) 0, calc(100% - var(--fase)) 0, 100% var(--fase), 100% calc(100% - var(--fase)),
      calc(100% - var(--fase)) 100%, var(--fase) 100%, 0 calc(100% - var(--fase)), 0 var(--fase));
  }
  .pc-btn--secondary, .pc-plate, .pc-fase--rand {
    background-image:
      linear-gradient(135deg, transparent var(--d), var(--fase-rand) 0 calc(var(--d) + var(--fase-bw)), transparent 0),
      linear-gradient(225deg, transparent var(--d), var(--fase-rand) 0 calc(var(--d) + var(--fase-bw)), transparent 0),
      linear-gradient(45deg, transparent var(--d), var(--fase-rand) 0 calc(var(--d) + var(--fase-bw)), transparent 0),
      linear-gradient(315deg, transparent var(--d), var(--fase-rand) 0 calc(var(--d) + var(--fase-bw)), transparent 0);
    background-position: top left, top right, bottom left, bottom right;
    background-size: var(--s) var(--s);
    background-repeat: no-repeat;
    background-origin: border-box;
  }
  .pc-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fokus); }
}

/* Button */
.pc-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font: 600 15px/18px var(--font-sans); letter-spacing: 0.01em;
  border: var(--border-kontur) solid transparent;
  cursor: pointer; text-decoration: none;
}
.pc-btn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.pc-btn:disabled { opacity: .45; cursor: not-allowed; }
.pc-btn--primary { background-color: var(--maschinengruen); color: var(--on-maschinengruen); }
.pc-btn--primary:hover { background-color: var(--maschinengruen-tief); }
.pc-btn--secondary { --fase-rand: var(--linie-stark); --fase-bw: var(--border-kontur); background-color: transparent; color: var(--ink); border-color: var(--linie-stark); }
.pc-btn--secondary:hover { background-color: var(--lichtgrau); }
.pc-btn--danger { background-color: var(--notaus-rot); color: var(--on-notaus); }
.pc-btn--text { background-color: transparent; color: var(--ink); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; }

/* Typenschild */
.pc-plate {
  --fase: var(--fase-md); --fase-rand: var(--messing); --fase-bw: var(--border-schild);
  background-color: var(--lichtgrau); color: var(--ink);
  border: var(--border-schild) solid var(--messing);
  padding: var(--space-4); max-width: 360px;
}
.pc-plate__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: var(--border-haar) solid var(--linie);
  padding-bottom: var(--space-2); margin-bottom: var(--space-3);
}
.pc-plate__brand { font: 600 22px/1 var(--font-condensed); letter-spacing: 0.02em; }
.pc-plate__no { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }
.pc-plate dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.pc-plate dt { font: 600 12px/20px var(--font-condensed); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.pc-plate dd { margin: 0; font: 500 14px/20px var(--font-mono); }

/* Statusleuchte: bleibt rund wie eine echte Leuchte */
.pc-status { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 13px/16px var(--font-condensed); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.pc-status__lamp { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--linie-stark); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.pc-status--ok .pc-status__lamp { background: var(--lampe-gruen); }
.pc-status--warn .pc-status__lamp { background: var(--signalgelb); }
.pc-status--stop .pc-status__lamp { background: var(--notaus-rot); }

/* Auftragsfortschritt: Stückzahl eines Auftrags live aus dem Hubzähler */
.pc-order {
  --fase: var(--fase-md);
  background-color: var(--lichtgrau); color: var(--ink);
  padding: var(--space-4); max-width: 360px;
  display: grid; gap: var(--space-3);
}
.pc-order__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.pc-order__id { font: 600 13px/16px var(--font-condensed); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.pc-order__id b { font: 500 14px/16px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink); margin-left: var(--space-2); }
.pc-order__machine { font: 600 20px/26px var(--font-sans); margin: 0; }
.pc-order__count { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pc-order__count strong { font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.pc-order__count span { font-size: 15px; color: var(--ink-muted); }
.pc-order__bar {
  position: relative; height: 12px; background-color: var(--papier);
  border: var(--border-haar) solid var(--linie-stark);
}
.pc-order__fill { position: absolute; inset: 0 auto 0 0; background-color: var(--maschinengruen); }
/* Teilstriche alle 10 %, wie auf einem Maßstab */
.pc-order__bar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--linie-stark) calc(10% - 1px) 10%);
  opacity: .6;
}
.pc-order__foot { display: flex; justify-content: space-between; gap: var(--space-4); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.pc-order__foot .pc-order__pct { font-family: var(--font-mono); color: var(--ink); }
.pc-order--stop .pc-order__fill { background-color: var(--linie-stark); }
.pc-order--stop .pc-order__note { color: var(--notaus-rot); font-weight: 600; }

/* Logoanimation: die Bildmarke geht auf und gibt den Schriftzug frei.
   Inline-SVG mit --mitte (Lage der geschlossenen Marke) und --dx (Endlage der rechten Hälfte). */
.pc-logo-anim__l, .pc-logo-anim__r, .pc-logo-anim__t {
  animation-duration: 1.4s; animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(.7, 0, .2, 1);
}
.pc-logo-anim__l { transform: translateX(0px); animation-name: pc-logo-l; }
.pc-logo-anim__r { transform: translateX(var(--dx)); animation-name: pc-logo-r; }
.pc-logo-anim__t { animation-name: pc-logo-t; animation-timing-function: linear; }
@keyframes pc-logo-l { 0%, 25% { transform: translateX(var(--mitte)); } 100% { transform: translateX(0px); } }
@keyframes pc-logo-r { 0%, 25% { transform: translateX(var(--mitte)); } 100% { transform: translateX(var(--dx)); } }
@keyframes pc-logo-t { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pc-logo-anim__l, .pc-logo-anim__r, .pc-logo-anim__t { animation: none; }
}

.pc-fase, .pc-btn, .pc-plate, .pc-order, .display, .laufzettel, .schritt, .baujahre li, .kopieren { border-radius: var(--fase); corner-shape: bevel; }
@supports not (corner-shape: bevel) {
  .thema { border-radius: 0; }
  .display, .schritt { border-radius: 0; clip-path: polygon(var(--fase) 0, calc(100% - var(--fase)) 0, 100% var(--fase), 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, var(--fase) 100%, 0 calc(100% - var(--fase)), 0 var(--fase)); }
}
.kopf-logo { --dx: 189.18px; }
.lead--hell { color: #c9cbc4; }