@font-face{font-family:"Montserrat";src:url("montserrat.woff2") format("woff2");font-weight:400 800;font-display:swap}

/* =========================================================
   Markenpaletten (Schattierungen 900 → 50) pro Unternehmen
   ========================================================= */
:root,.b-dez{
  --c900:#07071a;--c700:#0F0F2E;--c500:#00AEEF;--c300:#7fd6f7;--c100:#e5f7fd;--c50:#f3fbfe;
  --acc:#00AEEF;--acc-ink:#fff;--acc-h:#0098d1;--hl:#0090c6;--hl-dark:#00AEEF;
}
/* Gruppenweit einheitliche Farbe (DEZ-Blau), wird von den Unternehmens-Paletten nicht überschrieben */
:root{--grp-hl:#0090c6}
.b-wierig{--c900:#00253f;--c700:#004a7c;--c500:#0064A7;--c300:#6fc0f2;--c100:#e2f1fc;--c50:#f2f8fd;
  --acc:#0064A7;--acc-ink:#fff;--acc-h:#004a7c;--hl:#0064A7;--hl-dark:#4fb3f0}
.b-liquid{--c900:#052a4f;--c700:#0a4f91;--c500:#1080e9;--c300:#27e1f5;--c100:#e2f1fd;--c50:#f1f8fe;
  --acc:#1080e9;--acc-ink:#fff;--acc-h:#0a6cc8;--hl:#0a6cc8;--hl-dark:#27e1f5}
.b-schmidt{--c900:#06203f;--c700:#073a6b;--c500:#09467f;--c300:#5c73a3;--c100:#e6edf6;--c50:#f4f7fb;
  --acc:#ffcd1c;--acc-ink:#09467f;--acc-h:#f2bc00;--hl:#09467f;--hl-dark:#ffcd1c}
.b-jns{--c900:#111;--c700:#232323;--c500:#FE0002;--c300:#ff8a8b;--c100:#ffe5e5;--c50:#f7f7f7;
  --acc:#FE0002;--acc-ink:#fff;--acc-h:#d00002;--hl:#d00002;--hl-dark:#ff4d4f}
.b-tectus{--c900:#121211;--c700:#1d1d1b;--c500:#9bb99e;--c300:#b6dbba;--c100:#e6efe7;--c50:#f3f7f3;
  --acc:#9bb99e;--acc-ink:#1d1d1b;--acc-h:#b6dbba;--hl:#4f7553;--hl-dark:#b6dbba}
.b-solar{--c900:#03011c;--c700:#06032c;--c500:#e8e33f;--c300:#f1ee8c;--c100:#f8f7d4;--c50:#fcfcf0;
  --acc:#e8e33f;--acc-ink:#06032c;--acc-h:#d4d22f;--hl:#06032c;--hl-dark:#e8e33f}
/* kraftwerk energiezukunft: Orange wie im Original-Logo (#F36D21), dazu Anthrazit */
.b-kraftwerk{--c900:#121212;--c700:#232323;--c500:#F36D21;--c300:#f8a877;--c100:#fde6d8;--c50:#fef5ef;
  --acc:#F36D21;--acc-ink:#fff;--acc-h:#d95a12;--hl:#c4520f;--hl-dark:#F36D21}

:root{
  --ink:#14142b;--muted:#5f5e72;--line:#e6e6ee;--bg:#fff;
  --ease:cubic-bezier(.39,.575,.565,1);
  --r:14px;--max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Montserrat",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;opacity:0;transition:opacity .5s var(--ease)}
body.ready{opacity:1}
body.leaving{opacity:0;transition-duration:.3s}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere;hyphens:auto}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:400}
h2 strong{font-weight:700}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
section{padding:80px 0;position:relative}
/* gleicher Hintergrund hintereinander: kein doppelter Abstand */
.tint+.tint,section:not([class])+section:not([class]){padding-top:0}
.tint{background:var(--c50)}
.dark{background:var(--c700);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hl);margin-bottom:16px}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:2px;background:var(--c500)}
.dark .eyebrow,.hero .eyebrow{color:var(--hl-dark)}
.lead{font-size:1.07rem;color:var(--muted)}
.dark .lead{color:rgba(255,255,255,.75)}
.mark{background:linear-gradient(transparent 62%,var(--c300) 62%,var(--c300) 92%,transparent 92%);padding:0 .08em}
.head{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:56px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
@media (max-width:900px){.head,.split{grid-template-columns:minmax(0,1fr);gap:22px}section{padding:60px 0}.head{margin-bottom:40px}}
@media (max-width:600px){.wrap{padding:0 16px}}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-acc{background:var(--acc);color:var(--acc-ink);box-shadow:0 10px 26px -12px var(--c500)}
.btn-acc:hover{background:var(--acc-h);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--c700);border-color:#fff}
.btn-line{border-color:var(--c500);color:var(--hl)}
.btn-line:hover{background:var(--c500);color:var(--acc-ink)}
.btn-dark{background:var(--c700);color:#fff}
.btn-dark:hover{background:var(--c900)}
.btn-block{width:100%}

/* Header */
.hdr{position:fixed;inset:0 0 auto;z-index:60;padding:22px 0;transition:background-color .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease)}
.hdr.solid{background:var(--c700);padding:12px 0;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.nav{display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:#fff;flex:none}
.brand img{height:40px;width:auto}
.brand img.sq{height:52px}
.brand .sep{width:1px;height:30px;background:rgba(255,255,255,.3)}
.brand .grp-of{display:flex;flex-direction:column;gap:5px;line-height:1}
.brand .grp-of small{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.8;white-space:nowrap}
.brand img.grp{height:24px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:#fff;text-decoration:none;font-weight:500;font-size:.92rem;padding:6px 0;position:relative;opacity:.9;white-space:nowrap}
@media (max-width:1320px){.nav ul{gap:18px}.nav ul a{font-size:.86rem}.brand{gap:12px}.brand img.grp{height:20px}}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--c500);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1)}
.nav .btn{padding:11px 22px;font-size:.88rem}
@media (max-width:1020px){.nav ul{display:none}.nav .btn{margin-left:auto}}
@media (max-width:640px){.brand{gap:10px}.brand .grp-of{gap:3px}.brand .grp-of small{font-size:.5rem;letter-spacing:.06em}.brand img.grp{height:15px}.brand img{height:32px}.brand img.sq{height:44px}.nav .btn{padding:10px 16px;font-size:.82rem}}
/* Handy: Logo darf schrumpfen, Button bleibt im Bild; Gruppenzusatz steht im Hero („Alle Unternehmen der Gruppe“) */
@media (max-width:640px){.nav{gap:12px}.brand{flex:0 1 auto;min-width:0}.brand>img{max-width:min(100%,42vw);object-fit:contain;object-position:left center}p,li{overflow-wrap:break-word;hyphens:auto}.nav .btn{flex:none;white-space:nowrap}}
@media (max-width:400px){.nav .btn{padding:9px 13px;font-size:.78rem}}
@media (max-width:520px){.brand .sep,.brand .grp-of{display:none}}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:0;background:var(--c900)}
.hero.short{min-height:66vh}
.hero.short .wrap{padding-bottom:56px}
.hero .wrap>:last-child{margin-bottom:0}
.hero .bg,.hero .slide{position:absolute;inset:0}
.hero .bg img,.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 7s var(--ease)}
.ready .hero .bg img{transform:scale(1)}
.hero .slide{opacity:0;transition:opacity 1.6s var(--ease)}
.hero .slide.on{opacity:1}
.hero .slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,var(--c900) 0%,color-mix(in srgb,var(--c900) 55%,transparent) 40%,transparent 78%),
             linear-gradient(90deg,color-mix(in srgb,var(--c700) 80%,transparent) 0%,transparent 70%)}
.hero .shape{position:absolute;right:-4%;bottom:-20%;width:30%;height:62%;background:linear-gradient(180deg,var(--c500),transparent);opacity:.16;transform:skewX(-28deg);z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:100px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.5rem);font-weight:400;max-width:960px;margin-bottom:22px}
.hero h1 strong{font-weight:700}
.hero p.sub{font-size:1.12rem;max-width:640px;color:rgba(255,255,255,.88);margin-bottom:32px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);font-size:.84rem;font-weight:500;color:#fff;text-decoration:none}
.pill svg{width:16px;height:16px;flex:none;color:var(--hl-dark)}
a.pill{transition:background-color .4s var(--ease)}
a.pill:hover{background:rgba(255,255,255,.25)}
.slide-cap{position:absolute;right:max(32px,calc((100vw - var(--max))/2 + 32px));bottom:104px;z-index:3;display:flex;align-items:center;gap:10px;font-size:.78rem;color:rgba(255,255,255,.8);text-decoration:none}
.slide-cap b{color:#fff;font-weight:600}
.dots{display:flex;gap:6px;margin-left:8px}
.dots i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);transition:background-color .5s,width .5s}
.dots i.on{background:#fff;width:30px}
@media (max-width:700px){.hero .wrap{padding-top:120px;padding-bottom:70px}.slide-cap{left:16px;right:auto;bottom:22px}}

/* Logo-Leiste der Unternehmen (Startseite, überlappt den Hero) */
.cos{position:relative;z-index:5;padding:90px 0 10px}
.cos .eyebrow{margin-bottom:28px}
.co-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}   /* 8 Unternehmen: zwei Reihen à vier */
.co{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);box-shadow:0 22px 50px -26px rgba(10,10,40,.45);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.co:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(10,10,40,.55)}
.co .top{position:relative;height:118px;display:grid;place-items:center;background:var(--c500);overflow:hidden}
.co .top .tile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.co .top::after{content:"";position:absolute;inset:0;background:var(--c700);opacity:.55;transition:opacity .7s var(--ease)}
.co:hover .top .tile{opacity:1;transform:scale(1)}
.co:hover .top::after{opacity:.72}
.co .top .lgo{position:relative;z-index:1;max-width:78%;max-height:46px;width:auto}
.co .top .lgo.sq{max-height:84px}
.co .bot{padding:16px 16px 14px;display:flex;flex-direction:column;flex:1;border-top:3px solid var(--c500)}
.co h3{font-size:.9rem;font-weight:700;line-height:1.3}
.co .spec{font-size:.78rem;color:var(--muted);margin:4px 0 12px;flex:1;line-height:1.45}
.co .n{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--grp-hl)}
.co .n svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.co:hover .n svg{transform:translateX(4px)}
.b-wierig .co-tile,.co.b-wierig .top{background:var(--c500)}
/* Wierig Liquid gehört zur Marke Wierig: Kachel im selben Blau wie Wierig */
.co.b-liquid .top{background:#0064A7}
.co.b-liquid .top::after{background:#004a7c}
.co.b-tectus .top::after{opacity:.0}
.co.b-tectus:hover .top::after{opacity:.35}
.co.b-jns .top,.co.b-solar .top,.co.b-dez .top,.co.b-kraftwerk .top{background:var(--c700)}
/* Helle Kacheln (dez, jns, solar, kraftwerk): hellgrauer Grund mit farbigem Logo; beim Hover helles Bild statt dunkler Abdeckung */
.co.light .top{background:#eceef2}
.co.light .top::after{background:#eceef2;opacity:0}
.co.light:hover .top::after{opacity:.78}
.co-row.grp{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.co-row,.co-row.grp{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.cos{padding-top:60px}.co-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 24px;margin:0 -16px;gap:12px}.co{flex:0 0 66%;scroll-snap-align:start}}

/* Kennzahlen */
/* Spalten so breit wie ihr Inhalt, gleichmäßig verteilt – lange Zahlen wie „1.000.000+ m²“ ragen nicht in die Nachbarspalte */
.stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:30px 48px}
.stat strong{display:block;font-size:clamp(1.6rem,2.9vw,2.6rem);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.stat strong em{font-style:normal;color:var(--hl)}
.dark .stat strong em{color:var(--hl-dark)}
.stat>span{color:var(--muted);font-size:.9rem}
.dark .stat>span{color:rgba(255,255,255,.7)}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:24px 16px}}
@media (max-width:800px){.stats .stat strong{font-size:min(2.6rem,5.8vw)}}

/* Jobsuche */
.finder{background:#fff;border-radius:calc(var(--r) + 6px);box-shadow:0 30px 70px -40px rgba(10,10,40,.35);padding:28px;border:1px solid var(--line)}
.f-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.f-cos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.fco{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-weight:600;font-size:.84rem;color:var(--ink);transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease)}
.fco i{width:24px;height:24px;border-radius:50%;background:var(--c500);display:grid;place-items:center;flex:none}
.fco i::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.fco small{color:var(--muted);font-weight:500}
.fco:hover{border-color:var(--c500)}
.fco.on{background:var(--c700);border-color:var(--c700);color:#fff}
.fco.on small{color:rgba(255,255,255,.7)}
.fco.all i{background:linear-gradient(135deg,#0064A7,#09467f 30%,#FE0002 45%,#9bb99e 60%,#e8e33f 75%,#FF5000)}
.f-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.f-cats{display:flex;flex-wrap:wrap;gap:8px}
.fcat{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.84rem;cursor:pointer;color:var(--ink);transition:all .4s var(--ease)}
.fcat:hover{border-color:var(--ink)}
.fcat.on{background:var(--ink);border-color:var(--ink);color:#fff}
.f-in{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.f-in input,.f-in select{padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.86rem;font-weight:500;color:var(--ink);min-width:0}
.f-in select{appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314142b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/15px;cursor:pointer}
.f-in input:focus,.f-in select:focus{outline:none;border-color:var(--c500)}
@media (max-width:900px){.f-in{margin-left:0;width:100%}.f-in>*{flex:1}}
.count{font-size:.86rem;color:var(--muted);margin:26px 0 12px}

/* Stellenliste */
.jobs{display:grid;gap:12px}
.job{display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:center;padding:18px 22px 18px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.job::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c500);transform:scaleY(0);transition:transform .5s var(--ease)}
.job:hover{border-color:var(--c300);box-shadow:0 20px 40px -28px rgba(10,10,40,.45);transform:translateY(-2px)}
.job:hover::before{transform:scaleY(1)}
.job .lg{width:64px;height:64px;border-radius:12px;background:var(--c500);display:grid;place-items:center;overflow:hidden}
.job .lg img{max-width:80%;max-height:60%;width:auto}
.job .lg img.sq{max-height:84%}
.job.b-jns .lg,.job.b-solar .lg,.job.b-dez .lg,.job.b-kraftwerk .lg{background:var(--c700)}
.job .lg.light{background:#eceef2}   /* wie die hellen Unternehmenskacheln (ViewHelpers.LightTile) */
.job h3{font-size:1.05rem;font-weight:600;margin-bottom:6px}
.job .meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.84rem;color:var(--muted)}
.job .meta span{display:inline-flex;align-items:center;gap:6px}
.job .meta svg{width:15px;height:15px;color:var(--hl);flex:none}
.job .meta b{color:var(--ink);font-weight:600}
.tag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;background:var(--c100);color:var(--hl)}
.job .go{width:44px;height:44px;border-radius:50%;background:var(--c50);color:var(--hl);display:grid;place-items:center;transition:background-color .5s var(--ease),color .5s var(--ease)}
.job .go svg{width:18px;height:18px}
.job:hover .go{background:var(--acc);color:var(--acc-ink)}
.empty{padding:44px 20px;text-align:center;color:var(--muted);background:#fff;border-radius:var(--r);border:1px dashed var(--line)}
@media (max-width:640px){.job{grid-template-columns:48px 1fr;padding:16px}.job .lg{width:48px;height:48px;border-radius:10px}.job .go{display:none}}

/* Bild-Mosaik + Benefits */
.mosaic{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:540px}
.mosaic figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative}
.mosaic figure:first-child{grid-row:1/3}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic figcaption{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:999px;background:rgba(10,10,30,.6);backdrop-filter:blur(6px);color:#fff;font-size:.74rem;font-weight:600}
@media (max-width:900px){.mosaic{height:420px}}
.bens{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.ben{padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);transition:border-color .5s var(--ease),transform .5s var(--ease)}
.ben:hover{border-color:var(--c300);transform:translateY(-3px)}
.ben .ic{width:44px;height:44px;border-radius:12px;background:var(--c100);color:var(--hl);display:grid;place-items:center;margin-bottom:14px}
.ben .ic svg{width:22px;height:22px}
.ben h3{font-size:1rem;font-weight:700;margin-bottom:4px}
.ben p{font-size:.9rem;color:var(--muted)}
@media (max-width:560px){.bens{grid-template-columns:minmax(0,1fr)}}

/* Fakten-Band (Unternehmen) */
.facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;border-radius:var(--r);overflow:hidden;background:var(--c700);color:#fff;position:relative;z-index:5;margin-top:-60px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.facts div{padding:26px 26px 24px;border-left:1px solid rgba(255,255,255,.12)}
.facts div:first-child{border-left:0}
/* Spezialisierung (erstes Feld, längster Text) bekommt mehr Platz */
@media (min-width:901px){.facts.n-3{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr)}.facts.n-2{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.facts b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hl-dark);margin-bottom:6px}
.facts span{display:block;font-size:1.02rem;font-weight:600;line-height:1.35;overflow-wrap:break-word;hyphens:auto}
/* Tablet/Handy: Spezialisierung über die ganze Breite, der Rest zu zweit; eine übrige Zelle ebenfalls ganze Breite. Trennlinien über gap. */
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--c700),#fff 12%)}.facts div{background:var(--c700);border-left:0}.facts div:first-child,.facts div:nth-child(even):last-child{grid-column:1/-1}}
@media (max-width:480px){.facts div{padding:20px 20px 18px}}
@media (max-width:380px){.facts{grid-template-columns:minmax(0,1fr)}}

.about-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;position:relative}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--c500)}

/* Leistungen */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1020px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
.svc{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.svc:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(10,10,40,.45)}
.svc .ph{height:190px;overflow:hidden;position:relative}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc:hover .ph img{transform:scale(1.06)}
.svc .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--c700) 45%,transparent),transparent 60%)}
.svc .tx{padding:22px 22px 24px;border-top:4px solid var(--c500)}
.svc h3{font-size:1.06rem;font-weight:700;margin-bottom:8px}
.svc h3{min-height:2.6em}
.pts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pts li{position:relative;padding-left:28px;font-size:.92rem;color:#3a3a4e;line-height:1.45}
.pts li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--c500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/11px}
.b-schmidt .pts li::before,.b-solar .pts li::before,.b-tectus .pts li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314142b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Arbeitsfelder: Stichpunkte mit kurzer Erklärung (einheitlich) */
.fields{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
/* Keine Lücke bei ungerader Anzahl: drei Felder in einer Reihe, sonst das letzte Feld über die volle Breite */
.fields.n-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fields:not(.n-3)>.field:last-child:nth-child(odd){grid-column:1/-1}
.field{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start;padding:24px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-left:4px solid var(--c500)}
.field .mk{width:30px;height:30px;border-radius:50%;background:var(--c500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/15px}
.b-schmidt .field .mk,.b-solar .field .mk,.b-tectus .field .mk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314142b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.field h3{font-size:1.06rem;font-weight:700;margin:3px 0 6px}
.field p{font-size:.95rem;color:var(--muted)}
@media (max-width:1000px){.fields.n-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fields.n-3>.field:last-child{grid-column:1/-1}}
@media (max-width:760px){.fields,.fields.n-3{grid-template-columns:minmax(0,1fr)}}

/* Einblicke: Diashow (einheitlich für alle Unternehmen) */
.slideshow{position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;aspect-ratio:21/9;background:var(--c700);box-shadow:0 34px 70px -40px rgba(10,10,40,.55)}
.ss-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.ss-slide.on{opacity:1}
.ss-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s var(--ease)}
.ss-slide.on img{transform:scale(1)}
.slideshow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--c500);z-index:2}
.slideshow::before{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;z-index:2;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--c900) 45%,transparent),transparent)}
.ss-dots{position:absolute;right:24px;bottom:26px;z-index:3;display:flex;gap:8px}
.ss-dots button{width:22px;height:4px;border:0;border-radius:2px;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:background-color .5s,width .5s}
.ss-dots button.on{background:#fff;width:40px}
@media (max-width:700px){.slideshow{aspect-ratio:4/3}}


/* Referenzen */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.ref{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.ref img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ref:hover img{transform:scale(1.06)}
.ref::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--c900) 85%,transparent) 0%,transparent 55%)}
.ref div{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff}
.ref b{display:block;font-size:1rem}
.ref span{font-size:.82rem;color:rgba(255,255,255,.8)}

/* Standorte */
.locs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.loc{display:block;padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.loc:hover{border-color:var(--c500);box-shadow:0 18px 36px -26px rgba(10,10,40,.4)}
.loc strong{display:flex;align-items:center;gap:10px;font-size:1.02rem;margin-bottom:4px}
.loc strong svg{width:18px;height:18px;flex:none;margin-right:2px;color:var(--hl)}
.loc small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hl);margin-bottom:4px}
.loc span{display:block;font-size:.88rem;color:var(--muted)}

/* Weitere Unternehmen */
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.other{height:96px;border-radius:var(--r);display:grid;place-items:center;background:var(--c500);text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.other.b-jns,.other.b-solar,.other.b-dez,.other.b-kraftwerk{background:var(--c700)}
.other:hover{transform:translateY(-4px);box-shadow:0 20px 34px -20px rgba(0,0,0,.5)}
.other img{max-height:40px;max-width:72%;width:auto}
.other img.sq{max-height:70px}

/* CTA */
.cta{background:var(--c700);color:#fff;text-align:center;overflow:hidden}
.cta::before{content:"";position:absolute;right:-8%;top:-30%;width:34%;height:160%;transform:skewX(-28deg);background:linear-gradient(180deg,var(--c500),transparent 80%);opacity:.14;pointer-events:none}
.cta .wrap{position:relative}
.cta h2{max-width:780px;margin:0 auto 16px}
.cta p{max-width:600px;margin:0 auto 34px;color:rgba(255,255,255,.8)}
.cta .ctas{justify-content:center}

/* Stellenanzeige */
.jd{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:start}
.jd-main section{padding:0}
.jd-sec{padding:34px 0;border-bottom:1px solid var(--line)}
.jd-sec:first-child{padding-top:0}
.jd-sec:last-child{border-bottom:0}
.jd-sec h2{font-size:1.45rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.jd-sec h2::before{content:"";width:10px;height:26px;border-radius:3px;background:var(--c500);flex:none}
.jd-sec.intro h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400}
.jd-sec.intro h2::before{display:none}
.rich{color:#3a3a4e;font-size:1rem}
.rich p{margin:0 0 12px}
.rich strong{color:var(--ink)}
.rich ul{list-style:none;margin:6px 0 14px;padding:0;display:grid;gap:10px}
.rich li{position:relative;padding-left:34px}
.rich li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--c100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314142b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/12px}
.b-solar .rich li::before{background-color:var(--c300)}
.side{position:sticky;top:100px;display:grid;gap:16px}
.card{border-radius:calc(var(--r) + 4px);background:#fff;border:1px solid var(--line);padding:26px;box-shadow:0 24px 50px -36px rgba(10,10,40,.35)}
.card.apply{background:var(--c700);color:#fff;border:0;position:relative;overflow:hidden}
.card.apply::before{content:"";position:absolute;right:-30%;top:-40%;width:80%;height:120%;background:var(--c500);opacity:.18;transform:skewX(-28deg)}
.card.apply>*{position:relative}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:14px}
.kv{list-style:none;margin:0;padding:0;display:grid;gap:0}
.kv>li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.92rem}
.kv>li:first-child{border-top:0;padding-top:0}
/* Mehrere Standorte: je Standort ein eigener Block */
.kv-locs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.kv-locs li{padding:9px 12px;border-left:3px solid var(--c500);background:var(--c50);border-radius:0 10px 10px 0;line-height:1.35}
.kv-locs strong{display:block;font-weight:700}
.kv-locs span{display:block;font-size:.84rem;color:var(--muted)}
.kv svg{width:20px;height:20px;color:var(--hl)}
.kv b{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.person{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.person .av{width:52px;height:52px;border-radius:50%;background:var(--c500);color:var(--acc-ink);display:grid;place-items:center;font-weight:700;flex:none}
.card.apply .person .av{background:var(--acc)}
.person b{display:block}
.person a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.92rem}
.card.apply p{color:rgba(255,255,255,.78);font-size:.9rem;margin-bottom:18px}
.card .co-mini{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.card .co-mini span{width:58px;height:58px;border-radius:12px;background:var(--c500);display:grid;place-items:center;flex:none}
.card .co-mini span img{max-width:78%;max-height:60%;width:auto}
.card .co-mini span img.sq{max-height:84%}
.b-jns .card .co-mini span,.b-solar .card .co-mini span,.b-dez .card .co-mini span,.b-kraftwerk .card .co-mini span{background:var(--c700)}
.card .co-mini b{font-size:.98rem}
.card .co-mini a{display:block;font-size:.84rem;color:var(--hl);text-decoration:none;font-weight:600}
.share{display:flex;gap:8px;margin-top:12px}
.share button,.share a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;transition:border-color .4s}
.share button:hover,.share a:hover{border-color:var(--c500)}
.share svg{width:16px;height:16px}
.applybar{display:none}
@media (max-width:980px){
  .jd{grid-template-columns:minmax(0,1fr);gap:40px}
  .side{position:static}
  .applybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);gap:12px;align-items:center;transform:translateY(110%);transition:transform .5s var(--ease)}
  .applybar.show{transform:none}
  .applybar span{font-size:.82rem;font-weight:600;flex:1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .applybar .btn{padding:12px 20px}
}

/* Footer */
.foot{background:#08081c;color:rgba(255,255,255,.62);padding:46px 0;font-size:.86rem}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.foot img{height:28px;width:auto}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}

/* Einblenden beim Scrollen (wie AOS auf dachenergiezukunft.de: 800 ms, ease-out-sine) */
[data-aos]{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-aos="up"]{transform:translateY(36px)}
[data-aos="right"]{transform:translateX(-36px)}
[data-aos="left"]{transform:translateX(36px)}
[data-aos].in{opacity:1;transform:none}
@media (max-width:700px){[data-aos="right"],[data-aos="left"]{transform:translateY(28px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,[data-aos]{opacity:1!important;transform:none!important;transition:none!important}
  .hero .bg img,.hero .slide img{transform:none;transition:none}
}
@media (max-width:640px){.btn{white-space:normal;text-align:center}.hero .ctas .btn{width:100%}}

/* =========================================================
   Bewerbungsformular (Felder wie HRworks, Versand per API)
   ========================================================= */
.apply-form fieldset{border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:30px 30px 26px;margin:0 0 20px;background:#fff}
.apply-form legend{display:flex;align-items:center;gap:12px;font-size:1.15rem;font-weight:700;padding:0 10px;margin-left:-10px}
.apply-form legend b{width:30px;height:30px;border-radius:50%;background:var(--c500);color:var(--acc-ink);display:grid;place-items:center;font-size:.85rem}
.b-schmidt .apply-form legend b,.b-solar .apply-form legend b,.b-tectus .apply-form legend b{color:var(--c900)}
.apply-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld.full{grid-column:1/-1}
.fld>span{font-size:.82rem;font-weight:600;color:var(--ink)}
.fld i,.check i,.submit-row i,.apply-form legend i{color:var(--hl);font-style:normal;margin-left:2px}
.apply-form legend i{margin-left:-10px}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:.95rem;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.fld select{appearance:none;padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314142b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 15px center/15px}
.fld textarea{resize:vertical;min-height:120px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--c500);box-shadow:0 0 0 4px color-mix(in srgb,var(--c500) 18%,transparent)}
.fld.invalid input,.fld.invalid select{border-color:#d62839;box-shadow:0 0 0 4px rgba(214,40,57,.12)}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:34px 20px;border:2px dashed var(--c300);border-radius:16px;background:var(--c50);cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.drop:hover,.drop.over{border-color:var(--c500);background:var(--c100)}
.drop.invalid{border-color:#d62839;background:#fff5f6}
/* Standort bei nur einem Standort: fester Wert statt Auswahl */
.fixed-value{display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--c50);font-weight:600}
.fixed-value svg{width:18px;height:18px;flex:none;color:var(--hl)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-ic{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--hl);display:grid;place-items:center;box-shadow:0 8px 20px -12px rgba(10,10,40,.4)}
.drop-ic svg{width:24px;height:24px}
.drop strong{font-size:1rem}
.drop u{color:var(--hl)}
.drop small{color:var(--muted);font-size:.82rem}
.file-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.file-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;font-size:.9rem}
.file-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list li small{color:var(--muted)}
.file-list li button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1;padding:2px 6px}
.file-list li button:hover{color:#d62839}
.hint{font-size:.86rem;color:var(--muted);margin-top:12px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:#3a3a4e;padding:6px 0;cursor:pointer}
.check+.check{margin-top:10px}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--c500);flex:none;cursor:pointer}
.check a{color:var(--hl);font-weight:600}
.check em{color:var(--muted)}
.check.invalid span{color:#d62839}
.form-error{padding:14px 18px;border-radius:12px;background:#fdecee;color:#a31525;font-size:.92rem;margin-bottom:18px}
.submit-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.submit-row small{color:var(--muted);font-size:.84rem}
.apply-form button[disabled]{opacity:.65;pointer-events:none}
/* Ladezustand (site.js: setBusy) – für alle Buttons */
.btn.is-busy,.apply-form button.is-busy{opacity:.9;cursor:progress;pointer-events:none}
.spin{width:1.05em;height:1.05em;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;display:inline-block;flex:none;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:1.6s}}
.apply-status{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.apply-done{text-align:center;padding:50px 20px}
.done-ic{width:84px;height:84px;border-radius:50%;margin:0 auto 26px;display:grid;place-items:center;background:var(--c500);color:var(--acc-ink);box-shadow:0 20px 40px -18px var(--c500)}
.done-ic svg{width:40px;height:40px}
.apply-done h2{margin-bottom:14px}
.apply-done .lead{max-width:520px;margin:0 auto 28px}
.apply-done .hint{margin:-12px auto 26px;max-width:520px}
@media (max-width:640px){.apply-form .grid{grid-template-columns:minmax(0,1fr)}.apply-form fieldset{padding:24px 18px 20px}}
/* Spam-Schutz: für Menschen unsichtbares Feld im Bewerbungsformular */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
