/* =====================================================
   DESIGN 2026 – ruhiger, hochwertiger, einheitlich (19.10.2026)
   =====================================================
   Liegt NACH style.css und ueberschreibt nur, was das Bild bestimmt. style.css ist ueber
   die Jahre gewachsen (mehrere "Upgrade"-Bloecke uebereinander); statt darin zu wuehlen, steht
   die neue Linie hier an einer Stelle. Wer zurueck will, nimmt diese eine Datei raus.

   Was sich aendert und warum (Recherche 19.10.2026: Stanford Web Credibility, Baymard,
   B2B-Industrie-Beispiele wie Protolabs/Xometry):
   - Abschnitte sind keine weissen Kaesten mehr. Box-in-Box sah nach Baukasten aus; jetzt
     traegt Weissraum, und jeder zweite Abschnitt liegt auf einem ruhigen Band ueber die
     ganze Breite - das gibt Rhythmus ohne Rahmen.
   - Lesbar: Fliesstext 17 px, Zeilen hoechstens ~70 Zeichen, dunklerer Grauton.
   - Knoepfe einheitlich: kein Verlauf, kein Glanz, keine Grossbuchstaben.
   - Karten flach mit feinem Rand, ohne Zierpunkte und Zierlinien.
   - Kein Einblenden beim Scrollen mehr: Inhalt ist sofort da (vorher kurz weisse Flaechen).
   ===================================================== */

:root {
  --bg: #fbfbfc;
  --band: #eff2f6;
  --surface: #ffffff;
  --edge: #e2e7ee;
  --edge-strong: #cdd5df;
  --text: #121826;
  --text-soft: #3d4757;
  --orange: #c94a0c;          /* Knopf-Orange: weiss darauf 4,6:1 */
  --orange-hover: #b23f08;
  --radius-card: 14px;
  --section-gap: clamp(56px, 7vw, 104px);
}

body {
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Abschnitte: Weissraum statt Kaesten ---------- */
.content > section:not(.hero):not(.highlight):not(.error-404):not(.trust-row):not(.conversion-band):not(.cta-panel):not(.stats-bar) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.content > section:not(.hero):not(.highlight):not(.error-404):not(.trust-row):not(.conversion-band):not(.cta-panel):not(.stats-bar)::before {
  content: none;
}
/* Band ueber die volle Breite fuer jeden zweiten Inhaltsabschnitt. Der Schatten-Trick malt
   die Flaeche bis an den Fensterrand, ohne das Raster der Seite anzufassen; clip-path
   verhindert, dass er nach oben/unten in den Nachbarn ragt. */
.content > section.band,
.content > section:not(.hero):not(.highlight):not(.error-404):not(.trust-row):not(.conversion-band):not(.cta-panel):not(.stats-bar):nth-of-type(even) {
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(calc(var(--section-gap) * -0.5) -100vmax);
  padding-block: calc(var(--section-gap) * 0.5);
}

/* ---------- Typografie ---------- */
h1 { font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -0.025em; }
h2 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.02em; margin-bottom: 18px; }
h3 { font-size: 20px; }
p, li { color: var(--text-soft); }
p { max-width: 68ch; }
.content section > p,
.content section > div > p { font-size: 17px; }

/* Kicker: ruhige Zeile statt Etikett-Kasten */
.kicker {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- Knoepfe ---------- */
.btn-primary,
.btn-secondary {
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  min-height: 50px;
  padding: 13px 24px;
}
.btn-primary,
.highlight .btn-primary,
.conversion-band .btn-primary,
.cta-panel .btn-primary {
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
  box-shadow: 0 1px 2px rgba(120, 40, 5, 0.2);
}
.btn-primary::after { content: none; }
.btn-primary:hover,
.highlight .btn-primary:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 74, 12, 0.25);
}
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--edge-strong);
  color: var(--ink);
  box-shadow: none;
}
.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
/* Auf den dunklen Abschluss-Flaechen: heller Zweitknopf statt grauem Kasten */
.highlight .btn-secondary,
.conversion-band .btn-secondary,
.cta-panel .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.highlight .btn-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); color: #fff; }

/* ---------- Karten: flach, feiner Rand ---------- */
.card {
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 26px 26px 24px;
}
.card::after { content: none; }
.card h3::before { content: none; }
.card h3 { display: block; margin-bottom: 10px; }
.card:hover {
  transform: none;
  border-color: var(--edge-strong);
  box-shadow: 0 10px 30px rgba(9, 15, 30, 0.07);
}
.card:hover h3 { color: inherit; }
/* Karten auf einem Band: weiss bleibt weiss, der Rand reicht */
.content > section:nth-of-type(even) .card { background: var(--surface); }

/* Karten mit Link als Ganzes: Pfeil-Link etwas kraeftiger */
.card .link { color: var(--accent-text); font-weight: 600; font-size: 15px; }

/* ---------- Kein Einblenden beim Scrollen ---------- */
.anim-ready,
.anim-ready.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Bilder ---------- */
.hero-image { border-radius: 16px; box-shadow: 0 18px 50px rgba(9, 15, 30, 0.14); }
.hero-image img { transition: transform .6s ease; }

/* ---------- Dunkle Abschluss-Flaeche ---------- */
.highlight {
  border-radius: 20px;
  padding: clamp(40px, 6vw, 76px);
}

/* ---------- Navigation: ruhiger ---------- */
.main-nav { box-shadow: 0 1px 0 var(--edge); }

/* "Nach oben" nicht als zweiter dunkler Kreis neben WhatsApp */
#back-to-top { opacity: .75; transform: scale(.85); }

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .card { padding: 22px 20px; }
  .content > section:not(.hero):not(.highlight):not(.error-404):not(.trust-row):not(.conversion-band):not(.cta-panel):not(.stats-bar):nth-of-type(even) {
    padding-block: 36px;
    clip-path: inset(-36px -100vmax);
  }
}

/* =====================================================
   TAG / NACHT – Knopf (19.10.2026)
   ===================================================== */
.theme-btn {
  order: 20;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.theme-btn:hover { border-color: var(--edge-strong); }
.theme-btn .theme-sonne { display: none; }
html.dunkel .theme-btn .theme-sonne { display: block; }
html.dunkel .theme-btn .theme-mond { display: none; }
@media (max-width: 900px) {
  .theme-btn { order: 0; margin-left: auto; }
  .nav-toggle { margin-left: 4px; }
}

/* =====================================================
   NACHT (html.dunkel) – 19.10.2026
   =====================================================
   Gesetzt vom Kopf der Seite (gespeicherte Wahl, sonst Geraeteeinstellung). Zuerst die
   Farbvariablen, dann alles, was in style.css fest hell eingetragen ist (Liste aus einer
   Pruefung aller Hintergruende/Raender, 19.10.2026). Orange fuer Schrift wird heller
   (--accent-text), sonst ist es auf Dunkel nicht lesbar; Knoepfe bleiben gleich.
   ===================================================== */
html.dunkel {
  color-scheme: dark;
  --bg: #0d1117;
  --band: #121821;
  --bg-soft: #121821;
  --surface: #161d27;
  --surface-2: #1b2430;
  --edge: #263141;
  --edge-strong: #3a4759;
  --line: #263141;
  --ink: #f1f4f8;
  --ink-soft: #e3e8ef;
  --text: #e3e8ef;
  --text-soft: #b3bdcb;
  --text-faint: #8f9bad;
  --text-muted: #8f9bad;
  --accent-text: #ff8f5c;
  --accent-2: #7fb3d5;
  --accent-3: #9cc3de;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 16px 44px rgba(0, 0, 0, 0.5);
}
html.dunkel body { background: var(--bg); color: var(--text); }
html.dunkel body::before { background: none; }
html.dunkel h1, html.dunkel h2, html.dunkel h3, html.dunkel h4 { color: var(--ink); }
html.dunkel strong, html.dunkel b { color: var(--ink); }

/* Navigation */
html.dunkel .main-nav { background: rgba(13, 17, 23, 0.88); box-shadow: 0 1px 0 var(--edge); }
html.dunkel .nav-menu a { color: var(--text); }
/* Der orange Knopf behaelt weisse Schrift (Pruefung 24.10.2026): Die Zeile darueber ist
   spezifischer als ".nav-menu a.btn-primary" in style.css - hellgrau auf Orange waren 3,8:1. */
html.dunkel .nav-menu a.btn-primary,
html.dunkel .nav-menu a.btn-primary:hover { color: #fff; }
html.dunkel .sub-menu { background: var(--surface); border-color: var(--edge); box-shadow: var(--shadow-strong); }
html.dunkel .nav-shop { background: var(--surface-2); border-color: var(--edge); color: var(--ink); }
html.dunkel .nav-toggle span { background: var(--ink); }
@media (max-width: 900px) {
  html.dunkel .main-nav { background: rgba(13, 17, 23, 0.98); }
  html.dunkel .nav-menu { background: var(--bg); border-top-color: var(--edge); }
}

/* Flaechen, die in style.css fest weiss sind */
html.dunkel .card,
html.dunkel .grid-4 div,
html.dunkel .home .offer-box,
html.dunkel .home .region-grid a,
html.dunkel .decision-card,
html.dunkel .hero-quote,
html.dunkel .trust-item,
html.dunkel .hero-card,
html.dunkel .notice,
html.dunkel .notice-inner,
html.dunkel .notice-box,
html.dunkel .faq-item,
html.dunkel .error-box,
html.dunkel .prep-item,
html.dunkel .material-route-card,
html.dunkel .material-route-cta,
html.dunkel .embed-shell,
html.dunkel .embed-loader,
html.dunkel .embed-fallback,
html.dunkel .action-chip,
html.dunkel .bewertung,
html.dunkel .vertrauen-zahl,
html.dunkel .filter-btn,
html.dunkel .shop-galerie-w,
html.dunkel .techdaten,
html.dunkel .zahlwahl,
html.dunkel .bankdaten {
  background: var(--surface);
  border-color: var(--edge);
  color: var(--text);
}
html.dunkel .content > section:nth-of-type(even) .card { background: var(--surface); }
html.dunkel .techdaten thead th { background: var(--surface-2); }
html.dunkel .home .hero { background: var(--bg); }
html.dunkel #kalkulator-rahmen { background: var(--surface); }
html.dunkel .card:hover { border-color: var(--edge-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* Formulare */
html.dunkel input,
html.dunkel select,
html.dunkel textarea {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--edge-strong);
}
html.dunkel input::placeholder, html.dunkel textarea::placeholder { color: var(--text-faint); }
html.dunkel .korb-menge-feld input { background: var(--surface-2); }

/* Knoepfe */
html.dunkel .btn-secondary,
html.dunkel .hero-actions .btn-secondary {
  background: transparent;
  border-color: var(--edge-strong);
  color: var(--ink);
}
html.dunkel .btn-secondary:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.04); color: var(--ink); }

/* Dunkle Abschluss-Flaeche: auf dunkler Seite etwas heller absetzen */
html.dunkel .highlight,
html.dunkel .content > section.conversion-band,
html.dunkel .content > section.cta-panel {
  /* !important (Pruefung 24.10.2026): style.css setzt .highlight mit !important - ohne das hier
     verlor diese Regel, und der Kasten blieb im Nachtmodus beim (hellen) Verlauf des Tagmodus. */
  background: linear-gradient(135deg, #1a2331 0%, #151c27 100%) !important;
  border: 1px solid var(--edge) !important;
}

/* Kleinkram */
html.dunkel .kicker { color: var(--accent-text); }
html.dunkel .breadcrumb, html.dunkel .breadcrumb a { color: var(--text-faint); }
html.dunkel hr { border-color: var(--edge); }
html.dunkel code, html.dunkel pre { background: var(--surface-2); color: var(--text); }
html.dunkel .termin-frei:not(.hd-termin) { background: rgba(34, 160, 90, 0.12); border-color: rgba(34, 160, 90, 0.35); color: var(--text); }
html.dunkel .hero-image { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
/* Fotos minimal zuruecknehmen, damit weisse Produktbilder nicht blenden */
html.dunkel .content img:not([src*="logo"]) { filter: brightness(.94); }
/* In style.css dient --ink auch als DUNKLE Flaeche. Im Nachtmodus ist --ink hell (Schrift),
   diese Flaechen bekommen deshalb ihr altes Dunkel fest zurueck. */
html.dunkel .skip-link,
html.dunkel .wa-float-tooltip,
html.dunkel .video-card,
html.dunkel #cookie-banner { background: #0b1220; }
html.dunkel .stats-bar { background: #0b1220; border: 1px solid var(--edge); }
html.dunkel .form-field input,
html.dunkel .form-field select,
html.dunkel .form-field textarea { background: var(--surface-2); color: var(--text); border-color: var(--edge-strong); }


/* =====================================================
   VERTRAUENSLEISTE ueber der Fusszeile (24.10.2026)
   Die Fusszeile ist in beiden Modi dunkel - deshalb feste Farben, kein html.dunkel noetig.
   ===================================================== */
.footer-vertrauen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fv-vorteile {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  color: #fff; font-weight: 600; font-size: .95rem;
}
.site-footer .fv-vorteile li { color: #fff; margin: 0; }   /* allgemeine li-Farbe (--text-soft) uebersteuern */
.fv-vorteile li::before { content: "✓"; color: #ff8f5c; margin-right: .45rem; }
.fv-reihe { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: flex-start; }
.fv-gruppe { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.fv-titel { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #8f9bad; }
.fv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fv-chips li {
  padding: .3rem .7rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e3e8ef; font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.fv-klein { font-size: .82rem; color: #aeb7c8; }
a.fv-sterne { color: #e3e8ef; text-decoration: none; }
a.fv-sterne:hover strong, a.fv-sterne:focus-visible strong { text-decoration: underline; }
.fv-stern { color: #f5b301; letter-spacing: .05em; }
@media (max-width: 600px) {
  .footer-vertrauen { padding: 1.3rem 1rem 1.1rem; }
  .fv-vorteile { font-size: .9rem; gap: .35rem 1rem; }
}