/* TBM Ebner – website stylesheet (design "Hochofen", based on direction A "Abstich").
   Graphite steel blue with molten metal as the only light source. */
:root{
  --graphite:#1a2027; --graphite-2:#222a33; --graphite-3:#2c3640; --line:#3a4653;
  --ash:#ece8e2; --muted:#a3acb6; --ember:#ff7a1a; --ember-dark:#d4600a; --glow:#ffc24a;
  --ink-2:#4e5864; --ash-line:#cfc9bf;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif; --body:"Barlow",system-ui,sans-serif;
  --wrap:min(1240px, 100% - 40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--graphite);color:var(--ash);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
.ico{width:1.25em;height:1.25em;flex:none}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;margin:0;letter-spacing:.005em}
.skip{position:absolute;left:-999px;top:12px}
.skip:focus{left:12px;z-index:99;background:var(--glow);color:#000;padding:8px 12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s, box-shadow .3s}
.top.solid,.legal-page .top{background:rgba(26,32,39,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:76px}
.brand img{height:42px;width:auto}
.main-nav{display:contents}
.nav-links{display:flex;gap:26px;margin:0 0 0 auto;list-style:none;padding:0}
.nav-links a{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--ash);opacity:.85}
.nav-links a:hover{opacity:1;color:var(--glow)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{text-decoration:none;font:600 .8rem var(--body);padding:5px 11px;border-radius:999px;color:var(--muted)}
.lang a:hover{color:var(--ash)}
.lang a[aria-current]{background:var(--ash);color:var(--graphite)}
.burger{all:unset;display:none;cursor:pointer;margin-left:auto;padding:8px}
.burger .ico{width:28px;height:28px}
.burger:focus-visible{outline:2px solid var(--glow)}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font:600 1rem var(--body);text-decoration:none;border-radius:2px;border:1px solid transparent;cursor:pointer}
.btn-hot{background:var(--ember);color:#1a1006}
.btn-hot:hover{background:var(--glow)}
.btn-ghost{border-color:rgba(236,232,226,.4);color:var(--ash)}
.btn-ghost:hover{border-color:var(--ash)}

/* ---------- sections ---------- */
section{padding:clamp(72px,10vw,128px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:end;margin-bottom:56px}
.sec-head h2,.h2big{font-size:clamp(2.8rem,6vw,5rem)}
.sec-head p{color:var(--muted);margin:0;max-width:56ch}

/* ---------- hero with key facts ---------- */
.hero{position:relative;min-height:100svh;background:var(--graphite);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;padding:0;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:-2;transform:scale(1.05);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--graphite) 2%,rgba(26,32,39,.6) 40%,rgba(26,32,39,.25) 70%,rgba(26,32,39,.55))}
@keyframes settle{to{transform:scale(1)}}
.hero .wrap{padding-top:140px}
.hero .hello{color:var(--glow);font-weight:500;font-size:1.1rem;margin:0 0 14px}
.hero h1{font-size:clamp(2.9rem,6.8vw,6.6rem);max-width:14ch;text-wrap:balance;overflow-wrap:break-word}
.hero .claim{font-size:1.2rem;margin:20px 0 30px;opacity:.9}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:56px 0 0;padding:0;border-top:1px solid rgba(236,232,226,.22)}
.fact{padding:22px 22px 30px 0;margin:0}
.fact+.fact{padding-left:22px;border-left:1px solid rgba(236,232,226,.22)}
.fact dt{font:900 clamp(2.6rem,4.4vw,3.8rem)/1 var(--display);color:var(--glow)}
.fact dd{margin:0;color:#cfd5db;font-size:.97rem}

/* ---------- light profile section ---------- */
.light{background:var(--ash);color:var(--graphite)}
.light :focus-visible{outline-color:var(--ember-dark)}
.about-lead{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.5;margin:0}
.prof{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
.prof h2{margin-bottom:28px}
.prof-list{border-top:2px solid var(--graphite)}
.prof-item{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:22px 0;border-bottom:1px solid var(--ash-line)}
.prof-item .ico{width:30px;height:30px;color:var(--ember-dark);grid-row:span 2}
.prof-item h3{font-size:1.7rem;font-weight:700}
.prof-item p{margin:0;color:var(--ink-2)}

/* ---------- services: image stays while the text scrolls ---------- */
#services{background:var(--graphite)}
.stick{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
.stick-media{position:sticky;top:100px;height:calc(100vh - 140px);max-height:720px;display:flex;flex-direction:column;gap:18px}
.stick-frame{position:relative;flex:1;overflow:hidden;background:var(--graphite-2)}
.stick-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.stick-frame img.on{opacity:1}
.stick-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--ember),var(--glow))}
.stick-idx{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.stick-idx a{display:block;text-decoration:none;padding:8px 14px;border:1px solid var(--line);font-weight:500;font-size:.92rem;color:var(--muted)}
.stick-idx a:hover{color:var(--ash)}
.stick-idx a[aria-current]{border-color:var(--ember);color:var(--ash);background:rgba(255,122,26,.12)}
.sblock{min-height:36vh;padding:12px 0 56px;border-bottom:1px solid var(--line)}
.sblock:last-child{border-bottom:0;min-height:auto;padding-bottom:0}
.sblock>.ico{width:40px;height:40px;color:var(--ember)}
.sblock h3{font-size:clamp(2.4rem,4.4vw,3.6rem);margin:16px 0 18px}
.sblock p{max-width:60ch;margin:0 0 14px}
.sblock ul{list-style:none;padding:0;margin:18px 0 0}
.sblock li{padding:10px 0 10px 20px;border-top:1px solid var(--line);position:relative}
.sblock li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.sblock li strong{font-weight:600}
.sblock .after{color:var(--muted);margin-top:16px}
.sblock .m-img{display:none}

/* ---------- label for AI-generated images (EU AI Act transparency) ---------- */
.ai-tag{display:block;width:max-content;font:500 .72rem/1 var(--body);letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(20,25,31,.6);padding:5px 8px;border-radius:3px;pointer-events:none}
.hero-tag{margin:32px 0 -44px auto}
.stick-frame:has(img.on[data-ai])::before{content:attr(data-ai-label);position:absolute;right:10px;bottom:14px;z-index:2;font:500 .72rem/1 var(--body);letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(20,25,31,.6);padding:5px 8px;border-radius:3px}
.m-media{position:relative}
.m-media .ai-tag{display:none;position:absolute;right:8px;bottom:30px}
/* ---------- credentials band ---------- */
.creds .sec-head p{color:var(--ink-2)}
.cred-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:2px solid var(--graphite)}
.cred{padding:28px 24px 4px 0}
.cred+.cred{border-left:1px solid var(--ash-line);padding-left:24px}
.cred .ico{width:32px;height:32px;color:var(--ember-dark)}
.cred h3{font-size:1.7rem;font-weight:700;margin:14px 0 8px;line-height:1.1}
.cred p{margin:0;color:var(--ink-2)}
/* ---------- photo strip ---------- */


/* ---------- history: centred timeline ---------- */
.ctl{position:relative;max-width:1060px;margin:0 auto;padding:0;list-style:none}
.ctl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-1px);background:linear-gradient(var(--glow),var(--ember) 45%,var(--line) 75%)}
.citem{position:relative;width:50%;padding:18px 48px 18px 0;text-align:right}
.citem:nth-child(even){margin-left:50%;padding:18px 0 18px 48px;text-align:left}
.citem::before{content:"";position:absolute;right:-8px;top:30px;width:16px;height:16px;border-radius:50%;background:var(--graphite);border:2px solid var(--ember)}
.citem:nth-child(even)::before{right:auto;left:-8px}
.citem.award::before{background:var(--glow);border-color:var(--glow);box-shadow:0 0 18px var(--ember)}
.citem .yr{font:900 3rem/1 var(--display)}
.citem.career .yr{color:var(--muted);font-weight:700;font-size:2.4rem}
.citem .dt{color:var(--muted);font-size:.9rem;margin:4px 0 6px}
.citem h3{font-size:1.8rem;font-weight:700}
.citem p{color:var(--muted);margin:6px 0 0}
.citem .cert{display:inline-block;margin-top:14px;width:110px;background:#fff;border:1px solid var(--line);vertical-align:top}
.citem .cert:hover{outline:2px solid var(--glow)}
.citem .cert img{width:100%;height:140px;object-fit:cover;object-position:top}
.citem .cert.wide{width:220px}
.citem .cert.wide img{height:auto}

/* ---------- contact ---------- */
#contact{background:var(--graphite-2)}
.cta{border-left:4px solid var(--ember);padding-left:24px;margin-bottom:64px}
.cta h2{font-size:clamp(2.2rem,4.4vw,3.6rem);max-width:18ch}
.cta p{color:var(--muted);max-width:60ch;margin:16px 0 24px}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
.call{display:grid;gap:4px;margin:26px 0 30px}
.call a{display:block;text-decoration:none;font:800 clamp(2rem,4.4vw,3.6rem)/1.05 var(--display);color:var(--ash);overflow-wrap:anywhere}
.call a:hover{color:var(--glow)}
.call small{display:block;color:var(--muted);font:500 .9rem var(--body);margin-top:14px}
.contact-list{list-style:none;padding:0;margin:0 0 36px;display:grid;gap:2px}
.contact-list a,.contact-list div{display:flex;gap:16px;align-items:center;padding:16px 18px;background:var(--graphite);text-decoration:none}
.contact-list a:hover{background:var(--graphite-3)}
.contact-list .ico{color:var(--ember);width:22px;height:22px}
.contact-list small{display:block;color:var(--muted);font-size:.8rem}
.people{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
.person{margin:0}
.person img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(.15)}
.person b{display:block;margin-top:12px;font:700 1.5rem/1.1 var(--display)}
.person span{color:var(--muted);font-size:.92rem}
.contact-intro{font-size:1.2rem;margin:0 0 24px;max-width:52ch}
form{display:grid;gap:16px;background:var(--graphite);padding:32px;border-top:3px solid var(--ember)}
label{display:grid;gap:6px;font-weight:500;font-size:.93rem}
label small{color:var(--muted);font-weight:400}
input,textarea{font:inherit;color:var(--ash);background:var(--graphite-2);border:1px solid var(--line);padding:12px 14px;border-radius:2px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--glow);outline-offset:0;border-color:transparent}
textarea{min-height:150px;resize:vertical}
.form-hint{font-size:.85rem;color:var(--muted);margin:0}
.form-status{font-size:.9rem;margin:0;min-height:1.2em}
.form-status[data-state=err]{color:#ff9d7a}.form-status[data-state=ok]{color:var(--glow)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
footer img{height:34px;width:auto}
footer nav{display:flex;gap:22px}
footer a{color:var(--ash)}

/* ---------- legal pages and 404 ---------- */
.legal-page main{padding:140px 0 96px}
.legal-page .wrap.narrow{width:min(860px,100% - 40px)}
.back{display:inline-flex;gap:8px;align-items:center;color:var(--muted);text-decoration:none;font-weight:500}
.back:hover{color:var(--glow)}
.back .ico{transform:rotate(180deg)}
.legal-body h1{font-size:clamp(2.8rem,7vw,4.6rem);margin:24px 0 10px}
.legal-body h2{font-size:1.7rem;font-weight:700;margin:40px 0 10px;color:var(--glow)}
.legal-body p,.legal-body li{max-width:68ch;color:#d7d3cd}
.legal-body .legal-meta{color:var(--muted)}
.legal-body a{color:var(--ash);text-decoration-color:var(--ember);text-underline-offset:3px}
.legal-body dl{display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:8px 24px;margin:0}
.legal-body dt{color:var(--muted)} .legal-body dd{margin:0}
.notfound p{color:var(--muted);max-width:52ch;margin:18px 0 28px}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .cred-grid{grid-template-columns:1fr 1fr}
  .cred:nth-child(3){border-left:0;padding-left:0}
  .cred:nth-child(n+3){border-top:1px solid var(--ash-line);margin-top:24px}
  .nav-links{position:fixed;inset:76px 0 auto;flex-direction:column;gap:0;background:var(--graphite);padding:8px 20px 20px;border-bottom:1px solid var(--line);display:none}
  .nav-links a{display:block;padding:14px 0;font-size:1.2rem;border-bottom:1px solid var(--line)}
  body.nav-open .nav-links{display:flex}
  body.nav-open .top{background:var(--graphite)}
  .burger{display:block;margin-left:auto}
  .top .wrap{gap:16px}
  .sec-head,.contact-grid,.prof,.stick{grid-template-columns:1fr;gap:28px}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){padding-left:0;border-left:0}
  .fact:nth-child(n+3){border-top:1px solid rgba(236,232,226,.22)}
  .stick-media{display:none}
  .sblock{min-height:auto;padding:32px 0 40px}
  .m-media .ai-tag{display:block}
  .sblock .m-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:22px}
  .ctl::before{left:7px}
  .citem,.citem:nth-child(even){width:auto;margin-left:0;padding:16px 0 16px 38px;text-align:left}
  .citem::before,.citem:nth-child(even)::before{left:0;right:auto}
}
@media (max-width:560px){
  .cred-grid{grid-template-columns:1fr}
  .cred,.cred+.cred{border-left:0;padding:22px 0 20px}
  .cred+.cred{border-top:1px solid var(--ash-line);margin-top:0}
  .people{grid-template-columns:1fr 1fr;gap:12px}
  .brand img{height:34px}
  form{padding:22px}
  .fact{padding:16px 12px 20px 0}.fact+.fact{padding-left:12px}.fact dd{font-size:.88rem}
  .legal-body dl{grid-template-columns:1fr;gap:2px}
  .legal-body dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero>img{transform:none}
}
@media print{
  .top,form,.stick-media,.burger{display:none!important}
  body{background:#fff;color:#000}
  section{padding:24px 0}
}