@charset "utf-8";
/* ==========================================================================
   BOLIDE GROUP — Design System
   Augsburg · Abbruch · Beton · Transport
   Palette derived from the corporate mark: #DC0411 / #000000
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Brand */
  --red:          #DC0411;
  --red-400:      #FF3A2C;
  --red-600:      #AE030D;
  --red-700:      #7C0208;
  --red-900:      #3A0104;

  /* Neutrals — warm-shifted blacks read richer than pure #000 */
  --ink:          #0A0A0B;
  --ink-2:        #101013;
  --ink-3:        #17171C;
  --ink-4:        #202027;
  --steel:        #33333D;

  --bone:         #F4F3F1;
  --bone-2:       #E9E7E3;
  --bone-3:       #D9D6D1;

  /* Text */
  --on-dark:      #FFFFFF;
  --on-dark-mute: #A6A6B2;
  --on-light:     #131317;
  --on-light-mute:#55555F;

  /* Lines */
  --line-dark:    rgba(255,255,255,.13);
  --line-light:   rgba(12,12,18,.14);

  /* Type */
  --ff:      'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-cond: 'Barlow Condensed', 'Archivo Narrow', system-ui, sans-serif;

  /* Metrics */
  --shell:   1320px;
  --gut:     clamp(20px, 5vw, 64px);
  --sec:     clamp(72px, 9vw, 132px);
  --radius:  3px;               /* deliberately near-square: industrial, not bubbly */

  --ease:    cubic-bezier(.22,.61,.36,1);
  --nav-h:   76px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--ff);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:900px){ body{ font-size:18px; } }

img,svg,video{ max-width:100%; display:block; }
/* <picture> is inline by default, which collapses any height:100% child. */
picture{ display:block; }
.hero__media picture,.phero__media picture,.post__img picture{ width:100%; height:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; height:1px; background:var(--line-dark); margin:0; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{
  outline:2px solid var(--red-400);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:14px 22px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--gut);
}
.shell--wide{ max-width:1560px; }
.sec{ padding-block:var(--sec); }
.sec--tight{ padding-block:clamp(52px,6vw,84px); }

/* Surfaces */
.bg-ink   { background:var(--ink);   color:var(--on-dark); }
.bg-ink2  { background:var(--ink-2); color:var(--on-dark); }
.bg-bone  { background:var(--bone);  color:var(--on-light); }

/* The signature gradient field: black → deep red → black, on an angle */
.bg-forge{
  position:relative; color:var(--on-dark);
  background:
    radial-gradient(120% 90% at 8% 0%,   rgba(220,4,17,.42) 0%, rgba(220,4,17,0) 58%),
    radial-gradient(100% 80% at 98% 100%,rgba(124,2,8,.55)  0%, rgba(124,2,8,0)  60%),
    linear-gradient(165deg, #121216 0%, #1B0507 42%, #0A0A0B 100%);
}
.bg-ember{
  color:var(--on-dark);
  background:linear-gradient(180deg, var(--ink) 0%, #1A0406 46%, #260609 60%, var(--ink) 100%);
}

/* Angled cut — the "geschnittene Kante". Used sparingly, never twice in a row. */
.cut-top   { clip-path:polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); margin-top:-3.2vw; }
.cut-bottom{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }
.cut-both  { clip-path:polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%); margin-top:-3.2vw; }
@media (max-width:700px){
  .cut-top,.cut-both{ clip-path:polygon(0 5vw,100% 0,100% 100%,0 100%); margin-top:-5vw; }
  .cut-bottom{ clip-path:polygon(0 0,100% 0,100% calc(100% - 5vw),0 100%); }
}

/* Hairline seam with a red core — separates dark sections without a hard edge */
.seam{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(220,4,17,.15) 12%, var(--red) 50%, rgba(220,4,17,.15) 88%, transparent 100%);
  box-shadow:0 0 22px rgba(220,4,17,.45);
}

/* ---------- 4. Type ------------------------------------------------------ */
.eyebrow{
  font-family:var(--ff-cond); font-weight:700; font-size:15px;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--red-400); margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:28px; height:2px; flex:none;
  background:linear-gradient(90deg,var(--red),transparent);
}
.bg-bone .eyebrow{ color:var(--red-600); }

.display{
  overflow-wrap:break-word;
  font-size:clamp(2.45rem, 6.1vw, 5rem);
  line-height:.99; font-weight:800; letter-spacing:-.035em;
  text-transform:uppercase; text-wrap:balance;
}
.h2{
  overflow-wrap:break-word;
  font-size:clamp(1.95rem, 4vw, 3.15rem);
  line-height:1.06; font-weight:800; letter-spacing:-.03em;
  text-transform:uppercase; text-wrap:balance;
}
.h3{
  font-size:clamp(1.3rem, 2.1vw, 1.7rem);
  line-height:1.2; font-weight:700; letter-spacing:-.015em;
}
.h4{ font-size:1.1rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; }

.lead{
  font-size:clamp(1.08rem, 1.55vw, 1.3rem);
  line-height:1.6; color:var(--on-dark-mute); max-width:62ch;
}
.bg-bone .lead{ color:var(--on-light-mute); }

.prose p{ margin-bottom:1.15em; max-width:72ch; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:700; color:var(--on-dark); }
.bg-bone .prose strong{ color:var(--on-light); }
.prose a:not(.btn){
  color:var(--red-400); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.bg-bone .prose a:not(.btn){ color:var(--red-600); }
.prose h2{ font-size:clamp(1.55rem,2.8vw,2.1rem); font-weight:800; letter-spacing:-.025em; margin:2em 0 .6em; line-height:1.15; }
.prose h3{ font-size:clamp(1.2rem,2vw,1.45rem); font-weight:700; margin:1.8em 0 .5em; letter-spacing:-.015em; }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
.prose ul{ margin:0 0 1.15em; max-width:72ch; }
.prose ul li{ position:relative; padding-left:26px; margin-bottom:.5em; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:9px; height:2px; background:var(--red);
}
.prose blockquote{
  margin:1.8em 0; padding:22px 26px;
  border-left:3px solid var(--red);
  background:rgba(255,255,255,.04); font-size:1.05em;
}
.bg-bone .prose blockquote{ background:rgba(12,12,18,.04); }

.mute{ color:var(--on-dark-mute); }
.bg-bone .mute{ color:var(--on-light-mute); }
.small{ font-size:15px; line-height:1.6; }   /* floor: never below 14px */

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:17px 30px; min-height:56px;
  font-weight:700; font-size:16px; letter-spacing:.01em;
  border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  text-align:center;
}
.btn svg{ flex:none; }
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:linear-gradient(135deg,var(--red) 0%, var(--red-600) 100%);
  color:#fff; box-shadow:0 6px 26px rgba(220,4,17,.34);
}
.btn--primary:hover{
  box-shadow:0 10px 36px rgba(220,4,17,.5);
  background:linear-gradient(135deg,var(--red-400) 0%, var(--red) 100%);
}
.btn--ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.28);
}
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.bg-bone .btn--ghost{ color:var(--on-light); border-color:rgba(12,12,18,.25); }
.bg-bone .btn--ghost:hover{ border-color:var(--on-light); background:rgba(12,12,18,.06); }
.btn--solid-dark{ background:var(--ink); color:#fff; }
.btn--solid-dark:hover{ background:var(--ink-3); }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* Text link with a sliding rule */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:16px; color:var(--red-400);
  padding-block:4px;
}
.bg-bone .tlink{ color:var(--red-600); }
.tlink svg{ transition:transform .22s var(--ease); }
.tlink:hover svg{ transform:translateX(5px); }

/* ---------- 6. Top utility bar ------------------------------------------ */
.util{
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
  font-size:14.5px;
}
.util__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:42px;
}
.util__list{ display:flex; align-items:center; gap:26px; color:var(--on-dark-mute); }
.util__list li{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.util__list svg{ color:var(--red); flex:none; }
.util__tel{ color:#fff; font-weight:700; }
.util__tel:hover{ color:var(--red-400); }
@media (max-width:1000px){ .util{ display:none; } }

/* ---------- 7. Navigation ------------------------------------------------ */
.nav{
  /* above the drawer so the close button stays reachable */
  position:sticky; top:0; z-index:96;
  border-bottom:1px solid var(--line-dark);
}
/* Deliberately no backdrop-filter here: it promotes the header to a
   compositing container, which bleeds straight through the mega panel, and
   it costs frames on every scroll. A near-opaque fill reads the same. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(10,10,11,.90);
  transition:background .3s var(--ease);
}
.nav.is-stuck::before{ background:var(--ink); }
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:var(--nav-h);
}
.nav__logo{ display:flex; align-items:center; flex:none; }
.nav__logo img{ height:34px; width:auto; }
@media (min-width:900px){ .nav__logo img{ height:38px; } }

.nav__menu{ display:none; }
@media (min-width:1060px){
  .nav__menu{ display:flex; align-items:center; gap:4px; margin-left:auto; }
}
.nav__link{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 15px; font-weight:600; font-size:16px;
  color:#E6E6EC; border-radius:var(--radius);
  position:relative; transition:color .2s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .26s var(--ease);
}
.nav__link:hover{ color:#fff; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:#fff; }
.nav__link .chev{ transition:transform .25s var(--ease); opacity:.65; }
.nav__item--has:hover .chev{ transform:rotate(180deg); }

.nav__cta{ display:none; }
@media (min-width:1060px){ .nav__cta{ display:inline-flex; margin-left:14px; } }

/* Mega panel */
.nav__item--has{ position:relative; }
.mega{
  position:absolute; top:calc(100% + 1px); left:50%; translate:-50% 0;
  width:min(860px, calc(100vw - 48px));
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  border-top:2px solid var(--red);
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  padding:26px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 26px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item--has:hover .mega,
.nav__item--has:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega__link{
  display:flex; gap:14px; align-items:flex-start;
  padding:13px 14px; border-radius:var(--radius);
  transition:background .2s var(--ease);
}
.mega__link:hover{ background:rgba(255,255,255,.055); }
.mega__ico{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(220,4,17,.9),rgba(124,2,8,.75));
  border-radius:var(--radius); color:#fff;
}
.mega__link > span{ display:block; min-width:0; }
.mega__t{ display:block; font-weight:700; font-size:16px; line-height:1.25; }
.mega__d{ display:block; font-size:14.5px; color:var(--on-dark-mute);
  line-height:1.45; margin-top:3px; }
.mega__foot{
  grid-column:1/-1; margin-top:12px; padding-top:18px;
  border-top:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* Burger */
.burger{
  display:inline-grid; place-items:center; width:48px; height:48px;
  background:transparent; border:1px solid var(--line-dark); border-radius:var(--radius);
  cursor:pointer; margin-left:auto;
}
@media (min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; width:20px; height:2px; background:#fff; position:relative; transition:.25s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:.25s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:95;
  background:var(--ink); overflow-y:auto;
  padding:calc(var(--nav-h) + 20px) var(--gut) 120px;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .35s var(--ease), visibility .35s;
  overscroll-behavior:contain;
}
.drawer.is-open{ transform:translateY(0); visibility:visible; }
@media (min-width:1060px){ .drawer{ display:none; } }
.drawer__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:19px 0; font-size:20px; font-weight:700;
  border-bottom:1px solid var(--line-dark);
}
.drawer__sub{ padding:4px 0 14px; }
.drawer__sub a{
  display:block; padding:13px 0 13px 18px; font-size:16.5px;
  color:var(--on-dark-mute); border-left:2px solid var(--line-dark);
}
.drawer__sub a:hover{ color:#fff; border-left-color:var(--red); }
.drawer__foot{ margin-top:30px; display:grid; gap:12px; }

/* Sticky mobile action bar */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:88;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--ink);
  border-top:1px solid var(--line-dark);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
@media (min-width:1060px){ .actionbar{ display:none; } }
body{ padding-bottom:0; }
@media (max-width:1059px){ body{ padding-bottom:84px; } }
.actionbar .btn{ min-height:52px; padding:14px 16px; font-size:15.5px; }

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,11,.62) 0%,  rgba(10,10,11,0)   16%),
    linear-gradient(0deg,   rgba(10,10,11,.82) 0%,  rgba(10,10,11,.18) 18%, rgba(10,10,11,0) 40%),
    linear-gradient(95deg,  rgba(10,10,11,.90) 0%,  rgba(10,10,11,.78) 32%,
                            rgba(10,10,11,.34) 60%, rgba(10,10,11,.08) 82%,
                            rgba(10,10,11,.30) 100%),
    radial-gradient(65% 55% at 2% 92%, rgba(220,4,17,.30) 0%, rgba(220,4,17,0) 62%);
}
.hero__in{
  position:relative;
  padding-block:clamp(84px, 13vw, 160px) clamp(40px, 6vw, 72px);
  min-height:clamp(560px, 82vh, 860px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero__claim{ max-width:19ch; text-shadow:0 2px 30px rgba(0,0,0,.6); }
.hero__sub{ margin-top:26px; max-width:56ch; text-shadow:0 1px 18px rgba(0,0,0,.75); }
.hero__acts{ margin-top:38px; }
.hero__acts .btn{ min-width:212px; }

/* Phone block inside hero — number always visible, never hidden behind a click */
.hero__tel{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 22px 14px 18px; min-height:56px;
  border:1px solid rgba(255,255,255,.26); border-radius:var(--radius);
  background:rgba(10,10,11,.58);
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.hero__tel:hover{ border-color:#fff; background:rgba(10,10,11,.7); }
.hero__tel .ico{
  width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--red),var(--red-700)); color:#fff;
}
.hero__tel .lbl{
  display:block; font-family:var(--ff-cond); font-weight:700; font-size:13.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute); line-height:1;
}
.hero__tel .num{ display:block; font-weight:800; font-size:19px; letter-spacing:-.01em; margin-top:4px; }

/* On a phone the frame is portrait, so the wash has to run top-to-bottom. */
@media (max-width:860px){
  .hero__media img{ object-position:64% 44%; }
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(10,10,11,.80) 0%,  rgba(10,10,11,.40) 22%,
        rgba(10,10,11,.52) 46%, rgba(10,10,11,.86) 76%,
        rgba(10,10,11,.97) 94%, var(--ink) 100%),
      radial-gradient(95% 45% at 0% 100%, rgba(220,4,17,.26) 0%, rgba(220,4,17,0) 72%);
  }
  .phero__scrim{
    background:
      linear-gradient(180deg,
        rgba(10,10,11,.80) 0%,  rgba(10,10,11,.46) 26%,
        rgba(10,10,11,.66) 58%, rgba(10,10,11,.94) 92%, var(--ink) 100%),
      radial-gradient(95% 50% at 0% 100%, rgba(220,4,17,.24) 0%, rgba(220,4,17,0) 72%);
  }
  .hero__in{ min-height:clamp(520px, 78vh, 700px); }
}

/* Service rail under the hero */
.railbar{
  border-top:1px solid var(--line-dark);
  background:linear-gradient(180deg, rgba(10,10,11,.86), var(--ink));
}
.railbar__in{
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.railbar__in::-webkit-scrollbar{ display:none; }
.railbar a{
  flex:none; padding:19px 24px;
  font-family:var(--ff-cond); font-weight:600; font-size:16px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--on-dark-mute);
  border-right:1px solid var(--line-dark); white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.railbar a:first-child{ border-left:1px solid var(--line-dark); }
.railbar a:hover{ color:#fff; background:rgba(220,4,17,.14); }

/* Page hero (interior pages) */
.phero{ position:relative; isolation:isolate; overflow:hidden; background:var(--ink-2); }
.phero__media{ position:absolute; inset:0; z-index:-2; }
.phero__media img{ width:100%; height:100%; object-fit:cover; }
.phero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,11,.60) 0%, rgba(10,10,11,0)   22%),
    linear-gradient(0deg,   rgba(10,10,11,.80) 0%, rgba(10,10,11,.15) 24%, rgba(10,10,11,0) 52%),
    linear-gradient(95deg,  rgba(10,10,11,.92) 0%, rgba(10,10,11,.80) 38%,
                            rgba(10,10,11,.38) 68%, rgba(10,10,11,.16) 100%),
    radial-gradient(70% 80% at 0% 100%, rgba(220,4,17,.28) 0%, rgba(220,4,17,0) 60%);
}
.phero__in{
  padding-block:clamp(56px,7vw,92px) clamp(52px,6.5vw,88px);
  min-height:clamp(340px,48vh,520px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.phero .display{ font-size:clamp(2.1rem,4.9vw,3.9rem); max-width:22ch; }
.phero__sub{ margin-top:20px; max-width:58ch; }

/* Breadcrumbs */
.crumbs{ font-size:14.5px; color:var(--on-dark-mute); margin-bottom:26px; }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.crumbs li{ display:flex; align-items:center; gap:9px; }
.crumbs li+li::before{ content:"/"; color:rgba(255,255,255,.3); }
.crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current]{ color:#fff; }

/* ---------- 9. Leistungs-Register (signature module) --------------------- */
/* A typographic index, not a card grid. Hover swaps the plate on the right. */
.register{ position:relative; }
.register__grid{ display:grid; gap:0; }
@media (min-width:1000px){
  .register__grid{ grid-template-columns:minmax(0,1fr) 476px;
    gap:0 clamp(36px,4vw,72px); align-items:start; }
}
.register__list{ border-top:1px solid var(--line-dark); }
.reg{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px;
  padding:26px 4px 26px 0;
  border-bottom:1px solid var(--line-dark);
  position:relative; transition:padding-left .3s var(--ease);
}
.reg::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(220,4,17,.22), transparent 70%);
  transition:width .38s var(--ease);
}
.reg:hover::before,.reg:focus-within::before{ width:100%; }
@media (min-width:1000px){ .reg:hover,.reg:focus-within{ padding-left:22px; } }
.reg__t{
  display:block; overflow-wrap:break-word;
  font-size:clamp(1.2rem, 2.6vw, 2.05rem); font-weight:800;
  letter-spacing:-.028em; text-transform:uppercase; line-height:1.03;
  position:relative;
}
.reg__d{ display:block; font-size:15.5px; color:var(--on-dark-mute);
  margin-top:8px; max-width:48ch; position:relative; }
.reg__go{
  width:50px; height:50px; flex:none; border-radius:50%;
  border:1px solid var(--line-dark); display:grid; place-items:center;
  color:#fff; position:relative;
  transition:background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.reg:hover .reg__go{
  background:linear-gradient(140deg,var(--red),var(--red-700));
  border-color:transparent; transform:rotate(-45deg);
}
.reg__thumb{ display:none; }
@media (max-width:999px){
  .reg{ grid-template-columns:86px minmax(0,1fr) auto; gap:16px; }
  .reg__thumb{
    display:block; width:86px; height:66px; flex:none;
    border-radius:var(--radius); overflow:hidden; position:relative;
  }
  .reg__thumb img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(.35) contrast(1.1);
  }
  .reg__go{ width:42px; height:42px; }
}
/* Plate that swaps on hover (desktop) */
.register__plate{
  display:none; position:sticky; top:calc(var(--nav-h) + 40px);
  aspect-ratio:4/5; border:1px solid var(--line-dark); overflow:hidden; border-radius:var(--radius);
  background:var(--ink-2);
}
@media (min-width:1000px){ .register__plate{ display:block; } }
.register__plate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .5s var(--ease), transform .8s var(--ease);
}
.register__plate img.is-on{ opacity:1; transform:scale(1); }
.register__plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,0) 42%, rgba(10,10,11,.55) 100%);
}

/* ---------- 10. Editorial split ----------------------------------------- */
.split{ display:grid; gap:clamp(34px,5vw,74px); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .split--5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .split--flip > *:first-child{ order:2; }
  .split--top{ align-items:start; }
}
.plate{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-dark);
}
.plate picture{ display:block; }
.plate img{ width:100%; height:auto; object-fit:cover; aspect-ratio:4/3; }
.plate--tall img{ aspect-ratio:3/4; }
.plate--wide img{ aspect-ratio:16/9; }
/* red corner accent — a tiny bit of brand geometry */
.plate::after{
  content:""; position:absolute; left:0; bottom:0; width:74px; height:5px;
  background:linear-gradient(90deg,var(--red),var(--red-700));
}

/* ---------- 11. Fact strip ---------------------------------------------- */
.facts{
  display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--line-dark);
  border-block:1px solid var(--line-dark);
}
@media (min-width:640px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.fact{ background:var(--ink); padding:32px clamp(20px,2.4vw,34px); }
.bg-ink2 .fact{ background:var(--ink-2); }
.fact__k{
  font-size:clamp(1.55rem,2.6vw,2.15rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.05; margin-bottom:8px;
}
.fact__k em{ font-style:normal; color:var(--red-400); }
.fact__v{ font-size:15.5px; color:var(--on-dark-mute); line-height:1.5; }

/* ---------- 12. Ablauf (process rail) ----------------------------------- */
.ablauf{ position:relative; display:grid; gap:34px; }
@media (min-width:860px){ .ablauf{ grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.6vw,38px); } }
.step{ position:relative; padding-top:36px; }
.step::before{
  content:""; position:absolute; left:0; top:13px; width:100%; height:2px;
  background:var(--line-dark);
}
.step::after{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px;
  border-radius:50%; background:var(--red);
  box-shadow:0 0 0 5px rgba(220,4,17,.16);
}
.step:last-child::before{ background:linear-gradient(90deg,var(--line-dark) 0%, transparent 100%); }
@media (max-width:859px){
  .ablauf{ padding-left:30px; }
  .step{ padding-top:0; padding-left:0; }
  .step::before{ left:-30px; top:0; width:2px; height:calc(100% + 34px); }
  .step:last-child::before{ background:linear-gradient(180deg,var(--line-dark),transparent); }
  .step::after{ left:-37px; top:5px; }
}
.step__t{ font-size:1.16rem; font-weight:700; margin-bottom:9px; letter-spacing:-.012em; }
.step__d{ font-size:15.5px; color:var(--on-dark-mute); line-height:1.58; }
.bg-bone .step__d{ color:var(--on-light-mute); }
.bg-bone .step::before{ background:var(--line-light); }

/* ---------- 13. Spec table (technical data) ----------------------------- */
.spec{ border-top:1px solid var(--line-dark); font-size:16px; }
.spec div{
  display:grid; grid-template-columns:minmax(0,1fr); gap:2px;
  padding:16px 0; border-bottom:1px solid var(--line-dark);
}
@media (min-width:620px){ .spec div{ grid-template-columns:minmax(180px,34%) minmax(0,1fr);
  gap:20px; align-items:baseline; } }
.spec dt{
  font-family:var(--ff-cond); font-weight:600; font-size:15.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mute);
}
.spec dd{ margin:0; font-weight:600; }
.bg-bone .spec{ border-color:var(--line-light); }
.bg-bone .spec div{ border-color:var(--line-light); }
.bg-bone .spec dt{ color:var(--on-light-mute); }

/* ---------- 14. Checklist ------------------------------------------------ */
.checks{ display:grid; gap:14px; }
@media (min-width:700px){ .checks--2{ grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 34px; } }
.checks li{ display:flex; gap:14px; align-items:flex-start; line-height:1.55; }
.checks .tick{
  flex:none; width:23px; height:23px; margin-top:3px; border-radius:50%;
  background:linear-gradient(140deg,var(--red),var(--red-700));
  display:grid; place-items:center; color:#fff;
}

/* ---------- 15. Projects ------------------------------------------------- */
.projects{ display:grid; gap:clamp(16px,2vw,26px); }
@media (min-width:760px){ .projects{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.proj{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--ink-2); border:1px solid var(--line-dark);
  display:block; min-height:280px;
}
@media (min-width:760px){
  .proj{ grid-column:span 3; }
  .proj--wide{ grid-column:span 4; }
  .proj--narrow{ grid-column:span 2; }
  .proj--full{ grid-column:span 6; }
}
.proj img{
  width:100%; height:100%; position:absolute; inset:0; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:grayscale(.2) contrast(1.05);
}
.proj:hover img{ transform:scale(1.055); filter:grayscale(0) contrast(1.1); }
.proj__body{
  position:relative; z-index:1; padding:clamp(22px,2.6vw,34px);
  min-height:320px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg, rgba(10,10,11,.1) 0%, rgba(10,10,11,.55) 48%, rgba(10,10,11,.94) 100%);
}
@media (min-width:760px){ .proj--wide .proj__body,.proj--full .proj__body{ min-height:400px; } }
.proj__tag{
  display:inline-flex; align-self:flex-start; align-items:center; gap:8px;
  font-family:var(--ff-cond); font-weight:700; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg,var(--red),var(--red-700));
  padding:6px 13px; border-radius:2px; margin-bottom:14px;
}
.proj__t{ font-size:clamp(1.18rem,1.9vw,1.55rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.proj__m{ font-size:15px; color:var(--on-dark-mute); margin-top:9px; }
.proj__m b{ color:#fff; font-weight:600; }

/* Placeholder plate while real project photos are pending */
.proj--todo .proj__body{ background:repeating-linear-gradient(135deg,#131318 0 14px,#17171E 14px 28px); }
.proj--todo{ border-style:dashed; border-color:rgba(255,255,255,.22); }

/* ---------- 16. Trust band + Siegel ------------------------------------- */
.trust{ display:grid; gap:clamp(30px,4vw,56px); align-items:center; }
@media (min-width:920px){ .trust{ grid-template-columns:auto minmax(0,1fr); } }
.trust--solo{ grid-template-columns:minmax(0,1fr)!important; }
.seal{ width:clamp(170px,19vw,212px); height:auto; flex:none; filter:drop-shadow(0 14px 34px rgba(220,4,17,.32)); }
.seal-todo{
  width:clamp(170px,19vw,212px); aspect-ratio:1; flex:none; border-radius:50%;
  border:2px dashed rgba(255,255,255,.3); display:grid; place-items:center;
  text-align:center; padding:26px; font-family:var(--ff-cond); font-weight:600;
  font-size:15px; letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark-mute);
  line-height:1.4;
}
.trust__list{ display:grid; gap:20px; }
@media (min-width:620px){ .trust__list{ grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 38px; } }
.tp{ display:flex; gap:15px; align-items:flex-start; }
.tp__ico{
  flex:none; width:40px; height:40px; border-radius:var(--radius);
  background:rgba(220,4,17,.13); border:1px solid rgba(220,4,17,.34);
  display:grid; place-items:center; color:var(--red-400);
}
.tp__t{ font-weight:700; font-size:16.5px; margin-bottom:4px; }
.tp__d{ font-size:15.5px; color:var(--on-dark-mute); line-height:1.55; }

/* ---------- 17. FAQ ------------------------------------------------------ */
.faq{ border-top:1px solid var(--line-dark); }
.bg-bone .faq{ border-color:var(--line-light); }
.faq details{ border-bottom:1px solid var(--line-dark); }
.bg-bone .faq details{ border-color:var(--line-light); }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 52px 24px 0;
  font-size:clamp(1.03rem,1.45vw,1.2rem); font-weight:700; letter-spacing:-.012em;
  position:relative; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:14px; top:50%; width:13px; height:13px; margin-top:-8px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq summary:hover{ color:var(--red-400); }
.bg-bone .faq summary:hover{ color:var(--red-600); }
.faq__a{ padding:0 8% 26px 0; color:var(--on-dark-mute); line-height:1.66; max-width:78ch; }
.bg-bone .faq__a{ color:var(--on-light-mute); }
.faq__a p+p{ margin-top:.9em; }

/* ---------- 18. Forms ---------------------------------------------------- */
.form{ display:grid; gap:20px; }
.field{ display:grid; gap:8px; }
.field > label{ font-weight:700; font-size:15.5px; letter-spacing:.005em; }
.field .hint{ font-size:14.5px; color:var(--on-dark-mute); }
.bg-bone .field .hint{ color:var(--on-light-mute); }
.req{ color:var(--red-400); }
.bg-bone .req{ color:var(--red-600); }

.input,.select,.textarea{
  width:100%; padding:15px 17px; min-height:56px;
  background:rgba(255,255,255,.05); color:#fff;
  border:1px solid var(--line-dark); border-radius:var(--radius);
  font-size:16.5px; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.textarea{ min-height:142px; resize:vertical; line-height:1.6; }
.input::placeholder,.textarea::placeholder{ color:#6E6E7A; }
.input:hover,.select:hover,.textarea:hover{ border-color:rgba(255,255,255,.3); }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--red); background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(220,4,17,.2);
}
.select{
  appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23DC0411' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 17px center;
}
.select option{ background:var(--ink-2); color:#fff; }

.bg-bone .input,.bg-bone .select,.bg-bone .textarea{
  background:#fff; color:var(--on-light); border-color:var(--line-light);
}
.bg-bone .input::placeholder,.bg-bone .textarea::placeholder{ color:#8A8A94; }

.grid2{ display:grid; gap:20px; }
@media (min-width:640px){ .grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Service chooser — segmented chips instead of a dull dropdown */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip span{
  display:block; padding:11px 17px; min-height:46px; line-height:24px;
  border:1px solid var(--line-dark); border-radius:var(--radius);
  font-size:15.5px; font-weight:600; cursor:pointer;
  transition:.2s var(--ease); user-select:none;
}
.chip input:hover + span{ border-color:rgba(255,255,255,.4); }
.chip input:checked + span{
  background:linear-gradient(135deg,var(--red),var(--red-600));
  border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(220,4,17,.34);
}
.chip input:focus-visible + span{ outline:2px solid var(--red-400); outline-offset:2px; }
.bg-bone .chip span{ border-color:var(--line-light); background:#fff; }

/* File drop */
.drop{
  border:1px dashed rgba(255,255,255,.28); border-radius:var(--radius);
  padding:26px; text-align:center; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.drop:hover,.drop.is-over{ border-color:var(--red); background:rgba(220,4,17,.07); }
.bg-bone .drop{ border-color:rgba(12,12,18,.3); }
.drop input{ display:none; }
.drop__t{ font-weight:700; font-size:16px; }
.drop__d{ font-size:14.5px; color:var(--on-dark-mute); margin-top:6px; }
.bg-bone .drop__d{ color:var(--on-light-mute); }
.drop__files{ margin-top:14px; display:grid; gap:7px; font-size:14.5px; text-align:left; }
.drop__files li{ display:flex; justify-content:space-between; gap:12px; padding:9px 12px; background:rgba(255,255,255,.06); border-radius:2px; }
.bg-bone .drop__files li{ background:rgba(12,12,18,.05); }

/* Consent */
.consent{ display:flex; gap:13px; align-items:flex-start; font-size:15px; line-height:1.55; }
.consent input{ flex:none; width:22px; height:22px; margin-top:2px; accent-color:var(--red); cursor:pointer; }

/* Honeypot */
.hp{ position:absolute!important; left:-9999px; opacity:0; height:0; overflow:hidden; }

.formnote{
  padding:15px 18px; border-radius:var(--radius); font-size:15.5px; line-height:1.55;
  border:1px solid transparent; display:none;
}
.formnote.is-on{ display:block; }
.formnote--ok{ background:rgba(28,160,90,.14); border-color:rgba(28,160,90,.5); color:#8AE9B6; }
.formnote--err{ background:rgba(220,4,17,.14); border-color:rgba(220,4,17,.5); color:#FF9E96; }
.bg-bone .formnote--ok{ color:#0E6B3C; }
.bg-bone .formnote--err{ color:#9C0710; }

/* ---------- 19. Contact cards ------------------------------------------- */
.ccards{ display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--radius); overflow:hidden; }
@media (min-width:700px){ .ccards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ccard{ background:var(--ink-2); padding:30px clamp(20px,2.4vw,30px); display:block; transition:background .24s var(--ease); }
a.ccard:hover{ background:var(--ink-3); }
.ccard__ico{
  width:44px; height:44px; border-radius:var(--radius); margin-bottom:18px;
  background:linear-gradient(140deg,var(--red),var(--red-700));
  display:grid; place-items:center; color:#fff;
}
.ccard__l{
  font-family:var(--ff-cond); font-weight:700; font-size:14.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mute); margin-bottom:7px;
}
.ccard__v{ font-size:clamp(1.05rem,1.5vw,1.22rem); font-weight:700; letter-spacing:-.015em; line-height:1.35; }
.ccard__d{ font-size:14.5px; color:var(--on-dark-mute); margin-top:8px; line-height:1.5; }

/* ---------- 20. Region / Einsatzgebiet ---------------------------------- */
.regions{ display:grid; gap:1px; background:var(--line-dark); }
@media (min-width:600px){ .regions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .regions{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.region{ background:var(--ink); padding:26px 28px; transition:background .22s var(--ease); }
a.region:hover{ background:var(--ink-3); }
.region__t{ font-weight:700; font-size:1.12rem; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.region__t svg{ color:var(--red); opacity:0; transform:translateX(-6px); transition:.25s var(--ease); }
a.region:hover .region__t svg{ opacity:1; transform:translateX(0); }
.region__d{ font-size:15px; color:var(--on-dark-mute); margin-top:8px; line-height:1.5; }

.pills{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{
  padding:9px 15px; border:1px solid var(--line-dark); border-radius:2px;
  font-size:15px; color:var(--on-dark-mute); transition:.2s var(--ease);
}
a.pill:hover{ border-color:var(--red); color:#fff; }
.bg-bone .pill{ border-color:var(--line-light); color:var(--on-light-mute); }

/* Marquee of service areas — slow, subtle, pauses on hover */
.ticker{
  overflow:hidden; border-block:1px solid var(--line-dark);
  background:var(--ink-2); padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__track{ display:flex; gap:0; width:max-content; animation:slide 58s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker span{
  font-family:var(--ff-cond); font-weight:600; font-size:16px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-mute);
  padding-inline:26px; display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
}
.ticker span::after{ content:""; width:5px; height:5px; background:var(--red); border-radius:50%; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 21. Ratgeber cards ------------------------------------------ */
.posts{ display:grid; gap:clamp(20px,2.4vw,30px); }
@media (min-width:700px){ .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .posts--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.post{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--radius);
  overflow:hidden; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.post:hover{ border-color:rgba(220,4,17,.55); transform:translateY(-3px); }
.post__img{ aspect-ratio:16/10; overflow:hidden; background:var(--ink-3); }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); filter:grayscale(.2); }
.post:hover .post__img img{ transform:scale(1.06); filter:grayscale(0); }
.post__body{ padding:24px clamp(20px,2.2vw,28px) 28px; display:flex; flex-direction:column; flex:1; }
.post__k{
  font-family:var(--ff-cond); font-weight:700; font-size:14px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--red-400); margin-bottom:12px;
}
.post__t{ font-size:1.2rem; font-weight:700; line-height:1.28; letter-spacing:-.018em; }
.post__x{ font-size:15.5px; color:var(--on-dark-mute); margin-top:11px; line-height:1.55; flex:1; }
.post__f{ margin-top:18px; font-size:14.5px; color:var(--on-dark-mute); display:flex; gap:10px; align-items:center; }
.bg-bone .post{ background:#fff; border-color:var(--line-light); }
.bg-bone .post__x,.bg-bone .post__f{ color:var(--on-light-mute); }
.bg-bone .post__k{ color:var(--red-600); }

/* ---------- 22. CTA band ------------------------------------------------- */
.ctaband{ position:relative; overflow:hidden; }
.ctaband__in{
  display:grid; gap:clamp(28px,3.6vw,52px); align-items:center;
  padding-block:clamp(56px,7vw,92px);
}
@media (min-width:900px){ .ctaband__in{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
.ctaband .h2{ max-width:17ch; }

/* ---------- 23. Footer --------------------------------------------------- */
.foot{ background:var(--ink); border-top:1px solid var(--line-dark); }
.foot__top{ display:grid; gap:clamp(34px,4vw,54px); padding-block:clamp(52px,6vw,76px); }
@media (min-width:760px){ .foot__top{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .foot__top{
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) minmax(0,1.15fr); } }
.foot__logo img{ height:40px; width:auto; margin-bottom:22px; }
.foot__about{ font-size:15.5px; color:var(--on-dark-mute); line-height:1.65; max-width:40ch; }
.foot__h{
  font-family:var(--ff-cond); font-weight:700; font-size:15px; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.foot__list{ display:grid; gap:11px; font-size:15.5px; }
.foot__list a{ color:var(--on-dark-mute); transition:color .18s var(--ease); }
.foot__list a:hover{ color:#fff; }
.foot__contact{ display:grid; gap:15px; font-size:15.5px; }
.foot__contact div{ display:flex; gap:12px; align-items:flex-start; color:var(--on-dark-mute); }
.foot__contact svg{ color:var(--red); flex:none; margin-top:4px; }
.foot__contact a{ color:#fff; font-weight:600; }
.foot__contact a:hover{ color:var(--red-400); }

.social{ display:flex; gap:10px; margin-top:24px; }
.social a{
  width:44px; height:44px; border-radius:var(--radius); display:grid; place-items:center;
  border:1px solid var(--line-dark); color:var(--on-dark-mute);
  transition:.22s var(--ease);
}
.social a:hover{ border-color:var(--red); color:#fff; background:rgba(220,4,17,.14); }

.foot__bar{
  border-top:1px solid var(--line-dark); padding-block:24px;
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  font-size:14.5px; color:var(--on-dark-mute);
}
.foot__legal{ display:flex; flex-wrap:wrap; gap:14px 24px; }
.foot__legal a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- 24. Utility -------------------------------------------------- */
.stack{ display:grid; gap:clamp(18px,2.2vw,30px); }
.stack--sm{ gap:14px; }
.mt-l{ margin-top:clamp(34px,4.4vw,60px); }
.mt-m{ margin-top:clamp(22px,2.8vw,36px); }
.mt-s{ margin-top:16px; }
.maxw{ max-width:66ch; }
.center{ text-align:center; margin-inline:auto; }
.rel{ position:relative; }

.notice{
  border:1px dashed rgba(220,4,17,.6); background:rgba(220,4,17,.07);
  padding:18px 20px; border-radius:var(--radius); font-size:15.5px; line-height:1.6;
}
.notice b{ color:var(--red-400); }
.bg-bone .notice b{ color:var(--red-600); }

/* ---------- 25. Motion --------------------------------------------------- */
/* Nur verstecken, wenn JS laeuft - sonst bleibt der Text sichtbar. */
.js [data-rise]{ opacity:0; transform:translateY(22px); }
[data-rise].is-in{
  opacity:1; transform:none;
  transition:opacity .68s var(--ease), transform .68s var(--ease);
}
[data-rise][data-d="1"].is-in{ transition-delay:.08s; }
[data-rise][data-d="2"].is-in{ transition-delay:.16s; }
[data-rise][data-d="3"].is-in{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .js [data-rise]{ opacity:1; transform:none; }
  .ticker__track{ animation:none; }
}

/* ---------- 26. Print ---------------------------------------------------- */
@media print{
  .nav,.util,.actionbar,.drawer,.ctaband,.ticker,.railbar{ display:none!important; }
  body{ background:#fff; color:#000; }
  .hero__scrim,.phero__scrim{ display:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}