@charset "utf-8";
/* Steinmann Klick-Prototyp — gemeinsames Stylesheet
   Aus 03_Design/leitentwurf.html extrahiert, damit Startseite und Produktseiten
   nachweislich dieselben Werte verwenden. Grundlage für das Elementor-Master-Design.
   Schrift: Proxima Nova aus dem bestehenden Adobe-Fonts-Web-Projekt der Firma (Kit nvn2jlb).
   Herkunft, Schnitte und Einbindung stehen in stylesheet.html. */

:root{
  /* hell: die Fotografie ist auf Weiß, Edelstahl und Rot aufgenommen */
  --papier:#FFFFFF; --nebel:#F3F3F1; --nebel-2:#E9E9E6;
  --linie:#E1E1DD; --linie-2:#CFCFCA;
  --tinte:#121417; --tinte-2:#4B5157; --tinte-3:#6A7077;
  /* dunkle Kontrastsektionen */
  --anthrazit:#121417; --anthrazit-2:#1A1D21; --kante:#272B31; --kante-2:#343942;
  --hell:#F2F3F1; --hell-2:#A3AAB2; --hell-3:#7B828B;
  --rot:#E30613; --rot-tief:#A80410; --rot-schimmer:rgba(227,6,19,.16);
  --cd:"proxima-nova","Proxima Nova",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1440px; --seite:clamp(20px,4vw,56px); --mark:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--cd);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.04;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--rot);outline-offset:3px;box-shadow:0 0 0 6px var(--rot-schimmer)}

/* Planmarke: das technische Register derselben CD-Schrift */
.pm{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte-3);line-height:1.35}
.pm .r,.r{color:var(--rot)}
.zahl{font-variant-numeric:tabular-nums;letter-spacing:-.035em}

/* Planraster: Markenspalte + Feld */
.raster{display:grid;grid-template-columns:var(--mark) minmax(0,1fr);max-width:var(--max);
  margin-inline:auto;padding-inline:var(--seite)}
.marke{border-right:1px solid var(--linie);padding:4px 16px 0 0;display:flex;flex-direction:column;gap:14px}
.marke .v{writing-mode:vertical-rl;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinte-3)}
.feld{padding-left:clamp(20px,3vw,40px);min-width:0}
.sekt{padding-block:clamp(64px,8vw,120px)}
.dunkel{background:var(--anthrazit);color:var(--hell)}
.dunkel .marke{border-right-color:var(--kante)}
.dunkel .pm,.dunkel .marke .v{color:var(--hell-3)}
.grau{background:var(--nebel)}
.grau .marke{border-right-color:var(--linie-2)}

.h2{font-size:clamp(28px,3.6vw,48px);font-weight:800;letter-spacing:-.038em;max-width:20ch}
.lead{font-size:clamp(16.5px,1.25vw,18.5px);color:var(--tinte-2);max-width:58ch;margin-top:18px}
.dunkel .lead{color:var(--hell-2)}
.kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);
  align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.kopf .lead{margin-top:0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;
  font-size:15px;font-weight:700;border:1.5px solid transparent;cursor:pointer;line-height:1.2;
  transition:background .15s,color .15s,border-color .15s}
.k-rot{background:var(--rot);color:#fff}.k-rot:hover{background:var(--rot-tief)}
.k-linie{border-color:var(--tinte);color:var(--tinte)}.k-linie:hover{background:var(--tinte);color:#fff}
.k-hell{border-color:var(--kante-2);color:var(--hell)}.k-hell:hover{background:var(--anthrazit-2);border-color:#4A515B}
.pfeil{transition:transform .2s}
a:hover .pfeil{transform:translateX(4px)}

/* ---------- Kopf ---------- */
.plankopf{background:var(--anthrazit);color:var(--hell-2)}
.plankopf .in{max-width:var(--max);margin-inline:auto;padding:0 var(--seite);height:36px;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.plankopf .pm{color:var(--hell-3)}
.plankopf a{color:var(--hell)}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie)}
header .in{max-width:var(--max);margin-inline:auto;padding:0 var(--seite);height:72px;
  display:flex;align-items:center;gap:30px}
header .lg{flex:none}
header .lg img{height:38px;width:auto}
nav{display:flex;margin-left:auto}
nav a{padding:10px 14px;font-size:15px;font-weight:600;color:var(--tinte-2);transition:color .15s}
nav a:hover{color:var(--tinte)}
nav a .k{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--rot);margin-right:6px;vertical-align:1px}
.burger{display:none;margin-left:auto;width:44px;height:40px;border:1.5px solid var(--linie-2);background:none;
  position:relative;cursor:pointer}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--tinte)}
.burger i:nth-child(1){top:12px}.burger i:nth-child(2){top:18px}.burger i:nth-child(3){top:24px}

/* ---------- A—01 Hero: Foto voll angeschnitten ---------- */
.hero{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:min(760px,calc(100vh - 108px));
  border-bottom:1px solid var(--linie)}
.hero-text{padding-block:clamp(40px,5.5vw,84px);
  padding-left:max(var(--seite),calc((100vw - var(--max)) / 2 + var(--seite)));
  padding-right:clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.hero-text .pm{display:flex;gap:10px;align-items:center}
.hero-text .pm::before{content:"";width:28px;height:2px;background:var(--rot)}
h1{font-size:clamp(38px,4.6vw,70px);font-weight:800;letter-spacing:-.048em;margin-top:22px;max-width:14ch}
.hero-text .lead{margin-top:24px;max-width:44ch}
.hero-akt{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.kennband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--linie)}
.kennband div{padding:16px 16px 0 0;border-right:1px solid var(--linie)}
.kennband div+div{padding-left:18px}
.kennband div:last-child{border-right:0}
.kennband b{display:block;font-size:clamp(26px,2.5vw,36px);font-weight:800;line-height:1}
.kennband span{display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-3);line-height:1.4}
.hero-bild{position:relative;overflow:hidden;background:var(--nebel)}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%;
  animation:einblenden 1.1s ease-out both}
@keyframes einblenden{from{transform:scale(1.04);opacity:.4}to{transform:none;opacity:1}}
.abb{position:absolute;left:0;bottom:0;background:var(--papier);padding:14px 20px 14px 18px;
  max-width:min(420px,88%);border-top:2px solid var(--rot)}
.abb .pm{color:var(--tinte-3)}
.abb p{font-size:14px;color:var(--tinte-2);margin-top:4px;line-height:1.45}
.notdienst-marke{position:absolute;top:22px;right:22px;background:var(--anthrazit);color:#fff;
  padding:12px 16px;display:flex;gap:12px;align-items:center}
.notdienst-marke .punkt{width:9px;height:9px;border-radius:50%;background:var(--rot);flex:none;
  box-shadow:0 0 0 0 rgba(227,6,19,.6);animation:puls 2.2s infinite}
@keyframes puls{70%{box-shadow:0 0 0 10px rgba(227,6,19,0)}100%{box-shadow:0 0 0 0 rgba(227,6,19,0)}}
.notdienst-marke b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.notdienst-marke span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--hell-2)}

/* ---------- A—02 Gewerke als Bildtafel ---------- */
.tafel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.bt{position:relative;overflow:hidden;background:var(--nebel);display:block}
.bt img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bt:hover img{transform:scale(1.045)}
.bt .etikett{position:absolute;left:0;bottom:0;background:var(--papier);padding:12px 18px 13px 16px;
  max-width:calc(100% - 24px);display:block;transition:padding .25s}
.bt .etikett .nr{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--rot);
  font-variant-numeric:tabular-nums;margin-bottom:3px}
.bt .etikett b{display:block;font-size:clamp(15.5px,1.3vw,19px);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.bt .etikett .bs{display:block;font-size:13.5px;color:var(--tinte-2);line-height:1.4;margin-top:4px;max-width:44ch}
.bt:hover .etikett{padding-right:30px}
.bt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rot);
  transform:scaleX(0);transform-origin:left;transition:transform .35s}
.bt:hover::after{transform:scaleX(1)}
.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}
.h-gross{height:clamp(300px,31vw,440px)}
.h-mittel{height:clamp(240px,23vw,330px)}
.h-klein{height:clamp(200px,17vw,250px)}
.bt.klein .etikett .bs{display:none}
.tafel-fuss{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--linie)}
.tafel-fuss p{font-size:15px;color:var(--tinte-2);max-width:70ch}
.tafel-fuss a{font-weight:700;font-size:15px;display:inline-flex;gap:8px;align-items:center}

/* ---------- A—03 Schließmatrix (dunkel) ---------- */
.mx-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.mx-rahmen{border:1px solid var(--kante);background:var(--anthrazit-2);position:relative;overflow:hidden}
.mx-rahmen::before{content:"";position:absolute;top:-45%;right:-20%;width:62%;aspect-ratio:1;
  background:radial-gradient(circle,var(--rot-schimmer),transparent 68%);pointer-events:none}
.mx-kopf{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--kante);position:relative}
.mx-scroll{overflow-x:auto;position:relative}
.mx{display:grid;grid-template-columns:minmax(158px,1.6fr) repeat(8,minmax(40px,1fr));min-width:560px}
.mx .ecke{border-bottom:1px solid var(--kante-2)}
.mx .sp{border-bottom:1px solid var(--kante-2);border-left:1px solid var(--kante);height:142px;display:flex;
  align-items:flex-end;justify-content:center;padding-bottom:11px;overflow:hidden;transition:background .18s}
.mx .sp span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hell-3);white-space:nowrap;transition:color .18s}
.mx .zk{text-align:left;background:none;border:0;border-bottom:1px solid var(--kante);padding:0 14px;height:48px;
  display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:600;color:var(--hell-2);
  transition:color .18s,background .18s}
.mx .zk::before{content:"";width:6px;height:6px;background:var(--kante-2);flex:none;transition:background .18s}
.mx .zl{border-bottom:1px solid var(--kante);border-left:1px solid var(--kante);display:grid;place-items:center;height:48px;
  transition:background .18s}
.mx .zl svg{opacity:0;transform:scale(.6);color:var(--rot)}
.mx .zl.ja svg{animation:plot .3s ease-out forwards;animation-delay:calc(var(--r) * 70ms + 250ms)}
@keyframes plot{to{opacity:1;transform:scale(1)}}
.mx .zk.an{color:#fff;background:var(--anthrazit)}
.mx .zk.an::before{background:var(--rot)}
.mx .zl.an{background:var(--anthrazit)}
/* Dimmen über color: die Plot-Animation hält opacity per fill-mode */
.mx.gewaehlt .zl.ja:not(.an) svg{color:#5A2126}
.mx.gewaehlt .sp:not(.an) span{color:#3D434B}
.mx .sp.an{background:var(--anthrazit)}
.mx .sp.an span{color:var(--hell)}
.mx-fuss{border-top:1px solid var(--kante-2);padding:15px 16px;display:flex;gap:12px;align-items:flex-start;
  min-height:78px;position:relative}
.mx-fuss p{font-size:14.5px;color:var(--hell-2);line-height:1.5}
.mx-fuss p b{color:#fff}
.register{display:none}
.rg{border:1px solid var(--kante);border-bottom:0}
.rg:last-child{border-bottom:1px solid var(--kante)}
.rg summary{padding:15px;display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  font-size:15.5px;font-weight:700}
.rg summary::-webkit-details-marker{display:none}
.rg summary .n{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--rot)}
.rg ul{margin:0;padding:0 15px 15px;list-style:none;font-size:14.5px;color:var(--hell-2)}
.rg li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--kante)}
.rg li .m{width:16px;text-align:center;font-weight:800;color:var(--rot)}
.rg li.nein{color:var(--hell-3)}.rg li.nein .m{color:var(--kante-2)}
.mx-seite .bildrahmen{background:#fff;border:1px solid var(--kante)}
.mx-seite .bildrahmen img{width:100%;aspect-ratio:3/2;object-fit:contain;padding:10px}
.mx-seite .bu{display:flex;gap:12px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--kante)}
.punkte{list-style:none;margin:22px 0 0;padding:0}
.punkte li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--kante);
  font-size:15px;color:var(--hell-2);line-height:1.5}
.punkte li b{display:block;color:#fff;font-weight:700;margin-bottom:2px}
.punkte svg{margin-top:4px;color:var(--rot)}

/* ---------- A—04 Menschen ---------- */
.team{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.pers{position:relative;overflow:hidden;background:var(--nebel);aspect-ratio:500/619;margin:0}
.pers img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pers:hover img{transform:scale(1.04)}
.pers figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;
  background:linear-gradient(to top,rgba(18,20,23,.86),rgba(18,20,23,.55) 55%,rgba(18,20,23,0));color:#fff}
.pers figcaption b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.pers figcaption span{display:block;font-size:11.5px;color:rgba(255,255,255,.78);line-height:1.35;margin-top:2px}
.pers.gf{grid-column:span 2;grid-row:span 2}
.pers.gf figcaption{padding:60px 20px 18px}
.pers.gf figcaption b{font-size:clamp(18px,1.6vw,23px);font-weight:800;letter-spacing:-.025em}
.pers.gf figcaption span{font-size:13px;margin-top:4px}
.pers.gf figcaption i{font-style:normal;display:inline-block;background:var(--rot);color:#fff;font-size:10px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;margin-bottom:10px}
.ort{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);color:var(--tinte);font-size:9.5px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 7px}
.karriere{grid-column:span 2;background:var(--anthrazit);color:var(--hell);padding:clamp(16px,1.6vw,24px);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;transition:background .2s}
.karriere:hover{background:var(--anthrazit-2)}
.karriere .pm{color:var(--rot)}
.karriere b{display:block;font-size:clamp(17px,1.5vw,22px);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-top:10px;color:#fff}
.karriere p{font-size:13.5px;color:var(--hell-2);line-height:1.45;margin-top:8px}
.karriere .go{font-size:14px;font-weight:700;color:#fff;display:flex;gap:8px;align-items:center}
.team-fuss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--linie)}
.team-fuss div{padding:18px 24px 0 0;border-right:1px solid var(--linie)}
.team-fuss div+div{padding-left:24px}
.team-fuss div:last-child{border-right:0}
.team-fuss b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.team-fuss p{font-size:14.5px;color:var(--tinte-2);margin-top:6px;line-height:1.5}

/* ---------- A—05 Prüfpflicht (grau) ---------- */
.pf-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.pf-bild{position:relative;overflow:hidden;min-height:420px;background:var(--nebel-2)}
.pf-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.pf-bild .abb{max-width:88%}
.blatt-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--tinte)}
.blatt-kopf .meta{display:flex;gap:22px}
.blatt-kopf .meta span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
.blatt-kopf .meta b{display:block;color:var(--tinte);letter-spacing:0;margin-top:3px;font-variant-numeric:tabular-nums}
.pf-z{display:grid;grid-template-columns:minmax(112px,1fr) minmax(0,3.4fr) auto;gap:clamp(12px,2vw,28px);
  padding:16px 0;border-bottom:1px solid var(--linie-2);align-items:baseline}
.pf-z .n{font-size:13.5px;font-weight:800}
.pf-z .g b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em}
.pf-z .g span{display:block;font-size:14px;color:var(--tinte-2);margin-top:4px;line-height:1.5}
.pf-z .t{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rot);white-space:nowrap}
.hinweis{margin-top:18px;font-size:13.5px;color:var(--tinte-2);line-height:1.65}
.hinweis b{color:var(--tinte)}
.platzhalter{border-left:2px solid var(--rot);padding:12px 16px;margin-top:18px;font-size:13.5px;color:var(--tinte-2);
  background:var(--papier);line-height:1.55}
.platzhalter b{color:var(--tinte)}
.dunkel .platzhalter{background:var(--anthrazit-2);color:var(--hell-2)}
.dunkel .platzhalter b{color:#fff}

/* ---------- A—06 Objekte ---------- */
.ob-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3px;background:var(--papier)}
.ob-haupt{position:relative;overflow:hidden;min-height:clamp(360px,36vw,520px);background:var(--nebel)}
.ob-haupt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ob-neben{display:grid;grid-template-rows:1fr 1fr;gap:3px}
.ob-neben .bt{min-height:180px}
.ob-liste{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--linie)}
.ob-z{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,4fr) auto;gap:clamp(12px,2.2vw,32px);
  padding:18px 0;border-bottom:1px solid var(--linie);align-items:center;transition:background .15s}
.ob-z:hover{background:var(--nebel)}
.ob-z .nr{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--tinte-3)}
.ob-z:hover .nr{color:var(--rot)}
.ob-z h3{font-size:clamp(16.5px,1.4vw,19.5px);font-weight:700;letter-spacing:-.02em}
.ob-z .o{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-3);margin-top:4px}
.ob-z .le{font-size:14.5px;color:var(--tinte-2);line-height:1.5}
.ob-z .z{text-align:right}
.ob-z .z b{display:block;font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1}
.ob-z .z span{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-3);margin-top:6px}

/* ---------- A—07 Umzug (dunkel) ---------- */
.um-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.um-bilder{display:grid;grid-template-columns:3fr 2fr;gap:3px}
.um-bilder figure{margin:0;position:relative;overflow:hidden;min-height:clamp(300px,30vw,440px);background:var(--anthrazit-2)}
.um-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.um-bilder figcaption{position:absolute;left:0;bottom:0;background:var(--anthrazit);padding:9px 12px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hell-2)}
.um-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--kante)}
.um-fakten div{padding:16px 16px 0 0;border-right:1px solid var(--kante)}
.um-fakten div+div{padding-left:16px}
.um-fakten div:last-child{border-right:0}
.um-fakten b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.um-fakten span{display:block;font-size:13.5px;color:var(--hell-2);margin-top:5px;line-height:1.45}

/* ---------- A—08 Anfrage ---------- */
.an-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.ap{border:1px solid var(--linie)}
.ap figure{margin:0;position:relative;aspect-ratio:500/560;overflow:hidden;background:var(--nebel)}
.ap figure img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ap .t{padding:18px 20px 20px}
.ap .t b{display:block;font-size:20px;font-weight:800;letter-spacing:-.025em}
.ap .t .rolle{font-size:14px;color:var(--tinte-2);margin-top:3px}
.ap .t a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--linie);
  margin-top:14px;font-weight:700;font-size:16px}
.ap .t a+a{margin-top:0}
.ap .t a span{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-3)}
.ap .t a:hover{color:var(--rot)}
.form{background:var(--nebel);padding:clamp(22px,3vw,38px)}
.form fieldset{border:0;margin:0 0 24px;padding:0}
.form legend{padding:0;margin-bottom:11px}
.wahl{display:flex;flex-wrap:wrap;gap:7px}
.wahl label{position:relative}
.wahl input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.wahl span{display:block;background:var(--papier);border:1.5px solid var(--linie-2);padding:10px 15px;font-size:14px;
  font-weight:600;color:var(--tinte-2);transition:.15s;line-height:1.2}
.wahl label:hover span{border-color:var(--tinte);color:var(--tinte)}
.wahl input:checked+span{background:var(--tinte);border-color:var(--tinte);color:#fff}
.wahl input:focus-visible+span{outline:2px solid var(--rot);outline-offset:2px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fd{margin-bottom:12px}
.fd label{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-3);margin-bottom:6px}
.fd input,.fd textarea{width:100%;background:var(--papier);border:1.5px solid var(--linie-2);color:var(--tinte);
  padding:12px 14px;font:inherit;font-size:15.5px;transition:border-color .15s}
.fd input:focus,.fd textarea:focus{border-color:var(--tinte);outline:none}
.fd textarea{resize:vertical}

/* ---------- Fuß ---------- */
footer{background:var(--anthrazit);color:var(--hell-2);padding-block:clamp(48px,5vw,72px) 26px}
.f-g{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(22px,3vw,44px)}
footer h4{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hell-3)}
footer ul{margin:0;padding:0;list-style:none;font-size:15px}
footer li{padding:4px 0}
footer a:hover{color:#fff}
.f-neu{margin-top:18px;border-left:2px solid var(--rot);padding-left:14px;font-size:14px;line-height:1.55;max-width:36ch}
.f-neu b{color:#fff}
.f-u{margin-top:40px;padding-top:18px;border-top:1px solid var(--kante);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px;color:var(--hell-3)}

/* ---------- Responsive: eigene Kompositionen ---------- */
@media(max-width:1200px){
  .team{grid-template-columns:repeat(6,minmax(0,1fr))}
  .karriere{grid-column:span 2}
  nav a .k{display:none}
  nav a{padding:10px 10px}
}
@media(max-width:1020px){
  :root{--mark:0px}
  .raster{grid-template-columns:1fr}
  .marke{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--linie);padding:0 0 12px;margin-bottom:26px}
  .dunkel .marke{border-bottom-color:var(--kante)}
  .grau .marke{border-bottom-color:var(--linie-2)}
  .marke .v{writing-mode:horizontal-tb}
  .feld{padding-left:0}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-bild{order:-1;aspect-ratio:3/2}
  .hero-text{padding-left:var(--seite);padding-right:var(--seite)}
  h1{max-width:18ch}
  .kopf,.mx-g,.pf-g,.um-g,.an-g{grid-template-columns:1fr}
  .ob-g{grid-template-columns:1fr}
  .ob-neben{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .s7,.s5{grid-column:span 12}.s4{grid-column:span 6}.s3{grid-column:span 6}
  .tafel .s4:last-of-type{grid-column:span 12}
  .team{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pers.gf{grid-column:span 2;grid-row:span 2}
  .karriere{grid-column:span 4}
  .team-fuss{grid-template-columns:1fr}
  .team-fuss div{border-right:0;padding:16px 0;border-bottom:1px solid var(--linie)}
  .team-fuss div+div{padding-left:0}
  nav{display:none}
  .burger{display:block}
  header .knopf{display:none}
  nav.offen{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:var(--papier);
    border-bottom:1px solid var(--linie);box-shadow:0 20px 40px rgba(0,0,0,.12)}
  nav.offen a{padding:15px var(--seite);border-bottom:1px solid var(--linie);color:var(--tinte)}
  .f-g{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .plankopf .pm:first-child{display:none}
  .notdienst-marke{top:12px;right:12px;padding:9px 12px}
  .abb{max-width:100%;right:0;padding:11px 14px}
  .abb p{display:none}
  .kennband{grid-template-columns:1fr 1fr 1fr}
  .kennband div+div{padding-left:12px}
  .tafel{grid-template-columns:1fr 1fr}
  .s7,.s5,.s4,.s3,.tafel .s4:last-of-type{grid-column:span 2}
  .tafel .s3{grid-column:span 1}
  .tafel .s3 .etikett{padding:10px 12px;max-width:calc(100% - 10px)}
  .tafel .s3 .etikett b{font-size:14px}
  .h-gross,.h-mittel{height:240px}
  .h-klein{height:170px}
  .mx-scroll,.mx-fuss{display:none}
  .register{display:block}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pers.gf{grid-column:span 1;grid-row:span 1}
  .pers.gf figcaption{padding:34px 12px 11px}
  .pers.gf figcaption b{font-size:15px}
  .karriere{grid-column:span 2}
  .pf-z{grid-template-columns:1fr;gap:4px}
  .ob-neben{grid-template-columns:1fr}
  .ob-z{grid-template-columns:36px 1fr;row-gap:8px}
  .ob-z .le{grid-column:2}
  .ob-z .z{grid-column:2;text-align:left}
  .um-bilder{grid-template-columns:1fr}
  .um-fakten{grid-template-columns:1fr}
  .um-fakten div{border-right:0;padding:14px 0;border-bottom:1px solid var(--kante)}
  .um-fakten div+div{padding-left:0}
  .zwei{grid-template-columns:1fr}
  .f-g{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mx .zl.ja svg{opacity:1;transform:none}
}

/* ---------- Karriere ---------- */
.kar-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(26px,4vw,60px);align-items:start}
.kar-bild{margin:0;position:relative;overflow:hidden;background:var(--nebel);aspect-ratio:4/3}
.kar-bild img{width:100%;height:100%;object-fit:cover}
.kar-bild figcaption{position:absolute;left:0;bottom:0;background:var(--papier);padding:9px 14px;color:var(--tinte-3)}
.kar-punkte{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.kar-punkte li{padding:14px 0;border-bottom:1px solid var(--linie);font-size:15.5px;color:var(--tinte-2);line-height:1.55}
.kar-punkte li b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--tinte);margin-bottom:3px}
.stellen{margin-top:clamp(24px,3vw,36px)}
.stelle{display:block;border:1px solid var(--linie);border-bottom:0;padding:14px 18px;transition:background .15s,border-color .15s}
.stelle:last-child{border-bottom:1px solid var(--linie)}
.stelle:hover{background:var(--nebel);border-color:var(--tinte)}
.stelle b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.stelle span{display:block;font-size:13.5px;color:var(--tinte-3);margin-top:3px}
.stelle.initiativ{background:var(--anthrazit);border-color:var(--anthrazit)}
.stelle.initiativ b{color:#fff}
.stelle.initiativ span{color:var(--hell-2)}
.stelle.initiativ:hover{background:var(--anthrazit-2)}

/* ---------- Gut zu wissen ---------- */
.beitraege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--linie-2);
  border:1px solid var(--linie-2)}
.beitrag{background:var(--papier);padding:0;display:flex;flex-direction:column;
  transition:background .15s}
.beitrag:hover{background:var(--nebel)}
/* Bildplatte: die Motive sind freigestellte Produktabbildungen auf Weiss, deshalb
   contain statt cover — sonst wuerde das Produkt angeschnitten. */
.b-bild{display:block;position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;
  border-bottom:1px solid var(--linie)}
.b-bild img{width:100%;height:100%;object-fit:contain;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.beitrag:hover .b-bild img{transform:scale(1.04)}
.b-bild .bu{position:absolute;left:0;bottom:0;max-width:calc(100% - 24px);background:var(--nebel);
  padding:6px 11px;border-top:1px solid var(--linie);border-right:1px solid var(--linie)}
.b-text{padding:18px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.beitrag .datum{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--rot)}
.beitrag b{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.beitrag .an{font-size:14.5px;color:var(--tinte-2);line-height:1.55}
.beitrag .mehr{margin-top:auto;padding-top:12px;font-size:14px;font-weight:700}
@media(max-width:1020px){.kar-g{grid-template-columns:1fr}.beitraege{grid-template-columns:1fr}}