/* =============================================================
   Bülow, Karosserie & Lack GmbH – Website Version 2.0
   Design: "Studio Dark" – editorial, glas, bento, kinetisch
   ============================================================= */

/* ---------- 0. Schriften ----------

   Archivo und Inter liegen unter assets/fonts/ auf dem eigenen Server.
   Frueher kamen sie von fonts.googleapis.com; dabei ging die IP-Adresse
   jedes Besuchers ungefragt an Google (LG Muenchen I, 20.01.2022,
   Az. 3 O 17493/20). Jetzt verlaesst kein Aufruf mehr unseren Server.

   Beides sind variable Schriften: EINE Datei je Zeichensatz deckt den
   ganzen Strichstaerkenbereich ab. Google liefert bei mehreren
   angefragten Staerken dieselbe Datei mehrfach aus - hier steht sie
   einmal, der Bereich in font-weight gilt fuer alle Zwischenwerte.

   unicode-range trennt latin von latin-ext: Fuer deutschen Text laedt
   der Browser nur die beiden latin-Dateien (zusammen 83 KB), der Rest
   kommt erst, wenn er wirklich gebraucht wird.
   ---------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root {
  --bg:          #06070b;
  --bg-soft:     #0b0e15;
  --bg-panel:    #10141d;
  --bg-light:    #f4f6fa;
  --bg-light-2:  #e9edf4;

  --ink:         #0a0d14;
  --ink-soft:    #39404f;

  --text:        #eef1f6;
  --text-dim:    #99a2b4;
  --text-faint:  #6b7385;

  --line:        rgba(255,255,255,0.10);
  --line-soft:   rgba(255,255,255,0.055);
  --line-dark:   rgba(10,13,20,0.12);

  --brand:       #3d7dff;
  --brand-600:   #2f6fef;
  --brand-300:   #8ab4ff;
  --cyan:        #5fe3ff;

  --glass:       rgba(255,255,255,0.045);
  --glass-2:     rgba(255,255,255,0.07);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shadow-soft: 0 24px 60px -24px rgba(0,0,0,0.75);
  --shadow-glow: 0 18px 50px -18px rgba(61,125,255,0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --pad-section: clamp(72px, 9vw, 140px);
  --gutter: clamp(20px, 4vw, 40px);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
svg { width: 20px; height: 20px; flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4 {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
h1 { font-size: clamp(44px, 7.6vw, 104px); }
h2 { font-size: clamp(32px, 4.6vw, 62px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.22; letter-spacing: -0.02em; }
h4 { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

.display-em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-300) 0%, var(--cyan) 55%, var(--brand-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 58ch;
}

/* ---------- 4. Layout ---------- */
.wrap {
  width: min(1260px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.section { padding-block: var(--pad-section); position: relative; }

.section-light {
  background: var(--bg-light);
  color: var(--ink);
}
.section-light .lead,
.section-light .sec-intro { color: var(--ink-soft); }

.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-intro { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); color: var(--text-dim); line-height: 1.7; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.sec-head.center .eyebrow::before { display: none; }
.section-light .eyebrow { color: var(--brand-600); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background-color 0.3s, border-color 0.3s, box-shadow 0.35s, color 0.3s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { box-shadow: 0 22px 60px -16px rgba(61,125,255,0.75); }

.btn-ghost {
  border-color: var(--line);
  background: var(--glass);
  color: var(--text);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,0.22); }

.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover { background: #171c27; }

.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- 6. Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 7. Announcement bar ---------- */
.announce {
  position: relative;
  z-index: 60;
  background: #04050a;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--text-dim);
}
.announce .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 10px;
  flex-wrap: wrap;
}
.announce-contact { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; min-width: 0; }
.announce-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color 0.25s;
}
.announce-contact a:hover { color: var(--text); }
.announce-contact svg { width: 14px; height: 14px; color: var(--brand-300); }

.announce-right { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }

.social-row { display: flex; align-items: center; gap: 8px; }
.social-row a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease);
}
.social-row a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.social-row svg { width: 14px; height: 14px; }

.announce-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(61,125,255,0.13);
  border: 1px solid rgba(61,125,255,0.3);
  color: var(--brand-300);
  font-size: 12.5px;
  white-space: nowrap;
}
.announce-pill svg { width: 13px; height: 13px; }
.announce-pill b { color: #fff; font-weight: 600; }

/* ---------- 8. Header / Navigation ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 70;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.site-head.stuck {
  background: rgba(6,7,11,0.82);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line-soft);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}

.brand-mark {
  display: inline-flex;
  padding: 9px 16px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  transition: transform 0.4s var(--ease);
}
.brand-mark:hover { transform: translateY(-2px); }
.brand-mark img { height: 44px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(12px);
}
.nav-links a {
  display: block;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.25s, background-color 0.25s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active {
  color: #fff;
  background: rgba(255,255,255,0.10);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--glass);
  place-items: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4,5,10,0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 22px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nav-overlay-close {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.nav-overlay nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav-overlay nav a {
  font-family: "Archivo", sans-serif;
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.25s;
}
.nav-overlay.open nav a { opacity: 1; transform: none; }
.nav-overlay nav a:nth-child(1) { transition-delay: 0.06s; }
.nav-overlay nav a:nth-child(2) { transition-delay: 0.12s; }
.nav-overlay nav a:nth-child(3) { transition-delay: 0.18s; }
.nav-overlay nav a:nth-child(4) { transition-delay: 0.24s; }
.nav-overlay nav a:hover { color: var(--brand-300); }
.nav-overlay-foot { display: flex; flex-direction: column; gap: 14px; }
.nav-overlay-foot .btn { width: 100%; }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 90px);
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: orb-float 18s ease-in-out infinite;
}
.orb-1 {
  width: 620px; height: 620px;
  top: -220px; right: -140px;
  background: radial-gradient(circle, rgba(61,125,255,0.55), transparent 65%);
}
.orb-2 {
  width: 520px; height: 520px;
  bottom: -240px; left: -160px;
  background: radial-gradient(circle, rgba(95,227,255,0.26), transparent 68%);
  animation-delay: -7s;
}
@keyframes orb-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,42px,0) scale(1.08); }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 7px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 26px;
  backdrop-filter: blur(10px);
}
.hero-chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(95,227,255,0.16);
  margin-left: 6px;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(95,227,255,0.14); }
  50%      { box-shadow: 0 0 0 7px rgba(95,227,255,0.05); }
}
.hero-chip b { color: var(--text); font-weight: 600; }

.hero h1 { margin-bottom: 26px; }
.hero .lead { margin-bottom: 34px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--text-dim);
}
.hero-mini li { display: flex; align-items: center; gap: 9px; }
.hero-mini svg { width: 15px; height: 15px; color: var(--cyan); }

/* Hero Visual – Logokarte + Sprühanimation */
.hero-visual { position: relative; display: grid; place-items: center; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(ellipse 58% 58% at 52% 48%, rgba(61,125,255,0.45), transparent 70%);
  filter: blur(20px);
}
.logo-card {
  position: relative;
  width: 100%;
  max-width: 470px;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 34px 36px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85);
  animation: card-float 9s ease-in-out infinite;
}
@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-14px) rotate(0.4deg); }
}
.logo-card-inner { position: relative; }
.logo-card-inner img { width: 100%; height: auto; }

.spray-fx { position: absolute; left: 90.5%; top: 40%; width: 0; height: 0; pointer-events: none; }
.spray-dot {
  position: absolute;
  left: 0; top: 0;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 6px 1px rgba(61,125,255,0.6);
  opacity: 0;
  animation: spray-puff 1.6s ease-out infinite;
}
.spray-dot.d1 { --ty: -16px; animation-delay: 0s; }
.spray-dot.d2 { --ty: 0px;   animation-delay: 0.35s; }
.spray-dot.d3 { --ty: 16px;  animation-delay: 0.7s; }
@keyframes spray-puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  18%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-46px, var(--ty)) scale(1.4); }
}

/* Countdown */
.countdown-bar {
  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 5vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.countdown-copy strong { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.countdown-copy span { font-size: 13.5px; color: var(--text-faint); }
.countdown-tiles { display: flex; gap: 10px; }
.cd-tile {
  min-width: 74px;
  padding: 12px 8px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.cd-num {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cd-label {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- 10. Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line-soft);
  background: var(--bg-soft);
  overflow: hidden;
  padding-block: 18px;
  display: flex;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 42px;
  padding-right: 42px;
  flex-shrink: 0;
  animation: marquee-scroll 34s linear infinite;
}
.marquee span {
  font-family: "Archivo", sans-serif;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 42px;
}
.marquee span::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.8;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- 11. USP Bento ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.usp-card {
  position: relative;
  padding: 30px 26px 32px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: border-color 0.4s, background-color 0.4s, transform 0.5s var(--ease);
}
.usp-card:hover { transform: translateY(-4px); border-color: var(--line); background: var(--glass-2); }
.usp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(61,125,255,0.18), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.usp-card:hover::before { opacity: 1; }
.usp-card h3 { margin-bottom: 9px; }
.usp-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.62; }

.icon-badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: linear-gradient(150deg, rgba(61,125,255,0.24), rgba(95,227,255,0.10));
  border: 1px solid rgba(61,125,255,0.28);
  color: var(--brand-300);
}
.icon-badge svg { width: 22px; height: 22px; }
.section-light .icon-badge {
  background: linear-gradient(150deg, rgba(61,125,255,0.14), rgba(95,227,255,0.06));
  border-color: rgba(61,125,255,0.2);
  color: var(--brand-600);
}
/* Innerhalb dunkler Karten bleibt das Icon hell – auch in hellen Sektionen */
.section-light .float-chip .icon-badge {
  background: linear-gradient(150deg, rgba(61,125,255,0.28), rgba(95,227,255,0.12));
  border-color: rgba(61,125,255,0.34);
  color: var(--brand-300);
}

/* ---------- 12. Leistungen – Bento ---------- */
.services-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 290px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.svc:hover { transform: translateY(-4px); border-color: var(--line); }
.svc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s var(--ease);
}
.svc:hover img { transform: scale(1.06); }
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6,7,11,0.20) 0%, rgba(6,7,11,0.78) 52%, rgba(6,7,11,0.96) 100%);
}
.svc-body { padding: 26px 24px 28px; }
.svc .icon-badge {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  background: rgba(6,7,11,0.62);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
  backdrop-filter: blur(8px);
}
.svc .icon-badge svg { width: 19px; height: 19px; }
.svc h3 { margin-bottom: 10px; color: #fff; }
.svc p { font-size: 14.5px; color: #c4cbd9; line-height: 1.62; }

/* Große Feature-Kachel */
.svc-feature {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 380px;
}
.svc-feature .svc-body { padding: 30px 30px 32px; }
.svc-feature h3 { font-size: clamp(22px, 2.2vw, 30px); }
.svc-feature p { max-width: 42ch; }

.svc-wide { grid-column: span 2; }

/* Abschluss-Kachel ueber die volle Rasterbreite. Sie schliesst das Bento ab,
   damit die letzte Reihe nicht halb leer bleibt. */
.svc-full {
  grid-column: 1 / -1;
  min-height: 320px;
}
/* Das Motiv ist quadratisch, die Kachel ein breiter Streifen - sichtbar sind
   nur rund 280 der 1024 Bildzeilen. 45 % haelt Tischplatte, Kantenprofil und
   ein Tischbein gemeinsam im Bild, und zwar rechts, wo der Text nicht
   darueberliegt. Im einspaltigen Layout begrenzt die Hoehe den Massstab, dort
   steht der Tisch ohnehin vollstaendig im Bild. */
.svc-full img { object-position: center 45%; }
.svc-full .svc-body { padding: 30px 30px 32px; }
.svc-full h3 { font-size: clamp(20px, 2vw, 27px); }
.svc-full p { max-width: 58ch; }

/* ---------- 13. Kundenkarten ---------- */
.customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.customer-card {
  position: relative;
  min-height: 440px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 28px 32px;
  isolation: isolate;
  border: 1px solid var(--line-soft);
}
.customer-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s var(--ease);
}
.customer-card:hover img { transform: scale(1.07); }
.customer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6,7,11,0.12) 0%, rgba(6,7,11,0.62) 48%, rgba(6,7,11,0.94) 100%);
}
.customer-card h3 { color: #fff; margin-bottom: 10px; }
.customer-card p {
  font-size: 14.5px;
  line-height: 1.62;
  color: #c6cdda;
  min-height: 4.9em;
}
.customer-card .icon-badge {
  margin-bottom: 0;
  position: absolute;
  top: 26px;
  left: 28px;
  background: rgba(6,7,11,0.62);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
  backdrop-filter: blur(8px);
}

/* ---------- 14. Split-Bereiche ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.split-media { position: relative; width: 100%; }
.split-media img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.split-media::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(61,125,255,0.30), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

.check-list { display: grid; gap: 13px; margin: 30px 0 34px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-dim); }
.check-list svg { width: 17px; height: 17px; margin-top: 4px; color: var(--cyan); }
.section-light .check-list li { color: var(--ink-soft); }
.section-light .check-list svg { color: var(--brand-600); }

.float-chip {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 20px 13px 14px;
  border-radius: var(--r-md);
  background: rgba(12,15,22,0.82);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.float-chip .icon-badge { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.float-chip .icon-badge svg { width: 19px; height: 19px; }
.float-chip strong { display: block; font-size: 14.5px; color: #fff; font-weight: 600; }
.float-chip span { font-size: 12.5px; color: var(--text-faint); }

/* ---------- 15. Kontakt ---------- */
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.contact-tile {
  padding: 26px 24px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--line-soft);
  transition: border-color 0.35s, transform 0.45s var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); border-color: var(--line); }
.contact-tile h3 { font-size: 15px; margin-bottom: 6px; }
.contact-tile a, .contact-tile p { font-size: 15px; color: var(--text-dim); line-height: 1.55; }
.contact-tile a:hover { color: var(--brand-300); }
.contact-tile .icon-badge { width: 42px; height: 42px; margin-bottom: 16px; }
.contact-tile .icon-badge svg { width: 19px; height: 19px; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: stretch;
}
.contact-form {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line-soft);
}
.contact-form h3 { font-size: 24px; margin-bottom: 8px; }
.contact-form > p { font-size: 14.5px; color: var(--text-dim); margin-bottom: 26px; }

.field { margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(61,125,255,0.07);
  box-shadow: 0 0 0 4px rgba(61,125,255,0.13);
}
.field select option { background: var(--bg-panel); color: var(--text); }

.form-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.6;
}
.form-note a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; }

.map-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  min-height: 420px;
  background: var(--bg-panel);
}
.map-card iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(1) invert(0.92) contrast(0.86); }

/* ---------- 17. Footer ---------- */
.site-foot {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-soft);
  padding-top: clamp(56px, 6vw, 88px);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.foot-brand .brand-mark { margin-bottom: 20px; }
.foot-brand p { font-size: 14.5px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px; max-width: 34ch; }
.foot-col h4 { color: var(--text-faint); margin-bottom: 18px; }
.foot-col li + li { margin-top: 11px; }
.foot-col a, .foot-col button {
  font-size: 14.5px;
  color: var(--text-dim);
  transition: color 0.25s;
  text-align: left;
}
.foot-col a:hover, .foot-col button:hover { color: var(--brand-300); }
.foot-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.foot-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--brand-300); }

.foot-bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-faint);
}
.foot-legal { display: flex; gap: 20px; }
.foot-legal a:hover { color: var(--text); }

/* ---------- 18. Karte: wird erst auf Klick geladen ----------

   Statt den Google-iFrame ungefragt zu laden, steht hier zunaechst eine
   Flaeche im Seitendesign. Erst ein Klick auf "Karte laden" holt die Karte
   (js/main.js). Bis dahin geht kein Aufruf an Google.
   ------------------------------------------------------------------- */
.map-consent {
  display: grid;
  place-items: center;
  min-height: 420px;
  height: 100%;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(61,125,255,0.15), transparent 62%),
    var(--bg-panel);
}
/* Angedeutetes Strassenraster, rein dekorativ */
.map-consent::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-12deg);
  pointer-events: none;
}
.map-consent-inner { position: relative; max-width: 44ch; }
.map-pin {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--brand-300);
  background: rgba(61,125,255,0.12);
  border: 1px solid rgba(61,125,255,0.30);
}
.map-pin svg { width: 26px; height: 26px; }
.map-consent h3 { font-size: 19px; margin-bottom: 10px; }
.map-consent p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 22px;
}
.map-consent p a {
  color: var(--brand-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.map-route {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.25s;
}
.map-route:hover { color: var(--text); }

/* ---------- 19. Rechtliche Seiten ---------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(52px, 7vw, 96px);
  border-bottom: 1px solid var(--line-soft);
}
.breadcrumb { font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--brand-300); }
.page-head h1 { font-size: clamp(38px, 6vw, 76px); margin-bottom: 14px; }
.page-head > .wrap > p { color: var(--text-dim); font-size: 16px; }

.legal { max-width: 820px; }
.legal h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin-top: 48px;
  margin-bottom: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 17px; margin-top: 28px; margin-bottom: 10px; }
.legal p { color: var(--text-dim); margin-bottom: 14px; font-size: 15.5px; line-height: 1.72; }
.legal ul { margin: 0 0 18px 20px; list-style: disc; }
.legal li { color: var(--text-dim); margin-bottom: 8px; font-size: 15.5px; line-height: 1.7; }
.legal a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--text-faint);
}

/* ---------- 19b. Neuigkeiten ---------- */
.news-section { padding-bottom: clamp(24px, 3vw, 44px); }
.news-section + .section { padding-top: clamp(64px, 7vw, 110px); }
.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 68px);
}
.news-head .sec-head { margin-bottom: 0; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.news-grid-2 { grid-template-columns: repeat(2, 1fr); }
.news-grid-1 { grid-template-columns: 1fr; }

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s, background-color 0.4s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.news-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at 50% 0%, rgba(61,125,255,0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--line); background: var(--glass-2); box-shadow: var(--shadow-soft); }
.news-card:hover::before { opacity: 1; }

.news-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-panel);
}
.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.news-card:hover .news-media img { transform: scale(1.06); }

.news-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
}
.news-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(61,125,255,0.28);
  background: rgba(61,125,255,0.10);
  color: var(--brand-300);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.news-date svg { width: 14px; height: 14px; }
.news-card h3 { margin-bottom: 10px; }
.news-link { color: var(--text); }
/* Die ganze Karte ist anklickbar, der Verweis bleibt trotzdem die Überschrift */
.news-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-link:focus-visible { outline: none; }
.news-card:has(.news-link:focus-visible) { outline: 2px solid var(--brand-300); outline-offset: 3px; }
.news-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.62; }
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-300);
}
.news-more span { transition: transform 0.4s var(--ease); }
.news-card:hover .news-more span { transform: translateX(4px); }

/* Ein einzelner Beitrag: Bild und Text nebeneinander */
.news-grid-1 .news-card:has(.news-media) { display: grid; grid-template-columns: 1.1fr 1fr; }
.news-grid-1 .news-media { aspect-ratio: auto; min-height: 320px; }
.news-grid-1 .news-body { padding: clamp(28px, 3.4vw, 48px); justify-content: center; }
.news-grid-1 .news-card h3 { font-size: clamp(22px, 2.2vw, 30px); }
.news-grid-1 .news-card p { font-size: 15.5px; }
.news-grid-1 .news-more { margin-top: 0; }

/* Archivseite */
.news-archiv { max-width: 860px; display: grid; gap: 22px; }
.news-eintrag {
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  scroll-margin-top: 110px;
  transition: border-color 0.4s;
}
.news-eintrag:target { border-color: rgba(61,125,255,0.55); box-shadow: var(--shadow-glow); }
.news-eintrag .news-media { aspect-ratio: 16 / 8; }
.news-eintrag .news-body { padding: clamp(26px, 3.4vw, 44px); }
.news-eintrag h2 { font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 18px; }
.news-eintrag p { color: var(--text-dim); margin-bottom: 14px; font-size: 15.5px; line-height: 1.72; max-width: 68ch; }
.news-eintrag p:last-child { margin-bottom: 0; }
.news-eintrag strong { color: var(--text); }
.news-zurueck { margin-top: 36px; }

@media (max-width: 1080px) {
  .news-head { flex-direction: column; align-items: center; text-align: center; }
  .news-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .news-grid-3 .news-card:first-child { grid-column: 1 / -1; }
  .news-grid-3 .news-card:first-child .news-media { aspect-ratio: 16 / 8; }
}
@media (max-width: 720px) {
  .news-grid, .news-grid-2, .news-grid-3 { grid-template-columns: 1fr; }
  .news-grid-3 .news-card:first-child .news-media { aspect-ratio: 16 / 10; }
  .news-grid-1 .news-card:has(.news-media) { grid-template-columns: 1fr; }
  .news-grid-1 .news-media { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .news-card:hover { transform: none; }
  .news-card:hover .news-media img, .news-card:hover .news-more span { transform: none; }
}

/* ---------- 20. Scroll-Reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.in { opacity: 1; transform: none; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1080px) {
  .contact-tiles { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-ctas, .hero-mini { justify-content: center; }
  .hero-visual { order: -1; max-width: 420px; margin-inline: auto; }
  .eyebrow::before { display: none; }
  .sec-head { text-align: center; margin-inline: auto; }

  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .services-bento { grid-template-columns: repeat(2, 1fr); }
  .svc-feature { grid-row: span 1; min-height: 320px; }
  .customer-grid { grid-template-columns: 1fr; }
  .customer-card { min-height: 380px; }
  .customer-card p { min-height: 0; }
  .split { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .contact-layout { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: grid; }
}

@media (max-width: 720px) {
  .contact-tiles { grid-template-columns: 1fr; }
  .map-card, .map-card iframe, .map-consent { min-height: 320px; }
  .countdown-bar { flex-direction: column; align-items: flex-start; }
  .countdown-tiles { width: 100%; }
  .cd-tile { flex: 1; min-width: 0; }
}

@media (max-width: 620px) {
  .usp-grid, .services-bento { grid-template-columns: 1fr; }
  .svc-feature { grid-column: span 1; }
  .svc-wide { grid-column: span 1; }
  .svc-full { grid-column: span 1; }
  .field-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { justify-content: center; text-align: center; }
}

/* Announce-Bar: zwei saubere Zeilen auf dem Handy */
@media (max-width: 560px) {
  .announce { font-size: 11.5px; }
  .announce .wrap {
    justify-content: center;
    row-gap: 8px;
    column-gap: 10px;
  }
  .announce-contact {
    flex-basis: 100%;
    justify-content: center;
    gap: 12px;
    min-width: 0;
  }
  .announce-contact a { gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .announce-contact svg { width: 12px; height: 12px; }
  .announce-right { flex-basis: 100%; justify-content: center; gap: 10px; }
  .social-row a { width: 27px; height: 27px; }
  .social-row svg { width: 13px; height: 13px; }
  .announce-pill { font-size: 11.5px; padding: 4px 11px; gap: 6px; }
  .brand-mark { padding: 7px 13px; }
  .brand-mark img { height: 38px; }
}

/* ---------- 22. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .spray-dot { animation: none; opacity: 0.7; }
  .orb, .logo-card, .hero-chip .dot { animation: none; }
  .marquee-track { animation-duration: 180s; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn:hover, .usp-card:hover, .svc:hover, .contact-tile:hover { transform: none; }
  .customer-card:hover img, .svc-feature:hover img { transform: none; }
}