/* ============================================================
   RG Elektronikservice – style.css
   Light-first design, DM Sans, 12px border-radius
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;
  --bg-accent:   #EEF4FF;

  /* Surfaces */
  --surface:     #FFFFFF;
  --surface-2:   #F5F7FA;

  /* Borders */
  --border:      #E4E9F0;
  --border-2:    #D1D8E4;

  /* Text */
  --text:        #111827;
  --text-muted:  #6B7280;
  --text-light:  #9CA3AF;

  /* Accent – Blue (Reparatur) */
  --blue:        #2563EB;
  --blue-hover:  #1D4ED8;
  --blue-light:  #EFF6FF;
  --blue-mid:    #BFDBFE;

  /* Accent – Orange (3D-Druck) */
  --orange:      #EA580C;
  --orange-hover:#C2410C;
  --orange-light:#FFF7ED;
  --orange-mid:  #FED7AA;

  /* Accent – Green (Refurbished) */
  --green:       #059669;
  --green-hover: #047857;
  --green-light: #ECFDF5;
  --green-mid:   #A7F3D0;

  /* WhatsApp */
  --wa:          #25D366;
  --wa-hover:    #1DB954;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full:9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);

  /* Transitions */
  --t: 200ms ease;
  --t-slow: 350ms ease;

  /* Layout */
  --max-w: 1120px;
  --header-h: 64px;
}

[data-theme="dark"] {
  --bg:         #0B0F1A;
  --bg-alt:     #111827;
  --bg-accent:  #0F1E35;

  --surface:    #141D2E;
  --surface-2:  #1A2438;

  --border:     #243047;
  --border-2:   #2E3E5A;

  --text:       #F1F5F9;
  --text-muted: #94A3B8;
  --text-light: #64748B;

  --blue-light: #1E3A5F;
  --blue-mid:   #1E3A5F;
  --orange-light:#2D1A0A;
  --orange-mid: #4A2C0A;
  --green-light: #052E1C;
  --green-mid:  #053D25;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.2);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-slow), color var(--t-slow);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding-block: 88px;
}
.bg-alt {
  background: var(--bg-alt);
}
.section-accent {
  padding-block: 88px;
  background: var(--bg-accent);
}

/* ── Typography ─────────────────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 12px;
}
.section-sub {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.section-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-full);
  margin-bottom: 12px;
}
.tag-blue   { background: var(--blue-light);   color: var(--blue); }
.tag-orange { background: var(--orange-light);  color: var(--orange); }
.tag-green  { background: var(--green-light);   color: var(--green); }

/* ── Icons ──────────────────────────────────────────────────── */
.icon    { width: 20px; height: 20px; flex-shrink: 0; }
.icon-xs { width: 14px; height: 14px; flex-shrink: 0; }
.text-blue   { color: var(--blue); }
.text-orange { color: var(--orange); }
.text-green  { color: var(--green); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-size: .9375rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: 7px 16px; font-size: .875rem; }
.btn-lg { padding: 13px 28px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 4px 16px rgba(37,99,235,.35); }

.btn-orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(234,88,12,.3);
}
.btn-orange:hover { background: var(--orange-hover); box-shadow: 0 4px 16px rgba(234,88,12,.35); }

.btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(5,150,105,.3);
}
.btn-green:hover { background: var(--green-hover); box-shadow: 0 4px 16px rgba(5,150,105,.35); }

.btn-outline-green {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn-outline-green:hover { background: var(--green-light); }

.btn-wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}
.btn-wa:hover { background: var(--wa-hover); box-shadow: 0 4px 16px rgba(37,211,102,.35); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

/* ── HEADER ─────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-slow), border-color var(--t-slow);
}
[data-theme="dark"] .header {
  background: rgba(11,15,26,.85);
}
.header.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 8px;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 36px;
  width: auto;
}
/* Logo wechselt automatisch mit dem Hell-/Dunkel-Modus */
.logo-dark-only { display: none; }
[data-theme="dark"] .logo-light-only { display: none; }
[data-theme="dark"] .logo-dark-only { display: inline-block; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-link {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t), background var(--t);
}
.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: var(--surface-2);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background var(--t), color var(--t);
}
.theme-btn:hover { background: var(--surface-2); color: var(--text); }

/* Sun/Moon toggle logic */
[data-theme="light"] .icon-moon-show { display: none; }
[data-theme="dark"]  .icon-sun-show  { display: none; }

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
}
.hamburger-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}

/* ── MOBILE OVERLAY ──────────────────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 8, 18, 0.98);
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-overlay-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mobile-close-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: var(--r-full);
  color: #fff;
  margin-bottom: 32px;
}
.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mobile-link {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: color var(--t);
}
.mobile-link:hover { color: #fff; }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  padding-block: 100px 80px;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-accent) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}

.hero-title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 20px;
}
.hero-accent { color: var(--blue); }

.hero-sub {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 36px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.pill-blue   { background: var(--blue-light);   color: var(--blue);   border-color: var(--blue-mid); }
.pill-orange { background: var(--orange-light);  color: var(--orange); border-color: var(--orange-mid); }
.pill-green  { background: var(--green-light);   color: var(--green);  border-color: var(--green-mid); }

/* ── SERVICES GRID ──────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.svc-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.svc-icon svg { width: 26px; height: 26px; }
.svc-icon-blue   { background: var(--blue-light);   color: var(--blue); }
.svc-icon-orange { background: var(--orange-light);  color: var(--orange); }
.svc-icon-green  { background: var(--green-light);   color: var(--green); }

.service-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.service-card p {
  font-size: .9375rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
  flex: 1;
}
.svc-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .875rem;
  color: var(--text-muted);
}
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  margin-top: auto;
  transition: gap var(--t);
}
.svc-link:hover { gap: 10px; }
.svc-link-blue   { color: var(--blue); }
.svc-link-orange { color: var(--orange); }
.svc-link-green  { color: var(--green); }

/* ── SPLIT LAYOUT ───────────────────────────────────────────── */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }

.split-text { display: flex; flex-direction: column; gap: 0; }
.split-text .section-title { margin-bottom: 12px; }
.split-text .section-sub { margin-bottom: 32px; }

/* ── PROCESS STEPS ──────────────────────────────────────────── */
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
}
.step {
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
  position: relative;
}
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.step-num-blue { background: var(--blue-light); color: var(--blue); border: 2px solid var(--blue-mid); }
.step-body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step-body strong { font-size: 1rem; font-weight: 600; }
.step-body span { font-size: .9rem; color: var(--text-muted); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 28px;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
}
.trust-row .icon-xs { color: var(--blue); }

/* ── DEVICE GRID ────────────────────────────────────────────── */
.visual-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.device-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.device-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), border-color var(--t);
}
.device-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-mid); }
.device-card.device-card-more:hover { border-color: var(--border-2); }
.device-icon {
  width: 44px;
  height: 44px;
  background: var(--blue-light);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.device-icon svg { width: 22px; height: 22px; }
.device-card strong { font-size: .9375rem; font-weight: 600; display: block; }
.device-card small { font-size: .8125rem; color: var(--text-muted); }

.device-card-more .device-icon { background: var(--surface-2); color: var(--text-muted); }

/* ── 3D PRINT – Tags & Quality ──────────────────────────────── */
.tag-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.tag {
  padding: 5px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-muted);
}
.tag-orange-bg {
  background: var(--orange-light);
  color: var(--orange);
  border-color: var(--orange-mid);
}

.quality-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.quality-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.qdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qdot-1 { background: #9CA3AF; }
.qdot-2 { background: #F59E0B; }
.qdot-3 { background: #F97316; }
.qdot-4 { background: #EA580C; }

.quality-item strong { font-size: .9rem; font-weight: 600; display: block; }
.quality-item small  { font-size: .8125rem; color: var(--text-muted); }

/* ── CARD (form wrapper) ────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.card-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.card-sub {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ── FORMS ──────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-group:last-of-type { margin-bottom: 20px; }

label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: .9375rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
input::placeholder, textarea::placeholder { color: var(--text-light); }
textarea { resize: vertical; min-height: 80px; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }

.form-hint {
  text-align: center;
  font-size: .8125rem;
  color: var(--text-light);
  margin-top: 12px;
}
.form-hint a { color: var(--blue); text-decoration: underline; }

/* ── REFURBISHED CHECKS ─────────────────────────────────────── */
.check-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.check-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.check-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.check-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.check-icon svg { width: 24px; height: 24px; }
.check-icon-green { background: var(--green-light); color: var(--green); }
.check-card strong { font-size: .9375rem; font-weight: 600; display: block; margin-bottom: 8px; }
.check-card p { font-size: .875rem; color: var(--text-muted); line-height: 1.55; }

.refurb-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.refurb-cta-text h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.refurb-cta-text p {
  font-size: .9375rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill {
  padding: 4px 14px;
  background: var(--green-light);
  color: var(--green);
  border: 1px solid var(--green-mid);
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 500;
}
.refurb-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

/* ── WHY RG – USP Grid ──────────────────────────────────────── */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.usp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.usp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.usp-icon {
  width: 44px;
  height: 44px;
  background: var(--blue-light);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 16px;
}
.usp-icon svg { width: 22px; height: 22px; }
.usp-card strong { font-size: 1rem; font-weight: 600; display: block; margin-bottom: 8px; }
.usp-card p { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }

/* ── CONTACT ────────────────────────────────────────────────── */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), border-color var(--t);
}
.contact-item:hover { box-shadow: var(--shadow-md); }
.contact-wa:hover { border-color: var(--wa); }
.contact-icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.contact-icon-wrap svg { width: 22px; height: 22px; }
.contact-icon-wa { background: rgba(37,211,102,.12); color: var(--wa); }
.contact-item strong { font-size: .9375rem; font-weight: 600; display: block; margin-bottom: 2px; }
.contact-item span { font-size: .875rem; color: var(--text-muted); line-height: 1.5; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer {
  background: #050812;
  color: rgba(255,255,255,.7);
  padding-top: 64px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-logo {
  height: 36px;
  width: auto;
  mix-blend-mode: screen;
  margin-bottom: 12px;
}
.footer-tagline {
  font-size: .9rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.footer-loc {
  font-size: .8125rem;
  color: rgba(255,255,255,.35);
  margin-bottom: 20px;
}
.footer-wa { display: inline-flex; }
.footer-col h4 {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  transition: color var(--t);
}
.footer-col a:hover { color: rgba(255,255,255,.9); }
.footer-bottom {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: .8125rem;
  color: rgba(255,255,255,.3);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  /* Nav wechselt hier (statt erst bei 768px) auf das Hamburger-Menue:
     zwischen 768-1024px reichte der Platz nicht mehr fuer alle
     Nav-Links in einer Zeile, wodurch einzelne Woerter wie
     "3D-Druck"/"Über mich" haesslich mitten im Wort umgebrochen sind. */
  .nav-menu { display: none; }
  .btn-wa.btn-sm.nav-actions > .btn-wa { display: none; }
  .hamburger-btn { display: flex; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-wa { display: none; }

  .services-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

/* Small tablet / Large mobile (≤ 768px) */
@media (max-width: 768px) {
  :root { --header-h: 58px; }

  .section, .section-accent { padding-block: 64px; }

  .services-grid { grid-template-columns: 1fr; }
  .split-layout  { grid-template-columns: 1fr; gap: 40px; }
  .split-reverse { direction: ltr; }
  .split-reverse .split-text { order: 1; }
  .split-reverse .split-visual { order: 2; }

  .form-row { grid-template-columns: 1fr; }

  .check-grid { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr; }

  .refurb-cta { flex-direction: column; align-items: flex-start; }
  .refurb-cta-btns { flex-direction: column; width: 100%; }
  .refurb-cta-btns .btn { justify-content: center; }

  .hero { padding-block: 72px 56px; }
  .hero-title { font-size: clamp(1.875rem, 8vw, 2.75rem); }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .card { padding: 24px 20px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

/* ============================================================
   NEUE KOMPONENTEN – 3D-Druck, Refurbished, Rechtliches
   ============================================================ */

/* ── Subsection ─────────────────────────────────────────────── */
.subsec { margin-top: 64px; }
.subsec-header { margin-bottom: 28px; }
.subsec-header h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.subsec-header p { font-size: .9375rem; color: var(--text-muted); }
.subsec-header code { font-size: .8125rem; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; color: var(--orange); }

/* ── Printer Card ───────────────────────────────────────────── */
.printer-card {
  background: linear-gradient(135deg, var(--orange-light) 0%, var(--surface) 60%);
  border: 1px solid var(--orange-mid);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  margin-top: 40px;
}
.printer-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 6px;
}
.printer-model { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 24px; }
.printer-specs-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;
}
.printer-spec-item { display: flex; align-items: flex-start; gap: 12px; }
.printer-spec-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--orange); }
.printer-spec-item strong { font-size: .875rem; font-weight: 600; display: block; margin-bottom: 2px; }
.printer-spec-item span { font-size: .8125rem; color: var(--text-muted); line-height: 1.4; }

/* ── Filament Grid ──────────────────────────────────────────── */
.filament-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.fil-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.fil-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fil-oos { opacity: .65; }
.fil-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 8px; }
.fil-name { font-size: .9375rem; font-weight: 700; display: block; }
.fil-brand { font-size: .75rem; color: var(--text-muted); }
.fil-badge { font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0; }
.fil-in  { background: var(--green-light); color: var(--green); }
.fil-out { background: var(--surface-2); color: var(--text-light); }
.fil-desc { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.fil-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.fil-color-tag { font-size: .75rem; padding: 3px 10px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-muted); }

/* ── Quality Showcase ───────────────────────────────────────── */
.quality-showcase { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.qs-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.qs-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.qs-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.qs-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--text-light); padding: 16px; text-align: center;
}
.qs-placeholder svg { width: 40px; height: 40px; }
.qs-placeholder span { font-size: .75rem; line-height: 1.5; }
.qs-placeholder code { font-size: .7rem; color: var(--orange); background: var(--orange-light); padding: 2px 6px; border-radius: 4px; }
.qs-default-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--orange); color: #fff; font-size: .7rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-full);
}
.qs-info { padding: 16px; }
.qs-layer { font-size: .8125rem; font-weight: 700; color: var(--orange); display: block; margin-bottom: 4px; }
.qs-name { font-size: 1rem; font-weight: 700; display: block; margin-bottom: 6px; }
.qs-desc { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.qs-speed {
  font-size: .75rem; font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-full); display: inline-block;
}
.spd-1 { background: #FEF2F2; color: #B91C1C; }
.spd-2 { background: #FFF7ED; color: #C2410C; }
.spd-3 { background: #FFFBEB; color: #B45309; }
.spd-4 { background: #F0FDF4; color: #15803D; }
.spd-5 { background: #ECFDF5; color: #047857; }
[data-theme="dark"] .spd-1 { background: #3B0A0A; color: #FCA5A5; }
[data-theme="dark"] .spd-2 { background: #2D1A0A; color: #FDBA74; }
[data-theme="dark"] .spd-3 { background: #2D2009; color: #FCD34D; }
[data-theme="dark"] .spd-4 { background: #052E16; color: #86EFAC; }
[data-theme="dark"] .spd-5 { background: #022C22; color: #6EE7B7; }

/* ── Calculator Card ────────────────────────────────────────── */
.calc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-md);
}
.calc-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.calc-card-header h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.calc-card-header p { font-size: .9rem; color: var(--text-muted); }
.calc-beta-badge {
  background: var(--orange-light); color: var(--orange); border: 1px solid var(--orange-mid);
  font-size: .7rem; font-weight: 600; padding: 4px 12px; border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0;
}
.calc-form { margin-bottom: 0; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Calc 3-Section Flow ─────────────────────────────────── */
.calc-section { padding: 22px 0; border-top: 1px solid var(--border); }
.calc-section:first-of-type { border-top: none; padding-top: 0; }

.calc-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.calc-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.calc-section-head strong { font-size: .9375rem; font-weight: 700; display: block; margin-bottom: 2px; }
.calc-section-head > div > span { font-size: .8125rem; color: var(--text-muted); }

/* Material + Color picker (rows with swatches) */
.calc-mat-pick { display: flex; flex-direction: column; gap: 6px; }
.cmp-mat {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cmp-mat:hover { border-color: var(--blue); background: var(--blue-light); }
.cmp-mat-active { border-color: var(--blue); background: var(--blue-light); }
.cmp-mat-name {
  font-size: .8125rem; font-weight: 600; color: var(--text);
  min-width: 90px; flex-shrink: 0;
}
.cmp-mat-active .cmp-mat-name { color: var(--blue); }
.cmp-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.cmp-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  position: relative;
}
.cmp-swatch:hover { transform: scale(1.25); }
.cmp-swatch-active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,235,.3); }
.cmp-swatch::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff; font-size: .68rem; padding: 2px 7px; border-radius: 3px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; z-index: 10;
}
.cmp-swatch:hover::after { opacity: 1; }

/* Quality cards */
.calc-qual-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
.calc-qual-btn {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.calc-qual-layer { font-size: .75rem; font-weight: 700; color: var(--orange); }
.calc-qual-name { font-size: .875rem; font-weight: 700; color: var(--text); display: block; }
.calc-qual-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
.calc-qual-btn:hover { border-color: var(--orange); background: var(--orange-light); }
.calc-qual-btn.active { border-color: var(--orange); background: var(--orange-light); }
.calc-qual-btn.active .calc-qual-name { color: var(--orange); }

/* File + weight 2-col */
.calc-file-weight { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* File drop zone */
.file-drop {
  border: 2px dashed var(--border-2); border-radius: var(--r-md);
  padding: 20px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; cursor: pointer; transition: border-color var(--t), background var(--t);
  background: var(--bg-alt);
}
.file-drop:hover, .file-drop.drag-over { border-color: var(--orange); background: var(--orange-light); }
.file-drop svg { width: 28px; height: 28px; color: var(--text-muted); }
.file-drop span { font-size: .8125rem; color: var(--text-muted); text-align: center; }
.file-input { display: none; }

.stl-status { display: block; margin-top: 6px; font-size: .8rem; }
.stl-ok  { color: var(--green); }
.stl-err { color: #DC2626; }

/* Range slider */
.range-slider {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  background: var(--border); border-radius: var(--r-full); outline: none; margin: 8px 0;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange); cursor: pointer; box-shadow: 0 0 0 3px var(--orange-light);
}
.range-labels { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-light); margin-top: 2px; }
.lbl-opt { font-size: .8rem; font-weight: 400; color: var(--text-light); margin-left: 4px; }

/* Calc Result */
.calc-result { display: none; }
.calc-result.visible { display: block; margin-top: 20px; }
.calc-res-grid { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; margin-bottom: 12px; }
.calc-res-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .9375rem; }
.calc-res-row span { color: var(--text-muted); }
.calc-res-divider { height: 1px; background: var(--border); margin: 8px 0; }
.calc-res-total { font-size: 1.0625rem; }
.calc-res-total strong { color: var(--orange); font-size: 1.25rem; }
.calc-note { font-size: .8rem; color: var(--text-muted); }
.calc-err { color: #DC2626; font-size: .875rem; padding: 10px; background: #FEF2F2; border-radius: var(--r-md); }
.calc-disclaimer { font-size: .8rem; color: var(--text-light); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Calc Send (E-Mail / WhatsApp) */
.calc-send { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.calc-send h4 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.calc-send-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.calc-send-btns .btn { flex: 1 1 200px; }
.calc-send-hint { font-size: .8rem; color: var(--text-light); margin-top: 10px; }
.calc-send-status { font-size: .875rem; margin-top: 10px; min-height: 1.2em; }
.calc-send-status.calc-send-ok { color: var(--wa, #16a34a); }
.calc-send-status.calc-send-err { color: #DC2626; }

/* Orange CTA Box */
.orange-cta-box {
  background: var(--orange-light); border: 1px solid var(--orange-mid);
  border-radius: var(--r-lg); padding: 32px 36px; margin-top: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.orange-cta-box h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.orange-cta-box p { font-size: .9375rem; color: var(--text-muted); }

/* ── Refurbished Catalog ────────────────────────────────────── */
.catalog-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.catalog-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }
.product-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  padding: 6px 18px; border-radius: var(--r-full); font-size: .875rem; font-weight: 500;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.filter-btn:hover { background: var(--surface-2); color: var(--text); }
.filter-btn.active { background: var(--green-light); color: var(--green); border-color: var(--green-mid); }

.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.product-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
  cursor: pointer;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-img-wrap { position: relative; aspect-ratio: 4/3; background: var(--bg-alt); overflow: hidden; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-img-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
}
.product-img-ph svg { width: 48px; height: 48px; }
.product-condition {
  position: absolute; top: 10px; left: 10px;
  font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-full);
  border: 1px solid transparent;
}
.product-photo-count {
  position: absolute; bottom: 10px; right: 10px;
  font-size: .7rem; font-weight: 600; color: #fff; padding: 3px 9px;
  border-radius: var(--r-full); background: rgba(0,0,0,.55);
}
.product-body { padding: 20px; }
.product-name { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.product-specs-list { list-style: none; margin-bottom: 16px; }
.product-specs-list li {
  font-size: .8125rem; color: var(--text-muted); padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.product-specs-list li:last-child { border-bottom: none; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-price { font-size: 1.375rem; font-weight: 700; color: var(--green); }
.pp-btn-wrap { flex: 1; min-width: 120px; }
.product-more-btn {
  width: 100%; margin-top: 12px; padding: 9px; background: none;
  border: 1px dashed var(--border); border-radius: var(--r-md);
  color: var(--text-muted); font-size: .8125rem; font-weight: 600;
  cursor: pointer; transition: border-color var(--t), color var(--t);
}
.product-more-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ── Produkt-Detailansicht (Modal mit Bildergalerie) ─────────── */
.product-modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  align-items: center; justify-content: center; padding: 24px;
}
.product-modal.open { display: flex; }
.product-modal-backdrop {
  position: absolute; inset: 0; background: rgba(10,14,25,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.product-modal-dialog {
  position: relative; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); max-width: 920px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
}
.product-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.product-modal-body { display: contents; }
.pm-gallery { display: flex; flex-direction: column; background: var(--bg-alt); }
.pm-main-img {
  position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pm-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-main-img .product-img-ph { color: var(--text-light); }
.pm-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.85); color: #111; font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.pm-prev { left: 12px; } .pm-next { right: 12px; }
.pm-thumbs { display: flex; gap: 8px; padding: 12px; flex-wrap: wrap; }
.pm-thumb {
  width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden;
  border: 2px solid transparent; padding: 0; cursor: pointer; opacity: .6;
  transition: opacity var(--t), border-color var(--t);
}
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-thumb.active, .pm-thumb:hover { opacity: 1; border-color: var(--blue); }
.pm-info { padding: 32px; display: flex; flex-direction: column; }
.pm-condition { position: static; display: inline-block; align-self: flex-start; margin-bottom: 14px; }
.pm-name { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -.01em; }
.pm-price { font-size: 1.625rem; font-weight: 700; color: var(--green); margin-bottom: 16px; }
.pm-desc { font-size: .9375rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.pm-specs-heading { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-light); margin-bottom: 8px; }
.pm-specs-list { list-style: none; margin-bottom: 24px; }
.pm-specs-list li {
  font-size: .875rem; color: var(--text-muted); padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.pm-specs-list li:last-child { border-bottom: none; }
.pm-buy { margin-top: auto; margin-bottom: 14px; }
.pm-legal { font-size: .78rem; color: var(--text-light); line-height: 1.5; }
.pm-legal a { color: var(--blue); }

@media (max-width: 720px) {
  .product-modal-dialog { grid-template-columns: 1fr; max-height: 92vh; }
  .pm-info { padding: 24px; }
}

/* Empty state */
.product-empty {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; text-align: center; gap: 16px;
}
.product-empty svg { width: 48px; height: 48px; color: var(--text-light); }
.product-empty strong { font-size: 1.125rem; font-weight: 600; }
.product-empty p { font-size: .9375rem; color: var(--text-muted); max-width: 420px; }

/* PayPal success toast */
.pp-success-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; padding: 12px 24px; border-radius: var(--r-full);
  font-size: .9375rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 999;
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(16px); } }

/* Shop legal note */
.shop-legal-note {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 32px;
  padding: 16px 20px; background: var(--green-light); border: 1px solid var(--green-mid);
  border-radius: var(--r-md);
}
.shop-legal-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); margin-top: 2px; }
.shop-legal-note p { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
.shop-legal-note a { color: var(--green); text-decoration: underline; }

/* ── Legal Pages (shared) ───────────────────────────────────── */
.legal-page { max-width: 760px; margin: 0 auto; padding: 64px 24px; }
.legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 28px; padding: 8px 16px;
  font-size: .875rem; font-weight: 600;
  color: var(--blue); background: var(--blue-light);
  border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none !important; transition: background .15s, color .15s, border-color .15s;
}
.legal-back:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.legal-page h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.legal-page .legal-updated { font-size: .875rem; color: var(--text-muted); margin-bottom: 40px; }
.legal-page h2 { font-size: 1.25rem; font-weight: 700; margin: 36px 0 12px; padding-top: 36px; border-top: 1px solid var(--border); }
.legal-page h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 8px; }
.legal-page p { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 12px; }
.legal-page ul { padding-left: 20px; margin-bottom: 12px; }
.legal-page ul li { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 4px; }
.legal-page a { color: var(--blue); text-decoration: underline; }
.legal-placeholder {
  background: #FFFBEB; border: 1px dashed #F59E0B; border-radius: var(--r-md);
  padding: 12px 16px; font-size: .875rem; color: #92400E; margin: 8px 0;
}
.legal-placeholder::before { content: '⚠️ '; }

/* ── Widerrufsformular: Ausfuellfelder ────────────────────────
   Statt langer Unterstrich-Ketten (die auf schmalen Bildschirmen
   nicht umbrechen und abgeschnitten/haesslich aussehen) eine echte
   Linie per CSS-Border, die sich jeder Breite anpasst. */
.wf-box { border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; }
.wf-box p:last-child { margin-bottom: 0; }
.wf-line {
  border-bottom: 1px solid var(--border);
  height: 32px;
  margin-bottom: 4px;
}
.wf-field { margin-bottom: 18px; }
.wf-field:last-of-type { margin-bottom: 0; }
.wf-caption { display: block; font-size: .8rem; color: var(--text-muted); }
.wf-field-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.wf-field-row .wf-field { flex: 1; min-width: 140px; margin-bottom: 0; }
.wf-field-narrow .wf-line { max-width: 220px; }
.wf-note { font-size: .8rem; color: var(--text-muted); margin-top: 8px; }

/* ── Repair Price Overview ──────────────────────────────────── */
.rep-price-subsec { margin-top: 48px; }
.rep-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rep-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-full);
  font-size: .875rem; font-weight: 500;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.rep-cat-btn .icon-xs { width: 14px; height: 14px; flex-shrink: 0; }
.rep-cat-btn:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }
.rep-cat-btn.active { background: var(--blue-light); color: var(--blue); border-color: var(--blue); font-weight: 600; }

.rep-models { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rep-model-btn {
  padding: 5px 14px; border-radius: var(--r-full);
  font-size: .8125rem; font-weight: 500;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.rep-model-btn:hover { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }
.rep-model-btn.active { background: var(--blue-light); color: var(--blue); border-color: var(--blue); font-weight: 600; }

.rep-table {
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 12px;
}
.rep-table-head, .rep-table-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
.rep-table-head {
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.rep-table-row {
  font-size: .9rem; border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.rep-table-row:last-child { border-bottom: none; }
.rep-table-row:hover { background: var(--bg-alt); }
.rep-name { font-weight: 500; color: var(--text); }
.rep-col-price, .rep-price { text-align: right; }
.rep-price { font-weight: 700; color: var(--blue); }
.rep-on-request { font-weight: 500; color: var(--text-muted); font-style: italic; font-size: .85rem; }
.rep-note { font-size: .8rem; color: var(--text-muted); }
.rep-row-warn { background: #FFFBEB; }
.rep-row-warn:hover { background: #FEF3C7 !important; }
.rep-warn-note { display: block; font-size: .73rem; color: #92400E; margin-top: 3px; line-height: 1.4; }

/* Aufklappbare Qualitätsstufen (Original / Refurbished / Kompatibel) */
.rep-variant { border-bottom: 1px solid var(--border); }
.rep-variant:last-child { border-bottom: none; }
.rep-variant > summary {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--t);
}
.rep-variant > summary::-webkit-details-marker { display: none; }
.rep-variant > summary:hover { background: var(--bg-alt); }
.rep-variant > summary .rep-name { position: relative; }
.rep-variant > summary .rep-name::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t);
}
.rep-variant[open] > summary .rep-name::after { transform: rotate(-135deg) translateY(0); }
.rep-variant-list { padding: 2px 16px 10px; }
.rep-variant-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 6px 0 6px 14px;
  font-size: .86rem;
  border-top: 1px dashed var(--border);
}
.rep-variant-row:first-child { border-top: none; }
.rep-variant-q { color: var(--text-muted); }
.rep-variant-p { font-weight: 700; color: var(--blue); }

/* Responsive: new components */
@media (max-width: 1024px) {
  .printer-specs-grid { grid-template-columns: repeat(2,1fr); }
  .filament-grid { grid-template-columns: repeat(2,1fr); }
  .quality-showcase { grid-template-columns: repeat(3,1fr); }
  .product-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .printer-specs-grid { grid-template-columns: 1fr 1fr; }
  .filament-grid { grid-template-columns: 1fr; }
  .quality-showcase { grid-template-columns: repeat(2,1fr); }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-file-weight { grid-template-columns: 1fr; }
  .calc-qual-row { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .orange-cta-box { flex-direction: column; }
  .catalog-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .quality-showcase { grid-template-columns: 1fr; }
  .printer-specs-grid { grid-template-columns: 1fr; }
  .calc-card { padding: 24px 16px; }
  .printer-card { padding: 24px 20px; }
}

/* ============================================================
   DESIGN ENHANCEMENTS – Modern Polish
   ============================================================ */

/* ── Hero: Gradient Orb Background ─────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 15% -10%, rgba(37,99,235,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 110%, rgba(5,150,105,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(99,102,241,.04) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 15% -10%, rgba(37,99,235,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 110%, rgba(5,150,105,.10) 0%, transparent 60%),
    var(--bg);
}
.hero .container { position: relative; z-index: 1; }

/* ── Hero: Gradient Accent Text ─────────────────────────────── */
.hero-accent {
  background: linear-gradient(115deg, #2563EB 0%, #6366F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .hero-accent {
  background: linear-gradient(115deg, #60A5FA 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero Badge – Glass + Glow ──────────────────────────────── */
.hero-badge {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 2px 16px rgba(37,99,235,.08), 0 1px 3px rgba(0,0,0,.04);
}
[data-theme="dark"] .hero-badge {
  background: rgba(20,29,46,.88);
  border-color: rgba(99,102,241,.22);
  box-shadow: 0 2px 16px rgba(37,99,235,.12), 0 1px 3px rgba(0,0,0,.2);
}

/* Badge dot – ping ripple */
.badge-dot { position: relative; }
.badge-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--green);
  animation: badge-ping 2.5s ease-in-out infinite;
  opacity: 0;
}
@keyframes badge-ping {
  0%   { transform: scale(1);   opacity: .5; }
  80%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Section Tags – Subtle Border ───────────────────────────── */
.tag-blue   { border: 1px solid var(--blue-mid); }
.tag-orange { border: 1px solid var(--orange-mid); }
.tag-green  { border: 1px solid var(--green-mid); }

/* ── Section Title Accent Line ──────────────────────────────── */
.section-header .section-title::after {
  content: '';
  display: block;
  width: 36px; height: 3px;
  background: linear-gradient(90deg, var(--blue), #6366F1);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* ── Service Cards – Color Accents ──────────────────────────── */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity var(--t);
}
.service-card:hover::before { opacity: 1; }
.service-card-blue::before  { background: linear-gradient(90deg, #2563EB, #6366F1); }
.service-card-blue:hover    { box-shadow: 0 10px 36px rgba(37,99,235,.15), 0 2px 6px rgba(37,99,235,.08); transform: translateY(-4px); }
.service-card-orange::before { background: linear-gradient(90deg, #EA580C, #F59E0B); }
.service-card-orange:hover  { box-shadow: 0 10px 36px rgba(234,88,12,.15), 0 2px 6px rgba(234,88,12,.08); transform: translateY(-4px); }
.service-card-green::before  { background: linear-gradient(90deg, #059669, #0EA5E9); }
.service-card-green:hover   { box-shadow: 0 10px 36px rgba(5,150,105,.15), 0 2px 6px rgba(5,150,105,.08); transform: translateY(-4px); }

/* ── Service Icon – Gradient Fill ───────────────────────────── */
.svc-icon-blue   { background: linear-gradient(135deg, #EFF6FF 0%, rgba(99,102,241,.10) 100%); }
.svc-icon-orange { background: linear-gradient(135deg, #FFF7ED 0%, rgba(245,158,11,.10) 100%); }
.svc-icon-green  { background: linear-gradient(135deg, #ECFDF5 0%, rgba(14,165,233,.08) 100%); }

/* ── Buttons – Gradients ────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
  box-shadow: 0 2px 12px rgba(37,99,235,.35), 0 1px 3px rgba(37,99,235,.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 50%, #1E40AF 100%);
  box-shadow: 0 6px 22px rgba(37,99,235,.45), 0 2px 6px rgba(37,99,235,.25);
  transform: translateY(-2px);
}
.btn-orange {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #C2410C 100%);
  box-shadow: 0 2px 12px rgba(234,88,12,.35), 0 1px 3px rgba(234,88,12,.2);
}
.btn-orange:hover {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 50%, #9A3412 100%);
  box-shadow: 0 6px 22px rgba(234,88,12,.45), 0 2px 6px rgba(234,88,12,.25);
  transform: translateY(-2px);
}
.btn-green {
  background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
  box-shadow: 0 2px 12px rgba(5,150,105,.35), 0 1px 3px rgba(5,150,105,.2);
}
.btn-green:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #065F46 100%);
  box-shadow: 0 6px 22px rgba(5,150,105,.45), 0 2px 6px rgba(5,150,105,.25);
  transform: translateY(-2px);
}
.btn-wa {
  background: linear-gradient(135deg, #2ECC71 0%, #25D366 50%, #1DB954 100%);
  box-shadow: 0 2px 12px rgba(37,211,102,.35), 0 1px 3px rgba(37,211,102,.2);
}
.btn-wa:hover {
  background: linear-gradient(135deg, #25D366 0%, #1DB954 50%, #17A849 100%);
  box-shadow: 0 6px 22px rgba(37,211,102,.45), 0 2px 6px rgba(37,211,102,.25);
  transform: translateY(-2px);
}

/* ── USP Cards – Varied Icon Colors ────────────────────────── */
.usp-card:nth-child(2) .usp-icon { background: var(--orange-light); color: var(--orange); }
.usp-card:nth-child(3) .usp-icon { background: var(--green-light); color: var(--green); }
.usp-card:nth-child(4) .usp-icon { background: var(--orange-light); color: var(--orange); }
.usp-card:nth-child(5) .usp-icon { background: var(--green-light); color: var(--green); }

/* ── Dark Mode – Glass Cards ────────────────────────────────── */
[data-theme="dark"] .service-card,
[data-theme="dark"] .usp-card,
[data-theme="dark"] .check-card,
[data-theme="dark"] .device-card,
[data-theme="dark"] .contact-item {
  background: rgba(20, 29, 46, 0.85);
  border-color: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── bg-alt: Subtle Dot Texture ─────────────────────────────── */
.bg-alt {
  background-image: radial-gradient(circle, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="dark"] .bg-alt {
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1),
              transform .65s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible  { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .25s; }
.reveal-d4 { transition-delay: .34s; }
.reveal-d5 { transition-delay: .43s; }
.reveal-d6 { transition-delay: .52s; }

/* ── Compact Filament Grid ──────────────────────────────────── */
.filament-grid { gap: 10px; }
.fil-card { padding: 12px 14px; }
.fil-name { font-size: .875rem; }
.fil-brand { font-size: .7rem; }
.fil-badge { font-size: .65rem; padding: 2px 7px; }
.fil-desc { font-size: .75rem; line-height: 1.45; margin-bottom: 8px; }
.fil-colors { gap: 4px; }
.fil-color-tag { font-size: .7rem; padding: 2px 7px; }

/* ── Compact Quality Showcase ───────────────────────────────── */
.quality-showcase { gap: 10px; }
.qs-img-wrap { aspect-ratio: unset; height: 88px; }
.qs-placeholder { gap: 5px; padding: 8px; }
.qs-placeholder svg { width: 22px; height: 22px; }
.qs-placeholder span { font-size: .68rem; line-height: 1.4; }
.qs-placeholder code { font-size: .62rem; }
.qs-info { padding: 8px 10px; }
.qs-layer { font-size: .72rem; margin-bottom: 2px; }
.qs-name { font-size: .875rem; margin-bottom: 3px; }
.qs-desc { font-size: .72rem; line-height: 1.45; margin-bottom: 6px; }
.qs-speed { font-size: .68rem; padding: 2px 7px; }

/* ── Filament color swatches ────────────────────────────────── */
/* Replace text tags with colored circles + CSS tooltip on hover */
.fil-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.fil-color-swatch {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.08);
  position: relative;
  cursor: default;
  transition: transform .15s;
  flex-shrink: 0;
}
.fil-color-swatch:hover { transform: scale(1.35); z-index: 5; }
/* Tooltip: show color name above swatch on hover */
.fil-color-swatch::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,15,15,.85);
  color: #fff;
  font-size: .65rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.fil-color-swatch:hover::after { opacity: 1; }
/* Out-of-stock filament: gray out all its swatches */
.fil-oos .fil-color-swatch { filter: grayscale(1) opacity(.35); }

/* ── STL 3D preview: wrapper, canvas, fullscreen btn ─────────── */

/* Wrapper shown/hidden as a unit; becomes fullscreen root */
#stlPreviewWrap {
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Canvas container – needed for absolute positioning of fullscreen btn */
.stl-canvas-wrap {
  position: relative;
}

/* Canvas itself – gradient bg keeps dark colors visible */
.stl-canvas {
  display: block;
  width: 100%;
  max-height: 260px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #cfd8e8 0%, #e8edf6 60%, #f2f4f8 100%);
  cursor: grab;
}

/* Fullscreen toggle button – top-right corner of canvas */
.stl-fullscreen-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
  z-index: 10;
}
.stl-fullscreen-btn:hover { background: rgba(255,255,255,.9); }
.stl-fullscreen-btn svg { width: 16px; height: 16px; stroke: #374151; }

/* Fullscreen: fill whole screen, picker scrollable below canvas */
#stlPreviewWrap:fullscreen,
#stlPreviewWrap:-webkit-full-screen {
  background: #1a1e27;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: none;
  overflow-y: auto;
}
#stlPreviewWrap:fullscreen .stl-canvas,
#stlPreviewWrap:-webkit-full-screen .stl-canvas {
  max-height: none;
  flex: 1 0 auto;
  height: 70vh;
  background: linear-gradient(160deg, #1e2435 0%, #252c3e 60%, #2a3347 100%);
  cursor: grab;
}
#stlPreviewWrap:fullscreen .stl-mat-picker,
#stlPreviewWrap:-webkit-full-screen .stl-mat-picker {
  flex-shrink: 0;
}

/* ── Integrated material picker (shown inside preview) ────────── */
.stl-mat-picker {
  padding: 8px 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* One row per in-stock material */
.smp-mat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.smp-mat:hover { background: var(--surface-alt, #f3f4f6); }
.smp-mat-active { background: #eff6ff; }
.smp-mat-active .smp-mat-name { color: var(--blue); }

.smp-mat-name {
  font-size: .72rem;
  font-weight: 600;
  min-width: 80px;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
}

.smp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Individual color swatch inside picker */
.smp-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1.5px solid rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .12s, outline-color .12s;
  flex-shrink: 0;
}
.smp-swatch:hover { transform: scale(1.3); }
/* Selected swatch: colored ring */
.smp-swatch-active {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  transform: scale(1.15);
}

.stl-clear-btn {
  margin-top: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .72rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.stl-clear-btn:hover { color: #dc2626; border-color: #dc2626; }

/* ============================================================
   HERO – EXPLOSIONSZEICHNUNGEN (Handy links, Laptop rechts)
   Als Grid-Spalten direkt links/rechts der Text-Spalte platziert
   (statt absolut am Seitenrand), damit sie immer zwischen Text und
   Aussenkante bleiben und beim Verbreitern/Verschmalern des Fensters
   stufenlos mit dem verfuegbaren Platz mitskalieren (keine Sprung-
   Breakpoints mehr fuer die Groesse). Unterhalb von 980px wird die
   Grafik ausgeblendet, weil dort kein sinnvoller Platz mehr neben dem
   Text bleibt.
   ============================================================ */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,760px) minmax(0,1fr);
  align-items: center;
  column-gap: clamp(8px, 3vw, 40px);
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.hero-grid .container { grid-column: 2; max-width: none; margin: 0; padding: 0; }

/* Absolut positioniert, aber ueber grid-column weiterhin an die jeweilige
   Spaltenbreite gebunden: dadurch bestimmen die Bilder NICHT mehr die
   Zeilenhoehe des Grids (das koennte sie sonst je nach eigenem
   Seitenverhaeltnis unterschiedlich stark "aufblasen"), sondern erhalten
   fuer beide Seiten exakt dieselbe Box (gleiche Breite durch symmetrische
   Spalten, gleiche Hoehe = Hero-Hoehe). Dadurch skalieren Handy und Laptop
   beim Groessenwechsel immer im exakt gleichen Tempo statt versetzt. */
.hero-art {
  position: absolute;
  inset: 0;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: .55;
}
.hero-art-phone { grid-column: 1 / 2; }
.hero-art-laptop { grid-column: 3 / 4; }

.hero-art-img {
  width: 100%;
  height: 100%;
  max-width: 480px;
  object-fit: contain;
}

[data-theme="dark"] .hero-art { opacity: .5; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .hero-grid .container { grid-column: 1; }
  .hero-art { display: none; }
}

/* ============================================================
   ÜBER MICH SECTION
   ============================================================ */

.about-wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 64px;
  align-items: start;
}

/* Left column: tag, headline, stat blocks */
.about-left {}

.about-photo-wrap {
  margin-top: 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-width: 340px;
}
.about-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900/1099;
  object-fit: cover;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
}

.about-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.about-stat:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.07);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(115deg, var(--blue) 0%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Right column: story text */
.about-right {}

.about-lead {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 1rem;
}

.about-right p {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: .9rem;
}
.about-right p strong { color: var(--text); }

/* Responsive */
@media (max-width: 860px) {
  .about-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   FAQ – Haeufig gestellte Fragen
   Native <details>/<summary>-Akkordeon, kein JS noetig.
   ============================================================ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: .98rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--t);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--bg-alt); }
.faq-item > summary::after {
  content: '';
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t);
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translateY(0); }
.faq-item > p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--text-muted);
  line-height: 1.65;
  font-size: .92rem;
}
.faq-item > p a { color: var(--blue); font-weight: 600; }

.faq-more {
  text-align: center;
  margin: 24px auto 0;
  color: var(--text-muted);
  font-size: .92rem;
}
.faq-more a { color: var(--blue); font-weight: 600; }

@media (max-width: 480px) {
  .faq-item > summary { padding: 15px 16px; font-size: .92rem; }
  .faq-item > p { padding: 0 16px 16px; }
}