/* ============================================================================
   Bosshard AG — Auto- & Industriebedarf · Mockup design system
   Direction: clean corporate blue, light base + deep-navy bands.
   Palette anchored on the official logo navy (#003878). Signature motif:
   the logo's diagonal slash (skewed blocks / clip-path). Typography:
   Archivo (display) + IBM Plex Sans (body) + IBM Plex Mono (codes/eyebrows).
   ============================================================================ */

:root {
  /* Brand */
  --navy:        #003878;   /* logo blue — brand anchor */
  --navy-deep:   #00264f;   /* darkest band */
  --navy-700:    #0a4a92;   /* lighter navy for gradients */
  --azure:       #1273e6;   /* interactive accent (links, hovers) */
  --azure-soft:  #e7f0fd;   /* azure tint surface */
  --signal:      #f08a24;   /* sparingly: rental / highlight ticks */

  /* Ink + neutrals */
  --ink:         #121b27;   /* body text (navy-tinted near-black) */
  --ink-soft:    #3a4757;   /* secondary text */
  --steel:       #62718a;   /* muted / captions */
  --line:        #e2e8f1;   /* hairlines */
  --line-strong: #cdd7e6;

  /* Surfaces */
  --paper:       #ffffff;
  --mist:        #f3f6fb;   /* alt sections */
  --mist-2:      #eaf0f8;

  /* Type */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Rhythm */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(0,38,79,.06), 0 8px 28px rgba(0,38,79,.08);
  --shadow-lg: 0 24px 60px rgba(0,38,79,.18);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--azure); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--navy); }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; color: var(--navy); }
button { font: inherit; cursor: pointer; }
::selection { background: var(--navy); color: #fff; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* eyebrow — mono, tracked, with a leading tick that echoes the logo slash */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--azure);
}
.eyebrow::before {
  content: ""; width: 22px; height: 10px; background: var(--navy);
  clip-path: polygon(28% 0,100% 0,72% 100%,0 100%); /* slash */
}
.dark .eyebrow, .navy .eyebrow { color: #7fb4ff; }
.dark .eyebrow::before, .navy .eyebrow::before { background: var(--signal); }

.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-top: .35em; }
.section-head .lead, .lead { color: var(--ink-soft); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.5; max-width: 60ch; }

/* ----------------------------------------------------------------- topbar */
.topbar {
  background: var(--navy-deep); color: #c5d6ec;
  font-size: .82rem; font-family: var(--mono); letter-spacing: .02em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: #fff; }
.topbar a:hover { color: var(--signal); }
.topbar .tb-left { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar .sep { opacity: .4; }
.topbar b { color: #fff; font-weight: 600; }
.topbar .tb-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar .tb-ico { display: inline-flex; color: var(--signal); }
.topbar .tb-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.topbar .tb-oh { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.topbar .tb-oh + .tb-oh { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.15); }
.topbar .tb-oh b { color: #fff; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease), padding .25s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.site-header.shrink { box-shadow: 0 8px 30px rgba(0,38,79,.10); }
.site-header.shrink .container { min-height: 66px; }
/* flex:none — as a shrinkable flex item the anchor narrows under pressure and
   the global img{max-width:100%} then squashes the logo horizontally while
   height stays fixed. 38px (not 42) keeps the unshrunk nav on one line. */
.brand { flex: 0 0 auto; }
.brand img { height: 38px; width: auto; transition: height .25s var(--ease); }
.site-header.shrink .brand img { height: 34px; }

.nav { list-style: none; display: flex; align-items: center; gap: 2px; padding: 0; }
.nav > li > a {
  display: block; padding: 12px 11px; color: var(--ink);
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  border-radius: var(--radius); position: relative;
}
.nav > li > a:hover { color: var(--navy); background: var(--mist); }
.nav > li.active > a { color: var(--navy); }
.nav > li.active > a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px;
  height: 3px; background: var(--navy); clip-path: polygon(6% 0,100% 0,94% 100%,0 100%);
}
/* the parts collage as a standing emblem at the end of the nav. Shown only at
   1201px+, where the container has hit its 1200px max and there is ~30px to
   spare; below that the seven labels own the row. */
.nav-cog { display: flex; align-items: center; margin-left: 10px; padding-left: 16px;
  border-left: 1px solid var(--line); }
/* flex:none + max-width:none beat the global img{max-width:100%}, which
   otherwise squeezes the emblem against the li's own content box. */
.nav-cog img { display: block; flex: none; max-width: none; width: 46px; height: 46px;
  animation: cog-spin 90s linear infinite; will-change: transform;
  transition: width .25s var(--ease), height .25s var(--ease); }
.site-header.shrink .nav-cog img { width: 40px; height: 40px; }
@media (max-width: 1200px) { .nav-cog { display: none; } }

.caret { font-size: .55em; vertical-align: middle; opacity: .6; margin-left: .3em; }

/* dropdown */
.has-sub { position: relative; }
.subnav {
  position: absolute; top: calc(100% - 2px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); list-style: none; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s var(--ease); z-index: 70;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav li a { display: block; padding: 9px 12px; border-radius: var(--radius); color: var(--ink-soft); font-size: .92rem; font-weight: 500; }
.subnav li a:hover { background: var(--azure-soft); color: var(--navy); }

.nav-toggle { display: none; width: 44px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; position: relative; z-index: 80; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  position: absolute; width: 20px; height: 2px; background: var(--navy); transition: .25s var(--ease);
}
/* centre bar; ::before/::after sit on the same axis (left:0 relative to span) */
.nav-toggle span { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before, .nav-toggle span::after { content: ""; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em; padding: 13px 24px;
  font-family: var(--body); font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  border-radius: var(--radius); border: 2px solid transparent; cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); color: #fff; }
.btn-azure { background: var(--azure); color: #fff; }
.btn-azure:hover { background: #0d63cc; color: #fff; }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-700); color: #fff; }

/* ----------------------------------------------------------------- sections */
.section { padding: clamp(56px, 8vw, 110px) 0; position: relative; }
.section.mist { background: var(--mist); }
.section.tight { padding: clamp(40px,5vw,64px) 0; }
.section.dark, .navy {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(18,115,230,.28), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #d7e3f3;
}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4,.navy h2,.navy h3 { color: #fff; }
.section.dark a:not(.btn), .navy a:not(.btn) { color: #9cc4ff; }

/* blueprint grid texture — subtle, technical */
.blueprint::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(0,56,120,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,56,120,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.dark.blueprint::before {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  opacity: 1;
}

/* ----------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(56px,8vw,104px) 0 clamp(70px,9vw,128px); overflow: hidden; }
.hero::after { /* diagonal navy slab on the right echoing the logo slash */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 46%;
  background:
    radial-gradient(700px 420px at 70% 10%, rgba(18,115,230,.30), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,64px); align-items: center; }
.hero-copy { max-width: 680px; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); margin: .25em 0 .35em; }
.hero h1 .em { color: var(--azure); position: relative; }
.hero .lead { color: var(--ink-soft); margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-visual { position: relative; z-index: 2; }

/* rotating car-parts collage — the brand graphic, used as a hero motif.
   Wrapper owns placement + the reveal entrance, the img owns the endless
   spin, so the two transforms never fight each other. */
.hero-cog { position: relative; z-index: 0; pointer-events: none;
  width: clamp(190px, 22vw, 330px); margin: -62px -6% 0 auto; }
.hero-cog::before { content: ""; position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18,115,230,.5), transparent 70%); }
.hero-cog img { position: relative; display: block; width: 100%; height: auto;
  animation: cog-spin 64s linear infinite; will-change: transform; }
.hero-cog[data-reveal] { transform: translateY(26px) scale(.86);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.hero-cog[data-reveal].in { transform: none; }
@keyframes cog-spin { to { transform: rotate(360deg); } }
.hero-figure { position: relative; z-index: 1; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 16 / 11; isolation: isolate; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.hero-figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48%;
  background: linear-gradient(to top, rgba(0,24,57,.74), transparent); pointer-events: none; }
.hero-figure-tag { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(0,32,74,.62); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); padding: 7px 12px; border-radius: 999px; }

/* ----------------------------------------------------------------- page banner */
.page-banner { position: relative; overflow: hidden; padding: clamp(48px,7vw,86px) 0 clamp(36px,5vw,54px);
  background:
    radial-gradient(700px 380px at 88% -20%, rgba(18,115,230,.32), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
}
.page-banner::after { content:""; position:absolute; right:0; top:0; bottom:0; width:200px;
  background: rgba(255,255,255,.04); clip-path: polygon(40% 0,100% 0,100% 100%,0 100%); }
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; font-size: clamp(2.1rem,4.6vw,3.4rem); margin-top: .3em; }
.breadcrumb { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: #9cc4ff; }
.breadcrumb a { color: #cfe0f5; } .breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { margin: 0 .5em; opacity: .5; }

/* ----------------------------------------------------------------- grids + cards */
.grid { display: grid; gap: clamp(16px,2vw,26px); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 1.18rem; color: var(--navy); }
.card .excerpt { color: var(--ink-soft); font-size: .95rem; }
.card .more { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azure); display: inline-flex; align-items: center; gap: .5em; }
a.card:hover .more { color: var(--navy); }
.card .thumb { aspect-ratio: 4/3; }

/* Brand logo in place of a line-icon (Kataloge). Both supplier marks are
   opaque rectangles of roughly 3.5:1, so a fixed 44px slot lines them up on a
   shared baseline without a plate boxing them in a second time. */
.brand-logo { height: 44px; display: flex; align-items: center; margin-bottom: 4px; }
.brand-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 3px; display: block; }

/* ----------------------------------------------------------------- placeholders (blueprint product stand-ins) */
.ph {
  position: relative; width: 100%; height: 100%; min-height: 150px;
  background:
    linear-gradient(rgba(0,56,120,.08) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(0,56,120,.08) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(150deg,#eef3fa,#dfe8f4);
  display: flex; align-items: center; justify-content: center; color: var(--navy); overflow: hidden;
}
.ph::after { /* corner crosshair tick, like a technical drawing */
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 16px; height: 16px;
  background:
    linear-gradient(var(--azure),var(--azure)) center/100% 1.5px no-repeat,
    linear-gradient(var(--azure),var(--azure)) center/1.5px 100% no-repeat;
  opacity: .55;
}
.ph .ph-ico { width: 38%; max-width: 110px; opacity: .85; }
.ph .ph-ico svg { width: 100%; height: auto; stroke: var(--navy); fill: none; stroke-width: 1.4; }
.ph-label { position: absolute; left: 12px; top: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: rgba(255,255,255,.7); padding: 3px 8px; border-radius: 3px; }
.ph.dark-ph { background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(150deg,#073066,#00264f); color: #cfe0f5; }
.ph.dark-ph .ph-ico svg { stroke: #9cc4ff; }
.ph.dark-ph .ph-label { background: rgba(255,255,255,.1); color: #cfe0f5; }
.ph.tall { aspect-ratio: 3/4; } .ph.wide { aspect-ratio: 16/9; } .ph.box43 { aspect-ratio: 4/3; }

/* ----------------------------------------------------------------- photo figures (real photography) */
.photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/3; isolation: isolate; background: #dfe8f4; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 44%;
  background: linear-gradient(to top, rgba(0,24,57,.6), transparent); pointer-events: none; }
.photo.tall { aspect-ratio: 3/4; } .photo.wide { aspect-ratio: 16/9; }
.photo-tag { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(0,32,74,.62); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); padding: 7px 12px; border-radius: 999px; }
.split-media .photo { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ----------------------------------------------------------------- category grid (Sortiment) */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.cat {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--azure); }
/* The badge is not specific to .cat — .card and .fact use it too (Service,
   Anfahrt, Kataloge). Scoping the base rules to .cat left those unsized and
   filled black, so the base styles stand alone and only hover is scoped. */
.cat-ico { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 8px; background: var(--azure-soft); display: grid; place-items: center; }
.cat-ico svg { width: 26px; height: 26px; stroke: var(--navy); fill: none; stroke-width: 1.6; }
.cat:hover .cat-ico, a.card:hover .cat-ico { background: var(--navy); }
.cat:hover .cat-ico svg, a.card:hover .cat-ico svg { stroke: #fff; }
.cat .cat-no { position: absolute; right: 16px; top: 14px; font-family: var(--mono); font-size: .72rem; color: var(--line-strong); }
.cat h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 3px; }
.cat p { font-size: .85rem; color: var(--steel); line-height: 1.45; }
.cat.is-hidden { display: none; }

.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.filter-bar input[type=search] {
  flex: 1; min-width: 220px; padding: 12px 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); font: inherit; color: var(--ink); background: #fff;
}
.filter-bar input[type=search]:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); }
.filter-count { font-family: var(--mono); font-size: .8rem; color: var(--steel); }

/* ----------------------------------------------------------------- feature split (Dachboxen / service) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.split h2 { font-size: clamp(1.7rem,3vw,2.5rem); margin-bottom: .6em; }
.split ul.ticks { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 10px; }
.split ul.ticks li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.split ul.ticks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 9px; background: var(--azure); clip-path: polygon(28% 0,100% 0,72% 100%,0 100%); }
.dark .split ul.ticks li { color: #cdddf0; }
.dark .split ul.ticks li::before { background: var(--signal); }

/* ----------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; position: relative; }
.dark .step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.step .num { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--azure); line-height: 1; }
.dark .step .num { color: var(--signal); }
.step h3 { font-size: 1.15rem; margin: .4em 0 .35em; }
.step p { color: var(--ink-soft); font-size: .95rem; }
.dark .step p { color: #cdddf0; }

/* ----------------------------------------------------------------- fact / stat row */
.fact-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.dark .fact-row { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.16); }
.fact { background: #fff; padding: 28px 22px; text-align: center; }
.dark .fact { background: rgba(0,38,120,.4); }
.fact .num { font-family: var(--display); font-weight: 800; font-size: 2.3rem; color: var(--navy); line-height: 1; }
.dark .fact .num { color: #fff; }
.fact .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: 8px; }
.dark .fact .lbl { color: #9cc4ff; }

/* ----------------------------------------------------------------- info table */
.info-table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.info-table th, .info-table td { text-align: left; padding: 12px 4px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .96rem; }
.info-table th { width: 38%; color: var(--steel); font-weight: 600; font-family: var(--mono); font-size: .82rem; letter-spacing: .03em; }
.dark .info-table th, .dark .info-table td { border-color: rgba(255,255,255,.14); }
.dark .info-table th { color: #9cc4ff; }

/* ----------------------------------------------------------------- prose */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.5rem,2.4vw,2rem); margin: 1.6em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; color: var(--ink-soft); }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; color: var(--ink-soft); }
.prose li { margin-bottom: .4em; }
.prose b { color: var(--ink); }

/* ----------------------------------------------------------------- contact cards / map */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,3vw,40px); align-items: start; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.info-card h3 { font-size: 1.25rem; margin-bottom: .6em; }
.info-card .row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.info-card .row:last-child { border-bottom: 0; }
.info-card .row .k { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); flex: 0 0 96px; }
.info-card .row .v { font-weight: 500; }
.map { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--mist); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ----------------------------------------------------------------- consent placeholder */
/* Steht anstelle des iframes, bis der Besucher zustimmt — gleiche Masse wie
   die Einbettung selbst, damit beim Laden nichts springt. */
.consent { display: grid; place-items: center; background:
  linear-gradient(135deg, var(--mist) 0%, var(--mist-2) 100%); }
/* Der Platzhalter traegt mehr Inhalt als die Karte selbst; ohne diese
   Ueberschreibung wuerde ihn das 4/3-Format der Einbettung auf schmalen
   Spalten abschneiden. Nach dem Laden faellt .consent weg und das
   Seitenverhaeltnis der Einbettung gilt wieder. */
.map.consent, .shop-frame.consent { aspect-ratio: auto; height: auto; min-height: 300px; }
.consent-inner { max-width: 34ch; padding: clamp(20px,4vw,32px); text-align: center; }
.consent-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line-strong); color: var(--navy); margin-bottom: 14px; }
.consent-ico svg { width: 22px; height: 22px; }
.consent-text { font-size: .94rem; color: var(--ink-soft); margin: 0 0 18px; }
.consent-note { font-size: .74rem; line-height: 1.5; color: var(--steel); margin: 14px 0 0; }
.consent-note a { color: var(--steel); text-decoration: underline; }
.consent-note a:hover { color: var(--azure); }

/* Widerruf auf der Datenschutzseite */
.consent-revoke { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 1.2rem 0 0; }
.consent-revoke .ok { font-size: .86rem; color: var(--navy); margin: 0; }

/* ----------------------------------------------------------------- online shop embed */
.shop-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px,3vw,32px); }
.shop-intro .lead { margin: 0; }
.shop-frame { height: clamp(700px, calc(100vh - 200px), 1080px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--mist); }
.shop-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ----------------------------------------------------------------- form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.field input, .field select, .field textarea {
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; color: var(--ink); background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); }
.field textarea { resize: vertical; }
.form-grid .cf-turnstile { min-height: 65px; }
.form-legal { grid-column: 1 / -1; margin: 0; font-size: .84rem; color: var(--ink-soft); }

/* Honeypot: für Menschen unsichtbar, für Bots ein ausfüllbares Feld.
   Bewusst kein display:none — das erkennen viele Bots und lassen es aus. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-note {
  border-left: 4px solid; border-radius: 4px; padding: 14px 18px;
  margin-bottom: 1.4rem; font-size: .95rem;
}
.form-note-ok  { border-color: #1c7c4a; background: #eaf6ef; color: #14532d; }
.form-note-err { border-color: #b3261e; background: #fdecea; color: #7f1d1d; }
.form-note a { color: inherit; text-decoration: underline; }

/* ----------------------------------------------------------------- cta band */
.cta-band { position: relative; overflow: hidden; color: #fff; padding: clamp(48px,6vw,84px) 0;
  background:
    radial-gradient(700px 400px at 12% 120%, rgba(18,115,230,.35), transparent 60%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%); }
.cta-band::after { content:""; position:absolute; left:0; top:0; bottom:0; width:240px; background: rgba(255,255,255,.04); clip-path: polygon(0 0,60% 0,100% 100%,0 100%); }
.cta-band .container { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.4rem); }
.cta-band p { color: #c5d6ec; margin-top: .4em; max-width: 48ch; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--navy-deep); color: #aac3e0; }
.footer-main { padding: clamp(48px,6vw,80px) 0 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-main .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px,4vw,56px); }
.footer-main img { height: 38px; margin-bottom: 18px; }
.footer-main p { font-size: .94rem; line-height: 1.7; }
.footer-main h4 { color: #fff; font-family: var(--mono); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.footer-main a { color: #cfe0f5; } .footer-main a:hover { color: var(--signal); }
.f-hours { margin-top: 18px; }
.footer-bottom { padding: 20px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.footer-bottom .fb-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- reveal animation */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .hero-cog img, .nav-cog img { animation: none; }
}

/* ----------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero::after { width: 100%; clip-path: polygon(0 78%,100% 62%,100% 100%,0 100%); opacity: .9; }
  .hero-visual { margin-top: 8px; }
  /* stacked hero: the collage lands on the light band, so no bleed and no glow */
  .hero-cog { width: clamp(160px, 32vw, 240px); margin: -40px 0 0 auto; }
  .hero-cog::before { display: none; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2,1fr); }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .steps { grid-template-columns: 1fr; }
  .fact-row { grid-template-columns: repeat(2,1fr); }
  .footer-main .container { grid-template-columns: 1fr 1fr; }
}
/* 981-1140px: the drawer has not taken over yet, but the logo plus seven
   labels no longer fit at full size. Tighten the links rather than let them
   wrap onto a second line. */
@media (min-width: 981px) and (max-width: 1140px) {
  .nav > li > a { padding: 12px 6px; font-size: .87rem; }
  .nav > li.active > a::after { left: 6px; right: 6px; }
}

@media (max-width: 980px) {
  .nav-toggle { display: block; }

  /* Full-width navy dropdown panel below the header. Uses position:absolute
     (not fixed) so it anchors to the sticky header and is unaffected by the
     header's backdrop-filter — the robust pattern shared with the sibling
     ../fcks-sulgen project. */
  .nav {
    counter-reset: navno;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-top: 3px solid var(--azure); padding: 4px 0 12px;
    box-shadow: 0 26px 50px rgba(0,18,46,.4);
    max-height: calc(100vh - 100%); overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: none;
  }
  .nav.open { display: flex; animation: navDrop .28s var(--ease) both; }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

  .nav > li { counter-increment: navno; position: relative; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav > li:last-child { border-bottom: 0; }
  .nav > li > a {
    display: flex; align-items: center; gap: 14px; padding: 15px 26px; border-radius: 0;
    color: #e9f0fb; font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em;
  }
  .nav > li > a::before {
    content: counter(navno, decimal-leading-zero);
    font-family: var(--mono); font-size: .68rem; font-weight: 500;
    color: var(--azure); letter-spacing: .08em; min-width: 20px;
  }
  .nav > li > a:hover { background: rgba(255,255,255,.05); color: #fff; }
  .nav > li.active > a { color: #fff; }
  /* signal-amber diagonal slash on the active item — the logo motif */
  .nav > li.active::before {
    content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 4px;
    background: var(--signal); clip-path: polygon(0 0,100% 14%,100% 86%,0 100%);
  }

  /* Sortiment accordion (max-height transition) */
  .has-sub > a .caret { margin-left: auto; }
  .caret { display: inline-block; opacity: .65; transition: transform .25s var(--ease); }
  .has-sub.open > a .caret { transform: rotate(180deg); }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; background: rgba(0,10,28,.4); padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .has-sub.open .subnav { max-height: 480px; }
  .subnav li a {
    display: block; padding: 12px 26px 12px 54px; color: #b7c8e2;
    font-size: .95rem; font-weight: 500;
  }
  .subnav li a:hover { background: rgba(255,255,255,.05); color: #fff; }
}
@media (max-width: 720px) {
  .cols-2, .cols-3, .cols-4, .cat-grid, .form-grid { grid-template-columns: 1fr; }
  .fact-row { grid-template-columns: 1fr 1fr; }
  .footer-main .container { grid-template-columns: 1fr; }
  .shop-intro .btn { width: 100%; justify-content: center; }
  .shop-frame { height: clamp(560px, calc(100vh - 150px), 900px); }

  /* compact, centred top bar — phone first (tap to call), hours below;
     the full address lives in the footer / Impressum / Anfahrt */
  .topbar { font-size: .78rem; }
  .topbar .container {
    flex-direction: column; justify-content: center; align-items: center;
    text-align: center; gap: 3px; min-height: 0; padding-top: 8px; padding-bottom: 8px;
  }
  .topbar .tb-left { justify-content: center; gap: 0; }
  .topbar .tb-left > span:first-child, .topbar .tb-left .sep { display: none; }
  .topbar .tb-right { justify-content: center; gap: 8px 10px; font-size: .72rem; }
  .topbar .tb-oh + .tb-oh { padding-left: 10px; }
}