/* ————————————————————————————————————————
   SÜDWERK digital — Designsystem „Werkplan“
   Schrift eingebettet (selbst gehostet, kein externes CDN)
   ———————————————————————————————————————— */
@font-face{
  font-family:'Archivo Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  font-stretch:62% 125%;
  src:url(schrift/archivo-variable.woff2) format('woff2-variations');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:400;
  src:url(schrift/ibm-plex-mono-400.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:500;
  src:url(schrift/ibm-plex-mono-500.woff2) format('woff2');
}

:root{
  --papier:#F2F2EE;
  --tinte:#141412;
  --gedaempft:#5C5C55;
  --linie-hell:#D8D8D0;
  --linie-dunkel:#2C2C28;
  --ultramarin:#2430E8;
  --raster:1240px;
  --rand:clamp(20px, 4.5vw, 56px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

body{
  background:var(--papier);
  color:var(--tinte);
  font-family:'Archivo Variable', Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--ultramarin);color:var(--papier);}

h1,h2,h3{
  font-stretch:125%;
  font-weight:640;
  line-height:1.04;
  letter-spacing:-0.015em;
}

.mono{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.16em;
}

a{color:inherit;}

.wrap{
  max-width:var(--raster);
  margin:0 auto;
  padding-left:var(--rand);
  padding-right:var(--rand);
}

/* ——— Technische Kreuze an Schnittlinien ——— */
.kreuz{position:relative;}
.kreuz::before,.kreuz::after{
  content:'+';
  position:absolute;
  top:-11px;
  color:var(--linie-dunkel);
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  line-height:1;
  z-index:2;
}
.kreuz::before{left:calc(var(--rand) - 5px);}
.kreuz::after{right:calc(var(--rand) - 5px);}

/* ——— Header ——— */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background:var(--papier);
  border-bottom:1px solid var(--linie-hell);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}
.marke{
  display:flex;
  align-items:baseline;
  gap:14px;
  text-decoration:none;
}
.marke .wort{
  font-stretch:125%;
  font-weight:640;
  font-size:18px;
  letter-spacing:0.02em;
}
.marke .zusatz{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gedaempft);
  border-left:1px solid var(--linie-dunkel);
  padding-left:14px;
}
nav{display:flex;align-items:center;gap:32px;}
nav a.nav-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tinte);
  transition:color .15s ease;
}
nav a.nav-link:hover{color:var(--ultramarin);}
.cta{
  display:inline-block;
  background:var(--ultramarin);
  color:var(--papier);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 24px;
  border:1px solid var(--ultramarin);
  transition:background .18s ease, border-color .18s ease;
}
.cta:hover{background:var(--tinte);border-color:var(--tinte);}
@media (max-width:860px){
  nav a.nav-link{display:none;}
}

/* ——— Hero ——— */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:110px;
  padding-bottom:72px;
  border-bottom:1px solid var(--linie-hell);
}
.hero .wrap{width:100%;max-width:1440px;}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(48px, 6vw, 96px);
  align-items:center;
}
.hero h1{
  position:relative;
  font-size:clamp(40px, 4.7vw, 68px);
  max-width:17ch;
}
.hero h1 .akzent{color:var(--ultramarin);}
.hero .lead{
  margin-top:32px;
  max-width:50ch;
  color:var(--gedaempft);
  font-size:18px;
}
.hero .aktionen{
  margin-top:48px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.btn-sekundaer{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tinte);
  padding:14px 24px;
  border:1px solid var(--linie-dunkel);
  transition:border-color .18s ease, color .18s ease;
}
.btn-sekundaer:hover{border-color:var(--ultramarin);color:var(--ultramarin);}

/* Der Druckkopf zieht die Überschrift auf */
.hero.maschinell h1{clip-path:inset(-2% 101% -2% 0);}
.hero.maschinell h1.gedruckt{
  clip-path:inset(-2% -2% -2% 0);
  transition:clip-path 1.15s cubic-bezier(.65,0,.2,1);
}
.hero h1 .druckkante{
  position:absolute;
  top:4%;bottom:4%;
  left:0;
  width:2px;
  background:var(--ultramarin);
  opacity:0;
}
.hero.maschinell h1.gedruckt .druckkante{animation:kante 1.15s cubic-bezier(.65,0,.2,1) forwards;}
@keyframes kante{
  0%{left:0;opacity:1;}
  92%{opacity:1;}
  100%{left:100%;opacity:0;}
}
/* Stiftstrich unter dem Wort „Zeit" */
.akzent-zeit{position:relative;display:inline-block;}
.akzent-zeit svg{
  position:absolute;
  left:-0.05em;right:-0.05em;bottom:-0.12em;
  width:calc(100% + 0.1em);height:0.16em;
  overflow:visible;
}
.akzent-zeit svg path{
  fill:none;
  stroke:var(--ultramarin);
  stroke-width:2.5;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.akzent-zeit svg path.zieht{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1);}
/* Nachgelagerte Elemente rücken ein wie Programmzeilen */
.hero.maschinell .lead,
.hero.maschinell .aktionen,
.hero.maschinell .maschinen-status{opacity:0;transform:translateY(14px);}
.hero .lead.da,
.hero .aktionen.da,
.hero .maschinen-status.da{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1);}
/* Verbindungszeile zur Maschine */
.maschinen-status{
  margin-top:44px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--gedaempft);
  border-top:1px solid var(--linie-hell);
  padding-top:20px;
  max-width:440px;
}
.maschinen-status .punkt-blink{
  width:7px;height:7px;
  background:var(--ultramarin);
  flex:none;
  animation:blinken 1.2s steps(2, end) infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero.maschinell h1{clip-path:none;}
  .maschinen-status .punkt-blink{animation:none;}
}

/* ——— Instrument: Zeitmessung ——— */
.schema{width:100%;max-width:720px;height:auto;display:block;margin-left:auto;}
.schema text{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  fill:var(--tinte);
}
.schema text.dim{fill:var(--gedaempft);}
.schema text.blau{fill:var(--ultramarin);}
.schema .strich{fill:none;stroke:var(--linie-dunkel);stroke-width:1.1;}
.schema .strich.blau{stroke:var(--ultramarin);stroke-width:1.6;}
.schema .strich.fein{stroke:var(--linie-hell);stroke-width:1;}
.schema .strich.mittel{stroke:#B9B9B0;stroke-width:1;}

.schema text.klein{font-size:9.5px;letter-spacing:0.1em;}
.schema .dick{stroke-width:5;}
/* Ohne JavaScript: Blatt 1 fertig zeigen, Blätter 2+3 verbergen */
.schema .szene ~ .szene{display:none;}
/* Zahnrad dreht, sobald fertig gezeichnet */
.schema .zahnrad.dreht{
  animation:drehen 9s linear infinite;
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes drehen{to{transform:rotate(360deg);}}
.schema .stift{transition:opacity .4s ease;}
.schema .fadenkreuz{opacity:0;transition:opacity .25s ease;pointer-events:none;}
.schema .punkt{fill:var(--ultramarin);}
.schema .blinkt{animation:blinken 1.2s steps(2, end) infinite;}
@keyframes blinken{50%{opacity:0.12;}}

/* ——— Abschnitte ——— */
section{padding:clamp(96px, 11vw, 150px) 0;}
h2{
  font-size:clamp(34px, 4.4vw, 58px);
  max-width:20ch;
}
.abstand{margin-bottom:clamp(48px, 6vw, 80px);}

/* ——— Leistungen: Verzeichnis ——— */
.verzeichnis{list-style:none;border-top:1px solid var(--linie-dunkel);}
.verzeichnis li{border-bottom:1px solid var(--linie-hell);}
.verzeichnis li:last-child{border-bottom:1px solid var(--linie-dunkel);}
.zeile{
  display:grid;
  grid-template-columns:88px minmax(0,11fr) minmax(0,10fr) 56px;
  align-items:baseline;
  gap:28px;
  padding:36px 0;
  transition:padding-left .25s cubic-bezier(.4,0,.2,1);
}
.zeile .s-nr{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.14em;
  color:var(--gedaempft);
  transition:color .15s ease;
}
.zeile h3{
  font-size:clamp(22px, 2.4vw, 31px);
  padding-right:32px;
  transition:color .15s ease;
}
.zeile p{
  color:var(--gedaempft);
  font-size:16px;
  max-width:44ch;
}
.zeile .pfeil{
  justify-self:end;
  align-self:center;
  font-size:22px;
  line-height:1;
  color:var(--linie-dunkel);
  transition:color .15s ease, transform .25s cubic-bezier(.4,0,.2,1);
}
.verzeichnis li:hover .zeile{padding-left:16px;}
.verzeichnis li:hover .s-nr,
.verzeichnis li:hover h3{color:var(--ultramarin);}
.verzeichnis li:hover .pfeil{color:var(--ultramarin);transform:translate(4px,-4px);}
@media (max-width:760px){
  .zeile{grid-template-columns:64px 1fr 40px;grid-template-rows:auto auto;row-gap:8px;padding:28px 0;}
  .zeile h3{grid-column:2;}
  .zeile .pfeil{grid-column:3;grid-row:1;}
  .zeile p{grid-column:2 / span 2;}
}

/* ——— Projekte ——— */
#projekte{border-top:1px solid var(--linie-hell);}
.projekte-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 4vw, 56px);
}
.projekt{
  text-decoration:none;
  display:block;
  position:relative;
}
.projekt .titel a{color:inherit;text-decoration:none;}
/* Ganze Karte klickbar, HTML bleibt valide */
.projekt .titel a::after{content:'';position:absolute;inset:0;z-index:3;}
.projekt .rahmen{
  display:block;
  position:relative;
  border:1px solid var(--linie-dunkel);
  aspect-ratio:16/10;
  overflow:hidden;
  background:#ECECE6;
  transition:border-color .18s ease;
}
.projekt .rahmen img,
.projekt .rahmen video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  filter:grayscale(18%) contrast(1.02);
  transition:filter .3s ease;
}
.projekt:hover .rahmen{border-color:var(--ultramarin);}
.projekt:hover .rahmen img,
.projekt:hover .rahmen video{filter:grayscale(0%) contrast(1.02);}
/* Platzhalter, solange kein Bild hinterlegt ist */
.projekt .platzhalter{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:
    linear-gradient(#E2E2DB 1px, transparent 1px),
    linear-gradient(90deg, #E2E2DB 1px, transparent 1px);
  background-size:28px 28px;
}
.projekt .platzhalter span{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gedaempft);
  background:var(--papier);
  border:1px solid var(--linie-hell);
  padding:10px 16px;
}
.projekt .unterzeile{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
}
.projekt .titel{
  font-stretch:125%;
  font-weight:640;
  line-height:1.1;
  letter-spacing:-0.01em;
  font-size:clamp(19px, 1.9vw, 24px);
  transition:color .15s ease;
}
.projekt:hover .titel{color:var(--ultramarin);}
.projekt .status{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gedaempft);
  white-space:nowrap;
}
.projekt .status.live::before{
  content:'';
  display:inline-block;
  width:7px;height:7px;
  background:var(--ultramarin);
  margin-right:8px;
}
.projekt .beschreibung{
  display:block;
  margin-top:10px;
  color:var(--gedaempft);
  font-size:15.5px;
  max-width:52ch;
}
/* Live-Vorschau: echte Seite im Rahmen, in Desktop-Breite gerendert und skaliert */
.projekt .rahmen iframe{
  position:absolute;
  top:0;left:0;
  width:1440px;
  height:900px;
  border:0;
  background:#fff;
  transform-origin:top left;
  transform:scale(var(--frame-scale, 1));
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease, filter .3s ease;
  filter:grayscale(18%) contrast(1.02);
}
.projekt .rahmen iframe.geladen{opacity:1;}
.projekt:hover .rahmen iframe{filter:grayscale(0%) contrast(1.02);}
@media (prefers-reduced-motion: reduce){
  .projekt .rahmen iframe{transition:none;}
}
@media (max-width:820px){
  .projekte-grid{grid-template-columns:1fr;}
}
/* Handy neben dem Bildschirm: dieselbe Seite in Handybreite, läuft live. Erscheint erst, wenn sie geladen ist. */
.projekt .geraete{display:block;position:relative;}
.projekt .handy{
  position:absolute;
  right:4%;bottom:6%;
  width:21%;
  padding:4px;
  background:var(--tinte);
  border-radius:13px;
  box-shadow:0 0 0 3px var(--papier);
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.projekt .handy.an{opacity:1;transform:none;}
.projekt .handy::before{
  content:'';
  position:absolute;
  top:9px;left:50%;
  width:24%;height:4px;
  margin-left:-12%;
  background:var(--tinte);
  border-radius:2px;
  z-index:1;
}
.projekt .handy-schirm{
  display:block;
  position:relative;
  aspect-ratio:390/844;
  overflow:hidden;
  border-radius:9px;
  background:#ECECE6;
}
.projekt .handy-schirm iframe{
  position:absolute;
  top:0;left:0;
  width:390px;
  height:844px;
  border:0;
  background:#fff;
  transform-origin:top left;
  transform:scale(var(--handy-scale, .3));
  pointer-events:none;
  filter:grayscale(18%) contrast(1.02);
  transition:filter .3s ease;
}
.projekt:hover .handy-schirm iframe{filter:grayscale(0%) contrast(1.02);}
/* Handy und Tablet laden keine laufenden Seiten — dort bleibt das Handy weg */
@media (pointer: coarse), (max-width:900px){ .projekt .handy{display:none;} }
@media (prefers-reduced-motion: reduce){ .projekt .handy{transition:none;transform:none;} }
@media print{ .projekt .handy{display:none;} }

/* ——— Raster: Ablauf-Schritte und Merkmale ——— */
.raster{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px, 3vw, 44px);
  margin-top:clamp(40px, 5vw, 68px);
}
#fertigung .raster{grid-template-columns:repeat(3, minmax(0,1fr));row-gap:clamp(34px, 4vw, 52px);}
@media (max-width:900px){ #fertigung .raster{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ #fertigung .raster{grid-template-columns:1fr;} }
.raster li{
  border-top:1px solid var(--linie-dunkel);
  padding-top:18px;
}
.raster .r-nr{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gedaempft);
}
.raster h3{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.2;
  letter-spacing:-0.005em;
  margin:14px 0 10px;
}
.raster p{color:var(--gedaempft);font-size:15.5px;}
@media (max-width:900px){
  .raster{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){
  .raster{grid-template-columns:1fr;}
}

/* ——— Abbildungen (Plantafel) ——— */
.abbildungen{
  margin-top:clamp(44px, 5vw, 72px);
  display:grid;
  gap:clamp(28px, 3.5vw, 48px);
}
.abbildung{margin:0;}
.abbildung a{display:block;}
.abbildung img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--linie-dunkel);
  background:#ECECE6;
  transition:border-color .18s ease;
}
.abbildung a:hover img{border-color:var(--ultramarin);}
.abbildung figcaption{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--gedaempft);
}
.abbildung figcaption .nr{color:var(--tinte);}
.abbildung figcaption .hinweis{color:var(--gedaempft);}

/* ——— Fertigung ——— */
#fertigung{border-top:1px solid var(--linie-hell);}
.grundsatz{
  margin-top:clamp(40px, 5vw, 64px);
  border-top:1px solid var(--linie-dunkel);
  padding-top:24px;
  max-width:72ch;
  color:var(--gedaempft);
}
.grundsatz strong{color:var(--tinte);font-weight:640;}
.notiz{
  margin-top:20px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--gedaempft);
}

/* ——— Fragen ——— */
#fragen{border-top:1px solid var(--linie-hell);}
.faq{border-top:1px solid var(--linie-dunkel);}
.faq details{border-bottom:1px solid var(--linie-hell);}
.faq details:last-of-type{border-bottom:1px solid var(--linie-dunkel);}
.faq summary{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 56px;
  gap:28px;
  align-items:baseline;
  padding:30px 0;
  cursor:pointer;
  list-style:none;
  transition:padding-left .25s cubic-bezier(.4,0,.2,1);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::marker{content:'';}
.faq details:hover summary{padding-left:16px;}
.faq .f-nr{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.14em;
  color:var(--gedaempft);
  transition:color .15s ease;
}
.faq summary h3{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(18px, 1.9vw, 24px);
  line-height:1.25;
  letter-spacing:-0.01em;
  padding-right:32px;
  transition:color .15s ease;
}
.faq .zeichen{
  justify-self:end;
  align-self:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:19px;
  line-height:1;
  color:var(--linie-dunkel);
  transition:color .15s ease;
}
.faq details:hover .f-nr,
.faq details:hover summary h3{color:var(--ultramarin);}
.faq .zeichen::before{content:'+';}
.faq details[open] .zeichen{color:var(--ultramarin);}
.faq details[open] .zeichen::before{content:'\2212';}
.faq .antwort{
  padding:0 0 32px 116px;
  max-width:68ch;
  color:var(--gedaempft);
}
.faq .antwort p + p{margin-top:16px;}
.faq .antwort strong{color:var(--tinte);font-weight:640;}
@media (max-width:760px){
  .faq summary{grid-template-columns:64px 1fr 32px;gap:16px;padding:24px 0;}
  .faq .antwort{padding-left:0;padding-bottom:26px;}
}

/* ——— Editoriale Blöcke (Arbeitsweise, Über) ——— */
.editorial{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(48px, 7vw, 110px);
  align-items:start;
}
.editorial .statement{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(26px, 3.2vw, 40px);
  line-height:1.22;
  letter-spacing:-0.01em;
}
.editorial .statement em{font-style:normal;color:var(--ultramarin);}
.editorial .prosa p{color:var(--gedaempft);margin-bottom:22px;}
.editorial .prosa p:last-child{margin-bottom:0;}
.editorial .prosa strong{color:var(--tinte);font-weight:640;}
#arbeitsweise{border-top:1px solid var(--linie-hell);}
#ueber{border-top:1px solid var(--linie-hell);}
@media (max-width:900px){
  .editorial{grid-template-columns:1fr;gap:40px;}
}

/* ——— Kontakt ——— */
#kontakt{
  background:var(--tinte);
  color:var(--papier);
  padding:clamp(110px, 13vw, 170px) 0;
}
#kontakt h2{max-width:18ch;}
#kontakt .lead{
  color:#B8B8AF;
  max-width:54ch;
  margin-top:28px;
  font-size:18px;
}
#kontakt .mail{
  display:inline-block;
  margin-top:clamp(48px, 6vw, 72px);
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(24px, 4.4vw, 56px);
  letter-spacing:-0.01em;
  color:var(--papier);
  text-decoration:none;
  border-bottom:3px solid var(--ultramarin);
  padding-bottom:10px;
  transition:color .18s ease;
}
#kontakt .mail:hover{color:var(--ultramarin);}
#kontakt .aktionen{margin-top:56px;}

/* ——— Footer ——— */
footer{
  background:var(--tinte);
  color:var(--papier);
  border-top:1px solid var(--linie-dunkel);
  padding:88px 0 44px;
  overflow:hidden;
}
.wortmarke{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(52px, 10.5vw, 160px);
  line-height:0.95;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.wortmarke .digital{
  font-family:'IBM Plex Mono', monospace;
  font-stretch:100%;
  font-weight:400;
  font-size:clamp(14px, 2vw, 26px);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#8B8B82;
  vertical-align:super;
}
.fusszeile{
  margin-top:64px;
  padding-top:26px;
  border-top:1px solid var(--linie-dunkel);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px 32px;
  color:#8B8B82;
}
.fusszeile a{
  color:#B8B8AF;
  text-decoration:none;
  transition:color .15s ease;
}
.fusszeile a:hover{color:var(--ultramarin);}
.fusszeile .gruppe{display:flex;flex-wrap:wrap;gap:28px;}
@media (max-width:600px){
  .wortmarke{white-space:normal;}
  .wortmarke .digital{display:block;vertical-align:baseline;margin-top:10px;}
}

/* ——— Hero-Werkplan: Prüflauf, Stempel, Papierwechsel ——— */
.schema .leben{opacity:0;}
.schema .szene.lebt .leben{opacity:1;}
.schema.pausiert *{animation-play-state:paused !important;}
@keyframes auf{to{opacity:1;}}
@keyframes auf-von-oben{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* Blatt 01: der Besucher klickt, die Anfrage kommt an */
.schema .szene.lebt .l-cursor{animation:cursor01 2.2s cubic-bezier(.45,0,.2,1) forwards;}
@keyframes cursor01{
  0%{transform:translate(0,0);}
  55%{transform:translate(-242px,-110px);}
  62%{transform:translate(-242px,-110px) scale(.82);}
  70%{transform:translate(-242px,-110px) scale(1);}
  100%{transform:translate(-242px,-110px);}
}
.schema .szene.lebt .l-knopf{opacity:0;animation:auf .25s 1.35s forwards;}
.schema .szene.lebt .l-hinweis{opacity:0;animation:auf-von-oben .35s 2s forwards;}

/* Blatt Auflagen: Flagge füllt sich, Formular wandert auf den Stapel, Stapel durchgestrichen, Nachweis liegt vor */
.schema .szene.lebt .l-flagge{opacity:0;animation:auf .45s .25s forwards;}
.schema .szene.lebt .l-stern{opacity:0;animation:auf .4s .55s forwards;}
.schema .szene.lebt .l-form{opacity:0;animation:form04 1.1s .8s cubic-bezier(.45,0,.2,1) forwards;}
@keyframes form04{0%{opacity:1;transform:translate(0,0);}90%{opacity:1;transform:translate(78px,24px);}100%{opacity:0;transform:translate(78px,24px);}}
.schema .szene.lebt .l-durch{opacity:0;animation:auf .3s 1.9s forwards;}
.schema .szene.lebt .l-vonhand{opacity:0;animation:auf .3s 2.3s forwards;}
.schema .szene.lebt .l-vor{opacity:0;animation:auf .3s 3.1s forwards;}

/* Blatt 02: Laser liest, Daten laufen, Etikett bestätigt */
.schema .szene.lebt .l-laser{opacity:0;animation:laser02 1.3s .1s ease-in-out 2 forwards;}
@keyframes laser02{0%{opacity:1;transform:translateY(0);}50%{opacity:1;transform:translateY(42px);}99%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(0);}}
.schema .szene.lebt .l-daten{opacity:0;animation:daten02 .7s 2.75s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes daten02{0%{opacity:1;transform:translate(0,0);}85%{opacity:1;transform:translate(-42px,42px);}100%{opacity:0;transform:translate(-42px,42px);}}
.schema .szene.lebt .l-pille{opacity:0;animation:auf .25s 3.35s forwards;}
.schema .szene.lebt .l-check{opacity:0;animation:auf .3s 3.9s forwards;}

/* Blatt 03: eine Akte läuft durch den Ablauf */
.schema .szene.lebt .l-akte{animation:akte03 2.8s .2s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes akte03{
  0%{transform:translateX(0);fill:#F2F2EE;}
  42%{transform:translateX(160px);fill:#F2F2EE;}
  56%{transform:translateX(184px);fill:#2430E8;}
  100%{transform:translateX(330px);fill:#2430E8;}
}
.schema .szene.lebt .l-ok{opacity:0;animation:auf .25s 3.1s forwards;}

/* Blatt 04: ein Presshub, das Teil verdichtet sich */
.schema .szene.lebt .l-stempel{animation:hub04 2.6s .3s cubic-bezier(.5,0,.5,1) forwards;}
@keyframes hub04{0%{transform:translateY(0);}35%{transform:translateY(14px);}65%{transform:translateY(14px);}100%{transform:translateY(0);}}
.schema .szene.lebt .l-rohling{transform-box:fill-box;transform-origin:50% 100%;animation:pressen04 2.6s .3s cubic-bezier(.5,0,.5,1) forwards;}
@keyframes pressen04{0%{transform:scaleY(1);}35%{transform:scaleY(.62);}65%{transform:scaleY(.62);}100%{transform:scaleY(.66);}}
.schema .szene.lebt .l-kraft{animation:kraft04 2.6s .3s forwards;}
@keyframes kraft04{0%{opacity:1;}30%{opacity:1;}45%{opacity:.2;}55%{opacity:1;}70%{opacity:.2;}80%{opacity:1;}100%{opacity:1;}}
.schema .szene.lebt .l-teil4{opacity:0;animation:auf .3s 3.3s forwards;}

/* Blatt 05: Signale laufen durchs Netz */
.schema .szene.lebt .l-sig1{opacity:0;animation:sig05a 1.4s .2s ease-in-out 3;}
.schema .szene.lebt .l-sig2{opacity:0;animation:sig05b 1.4s .9s ease-in-out 3;}
@keyframes sig05a{0%{opacity:1;transform:translate(0,0);}48%{opacity:1;transform:translate(157px,44px);}50%{opacity:0;}100%{opacity:0;transform:translate(0,0);}}
@keyframes sig05b{0%{opacity:1;transform:translate(0,0);}48%{opacity:1;transform:translate(151px,-42px);}50%{opacity:0;}100%{opacity:0;transform:translate(0,0);}}
.schema .szene.lebt .l-puls{opacity:0;transform-box:fill-box;transform-origin:center;animation:puls05 .9s 1.55s ease-out 3;}
@keyframes puls05{0%{opacity:.9;transform:scale(.3);}100%{opacity:0;transform:scale(1.5);}}
.schema .szene.lebt .l-aus{opacity:0;animation:auf .3s 4s forwards;}

/* Prüfstempel */
.schema .stempel{opacity:0;transform-box:fill-box;transform-origin:center;}
.schema .stempel.drauf{animation:stempeln .5s cubic-bezier(.2,1.3,.4,1) forwards;}
@keyframes stempeln{0%{opacity:0;transform:scale(1.9) rotate(-16deg);}60%{opacity:1;transform:scale(.94) rotate(-7deg);}100%{opacity:1;transform:scale(1) rotate(-8deg);}}
.schema .stempel text{font-family:'IBM Plex Mono', monospace;font-weight:500;}

/* Papierkante beim Blattwechsel */
.schema .papierkante{opacity:0;}
.schema .papierkante.zieht{animation:papier .6s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes papier{0%{opacity:1;transform:translateX(0);}85%{opacity:1;}100%{opacity:0;transform:translateX(-624px);}}

/* Blatt-Chips und Pause */
.blatt-leiste{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  justify-content:flex-end;
  max-width:720px;margin:12px 0 0 auto;
}
.blatt-leiste .bl-label{margin-right:6px;color:var(--gedaempft);}
.blatt-leiste button{
  font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  background:var(--papier);color:var(--gedaempft);border:1px solid var(--linie-hell);
  padding:6px 9px;cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.blatt-leiste button:hover{border-color:var(--ultramarin);color:var(--ultramarin);}
.blatt-leiste button.aktiv{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.blatt-leiste button:focus-visible{outline:2px solid var(--ultramarin);outline-offset:2px;}
.blatt-leiste .bl-pause{margin-left:8px;}
@media (max-width:960px){ .blatt-leiste{justify-content:flex-start;max-width:480px;margin-left:0;} }
@media (prefers-reduced-motion: reduce){
  .blatt-leiste{display:none;}
}

/* ——— Automatisierung: Presszelle ——— */
@media (max-width:1100px){ nav{gap:24px;} }
@media (max-width:1000px){ nav a.nav-link[href="#leistungen"]{display:none;} }
#automatisierung{border-top:1px solid var(--linie-hell);}
.zelle{
  margin-top:clamp(44px, 5vw, 72px);
  border:1px solid var(--linie-dunkel);
  background:var(--papier);
}
.zelle-kopf{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  padding:14px 18px;
  border-bottom:1px solid var(--linie-hell);
  color:var(--gedaempft);
}
.zelle-kopf .zaehler{color:var(--tinte);font-variant-numeric:tabular-nums;}
.zelle-buehne{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.zelle-buehne.zieht{cursor:grabbing;}
.zelle-buehne canvas{display:block;width:100%;height:100%;}
.zelle-phase{
  position:absolute;
  left:18px;top:16px;
  max-width:min(46%, 360px);
  pointer-events:none;
}
.zelle-phase .name{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(18px, 2.1vw, 26px);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-top:6px;
}
.zelle-phase .was{
  font-size:13.5px;
  line-height:1.45;
  color:var(--gedaempft);
  margin-top:8px;
}
.zelle-werte{
  position:absolute;
  right:18px;top:16px;
  margin:0;
  display:grid;
  grid-template-columns:auto auto;
  gap:5px 14px;
  text-align:right;
  pointer-events:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.zelle-werte > div{display:contents;}
.zelle-werte dt{color:var(--gedaempft);}
.zelle-werte dd{margin:0;color:var(--tinte);font-variant-numeric:tabular-nums;min-width:9ch;}
.zelle-werte dd.blau{color:var(--ultramarin);}
.zelle-hinweis{
  position:absolute;
  right:18px;bottom:14px;
  color:var(--gedaempft);
  pointer-events:none;
}
/* Blaupause: Anzeigen bekommen ein Papier-Kärtchen, damit sie auf Ultramarin lesbar bleiben */
.zelle-buehne[data-ansicht="blau"] .zelle-phase,
.zelle-buehne[data-ansicht="blau"] .zelle-werte{background:rgba(242,242,238,.92);padding:8px 10px;margin:-8px -10px;}
.zelle-buehne[data-ansicht="blau"] .zelle-werte{margin:-8px -10px 0 0;}
.zelle-buehne[data-ansicht="blau"] .zelle-hinweis{color:rgba(242,242,238,.8);}
/* Draht liegt ebenfalls auf Ultramarin */
.zelle-buehne[data-ansicht="draht"] .zelle-phase,
.zelle-buehne[data-ansicht="draht"] .zelle-werte{background:rgba(242,242,238,.92);padding:8px 10px;margin:-8px -10px;}
.zelle-buehne[data-ansicht="draht"] .zelle-werte{margin:-8px -10px 0 0;}
.zelle-buehne[data-ansicht="draht"] .zelle-hinweis{color:rgba(242,242,238,.8);}
@media (max-width:760px){
  .zelle-buehne[data-ansicht="blau"] .zelle-phase,
  .zelle-buehne[data-ansicht="draht"] .zelle-phase{padding:6px 8px;margin:-6px -8px;}
  .zelle-buehne[data-ansicht="blau"] .zelle-werte,
  .zelle-buehne[data-ansicht="draht"] .zelle-werte{margin:0;padding:0;background:none;}
}
/* Beschriftungen im Modell: Schildchen an der Bauteilkante, wie auf dem Blatt */
.zelle-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.zelle-lbl{
  position:absolute;left:0;top:0;
  transform:translate(-50%, calc(-100% - 7px));
  display:none;
  padding:3px 6px 2px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;line-height:1.3;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;
  white-space:nowrap;
  background:rgba(242,242,238,.94);
  color:var(--tinte);
  border:1px solid var(--linie-hell);
}
.zelle-lbl::after{
  content:'';position:absolute;left:50%;bottom:-7px;
  width:1px;height:7px;background:currentColor;opacity:.7;
}
.zelle-lbl.zyk{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.zelle-lbl.plan{background:var(--ultramarin);color:#fff;border-color:var(--ultramarin);}
.zelle-lbl.idee{background:rgba(242,242,238,.8);color:var(--gedaempft);border:1px dashed var(--gedaempft);text-decoration:line-through;}
.zelle-buehne[data-ansicht="studie"] .zelle-lbl{border-color:var(--linie-dunkel);}
@media (max-width:760px){
  .zelle-lbl{font-size:9px;padding:2px 5px 1px;letter-spacing:0.08em;}
}
.zelle-tipp{
  position:absolute;left:50%;bottom:44px;transform:translate(-50%, 6px);
  padding:7px 11px;
  background:var(--tinte);color:var(--papier);
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .2s ease, transform .2s ease;
}
.zelle-tipp.da{opacity:1;transform:translate(-50%, 0);}
.zelle-leiste{border-top:1px solid var(--linie-dunkel);}
.zelle-takt{
  position:relative;
  display:flex;
  height:30px;
  border-bottom:1px solid var(--linie-hell);
}
.zelle-takt .abschnitt{
  position:relative;
  flex:0 0 auto;
  height:100%;
  border-right:1px solid var(--linie-hell);
  padding-left:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.12em;
  color:var(--gedaempft);
  line-height:30px;
  overflow:hidden;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.zelle-takt .abschnitt:last-child{border-right:0;}
.zelle-takt .abschnitt.aktuell{color:var(--tinte);background:#ECECE6;}
.zelle-takt .lauf{
  position:absolute;
  left:0;bottom:-1px;
  height:3px;
  width:0;
  background:var(--ultramarin);
  pointer-events:none;
}
.zelle-steuer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 24px;
  padding:12px 18px;
}
.zelle-steuer .gruppe{display:flex;flex-wrap:wrap;gap:6px;}
.zelle-steuer button{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  background:var(--papier);
  color:var(--tinte);
  border:1px solid var(--linie-hell);
  padding:8px 12px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.zelle-steuer button:hover{border-color:var(--ultramarin);color:var(--ultramarin);}
.zelle-steuer button.aktiv{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.zelle-steuer button:focus-visible{outline:2px solid var(--ultramarin);outline-offset:2px;}
.zelle-fuss{margin-top:14px;color:var(--gedaempft);}
.zelle-lead{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.22;
  letter-spacing:-0.01em;
  max-width:30ch;
}
.zelle-lead em{font-style:normal;color:var(--ultramarin);}

/* Mehr erfahren: Zeile wie in den Fragen, dahinter klappt der Text auf */
.mehr-knopf{
  width:100%;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 56px;
  gap:28px;
  align-items:baseline;
  margin-top:clamp(40px, 5vw, 64px);
  padding:30px 0;
  border:0;
  border-top:1px solid var(--linie-dunkel);
  border-bottom:1px solid var(--linie-dunkel);
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:padding-left .25s cubic-bezier(.4,0,.2,1);
}
.mehr-knopf:hover{padding-left:16px;}
.mehr-knopf:focus-visible{outline:2px solid var(--ultramarin);outline-offset:4px;}
.mehr-knopf .m-nr{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.14em;
  color:var(--gedaempft);
  transition:color .15s ease;
}
.mehr-knopf .m-titel{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(18px, 1.9vw, 24px);
  line-height:1.25;
  letter-spacing:-0.01em;
  padding-right:32px;
  transition:color .15s ease;
}
.mehr-knopf .m-zeichen{
  justify-self:end;
  align-self:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:19px;
  line-height:1;
  color:var(--linie-dunkel);
  transition:color .15s ease;
}
.mehr-knopf .m-zeichen::before{content:'+';}
.mehr-knopf[aria-expanded="true"] .m-zeichen{color:var(--ultramarin);}
.mehr-knopf[aria-expanded="true"] .m-zeichen::before{content:'\2212';}
.mehr-knopf:hover .m-nr,
.mehr-knopf:hover .m-titel,
.mehr-knopf:hover .m-zeichen{color:var(--ultramarin);}
.mehr{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .65s cubic-bezier(.4,0,.2,1);
}
.mehr.zu{grid-template-rows:0fr;}
.mehr-innen{overflow:hidden;min-height:0;padding-bottom:4px;}
.mehr-innen .prosa{
  margin-top:clamp(40px, 5vw, 64px);
  max-width:68ch;
}
.mehr-innen .prosa p{color:var(--gedaempft);margin-bottom:22px;}
.mehr-innen .prosa p:last-child{margin-bottom:0;}
.mehr-innen .prosa strong{color:var(--tinte);font-weight:640;}
@media (prefers-reduced-motion: reduce){
  .mehr{transition:none;}
}
@media (max-width:760px){
  .mehr-knopf{grid-template-columns:64px 1fr 32px;gap:16px;padding:24px 0;}
}

/* Kennzahlen aus der Studie */
.kennzahlen{
  list-style:none;
  margin-top:clamp(48px, 6vw, 80px);
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(20px, 2.5vw, 36px);
}
.kennzahlen li{border-top:1px solid var(--linie-dunkel);padding-top:16px;}
.kennzahlen .wert{
  display:block;
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(26px, 2.7vw, 38px);
  line-height:1;
  letter-spacing:-0.015em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.kennzahlen .wert small{
  font-size:.48em;
  font-weight:500;
  font-stretch:100%;
  color:var(--gedaempft);
  letter-spacing:0;
  margin-left:.15em;
}
.kennzahlen .label{
  display:block;
  margin-top:10px;
  font-size:14px;
  line-height:1.45;
  color:var(--gedaempft);
}
#automatisierung .raster{grid-template-columns:repeat(3, minmax(0,1fr));row-gap:clamp(34px, 4vw, 52px);}
.zelle-aktion{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
@media (max-width:1000px){ .kennzahlen{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width:900px){ #automatisierung .raster{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){
  .zelle-buehne{aspect-ratio:4/5;}
  .zelle-phase .was{display:none;}
  .zelle-phase .name{font-size:18px;}
  .zelle-phase{background:rgba(242,242,238,.85);padding:6px 8px;margin:-6px -8px;max-width:70%;}
  .zelle-kopf span:nth-child(3){display:none;}
  .zelle-werte{
    top:auto;bottom:12px;left:18px;right:18px;
    display:flex;flex-wrap:wrap;gap:4px 10px;
    text-align:left;font-size:10px;
  }
  .zelle-werte > div{display:flex;gap:8px;background:rgba(242,242,238,.85);padding:2px 4px;}
  .zelle-werte > div:nth-child(n+4){display:none;}
  .zelle-werte dd{min-width:0;}
  .zelle-hinweis{display:none;}
  .zelle-tipp{display:none;}
  .zelle-takt .abschnitt{padding-left:4px;}
  .zelle-takt .abschnitt.eng{color:transparent;}
  .zelle-steuer{justify-content:flex-start;}
}
@media (max-width:560px){
  .kennzahlen{grid-template-columns:1fr 1fr;}
  #automatisierung .raster{grid-template-columns:1fr;}
}


/* ——— Kapitel der Presszelle: 01 Zyklus · 02 Verbesserungen · 03 Bis zur letzten Schraube ——— */
.zelle-kapitel{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-bottom:1px solid var(--linie-dunkel);
}
.zelle-kapitel button{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:14px;
  row-gap:2px;
  align-items:baseline;
  padding:16px 18px 18px;
  border:0;
  border-right:1px solid var(--linie-hell);
  background:none;
  color:var(--gedaempft);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.zelle-kapitel button:last-child{border-right:0;}
.zelle-kapitel button:hover{color:var(--tinte);background:#ECECE6;}
.zelle-kapitel button:focus-visible{outline:2px solid var(--ultramarin);outline-offset:-3px;}
.zelle-kapitel button.aktiv{color:var(--tinte);}
.zelle-kapitel .kp-nr{
  grid-row:1 / span 2;
  align-self:start;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  padding-top:5px;
  color:var(--gedaempft);
}
.zelle-kapitel button.aktiv .kp-nr{color:var(--ultramarin);}
.zelle-kapitel .kp-titel{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(15px, 1.5vw, 19px);
  line-height:1.15;
  letter-spacing:-0.01em;
}
.zelle-kapitel .kp-sub{
  grid-column:2;
  font-size:12.5px;
  line-height:1.4;
  color:var(--gedaempft);
}
.zelle-kapitel .kp-lauf{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:3px;
  background:transparent;
}
.zelle-kapitel .kp-lauf span{
  display:block;
  height:100%;
  width:0;
  background:var(--ultramarin);
}
.zelle-kapitel button:not(.aktiv) .kp-lauf span{background:var(--linie-dunkel);}

/* Bühne: welche Anzeigen zu welchem Kapitel gehören */
.zelle-buehne[data-kapitel="plan"] .zelle-werte,
.zelle-buehne[data-kapitel="liste"] .zelle-werte{display:none;}
.zelle-vergleich,.zelle-liste,.zelle-uebergabe{display:none;}
.zelle-buehne[data-kapitel="plan"] .zelle-vergleich{display:grid;}
.zelle-buehne[data-kapitel="liste"][data-schritt="liste"] .zelle-liste{display:block;}
.zelle-buehne[data-kapitel="liste"][data-schritt="uebergabe"] .zelle-uebergabe{display:block;}

/* Kapitel 02: Idee wird durchgestrichen, Plan rückt nach */
.zelle-vergleich{
  position:absolute;
  right:18px;top:16px;
  width:min(40%, 330px);
  gap:10px;
  pointer-events:none;
  background:rgba(242,242,238,.88);
  padding:10px 12px;
  margin:-10px -12px;
}
.vg-zeile{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:baseline;}
.vg-k{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gedaempft);
}
.vg-w{
  position:relative;
  display:inline-block;
  font-size:14px;
  line-height:1.35;
  color:var(--tinte);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease, color .3s ease;
}
.vg-w::after{
  content:'';
  position:absolute;
  left:0;top:55%;
  height:1.5px;
  width:0;
  background:var(--tinte);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.zelle-vergleich.idee-da .vg-idee .vg-w{opacity:1;transform:none;}
.zelle-vergleich.idee-weg .vg-idee .vg-w{color:var(--gedaempft);}
.zelle-vergleich.idee-weg .vg-idee .vg-w::after{width:100%;}
.zelle-vergleich.plan-da .vg-plan .vg-w{opacity:1;transform:none;color:var(--ultramarin);}
.vg-effekt .vg-w{
  font-stretch:125%;
  font-weight:640;
  font-size:17px;
  letter-spacing:-0.01em;
}
.zelle-vergleich.effekt-da .vg-effekt .vg-w{opacity:1;transform:none;}

/* Kapitel 03: Stückliste */
.zelle-liste{
  position:absolute;
  right:18px;top:16px;
  width:min(46%, 400px);
  pointer-events:none;
  background:rgba(242,242,238,.9);
  padding:10px 12px;
  margin:-10px -12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.03em;
}
.zl-kopf{
  display:flex;justify-content:space-between;gap:12px;
  text-transform:uppercase;letter-spacing:0.14em;font-size:10px;
  color:var(--gedaempft);
  padding-bottom:6px;
  border-bottom:1px solid var(--linie-dunkel);
}
.zl-kopf span:last-child{color:var(--tinte);font-variant-numeric:tabular-nums;}
.zl-gruppe{
  padding:8px 0 6px;
  color:var(--ultramarin);
  text-transform:uppercase;letter-spacing:0.12em;font-size:10px;
}
.zl-zeilen{display:grid;gap:3px;}
.zl-zeile{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;
  color:var(--tinte);
  animation:zl-auf .3s ease both;
}
@keyframes zl-auf{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.zl-nr{color:var(--gedaempft);font-variant-numeric:tabular-nums;}
.zl-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zl-zeile.letzte{color:var(--ultramarin);}
.zl-zeile.letzte .zl-nr{color:var(--ultramarin);}
.zl-zeile.letzte .zl-text{white-space:normal;}

/* Kapitel 03, Übergabe */
.zelle-uebergabe{
  position:absolute;
  right:18px;top:16px;
  width:min(46%, 400px);
  pointer-events:none;
  background:rgba(242,242,238,.9);
  padding:10px 12px;
  margin:-10px -12px;
}
.ub-kopf{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gedaempft);
  padding-bottom:6px;margin-bottom:8px;
  border-bottom:1px solid var(--linie-dunkel);
}
.ub-paket{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:4px;}
.ub-paket li{
  position:relative;
  padding-left:18px;
  font-size:13px;line-height:1.35;
  color:var(--tinte);
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s ease, transform .3s ease;
}
.ub-paket li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--ultramarin);
}
.ub-paket li.da{opacity:1;transform:none;}
.ub-balken{
  display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:10px;align-items:center;
  margin-bottom:6px;
  font-family:'IBM Plex Mono', monospace;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gedaempft);
}
.ub-b{display:block;height:12px;background:#E4E4DC;}
.ub-b span{display:block;height:100%;width:0;background:var(--gedaempft);}
.ub-balken.plan .ub-b span{background:var(--ultramarin);}
.ub-balken.plan .ub-k,.ub-balken.plan .ub-w{color:var(--ultramarin);}
.ub-w{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinte);}
.ub-fazit{
  margin-top:10px;
  font-stretch:125%;font-weight:640;font-size:16px;line-height:1.25;letter-spacing:-0.01em;
  color:var(--tinte);
  opacity:0;transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.ub-fazit.da{opacity:1;transform:none;}
.zelle-takt .abschnitt[role="button"]{cursor:pointer;}
.zelle-takt .abschnitt[role="button"]:hover{color:var(--ultramarin);}

@media (max-width:900px){
  .zelle-kapitel .kp-sub{display:none;}
  .zelle-kapitel button{padding:14px 14px 16px;column-gap:10px;}
}
@media (max-width:760px){
  .zelle-vergleich{
    top:auto;bottom:12px;left:18px;right:18px;width:auto;
    gap:6px;margin:0;padding:8px 10px;
  }
  .vg-zeile{grid-template-columns:46px minmax(0,1fr);gap:8px;}
  .vg-w{font-size:12.5px;}
  .vg-effekt .vg-w{font-size:14px;}
  .zelle-liste{
    top:auto;bottom:12px;left:18px;right:18px;width:auto;margin:0;padding:8px 10px;font-size:10px;
  }
  .zl-zeile{grid-template-columns:54px minmax(0,1fr);gap:8px;}
  .zl-zeilen .zl-zeile:nth-last-child(n+5){display:none;}
  .zelle-uebergabe{
    top:auto;bottom:12px;left:18px;right:18px;width:auto;margin:0;padding:8px 10px;
  }
  .ub-paket{display:none;}
  .zelle-uebergabe .ub-kopf:first-child{display:none;}
  .ub-balken{grid-template-columns:96px minmax(0,1fr) 40px;gap:8px;}
  .ub-fazit{font-size:13.5px;margin-top:6px;}
}
.zelle-kapitel .kp-kurz{display:none;}
@media (max-width:560px){
  .zelle-kapitel .kp-titel{display:none;}
  .zelle-kapitel .kp-kurz{
    display:block;
    font-stretch:125%;font-weight:640;font-size:13px;line-height:1.15;letter-spacing:-0.01em;
  }
  .zelle-kapitel .kp-nr{font-size:10px;padding-top:3px;}
  .zelle-kapitel button{padding:12px 10px 14px;column-gap:8px;}
}
@media (prefers-reduced-motion: reduce){
  .vg-w,.vg-w::after,.ub-paket li,.ub-fazit{transition:none;}
  .zl-zeile{animation:none;}
}
/* ——— Papierlose Fertigung: Hallenbildschirm ——— */
.tafel{--tf-flaeche:#FFFFFF;--tf-ton:#F6F7F9;--tf-linie:#DCE0E6;--tf-linie-fein:#E8EBEF;--tf-grau:#68717C;--tf-gut:#1B7A42;--tf-warn:#B3261E;}
.tafel-kopf{
  background:var(--tinte);
  color:#B8B8AF;
  border-bottom:0;
  align-items:center;
  gap:8px 20px;
}
.tafel-kopf .tk-marke{letter-spacing:0.18em;color:#8B8B82;}
.tafel-kopf .tk-marke b{color:var(--papier);font-weight:500;}
.tafel-kopf .tk-kpi{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;}
.tafel-kopf .tk-kpi i{font-style:normal;color:#8B8B82;letter-spacing:0.14em;}
.tafel-kopf .tk-kpi b{
  color:var(--papier);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  margin-right:10px;
  min-width:2ch;
  display:inline-block;
}
.tafel-kopf .tk-zeit{color:#8B8B82;font-variant-numeric:tabular-nums;}

.tafel-buehne{
  position:relative;
  aspect-ratio:16/9;
  display:grid;
  grid-template-columns:clamp(220px, 25%, 310px) minmax(0,1fr);
  background:var(--tf-ton);
  overflow:hidden;
  font-size:clamp(11px, 1.05vw, 13.5px);
  line-height:1.4;
  color:var(--tinte);
}

/* linke Spalte: Steuerung mit Warteschlange und Läuft-Panel */
.tf-spalte{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  border-right:1px solid var(--tf-linie);
  background:var(--tf-ton);
  min-width:0;
}
.tf-sp-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--linie-dunkel);
  padding-bottom:8px;
}
.tf-st{font-stretch:125%;font-weight:640;font-size:1.55em;letter-spacing:-0.01em;}
.tf-plaetze{font-size:.76em;color:var(--tf-grau);letter-spacing:0.12em;}
.tf-sp-label{
  display:flex;
  justify-content:space-between;
  font-size:.78em;
  color:var(--tf-grau);
}
.tf-pillen{list-style:none;display:flex;flex-direction:column;gap:6px;min-height:0;}
.tf-pille{
  background:var(--tf-flaeche);
  border:1px solid var(--tf-linie);
  border-left:3px solid var(--tf-linie);
  padding:7px 9px;
  transition:border-color .3s ease, background .3s ease, opacity .3s ease;
}
.tf-pille .p-nr{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:1.3em;
  letter-spacing:0.01em;
  font-variant-numeric:tabular-nums;
}
.tf-pille .p-zeile{display:block;color:var(--tf-grau);font-size:.86em;margin-top:2px;}
.tf-pille .p-badge{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72em;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border:1px solid var(--tf-linie);
  color:var(--tf-grau);
  padding:1px 5px;
  margin-left:6px;
  vertical-align:2px;
}
.tf-pille.dran{border-left-color:var(--ultramarin);background:#F4F5FF;}
.tf-pille.dran .p-badge{border-color:var(--ultramarin);color:var(--ultramarin);}
.tf-pille.weg{opacity:0;transform:translateX(-8px);}
.tf-wz{
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:var(--tf-flaeche);
  border:1px solid var(--tf-linie);
  padding:7px 9px;
  font-size:.78em;
  color:var(--tf-grau);
}
.tf-wz b{color:var(--tinte);font-weight:500;}
.tf-laeuft{
  margin-top:auto;
  background:var(--tinte);
  color:var(--papier);
  border-top:3px solid var(--ultramarin);
  padding:10px 12px 12px;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}
.tf-laeuft .l-kopf{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76em;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#8B8B82;
  display:flex;
  align-items:center;
  gap:7px;
}
.tf-laeuft .l-punkt{width:7px;height:7px;background:var(--ultramarin);flex:none;}
.tf-laeuft.an .l-punkt{animation:blinken 1.2s steps(2, end) infinite;}
.tf-laeuft .l-nr{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:1.9em;
  letter-spacing:0.01em;
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.tf-laeuft .l-zeile{font-size:.86em;color:#B8B8AF;}
.tf-laeuft .l-leer{
  font-family:'IBM Plex Mono', monospace;
  font-size:.8em;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#8B8B82;
  text-align:center;
}

/* rechte Seite: die Fenster, die beim Scannen aufgehen */
.tf-rechts{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.tf-fenster{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
.tf-dlg{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--tf-flaeche);
  border:1px solid var(--linie-dunkel);
  box-shadow:0 18px 40px -28px rgba(20,20,18,.5);
  padding:12px 14px 14px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .32s ease, transform .32s cubic-bezier(.3,0,.2,1);
}
.tf-dlg.da{opacity:1;transform:none;}
.tf-dlg .d-kopf{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  border-bottom:1px solid var(--tf-linie);
  padding-bottom:8px;
  margin-bottom:10px;
}
.tf-dlg .d-titel{font-stretch:125%;font-weight:640;font-size:1.35em;letter-spacing:-0.01em;}
.tf-dlg .d-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:.8em;
  letter-spacing:0.08em;
  color:var(--tf-grau);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tf-gitter{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;}
.tf-sek{background:var(--tf-ton);border:1px solid var(--tf-linie-fein);padding:8px 10px;min-width:0;}
.tf-sek.voll{grid-column:1 / -1;}
.tf-l{
  font-family:'IBM Plex Mono', monospace;
  font-size:.74em;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tf-grau);
  margin-bottom:5px;
}
.tf-z{margin-top:1px;color:var(--tf-grau);}
.tf-z b{color:var(--tinte);font-weight:500;}
.tf-z .mono, .tf-dlg .mono{font-family:'IBM Plex Mono', monospace;font-size:1em;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;}
.tf-gross{
  font-family:'IBM Plex Mono', monospace;
  font-size:2.1em;
  font-weight:500;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.tf-sek.druck{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tf-sek.druck .tf-l{margin-bottom:0;}
.tf-druckblock{text-align:right;}
.tf-druckwert{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.75em;
  font-weight:500;
  line-height:1.1;
  color:var(--ultramarin);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tf-druckfuss{
  font-family:'IBM Plex Mono', monospace;
  font-size:.74em;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--tf-grau);
  margin-top:2px;
}
.tf-tab{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono', monospace;font-variant-numeric:tabular-nums;}
.tf-tab th{
  text-align:left;
  font-size:.74em;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--tf-grau);
  border-bottom:1px solid var(--tf-linie);
  padding:0 0 3px;
}
.tf-tab td{padding:3px 0 0;font-size:.95em;}
.tf-tab td:last-child, .tf-tab th:last-child{text-align:right;}
.tf-feld{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:5px;
}
.tf-feld label{color:var(--tf-grau);}
.tf-feld label .u{display:block;font-size:.82em;color:var(--tf-grau);opacity:.85;}
.tf-eingabe{
  font-family:'IBM Plex Mono', monospace;
  font-variant-numeric:tabular-nums;
  background:var(--tf-flaeche);
  border:1px solid var(--linie-dunkel);
  padding:4px 8px;
  min-width:7.5ch;
  text-align:right;
  position:relative;
}
.tf-eingabe.gross{font-size:2.1em;padding:2px 10px;line-height:1.15;}
.tf-eingabe .caret{
  display:inline-block;
  width:1px;
  height:1em;
  background:var(--tinte);
  vertical-align:-2px;
  margin-left:1px;
  animation:blinken .9s steps(2, end) infinite;
}
.tf-ampel{
  flex:none;
  margin-top:8px;
  border:1px solid var(--tf-linie);
  background:var(--tf-flaeche);
  padding:7px 10px;
  color:var(--tf-grau);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.tf-ampel b{font-weight:500;}
.tf-ampel.gut{border-color:var(--tf-gut);background:#EEF7F1;color:var(--tf-gut);}
.tf-ampel.schlecht{border-color:var(--tf-warn);background:#FCEEEC;color:var(--tf-warn);}
.tf-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.tf-knoepfe.unten{margin-top:auto;padding-top:10px;}
.tf-ampel.unten{margin-top:auto;}
.tf-kn{
  font-family:'IBM Plex Mono', monospace;
  font-size:.82em;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border:1px solid var(--linie-dunkel);
  background:var(--tf-flaeche);
  color:var(--tinte);
  padding:6px 12px;
}
.tf-kn.haupt{background:var(--ultramarin);border-color:var(--ultramarin);color:var(--papier);}
.tf-kn.warn{background:var(--tf-warn);border-color:var(--tf-warn);color:#fff;}
.tf-kn.gedrueckt{transform:translateY(1px);filter:brightness(.9);}
/* Zeichnung am Bildschirm */
.tf-zg{flex:1;min-height:0;background:#FFFFFE;border:1px solid var(--tf-linie-fein);position:relative;overflow:hidden;--zg:1;--zgt:1;}
.tf-zg svg{display:block;width:100%;height:100%;}
.tf-zg svg .z{fill:none;stroke:var(--tinte);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--zg) 1;}
.tf-zg svg .z.m{stroke:#8B8B82;stroke-width:.9;}
.tf-zg svg .z.p{fill:#8B8B82;stroke:#8B8B82;stroke-width:.6;}
.tf-zg svg .z.mitte{stroke:#8B8B82;stroke-width:.8;}
.tf-zg svg .z.verdeckt{stroke:#6B6B66;stroke-width:1;}
.tf-zg svg text{font-family:'IBM Plex Mono', monospace;font-size:12px;fill:var(--tinte);opacity:var(--zgt);transition:opacity .3s ease;}
.tf-zg svg text.tk{font-size:10px;fill:#6B6B66;letter-spacing:0.03em;}
.tf-zg svg .mark{fill:var(--ultramarin);opacity:0;transition:opacity .3s ease;}
.tf-zg.hi svg .z.pruef{stroke:var(--ultramarin);stroke-width:1.5;}
.tf-zg.hi svg .z.p.pruef{fill:var(--ultramarin);}
.tf-zg.hi svg .mark{opacity:1;}
.tf-zg.hi svg text.pruef{fill:#fff;font-weight:600;}
.tf-zg.hi svg text.tk.pruef{fill:var(--ultramarin);}
.tf-zg.klein{flex:none;height:92px;width:220px;border:0;background:none;}
.tf-zg.klein svg{overflow:visible;}
.tf-zg-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;}
@media (prefers-reduced-motion: reduce){ .tf-zg{--zg:1 !important;--zgt:1 !important;} .tf-zg svg .mark{opacity:1;} }
/* Erstteilprüfung: alle Maße */
.tf-pruef{display:grid;gap:0;margin-bottom:10px;}
.tf-pk,.tf-pz{display:grid;grid-template-columns:minmax(0,1.7fr) .7fr 1.15fr .95fr 14px;gap:10px;align-items:center;}
.tf-pk{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-grau);padding-bottom:5px;border-bottom:1px solid var(--tf-linie);}
.tf-pz{padding:7px 0;border-bottom:1px solid var(--tf-linie-fein);font-size:.94em;}
.tf-pz .pm{font-weight:500;line-height:1.2;}
.tf-pz .pm small{display:block;font-weight:400;color:var(--tf-grau);font-size:.8em;margin-top:1px;}
.tf-pz .soll{color:var(--tinte);} .tf-pz .tol{color:var(--tf-grau);}
.tf-pz .ist{font-weight:600;color:var(--tf-grau);}
.tf-pz .dot{width:11px;height:11px;border-radius:50%;background:var(--tf-linie);justify-self:center;transition:background .2s ease;}
.tf-pz.gut .ist{color:var(--tinte);} .tf-pz.gut .dot{background:var(--ultramarin);}
.tf-pz.schlecht .ist{color:#B3261E;} .tf-pz.schlecht .dot{background:#B3261E;}
@media (max-width:760px){
  .tf-pk .soll,.tf-pk .tol,.tf-pz .soll,.tf-pz .tol{display:none;}
  .tf-pk,.tf-pz{grid-template-columns:minmax(0,1fr) auto 14px;}
}
/* Zeichnung: einzelne Bemaßung hervorheben, wenn oben gemessen */
.tf-zg svg g.mass text{fill:#6B6B66;}
.tf-zg svg g.mass .mark{opacity:0;}
.tf-zg svg g.mass.hi .mark{opacity:1;}
.tf-zg svg g.mass.hi line{stroke:var(--ultramarin);}
.tf-zg svg g.mass.hi .p{fill:var(--ultramarin);stroke:var(--ultramarin);}
.tf-zg svg g.mass.hi text{fill:#fff;font-weight:600;}
.tf-pruef-fuss{color:var(--tf-grau);font-size:10.5px;letter-spacing:.03em;margin:3px 0 7px;}
.tf-zg.voll{flex:1;min-height:150px;border:1px solid var(--tf-linie-fein);background:#FFFFFE;}
.tf-hinweis{margin-top:9px;color:var(--tf-grau);font-size:.92em;}
.tf-hinweis.unten{margin-top:auto;padding-top:9px;}
.tf-hinweis.stark{color:var(--tinte);font-weight:500;}

/* Kartenleser */
.tf-leser{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(24px, 5%, 60px);min-height:0;}
.tf-geraet{
  position:relative;
  width:clamp(140px, 19%, 200px);aspect-ratio:5/3;
  border:1px solid var(--linie-dunkel);
  background:var(--tf-ton);
  flex:none;
}
.tf-geraet .g-schlitz{position:absolute;left:12%;right:12%;top:20%;height:7px;background:var(--tinte);}
.tf-geraet .g-led{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;
  background:#C9CCD4;
  transition:background .3s ease, box-shadow .3s ease;
}
.tf-geraet .g-led.wartet{background:var(--ultramarin);animation:blinken 1s steps(2,end) infinite;}
.tf-geraet .g-led.ok{background:var(--tf-gut);box-shadow:0 0 0 5px rgba(27,122,66,.16);animation:none;}
.tf-karte{
  position:relative;
  width:clamp(130px, 18%, 188px);aspect-ratio:8/5;
  border:1px solid var(--linie-dunkel);
  background:var(--tf-flaeche);
  flex:none;
  will-change:transform;
}
.tf-karte .k-streif{position:absolute;left:0;right:0;top:13%;height:11px;background:var(--tinte);}
.tf-karte .k-foto{position:absolute;left:8%;top:38%;width:22%;height:42%;border:1px solid var(--tf-linie);background:var(--tf-ton);}
.tf-karte .k-l1{position:absolute;left:36%;top:42%;right:10%;height:6px;background:var(--tf-linie);}
.tf-karte .k-l2{position:absolute;left:36%;top:58%;right:26%;height:6px;background:var(--tf-linie-fein);}
.tf-stat{
  flex:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:.9em;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--tf-grau);
}
.tf-stat.ok{color:var(--tf-gut);}

/* Etikettendrucker */
.tf-druck{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(18px, 4%, 44px);min-height:0;}
.tf-drucker{
  position:relative;
  width:clamp(150px, 20%, 215px);aspect-ratio:16/9;
  border:1px solid var(--linie-dunkel);
  background:var(--tinte);
  flex:none;
}
.tf-drucker .d-rolle{position:absolute;left:12%;top:18%;width:26%;aspect-ratio:1;border:2px solid #5C5C55;border-radius:50%;}
.tf-drucker .d-schlitz{position:absolute;left:11%;right:11%;bottom:15%;height:6px;background:var(--papier);}
.tf-drucker .d-led{position:absolute;right:12%;top:22%;width:10px;height:10px;border-radius:50%;background:var(--ultramarin);animation:blinken 1s steps(2,end) infinite;}
.tf-drucker .d-led.ok{background:#5BD08A;animation:none;}
.tf-etikett{
  position:relative;
  width:min(340px, 50%);
  background:var(--tf-flaeche);
  border:1px solid var(--linie-dunkel);
  padding:8px 10px 9px;
  overflow:hidden;
  will-change:clip-path;
}
.tf-etikett .e-nr{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.5em;
  font-weight:500;
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
}
.tf-etikett .e-bez{font-size:.88em;color:var(--tf-grau);margin-bottom:5px;}
.tf-etikett .e-bc{position:relative;margin:4px 0 5px;}
.tf-etikett .e-bc svg{display:block;width:100%;height:clamp(38px, 4.5vw, 54px);}
.tf-etikett .e-z{font-size:.88em;color:var(--tf-grau);}
.tf-etikett .e-z b{color:var(--tinte);font-weight:500;}
.tf-etikett .e-ok{
  position:absolute;right:8px;top:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.74em;
  font-weight:500;
  letter-spacing:0.1em;
  color:var(--tf-gut);
  border:1px solid var(--tf-gut);
  padding:1px 5px;
  opacity:0;
  transition:opacity .3s ease;
}
.tf-etikett.gelesen .e-ok{opacity:1;}
.tf-laser{
  position:absolute;left:-6%;right:-6%;top:0;height:2px;
  background:var(--tf-warn);
  box-shadow:0 0 10px 1px rgba(179,38,30,.5);
  opacity:0;
}
.tf-laser.an{opacity:1;}

/* Auftragsbegleitschein (Schritt 1 + 2) */
.tf-schein-platz{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.tf-schein{
  position:relative;
  width:min(420px, 76%);
  background:var(--tf-flaeche);
  border:1px solid var(--linie-dunkel);
  box-shadow:0 20px 44px -30px rgba(20,20,18,.55);
  padding:14px 18px 16px;
  transform:rotate(-1.2deg);
}
.tf-schein::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-7px;height:7px;
  background:repeating-linear-gradient(90deg, var(--tf-flaeche) 0 7px, transparent 7px 14px);
  border-bottom:1px dashed var(--tf-linie);
}
.tf-schein .s-kopf{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76em;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--tf-grau);
  border-bottom:1px solid var(--tf-linie);
  padding-bottom:6px;
  display:flex;
  justify-content:space-between;
}
.tf-schein .s-nr{
  font-family:'IBM Plex Mono', monospace;
  font-size:2.3em;
  font-weight:500;
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  margin-top:8px;
}
.tf-schein .s-bez{color:var(--tf-grau);font-size:.92em;}
.tf-schein .s-bc{position:relative;margin:10px 0 8px;}
.tf-schein .s-bc svg{display:block;width:100%;height:52px;}
.tf-schein .s-z{font-family:'IBM Plex Mono', monospace;font-size:.86em;color:var(--tf-grau);font-variant-numeric:tabular-nums;}

/* Läuft-Karte (Schritt 6) */
.tf-lauf-karte{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  background:var(--tinte);
  color:var(--papier);
  border-top:3px solid var(--ultramarin);
  padding:18px 20px;
}
.tf-lauf-karte .lk-kopf{
  font-family:'IBM Plex Mono', monospace;
  font-size:.8em;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#8B8B82;
  display:flex;align-items:center;gap:8px;
}
.tf-lauf-karte .lk-punkt{width:8px;height:8px;background:var(--ultramarin);flex:none;animation:blinken 1.2s steps(2,end) infinite;}
.tf-lauf-karte .lk-nr{
  font-family:'IBM Plex Mono', monospace;
  font-size:3em;
  font-weight:500;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.tf-lauf-karte .lk-zeile{color:#B8B8AF;font-size:.98em;}
.tf-lauf-karte .lk-werte{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:10px;border-top:1px solid #2C2C28;padding-top:10px;}
.tf-lauf-karte .lk-werte div{font-family:'IBM Plex Mono', monospace;font-size:.86em;color:#8B8B82;font-variant-numeric:tabular-nums;}
.tf-lauf-karte .lk-werte b{display:block;color:var(--papier);font-weight:500;font-size:1.25em;margin-top:2px;}
.tf-lauf-karte .lk-hinweis{margin-top:12px;color:#B8B8AF;font-size:.92em;}
@media (prefers-reduced-motion: reduce){
  .tf-lauf-karte .lk-punkt{animation:none;}
}

/* Schrittanzeige in der Bühne */
.tf-schritt{
  flex:none;
  border-top:1px solid var(--tf-linie);
  padding-top:9px;
  pointer-events:none;
}
.tf-schritt .mono{display:block;font-size:.78em;color:var(--tf-grau);}
.tf-schritt-name{
  display:block;
  font-stretch:125%;
  font-weight:640;
  font-size:1.5em;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin-top:2px;
}
.tf-schritt-was{display:block;color:var(--tf-grau);font-size:.95em;margin-top:3px;max-width:70ch;}

/* Scannerzeile */
.tf-scanner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  padding:10px 16px;
  background:var(--tinte);
  color:#8B8B82;
  font-size:11px;
}
.tf-scanner .tf-sc-l{letter-spacing:0.16em;}
.tf-scanner .tf-sc-r{margin-left:auto;color:#5C5C55;}
.tf-sc-feld{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid #2C2C28;
  padding:5px 12px;
  min-width:19ch;
  color:var(--papier);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.14em;
}
.tf-sc-punkt{width:7px;height:7px;background:#5BD08A;flex:none;}
.tf-sc-feld.liest{border-color:var(--ultramarin);}
.tf-sc-feld.liest .tf-sc-punkt{background:var(--ultramarin);animation:blinken .5s steps(2,end) infinite;}

@media (prefers-reduced-motion: reduce){
  .tf-dlg{transition:none;}
  .tf-laeuft.an .l-punkt,
  .tf-geraet .g-led.wartet,
  .tf-drucker .d-led,
  .tf-eingabe .caret,
  .tf-sc-feld.liest .tf-sc-punkt{animation:none;}
}
@media (max-width:900px){
  .tafel-kopf .tk-zeit{display:none;}
}
@media (max-width:760px){
  .tafel-buehne{
    aspect-ratio:5/8;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    font-size:11.5px;
  }
  .tafel-kopf{justify-content:space-between;}
  .tafel-kopf .tk-kpi{gap:2px 6px;font-size:10px;}
  .tafel-kopf .tk-kpi i{font-size:0;letter-spacing:0;}
  .tafel-kopf .tk-kpi i::first-letter{font-size:10px;}
  .tafel-kopf .tk-kpi b{margin-right:6px;min-width:1ch;}
  .tf-spalte{
    flex-direction:row;
    align-items:stretch;
    gap:10px;
    border-right:0;
    border-bottom:1px solid var(--tf-linie);
    padding:10px 12px;
  }
  .tf-sp-kopf{border-bottom:0;padding-bottom:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;flex:none;}
  .tf-sp-label, .tf-pillen, .tf-wz{display:none;}
  .tf-laeuft{margin-top:0;flex:1;min-height:0;padding:6px 10px;}
  .tf-laeuft .l-nr{font-size:1.5em;}
  .tf-rechts{padding:12px;gap:8px;}
  .tf-schein{width:92%;padding:10px 12px 12px;}
  .tf-schein .s-nr{font-size:1.9em;}
  .tf-lauf-karte{padding:12px 14px;}
  .tf-lauf-karte .lk-nr{font-size:2.1em;}
  .tf-gitter{grid-template-columns:1fr;}
  .tf-sek.knapp{display:none;}
  .tf-schritt-name{font-size:1.25em;}
  .tf-schritt-was{font-size:.9em;}
  .tf-dlg{padding:10px 11px 11px;}
  .tf-dlg .d-kopf{padding-bottom:6px;margin-bottom:7px;}
  .tf-dlg .d-titel{font-size:1.2em;}
  .tf-sek{padding:6px 8px;}
  .tf-gitter{gap:6px;}
  .tf-gross{font-size:1.8em;}
  .tf-eingabe.gross{font-size:1.6em;}
  .tf-leser{gap:14px;}
  .tf-geraet{width:36%;}
  .tf-karte{width:34%;}
  .tf-druck{gap:10px;flex-direction:column;align-items:stretch;justify-content:flex-start;}
  .tf-drucker{width:34%;}
  .tf-etikett{width:auto;padding:6px 8px 7px;}
  .tf-etikett .e-bc svg{height:32px;}
  .tf-etikett .e-nr{font-size:1.3em;}
  .tf-feld{margin-top:3px;}
  .tf-feld label .u{font-size:.78em;}
  .tf-knoepfe{gap:6px;margin-top:8px;}
  .tf-kn{padding:5px 9px;font-size:.78em;}
  .tf-ampel{padding:5px 8px;font-size:.92em;}
  .tf-scanner .tf-sc-r{display:none;}
}

/* ——— Korrektur: lange Wörter brachen auf schmalen Schirmen aus dem Raster ——— */
@media (max-width:760px){
  .verzeichnis li, .zeile, .faq details, .faq summary{min-width:0;}
  .zeile h3, .faq summary h3{padding-right:0;min-width:0;overflow-wrap:anywhere;}
  .zeile p, .raster p, .raster h3, .kennzahlen .label{min-width:0;overflow-wrap:anywhere;}
  .zeile .pfeil{min-width:0;}
}
@media (max-width:400px){
  header .cta{padding:12px 14px;letter-spacing:0.1em;}
  .hero h1{font-size:clamp(32px, 8.8vw, 68px);}
  #kontakt .mail{overflow-wrap:anywhere;}
  .fusszeile, .fusszeile .gruppe{overflow-wrap:anywhere;}
}
/* Umschalter für den Betrieb */
.zelle-steuer .gruppe.betrieb{align-items:center;}
.zelle-steuer .gruppe-l{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gedaempft);
  margin-right:4px;
  align-self:center;
}
.zelle-unterlead{
  margin-top:20px;
  max-width:62ch;
  color:var(--gedaempft);
  font-size:17px;
}
/* ——— Hero: Werkplan in 3D ——— */
.schema{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;margin:0;}
.schema .szene ~ .szene{display:inline;}
.werkplan3d{width:100%;max-width:720px;margin-left:auto;}
.w3-buehne{
  position:relative;
  aspect-ratio:9/7;
  border:1px solid var(--linie-dunkel);
  background:var(--papier);
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.w3-buehne.zieht{cursor:grabbing;}
.w3-buehne canvas{display:block;width:100%;height:100%;}
.w3-kopf{position:absolute;left:16px;top:14px;max-width:44%;pointer-events:none;background:rgba(242,242,238,.82);padding:4px 8px 6px;margin:-4px -8px;}
.w3-kopf .mono{display:block;color:var(--gedaempft);}
.w3-titel{
  font-stretch:125%;
  font-weight:640;
  font-size:clamp(16px, 1.6vw, 21px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin-top:5px;
}
.w3-phase{margin-top:6px;color:var(--ultramarin);}
.w3-werte{
  position:absolute;right:16px;top:14px;margin:0;
  display:grid;grid-template-columns:auto auto;gap:4px 12px;
  text-align:right;pointer-events:none;
  font-family:'IBM Plex Mono', monospace;font-size:10.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  background:rgba(242,242,238,.82);padding:4px 8px 6px;margin:-4px -8px 0 0;
}
.w3-werte > div{display:contents;}
.w3-werte dt{color:var(--gedaempft);}
.w3-werte dd{margin:0;color:var(--tinte);font-variant-numeric:tabular-nums;white-space:nowrap;}
.w3-hinweis{position:absolute;right:16px;bottom:12px;color:var(--gedaempft);pointer-events:none;}
.w3-tipp{
  position:absolute;left:50%;bottom:40px;transform:translate(-50%, 6px);
  padding:7px 11px;
  background:var(--tinte);color:var(--papier);
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .2s ease, transform .2s ease;
}
.w3-tipp.da{opacity:1;transform:translate(-50%, 0);}
.hero.maschinell .werkplan3d{opacity:1;}
@media (max-width:960px){
  .werkplan3d{margin-left:0;max-width:560px;}
  .w3-buehne{aspect-ratio:1/1;}
  .w3-werte > div:nth-child(n+3){display:none;}
  .w3-hinweis{display:none;}
  .w3-tipp{display:none;}
}
@media (max-width:560px){
  .w3-kopf{max-width:78%;}
  .w3-werte{top:auto;bottom:10px;left:16px;right:auto;text-align:left;font-size:9.5px;gap:3px 8px;margin:0 0 -4px -8px;}
  .w3-werte > div:nth-child(n+3){display:contents;}
  .w3-werte > div:nth-child(n+4){display:none;}
}
/* ——— Zeitkonto ——— */
.zeitkonto{
  margin-top:clamp(48px, 6vw, 80px);
  border:1px solid var(--linie-dunkel);
  background:var(--papier);
}
.zk-kopf{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  padding:14px 18px;
  border-bottom:1px solid var(--linie-hell);
  color:var(--gedaempft);
}
.zk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.zk-posten{padding:22px 24px 18px;border-right:1px solid var(--linie-hell);}
.zk-zeile{
  display:grid;grid-template-columns:minmax(0,1fr) 150px 64px;
  align-items:center;gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--linie-hell);
  cursor:pointer;
}
.zk-zeile:last-of-type{border-bottom:0;}
.zk-zeile.zk-personen{border-top:1px solid var(--linie-dunkel);margin-top:8px;padding-top:16px;}
.zk-name{font-size:15.5px;color:var(--tinte);}
.zk-zeile output{
  font-family:'IBM Plex Mono', monospace;font-size:12.5px;font-weight:500;letter-spacing:0.08em;
  text-align:right;font-variant-numeric:tabular-nums;color:var(--tinte);
}
.zk-zeile input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;background:transparent;margin:0;cursor:pointer;
}
.zk-zeile input[type=range]:focus-visible{outline:2px solid var(--ultramarin);outline-offset:4px;}
.zk-zeile input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--linie-dunkel);}
.zk-zeile input[type=range]::-moz-range-track{height:2px;background:var(--linie-dunkel);}
.zk-zeile input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;border-radius:0;
  background:var(--ultramarin);border:0;
}
.zk-zeile input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:0;background:var(--ultramarin);border:0;}
.zk-fuss{margin-top:14px;color:var(--gedaempft);}
.zk-summe{padding:22px 24px 24px;display:flex;flex-direction:column;}
.zk-summe > .mono{color:var(--gedaempft);}
.zk-tage{
  font-stretch:125%;font-weight:640;
  font-size:clamp(56px, 6vw, 84px);line-height:1;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  margin-top:8px;
}
.zk-tage small{
  display:inline-block;margin-left:.2em;
  font-size:.28em;font-weight:500;font-stretch:100%;letter-spacing:0;color:var(--gedaempft);vertical-align:.35em;
}
.zk-details{margin-top:6px;color:var(--gedaempft);}
.zk-jahr{margin-top:18px;color:var(--tinte);}
.zk-raster{
  display:grid;grid-template-columns:repeat(22, 1fr);gap:3px;
  margin-top:8px;
}
.zk-raster i{display:block;aspect-ratio:1;background:var(--linie-hell);transition:background .25s ease;}
.zk-raster i.voll{background:var(--ultramarin);}
.zk-legende{margin-top:10px;color:var(--gedaempft);display:flex;flex-wrap:wrap;gap:6px 18px;}
.zk-legende span{display:inline-flex;align-items:center;gap:7px;}
.zk-legende i{display:inline-block;width:9px;height:9px;}
.zk-legende .voll{background:var(--ultramarin);}
.zk-legende .leer{background:var(--linie-hell);}
.zk-hinweis{margin-top:auto;padding-top:20px;color:var(--gedaempft);font-size:15px;}
.zk-summe .cta{margin-top:16px;align-self:flex-start;}
@media (max-width:900px){
  .zk-grid{grid-template-columns:1fr;}
  .zk-posten{border-right:0;border-bottom:1px solid var(--linie-hell);}
}
@media (max-width:560px){
  .zk-zeile{grid-template-columns:minmax(0,1fr) 56px;grid-template-rows:auto auto;row-gap:6px;}
  .zk-zeile input[type=range]{grid-column:1 / span 2;}
  .zk-zeile output{grid-column:2;grid-row:1;}
  .zk-posten,.zk-summe{padding:16px 16px;}
  .zk-raster{grid-template-columns:repeat(20, 1fr);}
}

/* ——— Herkunft: Personalblatt ——— */
#herkunft{border-top:1px solid var(--linie-hell);}
#herkunft .herkunft-ed{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(40px,5vw,80px);}
#herkunft .herkunft-text .statement{margin-bottom:clamp(26px, 3vw, 40px);}
.herkunft-foto{margin:0;}
.herkunft-foto .hf-rahmen{position:relative;border:1px solid var(--linie-dunkel);background:#ECECE6;overflow:hidden;}
.herkunft-foto .hf-rahmen::before{content:'';position:absolute;top:-1px;left:-1px;width:16px;height:16px;border:2px solid var(--ultramarin);border-right:0;border-bottom:0;z-index:2;}
.herkunft-foto img{display:block;width:100%;height:auto;filter:grayscale(12%) contrast(1.02);}
.herkunft-foto figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gedaempft);}
.herkunft-foto figcaption span:first-child{color:var(--tinte);}
@media (max-width:860px){ #herkunft .herkunft-ed{grid-template-columns:1fr;gap:40px;} .herkunft-foto{max-width:440px;} }

.stationen{
  margin-top:clamp(48px, 6vw, 80px);
  border:1px solid var(--linie-dunkel);
  background:var(--papier);
}
.st-kopf{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  padding:12px 18px;
  border-bottom:1px solid var(--linie-hell);
  color:var(--gedaempft);
}
.st-kopf span:nth-child(2){color:var(--tinte);}
.st-zeile{
  display:grid;
  grid-template-columns:48px minmax(0,5fr) minmax(0,8fr) 96px;
  gap:12px 24px;
  align-items:baseline;
  padding:18px 18px;
  border-bottom:1px solid var(--linie-hell);
  transition:background .2s ease;
}
.st-zeile:last-child{border-bottom:0;}
.st-zeile:hover{background:#ECECE6;}
.st-nr{color:var(--gedaempft);}
.st-was{
  font-stretch:125%;font-weight:640;
  font-size:clamp(16px, 1.5vw, 19px);
  line-height:1.2;letter-spacing:-0.005em;
}
.st-wo{color:var(--gedaempft);font-size:15px;line-height:1.5;}
.st-dauer{text-align:right;color:var(--gedaempft);white-space:nowrap;}
.st-zeile.aktuell .st-nr,.st-zeile.aktuell .st-was,.st-zeile.aktuell .st-dauer{color:var(--ultramarin);}
@media (max-width:900px){
  .st-zeile{grid-template-columns:40px minmax(0,1fr) 80px;grid-template-rows:auto auto;row-gap:6px;padding:16px 14px;}
  .st-wo{grid-column:2 / span 2;}
}
@media (max-width:560px){
  .st-kopf span:nth-child(3){display:none;}
}

/* ——— Leistungen: drei Felder, jede Zeile führt zum Kapitel ——— */
.verzeichnis a.zeile{text-decoration:none;color:inherit;display:grid;}
.verzeichnis a.zeile:focus-visible{outline:2px solid var(--ultramarin);outline-offset:4px;}

/* ——— Sätze, die wir kennen ——— */
#saetze{border-top:1px solid var(--linie-hell);}
.saetze-lead{
  font-stretch:125%;font-weight:640;
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.25;letter-spacing:-0.01em;
  max-width:34ch;
  margin:calc(-1 * clamp(24px, 3vw, 44px)) 0 clamp(40px, 5vw, 64px);
}
.saetze-lead em{font-style:normal;color:var(--ultramarin);}
.verzeichnis.saetze .zeile{grid-template-columns:88px minmax(0,10fr) minmax(0,11fr);}
.verzeichnis.saetze .zeile h3{font-size:clamp(20px, 2.1vw, 27px);}
.verzeichnis.saetze .zeile p{max-width:52ch;}
@media (max-width:760px){
  .verzeichnis.saetze .zeile{grid-template-columns:64px 1fr;grid-template-rows:auto auto;}
  .verzeichnis.saetze .zeile h3{grid-column:2;}
  .verzeichnis.saetze .zeile p{grid-column:2;}
}

/* ——— Kontakt: Telefon, Ort, zweiter Einstieg ——— */
#kontakt .wege{
  margin-top:clamp(40px, 5vw, 64px);
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:24px 40px;
}
#kontakt .weg .w-k{
  display:block;
  font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:#8A8A82;margin-bottom:8px;
}
#kontakt .weg a,#kontakt .weg .w-w{
  color:var(--papier);text-decoration:none;
  font-stretch:125%;font-weight:640;font-size:clamp(18px, 1.7vw, 22px);line-height:1.25;letter-spacing:-0.01em;
}
#kontakt .weg a:hover{color:#9AA0FF;}
#kontakt .weg .w-w small{display:block;font-stretch:100%;font-weight:400;font-size:14px;color:#B8B8AF;margin-top:4px;}
#kontakt .aktionen{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
#kontakt .btn-sekundaer{color:var(--papier);border-color:#4A4A45;}
#kontakt .btn-sekundaer:hover{border-color:#9AA0FF;color:#9AA0FF;}
#kontakt .zusage{margin-top:22px;color:#8A8A82;}
@media (max-width:760px){ #kontakt .wege{grid-template-columns:1fr;gap:20px;} }
.fusszeile .adresse{color:var(--gedaempft);}

/* ——— Deploy-Runde: Sprunglink, Handy-Menü, Zwischenband, Anfrageformular, Fußzeile, Druck ——— */
.sprung{
  position:absolute;left:-9999px;top:12px;z-index:100;
  background:var(--tinte);color:var(--papier);
  font-family:'IBM Plex Mono', monospace;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;
  padding:12px 16px;
}
.sprung:focus{left:12px;outline:2px solid var(--ultramarin);outline-offset:2px;}

/* Handy-Menü */
.menue-knopf{
  display:none;
  align-items:center;gap:10px;
  background:none;border:1px solid var(--linie-dunkel);color:var(--tinte);
  font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  padding:10px 12px;cursor:pointer;
}
.menue-knopf .balken{display:block;width:16px;height:9px;position:relative;}
.menue-knopf .balken::before,.menue-knopf .balken::after{content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .2s ease;}
.menue-knopf .balken::before{top:0;} .menue-knopf .balken::after{bottom:0;}
body.menue-offen .menue-knopf .balken::before{transform:translateY(3.75px) rotate(45deg);}
body.menue-offen .menue-knopf .balken::after{transform:translateY(-3.75px) rotate(-45deg);}
.menue{
  display:none;
  position:fixed;left:0;right:0;top:68px;z-index:49;
  background:var(--papier);
  border-bottom:1px solid var(--linie-dunkel);
  max-height:calc(100vh - 68px);overflow:auto;
}
body.menue-offen .menue{display:block;}
.menue ol{list-style:none;margin:0;padding:8px var(--rand) 6px;}
.menue li{border-bottom:1px solid var(--linie-hell);}
.menue ol a{
  display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:12px;
  padding:15px 0;
  text-decoration:none;color:var(--tinte);
  font-stretch:125%;font-weight:640;font-size:19px;letter-spacing:-0.01em;
}
.menue ol a .m-nr{font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.14em;color:var(--gedaempft);font-stretch:100%;}
.menue .m-kontakt{display:flex;flex-wrap:wrap;gap:10px 24px;padding:14px var(--rand) 22px;}
.menue .m-kontakt a{text-decoration:none;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ultramarin);}
@media (max-width:860px){
  .menue-knopf{display:inline-flex;}
  body.menue-offen{overflow:hidden;}
}
@media (max-width:540px){
  nav{gap:12px;}
  nav a.cta{display:none;}
}

/* Zwischenband: ein Satz, viel Luft */
#zwischen{padding:clamp(72px, 9vw, 120px) 0;border-top:1px solid var(--linie-hell);}
#zwischen .satz{
  font-stretch:125%;font-weight:640;
  font-size:clamp(26px, 3.4vw, 46px);line-height:1.15;letter-spacing:-0.015em;
  max-width:24ch;
}
#zwischen .satz em{font-style:normal;color:var(--ultramarin);}
#zwischen .nachsatz{margin-top:22px;color:var(--gedaempft);max-width:56ch;}

/* Anfrageformular auf dem dunklen Kontaktblock */
#kontakt .kontakt-raster{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px, 6vw, 96px);align-items:start;
  margin-top:clamp(48px, 6vw, 72px);
}
#kontakt .kontakt-raster .mail{margin-top:0;font-size:clamp(22px, 2.5vw, 34px);border-bottom-width:2px;padding-bottom:8px;}
#kontakt .kontakt-raster .wege{grid-template-columns:1fr 1fr;margin-top:clamp(36px, 4vw, 52px);}
#kontakt .kontakt-raster .aktionen{margin-top:40px;}
.anfrage{
  background:var(--papier);color:var(--tinte);
  border:1px solid var(--linie-dunkel);
  padding:clamp(22px, 3vw, 34px);
}
.anfrage .a-kopf{display:flex;justify-content:space-between;gap:12px;color:var(--gedaempft);padding-bottom:12px;border-bottom:1px solid var(--linie-hell);margin-bottom:18px;}
.anfrage .feld{display:block;margin-bottom:14px;}
.anfrage .feld span{display:block;font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gedaempft);margin-bottom:6px;}
.anfrage input,.anfrage textarea{
  width:100%;font:inherit;font-size:16px;color:var(--tinte);
  background:#FAFAF7;border:1px solid var(--linie-hell);border-radius:0;
  padding:11px 12px;
}
.anfrage input:focus-visible,.anfrage textarea:focus-visible{outline:2px solid var(--ultramarin);outline-offset:1px;border-color:var(--ultramarin);}
.anfrage textarea{min-height:120px;resize:vertical;}
.anfrage .zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.anfrage .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.anfrage .a-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px;}
.anfrage button.cta{font:inherit;font-family:'IBM Plex Mono', monospace;font-size:11.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;}
.anfrage button.cta[disabled]{opacity:.6;cursor:wait;}
.anfrage .a-hinweis{color:var(--gedaempft);font-size:13px;}
.anfrage .a-status{margin-top:14px;font-size:14.5px;min-height:1.4em;}
.anfrage .a-status.gut{color:var(--ultramarin);font-weight:640;}
.anfrage .a-status.schlecht{color:#B3261E;}
.anfrage.gesendet .a-felder{display:none;}
@media (max-width:900px){
  #kontakt .kontakt-raster{grid-template-columns:1fr;gap:56px;}
  #kontakt .kontakt-raster .mail{font-size:clamp(22px, 4.4vw, 34px);}
}
@media (max-width:760px){ #kontakt .kontakt-raster .wege{grid-template-columns:1fr;} }
@media (max-width:520px){ .anfrage .zwei{grid-template-columns:1fr;} }

/* Fußzeile: Mini-Sitemap und Vertrauenszeile */
.fuss-karte{
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:24px 32px;
  margin-top:64px;padding:28px 0 8px;border-top:1px solid var(--linie-dunkel);
}
footer .fuss-karte + .fusszeile{margin-top:36px;}
.fuss-karte .fk-k{display:block;font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:#8A8A82;margin-bottom:10px;}
.fuss-karte a,.fuss-karte span.z{display:block;color:#D8D8D0;text-decoration:none;font-size:15px;line-height:1.5;}
.fuss-karte a:hover{color:#9AA0FF;}
.fuss-karte .fk-hinweis{color:#8A8A82;font-size:14px;line-height:1.5;}
@media (max-width:760px){ .fuss-karte{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .fuss-karte{grid-template-columns:1fr;} }

/* Druck: Bühnen aus, Text bleibt */
@media print{
  header,.menue,.sprung,.w3-buehne,.blatt-leiste,.maschinen-status,.zelle,.zelle-fuss,.tafel-buehne,.tf-steuer,.zeitkonto .zk-regler,.anfrage,.aktionen,.mehr-knopf,.kp-lauf,.fuss-karte{display:none !important;}
  .hero{min-height:0;padding-top:20px;}
  .hero-grid{grid-template-columns:1fr;}
  .mehr{grid-template-rows:1fr !important;}
  .mehr-innen{overflow:visible !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  section{padding:32px 0;break-inside:avoid;}
  #kontakt{background:none;color:var(--tinte);}
  #kontakt .lead,#kontakt .weg a,#kontakt .weg .w-w{color:var(--tinte);}
  a{text-decoration:none;color:inherit;}
  body{font-size:12pt;}
}

/* ——— Leistungen als Reiter: ein Blatt zur Zeit ——— */
#leistungen{border-top:1px solid var(--linie-hell);}
.reiter-kopf{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--gedaempft);margin-bottom:22px;}
.reiter{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0 24px;
  border-bottom:1px solid var(--linie-dunkel);
  scroll-margin-top:84px;
}
.reiter button{
  appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;
  padding:0 0 18px;text-align:left;cursor:pointer;color:var(--tinte);
  display:grid;gap:8px;align-content:start;
  transition:border-color .18s ease;
}
.reiter button .r-nr{font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--gedaempft);}
.reiter button .r-titel{font-stretch:125%;font-weight:640;font-size:clamp(17px, 2vw, 24px);line-height:1.1;letter-spacing:-0.01em;transition:color .15s ease;}
.reiter button:hover .r-titel{color:var(--ultramarin);}
.reiter button[aria-selected="true"]{border-bottom-color:var(--ultramarin);}
.reiter button[aria-selected="true"] .r-titel,.reiter button[aria-selected="true"] .r-nr{color:var(--ultramarin);}
.reiter button:focus-visible{outline:2px solid var(--ultramarin);outline-offset:4px;}
.reiter .kurz{display:none;}
.reiter-tafel{padding-top:clamp(40px, 5vw, 64px);border-top:0 !important;}
.reiter-tafel[hidden]{display:none !important;}
@media (prefers-reduced-motion: no-preference){
  .reiter-tafel{animation:tafel-auf .4s ease both;}
  @keyframes tafel-auf{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
}
@media (max-width:640px){
  .reiter{gap:0 12px;}
  .reiter .lang{display:none;} .reiter .kurz{display:inline;}
  .reiter button{padding-bottom:14px;gap:6px;}
}
/* Arbeitsweise: nur die vier Schritte */
#arbeitsweise .raster{margin-top:0;}
@media print{ .reiter{display:none;} .reiter-tafel[hidden]{display:block !important;} }
/* ——— Auflagen: Post aus Berlin und Brüssel ——— */
#buerokratie{border-top:1px solid var(--linie-hell);}
#buerokratie .auflagen{margin-top:clamp(56px, 7vw, 96px);}
#buerokratie .st-zeile{grid-template-columns:48px minmax(0,4fr) minmax(0,8fr) 172px;}
#buerokratie .st-dauer{white-space:normal;}
#buerokratie .kennzahlen{grid-template-columns:1fr;margin-top:0;gap:0;}
#buerokratie .kennzahlen li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 28px;align-items:baseline;padding:18px 0 20px;}
#buerokratie .kennzahlen .label{margin-top:0;}
#buerokratie .zahlen-spalte .zelle-fuss{margin-top:0;padding-top:16px;border-top:1px solid var(--linie-dunkel);}
#buerokratie .mehr-innen .auflagen{margin-top:clamp(40px, 5vw, 64px);}
@media (max-width:700px){
  #buerokratie .kennzahlen li{grid-template-columns:1fr;gap:0;padding:16px 0 20px;}
  #buerokratie .kennzahlen .label{margin-top:10px;}
}
@media (max-width:560px){ .mehr-knopf .m-zusatz{display:none;} }
@media (max-width:900px){
  #buerokratie .st-zeile{grid-template-columns:40px minmax(0,1fr);grid-template-rows:none;}
  #buerokratie .st-wo{grid-column:2;}
  #buerokratie .st-dauer{grid-column:2;text-align:left;}
}
/* Handy: Reiter und Kapitel dürfen nicht ineinanderlaufen */
@media (max-width:640px){
  .reiter{grid-template-columns:auto auto auto;justify-content:space-between;gap:0 14px;}
  .reiter button .r-titel{font-size:clamp(13px, 4vw, 17px);white-space:nowrap;}
}
@media (max-width:560px){
  .zelle-kapitel button{grid-template-columns:minmax(0,1fr);row-gap:4px;}
  .zelle-kapitel .kp-nr{grid-row:auto;padding-top:0;}
}
@media (max-width:380px){
  .zelle-kapitel .kp-kurz{font-size:12px;}
  .zelle-kapitel button{padding:12px 8px 14px;}
}
/* Titelvideo beim Antippen: Bildmitte statt Oberkante — Hochkant-Videos zeigen sonst nur Himmel.
   Feineinstellung je Karte über data-video-lage, z. B. "50% 65%". */
.projekt .rahmen video{object-position:center center;}

/* ——— Werkstatt-Melder: kleines Werkzeug zum Ausprobieren ——— */
.melder{
  margin-top:clamp(56px, 7vw, 96px);
  border-top:1px solid var(--linie-dunkel);
  padding-top:clamp(36px, 4.5vw, 56px);
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(32px, 6vw, 96px);
  align-items:center;
}
.melder-geraet{width:100%;max-width:340px;justify-self:center;display:flex;flex-direction:column;gap:16px;}
.melder-wahl{display:grid;grid-template-columns:1fr 1fr;}
.melder-wahl button{appearance:none;cursor:pointer;font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;padding:12px 8px;border:1px solid var(--linie-dunkel);background:none;color:var(--tinte);border-radius:0;text-align:center;}
.melder-wahl button + button{border-left:0;}
.melder-wahl button.aktiv{background:var(--tinte);color:var(--papier);}
.melder-wahl button:focus-visible{outline:2px solid var(--ultramarin);outline-offset:2px;}
.melder-handy{width:100%;padding:7px;background:var(--tinte);border-radius:30px;}
.melder-schirm{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:24px;background:#ECEEE9;}
.melder-schirm iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform-origin:top left;transform:scale(var(--melder-scale, .836));}
.melder-text .m-label{display:block;color:var(--gedaempft);margin-bottom:16px;}
.melder-text h3{font-size:clamp(24px, 2.8vw, 36px);line-height:1.16;max-width:22ch;margin-bottom:22px;}
.melder-text p{color:var(--gedaempft);max-width:54ch;margin-bottom:16px;}
.melder-text p.preis{color:var(--tinte);font-weight:640;}
.melder-text p.zelle-fuss{margin-top:20px;margin-bottom:0;}
@media (max-width:820px){
  .melder{grid-template-columns:1fr;}
  .melder-text{order:-1;}
}
@media print{ .melder-geraet{display:none;} }

/* ——— Einblenden beim Scrollen ——— */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.sichtbar{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:64px;}
  .hero{padding-top:140px;padding-bottom:96px;}
  .schema{margin-left:0;max-width:480px;}
}

/* Fußbereich: Wortmarke ruhig, wie in der Kopfleiste — kein Riesenschriftzug */
footer{padding:64px 0 40px;}
footer .wortmarke{display:flex;align-items:baseline;gap:16px;font-size:clamp(22px, 2.2vw, 28px);line-height:1;letter-spacing:0.02em;white-space:nowrap;}
footer .wortmarke .digital{display:inline;margin-top:0;vertical-align:baseline;font-size:11px;letter-spacing:0.16em;border-left:1px solid #4A4A45;padding-left:16px;}
footer .fuss-karte{margin-top:36px;}


/* ============================================================================
   Überarbeitung November 2026 — Ergänzungen und Korrekturen
   (hängt hinter dem bestehenden Stylesheet, überschreibt gezielt)
   ============================================================================ */

/* ——— Lesbarkeit: Mono-Beschriftungen nicht unter 12 px, graue Texte mit ≥ 4,5:1 Kontrast ——— */
.mono, .reiter-kopf, .st-kopf, .st-nr, .st-dauer, .r-nr, .f-nr, .m-nr, .zelle-fuss, .cta, .btn-sekundaer, .blatt-leiste button, .w3-kopf .mono, .w3-werte, .w3-hinweis, .w3-tipp, .melder-text .m-label, .kontakt-raster .w-k, .zusage, .fusszeile .mono, .fk-k, .a-kopf, .a-hinweis, .tk-kpi, .tk-zeit, .tf-schritt .mono, .tf-sp-label, .tf-scanner, .zelle-kopf{ font-size:12px; }
.reiter button .r-nr, .raster .r-nr{ font-size:12px; }
#kontakt .weg .w-k, #kontakt .weg small, #kontakt .zusage, .kontakt-raster small{ color:#B4B4AB; }   /* auf dunklem Grund: 7,6:1 */
footer .fk-hinweis, footer .fusszeile .mono, footer .z, footer .fk-k{ color:#B4B4AB; }
.hero .lead, .prosa p, .grundsatz, .melder-text p, .raster li p, .kennzahlen .label, .st-wo, .zelle-fuss, .reiter-kopf, .st-kopf, .w3-kopf .mono, .faq .antwort p, .projekt .beschreibung, .abbildung figcaption{ color:#55554E; }   /* 6,4:1 auf Papier */
.hero .lead{ color:#3E3E38; }

/* Blatt-Schalter unter dem Plotter: Fingergröße */
.blatt-leiste button{ padding:12px 14px; min-height:44px; min-width:44px; }
.blatt-leiste .bl-pause{ margin-left:10px; }

/* ——— Hero: Zwischenzeile über der Überschrift ——— */
.hero-kicker{ display:block; color:#55554E; margin-bottom:22px; text-transform:none; letter-spacing:0.08em; }
.hero-kicker::before{ content:''; display:inline-block; width:8px; height:8px; background:var(--ultramarin); margin-right:12px; vertical-align:1px; }

/* ——— Abschnittsköpfe ohne Reiter ——— */
.reiter-kopf{ border-bottom:1px solid var(--linie-dunkel); padding-bottom:14px; margin-bottom:clamp(28px, 3.5vw, 40px); }
.reiter-kopf span:first-child{ color:var(--tinte); }
.leistung{ padding-top:0; }

/* ——— Auflagen-Tabelle: Pflicht · was gilt · unser Werkzeug · ab wann ——— */
.auflagen .st-zeile{ grid-template-columns:48px minmax(0,4fr) minmax(0,9fr) 128px; align-items:start; }
.auflagen .st-was{ font-stretch:125%; font-weight:640; font-size:19px; line-height:1.2; }
.auflagen .st-wo{ line-height:1.55; }
.auflagen .st-wo b{ display:block; margin-top:10px; color:var(--tinte); font-weight:640; }
.auflagen .st-wo b::before{ content:'→ '; color:var(--ultramarin); }
.auflagen .st-dauer{ text-align:right; color:var(--tinte); line-height:1.5; }
.auflagen .st-dauer small{ display:block; font-size:11px; color:#55554E; letter-spacing:0.08em; margin-top:4px; }
.auflagen .st-zeile.neu .st-was::after{ content:'neu'; margin-left:10px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ultramarin); vertical-align:middle; }
@media (max-width:900px){
  .auflagen .st-zeile{ grid-template-columns:40px minmax(0,1fr); gap:8px 16px; }
  .auflagen .st-wo{ grid-column:2; }
  .auflagen .st-dauer{ grid-column:2; text-align:left; }
}
@media (max-width:560px){
  .auflagen .st-zeile{ display:block; padding:18px 14px; }
  .auflagen .st-nr{ display:none; }
  .auflagen .st-was, .auflagen .st-wo, .auflagen .st-dauer{ display:block; }
  .auflagen .st-was{ margin-bottom:8px; }
  .auflagen .st-dauer{ margin-top:10px; text-align:left; }
}

/* ——— Werkzeug-Block (XRechnung-Leser), gleicher Rhythmus wie der Werkstatt-Melder ——— */
.werkzeug{
  margin-top:clamp(56px, 7vw, 96px);
  border-top:1px solid var(--linie-dunkel);
  padding-top:clamp(36px, 4.5vw, 56px);
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.werkzeug .m-label{ display:block; color:#55554E; margin-bottom:16px; }
.werkzeug h3{ font-size:clamp(24px, 2.8vw, 36px); line-height:1.16; max-width:22ch; margin-bottom:22px; }
.werkzeug .wz-text p{ color:#55554E; max-width:54ch; margin-bottom:16px; }
.werkzeug .wz-text p.preis{ color:var(--tinte); font-weight:640; }
.werkzeug .wz-text p:last-child{ margin-bottom:0; }
@media (max-width:900px){ .werkzeug{ grid-template-columns:1fr; } }

.xr-ablage{
  position:relative;
  border:1px dashed var(--linie-dunkel);
  background:var(--papier);
  padding:clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.xr-ablage.aktiv{ border-color:var(--ultramarin); background:#EDEEF9; }
.xr-ablage input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.xr-ab-titel{ display:block; font-stretch:125%; font-weight:640; font-size:clamp(18px, 2vw, 22px); line-height:1.2; }
.xr-ab-hinweis{ display:block; color:#55554E; margin-top:10px; }
.xr-ab-knoepfe{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px; }
.xr-ab-knoepfe label.btn-sekundaer, .xr-ab-knoepfe button.btn-sekundaer{ cursor:pointer; background:none; }
.xr-ab-knoepfe label.cta{ cursor:pointer; }
.xr-ablage:focus-within{ outline:2px solid var(--ultramarin); outline-offset:3px; }
.xr-status{ margin-top:12px; color:#55554E; min-height:1.4em; text-transform:none; letter-spacing:0.04em; }
.xr-status.schlecht{ color:#B3261E; }

.xr-blatt{
  border:1px solid var(--linie-dunkel);
  background:#FAFAF7;
  padding:clamp(20px, 3vw, 32px);
  font-size:15px;
  line-height:1.45;
}
.xr-blatt:focus{ outline:2px solid var(--ultramarin); outline-offset:3px; }
.xr-kopf{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 32px; align-items:start; border-bottom:1px solid var(--linie-dunkel); padding-bottom:18px; }
.xr-typ{ grid-column:1 / -1; color:#55554E; }
.xr-nr{ font-stretch:125%; font-weight:640; font-size:clamp(22px, 2.4vw, 28px); line-height:1.1; margin:0; }
.xr-daten, .xr-klein, .xr-zahlung{ margin:0; }
.xr-zeile{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px; }
.xr-zeile dt{ color:#55554E; }
.xr-zeile dd{ margin:0; overflow-wrap:anywhere; }
.xr-daten{ text-align:right; }
.xr-daten .xr-zeile{ justify-content:end; grid-template-columns:auto auto; }
.xr-daten .xr-zeile dd, .xr-zahlung .xr-zeile dd{ text-transform:none; letter-spacing:0.02em; }
.xr-parteien{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--linie-hell); }
.xr-partei p{ margin:0; }
.xr-partei .w-k{ display:block; color:#55554E; margin-bottom:8px; }
.xr-name{ font-weight:640; font-stretch:125%; font-size:17px; }
.xr-klein{ margin-top:10px; font-size:11.5px; }
.xr-klein .xr-zeile dd{ text-transform:none; letter-spacing:0.02em; }
.xr-leer{ color:#55554E; font-style:italic; }
.xr-tabelle{ width:100%; border-collapse:collapse; margin-top:18px; }
.xr-tabelle th{ text-align:left; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#55554E; padding:0 8px 10px 0; border-bottom:1px solid var(--linie-dunkel); }
.xr-tabelle td{ padding:10px 8px 10px 0; border-bottom:1px solid var(--linie-hell); vertical-align:top; }
.xr-tabelle th.r, .xr-tabelle td.r{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.xr-tabelle td.mono{ text-transform:none; letter-spacing:0.04em; }
.xr-pname{ display:block; font-weight:640; }
.xr-pklein{ display:block; color:#55554E; font-size:12.5px; margin-top:3px; }
.xr-pklein.mono{ font-size:11px; text-transform:none; letter-spacing:0.06em; }
.xr-summen{ margin:18px 0 0 auto; max-width:420px; }
.xr-summen .xr-zeile{ grid-template-columns:minmax(0,1fr) auto; padding:5px 0; font-variant-numeric:tabular-nums; }
.xr-summen .xr-zeile dd{ text-align:right; }
.xr-summen .xr-zeile.stark{ border-top:1px solid var(--linie-dunkel); margin-top:6px; padding-top:10px; font-weight:640; font-size:17px; }
.xr-summen .xr-zeile.stark dt{ color:var(--tinte); }
.xr-zahlung-box, .xr-notizen{ margin-top:22px; padding-top:18px; border-top:1px solid var(--linie-hell); }
.xr-zahlung-box .w-k, .xr-notizen .w-k{ display:block; color:#55554E; margin-bottom:8px; }
.xr-zahlung .xr-zeile{ padding:2px 0; }
.xr-notizen p{ margin:0 0 8px; color:#55554E; }
.xr-pruefung{ margin-top:22px; padding:10px 12px; border:1px solid var(--linie-dunkel); text-transform:none; letter-spacing:0.04em; }
.xr-pruefung.gut{ color:#1F5C33; border-color:#1F5C33; }
.xr-pruefung.schlecht{ color:#B3261E; border-color:#B3261E; }
.xr-profil{ margin-top:12px; color:#55554E; text-transform:none; letter-spacing:0.04em; font-size:11px; overflow-wrap:anywhere; }
.xr-aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.xr-aktionen button{ background:none; cursor:pointer; }
@media (max-width:640px){
  .xr-kopf{ grid-template-columns:1fr; }
  .xr-daten{ text-align:left; }
  .xr-daten .xr-zeile{ justify-content:start; }
  .xr-parteien{ grid-template-columns:1fr; }
  .xr-tabelle th:nth-child(4), .xr-tabelle td:nth-child(4){ display:none; }
}
@media print{
  body.xr-druck > *{ display:none !important; }
  body.xr-druck main, body.xr-druck main > *{ display:block !important; }
  body.xr-druck main > section:not(#buerokratie), body.xr-druck #buerokratie .wrap > *:not(.werkzeug){ display:none !important; }
  body.xr-druck .werkzeug{ display:block !important; border:0; margin:0; padding:0; }
  body.xr-druck .werkzeug .wz-text, body.xr-druck .xr-aktionen, body.xr-druck .xr-status{ display:none !important; }
  body.xr-druck .xr-blatt{ border:0; padding:0; background:#fff; }
  body.xr-druck .kreuz::before, body.xr-druck .kreuz::after{ content:none; }
}

/* ——— Pilotbetrieb-Block ——— */
.pilot{
  margin-top:clamp(48px, 6vw, 80px);
  border:1px solid var(--linie-dunkel);
  background:var(--papier);
}
.pilot-innen{ padding:clamp(24px, 3.5vw, 44px) clamp(18px, 3vw, 40px); }
.pilot-innen .statement{ max-width:24ch; margin-bottom:22px; }
.pilot-innen .prosa{ max-width:66ch; }
.pilot-innen .zelle-aktion{ margin-top:28px; }
.pilot .st-kopf span:nth-child(2){ color:var(--ultramarin); }

/* ——— Projektbilder: Platz steht fest, bevor das Bild da ist ——— */
.projekt .rahmen img{ aspect-ratio:1280 / 800; }

/* Kleinschrift auf mindestens 12 px */
header .nav-link, .menue-knopf .text, .projekt .status, .melder-wahl button, .auflagen .st-dauer small, .sprung, .projekt .antippen, .xr-klein, .xr-pklein.mono, .xr-profil, .xr-tabelle th{ font-size:12px; }

/* ——— Rechtstexte (Impressum, Datenschutz) ——— */
.rechtstext{padding-top:clamp(120px, 14vw, 170px);}
.rechtstext .wrap{max-width:760px;margin-left:var(--rand);}
.rechtstext h1{font-size:clamp(30px, 4.4vw, 58px);margin-bottom:clamp(28px, 4vw, 48px);hyphens:auto;overflow-wrap:anywhere;}
.rechtstext h2{font-size:clamp(20px, 2vw, 26px);max-width:none;margin:clamp(36px, 4vw, 52px) 0 14px;}
.rechtstext p,.rechtstext li{color:var(--gedaempft);font-size:16.5px;margin-bottom:14px;}
.rechtstext strong{color:var(--tinte);font-weight:640;}
.rechtstext address{font-style:normal;color:var(--tinte);line-height:1.7;margin-bottom:14px;}
.rechtstext ul{padding-left:20px;}
.rechtstext .stand{margin-top:clamp(36px, 4vw, 52px);color:var(--gedaempft);}
.rechtstext a{color:var(--ultramarin);}
.rechtstext a.cta{color:var(--papier);}
.rechtstext a.cta:hover{color:var(--papier);}
.tf-scanner .tf-sc-r{ color:#B4B4AB; }

/* ——— Blatt 01: Schaufenster — Auftragsbuch und Bildschirm ——— */
.schaufenster{
  margin-top:clamp(40px, 5vw, 64px);
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(24px, 3.5vw, 48px);
  align-items:start;
}
.auftragsbuch{ border:1px solid var(--linie-dunkel); background:var(--papier); }
.auftrag{
  display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:6px 16px; align-items:start;
  width:100%; text-align:left; padding:18px 16px 20px;
  border:0; border-bottom:1px solid var(--linie-hell); background:none; color:inherit; font:inherit; cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease;
}
.eintrag:last-child .auftrag{ border-bottom:0; }
.a-link{ display:none; }
.auftrag:hover{ background:#ECECE6; }
.auftrag[aria-selected="true"]{ background:#ECECE6; box-shadow:inset 3px 0 0 var(--ultramarin); }
.auftrag:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:-2px; }
.auftrag .a-nr{ color:#55554E; padding-top:3px; }
.auftrag .a-kern{ display:block; min-width:0; }
.auftrag .a-bild{ display:none; width:100%; height:auto; border:1px solid var(--linie-dunkel); margin-bottom:14px; }
.auftrag .a-betrieb{ display:block; font-stretch:125%; font-weight:640; font-size:19px; line-height:1.15; letter-spacing:-0.01em; transition:color .15s ease; }
.auftrag:hover .a-betrieb, .auftrag[aria-selected="true"] .a-betrieb{ color:var(--ultramarin); }
.auftrag .a-branche{ display:block; color:#55554E; margin-top:5px; letter-spacing:0.1em; }
.auftrag .a-tut{ display:block; margin-top:10px; color:#3E3E38; font-size:14.5px; line-height:1.5; max-width:52ch; }
.auftrag .a-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.auftrag .a-tags i{ font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--linie-hell); padding:4px 7px; color:var(--tinte); background:var(--papier); }
.auftrag[aria-selected="true"] .a-tags i{ border-color:var(--ultramarin); color:var(--ultramarin); }
.auftrag .a-status{ white-space:nowrap; color:#55554E; padding-top:3px; }
.auftrag .a-status.live::before{ content:''; display:inline-block; width:7px; height:7px; background:var(--ultramarin); margin-right:8px; }

.bildschirm{ position:sticky; top:92px; }
.bs-kopf{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--linie-dunkel); color:#55554E; }
.bs-titel{ color:var(--tinte); }
.bs-schalter{ display:inline-flex; }
.bs-schalter button{ font:inherit; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:9px 12px; border:1px solid var(--linie-hell); margin-left:-1px; background:var(--papier); color:var(--tinte); cursor:pointer; }
.bs-schalter button.aktiv{ background:var(--tinte); color:var(--papier); border-color:var(--tinte); }
.bs-schalter button:disabled{ color:#B4B4AB; cursor:default; }
.bs-schalter button:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:2px; position:relative; }
.bs-geraet{ margin-top:16px; }
.bs-rahmen{ position:relative; box-sizing:content-box; border:1px solid var(--linie-dunkel); aspect-ratio:16/10; overflow:hidden; background:#ECECE6; box-shadow:0 18px 40px -24px rgba(20,20,18,.35); }   /* content-box: Seitenverhältnis gilt für die Fläche, Rahmen liegt außen — unten bleibt kein Streifen */
.bs-rahmen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:opacity .4s ease; }
.bs-rahmen iframe{ position:absolute; top:0; left:0; width:1440px; height:900px; border:0; background:#fff; transform-origin:top left; transform:scale(var(--frame-scale,1)); pointer-events:none; opacity:0; transition:opacity .45s ease; }
.bs-rahmen iframe.geladen{ opacity:1; }
.bs-rahmen.bedienbar iframe{ pointer-events:auto; }
.bs-rahmen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bs-antippen{ display:none; position:absolute; right:10px; bottom:10px; z-index:2; padding:7px 10px; background:rgba(20,20,18,.78); color:#fff; pointer-events:none; }
.bs-rahmen.film .bs-antippen{ display:none !important; }
.bs-geraet.handy .bs-rahmen{ aspect-ratio:390/844; width:min(calc(100% - 10px), 290px); margin:0 auto; border-radius:22px; border:5px solid var(--tinte); box-shadow:0 0 0 1px var(--linie-dunkel), 0 18px 40px -24px rgba(20,20,18,.45); }
.bs-geraet.handy .bs-rahmen iframe{ width:390px; height:844px; transform:scale(var(--handy-scale,1)); }
.bs-geraet.handy .bs-rahmen img{ object-position:top center; }
.bs-fuss{ display:flex; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-top:12px; color:#55554E; text-transform:none; letter-spacing:0.04em; }
.bs-aktionen{ display:inline-flex; gap:16px; flex-wrap:wrap; }
.bs-link, .bs-fuss a{ background:none; border:0; padding:0; font:inherit; color:var(--ultramarin); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.bs-link:hover, .bs-fuss a:hover{ color:var(--tinte); }
@media (max-width:900px){
  .schaufenster{ grid-template-columns:1fr; }
  .bildschirm{ display:none; }                     /* auf dem Handy trägt jede Zeile ihr Bild selbst */
  .auftrag .a-bild{ display:block; }
  .auftrag{ grid-template-columns:32px minmax(0,1fr); cursor:default; }
  .auftrag .a-status{ grid-column:2; padding-top:0; }
  .auftrag:hover, .auftrag[aria-selected="true"]{ background:none; box-shadow:none; }
  .auftrag[aria-selected="true"] .a-betrieb{ color:var(--tinte); }
  .auftrag[aria-selected="true"] .a-tags i{ border-color:var(--linie-hell); color:var(--tinte); }
  .eintrag{ border-bottom:1px solid var(--linie-hell); }
  .eintrag:last-child{ border-bottom:0; }
  .eintrag .auftrag{ border-bottom:0; padding-bottom:8px; }
  .a-link{ display:inline-block; margin:0 16px 18px 48px; color:var(--ultramarin); text-decoration:underline; text-underline-offset:3px; text-transform:none; letter-spacing:0.04em; }
}
@media (pointer: coarse){ .bs-antippen{ display:block; } }

/* ——— Leistungsumfang ——— */
.umfang{ margin-top:clamp(48px, 6vw, 80px); border:1px solid var(--linie-dunkel); background:var(--papier); }
.umfang-spalten{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,4fr); }
.umfang-spalten > div{ padding:clamp(20px, 2.5vw, 32px); border-right:1px solid var(--linie-hell); }
.umfang-spalten > div:last-child{ border-right:0; }
.u-titel{ font-size:19px; margin-bottom:14px; }
.u-liste{ list-style:none; margin:0; padding:0; }
.u-liste li{ position:relative; padding:11px 0 11px 24px; border-bottom:1px solid var(--linie-hell); color:#3E3E38; font-size:15.5px; line-height:1.5; }
.u-liste li:last-child{ border-bottom:0; }
.u-liste li::before{ content:'→'; position:absolute; left:0; top:11px; color:var(--ultramarin); font-family:'IBM Plex Mono', monospace; }
.u-preis{ background:var(--tinte); color:var(--papier); display:flex; flex-direction:column; gap:6px; }
.u-preis .mono{ color:#B4B4AB; margin-top:10px; }
.u-preis .mono:first-child{ margin-top:0; }
.u-preis b{ font-stretch:125%; font-weight:640; font-size:clamp(28px, 3vw, 40px); line-height:1; letter-spacing:-0.01em; }
.u-preis p{ color:#D8D8D0; font-size:14.5px; line-height:1.5; margin:0; }
.u-preis .cta{ margin-top:auto; align-self:flex-start; margin-top:22px; }
@media (max-width:1000px){ .umfang-spalten{ grid-template-columns:1fr 1fr; } .umfang-spalten > div:last-child{ grid-column:1 / -1; border-top:1px solid var(--linie-hell); } .umfang-spalten > div:nth-child(2){ border-right:0; } }
@media (max-width:640px){ .umfang-spalten{ grid-template-columns:1fr; } .umfang-spalten > div{ border-right:0; border-bottom:1px solid var(--linie-hell); } }

/* ——— Hero-Überschrift: der Akzent „gute Internetseite.“ steht immer in einer Zeile ——— */
.hero h1{ max-width:none; }
.hero h1 .akzent-zeit{ white-space:nowrap; }
@supports (font-size: 1cqw){
  .hero-grid > div:first-child{ container-type:inline-size; }
  .hero h1{ font-size:min(clamp(40px, 4.7vw, 68px), 9.3cqw); }   /* 9,3 % der Spaltenbreite: so passt „gute Internetseite.“ genau hinein */
}


/* ——— Direkt erreichen: WhatsApp und Telefon, im Stil der Seite ——— */
.direkt{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.direkt-knopf{
  display:inline-flex; align-items:center; gap:12px;
  padding:10px 16px 10px 12px; border:1px solid var(--linie-hell); background:var(--papier);
  color:var(--tinte); text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; line-height:1.15;
  transition:border-color .18s ease, color .18s ease;
}
.direkt-knopf svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.direkt-knopf small{ display:block; font-size:10px; letter-spacing:0.14em; color:#55554E; margin-top:3px; }
.direkt-knopf:hover{ border-color:var(--ultramarin); color:var(--ultramarin); }
.direkt-knopf:hover small{ color:var(--ultramarin); }
.direkt-knopf:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:2px; }
.hero.maschinell .direkt{ opacity:0; transform:translateY(14px); }
.hero.maschinell .aktionen.da + .direkt{ opacity:1; transform:none; transition:opacity .7s ease .25s, transform .7s cubic-bezier(.4,0,.2,1) .25s; }

.direkt-leiste{ display:none; }
@media (max-width:700px){
  .direkt-leiste{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--linie-dunkel); border-top:1px solid var(--linie-dunkel);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .direkt-leiste a{
    display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:54px; background:var(--tinte); color:var(--papier); text-decoration:none;
    font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  }
  .direkt-leiste a:last-child{ background:var(--ultramarin); }
  .direkt-leiste svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom)); }   /* Platz für die Leiste */
  .direkt{ display:none; }                                             /* im Hero reicht die Leiste */
}
@media print{ .direkt-leiste{ display:none !important; } }

/* ——— Unterseiten ——— */
.hero-klein{ padding:clamp(120px, 14vw, 170px) 0 clamp(40px, 5vw, 64px); }
.hero-klein h1{ font-size:clamp(34px, 4.2vw, 60px); max-width:22ch; line-height:1.05; letter-spacing:-0.02em; }
.hero-klein h1 .akzent{ color:var(--ultramarin); }
.hero-klein .lead{ margin-top:28px; max-width:62ch; color:#3E3E38; font-size:18px; }
.hero-klein .aktionen{ margin-top:36px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.unterseite main > section{ padding-top:clamp(56px, 7vw, 96px); padding-bottom:clamp(56px, 7vw, 96px); }
.unterseite main > section.hero-klein{ padding-bottom:clamp(24px, 3vw, 40px); }
.unterseite .faq details:last-child{ border-bottom:1px solid var(--linie-dunkel); }
.u-link{ display:block; margin-top:14px; color:#D8D8D0; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.u-link:hover{ color:var(--papier); }
.wz-h2{ font-size:clamp(28px, 3vw, 40px); line-height:1.1; max-width:18ch; margin-bottom:22px; }

/* Formulare der Werkzeuge: wie das Anfrageformular, nur im Papierton */
.wp-formular, .ac-formular{ max-width:860px; background:var(--papier); color:var(--tinte); border:1px solid var(--linie-dunkel); padding:0; }
.wp-formular .a-kopf, .ac-formular .a-kopf{ padding:14px 22px; border-bottom:1px solid var(--linie-hell); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#55554E; }
.wp-formular .a-felder, .ac-formular .a-felder{ padding:22px; display:grid; gap:18px; }
.wp-formular .feld span, .ac-formular legend{ display:block; font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#55554E; margin-bottom:8px; }
.wp-formular input[type=text], .wp-formular textarea, .wp-formular select{ width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--linie-dunkel); background:#FBFBF8; color:var(--tinte); }
.wp-formular textarea{ min-height:120px; resize:vertical; }
.wp-formular input:focus-visible, .wp-formular textarea:focus-visible, .wp-formular select:focus-visible, .ac-formular input:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:2px; }
.wp-extras{ border:1px solid var(--linie-hell); padding:14px 16px 8px; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.wp-extras legend{ padding:0 6px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#55554E; }
.wp-extras label, .ac-fragen label{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:15.5px; cursor:pointer; }
.wp-extras input, .ac-fragen input{ width:18px; height:18px; accent-color:var(--ultramarin); flex:none; }
.ac-fragen fieldset{ border:0; border-bottom:1px solid var(--linie-hell); padding:0 0 14px; margin:0; }
.ac-fragen fieldset:last-of-type{ border-bottom:0; }
.ac-fragen legend{ font-family:inherit; font-size:17px; font-weight:640; font-stretch:125%; letter-spacing:-0.01em; text-transform:none; color:var(--tinte); margin-bottom:6px; }
.ac-fragen fieldset label{ display:inline-flex; margin-right:22px; }
.wp-formular .a-fuss, .ac-formular .a-fuss{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; }
.wp-formular .a-fuss .btn-sekundaer{ background:none; cursor:pointer; }
.wp-formular .a-hinweis, .ac-formular .a-hinweis{ flex-basis:100%; color:#55554E; font-size:13.5px; line-height:1.5; }
.wp-formular .a-status, .ac-formular .a-status{ margin:0; padding:12px 22px; text-transform:none; letter-spacing:0.04em; color:#55554E; min-height:1.2em; }
.wp-formular .a-status.gut{ color:var(--ultramarin); }
.wp-formular .a-status.schlecht, .ac-formular .a-status.schlecht{ color:#B3261E; }
@media (max-width:640px){ .wp-extras{ grid-template-columns:1fr; } .wp-formular .zwei, .ac-formular .zwei{ grid-template-columns:1fr; } }

/* Das Werkplan-Blatt: Papier mit Schriftfeld, Teile bauen sich nacheinander auf */
.wp-blatt:focus{ outline:none; }
.wp-papier{ position:relative; border:1px solid var(--linie-dunkel); background:#FBFBF8; box-shadow:0 24px 50px -30px rgba(20,20,18,.4); }
.wp-innen{ padding:clamp(22px, 3vw, 40px); display:grid; gap:clamp(24px, 3vw, 36px); }
.wp-teil{ opacity:0; transform:translateY(10px); }
.wp-teil.da{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1); }
.wp-zeile{ max-width:30ch; }
.wp-abschnitt .w-k{ display:block; color:#55554E; margin-bottom:10px; }
.wp-h{ font-stretch:125%; font-weight:640; font-size:clamp(22px, 2.4vw, 30px); line-height:1.15; letter-spacing:-0.01em; }
.wp-u{ color:#3E3E38; margin-top:8px; font-size:16.5px; }
.wp-blaetter{ margin-top:0; }
.wp-blaetter .st-zeile{ grid-template-columns:40px minmax(0,4fr) minmax(0,9fr); }
.wp-blaetter .st-was{ font-stretch:125%; font-weight:640; font-size:18px; }
.wp-blaetter .st-wo .a-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.wp-blaetter .st-wo .a-tags i{ font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--linie-hell); padding:4px 7px; color:var(--tinte); }
.wp-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 40px); align-items:start; }
.wp-zwei .u-preis{ padding:22px; }
.wp-pflichten{ list-style:none; margin:0; padding:0; }
.wp-pflichten li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; padding:10px 0; border-bottom:1px solid var(--linie-hell); font-size:15px; }
.wp-pflichten li:last-child{ border-bottom:0; }
.wp-pflichten .wp-pwarum{ grid-column:2; color:#55554E; font-size:14px; }
.wp-pname{ font-weight:640; }
.wp-gilt{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:3px 7px; border:1px solid currentColor; line-height:1.2; white-space:nowrap; }
.wp-gilt.ja{ color:var(--ultramarin); }
.wp-gilt.nein{ color:#55554E; }
.wp-gilt.pruefen, .wp-gilt.prüfen{ color:#8A5A00; }
.wp-naechster{ color:#3E3E38; font-size:16.5px; max-width:66ch; }
.wp-naechster strong{ color:var(--tinte); font-weight:640; }
.wp-stempel{ position:absolute; top:clamp(60px, 7vw, 90px); right:clamp(16px, 3vw, 40px); transform:rotate(-8deg) scale(1.6); opacity:0; border:2px solid var(--ultramarin); color:var(--ultramarin); padding:8px 12px; background:rgba(251,251,248,.9); text-align:center; pointer-events:none; }
.wp-stempel b{ display:block; font-size:16px; letter-spacing:0.18em; }
.wp-stempel span{ display:block; font-size:10px; letter-spacing:0.12em; margin-top:3px; }
.wp-stempel.da{ opacity:1; transform:rotate(-8deg) scale(1); transition:opacity .25s ease, transform .35s cubic-bezier(.2,1.4,.4,1); }
.ac-tabelle .st-was{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ac-tabelle .st-was .wp-gilt{ order:-1; }
.ac-tabelle .st-wo b{ display:block; margin-top:10px; color:var(--tinte); font-weight:640; }
.ac-tabelle .st-wo b::before{ content:'→ '; color:var(--ultramarin); }
.ac-tabelle .st-wo a{ color:var(--ultramarin); }
@media (max-width:760px){ .wp-zwei{ grid-template-columns:1fr; } .wp-blaetter .st-zeile{ grid-template-columns:32px minmax(0,1fr); } .wp-blaetter .st-wo{ grid-column:2; } .wp-stempel{ position:static; transform:none !important; margin:0 22px 22px; display:inline-block; } }
@media print{
  body.unterseite header, body.unterseite footer, body.unterseite .hero-klein .aktionen, body.unterseite .zelle-aktion, body.unterseite .direkt-leiste, body.unterseite .wp-formular, body.unterseite .ac-formular{ display:none !important; }
  body.unterseite main > section{ padding:0; }
  .wp-papier{ box-shadow:none; border:0; }
  .wp-teil{ opacity:1 !important; transform:none !important; }
}
.ac-tabelle .st-zeile{ grid-template-columns:48px minmax(0,4fr) minmax(0,9fr) 150px; }
.ac-tabelle .st-dauer{ white-space:normal; line-height:1.5; }
/* Bildschirm: Klick macht die Seite bedienbar — das Schild sagt es beim Zeigen */
.bs-rahmen.lebt:not(.bedienbar){ cursor:pointer; }
.bs-schild{ display:none; position:absolute; right:12px; bottom:12px; z-index:3; padding:8px 11px; background:rgba(20,20,18,.82); color:#fff; pointer-events:none; letter-spacing:0.12em; }
.bs-rahmen.lebt:not(.bedienbar):hover .bs-schild{ display:block; }
.bs-rahmen.bedienbar{ box-shadow:0 0 0 3px var(--ultramarin), 0 18px 40px -24px rgba(20,20,18,.35); }

/* ——— Handy-Fassung: je Abschnitt ein Satz, ein Bild, ein Knopf — alles Weitere aufklappbar ——— */
.nur-handy{ display:none; }
.a-bild-link{ display:none; }
.bs-auf{ display:block; }
details.aufklapp > summary{ list-style:none; cursor:default; }
details.aufklapp > summary::-webkit-details-marker{ display:none; }
details.aufklapp > summary.nur-handy{ display:none; }
@media (min-width:701px){ details.aufklapp > summary{ pointer-events:none; } }
details.tafel-auf > summary span{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--linie-dunkel); color:var(--tinte); }
details.tafel-auf > summary span::after{ content:'+'; color:var(--ultramarin); font-size:16px; }
details.tafel-auf[open] > summary span::after{ content:'–'; }
.st-auf{ all:unset; display:inline; }
@media (max-width:900px){
  .a-bild-link{ position:relative; display:block; margin:0 16px 14px 48px; border:1px solid var(--linie-dunkel); background:#ECECE6; }
  .a-bild-link img{ display:block; width:100%; height:auto; }
  .a-bild-hinweis{ position:absolute; right:8px; bottom:8px; padding:6px 9px; background:rgba(20,20,18,.82); color:#fff; font-size:11px; letter-spacing:0.1em; }
}
@media (max-width:700px){
  .nur-gross{ display:none !important; }
  .nur-handy{ display:revert; }
  details.aufklapp > summary{ cursor:pointer; }
  details.aufklapp > summary.nur-handy{ display:block; }

  /* Hero: Überschrift, darunter der Plotter, ein Satz, ein Knopf — WhatsApp und Anruf liegen unten fest */
  .hero{ min-height:0; padding-top:88px; padding-bottom:40px; }
  .hero-grid{ display:flex; flex-direction:column; gap:0; }
  .hero-grid > div:first-child{ display:contents; }
  .hero-kicker, .hero .direkt{ display:none; }
  .hero .hero-grid h1{ order:1; font-size:clamp(30px, 8.8vw, 40px); max-width:none; }
  /* Plotter: randlos über die volle Breite, ohne Beschriftung im Bild — die Blattzeile steht darunter */
  .hero-grid > div:last-child{ order:2; }
  .werkplan3d{ margin:18px calc(50% - 50vw) 0; width:100vw; max-width:none; }
  .w3-buehne{ aspect-ratio:4/3; border-left:0; border-right:0; box-shadow:none; }
  .w3-kopf, .w3-werte{ display:none; }
  .blatt-leiste{ display:none; }
  .hero .maschinen-status{ order:3; margin:10px 0 0; padding-top:0; border-top:0; font-size:11px; }
  .hero .lead{ order:4; margin-top:14px; font-size:16.5px; line-height:1.5; max-width:none; }
  .hero .aktionen{ order:5; margin-top:14px; }
  .hero .aktionen .cta{ flex:1 1 100%; text-align:center; }

  /* Auftragsbuch: nur der gewählte Betrieb ausgeklappt, sein Bild öffnet die Seite */
  .eintrag .auftrag{ cursor:pointer; padding-top:14px; padding-bottom:12px; }
  .eintrag:not(.aktiv) .a-bild-link, .eintrag:not(.aktiv) .a-tut, .eintrag:not(.aktiv) .a-tags, .eintrag:not(.aktiv) .a-link{ display:none; }
  .eintrag.aktiv{ box-shadow:inset 3px 0 0 var(--ultramarin); }
  .eintrag.aktiv .a-betrieb{ color:var(--ultramarin); }
  .a-bild-link{ margin:4px 14px 14px 48px; }

  /* Leistungsumfang: „Kann dazukommen“ zugeklappt */
  details.aufklapp > summary .u-titel{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0; }
  details.aufklapp > summary .u-titel::after{ content:'+'; color:var(--ultramarin); font-weight:500; }
  details.aufklapp[open] > summary .u-titel::after{ content:'–'; }
  details.aufklapp[open] > summary .u-titel{ margin-bottom:14px; }

  /* Auflagen: Pflicht und Termin untereinander, Antippen öffnet Text und Werkzeug */
  #buerokratie .auflagen .st-zeile{ display:flex; flex-direction:column; padding:14px 14px; }
  #buerokratie .auflagen .st-dauer{ order:1; }
  #buerokratie .auflagen .st-wo{ order:2; }
  #buerokratie .auflagen .st-nr{ display:none; }
  #buerokratie .auflagen .st-was{ display:block; margin:0; font-size:17px; }
  #buerokratie .auflagen .st-dauer{ display:block; margin:5px 0 0; text-align:left; font-size:11px; white-space:normal; }
  #buerokratie .auflagen .st-dauer small{ display:none; }
  #buerokratie .auflagen .st-wo{ display:none; margin-top:10px; }
  #buerokratie .auflagen .st-zeile.offen .st-wo{ display:block; }
  #buerokratie .auflagen .st-zeile.offen .st-dauer small{ display:inline; white-space:normal; }
  #buerokratie .auflagen .st-zeile.offen .st-dauer small::before{ content:' · '; }
  .st-auf{ cursor:pointer; }
  .st-auf::after{ content:'+'; margin-left:10px; color:var(--ultramarin); font-weight:500; }
  .st-zeile.offen .st-auf::after{ content:'–'; }
  .auflagen .st-zeile.neu .st-was::after{ display:none; }

  /* Plantafel zugeklappt */
  details.tafel-auf:not([open]) + .pilot, details.tafel-auf{ margin-top:18px; }
}

/* ——— Papierkram-Rechner (Zeitkonto) ——— */
.zeitkonto .zk-kopf span:nth-child(2){ color:var(--tinte); }
.zk-euro{ margin-top:14px; font-size:17px; line-height:1.45; color:#3E3E38; max-width:40ch; }
.zk-euro b{ font-stretch:125%; font-weight:640; font-size:26px; color:var(--ultramarin); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.zk-details{ text-transform:none; letter-spacing:0.04em; }
.zk-jahr{ text-transform:none; letter-spacing:0.04em; }
@media (max-width:700px){
  .zk-tage{ font-size:52px; }
  .zk-hinweis{ font-size:14.5px; }
  .zk-summe .cta{ width:100%; text-align:center; align-self:stretch; }
}

/* ——— Plantafel: Kiste mit Chip, Tablet, Rüstsatz, Weitergabe ——— */
.tf-leser.kiste{ gap:14px; }
.tf-auftragskarte{ background:var(--tf-ton); border:1px solid var(--tf-linie-fein); padding:8px 12px 9px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 16px; align-items:baseline; }
.tf-auftragskarte .ak-nr{ grid-row:1 / span 2; font-size:1.7em; font-weight:500; letter-spacing:0.03em; font-variant-numeric:tabular-nums; }
.tf-auftragskarte .ak-bez{ color:var(--tinte); }
.tf-auftragskarte .ak-z{ font-size:.78em; letter-spacing:0.06em; color:var(--tf-grau); }
.tf-tablet{ width:clamp(84px, 14%, 120px); flex:none; will-change:transform; }   /* Handy: der Leser kommt zur Kiste */
.tf-tablet .t-knopf{ fill:#5C5C55; }
.tf-tablet .t-rahmen{ fill:var(--tinte); }
.tf-tablet .t-schirm{ fill:var(--tf-flaeche); stroke:#5C5C55; stroke-width:1; }
.tf-tablet .t-text{ font-family:'IBM Plex Mono', monospace; font-size:9px; font-weight:500; letter-spacing:.14em; fill:var(--tf-grau); }
.tf-tablet .t-welle{ fill:none; stroke:var(--ultramarin); stroke-width:2; stroke-linecap:round; opacity:.9; }
.tf-tablet .t-chip{ fill:none; stroke:var(--ultramarin); stroke-width:2; }
.tf-tablet .t-led{ fill:#C9CCD4; transition:fill .3s ease; }
.tf-tablet .t-led.wartet{ fill:var(--ultramarin); animation:blinken 1s steps(2,end) infinite; }
.tf-tablet .t-led.ok{ fill:var(--tf-gut); animation:none; }
.tf-kiste{ width:clamp(150px, 26%, 230px); flex:none; will-change:transform; }
.tf-kiste .k-seite{ fill:#C9C9C1; } .tf-kiste .k-front{ fill:#DADAD2; } .tf-kiste .k-deckel{ fill:#ECECE6; }
.tf-kiste .k-kante{ fill:none; stroke:var(--tinte); stroke-width:1.4; stroke-linejoin:round; }
.tf-kiste .k-rippe{ fill:none; stroke:#8E8E86; stroke-width:1; }
.tf-kiste .k-chip rect{ fill:var(--ultramarin); }
.tf-kiste .k-welle{ fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; }
.tf-kiste .k-name{ font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:500; letter-spacing:.1em; fill:var(--tinte); }
.tf-kiste.gelesen .k-chip rect{ fill:var(--tf-gut); }
.tf-kiste.gelesen .k-chip{ animation:chip-puls .9s ease-out 1; transform-origin:37px 106px; }
@keyframes chip-puls{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.tf-sek.satz{ padding-bottom:6px; }
.tf-ruestsatz{ display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr); gap:6px 14px; align-items:center; }
.tf-ruestsatz svg{ width:100%; max-height:168px; display:block; }
.tf-ruestsatz .r-koerper{ fill:#E4E4DD; stroke:var(--tinte); stroke-width:1.2; }
.tf-ruestsatz .r-nabe{ fill:var(--tf-flaeche); stroke:var(--tinte); stroke-width:1.2; }
.tf-ruestsatz .r-zeiger{ fill:var(--tinte); }
.tf-ruestsatz .r-schiene{ fill:none; stroke:var(--tinte); stroke-width:1.2; }
.tf-ruestsatz .r-label{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:.1em; fill:var(--tf-grau); text-transform:uppercase; }
.tf-ruestsatz .r-platz circle, .tf-ruestsatz .r-platz path{ fill:var(--tf-flaeche); stroke:#9A9A92; stroke-width:1; transition:fill .25s ease, stroke .25s ease; }
.tf-ruestsatz .r-platz text{ font-family:'IBM Plex Mono', monospace; font-size:8px; font-weight:500; fill:#9A9A92; letter-spacing:.04em; }
.tf-ruestsatz .r-platz.belegt circle, .tf-ruestsatz .r-platz.belegt path{ fill:#D4D4CC; stroke:var(--tinte); }
.tf-ruestsatz .r-platz.belegt text{ fill:var(--tinte); }
.tf-ruestsatz .r-platz.nutzt.an circle, .tf-ruestsatz .r-platz.nutzt.an path{ fill:var(--ultramarin); stroke:var(--ultramarin); }
.tf-ruestsatz .r-platz.nutzt.an text{ fill:#fff; }
.tf-ruestsatz .r-platz.dran circle, .tf-ruestsatz .r-platz.dran path{ stroke:var(--ultramarin); stroke-width:2.2; }
.tf-ruestsatz .rs-liste ul{ list-style:none; margin:0; padding:0; }
.tf-ruestsatz .rs-liste li{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; padding:2px 0; font-size:.86em; color:var(--tf-grau); border-bottom:1px solid var(--tf-linie-fein); }
.tf-ruestsatz .rs-liste li:last-child{ border-bottom:0; }
.tf-ruestsatz .rs-liste li b{ color:var(--tinte); font-weight:500; }
.tf-ruestsatz .rs-liste li.nutzt{ color:var(--tinte); }
.tf-ruestsatz .rs-liste li.nutzt b{ color:var(--ultramarin); }
.tf-ruestsatz .rs-liste li.nutzt.an{ background:#EDEEF9; }
.tf-ruestsatz .rs-liste .tf-l b{ color:var(--ultramarin); font-weight:500; text-transform:none; letter-spacing:.06em; }
.tf-weiter{ flex:1; display:flex; align-items:center; justify-content:center; gap:clamp(14px, 3%, 36px); min-height:0; position:relative; }
.tf-weiter .tf-kiste{ width:clamp(130px, 24%, 200px); }
.tf-weiter .w-pfeil{ display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--tf-grau); font-size:.72em; letter-spacing:.12em; text-transform:uppercase; flex:none; }
.tf-weiter .w-pfeil i{ display:block; width:clamp(60px, 12%, 120px); height:2px; background:var(--tinte); position:relative; min-width:60px; }
.tf-weiter .w-pfeil i::after{ content:''; position:absolute; right:-1px; top:-5px; border:6px solid transparent; border-left:9px solid var(--tinte); }
.tf-weiter .w-pfeil i::before{ content:''; position:absolute; left:0; top:-1px; height:4px; width:var(--w, 0%); background:var(--ultramarin); }
.tf-station{ transition:border-color .3s ease, box-shadow .3s ease; }
.tf-station.an{ border-color:var(--ultramarin); box-shadow:0 0 0 3px #EDEEF9; }
.tf-station.an .s-st{ color:var(--ultramarin); }
.tf-station{ background:var(--tf-ton); border:1px solid var(--linie-dunkel); padding:10px 14px 11px; min-width:150px; flex:none; }
.tf-station .s-st{ font-stretch:125%; font-weight:640; font-size:1.5em; letter-spacing:-0.01em; }
.tf-station .s-was{ color:var(--tinte); }
.tf-station .s-z{ margin-top:6px; font-size:.76em; letter-spacing:.06em; color:var(--tf-grau); }
@media (max-width:700px){
  .tf-ruestsatz{ grid-template-columns:1fr; }
  .tf-ruestsatz svg{ max-height:130px; }
  .tf-ruestsatz .rs-liste li{ font-size:.8em; }
  .tf-auftragskarte{ grid-template-columns:1fr; }
  .tf-auftragskarte .ak-nr{ grid-row:auto; }
  .tf-weiter{ flex-wrap:wrap; }
}

/* ——— Plantafel auf dem Handy: Fenster wächst mit dem Inhalt, Kopf ist eine Zeile, Läuft nur wenn etwas läuft ——— */
@media (max-width:760px){
  .tafel-buehne{ aspect-ratio:auto; grid-template-rows:auto auto; }
  .tf-spalte{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; }
  .tf-sp-kopf{ flex-direction:row; align-items:baseline; gap:10px; }
  .tf-laeuft{ flex:none; min-height:0; padding:0; background:none; border:0; color:var(--tinte); }
  .tf-laeuft:not(.an){ display:none; }
  .tf-laeuft .l-kopf{ font-size:10px; }
  .tf-laeuft .l-nr{ display:inline; font-size:1em; font-family:'IBM Plex Mono', monospace; font-weight:500; margin-left:8px; }
  .tf-laeuft .l-zeile{ display:none; }
  .tf-rechts{ padding:12px 12px 10px; }
  .tf-fenster{ flex:none; overflow:visible; }
  .tf-dlg{ flex:none; min-height:0; }
  .tf-dlg .d-kopf{ flex-wrap:wrap; align-items:flex-start; }
  .tf-dlg .d-meta{ order:-1; width:100%; white-space:normal; }
  .tf-dlg .d-titel{ font-size:1.25em; }
  .tf-leser.kiste, .tf-weiter{ flex:none; padding:10px 0; }
  .tf-ruestsatz svg{ max-height:150px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Neufassung November 2026 — alles ab hier ist neu; darüber steht das bisherige Stylesheet unverändert
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— Plotter: der Besucher tippt seinen Betrieb ein, der Plotter zeichnet ihn auf die Blätter ——— */
.plot-fuss{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 20px; max-width:720px; margin:12px 0 0 auto; }
.plot-fuss .blatt-leiste{ margin:0; max-width:none; flex:none; }
.plot-eingabe{ flex:1 1 260px; max-width:340px; min-width:0; }
.pe-zeile{ display:flex; }
.plot-eingabe input{
  flex:1 1 auto; min-width:0; height:44px; padding:0 12px;
  font:inherit; font-size:15px; color:var(--tinte);
  background:#FBFBF8; border:1px solid var(--linie-dunkel); border-right:0; border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.plot-eingabe input::placeholder{ color:#6E6E66; opacity:1; }
.plot-eingabe input:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:-2px; }
.plot-eingabe button{
  flex:none; height:44px; padding:0 14px; cursor:pointer;
  font-size:11px; background:var(--tinte); color:var(--papier); border:1px solid var(--tinte); border-radius:0;
  transition:background .15s ease, border-color .15s ease;
}
.plot-eingabe button:hover{ background:var(--ultramarin); border-color:var(--ultramarin); }
.plot-eingabe button:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:2px; }
.plot-eingabe label{ display:block; margin-top:7px; font-size:10.5px; letter-spacing:0.12em; color:#55554E; }
@media (max-width:960px){ .plot-fuss{ max-width:560px; margin-left:0; } }
@media (max-width:700px){
  /* Handy: der Plotter läuft randlos, das Feld bekommt den Seitenrand zurück; 16 px Schrift, damit das iPhone beim Antippen nicht hineinzoomt */
  .plot-fuss{ display:block; max-width:none; margin:0; padding:10px var(--rand) 0; }
  .plot-eingabe{ max-width:none; }
  .plot-eingabe input{ font-size:16px; }
  .plot-eingabe label{ margin-top:6px; }
  .hero .maschinen-status{ margin-top:14px; }
}
@media print{ .plot-fuss{ display:none !important; } }

/* ——— Außerdem: Werkzeuge ——— */
#werkzeuge h2{ font-size:clamp(26px, 2.8vw, 38px); max-width:none; }
#werkzeuge .raster{ margin-top:clamp(28px, 3.5vw, 44px); }
#werkzeuge .raster .r-nr{ color:var(--ultramarin); }
.w-link{ display:inline-block; margin-top:14px; color:var(--ultramarin); text-decoration:underline; text-underline-offset:3px; }
.w-link:hover{ color:var(--tinte); }
section#werkzeuge{ padding-top:clamp(64px, 7vw, 96px); padding-bottom:clamp(64px, 7vw, 96px); }

/* ——— Leistungsumfang: Hinweiszeile und Verweis in der Liste ——— */
.u-liste a{ color:var(--ultramarin); text-underline-offset:3px; }
.umfang + .zelle-fuss{ margin-top:16px; }

/* ——— Texte: Verweise in Fließtext ——— */
.prosa a, .faq .antwort a, .zelle-lead a{ color:var(--ultramarin); text-underline-offset:3px; }

/* ——— Neue Abschnitte: dieselbe Trennlinie wie die übrigen ——— */
#umfang, #werkzeuge, #pilot{ border-top:1px solid var(--linie-hell); }
#pilot .pilot{ margin-top:0; }
.pilot-innen .prosa p + p{ margin-top:16px; }

/* ——— Auftragsbuch: der gewählte Betrieb ist ein gedrückter Knopf (aria-pressed), kein Reiter mehr ——— */
.auftrag[aria-pressed="true"]{ background:#ECECE6; box-shadow:inset 3px 0 0 var(--ultramarin); }
.auftrag[aria-pressed="true"] .a-betrieb{ color:var(--ultramarin); }
.auftrag[aria-pressed="true"] .a-tags i{ border-color:var(--ultramarin); color:var(--ultramarin); }
@media (max-width:900px){
  .auftrag[aria-pressed="true"]{ background:none; box-shadow:none; }
  .auftrag[aria-pressed="true"] .a-betrieb{ color:var(--tinte); }
  .auftrag[aria-pressed="true"] .a-tags i{ border-color:var(--linie-hell); color:var(--tinte); }
}
@media (max-width:700px){ .eintrag.aktiv .auftrag[aria-pressed="true"] .a-betrieb{ color:var(--ultramarin); } }

/* ——— Schmale Bildschirme: lange Wörter an der Silbe trennen statt mitten im Wort ——— */
@media (max-width:760px){
  .zeile h3, .faq summary h3, .raster h3, .st-was{ -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:10 4 4; -webkit-hyphenate-limit-before:4; -webkit-hyphenate-limit-after:4; }
}

/* ——— Plotter: zweizeilige Blatt-Titel gleichmäßig umbrechen (kein einzelnes Wort in der zweiten Zeile) ——— */
.w3-titel{ text-wrap:balance; }


/* ═══════════════════════════════════════════════════════════════════════════
   Plotter, zweite Fassung (November 2026): Maschine mit Flächen, Normschrift, Blaupause im Prüflauf,
   das Schild des Besuchers — und der Plotter auf jeder Seite
   ═══════════════════════════════════════════════════════════════════════════ */

/* ——— Bühne: größer, höher; die Beschriftung wechselt mit der Lichtkante die Farbe ——— */
@media (min-width:961px){
  .hero .werkplan3d, .hero .plot-fuss{ max-width:none; }
  .w3-buehne{ aspect-ratio:8/7; }
}
@media (min-width:961px) and (max-height:819px){ .w3-buehne{ aspect-ratio:9/7; } }
@media (min-width:1200px){ .hero .hero-grid > div:last-child{ margin-right:calc(24px - var(--rand)); } }
.w3-buehne{ box-shadow:0 1px 0 rgba(20,20,18,.04), 0 24px 60px -32px rgba(20,20,18,.28); }
.w3-kopf, .w3-werte, .w3-hinweis, .w3-pause span{ transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.w3-kopf .mono, .w3-werte dt, .w3-werte dd, .w3-phase, .w3-titel{ transition:color .25s ease; }
.w3-buehne.blau-l .w3-kopf{ background:rgba(36,48,232,.88); color:#fff; }
.w3-buehne.blau-l .w3-kopf .mono{ color:rgba(255,255,255,.8); }
.w3-buehne.blau-l .w3-kopf .w3-phase{ color:#fff; }
.w3-buehne.blau-r .w3-werte{ background:rgba(36,48,232,.88); }
.w3-buehne.blau-r .w3-werte dt{ color:rgba(255,255,255,.74); }
.w3-buehne.blau-r .w3-werte dd{ color:#fff; }

/* Bedienhinweis: erst, wenn der Zeiger über der Bühne steht — sonst liegt er auf der Zeichnung */
.w3-hinweis{ right:10px; bottom:10px; padding:4px 8px; background:rgba(242,242,238,.9); opacity:0; }
.w3-buehne:hover .w3-hinweis{ opacity:1; }
.w3-buehne.blau-r .w3-hinweis{ background:rgba(36,48,232,.9); color:rgba(255,255,255,.86); }

/* Anhalten: ein Knopf im Bild, auf jedem Gerät und auf jeder Seite */
.w3-pause{ position:absolute; left:6px; bottom:6px; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; color:var(--tinte); -webkit-tap-highlight-color:transparent; }
.w3-pause span{ position:relative; width:30px; height:30px; border:1px solid var(--linie-dunkel); background:rgba(242,242,238,.9); }
.w3-pause span::before, .w3-pause span::after{ content:''; position:absolute; top:9px; bottom:9px; width:3px; background:currentColor; }
.w3-pause span::before{ left:9px; }
.w3-pause span::after{ right:9px; }
.w3-pause.aktiv span::before{ left:11px; top:8px; bottom:8px; width:0; background:none; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.w3-pause.aktiv span::after{ display:none; }
.w3-pause:hover span{ border-color:var(--ultramarin); color:var(--ultramarin); }
.w3-pause:focus-visible{ outline:2px solid var(--ultramarin); outline-offset:-4px; }
.w3-pause[hidden]{ display:none; }
.w3-buehne.blau-l .w3-pause{ color:#fff; }
.w3-buehne.blau-l .w3-pause span{ background:rgba(36,48,232,.9); border-color:rgba(255,255,255,.75); }
.w3-buehne.blau-l .w3-pause:focus-visible{ outline-color:#fff; }

/* Nach dem Stempel auf „Ihr Blatt“: der Weg zur Anfrage, im Bild */
.w3-angebot{
  position:absolute; left:50%; bottom:18px; transform:translate(-50%, 12px); opacity:0;
  padding:15px 22px; background:var(--ultramarin); color:#fff; text-decoration:none; white-space:nowrap;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  box-shadow:0 14px 34px -10px rgba(36,48,232,.55);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.9,.3,1), background-color .15s ease;
}
.w3-angebot.da{ opacity:1; transform:translate(-50%, 0); }
.w3-angebot:hover{ background:var(--tinte); }
.w3-angebot:focus-visible{ outline:2px solid var(--tinte); outline-offset:3px; }
.w3-angebot[hidden]{ display:none; }
@media (max-width:700px){ .w3-angebot{ font-size:11px; letter-spacing:0.1em; padding:14px 16px; bottom:14px; } }
@media print{ .w3-pause, .w3-angebot{ display:none !important; } }

/* Eingabefeld unter der Bühne: die Zeile darunter bleibt einzeilig */
@media (min-width:701px){ .plot-eingabe{ flex-basis:300px; max-width:400px; } .plot-eingabe label{ white-space:nowrap; } }

/* ——— Unterseiten: derselbe Seitenanfang wie die Startseite, mit eigenem Blatt ——— */
.unterseite main > section.hero{ padding-top:110px; padding-bottom:72px; }
.hero-unter h1{ font-size:clamp(34px, 3.9vw, 56px); line-height:1.05; letter-spacing:-0.02em; }
@supports (font-size: 1cqw){ .hero-unter h1{ font-size:min(clamp(34px, 3.9vw, 56px), 8.6cqw); } }
.hero-unter .lead{ margin-top:26px; font-size:17.5px; }
.hero-unter .aktionen{ margin-top:34px; }
@media (max-width:960px){ .unterseite main > section.hero{ padding-top:140px; padding-bottom:72px; } }
@media (max-width:700px){
  .unterseite main > section.hero{ padding-top:88px; padding-bottom:40px; }
  .hero-unter .hero-grid h1{ font-size:clamp(27px, 7.6vw, 36px); }
}

/* ——— Rechtsseiten: der Plotter steht rechts neben dem Text und bleibt beim Lesen stehen ——— */
.recht-plotter{ margin:0 0 clamp(28px, 4vw, 44px); }
.recht-plotter .werkplan3d{ max-width:none; margin:0; width:auto; }
.recht-plotter .w3-buehne{ aspect-ratio:16/10; border:1px solid var(--linie-dunkel); }
.recht-plotter .w3-werte, .recht-plotter .w3-hinweis, .recht-plotter .w3-kopf .mono:first-child{ display:none; }
.recht-plotter .w3-kopf{ display:block; max-width:70%; }
.rechtstext .recht-plotter p{ margin:0; font-size:inherit; color:inherit; }
.rechtstext .recht-plotter .w3-titel{ font-size:15px; color:var(--tinte); margin-top:0; }
.rechtstext .recht-plotter .w3-phase{ font-size:10.5px; margin-top:5px; }
.rechtstext .w3-buehne.blau-l .w3-titel{ color:#fff; }
@media (min-width:1100px){
  .rechtstext.mit-plotter .wrap{ max-width:var(--raster); margin:0 auto; display:grid; grid-template-columns:minmax(0, 690px) minmax(0, 1fr); column-gap:clamp(40px, 5vw, 72px); align-items:start; }
  .rechtstext.mit-plotter .wrap > *{ grid-column:1; }
  .rechtstext.mit-plotter .wrap > .recht-plotter{ grid-column:2; grid-row:1 / span 120; position:sticky; top:96px; margin:10px 0 0; }
  .recht-plotter .w3-buehne{ aspect-ratio:1/1; }
}

/* Blatt-Schalter: ausgeblendet, wenn es nur ein Blatt gibt */
.blatt-leiste[hidden], .blatt-leiste button[hidden]{ display:none; }

/* ——— Plotspuren: der Zeichenkopf zieht die Linie über jedem Abschnitt, die Passkreuze entstehen dabei ——— */
.spur{ position:absolute; top:-1px; left:var(--rand); right:var(--rand); height:1px; pointer-events:none; z-index:1; }
.spur::before{ content:''; position:absolute; inset:0; background:var(--ultramarin); transform:scaleX(0); transform-origin:0 50%; opacity:0; }
.spur i{
  position:absolute; left:0; top:-11px; width:23px; height:23px; margin-left:-11px; opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Ccircle cx='11.5' cy='11.5' r='8.5' fill='%23F2F2EE' stroke='%23141412'/%3E%3Cpath d='M0 11.5H7M16 11.5H23M11.5 0V7M11.5 16V23' stroke='%23141412'/%3E%3Ccircle cx='11.5' cy='11.5' r='2.4' fill='%232430E8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gezogen > .spur::before{ animation:spur-linie 2.4s cubic-bezier(.45,0,.2,1) both; }
.gezogen > .spur i{ animation:spur-kopf 2.4s cubic-bezier(.45,0,.2,1) both; }
@keyframes spur-linie{ 0%{ transform:scaleX(0); opacity:1; } 50%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }
@keyframes spur-kopf{ 0%{ left:0; opacity:1; transform:none; } 50%{ left:100%; opacity:1; transform:none; } 62%,100%{ left:100%; opacity:0; transform:scale(1.7); } }
.plotspur main > section.kreuz::before, .plotspur main > section.kreuz::after{ opacity:0; }
.plotspur main > section.kreuz.gezogen::before{ animation:kreuz-zeichnen 1s ease-out both; }
.plotspur main > section.kreuz.gezogen::after{ animation:kreuz-zeichnen 1s ease-out 1.1s both; }
@keyframes kreuz-zeichnen{ 0%{ opacity:0; color:var(--ultramarin); transform:scale(2.2); } 25%{ opacity:1; color:var(--ultramarin); transform:scale(1); } 100%{ opacity:1; color:var(--linie-dunkel); transform:none; } }

/* ——— Seitenfuß: jede Seite endet mit dem Freigabe-Stempel ——— */
footer .wrap{ position:relative; }
.frei-stempel{
  position:absolute; right:var(--rand); top:-6px; padding:9px 15px 8px; border:2px solid currentColor; color:#9AA0FF;
  transform:rotate(-8deg); text-align:center; line-height:1; white-space:nowrap; pointer-events:none;
}
.frei-stempel::after{ content:''; position:absolute; inset:3px; border:1px solid currentColor; opacity:.65; }
.frei-stempel b{ display:block; font-stretch:125%; font-weight:640; font-size:18px; letter-spacing:0.07em; }
.frei-stempel i{ display:block; margin-top:5px; font-style:normal; font-family:'IBM Plex Mono', monospace; font-size:8px; font-weight:500; letter-spacing:0.16em; }
.plotspur .frei-stempel{ opacity:0; }
.plotspur .frei-stempel.gezogen{ animation:stempel-schlag .6s cubic-bezier(.2,1.4,.35,1) .3s both; }
@keyframes stempel-schlag{ 0%{ opacity:0; transform:rotate(-17deg) scale(2); } 55%{ opacity:1; transform:rotate(-8deg) scale(.95); } 100%{ opacity:1; transform:rotate(-8deg) scale(1); } }
@media (max-width:560px){ .frei-stempel{ position:relative; right:auto; top:auto; display:inline-block; margin:26px 0 0 6px; } }
@media print{ .frei-stempel, .spur{ display:none !important; } }

/* Knopf zur Anfrage: steht schon in der Blaupause im Bild — dort weiß auf Ultramarin */
.w3-buehne.blau-l .w3-angebot{ background:#fff; color:var(--ultramarin); box-shadow:0 14px 34px -10px rgba(0,0,60,.6); }
.w3-buehne.blau-l .w3-angebot:hover{ background:var(--tinte); color:#fff; }
.w3-buehne.blau-l .w3-angebot:focus-visible{ outline-color:#fff; }

/* Ohne Bewegung liegt ein fertiges Blatt da — die Blätter lassen sich trotzdem einzeln aufschlagen */
@media (prefers-reduced-motion: reduce) and (min-width:701px){ .blatt-leiste:not([hidden]){ display:flex; } }

/* Seitenfuß: wo ich unterwegs bin */
.fuss-karte span.z.fk-gebiet{ margin-top:10px; color:#B4B4AB; font-size:14px; line-height:1.45; }