/* ============================================================
   SEITtec — Webseiten-Entwurf v1
   Visuelles Vokabular: core:form Schwester-Palette (CanControls)
   Petrol-Akzent · Papier/Oat Surface · Bricolage + DM Sans + JetBrains Mono
   ============================================================ */

/* ----- Self-hosted variable fonts (no Google Fonts) ----- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-VF.woff2") format("woff2-variations"),
       url("../fonts/BricolageGrotesque-VF.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-VF.woff2") format("woff2-variations"),
       url("../fonts/DMSans-VF.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-VF.woff2") format("woff2-variations"),
       url("../fonts/DMSans-Italic-VF.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-VF.woff2") format("woff2-variations"),
       url("../fonts/JetBrainsMono-VF.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Brand */
  --accent:           #095873;
  --accent-dark:      #06425A;
  --accent-rgb:       9,88,115;
  --accent-on-dark:   #5BB0CF;
  --accent-on-dark-rgb: 91,176,207;
  --italic-on-dark:   #F1D8A6;

  /* Ink */
  --ink:              #0F1620;
  --ink-rgb:          15,22,32;
  --ink-soft:         #2A3540;
  --mute:             #6B7480;

  /* Light surfaces */
  --paper:            #F4F0E7;
  --paper-rgb:        244,240,231;
  --paper-soft:       #FBF8F2;
  --surface:          #E9E2D2;
  --surface-rgb:      233,226,210;
  --surface-deep:     #DDD5C3;

  /* Dark surfaces */
  --dark:             #0C1218;
  --dark-2:           #11181F;
  --on-dark:          #EFEAE0;
  --on-dark-rgb:      239,234,224;
  --on-dark-mute:     rgba(239,234,224,.66);

  /* Lines */
  --rule:             rgba(15,22,32,.10);
  --rule-soft:        rgba(15,22,32,.06);
  --on-dark-rule:     rgba(239,234,224,.14);
  --on-dark-rule-soft:rgba(239,234,224,.08);

  /* Type */
  --font-body:        "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display:     "Bricolage Grotesque", "DM Sans", sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1:            clamp(40px, 5.8vw, 80px);
  --fs-h2:            clamp(32px, 4.4vw, 56px);
  --fs-h3:            clamp(22px, 2.2vw, 28px);
  --fs-lead:          clamp(20px, 2.1vw, 26px);

  /* Layout */
  --nav-h:            80px;
  --container:        1180px;
  --pad-x:            40px;
  --section-pad:      120px;
  --section-pad-lg:   140px;
}

@media (max-width: 1023px){
  :root{ --pad-x: 28px; --section-pad: 80px; --section-pad-lg: 80px; }
}
@media (max-width: 640px){
  :root{ --pad-x: 20px; --nav-h: 72px; }
}

/* ----- Reset / base ----- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-tap-highlight-color: transparent; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x: clip;          /* belt-and-suspenders against rogue horizontal overflow */
  overflow-wrap: break-word; /* long German compound words can break if they must */
}
/* Flex children carrying text need this to honour the wrap; without it,
   they refuse to shrink below their longest-word width and push out of the row.
   Targeted at the FAQ <summary> blocks on the leistung-* pages. */
details > summary{ min-width: 0; }
details > summary > *{ min-width: 0; }
section[id]{ scroll-margin-top: calc(var(--nav-h) + 24px - var(--section-pad)); }
img{ max-width:100%; display:block; }
::selection{ background:rgba(var(--accent-rgb),.16); color:var(--ink); }

/* Focus */
:focus{ outline:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ----- Typography ----- */
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--ink); text-wrap:balance; }
h1{ font-size:var(--fs-h1); font-weight:300; line-height:1.04; letter-spacing:-0.035em; }
h2{ font-size:var(--fs-h2); font-weight:300; line-height:1.06; letter-spacing:-0.030em; }
h3{ font-size:var(--fs-h3); font-weight:400; line-height:1.18; letter-spacing:-0.020em; }
h4{ font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-0.01em; }
p{ margin:0; }
em{ font-style:italic; color:var(--accent-dark); font-weight:inherit; }
.on-dark em{ color:var(--italic-on-dark); }

.lead{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:var(--fs-lead); line-height:1.45; color:var(--ink-soft); letter-spacing:-0.01em; }
.lead em{ font-style:italic; color:var(--accent-dark); }
.on-dark .lead{ color:var(--on-dark); }
.on-dark .lead em{ color:var(--italic-on-dark); }

.mono{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); }
.mono-tag{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; }
.label-num{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
}
.label-num::before{ content:""; display:inline-block; width:24px; height:1px; background:currentColor; }
.on-dark .label-num{ color:var(--accent-on-dark); }

/* Container */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }

/* Section base */
.section{ padding: var(--section-pad) 0; position:relative; }
.section.on-dark{ background: var(--dark); color: var(--on-dark); }
.section.on-dark h1,
.section.on-dark h2,
.section.on-dark h3,
.section.on-dark h4{ color:var(--on-dark); }
.section.on-surface{ background: var(--surface); }

/* ----- Nav ----- */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:100;
  background:transparent;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled,
.nav.solid{
  background: rgba(11,16,20,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--on-dark-rule);
}
.nav__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.nav__logo{
  font-family:var(--font-display); font-weight:500; font-size:22px;
  letter-spacing:-0.025em; color:var(--on-dark); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
}
.nav__logo-text{
  display: inline-block;
  transform-origin: center center;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.nav__logo:hover .nav__logo-text,
.nav__logo:focus-visible .nav__logo-text{ transform: scale(1.06); }
.nav__logo .dot{ color:var(--accent-on-dark); }
.nav__logo-grid{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.nav__logo-tile{
  display: block;
  width: 100%; height: 100%;
  background: var(--accent-on-dark);
  opacity: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  animation: nav-tile-flicker 1.6s steps(1, end) forwards;
}
.nav__logo-tile--1{ animation-delay: 0.00s; }
.nav__logo-tile--2{ animation-delay: 0.18s; }
.nav__logo-tile--3{ animation-delay: 0.46s; }
.nav__logo-tile--4{ animation-delay: 0.30s; }
@keyframes nav-tile-flicker {
  0%   { opacity: 0; }
  4%   { opacity: 0.95; }
  6%   { opacity: 0; }
  12%  { opacity: 0.8; }
  15%  { opacity: 0.05; }
  22%  { opacity: 1; }
  26%  { opacity: 0.1; }
  34%  { opacity: 0.85; }
  42%  { opacity: 0.2; }
  55%  { opacity: 0.75; }
  68%  { opacity: 0.35; }
  80%  { opacity: 0.65; }
  92%  { opacity: 0.45; }
  100% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce){
  .nav__logo-tile{ animation: none; opacity: 0.55; }
}
.nav__logo-tile--1{ -webkit-mask-image: url(../media/s1.png); mask-image: url(../media/s1.png); }
.nav__logo-tile--2{ -webkit-mask-image: url(../media/s2.png); mask-image: url(../media/s2.png); }
.nav__logo-tile--3{ -webkit-mask-image: url(../media/s3.png); mask-image: url(../media/s3.png); }
.nav__logo-tile--4{ -webkit-mask-image: url(../media/s4.png); mask-image: url(../media/s4.png); }
@media (max-width: 1023px){
  .nav__logo{ gap: 8px; }
  .nav__logo-grid{ width: 30px; height: 30px; }
}
.nav__links{
  display:flex; align-items:center; gap:32px;
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark); text-decoration:none;
  position:relative; padding:6px 0;
  transition: color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1.5px; background:var(--accent-on-dark);
  transition: width .25s ease;
}
.nav__links a:hover,
.nav__links a.is-active{ color:var(--on-dark); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__phone{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.06em; color:var(--on-dark); text-decoration:none;
  border:1px solid rgba(239,234,224,.4); padding:7px 12px;
  transition: border-color .2s ease;
}
.nav__phone svg{ width:14px; height:14px; flex-shrink:0; }
.nav__phone:hover{ border-color:var(--on-dark); }

.nav__burger{
  display:none; background:none; border:0; padding:8px;
  width:40px; height:40px; cursor:pointer;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.nav__burger span{ display:block; width:22px; height:1.5px; background:var(--on-dark); transition: transform .3s ease, opacity .2s ease; }
.nav__burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1023px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__actions{ gap: 6px; }
  .nav__phone{ display: none; }
  .social--nav{ gap: 4px; }
  .social--nav .social__link{ width: 30px; height: 30px; }
  .social--nav .social__link svg{ width: 13px; height: 13px; }
}
/* When the mobile menu is open, hide every icon in the header — they're
   already inside the menu, so the bar only carries logo + close burger. */
body.menu-open .social--nav{ display: none; }

/* When overflow:hidden removes the scrollbar, the fixed header would jump
   rightward and the X would drift away from where the burger sat. Pull just
   the header back by the scrollbar width that disappeared.
   The mobile menu itself stays at right:0 so it covers the full viewport. */
body.menu-open .nav{ right: var(--menu-scrollbar-comp, 0); }

/* Mobile menu */
.nav__mobile{
  position:fixed; inset:0; z-index:99;
  background: rgba(12,18,24,0.72);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) 40px;
  overflow-y:auto;
}
.nav__mobile.open{ transform:translateX(0); }
.nav__mobile-slogan{
  margin: 0 0 24px;
  font-family: var(--font-display); font-weight: 300;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--on-dark);
  text-wrap: balance;
}
.nav__mobile-slogan em{
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  color: var(--italic-on-dark);
}
.nav__mobile ol{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.nav__mobile li{ display:grid; grid-template-columns: 16px 1fr; gap:14px; align-items:center; border-top:1px solid var(--on-dark-rule); padding-top:14px; }
.nav__mobile .idx{
  width: 10px; height: 10px;
  border: 1.5px solid var(--accent-on-dark);
  transition: background .2s ease;
}
.nav__mobile ol a{
  display: block; padding: 4px 0;
  font-family:var(--font-display); font-weight:300; font-size:22px;
  color:var(--on-dark); text-decoration:none; letter-spacing:-0.015em;
  transition: color .2s ease;
}
.nav__mobile ol a:hover,
.nav__mobile ol a:focus-visible,
.nav__mobile ol a.is-active{ color: var(--accent-on-dark); }
.nav__mobile li:has(a.is-active) .idx,
.nav__mobile li:has(a:hover) .idx{ background: var(--accent-on-dark); }
.nav__mobile .actions{ margin-top:24px; display:grid; gap:14px; }

/* ----- Social / contact icon row (reused in mobile menu + footer) ----- */
.social{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 28px; }
.social__link{
  display:inline-flex; align-items:center; justify-content:center;
  width: 42px; height: 42px;
  border: 1px solid var(--on-dark-rule);
  color: var(--on-dark);
  background: transparent;
  text-decoration:none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.social__link:hover,
.social__link:focus-visible{
  background: rgba(var(--accent-on-dark-rgb), .12);
  border-color: var(--accent-on-dark);
  color: var(--accent-on-dark);
}
.social__link svg{ width: 18px; height: 18px; display:block; }

.social--nav{ margin-top: 0; gap: 6px; flex-wrap: nowrap; }
.social--nav .social__link{ width: 32px; height: 32px; border-color: rgba(239,234,224,.4); }
.social--nav .social__link svg{ width: 14px; height: 14px; }

.social--mobile{ flex-wrap: nowrap; gap: 8px; }
.social--mobile .social__link{ width: 36px; height: 36px; }
.social--mobile .social__link svg{ width: 16px; height: 16px; }
/* Wide phone pill inside the mobile menu — keeps the number visible. */
.social--mobile .social__link--phone-text{
  width: auto; padding: 0 12px; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--on-dark);
}
.social--mobile .social__link--phone-text span{ display:inline; }

/* ----- Buttons ----- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:15px 26px;
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:0;
  text-decoration:none; cursor:pointer; line-height:1;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.btn .arrow{ width:16px; height:1.5px; background:currentColor; position:relative; flex-shrink:0; }
.btn .arrow::after{
  content:""; position:absolute; right:-1px; top:50%;
  width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn--accent{ background:var(--accent); color:var(--on-dark); }
.btn--accent:hover{ background:var(--accent-dark); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--on-dark); }
.btn--ghost{ background:transparent; color:var(--on-dark); border-color: rgba(239,234,224,.5); }
.btn--ghost:hover{ background: rgba(239,234,224,.08); border-color: var(--on-dark); }
.btn:disabled,
.btn[aria-disabled="true"]{ opacity:.6; cursor:default; pointer-events:none; }

/* ----- Hero ----- */
.hero{
  position:relative; min-height: 100svh;
  background: var(--dark); color: var(--on-dark); overflow:hidden;
  display:flex; flex-direction:column;
}
.hero__img-wrap{
  position:absolute; inset:0; overflow:hidden;
}
.hero__img{
  position:absolute; top:-20%; left:0; right:0; height:140%;
  width:100%;
  object-fit:cover; object-position:center 35%;
  opacity:0.45;
  filter: saturate(.65) contrast(1.08) brightness(.95);
}
@media (max-width: 1023px){
  .hero__img{ object-position: 68% 40%; }
}
@media (max-width: 640px){
  .hero__img{ object-position: 72% 42%; }
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,18,24,.78) 0%, rgba(12,18,24,.35) 38%, rgba(12,18,24,.20) 62%, rgba(12,18,24,.88) 100%),
    radial-gradient(60% 50% at 85% 18%, rgba(var(--accent-on-dark-rgb),.18), transparent 70%),
    radial-gradient(60% 60% at 8% 92%, rgba(241,216,166,.10), transparent 70%);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(239,234,224,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,234,224,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 50% 50%, black, transparent 90%);
  opacity:.45;
}
.hero__content{
  position:relative; z-index:2;
  flex:1;
  display:flex; align-items:flex-end;
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 80px;
}
.hero__inner{ width:100%; }
.hero__eyebrow{ color:var(--accent-on-dark); margin-bottom:28px; display:inline-flex; align-items:center; gap:10px; }
.hero__eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; }
.hero h1{ color:var(--on-dark); max-width: 18ch; margin-bottom:32px; }
.hero h1 em{ font-family:var(--font-display); font-style:italic; color:var(--italic-on-dark); font-weight:300; }
.hero__lead{
  max-width: 56ch; margin-bottom:40px; color: var(--on-dark);
  hyphens: manual; -webkit-hyphens: manual;
}
.hero__lead em{ color: var(--accent-on-dark); }

/* Hero entrance — flicker on, same temperament as the .nav__logo-tile reveal */
@keyframes hero-flicker {
  0%   { opacity: 0; }
  6%   { opacity: 0.9; }
  9%   { opacity: 0; }
  15%  { opacity: 0.75; }
  19%  { opacity: 0.05; }
  26%  { opacity: 1; }
  31%  { opacity: 0.15; }
  40%  { opacity: 0.85; }
  50%  { opacity: 0.3; }
  62%  { opacity: 0.9; }
  74%  { opacity: 0.55; }
  86%  { opacity: 0.95; }
  94%  { opacity: 0.75; }
  100% { opacity: 1; }
}
.hero__eyebrow,
.hero h1,
.hero__lead,
.hero__sub,
.hero__ctas{
  opacity: 0;
  animation: hero-flicker 0.85s steps(1, end) forwards;
}
.hero__eyebrow{ animation-delay: 0.10s; }
.hero h1       { animation-delay: 0.22s; }
.hero__lead    { animation-delay: 0.42s; }
.hero__sub     { animation-delay: 0.58s; }
.hero__ctas    { animation-delay: 0.72s; }
@media (prefers-reduced-motion: reduce){
  .hero__eyebrow,
  .hero h1,
  .hero__lead,
  .hero__sub,
  .hero__ctas{ animation: none; opacity: 1; }
}
.hero__sub{
  display:flex; gap:24px; flex-wrap:wrap; align-items:center;
  margin-bottom:40px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color: var(--on-dark-mute);
}
.hero__sub span{ display:inline-flex; align-items:center; gap:24px; }
.hero__sub span::after{ content:""; width:4px; height:4px; background: var(--accent-on-dark); border-radius:50%; }
.hero__sub span:last-child::after{ display:none; }
@media (max-width: 1023px){
  .hero__sub{
    display:grid;
    grid-template-columns: auto auto;
    justify-content: start;
    row-gap: 6px;
    column-gap: 24px;
  }
  .hero__sub span:nth-child(2)::after{ display:none; }
}
@media (max-width: 480px){
  .hero__sub{ grid-template-columns: 1fr; }
  .hero__sub span::after{ display:none; }
}
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__side{
  position:absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: right center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:rgba(239,234,224,.4);
  z-index:3;
}
@media (max-width: 1023px){ .hero__side{ display:none; } }

/* Marquee */
.marquee{
  position:relative; z-index:2;
  background: rgba(11,16,20,.65);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--on-dark-rule);
  border-bottom: 1px solid var(--on-dark-rule);
  padding: 18px 0;
  overflow:hidden;
  cursor:grab;
}
.marquee.dragging{ cursor:grabbing; }
.marquee__track{
  display:flex; gap:0;
  width: max-content;
  will-change: transform;
}
.marquee__item{
  display:inline-flex; align-items:center; gap:18px;
  padding: 0 36px;
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size:20px; color:var(--on-dark);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.marquee__item::before{
  content:""; width:8px; height:8px; border:1.5px solid var(--accent-on-dark); flex-shrink:0;
}

/* ----- Intro strip (4 metric tiles) ----- */
.intro-strip{
  padding: 36px 0; border-bottom: 1px solid var(--rule-soft);
  background:var(--paper);
}
.intro-strip__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.intro-strip__cell{
  display:grid; gap:10px;
  padding: 8px 36px 8px 0;
  border-right: 1px solid var(--rule-soft);
}
.intro-strip__cell:last-child{ border-right:none; }
.intro-strip__cell .v{
  font-family:var(--font-display); font-weight:300;
  font-size: clamp(28px, 3.2vw, 40px); line-height:1; letter-spacing:-0.025em;
  color:var(--ink);
}
.intro-strip__cell .v em{ color:var(--accent-dark); font-style:italic; }
@media (max-width: 720px){
  .intro-strip__grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
  .intro-strip__cell{ border-right:none; padding:0; }
}

/* ----- Section head (label + h2 + lead) ----- */
.section__head{
  display:grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items:end;
  margin-bottom: 72px;
}
.section__head .meta{ display:grid; gap:18px; }
.section__head h2 em{ font-style:italic; }
.section__head .lead{ max-width: 52ch; }
@media (max-width: 1023px){
  .section__head{ grid-template-columns: 1fr; gap: 28px; margin-bottom:48px; }
}

/* ----- Manifesto ----- */
.manifesto-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items:start;
}
.manifesto-lede{ display:grid; gap: 48px; }
.manifesto-photo{ margin:0; }
.manifesto-photo img{
  width:100%; height:auto; display:block;
  background: var(--surface);
  filter: saturate(.88) contrast(1.02);
}
.manifesto-grid blockquote{
  margin:0;
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size: clamp(32px, 4vw, 52px); line-height:1.1; letter-spacing:-0.025em;
  color:var(--ink);
  text-wrap:pretty;
}
.manifesto-grid blockquote em{ color:var(--accent-dark); }
.manifesto-grid .body{ display:grid; gap:20px; }
.manifesto-grid .body p{ color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:48ch; }
.stat-strip{
  margin-top:40px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border-top: 1px solid var(--rule);
}
.stat-strip > div{
  padding: 20px 16px 4px 0; border-right: 1px solid var(--rule);
  display:grid; gap:8px;
}
.stat-strip > div:last-child{ border-right:none; }
.stat-strip .v{ font-family:var(--font-display); font-weight:300; font-size:36px; line-height:1; letter-spacing:-0.025em; }
.stat-strip .v em{ font-style:italic; color:var(--accent-dark); }
.stat-strip .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); }
@media (max-width: 1023px){
  .manifesto-grid{ grid-template-columns:1fr; gap:48px; }
}
@media (max-width: 640px){
  .stat-strip{ grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
  .stat-strip > div{ padding: 16px 12px 4px 0; }
  .stat-strip > div:last-child{ padding-right: 0; }
  .stat-strip .v{ font-size: 28px; }
  .stat-strip .k{ font-size: 9px; }
}

/* ----- Leistungen (Tech cards / Bento) ----- */
.bento{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.kurs-card{
  background: var(--paper-soft);
  border: 1px solid var(--rule-soft);
  display:grid; grid-template-rows: auto 1fr;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease;
  text-decoration:none; color:inherit;
  position:relative;
  overflow:hidden;
}
.kurs-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  border-color: rgba(15,22,32,.18);
}
.kurs-card__media{
  position:relative; height:240px; overflow:hidden;
  background: linear-gradient(135deg, #1a232e, #0c1218);
}
.kurs-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  opacity:0.7;
}
.kurs-card:hover .kurs-card__media img{ transform: scale(1.04); }
.kurs-card__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(12,18,24,.6) 100%);
}
.kurs-card__tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background: rgba(11,16,20,.65);
  backdrop-filter: blur(6px);
  border: 1px solid var(--on-dark-rule);
  padding: 7px 11px;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark);
  display:inline-flex; align-items:center; gap:8px;
}
.kurs-card__tag::before{ content:""; width:6px; height:6px; background:var(--accent-on-dark); border-radius:50%; }
.kurs-card__idx{
  position:absolute; top:14px; right:14px; z-index:2;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.18em; color:rgba(239,234,224,.7);
}
.kurs-card__body{
  padding: 26px 26px 28px;
  display:grid; gap:14px;
  align-content:start;
}
.kurs-card__body h3{ letter-spacing:-0.015em; }
.kurs-card__body h3 em{ color:var(--accent-dark); }
.kurs-card__body p{ color:var(--ink-soft); font-size:14px; line-height:1.6; max-width:46ch; }
.kurs-card__more{
  margin-top: 6px;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
}
.kurs-card__more::after{ content:"→"; transition: transform .25s ease; }
.kurs-card:hover .kurs-card__more::after{ transform: translateX(4px); }

/* Feature variant — spans 1 column × 2 rows */
.kurs-card--feature{ grid-column: 1 / 2; grid-row: 1 / 3; }
.kurs-card--feature .kurs-card__media{ height: 340px; }
.kurs-card--feature .kurs-card__body{ padding: 32px; }
.kurs-card--feature h3{ font-size: clamp(26px, 2.6vw, 34px); }
.kurs-card--feature p{ font-size:15px; max-width:38ch; }

@media (max-width: 1023px){
  .bento{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .kurs-card--feature{ grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px){
  .bento{ grid-template-columns: 1fr; }
}

/* ----- Feature banner (dark statement) ----- */
.feature-banner{
  background: var(--dark); color: var(--on-dark);
  padding: var(--section-pad-lg) 0;
  position:relative; overflow:hidden;
  text-align:center;
}
.feature-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 85% 14%, rgba(var(--accent-on-dark-rgb),.16), transparent 70%),
    radial-gradient(50% 60% at 12% 88%, rgba(241,216,166,.08), transparent 70%);
}
.feature-banner__inner{ position:relative; z-index:1; }
.feature-banner blockquote{
  margin:0 auto;
  font-family:var(--font-display); font-weight:300;
  font-size: clamp(32px, 4.4vw, 56px); line-height:1.1; letter-spacing:-0.03em;
  color:var(--on-dark);
  max-width: 24ch;
  text-wrap:balance;
}
.feature-banner blockquote em{ font-style:italic; color:var(--italic-on-dark); }
.feature-banner cite{
  display:block; margin-top:28px;
  font-family:var(--font-mono); font-size:11px; font-style:normal;
  letter-spacing:0.18em; text-transform:uppercase; color:rgba(239,234,224,.6);
}

/* ----- Bereiche / Application tiles ----- */
.areas{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.area{
  position:relative; overflow:hidden;
  background: var(--dark-2); color: var(--on-dark);
  aspect-ratio: 4/5;
  text-decoration:none;
  display:block;
}
.area--large{ grid-column: span 6; aspect-ratio: 8/5; }
.area--med{ grid-column: span 6; aspect-ratio: 8/5; }
.area--third{ grid-column: span 4; }
.area__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  opacity: .58;
  filter: saturate(.7) contrast(1.05);
}
.area:hover .area__bg{ transform: scale(1.04); }
.area::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,18,24,.40) 0%, rgba(12,18,24,.20) 40%, rgba(12,18,24,.88) 100%);
}
.area__inner{
  position:relative; z-index:1; height:100%;
  padding: 22px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.area__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.area__pill{
  background: rgba(11,16,20,.65);
  backdrop-filter: blur(6px);
  border:1px solid var(--on-dark-rule);
  padding: 7px 11px;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.area__pill::before{ content:""; width:6px; height:6px; background: var(--accent-on-dark); border-radius:50%; }
.area__idx{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; color:rgba(239,234,224,.6); }
.area__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.area h3{ color:var(--on-dark); max-width: 14ch; }
.area h3 em{ color:var(--italic-on-dark); font-style:italic; }
.area__chip{
  width:38px; height:38px; background:var(--on-dark); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s ease, transform .25s ease, color .25s ease;
  flex-shrink:0;
}
.area__chip svg{ width:14px; height:14px; }
.area:hover .area__chip{ background:var(--accent-on-dark); color: var(--ink); transform: translate(3px, -3px); }

@media (max-width: 1023px){
  .areas{ grid-template-columns: 1fr 1fr; }
  .area--large, .area--med{ grid-column: span 2; }
  .area--third{ grid-column: span 1; }
}
@media (max-width: 640px){
  .areas{ grid-template-columns: 1fr; }
  .area--large, .area--med, .area--third{ grid-column: span 1; }
}

/* ----- Process / Steps ----- */
.steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.step{
  padding: 0 28px 0 0; border-right: 1px solid var(--rule);
  display:grid; gap:14px; align-content:start;
}
.step + .step{ padding-left: 28px; }
.step:last-child{ border-right:none; }
.step .idx{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--accent);
}
.step h4{ font-family:var(--font-display); font-weight:400; font-size: clamp(20px, 2vw, 26px); letter-spacing:-0.015em; line-height:1.2; }
.step h4 em{ font-style:italic; color:var(--accent-dark); }
.step p{ color:var(--ink-soft); font-size:14px; line-height:1.65; max-width: 34ch; }
@media (max-width: 1023px){
  .steps{ grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .step{ border-right:none; padding: 0 24px 24px 0; border-bottom: 1px solid var(--rule); }
  .step + .step{ padding-left: 0; }
  .step:nth-child(2){ padding-left: 24px; border-left: 1px solid var(--rule); }
  .step:nth-child(3),
  .step:nth-child(4){ border-bottom:none; padding-bottom:0; }
  .step:nth-child(4){ padding-left:24px; border-left:1px solid var(--rule); }
}
@media (max-width: 640px){
  .steps{ grid-template-columns: 1fr; gap: 28px; }
  .step{ border-right:none; border-bottom: 1px solid var(--rule); padding: 0 0 24px 0; }
  .step + .step{ padding-left:0; }
  .step:nth-child(2),
  .step:nth-child(4){ padding-left:0; border-left:none; }
  .step:last-child{ border-bottom:none; padding-bottom:0; }
}

/* ----- Unternehmen / Karte ----- */
.company-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:start;
}
.company-grid .body{ display:grid; gap:20px; }
.company-grid .body p{ color:var(--ink-soft); line-height:1.7; max-width:48ch; }
.pillars{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:24px; }
.pillar{
  border: 1px solid var(--rule); padding: 18px;
  display:grid; gap:8px;
}
.pillar .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); }
.pillar .v{ font-family:var(--font-display); font-weight:400; font-size:18px; letter-spacing:-0.01em; }
.pillar .v em{ font-style:italic; color:var(--accent-dark); }
@media (max-width: 1023px){
  .company-grid{ grid-template-columns:1fr; gap:48px; }
}

/* Map card (Essen) */
.map-card{
  position:relative; aspect-ratio: 5/6;
  background: var(--dark-2); color: var(--on-dark);
  overflow:hidden;
  border: 1px solid var(--on-dark-rule);
}
.map-card__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(var(--accent-on-dark-rgb),.18), transparent 70%),
    radial-gradient(40% 30% at 80% 20%, rgba(241,216,166,.08), transparent 70%),
    linear-gradient(180deg, #0c1218, #11181F);
}
.map-card svg{ position:absolute; inset:0; width:100%; height:100%; }
.map-card__map{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  filter: invert(.92) sepia(.35) hue-rotate(170deg) saturate(1.25) brightness(.95) contrast(1.06);
  opacity: .95;
}
.map-card__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% 50%, transparent 0%, rgba(12,18,24,.18) 80%),
    linear-gradient(180deg, rgba(12,18,24,.04) 0%, rgba(12,18,24,.42) 100%);
}
.map-card__overlay{
  position:absolute; left:50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2;
  display:flex; flex-direction:column; align-items:center; gap: 16px;
  width: calc(100% - 32px); max-width: 360px;
}
.map-card__label{ text-align:center; display:grid; gap:4px; }
.map-card__label .city{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:28px; color:var(--italic-on-dark); letter-spacing:-0.02em; line-height:1.1; }
.map-card__label .meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color: var(--on-dark-mute); }
.map-card__route{
  display:inline-flex; align-items:center; gap:10px;
  padding: 11px 18px;
  background: var(--accent);
  color: var(--on-dark);
  text-decoration:none;
  font-family: var(--font-body); font-size: 11px; font-weight:700;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background .25s ease, transform .2s ease;
}
.map-card__route:hover{ background: var(--accent-dark); transform: translateY(-2px); }
.map-card__route svg{ width:14px; height:14px; }
.map-card__pin{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  z-index: 1; pointer-events:none;
  width:14px; height:14px; border-radius:50%; background:var(--accent-on-dark);
  box-shadow:
    0 0 0 6px rgba(var(--accent-on-dark-rgb),.18),
    0 0 0 12px rgba(var(--accent-on-dark-rgb),.10),
    0 0 0 22px rgba(var(--accent-on-dark-rgb),.05);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100% { box-shadow: 0 0 0 6px rgba(var(--accent-on-dark-rgb),.18), 0 0 0 12px rgba(var(--accent-on-dark-rgb),.10), 0 0 0 22px rgba(var(--accent-on-dark-rgb),.05); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--accent-on-dark-rgb),.24), 0 0 0 16px rgba(var(--accent-on-dark-rgb),.12), 0 0 0 28px rgba(var(--accent-on-dark-rgb),.06); }
}
.map-card__chip{
  position:absolute;
  background: rgba(11,16,20,.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--on-dark-rule);
  padding: 7px 11px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark);
}
.map-card__chip--tl{ top:16px; left:16px; }
.map-card__chip--tr{ top:16px; right:16px; }
.map-card__chip--bl{ bottom:16px; left:16px; }
.map-card__chip--br{
  bottom:16px; right:16px;
  width:42px; height:42px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.map-card__chip--br::before{
  content:"N";
  font-family:var(--font-display); font-style:italic; font-weight:300; font-size:18px; color:var(--accent-on-dark);
}

@media (max-width: 1023px){
  .map-card{ aspect-ratio: 4/3; }
}

/* ----- Testimonial ----- */
.testimonial{
  background: var(--dark); color: var(--on-dark);
  padding: var(--section-pad-lg) 0;
  position:relative; overflow:hidden;
}
.testimonial::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 50% at 12% 30%, rgba(var(--accent-on-dark-rgb),.14), transparent 70%);
}
.testimonial__inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 2fr; gap:64px; }
.testimonial__head{ display:grid; gap:18px; align-content:start; }
.testimonial__head h2{ color:var(--on-dark); font-size: clamp(28px, 3.4vw, 40px); }
.testimonial__head .mono{ color:var(--accent-on-dark); }
.testimonial__quotes{ display:grid; gap: 48px; }
.testimonial__quotes > .testimonial__quote + .testimonial__quote{
  padding-top: 48px; border-top: 1px solid var(--on-dark-rule);
}
.testimonial__quote{
  display:grid; grid-template-columns: 64px 1fr; gap: 24px;
}
.testimonial__quote .q{
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size: 80px; line-height:0.8; color:var(--accent-on-dark);
}
.testimonial__quote blockquote{
  margin:0;
  font-family:var(--font-display); font-weight:300;
  font-size: clamp(22px, 2.4vw, 30px); line-height:1.35; letter-spacing:-0.015em;
  color: var(--on-dark);
  text-wrap:pretty;
}
.testimonial__quote blockquote em{ font-style:italic; color: var(--italic-on-dark); }
.testimonial__quote cite{
  display:block; margin-top:22px;
  font-family:var(--font-mono); font-size:11px; font-style:normal;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-mute);
}
.testimonial__quote cite b{ color:var(--on-dark); font-weight:500; }
@media (max-width: 1023px){
  .testimonial__inner{ grid-template-columns:1fr; gap:40px; }
}

/* ----- Kontakt ----- */
.kontakt{ background: var(--dark); color: var(--on-dark); padding: var(--section-pad-lg) 0; }
.kontakt__grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items:start; }
.kontakt h2{ color: var(--on-dark); }
.kontakt h2 em{ color: var(--italic-on-dark); font-style:italic; }
.kontakt .lead{ color:var(--on-dark); }
.kontakt__ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.info-card{
  background: rgba(239,234,224,.04);
  backdrop-filter: blur(8px);
  border: 1px solid var(--on-dark-rule);
  padding: 36px;
  display:grid; gap:0;
}
.info-card__row{
  display:grid; grid-template-columns: 96px 1fr; gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--on-dark-rule);
  align-items:baseline;
}
.info-card__row:first-child{ padding-top:0; }
.info-card__row:last-child{ border-bottom:none; padding-bottom:0; }
.info-card__row .k{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-on-dark);
}
.info-card__row .v{
  font-family:var(--font-display); font-weight:300; font-size: 20px;
  letter-spacing:-0.01em; color:var(--on-dark);
}
.info-card__row .v a{ color: inherit; text-decoration:none; border-bottom: 1px solid var(--on-dark-rule); padding-bottom: 2px; }
.info-card__row .v a:hover{ border-color: var(--accent-on-dark); color:var(--accent-on-dark); }
@media (max-width: 1023px){
  .kontakt__grid{ grid-template-columns:1fr; gap:48px; }
  .info-card{ padding: 28px; }
}

/* ----- Form ----- */
.form{ display:grid; gap:20px; max-width:520px; }
.form .row{ display:grid; gap:8px; }
.form label{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--mute);
}
.on-dark .form label{ color:var(--on-dark-mute); }
.form input,
.form textarea,
.form select{
  width: 100%; min-width: 0; max-width: 100%;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background: var(--paper-soft);
  border: 1.5px solid var(--rule); border-radius:0;
  padding: 13px 16px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.on-dark .form input,
.on-dark .form textarea,
.on-dark .form select{
  background: rgba(239,234,224,.04);
  color: var(--on-dark);
  border-color: var(--on-dark-rule);
}
.form input:focus,
.form textarea:focus,
.form select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.10);
}
.on-dark .form input:focus,
.on-dark .form textarea:focus,
.on-dark .form select:focus{
  border-color: var(--accent-on-dark);
  box-shadow: 0 0 0 3px rgba(var(--accent-on-dark-rgb),.18);
}
.form textarea{ min-height: 120px; resize: vertical; }
.form .hint{ font-family:var(--font-body); font-size: 12px; color:var(--mute); }
.on-dark .form .hint{ color:var(--on-dark-mute); }
.form .submit-row{ display:flex; gap:14px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.form .check{ display:flex; gap:10px; align-items:flex-start; font-size: 12px; color: var(--ink-soft); line-height:1.5; max-width:50ch; }
.on-dark .form .check{ color:var(--on-dark-mute); }
.form .check input{ width:16px; height:16px; margin-top:2px; flex-shrink:0; }

/* ----- Footer ----- */
.footer{
  background: var(--accent-dark); color: var(--on-dark);
  padding: 80px 0 32px;
}
.footer__top{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--on-dark-rule);
}
.footer__brand{ display:grid; gap:20px; max-width:32ch; }
.footer__brand .logo{
  font-family:var(--font-display); font-weight:500; font-size:24px;
  letter-spacing:-0.025em; color:var(--on-dark);
  display:inline-flex; align-items:baseline;
}
.footer__brand .logo .dot{ color:var(--accent-on-dark); }
.footer__brand p{ color:var(--on-dark-mute); font-size:14px; line-height:1.6; }
.footer__col h5{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color: var(--accent-on-dark);
  margin:0 0 18px;
}
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer__col a{
  color: var(--on-dark); text-decoration:none; font-size:14px;
  transition: color .2s ease;
}
.footer__col a:hover{ color: var(--accent-on-dark); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-top: 24px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--on-dark-mute);
}
.footer__bottom a{ color:var(--on-dark-mute); text-decoration:none; }
.footer__bottom a:hover{ color:var(--on-dark); }
.footer__bottom .legal{ display:flex; gap:24px; flex-wrap:wrap; }
@media (max-width: 1023px){
  .footer__top{ grid-template-columns: 1fr 1fr; gap:32px; }
}
@media (max-width: 640px){
  .footer__top{ grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer__brand{ grid-column: 1 / -1; max-width: none; }
}

/* ----- Skip link ----- */
.skip-link{
  position:absolute; top:-100px; left: var(--pad-x);
  background: var(--accent); color: var(--on-dark);
  padding: 12px 18px; z-index:1000;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus-visible{ top: 12px; }

/* ----- Subpage hero (smaller, solid nav) ----- */
.subpage-hero{
  background: var(--dark); color: var(--on-dark);
  padding: calc(var(--nav-h) + 80px) 0 80px;
  position:relative; overflow:hidden;
}
.subpage-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(var(--accent-on-dark-rgb),.16), transparent 70%);
}
.subpage-hero__inner{ position:relative; z-index:1; }
.subpage-hero h1{ color:var(--on-dark); max-width:18ch; margin-top:18px; margin-bottom: 20px; }
.subpage-hero h1 em{ color:var(--italic-on-dark); font-style:italic; }
.subpage-hero .lead{ max-width: 56ch; color:var(--on-dark); }
.subpage-hero__ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* Breadcrumb */
.crumb{
  display:flex; gap:8px; align-items:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--on-dark-mute); margin-bottom:6px;
}
.crumb a{ color: var(--on-dark-mute); text-decoration:none; }
.crumb a:hover{ color:var(--on-dark); }
.crumb .sep{ color:rgba(239,234,224,.3); }

/* USP grid (used on Sicherheitstechnik subpage) */
.usp-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.usp{
  background: var(--paper);
  padding: 32px 28px;
  display:grid; gap:14px; align-content:start;
}
.usp .idx{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.usp h4{ font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:-0.015em; }
.usp h4 em{ font-style:italic; color:var(--accent-dark); }
.usp p{ color:var(--ink-soft); font-size:14px; line-height:1.6; }
@media (max-width: 1023px){ .usp-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .usp-grid{ grid-template-columns: 1fr; } }

/* Check list */
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.check-list li{
  display:grid; grid-template-columns: 24px 1fr; gap: 14px;
  font-size: 15px; line-height:1.6; color: var(--ink-soft);
}
.check-list li::before{
  content:""; width: 18px; height: 18px;
  background:
    linear-gradient(45deg, transparent 0 7px, var(--accent) 7px 9px, transparent 9px 12px),
    linear-gradient(-45deg, transparent 0 4px, var(--accent) 4px 6px, transparent 6px 12px);
  margin-top: 4px;
}
.check-list li strong{ color: var(--ink); font-weight:500; }

/* Two-col split */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:start; }
.split .body p{ color:var(--ink-soft); line-height:1.7; margin-bottom: 16px; max-width:48ch; }
.split .body p:last-child{ margin-bottom:0; }
@media (max-width: 1023px){ .split{ grid-template-columns:1fr; gap:48px; } }

/* Subpage CTA — text on left, button stack on right (collapses on mobile) */
.next-step{
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end;
}
.next-step > div:last-child{ display: grid; gap: 12px; }
@media (max-width: 1023px){
  .next-step{ grid-template-columns: 1fr; gap: 32px; align-items: stretch; }
  .next-step > div:last-child{ justify-items: start; }
}

/* Article (legal pages) */
.article{
  padding: calc(var(--nav-h) + 64px) 0 var(--section-pad);
}
.article__inner{ max-width: 760px; }
.article h1{ font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 12px; }
.article .updated{ color:var(--mute); margin-bottom:48px; }
.article h2{ font-size: clamp(22px, 2.2vw, 28px); margin: 48px 0 16px; font-weight:400; }
.article h3{ font-size: 18px; font-weight:500; margin: 24px 0 8px; font-family:var(--font-body); letter-spacing:0; }
.article p, .article ul, .article ol{ color:var(--ink-soft); line-height:1.7; margin: 0 0 16px; }
.article ul, .article ol{ padding-left: 22px; }
.article li{ margin-bottom: 8px; }
.article a{ color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.article a:hover{ color:var(--accent-dark); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Demo-Leiste (Entwurfs-Hinweis, Muster petra-pferde; 18.07.2026) ---------- */
.demobar{
  position:fixed;bottom:0;left:0;right:0;z-index:1200;
  background:rgba(15,22,32,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:12px 46px 12px 18px;font-size:13.5px;line-height:1.5;text-align:center;
  border-top:3px solid #095873;transform:translateY(100%);
  animation:demoin .5s .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes demoin{to{transform:none}}
.demobar a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.demobar__sep{opacity:.5}
.demobar button{position:absolute;right:12px;background:none;border:0;color:rgba(255,255,255,.55);font-size:22px;line-height:1;cursor:pointer}
.demobar button:hover{color:#fff}
.demobar.hide{display:none}
@media (prefers-reduced-motion: reduce){.demobar{animation:none;transform:none}}

/* Ueberlauf-Schutz: verhindert, dass der fixe Header horizontal wegrutscht (18.07.) */
html{overflow-x:clip}