/* ---- fonts.css ---- */
/* Networkhero webfonts — copied from the live site (local-google-fonts cache).
   Poppins = display/headline font on networkhero.eu
   Open Sans = body font; also the brandbook-sanctioned alternative to Museo Sans.
   NOTE: brandbook primary font is Museo Sans 300/700 (commercial, not in codebase). */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/open-sans-300.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/open-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/open-sans-700.woff2") format("woff2");
}


/* ---- colors.css ---- */
/* Networkhero color system.
   Core palette = Brandbook 2025-09-15 (authoritative).
   Usage ratio per brandbook: 60% white · 25% blue · 5% light blue · 5% salmon · 5% anthracite. */
:root {
  /* ----- Base palette (brandbook) ----- */
  --nwh-white: #FFFFFF;
  --nwh-light-blue: #82CFEF; /* CMYK 50,0,0,0 */
  --nwh-blue: #1D9DD9;       /* CMYK 75,22,0,0 */
  --nwh-salmon: #EF9093;     /* CMYK 0,55,30,0 */
  --nwh-anthracite: #424243; /* CMYK 65,55,53,55 */

  /* Web kit values (live networkhero.eu Elementor kit — legacy, kept for fidelity) */
  --nwh-blue-web: #009EE2;
  --nwh-light-blue-web: #7FCEF0;
  --nwh-salmon-web: #FC8E8C;

  /* Derived tints/shades (oklch-mixed from brand blues) */
  --nwh-blue-700: #1481B5;
  --nwh-blue-100: #DCF0FA;
  --nwh-blue-50: #EFF8FD;
  --nwh-gray-100: #F7F7F7;  /* alt section background on site */
  --nwh-gray-300: #D7D7D8;
  --nwh-gray-600: #1C1C1C;
  --nwh-text-gray: #1C1C1C; /* body copy color on site */

  /* ----- Semantic aliases ----- */
  --color-primary: var(--nwh-blue);
  --color-primary-hover: var(--nwh-blue-700);
  --color-secondary: var(--nwh-light-blue);
  --color-accent: var(--nwh-salmon);
  --color-ink: var(--nwh-anthracite);

  --surface-page: var(--nwh-white);
  --surface-alt: var(--nwh-gray-100);
  --surface-brand: var(--nwh-blue);
  --surface-dark: var(--nwh-anthracite);

  --text-heading: var(--nwh-blue);     /* headlines are brand blue on light */
  --text-body: var(--nwh-text-gray);
  --text-on-dark: var(--nwh-white);
  --text-muted: var(--nwh-gray-600);
  --text-kicker: var(--nwh-blue);

  --link: var(--nwh-salmon);           /* site: links accent, hover light blue */
  --link-hover: var(--nwh-light-blue);

  --border-subtle: var(--nwh-gray-300);
  --focus-ring: var(--nwh-light-blue);

  /* Signature gradients */
  --gradient-cta: linear-gradient(90deg, var(--nwh-salmon) 0%, var(--nwh-light-blue) 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); /* @kind color */
  --gradient-blue-band: linear-gradient(115deg, var(--nwh-blue) 0%, #2BAAE2 55%, var(--nwh-light-blue) 100%);
}


/* ---- typography.css ---- */
/* Networkhero typography tokens.
   Brandbook primary face: Museo Sans 300/700 (commercial; NOT shipped).
   Website faces (shipped): Poppins (display) + Open Sans (body, brandbook alternative). */
:root {
  --font-display: "Open Sans", -apple-system, sans-serif; /* brandbook alternative for Museo Sans */
  --font-display-legacy: "Poppins", "Open Sans", sans-serif; /* live-site heading face, legacy only */
  --font-body: "Open Sans", -apple-system, sans-serif;

  /* Headline system: uppercase, tight leading, brand blue */
  --display-weight: 700;
  --display-light-weight: 300;
  --display-transform: uppercase; /* @kind other */
  --display-leading: 1.05;
  --display-tracking: 0.5px;

  /* Scale (from live site: kicker 1.1em · H2 3.5em/55px · body 1.1em lh1.7) */
  --text-hero: 55px;
  --text-h1: 48px;
  --text-h2: 40px;
  --text-h3: 26px;
  --text-h4: 20px;
  --text-kicker-size: 15px;
  --text-body-size: 17px;
  --text-small: 14px;
  --text-button: 16px;

  --body-weight: 300;
  --body-leading: 1.7;
  --body-tracking: 0.5px;

  --kicker-tracking: 1px;
  --button-tracking: 1.5px;
}


/* ---- spacing.css ---- */
/* Networkhero spacing, radii, shadows, layout, motion. */
:root {
  /* Spacing scale (site uses 20px widget rhythm + %-based section padding) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;   /* base widget spacing */
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 60px;
  --space-8: 80px;
  --space-section: 96px; /* ≈5% viewport section padding */

  /* Radii: site is mostly square; pills for buttons only */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-card: 12px;
  --radius-pill: 50px;

  /* Layout */
  --container-max: 1140px;
  --header-height: 125px;

  /* Shadows (used sparingly; site is flat) */
  --shadow-soft: 0 10px 30px rgba(66, 66, 67, 0.12);
  --shadow-card: 0 4px 18px rgba(29, 157, 217, 0.10);

  /* Motion: gentle fades/colors, .3s default (Elementor), long slow image fx */
  --ease-default: ease; /* @kind other */
  --duration-fast: 0.2s; /* @kind other */
  --duration-default: 0.3s; /* @kind other */
  --duration-slow: 2.5s; /* @kind other */ /* image hover hue-rotate on site */
}


/* ---- base.css ---- */
/* Networkhero base element styles — minimal, token-driven. */
body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--text-heading);
  margin: 0;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--duration-default) var(--ease-default);
}
a:hover { color: var(--link-hover); }


/* ---- Seitenweite Regeln (aus dem Claude-Design-Export übernommen) ---- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #1C1C1C; font-family: var(--font-body, 'Open Sans', sans-serif); font-weight: 300; line-height: 1.7; letter-spacing: 0.5px; }
:root { --text-heading: #1C1C1C; --text-kicker: #1C1C1C; }
a { color: #1C1C1C; text-decoration: underline; text-underline-offset: 3px; transition: color .3s ease; }
a:hover { color: #1D9DD9; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #1D9DD9; outline-offset: 2px; }

/* ---- Wahlomat / dynamische Elemente ---- */
.wm-opt:hover { border-color: #1D9DD9 !important; }
.btn-blue:hover { background: #1481B5 !important; color: #fff !important; }
.btn-outline:hover { background: #F7F7F7 !important; }
.link-blue:hover { color: #1D9DD9 !important; }

/* ---- Mobile: Innenabstände der Inline-Styles verkleinern ---- */
@media (max-width: 640px) {
  header[style*="padding: 28px 48px"], header[style*="padding:28px 48px"],
  header[style*="padding: 22px 48px"], header[style*="padding:22px 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="48px"], main[style*="48px"], footer[style*="48px"], div[style*="padding: 0px 48px"], div[style*="padding:0 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="padding: 40px"], section[style*="padding: 40px"], div[style*="padding:40px"] { padding: 24px !important; }
  aside[style*="position: fixed"], aside[style*="position:fixed"] { right: 12px !important; bottom: 12px !important; }
  nav[style*="gap: 28px"] { gap: 14px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Brevo-Anfrageformular im Seitendesign ---- */
.sib-form { text-align: left !important; padding: 0 !important; }
#sib-container { max-width: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; text-align: left !important; }
.sib-form .sib-form-block { padding: 0 !important; }
.sib-form .form__entry { margin: 0 !important; }
.sib-form .entry__label { font-family: var(--font-display) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 1px; color: #1C1C1C !important; margin-bottom: 6px !important; }
.sib-form .input { font-family: var(--font-body) !important; font-size: 15px !important; color: #1C1C1C !important; border: 1px solid #D7D7D8 !important; border-radius: 0 !important; padding: 12px 14px !important; height: auto !important; box-shadow: none !important; background: #fff !important; }
.sib-form .input:focus { border-color: #1D9DD9 !important; outline: none !important; }
.sib-form textarea.input { min-height: 140px; resize: vertical; }
.sib-form .entry__choice { white-space: normal !important; overflow: visible !important; padding-left: 1.6em !important; text-indent: -1.6em !important; }
.sib-form .entry__choice label { display: inline !important; cursor: pointer; }
.sib-form .entry__choice p { margin: 0; font-size: 14px; line-height: 1.6; }
.sib-form .checkbox { margin-right: .6em !important; }
.sib-form .input_replaced:checked + .checkbox_tick_positive { background: #1D9DD9 !important; border-color: #1D9DD9 !important; }
.sib-form .sib-form-block__button { font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 1.2px; background: #1D9DD9 !important; color: #fff !important; border-radius: 50px !important; padding: 14px 28px !important; margin-top: 8px; transition: background .3s ease; }
.sib-form .sib-form-block__button:hover { background: #1481B5 !important; }
.sib-form .sib-form-message-panel { max-width: none !important; margin-bottom: 16px; border-radius: 0 !important; }
.sib-form .entry__error { border-radius: 0 !important; font-size: 13px !important; }

/* ---- Header-Navigation: zehn Punkte in einer Zeile halten ---- */
@media (min-width: 1024px) {
  header nav[style*="gap: 28px"], header nav[style*="gap:28px"] { gap: 18px !important; }
  header nav[style*="gap: 28px"] a, header nav[style*="gap:28px"] a { font-size: 12px !important; letter-spacing: 1px !important; }
}

/* ---- Schrift schwarz und gut lesbar (Kundenwunsch) ---- */
body { font-weight: 400; color: #1C1C1C; }
:root { --text-body: #1C1C1C; --text-muted: #1C1C1C; --body-weight: 400; }
[style*="font-weight: 300"] { font-weight: 400 !important; }

/* ---- Kennzahlen in Produktkarten: Preis immer über volle Breite ---- */
div[style*="minmax(130px, 1fr)"] > div:last-child:not(:first-child) { grid-column: 1 / -1; }

/* ---- Mobile: Struktur, Bildreihenfolge, Navigation ---- */
@media (max-width: 640px) {
  /* Produktkarten: Bild immer oben, Text darunter (Desktop-Zickzack aufheben) */
  article[style*="display: grid"] > div[style*="min-height"] { order: -1 !important; min-height: 240px !important; }
  article[style*="display: grid"] > div[style*="order:"]:not([style*="min-height"]) { order: 0 !important; }
  article[style*="flex-direction: column"] > div[style*="min-height: 3"],
  article[style*="flex-direction: column"] > div[style*="min-height: 2"] { min-height: 240px !important; }
  article div[style*="padding: 40px"] { padding: 24px 20px !important; gap: 16px !important; }

  /* Überschriften kleiner, damit sie nicht in 4–5 Zeilen umbrechen */
  h1 { font-size: 30px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; line-height: 1.15 !important; }
  h3 { font-size: 20px !important; line-height: 1.2 !important; }
  p, li { overflow-wrap: break-word; hyphens: auto; }

  /* Schwebende Buttons (Wahlomat / AUMA) als schmale Leiste unten statt über dem Inhalt */
  aside[style*="position: fixed"] { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #D7D7D8; box-shadow: 0 -6px 20px rgba(66,66,67,.08); align-items: stretch !important; gap: 8px !important; }
  aside[style*="position: fixed"] > div[style*="flex-wrap: wrap"] { flex-wrap: nowrap !important; justify-content: stretch !important; gap: 8px !important; }
  aside[style*="position: fixed"] > a,
  aside[style*="position: fixed"] > div > a,
  aside[style*="position: fixed"] > div > button { flex: 1 1 0; justify-content: center; padding: 10px 8px !important; font-size: 10px !important; letter-spacing: .6px !important; box-shadow: none !important; }
  aside[style*="position: fixed"] > div > a, aside[style*="position: fixed"] > a { box-shadow: inset 0 0 0 2px #1D9DD9 !important; }
  aside[style*="position: fixed"] span[style*="white-space: nowrap"] { white-space: normal !important; text-align: center; line-height: 1.25; }
  aside[style*="position: fixed"] #auma-hilfe { max-height: calc(100vh - 140px) !important; }
  body { padding-bottom: 64px; }
}

/* ---- Header-Navigation mobil: Burger-Menü statt mehrzeiliger Linkliste (Button setzt site.js) ---- */
.nav-toggle { display: none; }
@media (max-width: 1023px) {
  header.has-nav-toggle { flex-wrap: nowrap !important; }
  header.has-nav-toggle.nav-open { z-index: 20 !important; }
  header.has-nav-toggle > nav { display: none !important; }
  header.has-nav-toggle.nav-open > nav {
    display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important;
    position: absolute; top: 100%; right: 12px; width: min(380px, calc(100% - 24px)); z-index: 20;
    padding: 8px 20px; background: #1C1C1C; box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  header.has-nav-toggle.nav-open > nav a { display: block; padding: 14px 0 !important; font-size: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  header.has-nav-toggle.nav-open > nav a:last-child { border-bottom: 0; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; flex: none;
    width: 44px; height: 44px; padding: 11px 10px; margin: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%;
    background: transparent; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Bilder: mobil im eigenen Seitenverhältnis statt 240-px-Streifen; Vollbild per Tipp (site.js) ---- */
@media (max-width: 640px) {
  article[style*="display: grid"] > div[style*="min-height"],
  article[style*="flex-direction: column"] > div[style*="min-height: 3"],
  article[style*="flex-direction: column"] > div[style*="min-height: 2"] { min-height: 0 !important; aspect-ratio: var(--img-ar, 3 / 2); }
  article figure img[style*="width: 120px"] { width: 84px !important; height: 84px !important; }
}
img.zoomable { cursor: zoom-in; }
figure[style*="pointer-events: none"] img.zoomable { pointer-events: auto; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 12px 20px; background: #000; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; display: block; }
.lightbox p { margin: 0; max-width: 720px; color: #fff; font-size: 14px; line-height: 1.5; text-align: center; }
.lightbox button { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
html.lightbox-open, html.lightbox-open body { overflow: hidden; }

/* ---- hover rules (generated from style-hover attributes) ---- */
.hv0:hover{color: rgb(130, 207, 239) !important}
.hv1:hover{background: rgb(220, 240, 250) !important;color: rgb(28, 28, 28) !important}
.hv2:hover{background: rgb(220, 240, 250) !important}
.hv3:hover{box-shadow: rgba(66, 66, 67, 0.12) 0px 10px 30px !important}
.hv4:hover{background: rgb(66, 66, 67) !important;color: rgb(255, 255, 255) !important}
.hv5:hover{background: rgb(20, 129, 181) !important;color: rgb(255, 255, 255) !important}
.hv6:hover{background: rgb(28, 28, 28) !important}
.hv7:hover{background:#1481B5 !important;color:#fff !important}
.hv8:hover{color:#82CFEF !important}
.hv9:hover{border-color: rgb(29, 157, 217) !important}
.hv10:hover{background: rgb(247, 247, 247) !important}
.hv11:hover{color: rgb(29, 157, 217) !important}
/* ---- Desktop: gestapelte Karten (Impress, Lumix, Alternativen) zeigen das ganze Foto wie im Claude-Design-Export.
   Dort richtet sich die Bildhöhe nach dem Seitenverhältnis des Fotos (3:2), statt fester 220–340 px, die unten abschneiden. ---- */
@media (min-width: 641px) {
  article[style*="flex-direction: column"] > div[style*="position: relative"][style*="min-height"] { min-height: 0 !important; aspect-ratio: var(--img-ar, 720 / 483); }
}