/* ============================================================
   steampunk/site.css — thema "Stoomvoet & Zonen" (PediBoost-demo)
   Laag bovenop theme/css/styles.css. Alles hangt aan
   body.theme-steampunk, zodat het nergens anders kan lekken.
   Lettertypen: Cinzel Decorative (koppen), Cinzel (labels/nav),
   IM Fell English (lopende tekst), Special Elite (typemachine).
   ============================================================ */

body.theme-steampunk {
  --clr-bg:          #E9D9B4;
  --clr-surface:     #F5EAD0;
  --clr-surface-2:   #DCC596;
  --clr-border:      #8C6A3A;
  --clr-border-med:  #6E4F26;

  --clr-ink:         #2A1C10;
  --clr-ink-2:       #4A3320;
  --clr-ink-3:       #6E5236;

  --clr-teal:        #9A5B22;   /* primair: koper */
  --clr-teal-light:  #F1DCAE;
  --clr-teal-dark:   #5E3412;
  --clr-teal-mid:    #C38B47;

  --clr-rose:        #3D7C6E;   /* accent: kopergroen */
  --clr-rose-light:  #D3E4DC;
  --clr-rose-dark:   #275A4F;

  --clr-gold:        #C99A3E;
  --clr-gold-light:  #F3E2B4;

  --sp-walnut:  #2A1A0F;
  --sp-iron:    #1C1612;
  --sp-brass:   linear-gradient(160deg, #F2D58E 0%, #C99A3E 28%, #9A6A22 62%, #5E3A12 100%);
  --sp-copper:  linear-gradient(160deg, #F0B27A 0%, #B76A33 40%, #7A3A16 80%, #4E2410 100%);
  --sp-rivet:   radial-gradient(circle at 35% 35%, #FFF1C4 0 1px, #C99A3E 2px, #4A2C0C 4.5px, transparent 5px);

  --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-body:    'IM Fell English', Georgia, 'Times New Roman', serif;
  --font-label:   'Cinzel', Georgia, serif;
  --font-type:    'Special Elite', 'Courier New', monospace;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;
  --radius-xl: 10px;

  font-size: 1.06rem;
  color: var(--clr-ink);
  /* perkament: ruis + vlekken + vignet */
  background-color: var(--clr-bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,246,220,.55), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(94,58,18,.22), transparent 55%),
    radial-gradient(ellipse at 0% 60%, rgba(94,58,18,.16), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.theme-steampunk h1, .theme-steampunk h2, .theme-steampunk h3, .theme-steampunk h4 {
  font-family: var(--font-display);
  color: var(--sp-walnut);
  letter-spacing: .01em;
}
.theme-steampunk h3, .theme-steampunk h4 { font-family: var(--font-label); font-weight: 700; }
.theme-steampunk a { color: var(--clr-teal-dark); }
.theme-steampunk a:hover { color: var(--clr-rose-dark); }
.theme-steampunk ::selection { background: #C99A3E; color: #1C1612; }

/* ── KNOPPEN: messing hendelplaten met klinknagels ─────────── */
.theme-steampunk .btn {
  position: relative;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .85rem 2.1rem;
  border-radius: 3px;
  border: 2px solid #3B240C;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.7), inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 0 #3B240C, 0 6px 14px rgba(0,0,0,.25);
  background-image: var(--sp-rivet), var(--sp-rivet), var(--sp-rivet), var(--sp-rivet), var(--sp-brass);
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, auto;
  background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 0 0;
  background-repeat: no-repeat;
  color: #2A1A0F;
  text-shadow: 0 1px 0 rgba(255,240,200,.6);
  overflow: visible;
}
.theme-steampunk .btn:hover { transform: translateY(-2px); color: #1C1612; filter: brightness(1.08); }
.theme-steampunk .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,240,200,.5), 0 1px 0 #3B240C; }
.theme-steampunk .btn--primary {
  background-image: var(--sp-rivet), var(--sp-rivet), var(--sp-rivet), var(--sp-rivet), var(--sp-copper);
  color: #FFF4DC;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.theme-steampunk .btn--primary:hover { color: #fff; }
.theme-steampunk .btn--ghost,
.theme-steampunk .btn--outline { color: #2A1A0F; }
/* stoomwolkje bij hover */
.theme-steampunk .btn::after {
  content: "";
  position: absolute; left: 50%; top: -6px;
  width: 22px; height: 22px; margin-left: -11px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  opacity: 0; pointer-events: none;
}
.theme-steampunk .btn:hover::after { animation: sp-puff 1.1s ease-out; }
@keyframes sp-puff {
  0%   { opacity: .9; transform: translateY(0) scale(.4); }
  100% { opacity: 0;  transform: translateY(-34px) scale(2.2); }
}

/* ── KOP: walnoot + messing bies + klinknagelrij ──────────── */
.theme-steampunk .site-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, #2E1D10 0 7px, #34210F 7px 9px, #2A1A0F 9px 16px);
  border-bottom: 0;
  box-shadow: 0 4px 0 #8A5E22, 0 7px 0 #3B240C, 0 12px 24px rgba(0,0,0,.35);
  backdrop-filter: none;
}
.theme-steampunk .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  background: var(--sp-rivet) 0 50% / 26px 10px repeat-x;
  pointer-events: none;
}
.theme-steampunk .site-header__inner { height: 78px; }
.theme-steampunk .site-header__logo {
  color: #F3E2B4;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(233,176,74,.35);
}
.theme-steampunk .sp-logo-gear { width: 34px; height: 34px; animation: sp-spin 14s linear infinite; }
.theme-steampunk .nav-link {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E7D3A6;
  border-radius: 2px;
  padding: .45rem .8rem;
}
.theme-steampunk .nav-link:hover,
.theme-steampunk .nav-link--active {
  color: #2A1A0F;
  background: var(--sp-brass);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.7), 0 0 14px rgba(233,176,74,.45);
}
.theme-steampunk .lang-toggle__btn, .theme-steampunk .lang-toggle__sep { color: #C9A877; font-family: var(--font-type); }
.theme-steampunk .lang-toggle__btn--active { color: #F2D58E; }
.theme-steampunk .cart-icon { color: #F2D58E; }
.theme-steampunk .cart-badge { background: #9E2B1F; color: #fff; font-family: var(--font-type); }
.theme-steampunk .mobile-menu-toggle span { background: #F2D58E; }
.theme-steampunk .mobile-nav { background: #2A1A0F; border-top: 2px solid #8A5E22; }
.theme-steampunk .mobile-nav a { color: #E7D3A6; font-family: var(--font-label); letter-spacing: .08em; }

/* ── HERO: ketelhuis ──────────────────────────────────────── */
.theme-steampunk .hero {
  padding: 5rem 0 6rem;
  color: #F3E2B4;
  background:
    radial-gradient(ellipse 60% 70% at 72% 50%, rgba(233,150,60,.28), transparent 70%),
    linear-gradient(180deg, #24160C 0%, #3A2312 55%, #24160C 100%);
  border-bottom: 10px solid transparent;
  border-image: repeating-linear-gradient(90deg, #5E3A12 0 20px, #C99A3E 20px 22px, #8A5E22 22px 40px) 10;
}
.theme-steampunk .hero__backdrop {
  /* ketelplaten met klinknagelnaden */
  background:
    linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(0,0,0,.35) 33.3%, transparent calc(33.3% + 2px)),
    linear-gradient(90deg, transparent calc(66.6% - 1px), rgba(0,0,0,.35) 66.6%, transparent calc(66.6% + 2px)),
    radial-gradient(circle at 50% 50%, rgba(201,154,62,.55) 0 2px, transparent 3px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(90deg, #000 0 2%, transparent 2.5% 31%, #000 32% 35%, transparent 35.5% 64%, #000 65% 68%, transparent 68.5% 98%, #000 98.5%);
          mask: linear-gradient(90deg, #000 0 2%, transparent 2.5% 31%, #000 32% 35%, transparent 35.5% 64%, #000 65% 68%, transparent 68.5% 98%, #000 98.5%);
  opacity: .5;
}
.theme-steampunk .hero__eyebrow {
  font-family: var(--font-type);
  font-size: .85rem;
  letter-spacing: .25em;
  color: #E9B04A;
  display: inline-block;
  padding: .3rem .9rem;
  border: 1px solid rgba(233,176,74,.6);
  background: rgba(0,0,0,.25);
}
.theme-steampunk .hero__title {
  font-style: normal;
  font-weight: 900;
  font-size: clamp(1.6rem, 4.6vw, 3.8rem);
  overflow-wrap: break-word;
  line-height: 1.08;
  color: #F2D58E;
  text-shadow: 0 -1px 0 #FFF4D0, 0 3px 0 #5E3A12, 0 5px 0 #1C1612, 0 0 24px rgba(233,176,74,.35);
}
.theme-steampunk .hero__lead { color: #E7D3A6; font-size: 1.25rem; font-style: italic; }
.theme-steampunk .hero__inner { grid-template-columns: 1.1fr 1fr; }
.theme-steampunk .sp-hero-visual { width: 100%; }
.theme-steampunk .sp-hero-visual svg { width: 100%; max-width: 540px; display: block; margin-left: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.theme-steampunk .sp-hero-label { font-family: var(--font-type); font-size: 13px; fill: #BFE0F2; letter-spacing: .12em; }
.theme-steampunk .sp-hero-label--title { font-size: 14px; letter-spacing: .22em; fill: #E9B04A; }
.theme-steampunk .sp-gauge-label { font-family: var(--font-label); font-size: 7.5px; font-weight: 700; letter-spacing: .12em; fill: #2B1D12; }
.theme-steampunk .hero__scroll-hint span { background: linear-gradient(to bottom, #E9B04A, transparent); }

.sp-spin { transform-box: fill-box; transform-origin: center; animation: sp-spin 26s linear infinite; }
.sp-spin--rev  { animation-duration: 18s; animation-direction: reverse; }
.sp-spin--fast { animation-duration: 8s; }
.sp-needle { transform-origin: 412px 412px; animation: sp-needle 4.5s ease-in-out infinite; }
.sp-steam circle { fill: rgba(255,255,255,.55); animation: sp-steam 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.sp-steam circle:nth-child(2) { animation-delay: 1s; }
.sp-steam circle:nth-child(3) { animation-delay: 2s; }
@keyframes sp-spin   { to { transform: rotate(360deg); } }
@keyframes sp-needle { 0%,100% { transform: rotate(-70deg); } 45% { transform: rotate(62deg); } 55% { transform: rotate(48deg); } }
@keyframes sp-steam  { 0% { opacity: 0; transform: translate(0,10px) scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(-14px,-46px) scale(1.8); } }

/* ── VERTROUWENSBALK: koperen naamplaat ───────────────────── */
.theme-steampunk .trust-strip {
  background:
    var(--sp-rivet) 10px 50% / 10px 10px no-repeat,
    var(--sp-rivet) calc(100% - 10px) 50% / 10px 10px no-repeat,
    linear-gradient(180deg, #EDCB80 0%, #D2A54A 45%, #B5852F 100%);
  border-top: 2px solid #3B240C;
  border-bottom: 2px solid #3B240C;
  box-shadow: inset 0 2px 0 rgba(255,240,200,.6), inset 0 -3px 0 rgba(0,0,0,.25);
  padding: 1.1rem 0;
}
.theme-steampunk .trust-item {
  color: #2A1A0F;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,240,200,.55);
}
.theme-steampunk .trust-icon {
  width: 18px; height: 18px; font-size: 0; color: transparent;
  background: url("img/gear-small.svg") center / contain no-repeat;
  animation: sp-spin 9s linear infinite;
}

/* ── SECTIEKOPPEN met ornament ────────────────────────────── */
.theme-steampunk .section { position: relative; }
.theme-steampunk .section--alt,
.theme-steampunk .about-teaser {
  background:
    linear-gradient(rgba(62,110,146,.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(62,110,146,.07) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(220,197,150,.55);
  border-top: 3px double #8C6A3A;
  border-bottom: 3px double #8C6A3A;
}
.theme-steampunk .section-title {
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  display: inline-flex; align-items: center; gap: 1rem;
}
.theme-steampunk .section-header .section-title::before,
.theme-steampunk .section-header .section-title::after {
  content: "";
  width: clamp(40px, 8vw, 110px); height: 26px;
  background:
    url("img/gear-line.svg") center / 26px 26px no-repeat,
    linear-gradient(#7A4E1E, #7A4E1E) left 50% / calc(50% - 16px) 2px no-repeat,
    linear-gradient(#7A4E1E, #7A4E1E) right 50% / calc(50% - 16px) 2px no-repeat;
}
.theme-steampunk .section-sub { font-style: italic; color: var(--clr-ink-2); font-size: 1.12rem; }

/* ── BEHANDELKAARTEN: messing kaders met klinknagels ──────── */
.theme-steampunk .service-card,
.theme-steampunk .team-card,
.theme-steampunk .form-card,
.theme-steampunk .order-summary {
  position: relative;
  background:
    var(--sp-rivet) 8px 8px / 10px 10px no-repeat,
    var(--sp-rivet) calc(100% - 8px) 8px / 10px 10px no-repeat,
    var(--sp-rivet) 8px calc(100% - 8px) / 10px 10px no-repeat,
    var(--sp-rivet) calc(100% - 8px) calc(100% - 8px) / 10px 10px no-repeat,
    linear-gradient(180deg, #FBF2DC, #EFDDB4);
  border: 6px solid transparent;
  border-image: linear-gradient(160deg, #F2D58E, #9A6A22 40%, #5E3A12 60%, #C99A3E) 6;
  border-radius: 0;
  box-shadow: 0 0 0 1px #3B240C, 0 10px 22px rgba(42,26,15,.25);
}
.theme-steampunk .service-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 1px #3B240C, 0 16px 30px rgba(42,26,15,.35); }
.theme-steampunk .service-card__icon {
  width: 52px; height: 52px;
  background: url("img/gear-copper.svg") center / contain no-repeat;
  transition: transform 1.2s ease;
}
.theme-steampunk .service-card__icon svg { display: none; }
.theme-steampunk .service-card:hover .service-card__icon { transform: rotate(180deg); }
.theme-steampunk .service-card__title { font-family: var(--font-label); font-weight: 700; font-size: 1.12rem; color: #2A1A0F; }
.theme-steampunk .service-card__desc { color: var(--clr-ink-2); font-size: .98rem; }
.theme-steampunk .service-card__meta { font-family: var(--font-type); color: var(--clr-ink-3); align-items: center; }
.theme-steampunk .service-card__price {
  font-family: var(--font-type);
  color: #FFF4DC;
  background: var(--sp-copper);
  padding: .2rem .7rem;
  border: 1px solid #3B240C;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  padding-left: 1rem;
}

/* ── OVER ONS: sepia portretten in patrijspoorten ─────────── */
.theme-steampunk .about-teaser img,
.theme-steampunk .team-card__photo img,
.theme-steampunk .rte-content img,
.theme-steampunk .page-content img {
  filter: sepia(.75) contrast(1.05) brightness(.95);
  border: 8px solid #C99A3E;
  outline: 2px solid #3B240C;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.theme-steampunk .team-mini__avatar,
.theme-steampunk .team-card__photo {
  border-radius: 50%;
  background: radial-gradient(circle, #3A2312 55%, transparent 56%), var(--sp-brass);
  box-shadow: 0 0 0 3px #3B240C, inset 0 0 0 6px rgba(255,240,200,.25), 0 8px 18px rgba(0,0,0,.3);
  color: #F2D58E;
  font-family: var(--font-display);
}
.theme-steampunk .team-mini strong { font-family: var(--font-label); }
.theme-steampunk .team-mini small,
.theme-steampunk .team-card__role { font-family: var(--font-type); color: var(--clr-rose-dark); }
.theme-steampunk .about-teaser__intro { font-style: italic; font-size: 1.15rem; }

/* ── WINKEL: apothekerslabels ─────────────────────────────── */
.theme-steampunk .product-card {
  background: #F7EDD3;
  border: 2px solid #5E3A12;
  border-radius: 0;
  box-shadow: 0 0 0 4px #E9D9B4, 0 0 0 6px #8C6A3A, 0 12px 24px rgba(42,26,15,.25);
}
.theme-steampunk .product-card__img-wrap,
.theme-steampunk .product-card__placeholder {
  background:
    radial-gradient(circle at 50% 45%, rgba(233,176,74,.25), transparent 60%),
    repeating-linear-gradient(45deg, #2E1D10 0 10px, #34210F 10px 12px);
}
.theme-steampunk .product-card__placeholder { color: transparent; font-size: 0; }
.theme-steampunk .product-card__placeholder::before {
  content: ""; display: block; width: 64px; height: 64px; margin: auto;
  background: url("img/gear-brass.svg") center / contain no-repeat;
  animation: sp-spin 20s linear infinite;
}
.theme-steampunk .product-card__cat { font-family: var(--font-type); color: var(--clr-rose-dark); letter-spacing: .1em; }
.theme-steampunk .product-card__title { font-family: var(--font-label); font-weight: 700; }
.theme-steampunk .product-card__price { font-family: var(--font-type); color: #7A3A16; font-size: 1.05rem; }
.theme-steampunk .product-card .btn { padding: .55rem 1rem; font-size: .68rem; letter-spacing: .1em; }

/* ── PAGINAKOPPEN (over ons, diensten, contact...) ────────── */
.theme-steampunk .page-hero,
.theme-steampunk .page-header,
.theme-steampunk .page-title-section {
  color: #F3E2B4;
  background:
    radial-gradient(ellipse 50% 90% at 85% 50%, rgba(233,150,60,.25), transparent 70%),
    linear-gradient(180deg, #24160C, #3A2312);
  border-bottom: 8px solid transparent;
  border-image: repeating-linear-gradient(90deg, #5E3A12 0 20px, #C99A3E 20px 22px, #8A5E22 22px 40px) 8;
}
.theme-steampunk .page-hero__title,
.theme-steampunk .page-header h1,
.theme-steampunk .page-title-section h1 { color: #F2D58E; text-shadow: 0 3px 0 #000; }
.theme-steampunk .page-hero__eyebrow { font-family: var(--font-type); color: #E9B04A; letter-spacing: .2em; }
.theme-steampunk .page-hero__sub { color: #E7D3A6; font-style: italic; }
.theme-steampunk .breadcrumb { font-family: var(--font-type); }

.theme-steampunk .service-row {
  border-bottom: 1px dashed #8C6A3A;
}
.theme-steampunk .service-row__title { font-family: var(--font-label); font-weight: 700; }
.theme-steampunk .service-row__price,
.theme-steampunk .service-row__dur { font-family: var(--font-type); color: #7A3A16; }

/* ── FORMULIEREN: invulvelden op een octrooiformulier ─────── */
.theme-steampunk .form-input,
.theme-steampunk .form-textarea,
.theme-steampunk select,
.theme-steampunk input[type="text"],
.theme-steampunk input[type="email"],
.theme-steampunk input[type="tel"],
.theme-steampunk input[type="date"],
.theme-steampunk textarea {
  font-family: var(--font-type);
  background: #FFF8E6;
  border: 0;
  border-bottom: 2px solid #5E3A12;
  border-radius: 0;
  box-shadow: inset 0 -6px 0 rgba(201,154,62,.12);
}
.theme-steampunk .form-input:focus,
.theme-steampunk .form-textarea:focus,
.theme-steampunk textarea:focus,
.theme-steampunk input:focus { outline: 2px solid #C99A3E; outline-offset: 2px; }
.theme-steampunk label { font-family: var(--font-label); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #4A3320; }

.theme-steampunk .alert { border-radius: 0; font-family: var(--font-type); border-width: 2px; }

/* ── VOET: gietijzeren plaat ──────────────────────────────── */
.theme-steampunk .site-footer {
  position: relative;
  color: #CDB78E;
  background:
    radial-gradient(circle at 50% 50%, rgba(201,154,62,.18) 0 1.5px, transparent 2.5px) 0 0 / 18px 18px,
    linear-gradient(180deg, #221A14, #120E0B);
  border-top: 14px solid transparent;
  border-image: linear-gradient(180deg, #F0B27A, #B76A33 40%, #4E2410) 14;
}
.theme-steampunk .site-footer h4 { color: #E9B04A; font-family: var(--font-label); letter-spacing: .14em; }
.theme-steampunk .site-footer a { color: #E7D3A6; }
.theme-steampunk .site-footer a:hover { color: #F2D58E; }
.theme-steampunk .footer-logo { font-family: var(--font-display); font-weight: 900; color: #F2D58E; font-size: 1.4rem; }
.theme-steampunk .footer-tagline, .theme-steampunk .footer-hours { color: #A99573; font-style: italic; }
.theme-steampunk .footer-bottom { border-top: 1px solid rgba(201,154,62,.3); font-family: var(--font-type); color: #8E7B5C; }

/* ── RANDDECORATIE (partials/body_start.php) ──────────────── */
.sp-frame { display: none; }
@media (min-width: 1420px) {
  .sp-frame { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 50; }
  .sp-pipe {
    position: absolute; top: 0; bottom: 0; width: 22px;
    background: linear-gradient(90deg, #4E2410, #B76A33 30%, #F0B27A 45%, #B76A33 60%, #4E2410);
    box-shadow: 0 0 0 1px #2A1A0F, 4px 0 14px rgba(0,0,0,.3);
  }
  .sp-pipe--left  { left: 18px; }
  .sp-pipe--right { right: 18px; }
  .sp-pipe::before, .sp-pipe::after {           /* flenzen */
    content: ""; position: absolute; left: -6px; right: -6px; height: 14px;
    background: var(--sp-brass); box-shadow: 0 0 0 1px #2A1A0F;
  }
  .sp-pipe::before { top: 22%; }
  .sp-pipe::after  { top: 71%; }
  .sp-valve {
    position: absolute; top: 45%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: radial-gradient(circle, #2A1A0F 0 5px, transparent 6px),
                conic-gradient(from 0deg, #9E2B1F 0 10deg, transparent 10deg 80deg, #9E2B1F 80deg 100deg, transparent 100deg 170deg, #9E2B1F 170deg 190deg, transparent 190deg 260deg, #9E2B1F 260deg 280deg, transparent 280deg);
    box-shadow: 0 0 0 6px #9E2B1F inset, 0 0 0 1px #2A1A0F;
    animation: sp-spin 40s linear infinite;
  }
  .sp-valve--low { top: 86%; animation-direction: reverse; }
  .sp-corner-gear { position: absolute; opacity: .9; animation: sp-spin 30s linear infinite; }
  .sp-corner-gear--a { width: 150px; left: -60px; bottom: -60px; }
  .sp-corner-gear--b { width: 96px; left: 52px; bottom: -40px; animation-direction: reverse; animation-duration: 19s; }
}

/* ── RESPONSIEF ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .theme-steampunk .hero__inner { grid-template-columns: 1fr; }
  .theme-steampunk .sp-hero-visual { display: block; order: -1; }
  .theme-steampunk .sp-hero-visual { width: 100%; }
.theme-steampunk .sp-hero-visual svg { max-width: 320px; margin: 0 auto 1rem; }
  .theme-steampunk .site-header__logo { font-size: 1.1rem; }
  .theme-steampunk .section-header .section-title::before,
  .theme-steampunk .section-header .section-title::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-steampunk *, .sp-frame * { animation: none !important; }
}