/* ==========================================================================
   LENG-TOOLS — Design-Variante „GEPRO-Stil" (Vorlage: gepro.ideehost.com, v3)
   Overlay NACH tokens.css + main.css: hell-dominante Flächen mit dunklen
   Drama-Abschnitten, Product Sans mit großen bold Headings, Pill-Buttons,
   Bento-Radien und weichen Mehrschicht-Schatten statt Borders.
   Akzentfarbe bleibt Leng-CI-Blau (#0071b9), Bilder bleiben die vorhandenen.
   Schrift: Product Sans („Google Sans") — Schnitte vom Agentur-Server
   (gepro.ideehost.com); Webfont-Lizenz vor einem Kunden-Launch klären!
   ========================================================================== */

@font-face { font-family: "Product Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/ProductSans-Light.woff") format("woff"); }
@font-face { font-family: "Product Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ProductSans-Regular.woff") format("woff"); }
@font-face { font-family: "Product Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ProductSans-Medium.woff") format("woff"); }
@font-face { font-family: "Product Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ProductSans-Bold.woff") format("woff"); }
@font-face { font-family: "Product Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/ProductSans-Black.woff") format("woff"); }

:root {
  /* Typografie */
  --font-display: "Product Sans", "Roboto", system-ui, sans-serif;
  --font-text:    "Product Sans", "Roboto", system-ui, sans-serif;
  --fs-display: clamp(2.9rem, 1.7rem + 4.8vw, 5.6rem);
  --fs-hero:    clamp(2.5rem, 1.5rem + 3.8vw, 4.4rem);
  --fs-h1:      clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --fs-h2:      clamp(2rem, 1.35rem + 2.8vw, 3.4rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  --lh-tight:   1.05;
  --lh-head:    1.12;

  /* Helle Flächen + neutrale Texte (Apple-Neutralgrau statt Blaugrau) */
  --ink:    #1d1d1f;
  --ink-2:  #55565c;
  --ink-3:  #86868b;
  --paper:  #f4f5f7;
  --surface:#ffffff;
  --line:        #e6e8eb;
  --line-strong: #d3d7dc;

  /* Drama-Dunkel (ersetzt Navy — wirkt auf .sect-navy, .section-navy, Footer) */
  --navy:      #0b0d10;
  --navy-text: #f5f5f7;

  /* Bento-Form + weiche Schatten */
  --g-r: 12px; --g-r-lg: 18px; --g-r-tile: 24px; --g-r-tile-lg: 32px; --g-pill: 999px;
  --g-shadow-tile: 0 1px 2px rgba(22,28,45,.03), 0 10px 26px -16px rgba(22,28,45,.08), 0 36px 64px -40px rgba(22,28,45,.10);
  --g-shadow-card: -20px 24px 46px -32px rgba(22,28,45,.18), -6px 10px 18px -14px rgba(22,28,45,.10);
  --g-shadow-card-hov: -28px 38px 64px -34px rgba(22,28,45,.26), -8px 14px 24px -14px rgba(22,28,45,.12);
  --g-shadow-pop: 0 2px 8px rgba(22,28,45,.05), 0 28px 64px -32px rgba(22,28,45,.16);
  --g-shadow-nav: 0 1px 0 rgba(15,23,42,.04), 0 12px 34px -22px rgba(15,23,42,.14);
  --g-shadow-btn: 0 8px 22px -12px rgba(0,113,185,.5);

  --section-pad: clamp(5.5rem, 3.5rem + 6vw, 9.5rem);
  --shadow-pop: var(--g-shadow-pop);
}

body { background: var(--surface); }

/* ---- Headings: groß, bold, eng ------------------------------------------ */
h1, h2, h3, h4,
.hero-cine h1 { font-weight: 700; letter-spacing: -.02em; }
h2 { line-height: var(--lh-head); }
.hero-cine .hero-claim,
.dimline { letter-spacing: .02em; }

/* ---- Header: helle schwebende Glas-Leiste ------------------------------- */
.header-bar {
  background: rgba(255, 255, 255, .86);
  border: 0;
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-shadow-nav);
  color: var(--ink);
}
.nav-list > li > a {
  color: var(--ink-2);
  border-radius: var(--g-pill);
  font-weight: 500;
}
.nav-list > li > a:hover,
.nav-list > li > a[aria-current] { color: var(--ink); background: rgba(15, 23, 42, .06); }
.nav-list > li > a[aria-current="page"] { color: var(--blue); }
.header-phone { color: var(--ink-2); }
.header-phone:hover { color: var(--blue); }
.lang-switch { color: var(--ink-2); border-color: var(--line-strong); border-radius: var(--g-pill); }
.lang-switch:hover { border-color: var(--blue); color: var(--blue); }
.cart-link { color: var(--ink-2); }
.cart-link:hover { color: var(--blue); }
.nav-toggle { color: var(--ink); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { background: var(--ink); }

/* Mega-Menü hell */
.mega-inner {
  background: #ffffff;
  border: 0;
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-shadow-pop);
}
.mega-grid a { color: var(--ink-2); border-radius: var(--g-r); }
.mega-grid a:hover { background: var(--paper); color: var(--ink); }
.mega-title { color: var(--ink); }
.mega-sub { color: var(--ink-3); }
.mega-grid img { border-radius: 10px; }
.mega-thumb { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }

/* Mobile Nav-Panel hell */
@media (max-width: 960px) {
  .nav-list { background: #fff; box-shadow: var(--g-shadow-pop); border-radius: var(--g-r-lg); }
  .nav-list > li > a { color: var(--ink); }
}

/* ---- Buttons: Pills mit Glow --------------------------------------------- */
.btn {
  border-radius: var(--g-pill);
  font-weight: 600;
  border: 0;
  padding: .9em 1.6em;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-primary { box-shadow: var(--g-shadow-btn); }
.btn-primary:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 113, 185, .55); }
.btn-outline { background: #fff; color: var(--ink); border: 0; box-shadow: var(--g-shadow-tile); }
.btn-outline:hover { color: var(--blue); transform: translateY(-2px); box-shadow: var(--g-shadow-pop); border: 0; }
.hero-cine .btn-outline, .sect-navy .btn-outline, .section-navy .btn-outline, .cta-block .btn-outline, .band .btn-outline {
  background: rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 0; box-shadow: none;
}
.hero-cine .btn-outline:hover, .sect-navy .btn-outline:hover, .section-navy .btn-outline:hover,
.cta-block .btn-outline:hover, .band .btn-outline:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* ---- Karten: Radien + Soft-Shadows statt Borders -------------------------- */
.tool-grid a, .path-tile {
  border: 0; border-radius: var(--g-r-tile); overflow: hidden;
  background: #fff; box-shadow: var(--g-shadow-card);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.tool-grid a:hover, .path-tile:hover { border: 0; transform: translateY(-4px); box-shadow: var(--g-shadow-card-hov); }
.sect-navy .path-tile, .section-navy .path-tile { border: 0; }
.pick-grid a, .pick-grid .pick {
  border: 0; border-radius: var(--g-r-lg); background: #fff; box-shadow: var(--g-shadow-tile);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pick-grid a:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-card); }
.sect-navy .pick-grid a, .sect-navy .pick-grid .pick,
.section-navy .pick-grid a, .section-navy .pick-grid .pick { background: rgba(255, 255, 255, .06); }
.fact-grid > div { border: 0; border-radius: var(--g-r-lg); background: #fff; box-shadow: var(--g-shadow-tile); }
.sect-navy .fact-grid > div, .section-navy .fact-grid > div { background: rgba(255, 255, 255, .06); }

.quick-answer { border: 0; border-radius: var(--g-r-lg); box-shadow: var(--g-shadow-tile); }
.accessory-module { border: 0; border-radius: var(--g-r-lg); box-shadow: var(--g-shadow-tile); }
.sect-navy .accessory-module { background: rgba(255, 255, 255, .06); box-shadow: none; }
.contact-card { border: 0; border-radius: var(--g-r-tile); box-shadow: var(--g-shadow-card); background: #fff; padding: var(--sp-6); }
.cta-block { border-radius: var(--g-r-tile-lg); }
.sect-navy .cta-block { border: 0; }

/* Bilder als Bento-Tiles */
.sect-media figure, .article-body figure { border-radius: var(--g-r-tile-lg); overflow: hidden; box-shadow: var(--g-shadow-tile); }
.sect-media img { border-radius: 0; }
.band-media, .band { border-radius: 0; }

/* Tabellen als weiche Objekte */
.table-wrap { background: #fff; border-radius: var(--g-r-lg); box-shadow: var(--g-shadow-tile); padding: var(--sp-4) var(--sp-5); }
.sect-navy .table-wrap { background: rgba(255, 255, 255, .05); box-shadow: none; }

/* Formulare */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border-radius: var(--g-r); border-color: var(--line-strong);
}

/* ---- Feinschliff ----------------------------------------------------------- */
.breadcrumb a:hover { color: var(--blue); }
.register-row, .solutions > div { border-radius: var(--g-r-lg); }
.hero-facts > div, .stats-band > div { border-radius: var(--g-r-lg); }
.process li::before { border-radius: var(--g-pill); }
.faq { border-top: 0; }
.faq details { border: 0; border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 500; }
.legal h2, .legal h3 { font-weight: 700; }