/* ---------- selbst gehostete Schriften (statt Google Fonts CDN) ---------- */
  @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/big-shoulders-display-latin-600-normal.woff2') format('woff2');}
  @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2');}
  @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}

  /* Farbvariablen (--base, --steel, --ink, usw.) kommen jetzt aus theme.php,
     welches colors.txt ausliest. Diese Datei hier nutzt nur noch var(--...). */

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--base);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--steel);outline-offset:3px;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

  h1,h2,h3{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;text-transform:uppercase;letter-spacing:0.01em;
    line-height:1.02;color:var(--ink);
  }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;font-size:12.5px;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--steel-dark);
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--steel);display:inline-block;}
  .mono{font-family:'IBM Plex Mono', monospace;}

  /* ---------- real photo blocks ---------- */
  .photo{
    position:relative;border:1px solid var(--line);overflow:hidden;background:var(--surface);
  }
  .photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .photo__tag{
    position:absolute;left:0;bottom:0;
    background:rgba(20,32,40,0.82);color:var(--text-on-dark);
    font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:0.04em;
    padding:6px 10px;line-height:1.3;
  }
  .photo__tag b{color:var(--accent-light);font-weight:500;}

  /* ---------- hero banner (rotating images) ---------- */
  .herobanner{position:relative;height:clamp(260px,36vw,400px);overflow:hidden;background:var(--header-bg);}
  .herobanner__slide{
    position:absolute;inset:0;opacity:0;transition:opacity 1s ease;
  }
  .herobanner__slide.is-active{opacity:1;}
  .herobanner__slide img{width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform;}
  @keyframes heroZoomOut{
    from{transform:scale(var(--zoom-start, 1.12));}
    to{transform:scale(1);}
  }
  .herobanner__slide.is-active img{
    animation-name:heroZoomOut;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
  }
  @media (prefers-reduced-motion: reduce){
    .herobanner__slide.is-active img{animation:none;}
  }
  .herobanner__slide::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(20,32,40,0.05) 0%, rgba(20,32,40,0.55) 100%);
  }
  .herobanner__caption{
    position:absolute;left:32px;bottom:22px;color:var(--text-on-dark);
    font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.04em;
    z-index:2;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  }
  .herobanner__cta{
    background:var(--steel);color:#fff;padding:9px 18px;font-family:'IBM Plex Sans',sans-serif;
    font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--steel);
  }
  .herobanner__cta:hover{background:var(--steel-dark);border-color:var(--steel-dark);}
  .herobanner__dots{position:absolute;right:24px;bottom:20px;z-index:2;display:flex;gap:8px;}
  .herobanner__dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,0.7);background:transparent;cursor:pointer;padding:0;}
  .herobanner__dot.is-active{background:#fff;}

  /* ---------- header ---------- */
  .topaccent{position:sticky;top:0;z-index:51;height:3px;background:linear-gradient(90deg, var(--steel) 0%, var(--teal) 50%, var(--steel) 100%);}

  header{
    position:sticky;top:3px;z-index:50;
    background:transparent;
  }
  .nav{
    position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    padding:10px 28px;max-width:var(--maxw);margin:14px auto 0;
    border-radius:14px;
    background:
      linear-gradient(102deg, transparent 58%, rgba(255,255,255,0.05) 60%, rgba(127,196,224,0.16) 61.5%, transparent 64%),
      linear-gradient(135deg, color-mix(in srgb, var(--header-bg), black 12%) 0%, color-mix(in srgb, var(--header-bg), white 8%) 55%, color-mix(in srgb, var(--header-bg), black 15%) 100%);
    box-shadow:0 1px 0 rgba(0,0,0,0.3), 0 10px 28px rgba(0,0,0,0.32);
  }
  .nav::before{
    content:"";position:absolute;inset:0;z-index:0;border-radius:14px;
    background-image:radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.6px);
    background-size:15px 15px;
    background-position:-3px -3px;
    -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 26%, transparent 58%);
    mask-image:linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 26%, transparent 58%);
    pointer-events:none;
  }
  .nav::after{
    content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;z-index:0;
    background:linear-gradient(90deg, transparent, var(--steel) 20%, var(--teal) 50%, var(--steel) 80%, transparent);
  }
  .nav > *{position:relative;z-index:1;}

  /* Galerie-Bild zieht bis ganz nach oben unter die (transparente) Leiste */
  .herobanner{margin-top:-84px;}

  .logo{display:flex;align-items:center;gap:14px;text-decoration:none;position:relative;}
  .logo::before{
    content:"";position:absolute;left:-22px;right:-16px;top:50%;height:70px;transform:translateY(-50%) skewX(-8deg);
    background:radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--steel), transparent 60%) 0%, transparent 72%);
    z-index:0;
  }
  .logo__mark{position:relative;z-index:1;height:50px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.45));}
  .logo__text{
    position:relative;z-index:1;font-family:'IBM Plex Sans',sans-serif;font-weight:500;
    font-size:16px;color:var(--text-on-dark);letter-spacing:0.01em;white-space:nowrap;
  }

  .navlinks{display:flex;gap:30px;list-style:none;}
  .navlinks a{
    text-decoration:none;font-size:12.5px;font-weight:600;color:var(--text-on-dark-muted);
    text-transform:uppercase;letter-spacing:0.06em;
    position:relative;padding-bottom:4px;
  }
  .navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--steel);transition:width .25s ease;}
  .navlinks a:hover{color:var(--text-on-dark);}
  .navlinks a:hover::after{width:100%;}

  /* ---------- hero ---------- */
  .hero{padding:76px 0 64px;}
  .hero__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(40px,5.4vw,64px);margin:18px 0 22px;}
  .hero h1 em{font-style:normal;color:var(--steel);}
  .hero p.lead{font-size:17.5px;color:var(--muted);max-width:460px;margin-bottom:32px;}
  .btnrow{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{display:inline-block;padding:13px 24px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--ink);font-family:'IBM Plex Sans',sans-serif;transition:background .2s ease, color .2s ease, border-color .2s ease;}
  .btn--solid{background:var(--steel-dark);color:#fff;border-color:var(--steel-dark);}
  .btn--solid:hover{background:var(--steel);border-color:var(--steel);}
  .btn--ghost{background:transparent;color:var(--ink);}
  .btn--ghost:hover{background:var(--steel-dark);color:#fff;border-color:var(--steel-dark);}

  /* grain scale — signature element */
  .grainscale{background:var(--surface);border:1px solid var(--line);padding:26px 26px 30px;}
  .grainscale__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
  .grainscale__head h3{font-size:15px;letter-spacing:0.04em;}
  .grainscale__head .mono{font-size:11px;color:var(--muted);}
  .bar{
    position:relative;height:46px;margin-bottom:50px;border:1px solid var(--line);
    background:linear-gradient(90deg,
      #AEC6CF 0%, #AEC6CF 8%,
      #C2D6DC 28%,
      #D5E3E7 50%,
      #E4EDEF 70%,
      #F2F7F8 88%, #FAFCFD 100%);
  }
  .bar::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 6% 40%, rgba(20,32,40,.22) 0 3px, transparent 3px),
      radial-gradient(circle at 14% 70%, rgba(20,32,40,.18) 0 2.4px, transparent 2.4px),
      radial-gradient(circle at 24% 30%, rgba(20,32,40,.16) 0 2px, transparent 2px),
      radial-gradient(circle at 40% 60%, rgba(20,32,40,.12) 0 1.4px, transparent 1.4px),
      radial-gradient(circle at 55% 35%, rgba(20,32,40,.10) 0 1px, transparent 1px),
      radial-gradient(circle at 70% 55%, rgba(20,32,40,.08) 0 .8px, transparent .8px),
      radial-gradient(circle at 85% 40%, rgba(20,32,40,.06) 0 .5px, transparent .5px),
      radial-gradient(circle at 95% 60%, rgba(20,32,40,.05) 0 .4px, transparent .4px);
  }
  .tick{position:absolute;top:100%;padding-top:8px;text-align:center;cursor:default;white-space:nowrap;}
  .tick--mid{transform:translateX(-50%);}
  .tick--first{left:0 !important;transform:translateX(0);text-align:left;}
  .tick--last{transform:translateX(-100%);text-align:right;}
  .tick__mark{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:1px;height:8px;background:var(--ink);}
  .tick--first .tick__mark{left:0;transform:none;}
  .tick--last .tick__mark{left:auto;right:0;transform:none;}
  .tick .mono{font-size:10.5px;display:block;white-space:nowrap;}
  .tick .din{font-size:10px;color:var(--muted);display:block;margin-top:1px;white-space:nowrap;}
  .tick:hover .mono{color:var(--steel-dark);}
  .grainscale__foot{margin-top:0;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);}

  /* ---------- stats strip ---------- */
  .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);}
  .stat{padding:30px 28px;border-left:1px solid var(--line);}
  .stat:first-child{border-left:none;}
  .stat .mono{font-size:32px;color:var(--steel-dark);display:block;font-weight:500;}
  .stat p{font-size:13px;color:var(--muted);margin-top:6px;}

  /* ---------- section shell ---------- */
  section{padding:84px 0;}
  .section__head{max-width:620px;margin-bottom:48px;}
  .section__head h2{font-size:clamp(28px,3.4vw,38px);margin-top:14px;}
  .section__head p{color:var(--muted);margin-top:14px;font-size:15.5px;}

  /* ---------- unternehmen ---------- */
  .unternehmen__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
  .unternehmen__text p{margin-bottom:16px;color:var(--ink);font-size:15.5px;}
  .unternehmen__photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .unternehmen__photos .photo{height:200px;}

  /* ---------- process ---------- */
  .process{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
  .step{padding:26px 24px 0;position:relative;border-left:1px solid var(--line);}
  .step:first-child{border-left:none;}
  .step__num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel-dark);margin-bottom:14px;display:block;}
  .step h3{font-size:18px;text-transform:none;letter-spacing:0;margin-bottom:10px;font-weight:700;}
  .step p{font-size:13.6px;color:var(--muted);}
  .step .photo{height:90px;margin-top:16px;}

  /* ---------- produkte ---------- */
  .showcase{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:36px;}
  .showcase .photo{height:200px;}

  .rohstoffe{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:46px;}
  .rohstoffe .photo{aspect-ratio:1/1;height:auto;}
  .rohstoffe figcaption{font-size:10.5px;color:var(--muted);text-align:center;margin-top:6px;font-family:'IBM Plex Mono',monospace;}

  .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:46px;}
  .prodcard{background:var(--surface);padding:24px 22px;min-height:120px;}
  .prodcard h3{font-size:15px;text-transform:none;letter-spacing:0;font-weight:600;margin-bottom:8px;font-family:'IBM Plex Sans',sans-serif;}
  .prodcard p{font-size:13px;color:var(--muted);}

  .dintable{width:100%;border-collapse:collapse;font-size:13.5px;}
  .dintable caption{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;color:var(--muted);margin-bottom:10px;text-transform:uppercase;}
  .dintable th,.dintable td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);}
  .dintable th{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.04em;color:var(--muted);text-transform:uppercase;font-weight:500;}
  .dintable td.mono{color:var(--ink);}
  .dintable tr:hover td{background:var(--base);}

  /* ---------- leistungen / branchen ---------- */
  .leist__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .leist__photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .leist__photos .photo{height:230px;}
  .chips{display:flex;flex-wrap:wrap;gap:10px;}
  .chip{border:1px solid var(--ink);padding:9px 16px;font-size:13.5px;font-weight:500;}
  .chip:nth-child(odd){border-color:var(--teal);color:var(--teal);}

  /* ---------- kontakt ---------- */
  .kontakt{background:var(--header-bg);color:var(--text-on-dark);}
  .kontakt .eyebrow{color:var(--accent-light);}
  .kontakt .eyebrow::before{background:var(--accent-light);}
  .kontakt .section__head h2{color:var(--text-on-dark);}
  .kontakt .section__head p{color:var(--text-on-dark-muted);}
  .teamgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-bottom:50px;}
  .teamcard{background:var(--header-bg);padding:26px 24px;}
  .teamcard .role{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;color:var(--accent-light);text-transform:uppercase;margin-bottom:10px;display:block;}
  .teamcard h3{font-size:19px;text-transform:none;letter-spacing:0;margin-bottom:8px;font-weight:700;color:var(--text-on-dark);}
  .teamcard p{font-size:13.5px;color:var(--text-on-dark-muted);}
  .kontakt__bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .addr p{font-size:15px;line-height:1.7;margin-bottom:4px;}
  .addr .mono{color:var(--accent-light);font-size:14px;}
  .addr__icon{display:flex;align-items:center;gap:14px;margin-top:18px;}
  .addr__icon img{width:46px;height:auto;border:1px solid var(--line-dark);}
  .kontakt .photo{height:230px;border-color:var(--line-dark);}
  .mapsbox__overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    background:rgba(20,32,40,0.55);text-align:center;padding:0 20px;
  }
  .mapsbox__overlay p{color:var(--text-on-dark);font-size:12px;max-width:260px;margin:0;line-height:1.5;}

  .contactform-wrap{margin-top:50px;max-width:640px;}
  .contactform__title{
    font-family:'Big Shoulders Display', sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:0.02em;font-size:20px;color:var(--text-on-dark);margin-bottom:18px;
  }
  .contactform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .field{margin-bottom:16px;display:flex;flex-direction:column;gap:6px;}
  .field label{font-size:11.5px;color:var(--text-on-dark-muted);font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;text-transform:uppercase;}
  .field input, .field select, .field textarea{
    background:rgba(255,255,255,0.07);border:1px solid var(--line-dark);color:var(--text-on-dark);
    padding:10px 12px;font-family:'IBM Plex Sans',sans-serif;font-size:14px;
  }
  .field input::placeholder, .field textarea::placeholder{color:#7A8C92;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--steel);}
  .field select{cursor:pointer;}
  .field select option{color:#142028;}
  .field textarea{resize:vertical;font-family:inherit;}
  .hp-field{position:absolute;left:-9999px;top:-9999px;}
  .contactform__status{margin-top:14px;font-size:13.5px;min-height:1.2em;}
  .contactform__status.is-ok{color:#7FE0C0;}
  .contactform__status.is-error{color:#FF9B8A;}
  @media (max-width:600px){.contactform__row{grid-template-columns:1fr;}}

  /* ---------- Kontaktformular-Modal ---------- */
  .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
  .modal[hidden]{display:none;}
  .modal__overlay{position:absolute;inset:0;background:rgba(5,7,8,0.78);}
  .modal__panel{
    position:relative;z-index:1;
    background:var(--header-bg);
    border:1px solid var(--line-dark);
    max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:34px 28px 28px;
    box-shadow:0 30px 60px rgba(0,0,0,0.5);
  }
  .modal__close{
    position:absolute;top:10px;right:14px;background:none;border:none;color:var(--text-on-dark-muted);
    font-size:30px;line-height:1;cursor:pointer;padding:4px 8px;
  }
  .modal__close:hover{color:var(--text-on-dark);}
  .modal .contactform-wrap, .modal .contactform__title{margin-top:0;}
  /* Formularfelder im Modal: Beschriftung und Text immer auf dunklem Hintergrund */
  .modal .field label{color:var(--text-on-dark-muted);}
  .modal .field input,
  .modal .field select,
  .modal .field textarea{color:var(--text-on-dark);background:rgba(255,255,255,0.07);border-color:var(--line-dark);}
  .modal .field input:focus,
  .modal .field select:focus,
  .modal .field textarea:focus{border-color:var(--steel);}
  .modal .contactform__title{color:var(--text-on-dark);}
  .modal .contactform__status{color:var(--text-on-dark-muted);}
  .modal .contactform__status.is-ok{color:var(--accent-light);}
  .modal .contactform__status.is-error{color:#FF9B8A;}

  /* ---------- footer ---------- */
  footer{
    padding:30px 0;
    background:
      linear-gradient(102deg, transparent 58%, rgba(255,255,255,0.05) 60%, rgba(127,196,224,0.16) 61.5%, transparent 64%),
      linear-gradient(135deg, color-mix(in srgb, var(--footer-bg), black 12%) 0%, color-mix(in srgb, var(--footer-bg), white 8%) 55%, color-mix(in srgb, var(--footer-bg), black 15%) 100%);
    position:relative;
    overflow:hidden;
  }
  footer::before{
    content:"";position:absolute;inset:0;z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.6px);
    background-size:15px 15px;
    background-position:-3px -3px;
    -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 22%, transparent 50%);
    mask-image:linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 22%, transparent 50%);
    pointer-events:none;
  }
  footer::after{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
    background:linear-gradient(90deg, transparent, var(--steel) 20%, var(--teal) 50%, var(--steel) 80%, transparent);
  }
  footer .wrap{position:relative;z-index:2;}
  .footgrid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
  .footbrand{display:flex;align-items:center;gap:12px;}
  .footbrand img{height:26px;width:auto;border-radius:3px;filter:drop-shadow(0 1px 4px rgba(0,0,0,0.4));}
  .footbrand .mono{font-size:11.5px;color:var(--text-on-dark-muted);letter-spacing:0.03em;}
  .footlinks{display:flex;gap:0;list-style:none;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;}
  .footlinks li{padding:0 16px;border-left:1px solid rgba(255,255,255,0.12);}
  .footlinks li:first-child{border-left:none;padding-left:0;}
  .footlinks a{text-decoration:none;color:var(--text-on-dark-muted);}
  .footlinks a:hover{color:var(--accent-light);}

  /* ---------- responsive ---------- */
  .navtoggle{
    display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:36px;height:36px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
  }
  .navtoggle span{display:block;width:22px;height:2px;background:#fff;transition:transform .25s ease, opacity .25s ease;}
  .navtoggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navtoggle.is-open span:nth-child(2){opacity:0;}
  .navtoggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media (max-width:900px){
    .hero__grid{grid-template-columns:1fr;gap:40px;}
    .unternehmen__grid{grid-template-columns:1fr;}
    .stats__grid{grid-template-columns:repeat(2,1fr);}
    .stat:nth-child(3){border-left:none;}
    .steps{grid-template-columns:repeat(2,1fr);}
    .step:nth-child(3){border-left:none;}
    .step{padding-top:30px;}
    .prodgrid{grid-template-columns:repeat(2,1fr);}
    .teamgrid{grid-template-columns:repeat(2,1fr);}
    .kontakt__bottom{grid-template-columns:1fr;}
    .leist__grid{grid-template-columns:1fr;}
    .rohstoffe{grid-template-columns:repeat(3,1fr);}
    .herobanner{margin-top:-72px;}

    .navtoggle{display:flex;}
    .navlinks{
      display:none;position:absolute;top:100%;left:0;right:0;z-index:5;
      flex-direction:column;gap:0;margin:0;
      background:var(--header-bg);border-top:1px solid var(--line-dark);
      box-shadow:0 12px 24px rgba(0,0,0,0.3);
    }
    .navlinks.is-open{display:flex;}
    .navlinks li{width:100%;}
    .navlinks a{display:block;padding:16px 24px;width:100%;box-sizing:border-box;}
    .navlinks a::after{display:none;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .nav{padding:8px 20px;}
    .logo__mark{height:38px;}
    .logo__text{font-size:13px;}
    .teamgrid{grid-template-columns:1fr;}
    .stats__grid{grid-template-columns:1fr 1fr;}
    .prodgrid{grid-template-columns:1fr;}
    .showcase{grid-template-columns:1fr;}
    .rohstoffe{grid-template-columns:repeat(3,1fr);}
    section{padding:60px 0;}
  }
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{transition:none !important;}}

  /* ---------- legal pages (Impressum / Datenschutz) ---------- */
  .legalhero{padding:64px 0 40px;border-bottom:1px solid var(--line);}
  .legalhero .eyebrow{margin-bottom:14px;}
  .legalhero h1{font-size:clamp(32px,4.4vw,48px);}
  .legal{padding:56px 0 90px;}
  .legal__inner{max-width:760px;}
  .legal h2{
    font-family:'Big Shoulders Display', sans-serif;font-weight:700;text-transform:uppercase;
    font-size:20px;letter-spacing:0.02em;color:var(--ink);margin:42px 0 14px;
    padding-bottom:8px;border-bottom:1px solid var(--line);
  }
  .legal h2:first-child{margin-top:0;}
  .legal p{font-size:15.5px;color:var(--ink);margin-bottom:14px;}
  .legal p.muted{color:var(--muted);font-size:13.5px;}
  .legal ul{margin:0 0 14px 20px;}
  .legal li{font-size:15.5px;color:var(--ink);margin-bottom:6px;}
  .legal a.inline{color:var(--steel-dark);text-decoration:underline;}
  .legal table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14.5px;}
  .legal table td{padding:8px 14px 8px 0;border-bottom:1px solid var(--line);vertical-align:top;}
  .legal table td:first-child{color:var(--muted);width:220px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}
  .noticebox{
    background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--steel);
    padding:16px 20px;margin:0 0 36px;font-size:13.5px;color:var(--muted);
  }
  .noticebox strong{color:var(--ink);}

  .jobgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:28px 0 10px;}
  .jobcard{background:var(--surface);padding:26px 22px;display:flex;flex-direction:column;gap:12px;}
  .jobcard h2{margin:0;border:none;padding:0;font-size:18px;}
  .jobcard p{font-size:14px;color:var(--muted);margin:0;flex-grow:1;}
  .jobcard .btn{align-self:flex-start;}
  @media (max-width:700px){.jobgrid{grid-template-columns:1fr;}}

  /* ---------- Cookie-Hinweisbanner ---------- */
  .cookiebanner{
    position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:linear-gradient(135deg, color-mix(in srgb, var(--footer-bg), black 12%) 0%, color-mix(in srgb, var(--footer-bg), white 8%) 55%, color-mix(in srgb, var(--footer-bg), black 15%) 100%);
    border-top:1px solid var(--line-dark);
    box-shadow:0 -10px 28px rgba(0,0,0,0.3);
    padding:18px 32px;
    transform:translateY(0);
    transition:transform .3s ease, opacity .3s ease;
  }
  .cookiebanner.is-hidden{transform:translateY(100%);opacity:0;}
  .cookiebanner__inner{
    max-width:var(--maxw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  }
  .cookiebanner__text{
    margin:0;font-size:13.5px;line-height:1.6;color:var(--text-on-dark-muted);max-width:760px;flex:1 1 420px;
  }
  .cookiebanner__text a{color:var(--accent-light);text-decoration:underline;}
  .cookiebanner__btn{flex-shrink:0;}
  @media (max-width:600px){
    .cookiebanner{padding:16px 20px;}
    .cookiebanner__inner{flex-direction:column;align-items:stretch;gap:14px;}
    .cookiebanner__btn{width:100%;}
  }