/* Vorschau Stil C „Werkzeichnung“ – baut auf Stil B auf. Aktiv nur mit ?stil=c (Klasse html.stil-c).
   Ein prägendes Element: Maßlinien + Schriftfeld wie auf einer technischen Zeichnung. Alles andere ruhig. */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2")}

html.stil-c{
  --font:"Barlow",system-ui,sans-serif;--font-n:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --text:#16222b;--muted:#55626b;--grau:#f1f4f6;--line:#d3dbe0;--line-d:#b5c1c9;--card-line:#d3dbe0;
}
html.stil-c body{font-family:var(--font);color:var(--text);font-size:1.03rem}
html.stil-c h1,html.stil-c h2,html.stil-c h3,html.stil-c .cutcard .cn{font-family:var(--font-n)!important;font-stretch:100%!important;letter-spacing:0!important}
html.stil-c h1{font-weight:700}
html.stil-c h2,html.stil-c h3{font-weight:600!important}
html.stil-c .artcard .nr,html.stil-c .art .nr,html.stil-c .masse,html.stil-c .art .m{font-family:var(--font-n);font-variant-numeric:tabular-nums}

/* keine Haarlinien über jedem Abschnitt – Abstand statt Linie */
html.stil-c .shead,html.stil-c .secblock{border-top:0!important;padding-top:0!important}
html.stil-c .secblock{margin-top:56px!important}
html.stil-c .phead{border-bottom:0!important}
html.stil-c footer.site .fh{text-transform:none;letter-spacing:0;font-size:.95rem}

/* Positionsnummern wie auf der Zeichnung (statt „1 · Verarbeitung“) */
html.stil-c .posnr{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border:1.5px solid var(--blau);border-radius:999px;font:600 .9rem/1 var(--font-n);color:var(--blau);margin-right:10px;vertical-align:middle}
html.stil-c .area .n,html.stil-c .phead .num{display:flex!important;align-items:center;color:var(--muted)!important}
html.stil-c .hero .pill-eyebrow{display:none}

/* Maßangabe auf Artikelkarten als Maßlinie */
html.stil-c .artcard .masse,html.stil-c .art .m{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.95rem;margin:4px 0 2px}
html.stil-c .artcard .masse::before,html.stil-c .artcard .masse::after,html.stil-c .art .m::before,html.stil-c .art .m::after{content:"";flex:1;min-width:14px;height:7px;border-top:1px solid var(--orange);border-left:1px solid var(--orange);transform:translateY(3px)}
html.stil-c .artcard .masse::after,html.stil-c .art .m::after{border-left:0;border-right:1px solid var(--orange)}

/* ---------- Startseite: Werkzeichnung als Hintergrund ---------- */
html.stil-c .hero{position:relative;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
html.stil-c .hgrid{position:relative;z-index:1;display:block!important;padding-block:96px 120px!important;min-height:min(78vh,640px)}
html.stil-c .htext{max-width:600px;position:relative}
html.stil-c .hero h1{font-size:clamp(2.3rem,4.2vw,3.7rem)!important;line-height:1.02;max-width:17ch;hyphens:manual}
html.stil-c .hero .lead{max-width:44ch;font-size:1.18rem}
.hero-zeichnung{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-zeichnung .hz{position:absolute;right:var(--hz-r,-9%);top:var(--hz-top,68%);transform:translateY(-50%);height:var(--hz-h,140%);width:auto;max-width:none}
.hz .kontur{fill:none;stroke:var(--blau);stroke-width:1.5px;vector-effect:non-scaling-stroke;opacity:.55}
.hz .kontur .fase{stroke-width:1px;opacity:.6}
.hz .kontur *{vector-effect:non-scaling-stroke}
.hz .mitte{fill:none;stroke:var(--blau);opacity:.45}
.hz .mitte *{stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:22 6 3 6}
.hz .mass{fill:none;stroke:var(--orange)}
.hz .mass *{stroke-width:1px;vector-effect:non-scaling-stroke}
.hz .mass .ml{stroke-width:1.6px}
.hz text{font:600 4px var(--font-n);fill:var(--orange-t);stroke:none}
.hz .draw *{stroke-dasharray:2000;stroke-dashoffset:2000;animation:zeichnen 1.4s .3s ease-out forwards}
.hz .fade{opacity:0;animation:einblenden .5s 1.5s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes einblenden{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hz .draw *{animation:none;stroke-dashoffset:0}.hz .fade{animation:none;opacity:1}}
/* Schriftfeld: rechts unten im Kopfbereich, wie auf dem Zeichnungsblatt */
html.stil-c .schriftfeld{position:absolute;right:0;bottom:28px;width:360px;display:grid;grid-template-columns:auto 1fr;background:#fff;border:1.5px solid var(--text);font:500 .9rem/1.25 var(--font-n);color:var(--text)}
.schriftfeld > div{padding:6px 10px;border-bottom:1px solid var(--line-d)}
.schriftfeld .k{color:var(--muted);border-right:1px solid var(--line-d);white-space:nowrap}
.schriftfeld .v{font-weight:600}
.schriftfeld .foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:0;background:var(--grau);color:var(--muted)}
.schriftfeld .foot a{font-weight:600;color:var(--blau)}
@media(max-width:1100px){.hero-zeichnung .hz{right:-22%;opacity:.8}}
@media(max-width:860px){
  html.stil-c .hgrid{padding-block:48px 28px!important;min-height:0}
  .hero-zeichnung .hz{height:auto;width:150%;top:-4%;right:-62%;transform:none;opacity:.45}
  html.stil-c .schriftfeld{position:relative;bottom:auto;width:auto;max-width:420px;margin-top:36px}
}
@media(max-width:560px){html.stil-c .hero h1{font-size:2.3rem!important;hyphens:auto}}

/* Kapitel-Teaser und Warum pbs etwas kühler */
html.stil-c .chapbox,html.stil-c .uspbox{background:var(--grau)!important}
html.stil-c .why>div{border-top-color:var(--blau)!important}

html.stil-c body{font-size:1.06rem}
html.stil-c{--muted:#4a5660}
html.stil-c .werkstoffe li:not(:last-child)::after{content:", "}
@media(max-width:860px){.hero-zeichnung .hz{opacity:.2!important;width:170%;right:-95%;top:-2%}.hz .mtext{display:none}}

html.stil-c .hero h1 .h1-sub{display:block;font-weight:500;color:var(--orange-t);font-size:.62em;margin-top:.35em;line-height:1.1}


/* Wechselnde Zeichnungen: nur die gewählte zeigen */
.hz-item{display:none}.hz-item.on{display:block}
html.stil-c .schriftfeld{display:none}html.stil-c .schriftfeld.on{display:grid}
.hz-item img.hz{opacity:.6}
/* Lesbarkeit über der Zeichnung: weißer Hof um die Schrift */
html.stil-c .hero h1,html.stil-c .hero .lead{text-shadow:0 0 4px #fff,0 0 10px #fff,0 0 18px #fff}
html.stil-c .hero .btn.g{background:rgba(255,255,255,.92)}
html.stil-c .schriftfeld .foot a{display:inline-block;padding:4px 0}

/* ---------- Restliche Vorlagen-Muster ---------- */
/* Nummern ohne Reihenfolge ausblenden (01/02/03 bei „Was wir tun“, Leistungsmerkmale) */
html.stil-c .ab-n,html.stil-c .mk-feat span{display:none!important}
/* Kleine Großbuchstaben-Labels -> normale Schreibweise */
html.stil-c .famgrid .anw,html.stil-c .postcard .dt,html.stil-c .katbody .dt,html.stil-c .grp .kap,html.stil-c .sv-block .kap,html.stil-c .ml-sec .kap,html.stil-c footer.site .fh{text-transform:none!important;letter-spacing:0!important;font-size:.88rem!important;color:var(--muted)!important;font-weight:600}
html.stil-c footer.site .fh{color:#fff!important}
/* Formular-Knopf eckig wie alle Knöpfe */
html.stil-c .form button{border-radius:4px!important;box-shadow:none!important}
html.stil-c .form input,html.stil-c .form textarea,html.stil-c .form select{border-radius:4px!important}

/* ===== Abgleich mit Katalog 2027 (docs/DESIGN.md) ===== */
/* Weißer Grund überall, Flächen nur noch über Linie absetzen; kein Grün */
html.stil-c{--paper:#fff;--creme:#fff;--grau:#fff;--blau-l:#fff;--gruen:var(--blau);--gruen-l:#fff}
html.stil-c body{background:#fff}
html.stil-c .chapbox,html.stil-c .uspbox,html.stil-c .faqbox,html.stil-c .note,html.stil-c .secfoot,html.stil-c .stage,html.stil-c .katcover,html.stil-c .posthero{border:1px solid var(--line)!important}
html.stil-c .stepsbox li::before,html.stil-c .faqbox summary::after{border:1.5px solid var(--blau)}
html.stil-c .schriftfeld .foot{background:#fff;border-top:1px solid var(--line-d)}
html.stil-c .badge.eigen{color:var(--blau)}
/* Unterzeile im Kopf wie Katalogtitel: Navy */
html.stil-c .hero h1 .h1-sub{color:var(--blau)}
/* Logo 2022 in Katalogfarben */
.logo{height:44px!important}
footer.site .logo{height:54px!important}
/* Leiste links: vier Produktbereiche wie Registerreiter im Katalog */
.rail .rtabs{display:flex;flex-direction:column;width:100%;margin-top:96px}
.rail .rtab{display:flex;align-items:center;justify-content:center;height:190px;text-decoration:none;border-top:1px solid rgba(255,255,255,.22);transition:background .15s}
.rail .rtab:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.rail .rtab span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:#fff;font:600 .68rem/1 var(--font-n,var(--font));letter-spacing:.1em;text-transform:uppercase}
.rail .rtab em{font-style:normal;color:#F2B872;margin-inline-end:9px}
.rail .rtab:hover{background:var(--blau-d)}
.rail .rtab.on{background:var(--orange)}
.rail .rtab.on em{color:#fff}
.rail .rtab:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media(max-height:860px){.rail .rtab{height:170px}.rail .rtabs{margin-top:80px}}
@media(max-height:760px){.rail .rtabs{display:none}}
@media(max-width:860px){.rail .rtabs{display:none}}
/* traykniv.es bei Schalenmessern (Produktlinie) */
.secblock{position:relative}
.tklogo{float:right;margin:0 0 12px 24px;text-align:center;text-decoration:none}
.tklogo span{display:block;font:600 .8rem var(--font-n,var(--font));color:var(--muted);margin-bottom:6px}
.tklogo img{width:120px;height:auto;display:block}
@media(max-width:560px){.tklogo{float:none;margin:0 0 12px}}
/* Große Bildschirme: Zeichnung am Inhaltsbereich ausrichten statt am Fensterrand */
.hero-zeichnung{left:50%!important;right:auto!important;width:min(100%,calc(var(--maxw) + 420px));transform:translateX(-50%)}