/* ══════════════════════════════════════════════════════════
   3D-HERO Design-System (Divi-Child) — geladen als eigenes
   Stylesheet, damit Divis Dynamic-CSS-Pipeline es nicht anfasst.
   ══════════════════════════════════════════════════════════ */
:root {
  --dh-night: #070D17;
  --dh-panel: #0B1523;
  --dh-panel-2: #0E1B2E;
  --dh-line: rgba(143, 194, 238, 0.14);
  --dh-blue-deep: #0C4B80;
  --dh-blue: #1369B0;
  --dh-blue-bright: #1E7FD1;
  --dh-gold: #F5B942;
  --dh-text: #D7E5F2;
  --dh-strong: #FFFFFF;
  --dh-muted: #8AA3BC;
  --dh-bg: var(--dh-night);
  --dh-header-bg: rgba(7, 13, 23, 0.82);
  --dh-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --dh-font: "Archivo", system-ui, -apple-system, sans-serif;
}
html[data-theme="light"] {
  --dh-bg: #F4F7FA;
  --dh-panel: #FFFFFF;
  --dh-panel-2: #EDF2F7;
  --dh-line: rgba(12, 45, 78, 0.12);
  --dh-text: #263B50;
  --dh-strong: #0B1B2B;
  --dh-muted: #5F7A93;
  --dh-header-bg: rgba(244, 247, 250, 0.85);
  --dh-shadow: 0 24px 60px rgba(12, 45, 78, 0.12);
}

/* Textgrößen-Stufen (Barrierefreiheit) */
html[data-font="2"] { font-size: 115%; }
html[data-font="3"] { font-size: 130%; }

/* ── Grundfläche ── */
body {
  background: var(--dh-bg) !important;
  color: var(--dh-text);
  font-family: var(--dh-font);
  transition: background 0.35s ease, color 0.35s ease;
}
#main-content, #et-main-area, #page-container { background: var(--dh-bg) !important; }
::selection { background: var(--dh-blue); color: #fff; }
:focus-visible { outline: 2px solid var(--dh-gold); outline-offset: 3px; }

body p, body li { color: var(--dh-text); }
h1, h2, h3, h4, h5 { color: var(--dh-strong); font-family: var(--dh-font); }

/* ── Divi-Header dunkel & transparent ── */
#main-header, #top-header, header.et-l--header {
  background: var(--dh-header-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--dh-line) !important;
}
#main-header .nav li a, #et-top-navigation .menu-item a,
#main-header .et_nav_text_color_light li a {
  color: var(--dh-muted) !important;
  font-family: var(--dh-font);
  font-weight: 500;
  transition: color 0.2s ease;
}
#main-header .nav li a:hover, #et-top-navigation .menu-item a:hover,
#main-header .nav li.current-menu-item a {
  color: var(--dh-strong) !important;
  opacity: 1;
}
#et_search_icon:before, .et_search_field { color: var(--dh-muted) !important; }
#et_mobile_nav_menu .mobile_nav, .et_mobile_menu {
  background: var(--dh-panel) !important;
}
.et_mobile_menu li a { color: var(--dh-text) !important; }
.mobile_menu_bar::before { color: var(--dh-strong) !important; }

/* Logo: Bild ausblenden, JS injiziert Kubus + Wortmarke */
#main-header .logo_container img, .logo_container img { display: none; }
.dh-logo {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; line-height: 1; height: 100%;
}
.dh-logo svg { width: 36px; height: 36px; display: block; }
.dh-logo .dh-word {
  font-family: var(--dh-font); font-weight: 800; font-size: 1.3rem;
  letter-spacing: 0.015em; color: var(--dh-strong); white-space: nowrap;
}
.dh-logo .dh-word b { color: var(--dh-blue-bright); font-weight: 800; }
.dh-logo .dh-word i {
  font-style: normal; color: var(--dh-gold);
  font-size: 0.66em; margin: 0 0.1em;
}
.logo_container { display: flex; align-items: center; overflow: visible; }

/* Logo XXL — deutlich vergrößert, darf über den Header hinausragen */
#main-header, #main-header .container, #main-header .logo_container,
#main-header #et-top-navigation { overflow: visible !important; }
.dh-logo { gap: 16px; position: relative; z-index: 30; }
.dh-logo svg { width: 104px; height: 104px; }
.dh-logo .dh-word { font-size: 3.1rem; }
@media (max-width: 1100px) {
  .dh-logo svg { width: 78px; height: 78px; }
  .dh-logo .dh-word { font-size: 2.3rem; }
}
@media (max-width: 820px) {
  .dh-logo svg { width: 56px; height: 56px; }
  .dh-logo .dh-word { font-size: 1.7rem; }
}

/* Mehr Abstand des Headers zum oberen Browserrand */
#main-header .et_menu_container { padding-top: 26px; padding-bottom: 6px; }
#main-header.et-fixed-header .et_menu_container { padding-top: 16px; }
@media (max-width: 980px) {
  #main-header .et_menu_container,
  #main-header.et-fixed-header .et_menu_container { padding-top: 16px; }
}

/* ── Floating Controls (Theme-Toggle) ── */
.dh-controls {
  position: fixed; right: 18px; bottom: 18px; z-index: 99990;
  display: flex; flex-direction: column; gap: 10px;
}
.dh-icon-btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--dh-line);
  background: var(--dh-panel); color: var(--dh-text);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--dh-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.dh-icon-btn:hover { transform: scale(1.07); border-color: var(--dh-gold); color: var(--dh-strong); }
html[data-theme="dark"] .dh-icon-sun { display: none; }
html[data-theme="light"] .dh-icon-moon { display: none; }

/* ── Scroll-Fortschritt ── */
.dh-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; }
.dh-progress span {
  display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--dh-blue), var(--dh-blue-bright), var(--dh-gold));
}

/* ── Typo-Bausteine ── */
.dh-eyebrow, .dh-eyebrow p {
  font-size: 0.8rem !important; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dh-muted) !important; font-weight: 600;
}
.dh-eyebrow .dh-chev { color: var(--dh-gold); font-weight: 700; }
.dh-h2, .dh-h2 h2 {
  font-size: clamp(2rem, 4.6vw, 3.3rem) !important; font-weight: 800 !important;
  line-height: 1.08 !important; letter-spacing: -0.015em;
  color: var(--dh-strong) !important;
}
.dh-h2 em, .dh-hl {
  font-style: normal;
  background: linear-gradient(100deg, var(--dh-blue-bright), var(--dh-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Divi-Buttons im 3D-HERO-Stil ── */
.dh-btn.et_pb_button, .dh-btn .et_pb_button, a.dh-btn {
  font-family: var(--dh-font) !important; font-weight: 600 !important;
  font-size: 0.95rem !important; border-radius: 999px !important;
  padding: 0.9em 1.9em !important; border: 1px solid transparent !important;
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright)) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(19, 105, 176, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-block; text-decoration: none;
}
.dh-btn.et_pb_button:hover, .dh-btn .et_pb_button:hover, a.dh-btn:hover {
  box-shadow: 0 14px 34px rgba(19, 105, 176, 0.5);
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright)) !important;
  padding: 0.9em 1.9em !important;
}
.dh-btn.et_pb_button::after, .dh-btn .et_pb_button::after { display: none; }
.dh-btn--ghost.et_pb_button, .dh-btn--ghost .et_pb_button {
  background: transparent !important; border-color: var(--dh-line) !important;
  color: var(--dh-text) !important; box-shadow: none;
}
.dh-btn--ghost.et_pb_button:hover { border-color: var(--dh-gold) !important; color: var(--dh-strong) !important; }
.et_pb_button_module_wrapper { display: inline-block; margin-right: 14px; }

/* ══════════════════ HERO ══════════════════ */
.dh-hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  padding-top: 140px !important; padding-bottom: 110px !important;
}
html.dh-snap .dh-hero { min-height: 800px; height: 800px; }
.dh-hero canvas.dh-hero-canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  pointer-events: none;
}
.dh-hero .et_pb_row { position: relative; z-index: 2; }
.dh-hero-title, .dh-hero-title h1 {
  font-size: clamp(2.6rem, 7vw, 5.2rem) !important; font-weight: 800 !important;
  line-height: 1.02 !important; letter-spacing: -0.02em; color: var(--dh-strong) !important;
  margin-bottom: 0.35em; padding-bottom: 0 !important;
}
.dh-hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.dh-hero-title .w { display: inline-block; }
.js .dh-hero-title .w { transform: translateY(115%); }
.dh-hero-sub, .dh-hero-sub p { font-size: clamp(1rem, 2vw, 1.18rem) !important; max-width: 660px; color: var(--dh-text) !important; }
.js .dh-hero-eyebrow, .js .dh-hero-sub, .js .dh-hero-cta { opacity: 0; }
html.dh-snap .dh-hero-eyebrow, html.dh-snap .dh-hero-sub, html.dh-snap .dh-hero-cta,
html.dh-snap .dh-reveal { opacity: 1 !important; transform: none !important; }
html.dh-snap .js .dh-hero-title .w, html.dh-snap .dh-hero-title .w { transform: none !important; }

/* Marquee */
.dh-marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid var(--dh-line);
  background: color-mix(in srgb, var(--dh-bg) 55%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden; width: 100%;
}
.dh-marquee__track {
  display: inline-flex; align-items: center; gap: 34px;
  padding: 14px 0; white-space: nowrap;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--dh-muted);
  animation: dhMarquee 28s linear infinite;
}
.dh-marquee__track .dh-chev { color: var(--dh-gold); }
@keyframes dhMarquee { to { transform: translateX(-50%); } }
html.dh-reduce .dh-marquee__track { animation: none; }

/* ══════════════════ SEKTIONEN ══════════════════ */
/* Divi gibt et_pb_section standardmäßig weißen Hintergrund — neutralisieren */
.dh-hero.et_pb_section,
.dh-section.et_pb_section:not(.dh-alt) { background-color: transparent !important; }
.dh-section { padding-top: clamp(80px, 11vw, 140px) !important; padding-bottom: clamp(80px, 11vw, 140px) !important; }
.dh-alt {
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(19, 105, 176, 0.09), transparent 60%),
    var(--dh-panel) !important;
  border-top: 1px solid var(--dh-line);
  border-bottom: 1px solid var(--dh-line);
}

/* ── Karten (Blurbs) ── */
.dh-card.et_pb_blurb {
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  border-radius: 18px; padding: 34px 30px !important;
  transition: border-color 0.25s ease;
  height: 100%;
}
html[data-theme="light"] .dh-card.et_pb_blurb { box-shadow: 0 8px 30px rgba(12, 45, 78, 0.07); }
.dh-card.et_pb_blurb:hover { border-color: rgba(245, 185, 66, 0.4); }
.dh-card .et_pb_main_blurb_image { margin-bottom: 20px; }
.dh-card .et_pb_main_blurb_image .et-pb-icon,
.dh-card .et_pb_main_blurb_image svg { color: var(--dh-blue-bright); fill: var(--dh-blue-bright); font-size: 52px; }
.dh-card .et_pb_module_header, .dh-card h4, .dh-card h4 span {
  font-size: 1.35rem !important; font-weight: 800 !important; color: var(--dh-strong) !important;
}
.dh-card .et_pb_blurb_description { color: var(--dh-text); font-size: 0.96rem; }
.dh-card .et_pb_blurb_description ul { list-style: none; padding: 0; margin-top: 16px; }
.dh-card .et_pb_blurb_description li { padding-left: 20px; position: relative; margin-bottom: 7px; font-size: 0.93rem; }
.dh-card .et_pb_blurb_description li::before {
  content: "›"; position: absolute; left: 2px; color: var(--dh-gold); font-weight: 700;
}

/* ── Stats (Number Counter) ── */
.dh-stat.et_pb_number_counter {
  border-left: 2px solid var(--dh-blue); padding-left: 20px !important; text-align: left !important;
}
.dh-stat .percent, .dh-stat .percent p {
  font-family: var(--dh-font) !important;
  font-size: clamp(2.1rem, 4.4vw, 3rem) !important; font-weight: 800 !important;
  color: var(--dh-strong) !important; text-align: left !important; line-height: 1.15 !important;
}
.dh-stat .percent-sign { color: var(--dh-gold); }
.dh-stat .title, .dh-stat h3 {
  font-size: 0.82rem !important; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dh-muted) !important; text-align: left !important; font-weight: 600 !important;
}

/* ── Ablauf (Steps) ── */
.dh-steps-row { counter-reset: dhstep; }
.dh-step.et_pb_blurb { background: transparent; padding-top: 70px !important; position: relative; }
.dh-step.et_pb_blurb::before {
  counter-increment: dhstep;
  content: "0" counter(dhstep);
  position: absolute; top: 0; left: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dh-panel-2); border: 1px solid var(--dh-line);
  font-weight: 800; font-size: 0.95rem; color: var(--dh-gold);
  letter-spacing: 0.06em; font-family: var(--dh-font);
}
.dh-step .et_pb_module_header, .dh-step h4 span { font-size: 1.12rem !important; font-weight: 700 !important; color: var(--dh-strong) !important; }
.dh-step .et_pb_blurb_description { font-size: 0.94rem; color: var(--dh-text); }

/* ── Materialien ── */
.dh-mat.et_pb_blurb {
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  border-radius: 18px; padding: 26px 24px !important;
  position: relative; overflow: hidden; height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
html[data-theme="light"] .dh-mat.et_pb_blurb { box-shadow: 0 6px 22px rgba(12, 45, 78, 0.06); }
.dh-mat.et_pb_blurb:hover { transform: translateY(-4px); border-color: rgba(30, 127, 209, 0.45); }
.dh-mat::after {
  content: ""; position: absolute; top: 26px; right: 26px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--dh-dot, var(--dh-blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dh-dot, var(--dh-blue)) 22%, transparent);
}
.dh-mat--pla { --dh-dot: #57B26B; }
.dh-mat--petg { --dh-dot: #1E7FD1; }
.dh-mat--abs { --dh-dot: #D64545; }
.dh-mat--tpu { --dh-dot: #F5B942; }
.dh-mat--resin { --dh-dot: #9B6BD1; }
.dh-mat--nylon { --dh-dot: #8B98A5; }
.dh-mat .et_pb_module_header, .dh-mat h4 span { font-size: 1.18rem !important; font-weight: 800 !important; color: var(--dh-strong) !important; }
.dh-mat .dh-mat-tag {
  display: block; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dh-gold); margin: 2px 0 10px; font-weight: 600;
}
.dh-mat .et_pb_blurb_description { font-size: 0.93rem; }

/* ══════════════════ KONFIGURATOR ══════════════════ */
.dh-config { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: stretch; }
.dh-config__stage {
  position: relative;
  background: radial-gradient(60% 70% at 50% 45%, rgba(19, 105, 176, 0.16), transparent 70%), var(--dh-panel);
  border: 1px solid var(--dh-line); border-radius: 18px;
  min-height: 420px; overflow: hidden;
}
.dh-config__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-config__badge {
  position: absolute; top: 16px; left: 18px;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dh-muted); border: 1px solid var(--dh-line);
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--dh-bg) 60%, transparent);
}
.dh-config__panel {
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  border-radius: 18px; padding: 30px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.dh-config__panel p { margin-bottom: 0; }
.dh-config__row { display: flex; flex-direction: column; gap: 12px; }
.dh-config__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--dh-muted);
}
.dh-config__label output { color: var(--dh-strong); font-size: 0.95rem; letter-spacing: 0.02em; }
.dh-config input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--dh-blue) var(--fill, 33%), var(--dh-panel-2) var(--fill, 33%));
  cursor: pointer;
}
.dh-config input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--dh-gold); border: 3px solid var(--dh-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.dh-config input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--dh-gold); border: 3px solid var(--dh-bg);
}
/* Modell-Werkzeuge: Drehen (X/Y/Z, Grad) + Entfernen */
.dh-modeltools {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--dh-line); border-radius: 14px;
  display: grid; gap: 10px; background: var(--dh-panel-2);
}
.dh-modeltools__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dh-modeltools__head > span {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--dh-muted);
}
.dh-modeltools__del {
  background: none; border: 1px solid var(--dh-line); color: var(--dh-muted);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.8rem;
  cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.dh-modeltools__del:hover { border-color: #e85c50; color: #fff; background: #e85c50; }
.dh-rot { display: flex; align-items: center; gap: 12px; }
.dh-rot--scale { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--dh-line); }
/* Zufalls-Vorlagen-Sektion (Startseite) */
.dh-teasershop { padding: 90px 6vw; background: var(--dh-bg); }
.dh-teasershop__inner { max-width: 1200px; margin: 0 auto; }
.dh-teasershop h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin: 10px 0 8px; color: var(--dh-strong); }
.dh-teasershop__sub { color: var(--dh-muted); margin-bottom: 28px; }
.dh-teasershop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.dh-teasershop__card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border: 1px solid var(--dh-line); border-radius: 16px; background: var(--dh-panel-2);
  text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease;
}
.dh-teasershop__card:hover { transform: translateY(-4px); border-color: var(--dh-gold); }
.dh-teasershop__card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--dh-bg); }
.dh-teasershop__ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; background: var(--dh-bg); color: var(--dh-blue); font-size: 2rem; }
.dh-teasershop__card strong { color: var(--dh-strong); font-size: 0.95rem; line-height: 1.3; }
.dh-teasershop__card small { color: var(--dh-muted); }
.dh-teasershop__more {
  margin-top: 26px; background: none; border: 1px solid var(--dh-line); color: var(--dh-muted);
  border-radius: 999px; padding: 10px 22px; font: inherit; cursor: pointer;
}
.dh-teasershop__more:hover { border-color: var(--dh-gold); color: var(--dh-strong); }
/* Beispiel-Galerie (Schaustücke) */
.dh-examples { padding: 90px 6vw; background: var(--dh-bg); }
.dh-examples__inner { max-width: 1200px; margin: 0 auto; }
.dh-examples h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin: 10px 0 8px; color: var(--dh-strong); }
.dh-examples__sub { color: var(--dh-muted); margin-bottom: 30px; max-width: 760px; }
.dh-examples__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 720px) { .dh-examples__grid { grid-template-columns: repeat(2, 1fr); } }
.dh-examples__card {
  margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1px solid var(--dh-line); border-radius: 16px; background: var(--dh-panel-2);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.dh-examples__card:hover { transform: translateY(-4px); border-color: var(--dh-blue); }
.dh-examples__img {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 10px;
  background-repeat: no-repeat; background-size: 600% 600%;
  background-color: color-mix(in srgb, var(--dh-blue) 8%, transparent);
}
.dh-examples__card figcaption { color: var(--dh-strong); font-size: 0.92rem; line-height: 1.3; text-align: center; }
.dh-examples__more {
  margin-top: 28px; background: none; border: 1px solid var(--dh-line); color: var(--dh-muted);
  border-radius: 999px; padding: 10px 22px; font: inherit; cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.dh-examples__more:hover { border-color: var(--dh-gold); color: var(--dh-strong); }
.dh-rot__ax { width: 1em; font-weight: 700; color: var(--dh-strong); }
.dh-rot input[type="range"] { flex: 1; }
.dh-rot__num { display: flex; align-items: baseline; gap: 3px; color: var(--dh-muted); }
.dh-rot__num input {
  width: 4.4em; background: var(--dh-bg); border: 1px solid var(--dh-line);
  border-radius: 8px; color: var(--dh-strong); padding: 4px 6px;
  font: inherit; font-size: 0.85rem; text-align: right;
}
.dh-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.dh-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c); cursor: pointer; border: 2px solid var(--dh-line);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  padding: 0;
}
.dh-swatch:hover { transform: scale(1.12); }
.dh-swatch.is-active {
  border-color: var(--dh-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dh-gold) 35%, transparent);
}
.dh-dropzone {
  display: flex; align-items: center; gap: 16px;
  border: 1.5px dashed var(--dh-line); border-radius: 14px;
  padding: 18px 20px; cursor: pointer; color: var(--dh-muted);
  font-size: 0.9rem; line-height: 1.45;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.dh-dropzone:hover, .dh-dropzone.is-drag {
  border-color: var(--dh-blue-bright); color: var(--dh-text);
  background: rgba(19, 105, 176, 0.07);
}
.dh-dropzone.is-file { border-color: var(--dh-gold); border-style: solid; color: var(--dh-strong); }
.dh-dropzone svg { flex: 0 0 auto; color: var(--dh-blue-bright); }
.dh-config__quote {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--dh-line); padding-top: 20px;
  font-size: 0.85rem; color: var(--dh-muted);
}
.dh-config__quote strong { font-size: 1.7rem; font-weight: 800; color: var(--dh-strong); }
.dh-config__hint { font-size: 0.78rem; color: var(--dh-muted); }

/* ── Teaser ── */
.dh-teaser.et_pb_blurb {
  background: linear-gradient(135deg, rgba(19, 105, 176, 0.16), transparent 55%), var(--dh-panel);
  border: 1px solid var(--dh-line); border-radius: 18px;
  padding: 38px 32px !important; height: 100%;
}
.dh-teaser .dh-badge {
  display: inline-block; margin-bottom: 16px;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  color: #241a05; background: linear-gradient(90deg, var(--dh-gold), #ffd884);
  padding: 6px 12px; border-radius: 999px;
}
.dh-teaser .et_pb_module_header, .dh-teaser h4 span { font-size: 1.4rem !important; font-weight: 800 !important; color: var(--dh-strong) !important; }

/* ── Kontakt (Divi Contact Form) ── */
.dh-form .et_pb_contact_field input,
.dh-form .et_pb_contact_field textarea {
  background: var(--dh-panel) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 12px !important; color: var(--dh-strong) !important;
  font-family: var(--dh-font) !important; padding: 14px 16px !important;
  width: 100%;
}
.dh-form .et_pb_contact_field input:focus,
.dh-form .et_pb_contact_field textarea:focus {
  border-color: var(--dh-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(30, 127, 209, 0.2);
  outline: none;
}
.dh-form ::placeholder { color: var(--dh-muted) !important; }
.dh-form .et_pb_contact_form_label {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--dh-muted); display: block; margin-bottom: 8px;
}
.dh-form .et_pb_contact_captcha_question { color: var(--dh-strong); font-weight: 700; }
.dh-form .et_pb_contact_captcha { max-width: 90px; }
.dh-form .et_pb_contact_submit {
  font-family: var(--dh-font) !important; font-weight: 600 !important;
  border-radius: 999px !important; padding: 0.9em 1.9em !important;
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 10px 26px rgba(19, 105, 176, 0.35);
  cursor: pointer;
}
.dh-form .et-pb-contact-message { color: var(--dh-gold); }
/* ── Kontaktformular (Contact Form 7) im 3D-HERO-Look ── */
.dh-form .wpcf7 { max-width: 620px; }
.dh-form .wpcf7-form p { margin: 0 0 16px; }
.dh-form .wpcf7-form input[type="text"],
.dh-form .wpcf7-form input[type="email"],
.dh-form .wpcf7-form textarea {
  width: 100%;
  background: var(--dh-panel) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 12px !important; color: var(--dh-strong) !important;
  font-family: var(--dh-font) !important; font-size: 1rem; padding: 14px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dh-form .wpcf7-form textarea { min-height: 130px; resize: vertical; }
.dh-form .wpcf7-form input:focus, .dh-form .wpcf7-form textarea:focus {
  outline: none; border-color: var(--dh-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(30, 127, 209, 0.2);
}
.dh-form .wpcf7-form ::placeholder { color: var(--dh-muted) !important; }

/* Datei-Upload-Feld */
.dh-cf7-file { display: flex; flex-direction: column; gap: 10px; }
.dh-cf7-filelabel {
  font-size: 0.8rem; letter-spacing: 0.06em; color: var(--dh-muted);
}
.dh-form .wpcf7-form input[type="file"] {
  width: 100%; color: var(--dh-text); font-family: var(--dh-font); font-size: 0.9rem;
  background: var(--dh-panel); border: 1.5px dashed var(--dh-line);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
}
.dh-form .wpcf7-form input[type="file"]:hover { border-color: var(--dh-blue-bright); }
.dh-form .wpcf7-form input[type="file"]::file-selector-button {
  font-family: var(--dh-font); font-weight: 600; font-size: 0.85rem;
  margin-right: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: none; color: #fff;
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright));
}

/* Absenden-Button (hohe Spezifität, damit Divi ihn nicht überschreibt) */
.dh-form .wpcf7 input.wpcf7-submit,
.dh-form .wpcf7 input[type="submit"],
body .dh-form .wpcf7-form .wpcf7-submit {
  font-family: var(--dh-font) !important; font-weight: 600 !important; font-size: 0.95rem !important;
  border-radius: 999px !important; padding: 13px 28px !important;
  border: none !important; border-width: 0 !important;
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright)) !important;
  background-color: var(--dh-blue) !important;
  color: #fff !important; cursor: pointer; text-shadow: none !important;
  box-shadow: 0 10px 26px rgba(19, 105, 176, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dh-form .wpcf7 input.wpcf7-submit:hover,
.dh-form .wpcf7 input[type="submit"]:hover {
  box-shadow: 0 14px 34px rgba(19, 105, 176, 0.5) !important; transform: translateY(-1px);
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright)) !important;
  padding: 13px 28px !important; border: none !important;
}

/* Ladespinner & Statusmeldungen */
.dh-form .wpcf7-spinner { background: var(--dh-gold); }
.dh-form .wpcf7-response-output {
  border-radius: 12px !important; border: 1px solid var(--dh-line) !important;
  color: var(--dh-text) !important; font-family: var(--dh-font);
  margin: 18px 0 0 !important; padding: 14px 16px !important;
}
.dh-form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--dh-blue-bright) !important; color: var(--dh-strong) !important; }
.dh-form .wpcf7-form.invalid .wpcf7-response-output,
.dh-form .wpcf7-form.failed .wpcf7-response-output { border-color: #D64545 !important; }
.dh-form .wpcf7-not-valid-tip { color: #ff8f8f !important; font-size: 0.82rem; }
.dh-form .wpcf7-form input[aria-invalid="true"],
.dh-form .wpcf7-form textarea[aria-invalid="true"] { border-color: #D64545 !important; }

/* Honeypot: unsichtbar für Menschen, Falle für Bots */
.dh-cf7-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.dh-info h3, .dh-info h4 {
  font-size: 0.8rem !important; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dh-gold) !important; margin-bottom: 8px; margin-top: 22px;
}
.dh-info h3:first-child { margin-top: 0; }
.dh-info a { color: var(--dh-strong) !important; text-decoration: underline; text-decoration-color: var(--dh-blue-bright); text-underline-offset: 3px; }
.dh-info a:hover { color: var(--dh-blue-bright) !important; }

/* ── Divi-Footer ── */
#main-footer, #footer-bottom { background: var(--dh-bg) !important; border-top: 1px solid var(--dh-line); }
#footer-info, #main-footer p, #footer-info a { color: var(--dh-muted) !important; font-family: var(--dh-font); }
/* Social-Media-Icons entfernen */
#footer-bottom .et-social-icons, #main-footer .et-social-icons,
#top-header .et-social-icons, .et-social-icons { display: none !important; }

/* ══════════════════ INTRO ══════════════════ */
.dh-intro {
  position: fixed; inset: 0; z-index: 999999;
  background: #060B14; display: grid; place-items: center;
}
.dh-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-intro__logo {
  position: relative; z-index: 2; opacity: 0; transform: scale(0.94) translateY(110px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.dh-intro__logo .dh-word {
  font-family: var(--dh-font); font-weight: 800; color: #fff;
  font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: 0.015em;
}
.dh-intro__logo .dh-word b { color: var(--dh-blue-bright); }
.dh-intro__logo .dh-word i { font-style: normal; color: var(--dh-gold); font-size: 0.66em; margin: 0 0.1em; }
.dh-intro__claim {
  font-size: clamp(0.7rem, 1.6vw, 0.85rem); letter-spacing: 0.32em;
  text-transform: uppercase; color: #8AA3BC;
}
.dh-intro__skip {
  position: absolute; bottom: 34px; right: 38px; z-index: 3;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75); font-family: var(--dh-font);
  font-size: 0.85rem; padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.dh-intro__skip:hover { border-color: #fff; color: #fff; }
.dh-intro.is-done { pointer-events: none; }

/* ══════════════════ BARRIEREFREIHEIT ══════════════════ */
.dh-a11y { position: fixed; left: 18px; bottom: 18px; z-index: 99991; font-family: var(--dh-font); }
.dh-a11y__toggle {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--dh-blue); color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(19, 105, 176, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.dh-a11y__toggle:hover { transform: scale(1.07); background: var(--dh-blue-bright); }
.dh-a11y__panel {
  position: absolute; left: 0; bottom: 62px; width: min(320px, calc(100vw - 40px));
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  border-radius: 16px; padding: 22px; box-shadow: var(--dh-shadow);
}
.dh-a11y__title { font-size: 1rem !important; font-weight: 800; color: var(--dh-strong) !important; margin: 0 0 16px; }
.dh-a11y__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 0; border-top: 1px solid var(--dh-line);
}
.dh-a11y__label { font-size: 0.88rem; font-weight: 600; color: var(--dh-text); }
.dh-a11y__controls { display: flex; gap: 8px; }
.dh-a11y__btn {
  background: var(--dh-panel-2); border: 1px solid var(--dh-line); color: var(--dh-text);
  font-size: 0.8rem; font-weight: 600; padding: 7px 12px;
  border-radius: 8px; cursor: pointer; font-family: var(--dh-font);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.dh-a11y__btn:hover:not(:disabled) { border-color: var(--dh-gold); color: var(--dh-strong); }
.dh-a11y__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dh-a11y__btn.is-active { background: var(--dh-blue); border-color: var(--dh-blue); color: #fff; }
.dh-a11y__hint { font-size: 0.74rem; color: var(--dh-muted); margin: 12px 0 0; }

/* Lupe */
#page-container { transition: transform 0.18s ease-out; }
body.dh-magnify-on { overflow: hidden; }
body.dh-magnify-on #page-container {
  transform: scale(var(--dh-zoom, 1.9)); transition: none; cursor: zoom-in;
}
.dh-magnify-badge {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 999998; background: var(--dh-gold); color: #241a05;
  font-size: 0.8rem; font-weight: 700; padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); font-family: var(--dh-font);
}

/* ── Custom Cursor ── */
.dh-cursor { position: fixed; inset: 0; z-index: 999997; pointer-events: none; display: none; }
body.dh-has-cursor .dh-cursor { display: block; }
.dh-cursor__dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dh-gold); transform: translate(-50%, -50%);
}
.dh-cursor__ring {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 1.4px solid var(--dh-blue-bright); transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
  opacity: 0.7;
}
.dh-cursor.is-hover .dh-cursor__ring { width: 54px; height: 54px; opacity: 1; border-color: var(--dh-gold); }
body.dh-has-cursor, body.dh-has-cursor a, body.dh-has-cursor button, body.dh-has-cursor label { cursor: none; }
@media (pointer: coarse) { .dh-cursor { display: none; } }

/* ══════════════════ WOOCOMMERCE (Dark-Look) ══════════════════ */
.woocommerce-page #main-content, .woocommerce #main-content { padding-top: 120px; }
/* Volle Breite: leere Sidebar samt Trennlinie ausblenden */
.woocommerce-page #sidebar, .woocommerce #sidebar { display: none; }
.woocommerce-page #left-area, .woocommerce #left-area { width: 100% !important; }
.woocommerce-page #main-content .container::before,
.woocommerce #main-content .container::before { display: none !important; }
.woocommerce ul.products li.product {
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  border-radius: 18px; padding: 22px !important;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); border-color: rgba(30, 127, 209, 0.45); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--dh-font) !important; font-weight: 800 !important;
  font-size: 1.1rem !important; color: var(--dh-strong) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--dh-gold) !important; font-weight: 700; font-family: var(--dh-font);
}
.woocommerce ul.products li.product a img {
  border-radius: 12px; background: var(--dh-panel-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--dh-panel) !important; border-color: var(--dh-line) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--dh-text) !important; }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--dh-text); }
.woocommerce div.product .product_title { color: var(--dh-strong) !important; font-weight: 800 !important; font-family: var(--dh-font) !important; }

/* Woo-Buttons im 3D-HERO-Stil */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .wc-block-components-button, .woocommerce .single_add_to_cart_button {
  font-family: var(--dh-font) !important; font-weight: 600 !important;
  border-radius: 999px !important; padding: 0.8em 1.7em !important;
  background: linear-gradient(120deg, var(--dh-blue), var(--dh-blue-bright)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 10px 26px rgba(19, 105, 176, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.wc-block-components-button:hover { box-shadow: 0 14px 34px rgba(19, 105, 176, 0.5); transform: translateY(-1px); }

/* Formulare, Tabellen, Karten (Warenkorb, Kasse, Konto) */
.woocommerce table.shop_table, .woocommerce-cart table.cart,
.wc-block-cart, .wc-block-components-sidebar .wc-block-components-panel {
  background: var(--dh-panel); border: 1px solid var(--dh-line) !important;
  border-radius: 16px; color: var(--dh-text);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--dh-line) !important; color: var(--dh-text); }
.woocommerce table.shop_table th { color: var(--dh-strong); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce-page .select2-selection {
  background: var(--dh-panel) !important; border: 1px solid var(--dh-line) !important;
  border-radius: 12px !important; color: var(--dh-strong) !important;
  font-family: var(--dh-font) !important; padding: 12px 14px !important; height: auto !important;
}
.woocommerce form .form-row label { color: var(--dh-muted); font-size: 0.85rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 16px; margin-bottom: 6px;
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  border-radius: 10px; color: var(--dh-text); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { border-color: var(--dh-gold); color: var(--dh-strong); }

/* Hinweise / Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--dh-panel) !important; color: var(--dh-text) !important;
  border-top-color: var(--dh-blue-bright) !important;
  border-radius: 12px;
}
.woocommerce-message::before { color: var(--dh-gold) !important; }
.woocommerce-info::before { color: var(--dh-blue-bright) !important; }

/* Breadcrumb & Sortierung */
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-result-count { color: var(--dh-muted); }
.woocommerce .woocommerce-ordering select {
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  color: var(--dh-text); border-radius: 10px; padding: 8px 12px;
}
.woocommerce .quantity .qty {
  background: var(--dh-panel); border: 1px solid var(--dh-line);
  color: var(--dh-strong); border-radius: 10px; padding: 8px;
}
.woocommerce .star-rating span::before { color: var(--dh-gold); }
.woocommerce .onsale {
  background: var(--dh-gold) !important; color: #241a05 !important;
  font-weight: 700; border-radius: 999px;
}

/* ══════════════════ KONFIGURATOR — Material-Chips & Preisrechner ══════════════════ */
.dh-mats { display: flex; flex-wrap: wrap; gap: 9px; }
.dh-mchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dh-font); font-weight: 600; font-size: 0.9rem;
  color: var(--dh-text); background: var(--dh-panel-2);
  border: 1px solid var(--dh-line); border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dh-mchip:hover { transform: translateY(-1px); color: var(--dh-strong); }
.dh-mchip .dh-mdot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.dh-mchip.is-active {
  border-color: var(--dh-gold); color: var(--dh-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dh-gold) 30%, transparent);
}
.dh-config__sub { font-size: 0.82rem; color: var(--dh-muted); }

/* Materialabhängige Farbauswahl */
.dh-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-color {
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: var(--c); cursor: pointer; border: 2px solid var(--dh-line);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dh-color:hover { transform: scale(1.14); }
.dh-color.is-active {
  border-color: var(--dh-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dh-gold) 32%, transparent);
}
.dh-color--tp {
  background:
    linear-gradient(45deg, #c2cdd6 25%, transparent 25%, transparent 75%, #c2cdd6 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, #c2cdd6 25%, #eef3f7 25%, #eef3f7 75%, #c2cdd6 75%) 5px 5px / 10px 10px,
    #eef3f7;
}
.dh-config__quote small {
  display: block; font-size: 0.72rem; color: var(--dh-muted);
  margin-top: 3px; font-weight: 400; letter-spacing: 0;
}
.dh-config__prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dh-config__gross { font-size: 0.78rem; color: var(--dh-muted); font-weight: 500; }

/* Shop deaktiviert: Warenkorb-Icon im Header ausblenden */
#et-top-navigation .et-cart-info, #main-header .et-cart-info { display: none !important; }

/* ── Reveals ── */
.js .dh-reveal { opacity: 0; transform: translateY(34px); }
.js.dh-reduce .dh-reveal { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 1020px) {
  .dh-config { grid-template-columns: 1fr; }
  .dh-config__stage { min-height: 340px; }
}
@media (max-width: 767px) {
  .dh-hero { padding-top: 110px !important; padding-bottom: 120px !important; }
}