/* Selbst gehostete Schriften — DSGVO-konform, kein Google-Request (2026-06) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/playfair-500.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/playfair-600.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-700.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/playfair-800.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/playfair-900.woff2') format('woff2');}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  LayerPulse — combined stylesheet                              ║
   ║  Merged from style.css + redesign.css + theme.css (cascade     ║
   ║  order preserved). The font @import above was hoisted from      ║
   ║  theme.css so it stays the first statement.                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ============================ 1/3 · BASE (style.css) ============================ */
/* ═══════════════════════════════════════════════════════
   LayerPulse · Premium Apple-Inspired Design System
═══════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────── */
:root {
  --bg:          #FAFAF9;
  --bg-2:        #F5F4F2;
  --fg:          #0C0A09;
  --primary:     #1C1917;
  --secondary:   #57534E;
  --muted:       #78716C;
  --subtle:      #A8A29E;
  --accent:      #92400E;
  --accent-mid:  #B45309;
  --accent-hi:   #D97706;
  --accent-bg:   #FFFBEB;
  --border:      #E7E5E4;
  --border-2:    #D6D3D1;
  --white:       #FFFFFF;
  --success:     #16A34A;
  --error:       #DC2626;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06);
  --shadow-xl: 0 40px 100px rgba(0,0,0,.14);

  --dur-fast:   150ms;
  --dur-base:   260ms;
  --dur-slow:   420ms;
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h: 72px;
  --max-w: 1200px;
  --pad:   clamp(20px, 5vw, 80px);
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Horizontales Scrollen am Wurzelelement verhindern. Der Header ist position:fixed,
     daher beeinflusst dies kein Sticky-Verhalten. (Fallback hidden + modernes clip.) */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--fg);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  /* Lange Wörter/URLs dürfen nie die Zeilenbreite sprengen (sonst Überbreite). */
  overflow-wrap: break-word;
}
/* Medien & Tabellen nie breiter als ihr Container (häufigste Overflow-Quelle).
   SVG bleibt unangetastet (Inline-Icons in Buttons/Text). */
img { display: block; max-width: 100%; height: auto; }
video, canvas, iframe, embed, object { max-width: 100%; }
table { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Layout ──────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
/* Zieht alle Sektionen je 20px nach oben/unten zusammen, damit zwischen
   verschieden gefärbten Blöcken kein weißer Saum entsteht. Zentral hier statt
   margin an jedem Block einzeln (ersetzt den manuellen Per-Block-Fix). */
.section { padding: clamp(80px, 10vw, 140px) 0; margin-top: -20px; margin-bottom: -20px; }
/* Gleiche Überlappung für Voll-Breite-Bänder OHNE .section-Klasse (Startseite:
   .showcase/.trust-bar; Unterseiten-Hero: .page-hero) – sonst bleibt an deren
   Übergang zur nächsten Sektion eine minimale Lücke. */
.showcase { margin-top: -20px; margin-bottom: -20px; }
.trust-bar { margin-bottom: -20px; }
.page-hero { margin-bottom: -20px; }
.section-header {
  max-width: 640px; margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}
.section-header .eyebrow { margin-bottom: 16px; }
.section-header h2 { margin-bottom: 18px; }
.section-header .section-intro { color: var(--secondary); font-size: .95rem; line-height: 1.75; }

/* ── Shared typography helpers ───────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-hi);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi);
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ═══════════════════════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  transition: background var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(250,250,249,.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--fg); position: relative; overflow: hidden; flex-shrink: 0;
}
.brand-mark::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent-hi);
  transform: translate(-50%,-50%);
  animation: pulse-mark 2.8s ease-in-out infinite;
}
@keyframes pulse-mark { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(.55)} }
.brand-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.brand-accent { color: var(--accent-hi); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link, .nav-dd-trigger, .nav-cta { white-space: nowrap; }
.nav-link {
  padding: 7px 13px; border-radius: var(--r-full);
  font-size: .85rem; font-weight: 500; color: var(--secondary);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-link:hover, .nav-link.active { color: var(--fg); background: var(--bg-2); }
.nav-cta {
  padding: 9px 20px; background: var(--fg); color: var(--white) !important;
  border-radius: var(--r-full); font-size: .85rem; font-weight: 600;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
}
.nav-cta:hover { background: var(--accent-mid); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(180,83,9,.3); }
.nav-cta.active { background: var(--fg) !important; }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5.5px; width: 36px; height: 36px; padding: 7px; border-radius: var(--r-sm);
}
.bar {
  display: block; width: 22px; height: 1.5px;
  background: var(--fg); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
  transform-origin: center;
}
.menu-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }

/* ═══════════════════════════════════════════════════════
   VAUL DRAWER
═══════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.48); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.drawer-panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
  background: var(--white); border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 0 24px 48px; max-height: 85svh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: 0 -12px 60px rgba(0,0,0,.14);
}
.drawer-handle-wrap { padding: 14px 0 24px; display: flex; justify-content: center; cursor: grab; }
.drawer-handle { width: 40px; height: 4px; background: var(--border-2); border-radius: 2px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.drawer-link {
  display: flex; align-items: center; padding: 14px 16px;
  border-radius: var(--r-lg); font-size: 1rem; font-weight: 500; color: var(--fg);
  transition: background var(--dur-fast);
}
.drawer-link:hover { background: var(--bg-2); }
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px; background: var(--fg); color: var(--white) !important;
  border-radius: var(--r-xl); font-size: 1rem; font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.drawer-cta:hover { transform: translateY(-2px); background: var(--accent-mid); }
body.drawer-open .drawer-overlay { opacity: 1; pointer-events: all; }
body.drawer-open .drawer-panel { transform: translateY(0); }
body.drawer-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding-top: var(--nav-h); padding-left: var(--pad); padding-right: 0;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 65% 75% at 78% 45%, rgba(217,119,6,.07) 0%, transparent 65%);
}
.hero-text-col { padding: clamp(40px,5vw,80px) clamp(20px,3vw,52px) clamp(40px,5vw,80px) 0; }
.hero-headline {
  font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 800;
  line-height: 1.0; letter-spacing: -.035em; margin-bottom: 24px;
}
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hi) 45%, #F59E0B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-lead {
  font-size: clamp(.93rem, 1.5vw, 1.1rem); color: var(--secondary);
  max-width: 46ch; line-height: 1.72; margin-bottom: 40px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }
.hero-meta { display: flex; align-items: center; gap: 28px; margin-bottom: 20px; }
.hero-stat strong { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hero-stat span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; display: block; }
.hero-stat-sep { width: 1px; height: 36px; background: var(--border); }
.hero-proof {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; color: var(--muted); font-weight: 500;
}
.hero-proof svg { color: var(--success); flex-shrink: 0; }
.hero-img-col { position: relative; align-self: stretch; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero-img-col img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 1.4s var(--ease-out);
  /* Hoodie ist dunkel auf dunklem Studio-Hintergrund — Helligkeit/Kontrast
     deutlich anheben (+ etwas Sättigung), damit sich das Kleidungsstück klar
     abhebt, ohne die dunkle, hochwertige Hero-Stimmung zu verlieren. */
  filter: brightness(1.5) contrast(1.14) saturate(1.06);
}
.hero-img-col.in-view img { transform: scale(1); }
.hero-img-col::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 28%);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-full);
  font-size: .875rem; font-weight: 600; border: none; font-family: inherit;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast),
              background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97) translateY(0); }
.btn-accent { background: var(--fg); color: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.btn-accent:hover { background: var(--primary); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.btn-outline { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--border-2); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--fg); background: var(--fg); color: var(--white); }
.btn-block { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════════
   TRUST TICKER
═══════════════════════════════════════════════════════ */
.trust-bar { background: var(--fg); overflow: hidden; padding: 14px 0; margin-top: -20px; }
/* Soft-fade the edges so items slide in/out instead of hard-clipping. */
.trust-track-wrap {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* width:max-content + flex-shrink:0 keeps the track at its full content
   width (two identical halves), so translateX(-50%) loops seamlessly. */
.trust-track {
  display: flex; align-items: center; flex-shrink: 0; width: max-content;
  animation: ticker 34s linear infinite; will-change: transform;
}
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 500; padding: 0 24px; color: rgba(255,255,255,.65); white-space: nowrap; flex-shrink: 0; }
.trust-item svg { color: var(--accent-hi); flex-shrink: 0; }
.trust-sep { color: rgba(255,255,255,.18); padding: 0 4px; flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-bar:hover .trust-track { animation-play-state: paused; }

/* ═══════════════════════════════════════════════════════
   SHOWCASE
═══════════════════════════════════════════════════════ */
.showcase { padding: clamp(60px, 8vw, 100px) 0; }
.showcase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 var(--pad); }
.showcase-item { position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 3/4; background: var(--bg-2); }
.showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease-out); }
.showcase-item:hover img { transform: scale(1.06); }
.showcase-caption {
  position: absolute; bottom: 14px; left: 14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg);
  opacity: 0; transform: translateY(6px); transition: all .28s var(--ease-out);
}
.showcase-item:hover .showcase-caption { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════
   GALLERY MARQUEE — flowing, auto-scrolling product gallery
   Mirrors the trust-bar ticker: two identical halves + translateX(-50%).
   Item right-margin (not flex gap) keeps the loop seamless.
═══════════════════════════════════════════════════════ */
.gallery-marquee { overflow: hidden; padding: clamp(40px, 6vw, 80px) 0; background: var(--bg-2); }
.gallery-track-wrap {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery-track {
  display: flex; align-items: center; flex-shrink: 0; width: max-content;
  animation: ticker 64s linear infinite; will-change: transform;
}
.gallery-marquee:hover .gallery-track { animation-play-state: paused; }
.gallery-item {
  flex-shrink: 0; margin: 0 clamp(10px, 1.4vw, 18px) 0 0;
  height: clamp(190px, 23vw, 290px);
  border-radius: var(--r-xl); overflow: hidden; background: var(--bg);
}
.gallery-item img {
  height: 100%; width: auto; max-width: none; display: block;
  object-fit: cover; transition: transform .6s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════ */
.services { background: var(--bg); }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 48px; }
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 36px; position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.card::before {
  content: attr(data-num); position: absolute; top: -16px; right: 16px;
  font-size: 5.5rem; font-weight: 800; line-height: 1;
  color: var(--border); letter-spacing: -.05em; pointer-events: none;
  transition: color var(--dur-base);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card:hover::before { color: rgba(217,119,6,.1); }
.card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.card p { font-size: .875rem; color: var(--secondary); line-height: 1.68; margin-bottom: 20px; }
.card-features { display: flex; flex-direction: column; gap: 8px; }
.card-features li { font-size: .8rem; color: var(--secondary); font-weight: 500; padding-left: 16px; position: relative; }
.card-features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi); }

/* Product Window */
.ptw-window { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--white); box-shadow: var(--shadow-md); }
.ptw-header { border-bottom: 1px solid var(--border); padding: 18px 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.products-label { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ptw-nav { display: flex; gap: 5px; flex-wrap: wrap; }
.ptw-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-full); font-size: .8rem; font-weight: 500; color: var(--secondary); transition: all var(--dur-fast); }
.ptw-tab:hover { background: var(--bg-2); color: var(--fg); }
.ptw-tab--active { background: var(--fg); color: var(--white); }
.ptw-body { padding: 28px; }
.ptw-product-header { margin-bottom: 20px; }
.ptw-product-name { font-size: 1.05rem; font-weight: 700; display: block; margin-bottom: 4px; }
.ptw-product-subtitle { font-size: .82rem; color: var(--muted); }
.ptw-photo-wrap { margin: 0 0 20px; border-radius: 14px; overflow: hidden; background: var(--surface, #f3f4f6); aspect-ratio: 16 / 9; }
.ptw-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptw-slabel { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 10px; }
.ptw-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; }
.modal-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; position: relative; transition: transform var(--dur-fast) var(--ease-spring); }
.modal-swatch:hover { transform: scale(1.35); z-index: 1; }
.modal-swatch.selected { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--fg); }
.modal-swatch--light { border-color: var(--border); }
.swatch-tip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--white); padding: 4px 8px; border-radius: var(--r-sm); font-size: .68rem; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 10; transition: opacity var(--dur-fast); }
.modal-swatch:hover .swatch-tip { opacity: 1; }
.ptw-meta-row { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; margin-bottom: 16px; }
.size-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.size-badge { padding: 4px 12px; background: var(--bg-2); border-radius: var(--r-full); font-size: .74rem; font-weight: 600; color: var(--secondary); }
.size-table-wrap { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.size-table th { text-align: left; font-weight: 600; padding: 6px 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.size-table td { padding: 6px 12px; color: var(--secondary); }
.size-table tbody tr:hover { background: var(--bg-2); }
.ptw-note { font-size: .76rem; color: var(--muted); margin-bottom: 20px; }
.ptw-cta-row { margin-top: 4px; }
.variant-tabs, .ptw-vtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.variant-tab, .ptw-vtab { padding: 5px 12px; border-radius: var(--r-full); font-size: .76rem; font-weight: 500; color: var(--secondary); background: var(--bg-2); transition: all var(--dur-fast); }
.variant-tab.active, .ptw-vtab.active { background: var(--fg); color: var(--white); }

/* ═══════════════════════════════════════════════════════
   BENEFITS
═══════════════════════════════════════════════════════ */
.benefits { background: var(--bg-2); }
.benefits-list { display: grid; grid-template-columns: repeat(2,1fr); }
.benefit-item { display: flex; gap: 20px; padding: 36px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background var(--dur-base); }
.benefit-item:nth-child(2n) { border-right: none; }
.benefit-item:nth-last-child(-n+2) { border-bottom: none; }
.benefit-item:hover { background: var(--white); }
.benefit-num { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-hi); min-width: 24px; padding-top: 2px; }
.benefit-body h4 { font-size: .95rem; font-weight: 700; margin-bottom: 7px; }
.benefit-body p { font-size: .855rem; color: var(--secondary); line-height: 1.68; }

/* ═══════════════════════════════════════════════════════
   STUDIO BANNER
═══════════════════════════════════════════════════════ */
.studio-banner { position: relative; height: clamp(280px, 48vw, 580px); overflow: hidden; }
.studio-banner img { width: 100%; height: 130%; object-fit: cover; transform: translateY(-10%); will-change: transform; }
.studio-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 100%); display: flex; align-items: center; justify-content: center; }
.studio-banner-text { font-size: clamp(1.8rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.03em; color: var(--white); text-align: center; line-height: 1.25; }
.studio-banner-text em { font-style: normal; color: var(--accent-hi); }

/* ═══════════════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════════════ */
.process { background: var(--bg); }
.process-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; }
.process-step { padding: 28px 16px; text-align: center; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--fg); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; letter-spacing: .05em; margin: 0 auto 14px; transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base); }
.process-step:hover .step-num { transform: scale(1.18); background: var(--accent-mid); }
.step-body h4 { font-size: .875rem; font-weight: 700; margin-bottom: 6px; }
.step-body p { font-size: .78rem; color: var(--secondary); line-height: 1.6; }
.process-line { height: 1px; background: var(--border-2); min-width: 16px; position: relative; transition: background .5s; }
.process-line::after { content: ''; position: absolute; top: -3px; right: -1px; width: 7px; height: 7px; border-top: 1.5px solid var(--border-2); border-right: 1.5px solid var(--border-2); transform: rotate(45deg); transition: border-color .5s; }
.process-steps.lines-visible .process-line { background: var(--accent-hi); }
.process-steps.lines-visible .process-line::after { border-color: var(--accent-hi); }

/* ═══════════════════════════════════════════════════════
   PRICING
═══════════════════════════════════════════════════════ */
.pricing { background: var(--bg-2); }
.pricing-formula { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 48px; flex-wrap: wrap; }
.formula-part { padding: 11px 22px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-full); font-weight: 600; font-size: .875rem; box-shadow: var(--shadow-xs); }
.formula-op { font-size: 1.15rem; font-weight: 300; color: var(--muted); }
.formula-result { padding: 11px 22px; background: var(--fg); color: var(--white); border-radius: var(--r-full); font-weight: 700; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.pricing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out); }
.pricing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pricing-card--example { border-color: var(--accent-hi); background: var(--accent-bg); }
.pricing-card-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 20px; }
.pricing-list { display: flex; flex-direction: column; }
.pricing-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .875rem; color: var(--secondary); }
.pricing-list li:last-child { border-bottom: none; }
.price { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.pricing-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--accent-hi); font-weight: 800; font-size: 1.05rem; }
.pricing-note { font-size: .74rem; color: var(--muted); margin-top: 12px; }
.pricing-footer { text-align: center; font-size: .78rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════════════════════ */
.portfolio { background: var(--bg); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 48px; }
.project-card { margin: 0; }
.project-img { position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4/5; }
.project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease-out); }
.project-card:hover .project-img img { transform: scale(1.07); }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.68) 0%, transparent 48%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; opacity: 0; transition: opacity var(--dur-base); }
.project-card:hover .project-overlay { opacity: 1; }
.project-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-hi); margin-bottom: 6px; }
.project-overlay h4 { color: var(--white); font-size: .95rem; font-weight: 700; }
.project-card figcaption { padding: 14px 4px 0; }
.project-card figcaption h4 { font-size: .9rem; font-weight: 700; margin-bottom: 4px; }
.project-card figcaption p { font-size: .8rem; color: var(--secondary); }
.portfolio-cta { text-align: center; }

/* ═══════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════ */
.about { background: var(--bg-2); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); align-items: center; }
.about-img { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-content .eyebrow { margin-bottom: 16px; }
.about-content h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 22px; }
.about-content p { font-size: .875rem; color: var(--secondary); line-height: 1.77; margin-bottom: 14px; }
.about-p2 { margin-bottom: 28px !important; }
.about-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.about-features li { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 500; }
.about-features li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); }
.founder-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 28px; }
.founder-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--fg); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.founder-card strong { display: block; font-size: .875rem; font-weight: 700; }
.founder-card p { font-size: .76rem; color: var(--muted); margin: 0; }
.about-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.about-stat { text-align: center; }
.about-stat-num { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.stat-unit { font-size: .9rem; color: var(--accent-hi); }
.stat-desc { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; display: block; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.faq { background: var(--bg); }
.faq-list { max-width: 720px; margin: 0 auto 48px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 22px 0; font-size: .93rem; font-weight: 600; text-align: left; color: var(--fg); cursor: pointer; transition: color var(--dur-fast); }
.faq-question:hover { color: var(--accent-mid); }
.faq-icon { flex-shrink: 0; color: var(--muted); transition: transform var(--dur-base) var(--ease-out); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--accent-hi); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height .42s var(--ease-out); }
.faq-answer.open { max-height: 400px; }
.faq-answer-inner { padding-bottom: 22px; }
.faq-answer-inner p { font-size: .875rem; color: var(--secondary); line-height: 1.77; }
.faq-cta { text-align: center; }
.faq-cta p { font-size: .875rem; color: var(--secondary); margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════ */
.contact { background: var(--bg-2); }
.contact-grid { display: grid; grid-template-columns: .48fr 1fr; gap: clamp(36px,5vw,64px); align-items: start; }
.contact-form-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(22px,3vw,32px); box-shadow: var(--shadow-sm); }
.contact-form-wrapper { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: clamp(28px,4vw,44px); box-shadow: var(--shadow-md); }
.form-progress { display: flex; align-items: center; margin-bottom: 36px; }
.fp-step { display: flex; align-items: center; gap: 10px; flex: 1; }
.fp-circle { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--bg-2); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; color: var(--muted); transition: all var(--dur-base) var(--ease-out); }
.fp-label { font-size: .78rem; font-weight: 500; color: var(--muted); transition: color var(--dur-base); }
.fp-active .fp-circle { background: var(--fg); border-color: var(--fg); color: var(--white); }
.fp-active .fp-label { color: var(--fg); font-weight: 600; }
.fp-done .fp-circle { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--white); }
.fp-line { flex: 1; height: 1px; background: var(--border); margin: 0 12px; }
.form-block { margin-bottom: 28px; }
.form-block:last-child { margin-bottom: 0; }
.form-block-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.form-block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3-1 { grid-template-columns: 3fr 1fr; }
.form-row-1-3 { grid-template-columns: 1fr 3fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: .78rem; font-weight: 600; color: var(--secondary); }
.form-group input, .form-group textarea, .form-group select { padding: 11px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--bg); font-size: .875rem; color: var(--fg); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); outline: none; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(12,10,9,.07); }
.form-group.has-error input, .form-group.has-error textarea { border-color: var(--error); }
.field-error { font-size: .73rem; color: var(--error); min-height: 14px; }
.form-optional { color: var(--muted); font-weight: 400; font-size: .73rem; }
.required { color: var(--accent-hi); }
textarea { resize: vertical; min-height: 80px; }
.form-panel-hidden { display: none !important; }
.payment-options { display: flex; flex-direction: column; gap: 8px; }
.payment-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: all var(--dur-fast); }
.payment-option:hover { border-color: var(--fg); }
.payment-option--active { border-color: var(--fg); background: var(--bg); }
.payment-icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--bg-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--secondary); }
.payment-info strong { font-size: .85rem; font-weight: 700; display: block; margin-bottom: 3px; }
.payment-info p { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.payment-check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); transition: all var(--dur-fast); }
.payment-option--active .payment-check { background: var(--fg); border-color: var(--fg); }
.form-actions { margin-top: 24px; }
.form-actions-split { display: flex; gap: 10px; }
.btn-back { min-width: 100px; }
.btn-submit { flex: 1; }
.btn-add-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-full); font-size: .76rem; font-weight: 600; color: var(--secondary); border: 1.5px solid var(--border); transition: all var(--dur-fast); }
.btn-add-item:hover { border-color: var(--fg); color: var(--fg); }
.item-row { border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 18px; margin-bottom: 10px; transition: border-color var(--dur-fast); }
.item-row:focus-within { border-color: var(--fg); }
.item-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.item-row-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--secondary); }
.item-remove-btn { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all var(--dur-fast); }
.item-remove-btn:hover { background: #FEE2E2; color: var(--error); }
.item-section { margin-bottom: 12px; }
.item-section-label { font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .07em; }
.type-chips, .pos-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.type-chip, .pos-chip { padding: 5px 11px; border-radius: var(--r-full); font-size: .74rem; font-weight: 500; color: var(--secondary); border: 1px solid var(--border); transition: all var(--dur-fast); }
.type-chip:hover, .pos-chip:hover { border-color: var(--fg); color: var(--fg); }
.type-chip.active, .pos-chip.active { background: var(--fg); border-color: var(--fg); color: var(--white); }
.form-color-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.form-color-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); }
.form-color-swatch:hover { transform: scale(1.3); z-index: 1; }
.form-color-swatch.active { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--fg); }
.item-file-zone { position: relative; border: 1.5px dashed var(--border); border-radius: var(--r-lg); transition: border-color var(--dur-fast), background var(--dur-fast); overflow: hidden; }
.item-file-zone.dragover { border-color: var(--accent-hi); background: var(--accent-bg); }
.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.item-file-ui { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px; text-align: center; color: var(--muted); font-size: .78rem; pointer-events: none; }
.file-link { color: var(--accent-hi); text-decoration: underline; }
.item-file-ui small { font-size: .68rem; color: var(--subtle); }
.item-file-chosen { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--fg); font-size: .82rem; font-weight: 500; }
.file-clear { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); flex-shrink: 0; cursor: pointer; transition: all var(--dur-fast); }
.file-clear:hover { background: #FEE2E2; color: var(--error); }
.initials-field { margin-top: 8px; }
.initials-input, .item-sizes, .item-color-text { width: 100%; }

/* Anfrageformular – Produkt-/Varianten-/Druck-Auswahl (DB-gesteuert) */
.item-product { width: 100%; padding: 11px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--bg); font-size: .875rem; color: var(--fg); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.item-product:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(12,10,9,.07); }
.item-variant-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.item-variant-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--border); transition: border-color var(--dur-fast); }
.item-variant-line:hover { border-color: var(--secondary); }
.iv-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 120px; }
.item-variant-line .iv-size, .item-variant-line .iv-color { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--bg); font-size: .85rem; font-weight: 500; color: var(--fg); outline: none; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.item-variant-line .iv-qty { width: 78px; flex-shrink: 0; padding: 9px 12px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--bg); font-size: .85rem; color: var(--fg); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.item-variant-line .iv-size:focus, .item-variant-line .iv-color:focus, .item-variant-line .iv-qty:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(12,10,9,.07); }
/* Farbvorschau-Punkt – immer sichtbar, spiegelt die gewählte Farbe */
.iv-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); background: #cccccc; transition: background var(--dur-fast), border-color var(--dur-fast); }
.iv-remove { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; flex-shrink: 0; cursor: pointer; transition: all var(--dur-fast); }
.iv-remove:hover { background: #FEE2E2; color: var(--error); }
.btn-add-variant { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); font-size: .74rem; font-weight: 600; color: var(--secondary); border: 1.5px dashed var(--border); transition: all var(--dur-fast); }
.btn-add-variant:hover { border-color: var(--fg); color: var(--fg); }
.item-prints-uploads { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.item-upload-label { font-size: .74rem; font-weight: 600; color: var(--secondary); margin-bottom: 5px; }
/* Druck-Aufpreis im Chip */
.pos-chip .chip-price { opacity: .75; font-weight: 600; }
/* Live-Gesamtpreis-Box */
.cart-totals { margin-top: 14px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.cart-totals[hidden] { display: none; }
.cart-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-total-label { font-size: .82rem; font-weight: 600; color: var(--secondary); }
.cart-total-value { font-size: 1.05rem; font-weight: 700; color: var(--fg); }
.cart-total-hint { font-size: .7rem; color: var(--muted); margin: 4px 0 0; }
.form-success { margin-top: 14px; padding: 14px 16px; background: #F0FDF4; border: 1px solid #86EFAC; border-radius: var(--r-lg); display: flex; align-items: center; gap: 10px; font-size: .855rem; font-weight: 500; color: #166534; }
.form-success[hidden] { display: none; }
.erp-status { font-size: .8rem; color: var(--error); margin-top: 8px; min-height: 16px; display: block; }
.contact-info { display: flex; flex-direction: column; gap: 10px; }
.contact-info-card { display: flex; gap: 14px; padding: 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); transition: box-shadow var(--dur-base); }
.contact-info-card:hover { box-shadow: var(--shadow-sm); }
.contact-info-icon { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--secondary); flex-shrink: 0; }
.contact-info-card h4 { font-size: .78rem; font-weight: 700; margin-bottom: 4px; }
.contact-info-card p { font-size: .76rem; color: var(--secondary); line-height: 1.5; margin: 0; }
.contact-info-card a { font-size: .76rem; color: var(--accent-hi); font-weight: 500; }
.contact-info-card a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer { background: var(--fg); color: rgba(255,255,255,.55); padding: 40px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-accent { color: var(--accent-hi); }
.footer-brand p { font-size: .76rem; margin-top: 6px; color: rgba(255,255,255,.45); }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-nav a { font-size: .78rem; color: rgba(255,255,255,.45); transition: color var(--dur-fast); }
.footer-nav a:hover { color: var(--white); }
.footer-copy { font-size: .73rem; color: rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════════
   FLOATING CTA
═══════════════════════════════════════════════════════ */
.floating-cta {
  position: fixed; bottom: 28px; right: 28px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r-full);
  background: var(--fg); color: var(--white);
  font-size: .855rem; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-fast), background var(--dur-fast);
}
.floating-cta:hover { background: var(--accent-mid); transform: translateY(-3px) !important; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.floating-cta.hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }

/* ═══════════════════════════════════════════════════════
   SONNER-STYLE TOASTS
═══════════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column-reverse; gap: 8px;
  align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 48px);
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: var(--r-lg);
  background: var(--fg); color: var(--white);
  font-size: .855rem; font-weight: 500; line-height: 1.4;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  pointer-events: all; min-width: 260px; max-width: 400px;
  animation: toast-in .3s var(--ease-out) both;
}
.toast--success { background: #15803D; }
.toast--error   { background: #B91C1C; }
.toast.toast-out { animation: toast-out .25s var(--ease-out) forwards; }
@keyframes toast-in  { from{opacity:0;transform:translateY(14px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toast-out { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(8px) scale(.95)} }
.toast-close { margin-left: auto; opacity: .55; font-size: 1rem; line-height: 1; cursor: pointer; transition: opacity var(--dur-fast); flex-shrink: 0; }
.toast-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════════════════ */
.fade-up, .fade-left, .fade-right { opacity: 0; }
.fade-up.visible    { animation: fadeUp   .72s var(--ease-out) both; animation-delay: var(--delay, 0s); }
.fade-left.visible  { animation: fadeLeft .72s var(--ease-out) both; animation-delay: var(--delay, 0s); }
.fade-right.visible { animation: fadeRight .72s var(--ease-out) both; animation-delay: var(--delay, 0s); }
@keyframes fadeUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeLeft  { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* ═══════════════════════════════════════════════════════
   EVENTS — Live-Druck bei deiner Veranstaltung
═══════════════════════════════════════════════════════ */
.events { background: var(--fg); color: var(--white); }
.events .section-header .eyebrow { color: var(--accent-hi); }
.events .section-header h2 { color: var(--white); }
.events .section-header .section-intro { color: rgba(255,255,255,.6); }

/* Bento grid */
.events-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
  margin-bottom: 48px;
}
/* Large card spans 2 rows */
.ev-feature--large {
  grid-row: span 2;
}
/* CTA card spans 2 cols */
.ev-feature--accent {
  grid-column: span 2;
}

.ev-feature {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl); padding: 32px;
  transition: background var(--dur-base), transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base);
}
.ev-feature:hover {
  background: rgba(255,255,255,.09);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}

/* Dark variant */
.ev-feature--dark {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}

/* Accent CTA card */
.ev-feature--accent {
  background: var(--accent-mid);
  border-color: transparent;
  display: flex; align-items: center;
}
.ev-feature--accent:hover {
  background: var(--accent);
  box-shadow: 0 20px 50px rgba(180,83,9,.4);
}
.ev-cta-content { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.ev-cta-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 6px;
}
.ev-cta-text { font-size: .9rem; color: rgba(255,255,255,.85); line-height: 1.55; flex: 1; min-width: 200px; }
.ev-feature--accent .btn-accent {
  background: var(--fg); color: var(--white); white-space: nowrap; flex-shrink: 0;
}
.ev-feature--accent .btn-accent:hover { background: var(--primary); }

.ev-feature-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-hi); margin-bottom: 20px;
}
.ev-feature-icon--light { color: rgba(255,255,255,.85); }

.ev-feature h3 { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.ev-feature p  { font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.68; }

.ev-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.ev-list li {
  font-size: .83rem; color: rgba(255,255,255,.65); font-weight: 500;
  padding-left: 18px; position: relative;
}
.ev-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi);
}

.ev-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ev-badge {
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 600;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.12);
}

/* Stats bar */
.events-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap;
}
.ev-stat { text-align: center; }
.ev-stat strong {
  display: block; font-size: 1.6rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--white); line-height: 1;
}
.ev-stat span {
  font-size: .7rem; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; display: block;
}
.ev-stat-sep {
  width: 1px; height: 36px; background: rgba(255,255,255,.1);
}

/* Responsive */
@media (max-width: 900px) {
  .events-bento {
    grid-template-columns: 1fr 1fr;
  }
  .ev-feature--large { grid-row: span 1; }
  .ev-feature--accent { grid-column: span 2; }
}
@media (max-width: 600px) {
  .events-bento {
    grid-template-columns: 1fr;
  }
  .ev-feature--large  { grid-row: span 1; }
  .ev-feature--accent { grid-column: span 1; }
  .ev-cta-content { flex-direction: column; align-items: flex-start; gap: 16px; }
  .events-stats { gap: 20px; }
  .ev-stat-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════
   LEGAL PAGES (Impressum, AGB, Datenschutz, Versand)
═══════════════════════════════════════════════════════ */
.legal-page { padding-top: var(--nav-h); min-height: 100svh; }

/* Hero */
.legal-hero {
  padding: clamp(52px, 8vw, 88px) 0 clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.legal-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; color: var(--muted); margin-bottom: 18px;
}
.legal-breadcrumb a { color: var(--accent-hi); font-weight: 500; }
.legal-breadcrumb a:hover { text-decoration: underline; }
.legal-breadcrumb span[aria-hidden] { color: var(--border-2); }
.legal-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px;
}
.legal-hero p { font-size: .875rem; color: var(--muted); }

/* Layout: TOC sidebar + content */
.legal-wrap {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 210px 1fr; gap: 64px;
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(80px, 8vw, 120px);
  align-items: start;
}
.legal-wrap--single { grid-template-columns: 1fr; }
.legal-wrap--single .legal-content { max-width: 720px; }

/* TOC */
.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.legal-toc-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 12px;
}
.legal-toc-list { display: flex; flex-direction: column; gap: 1px; }
.legal-toc-link {
  display: block; padding: 7px 12px; border-radius: var(--r-sm);
  font-size: .8rem; color: var(--secondary); line-height: 1.4;
  border-left: 2px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.legal-toc-link:hover { background: var(--bg-2); color: var(--fg); }
.legal-toc-link.active {
  color: var(--accent-hi); border-left-color: var(--accent-hi);
  background: var(--accent-bg); font-weight: 500;
}

/* Content */
.legal-content { min-width: 0; }
.legal-section {
  padding: 32px 0; border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 32px);
}
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { border-bottom: none; padding-bottom: 0; }
.legal-section h2 {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 12px; color: var(--fg);
}
.legal-section h3 {
  font-size: .925rem; font-weight: 700; margin: 18px 0 7px; color: var(--fg);
}
.legal-section p {
  font-size: .875rem; color: var(--secondary); line-height: 1.77;
  margin-bottom: 10px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol {
  padding-left: 0; margin: 8px 0 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.legal-section li {
  font-size: .875rem; color: var(--secondary); line-height: 1.65;
  padding-left: 18px; position: relative;
}
.legal-section li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi);
}
.legal-section a { color: var(--accent-hi); word-break: break-word; }
.legal-section a:hover { text-decoration: underline; }
.legal-section strong { color: var(--fg); font-weight: 600; }

.legal-highlight {
  background: var(--accent-bg); border: 1px solid rgba(217,119,6,.22);
  border-left: 3px solid var(--accent-hi); border-radius: var(--r-md);
  padding: 15px 18px; font-size: .875rem; color: var(--accent);
  line-height: 1.65; margin: 12px 0;
}
.legal-highlight strong { color: var(--accent); }
.legal-highlight ul { margin-top: 8px; }
.legal-highlight li::before { background: var(--accent-hi); }

.legal-address {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 20px;
  font-size: .875rem; color: var(--secondary); line-height: 1.8;
  margin: 12px 0; font-style: normal;
}
.legal-address a { color: var(--accent-hi); }

/* Responsive */
@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }
  .legal-toc {
    position: static; border-bottom: 1px solid var(--border);
    padding-bottom: 20px; margin-bottom: 12px;
  }
  .legal-toc-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .legal-toc-link {
    border-left: none; border-bottom: 2px solid transparent;
    border-radius: var(--r-sm); padding: 5px 10px; font-size: .75rem;
  }
  .legal-toc-link.active { border-bottom-color: var(--accent-hi); }
}
@media (max-width: 480px) {
  .legal-hero h1 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
  .legal-section { padding: 24px 0; }
}

/* ═══════════════════════════════════════════════════════
   EVENT-FORMULAR SEKTION
═══════════════════════════════════════════════════════ */
.event-form-section { background: var(--bg-2); }

.event-form-grid {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 80px); align-items: start;
}

.efg-copy .eyebrow { margin-bottom: 16px; }
.efg-copy h2 {
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -.03em; margin-bottom: 18px;
}
.efg-copy p { font-size: .9rem; color: var(--secondary); line-height: 1.72; margin-bottom: 24px; }

.efg-bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.efg-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; font-weight: 500;
}
.efg-bullets li::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-hi);
}

.efg-contact-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .83rem; color: var(--muted);
}
.efg-contact-hint svg { color: var(--accent-hi); flex-shrink: 0; }
.efg-contact-hint a { color: var(--accent-hi); font-weight: 500; }
.efg-contact-hint a:hover { text-decoration: underline; }

.efg-form-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}

/* date input consistent styling */
input[type="date"] { appearance: none; -webkit-appearance: none; }

.form-privacy-note {
  margin-top: 14px; font-size: .73rem; color: var(--muted);
  text-align: center; line-height: 1.6;
}
.form-privacy-note a { color: var(--accent-hi); }
.form-privacy-note a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   EINFACHES KONTAKTFORMULAR
═══════════════════════════════════════════════════════ */
.contact-simple { background: var(--bg); }

.cs-grid {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 80px); align-items: start;
}

.cs-copy .eyebrow { margin-bottom: 16px; }
.cs-copy h2 {
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -.03em; margin-bottom: 18px;
}
.cs-copy p { font-size: .9rem; color: var(--secondary); line-height: 1.72; margin-bottom: 24px; }

.cs-form-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */

/* ── ≤1200px · Nav → Drawer ──────────────────────────────
   Zwei Dropdowns (Textilveredelung + Webdesign) plus alle
   Links passen erst ab ~1160px nebeneinander. Darunter
   übernimmt der Drawer; das übrige Desktop-Layout bleibt. */
@media (max-width: 1200px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
}

/* ── ≤1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .process-line { display: none; }
  .process-step { border-bottom: 1px solid var(--border); }
  .process-step:nth-child(odd) { border-right: 1px solid var(--border); }
  .cards { grid-template-columns: repeat(2,1fr); }
}

/* ── ≤768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; --pad: clamp(16px, 4vw, 28px); }

  /* Nav → drawer */
  .nav { display: none; }
  .menu-toggle { display: flex; }

  /* Hero: stack image on top, text below */
  .hero {
    grid-template-columns: 1fr; padding-right: var(--pad);
    min-height: auto; padding-top: var(--nav-h);
  }
  .hero-img-col {
    order: -1; min-height: 52svh;
    border-radius: 0; margin: 0;
  }
  .hero-img-col::after { display: none; }
  .hero-text-col { padding: 28px 0 52px; }

  /* Showcase */
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  .showcase-item:last-child { display: none; }

  /* Services */
  .cards { grid-template-columns: 1fr; }
  .card { padding: 28px 24px; }

  /* Product window tabs */
  .ptw-header { padding: 14px 20px; gap: 10px; }
  .ptw-nav {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ptw-nav::-webkit-scrollbar { display: none; }
  .ptw-tab { flex-shrink: 0; }
  .ptw-body { padding: 20px; }
  .ptw-meta-row { grid-template-columns: 1fr; gap: 20px; }

  /* Benefits */
  .benefits-list { grid-template-columns: 1fr; }
  .benefit-item { border-right: none; padding: 28px 24px; }
  .benefit-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .benefit-item:last-child { border-bottom: none; }

  /* Process */
  .process-steps { grid-template-columns: 1fr; }
  .process-step { border-right: none !important; padding: 24px 20px; text-align: left; }
  .step-num { margin: 0 0 12px; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .portfolio-grid .project-card:last-child { display: none; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-stats { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Event form + contact simple */
  .event-form-grid,
  .cs-grid { grid-template-columns: 1fr; gap: 32px; }
  .efg-form-wrap,
  .cs-form-wrap { padding: 28px 22px; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-wrapper { padding: 28px 22px; }

  /* Form rows → always single column on mobile */
  .form-row,
  .form-row-3-1,
  .form-row-1-3 { grid-template-columns: 1fr; gap: 8px; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-nav { gap: 12px 20px; flex-wrap: wrap; }
}

/* ── ≤480px ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --pad: 16px; }

  /* Section vertical rhythm */
  .section { padding: clamp(56px, 10vw, 80px) 0; }
  .section-header { margin-bottom: clamp(36px, 6vw, 52px); }

  /* Hero */
  .hero-img-col { min-height: 48svh; }
  .hero-meta { flex-wrap: wrap; gap: 10px 16px; }
  .hero-stat-sep { display: none; }
  .hero-proof { font-size: .75rem; }

  /* Showcase → single column */
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-item { aspect-ratio: 4/3; }
  .showcase-item:last-child { display: block; }

  /* Services cards */
  .card { padding: 24px 18px; }
  .card::before { font-size: 4rem; }

  /* Product window */
  .ptw-header { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .ptw-body { padding: 16px; }

  /* Benefits */
  .benefit-item { padding: 20px 16px; gap: 14px; }

  /* Process */
  .process-step { padding: 18px 16px; }
  .step-num { width: 38px; height: 38px; font-size: .7rem; }
  .step-body h4 { font-size: .85rem; }
  .step-body p { font-size: .78rem; }

  /* Pricing */
  .pricing-card { padding: 22px 18px; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-grid .project-card:last-child { display: block; }

  /* About stats - keep 2-col, tighten numbers */
  .about-stat-num { font-size: 1.3rem; }
  .about-stats { gap: 12px; }

  /* Forms - bump minimum readable sizes */
  .form-group label { font-size: .84rem; }
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: .9rem;
    padding: 13px 14px;
    min-height: 46px;
  }
  .field-error { font-size: .78rem; }
  .form-block-title { font-size: .76rem; }
  .type-chip, .pos-chip { font-size: .8rem; padding: 7px 13px; }
  .size-badge { font-size: .78rem; padding: 5px 12px; }
  .item-section-label { font-size: .76rem; }
  .contact-form-wrapper { padding: 20px 16px; border-radius: var(--r-xl); }
  .efg-form-wrap,
  .cs-form-wrap { padding: 20px 16px; border-radius: var(--r-xl); }
  .form-progress { gap: 0; }
  .fp-label { font-size: .74rem; }

  /* Payment options */
  .payment-option { padding: 12px 14px; gap: 10px; }

  /* Events section */
  .ev-feature { padding: 24px 18px; }
  .ev-feature-icon { width: 44px; height: 44px; margin-bottom: 16px; }
  .events-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px;
  }
  .ev-stat-sep { display: none; }

  /* Contact info cards */
  .contact-info-card { padding: 14px; gap: 12px; }

  /* Floating CTA */
  .floating-cta { bottom: 16px; right: 16px; padding: 12px 18px; font-size: .82rem; }
}

/* ── ≤380px — extreme small screens ─────────────────── */
@media (max-width: 380px) {
  :root { --pad: 14px; }

  /* Hero */
  .hero-headline { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .hero-lead { font-size: .875rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-actions .btn-outline { box-shadow: inset 0 0 0 1.5px var(--border-2); }

  /* Section headings */
  .section-header h2 { font-size: clamp(1.55rem, 7.5vw, 2rem); }

  /* Benefits */
  .benefit-item { padding: 16px 14px; }

  /* Process */
  .process-step { padding: 14px; }

  /* About stats → 2 col still fine, reduce number size */
  .about-stat-num { font-size: 1.15rem; }
  .stat-unit { font-size: .8rem; }

  /* Form step labels hide on tiny screens to save space */
  .fp-label { display: none; }
  .fp-circle { width: 28px; height: 28px; font-size: .7rem; }
  .fp-line { margin: 0 8px; }

  /* Payment option description text — hide to reduce clutter */
  .payment-info p { display: none; }
  .payment-option { padding: 10px 12px; }

  /* PTW */
  .ptw-header { padding: 12px 14px; }
  .ptw-body { padding: 14px 12px; }

  /* Events */
  .ev-feature { padding: 20px 14px; }
  .events-stats { gap: 12px; }
  .ev-stat strong { font-size: 1.3rem; }

  /* Floating CTA — icon only on smallest screens */
  .floating-cta span { display: none; }
  .floating-cta { padding: 14px; border-radius: 50%; }
  .floating-cta svg { margin: 0; }

  /* Card */
  .card { padding: 20px 16px; }
  .pricing-card { padding: 18px 14px; }
}

/* ── prefers-reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* One-shot transitions + entrance animations settle instantly. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Decorative looping accents must come to REST. Forcing duration to .01ms
     does NOT stop an infinite animation — it loops it ~100k×/s, i.e. a
     strobe. Stop them outright so the dots sit still instead of flickering. */
  .eyebrow-dot, .brand-mark::before { animation: none !important; }
  /* The trust + gallery marquees stay in slow, continuous, pausable motion
     (decorative, aria-hidden, pause-on-hover) rather than freezing. */
  .trust-track   { animation: ticker 34s linear infinite !important; }
  .gallery-track { animation: ticker 64s linear infinite !important; }
}


/* ====================== 2/3 · REFINEMENT (redesign.css) ====================== */
/* ═══════════════════════════════════════════════════════
   LayerPulse · "Minimal Hell" — Editorial Light refinement
   Loaded AFTER style.css. Keeps the light base, but makes it
   calmer & more editorial: pure white, more whitespace,
   monochrome with ONE restrained accent, flatter surfaces.
═══════════════════════════════════════════════════════ */

/* ── Tokens: crisp white, single accent ──────────────── */
:root {
  --bg:        #FFFFFF;   /* pure white canvas */
  --bg-2:      #F6F6F4;   /* whisper-grey alt sections */
  --fg:        #0B0A09;   /* near-black ink (text + solid CTAs) */
  --secondary: #4B4842;
  /* WCAG 2.2 AA (1.4.3): Textfarben mit ≥4,5:1 auch auf --bg-2.
     --muted  #79746C lag auf #F6F6F4 bei nur 4,45:1 → #6F6A63 (≈5,0:1).
     --subtle #A8A29E lag bei 2,4:1 (u. a. Sprach-Buttons) → #75706A (≈4,9:1). */
  --muted:     #6F6A63;
  --subtle:    #75706A;
  --border:    #ECEAE7;
  --border-2:  #DEDBD6;

  /* one accent — warm amber, used sparingly */
  --accent:     #B45309;
  --accent-mid: #B45309;
  /* WCAG 2.2 AA (1.4.3): --accent-hi wird vielfach als kleine Textfarbe genutzt
     (eyebrow, pkg-num, addon-price, Links). #C2680C = nur 3,98:1 auf Weiß →
     #B45309 (≈4,8:1) besteht 4,5:1; als Icon-/Akzentfarbe weiterhin ≥3:1. */
  --accent-hi:  #B45309;
  --accent-bg:  #FBF6EF;

  /* softer, flatter editorial shadows */
  --shadow-xs: 0 1px 2px rgba(12,10,9,.04);
  --shadow-sm: 0 1px 3px rgba(12,10,9,.05);
  --shadow-md: 0 2px 10px rgba(12,10,9,.05);
  --shadow-lg: 0 12px 36px rgba(12,10,9,.07);
  --shadow-xl: 0 24px 70px rgba(12,10,9,.09);

  --max-w: 1160px;
}

body { background: var(--bg); color: var(--fg); }
::selection { background: var(--fg); color: #fff; }

/* ── More air ─────────────────────────────────────────── */
.section { padding: clamp(88px, 11vw, 168px) 0; }
.section-header { margin-bottom: clamp(52px, 7vw, 84px); }

/* ── Header: clean, quiet ─────────────────────────────── */
.site-header.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 1px 0 var(--border);
}
.nav-link:hover, .nav-link.active { color: var(--fg); background: var(--bg-2); }
.brand-mark { background: var(--fg); }
.brand-mark::before { background: var(--accent-hi); }

/* ── Buttons: editorial — solid black primary, hairline ghost ── */
.btn { border-radius: 999px; font-weight: 600; }
.nav-cta, .drawer-cta, .btn-accent, .floating-cta {
  background: var(--fg) !important;
  color: #fff !important;
  box-shadow: none;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.nav-cta:hover, .drawer-cta:hover, .btn-accent:hover, .floating-cta:hover {
  background: #2A2723 !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.btn-outline:hover {
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}

/* ── Hero: editorial, generous whitespace ─────────────── */
.hero { min-height: clamp(620px, 92svh, 920px); }
.hero::before {
  background: radial-gradient(ellipse 60% 70% at 82% 40%, rgba(180,83,9,.045) 0%, transparent 62%);
}
.hero-headline {
  font-size: clamp(2.7rem, 6vw, 5rem);
  letter-spacing: -.04em; line-height: 1.02;
}
.gradient-text {
  /* the ONE accent moment — a quiet warm gradient */
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-hi) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-lead { color: var(--secondary); max-width: 44ch; }
.hero-img-col img { transform: scale(1.04); }
.hero-img-col::after {
  background: linear-gradient(90deg, var(--bg) 0%, transparent 32%);
}

/* ── Surfaces: flatter, hairline borders ──────────────── */
.card, .pricing-card, .ptw-window, .contact-form-wrapper,
.founder-card, .contact-info-card, .formula-part {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.card:hover, .pricing-card:hover, .contact-info-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.benefit-item:hover { background: var(--bg-2); }

/* trust bar — subtle, no heavy fill */
.trust-bar { background: var(--bg-2); border-block: 1px solid var(--border); }
.trust-item { color: var(--muted); }
.trust-sep  { color: var(--subtle); }   /* was white → invisible on light bar */

/* keep accent truly restrained: example card uses a faint warm tint */
.pricing-card--example { border-color: var(--accent); background: var(--accent-bg); }

/* studio banner: textured print macro background — stronger scrim keeps the centered text readable */
.studio-banner-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.66) 100%);
}

/* footer: quiet — light background now, so flip the (formerly white) text to ink */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); color: var(--muted); }
.site-footer .brand-name { color: var(--fg); }
.site-footer .brand-accent { color: var(--accent-hi); }
.footer-brand p { color: var(--muted); }
.footer-nav a { color: var(--secondary); }
.footer-nav a:hover { color: var(--fg); }
.footer-copy { color: var(--subtle); }

/* ═══════════════════════════════════════════════════════
   ENHANCEMENT LAYER (2026-06) — loaded last
   Goal: keep it schlicht/monochrome, but give the page
   rhythm, clearer section breaks and quiet motion.
═══════════════════════════════════════════════════════ */

/* ── Scroll progress (thin amber rule, very top) ──────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: var(--accent-hi);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* ── Section rhythm: clip stray decoration, hairline split ── */
.section { position: relative; overflow: clip; }
.section[data-index] > .container { position: relative; z-index: 1; }

/* giant ghost index — editorial texture, no colour */
.section[data-index]::before {
  content: attr(data-index);
  position: absolute; top: clamp(24px, 4vw, 52px); left: 50%;
  transform: translateX(-50%);
  font-size: clamp(7rem, 22vw, 18rem); font-weight: 800;
  letter-spacing: -.06em; line-height: .8;
  color: var(--fg); opacity: .03;
  pointer-events: none; z-index: 0; user-select: none;
}

/* animated vertical tick above each section header */
.section-header { position: relative; }
.section-header::before {
  content: ""; display: block;
  width: 1px; height: 0; margin: 0 auto 28px;
  background: linear-gradient(var(--accent-hi), transparent);
  transition: height .9s var(--ease-out);
}
.section-header.in-view::before { height: clamp(38px, 6vw, 60px); }

/* hairline divider between adjacent text sections */
.section + .section { border-top: 1px solid var(--border); }

/* ── Image reveal (clip wipe) ─────────────────────────── */
[data-reveal] {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path 1.05s var(--ease-out), transform 1.05s var(--ease-out);
}
[data-reveal].revealed { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ── Showcase: a touch more air + zoom ────────────────── */
.showcase-grid { gap: 16px; }
.showcase-item { border-radius: var(--r-lg); }
.showcase-item img { transition: transform .9s var(--ease-out); }
.showcase-item:hover img { transform: scale(1.07); }

/* ── Hero headline: masked line reveal ────────────────── */
.hero-headline .hl-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-headline .hl-inner { display: inline-block; transform: translateY(118%); }
.hero-headline.revealed .hl-inner {
  transform: translateY(0);
  transition: transform .9s var(--ease-out);
}
.hero-headline.revealed .hl-line:nth-child(2) .hl-inner { transition-delay: .12s; }

/* ── Studio interlude band (parallax) ─────────────────── */
.studio-strip { position: relative; height: clamp(260px, 42vw, 520px); overflow: hidden; }
.studio-strip img {
  width: 100%; height: 132%; object-fit: cover;
  transform: translateY(-12%); will-change: transform;
}
/* z-index:1 keeps the darkening gradient ABOVE the photo but BELOW the
   caption — a pseudo-element otherwise paints over its siblings, which
   was burying the "Mit Sorgfalt gepresst …" text. */
.studio-strip::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,10,9,.82) 0%, rgba(11,10,9,.5) 48%, rgba(11,10,9,.12) 82%, transparent 100%);
}
.studio-strip-cap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.studio-strip-cap .container { width: 100%; }
.ss-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 16px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.ss-eyebrow .eyebrow-dot { background: var(--accent-hi); }
.studio-strip-cap p {
  color: #fff; font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.18; max-width: 18ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.studio-strip-cap em { font-style: normal; color: var(--accent-hi); }

/* ── One dark beat: inverted "Ablauf" section ─────────── */
.process.section--dark { background: var(--fg); color: #fff; }
.process.section--dark .section-header h2 { color: #fff; }
.process.section--dark .section-intro { color: rgba(255,255,255,.6); }
.process.section--dark .eyebrow { color: var(--accent-hi); }
.process.section--dark[data-index]::before { color: #fff; opacity: .05; }
.process.section--dark .step-body h4 { color: #fff; }
.process.section--dark .step-body p { color: rgba(255,255,255,.58); }
.process.section--dark .step-num { background: #fff; color: var(--fg); }
.process.section--dark .process-step:hover .step-num { background: var(--accent-hi); color: #fff; }
.process.section--dark .process-line { background: rgba(255,255,255,.18); }
.process.section--dark .process-line::after { border-color: rgba(255,255,255,.18); }
.process.section--dark .process-steps.lines-visible .process-line { background: var(--accent-hi); }
.process.section--dark .process-steps.lines-visible .process-line::after { border-color: var(--accent-hi); }

/* ── Respect reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-headline .hl-inner { transform: none !important; }
  [data-reveal] { clip-path: none !important; transform: none !important; }
  .section-header::before { height: clamp(38px, 6vw, 60px); transition: none; }
}

/* ── Reduced motion handled by base styles ────────────── */

/* ═══════════════════════════════════════════════════════
   i18n + NEW LEISTUNGSSEITEN (2026-06)
   Sprachumschalter, Nav-Dropdown, Unterseiten-Komponenten.
   Bleibt im editorialen Stil: monochrom, ein Akzent, hairline.
═══════════════════════════════════════════════════════ */

/* ── Sprachumschalter (Nav, oben rechts) ──────────────── */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 6px; flex-shrink: 0;
}
.lang-btn {
  padding: 6px 8px; border-radius: var(--r-sm);
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  color: var(--subtle); background: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.lang-btn:hover { color: var(--secondary); }
.lang-btn.active { color: var(--fg); }
.lang-divider { color: var(--border-2); font-size: .76rem; user-select: none; }

/* ── Nav-Dropdown (Leistungen) ────────────────────────── */
.nav-item--dropdown { position: relative; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: var(--r-full);
  font-size: .85rem; font-weight: 500; color: var(--secondary);
  background: none; cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-dd-trigger:hover,
.nav-item--dropdown:hover .nav-dd-trigger,
.nav-item--dropdown:focus-within .nav-dd-trigger { color: var(--fg); background: var(--bg-2); }
.nav-dd-trigger svg { transition: transform var(--dur-base) var(--ease-out); }
.nav-item--dropdown:hover .nav-dd-trigger svg,
.nav-item--dropdown:focus-within .nav-dd-trigger svg { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 320px; padding: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  z-index: 120;
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* hover bridge so the menu doesn't close in the gap */
.nav-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dd-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  transition: background var(--dur-fast);
}
.nav-dd-item:hover { background: var(--bg-2); }
.nav-dd-ico {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--bg-2); color: var(--accent-hi);
  display: flex; align-items: center; justify-content: center;
}
.nav-dd-item:hover .nav-dd-ico { background: var(--accent-bg); }
.nav-dd-text strong { display: block; font-size: .85rem; font-weight: 700; color: var(--fg); margin-bottom: 2px; }
.nav-dd-text span { font-size: .76rem; color: var(--muted); line-height: 1.45; }
.nav-dd-label {
  margin: 0; padding: 8px 14px 4px;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.nav-dd-group + .nav-dd-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

/* ── Drawer: Service-Untergruppe + Sprachumschalter ───── */
.drawer-group-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
  padding: 16px 16px 6px;
}
.drawer-lang {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 16px 16px 0;
  border-top: 1px solid var(--border);
}
.drawer-lang .drawer-lang-label { font-size: .8rem; color: var(--muted); margin-right: auto; }
.drawer-lang .lang-btn {
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--border); font-size: .82rem;
}
.drawer-lang .lang-btn.active { background: var(--fg); color: #fff; border-color: var(--fg); }

/* ═══════════════════════════════════════════════════════
   UNTERSEITEN — gemeinsamer Page-Hero
═══════════════════════════════════════════════════════ */
.page-main { padding-top: var(--nav-h); }
.page-hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
  position: relative; overflow: clip;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 80% 30%, rgba(180,83,9,.05) 0%, transparent 62%);
}
.page-hero .container { position: relative; z-index: 1; max-width: 860px; }
.page-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; color: var(--muted); margin-bottom: 22px;
}
.page-breadcrumb a { color: var(--accent-hi); font-weight: 500; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb span[aria-hidden] { color: var(--border-2); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.04; margin-bottom: 16px;
}
.page-hero .page-subline {
  font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 600;
  color: var(--fg); margin-bottom: 14px; letter-spacing: -.01em;
}
.page-hero .page-lead {
  font-size: clamp(.93rem, 1.5vw, 1.05rem); color: var(--secondary);
  line-height: 1.72; max-width: 56ch; margin-bottom: 32px;
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Hero-Hintergrundbild (Unterseiten) ─────────────────────────────
   Foto füllt die rechte Hälfte des Heros. Helle Scrims (in Section-Farbe)
   schützen oben die (transparente) Navigation und links die Überschrift →
   dunkle Schrift bleibt voll lesbar. Auf Mobil rutscht das Foto nach unten.
   Pfade rel. zu css/. */
.page-hero.lp-hero-img { min-height: clamp(400px, 46vw, 560px); }
/* Text linksbündig & schmal → rechte Hälfte bleibt fürs Foto frei (Split-Hero) */
.page-hero.lp-hero-img .container { max-width: var(--max-w); }
.page-hero.lp-hero-img .container > * { max-width: 560px; }
.page-hero.lp-hero-img::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 44%, transparent 68%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 14%, transparent 32%),
    var(--lp-hero-img) center right / cover no-repeat;
}
@media (max-width: 760px) {
  .page-hero.lp-hero-img { min-height: 0; padding-bottom: clamp(180px, 52vw, 260px); }
  .page-hero.lp-hero-img .container > * { max-width: none; }
  .page-hero.lp-hero-img::after {
    background:
      linear-gradient(180deg, var(--bg) 0%, var(--bg) 58%,
          color-mix(in srgb, var(--bg) 30%, transparent) 72%, transparent 92%),
      var(--lp-hero-img) center bottom / cover no-repeat;
  }
}
.page-hero.lp-hero-textile { --lp-hero-img: url('../../img/opt/jarmoluk-sweatshirts-428607.jpg'); }
.page-hero.lp-hero-apparel { --lp-hero-img: url('../../img/background/pexels-nobleseed-32919789.jpg'); }
.page-hero.lp-hero-web     { --lp-hero-img: url('../../img/opt/pexels-coding-1853305.jpg'); }

/* shared narrower section header on subpages */
.sub-section { padding: clamp(64px, 9vw, 120px) 0; }
.sub-section .section-header { margin-bottom: clamp(40px, 6vw, 64px); }

/* ── Schritt-/Guide-Karten (nummeriert) ──────────────── */
.guide-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}
.guide-step {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.guide-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.guide-step .guide-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fg); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; margin-bottom: 18px;
}
.guide-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.guide-step p { font-size: .86rem; color: var(--secondary); line-height: 1.68; }

/* ── Produktkatalog ──────────────────────────────────── */
.prod-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
}
.prod-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 26px; overflow: hidden;
  box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.prod-ico {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--bg-2); color: var(--fg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
/* Echtes Produktbild oben in der Karte (ersetzt den Icon-Platzhalter). */
.prod-img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-md);
  background: var(--bg-2); margin-bottom: 18px;
}
.prod-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 7px; }
.prod-card p { font-size: .84rem; color: var(--secondary); line-height: 1.6; margin-bottom: 16px; }
.prod-price {
  display: inline-flex; align-items: baseline;
  font-size: .82rem; font-weight: 700; color: var(--fg);
  padding: 5px 12px; border-radius: var(--r-full); background: var(--bg-2);
  font-variant-numeric: tabular-nums;
}

/* ── Druckpositionen (Chips mit Preis) ───────────────── */
.pos-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pos-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--r-full);
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs); font-size: .88rem; font-weight: 600;
}
.pos-pill .pos-pill-price {
  font-size: .82rem; font-weight: 700; color: var(--accent-hi);
  font-variant-numeric: tabular-nums;
}

/* ── Materialkarten ──────────────────────────────────── */
.mat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px; margin-bottom: 28px;
}
.mat-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-sm);
}
.mat-card .mat-ico {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--accent-bg); color: var(--accent-hi);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.mat-card h3 { font-size: .98rem; font-weight: 700; margin-bottom: 7px; }
.mat-card p { font-size: .84rem; color: var(--secondary); line-height: 1.6; }

/* ── Hinweis-/Support-Boxen ──────────────────────────── */
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-box {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 28px;
}
.info-box--accent { background: var(--accent-bg); border-color: rgba(180,83,9,.22); }
.info-box .info-ico {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--bg); color: var(--accent-hi);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.info-box h3 { font-size: .98rem; font-weight: 700; margin-bottom: 8px; }
.info-box p { font-size: .86rem; color: var(--secondary); line-height: 1.7; }

/* ── Webdesign-Pakete ────────────────────────────────── */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pkg-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 34px 30px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.pkg-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }
/* Offset für Sprungmarken aus der Navigation (fixierter Header) */
.pkg-card[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.pkg-card--featured { border-color: var(--accent); }
/* Optionaler Bild-Banner oben in einer Karte (Leistungen-Säulen) */
.pkg-media { margin: 0 0 22px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface, #eef0f3); }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-badge {
  position: absolute; top: -11px; left: 30px;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--fg); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pkg-num { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 14px; }
.pkg-card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.pkg-card > p { font-size: .86rem; color: var(--secondary); line-height: 1.68; margin-bottom: 20px; }
.pkg-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.pkg-features li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: var(--secondary); }
.pkg-features li svg { color: var(--accent-hi); flex-shrink: 0; margin-top: 3px; }
.pkg-foot { margin-top: auto; }
.pkg-price { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.pkg-cap { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.pkg-amount { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--fg); }
.pkg-once { font-size: .74rem; font-weight: 500; color: var(--muted); }

/* Universelle Leistungen oberhalb der Paket-Karten */
.pkg-included { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px 34px; margin-bottom: 30px; }
.pkg-included > h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.pkg-included > p { font-size: .9rem; color: var(--secondary); line-height: 1.7; margin-bottom: 22px; max-width: 78ch; }
.incl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.incl-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--secondary); }
.incl-list li svg { color: var(--gold-ink); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 640px) { .incl-list { grid-template-columns: 1fr; } }

/* ── Preisrechner ────────────────────────────────────── */
.calc {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-md);
  max-width: 920px; margin: 0 auto;
}
.calc-controls { padding: clamp(26px, 4vw, 40px); }
.calc-field { margin-bottom: 24px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-label {
  display: block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 12px;
}
.calc-select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--bg-2);
  font-size: .9rem; font-weight: 500; color: var(--fg); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.calc-select:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(12,10,9,.07); }
.calc-pos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: .82rem; font-weight: 600; color: var(--secondary);
  cursor: pointer; transition: all var(--dur-fast);
}
.calc-chip:hover { border-color: var(--fg); color: var(--fg); }
.calc-chip.active { background: var(--fg); border-color: var(--fg); color: #fff; }
.calc-chip .calc-chip-price { font-size: .76rem; opacity: .8; }
.calc-qty { display: flex; align-items: center; gap: 12px; }
.calc-qty button {
  width: 38px; height: 38px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 1.1rem; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
}
.calc-qty button:hover { border-color: var(--fg); }
.calc-qty input {
  width: 70px; text-align: center; padding: 9px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--bg-2);
  font-size: .95rem; font-weight: 700; color: var(--fg); outline: none;
  -moz-appearance: textfield;
}
.calc-qty input::-webkit-outer-spin-button,
.calc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-result {
  background: var(--fg); color: #fff; padding: clamp(26px, 4vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
}
.calc-result-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255,255,255,.55); margin-bottom: 10px;
}
.calc-total { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.calc-total small { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.6); margin-left: 4px; }
.calc-perpiece { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: 8px; }
.calc-note { font-size: .72rem; color: rgba(255,255,255,.45); line-height: 1.55; margin: 18px 0 22px; }
.calc-result .btn-accent { background: #fff !important; color: var(--fg) !important; }
.calc-result .btn-accent:hover { background: var(--accent-bg) !important; }

/* ── CTA-Band ────────────────────────────────────────── */
.cta-band { background: var(--fg); color: #fff; }
.cta-band .container { text-align: center; max-width: 680px; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 16px; }
.cta-band p { font-size: .95rem; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 30px; }
.cta-band .btn-accent { background: #fff !important; color: var(--fg) !important; }
.cta-band .btn-accent:hover { background: var(--accent-bg) !important; }

/* ── Index: Angebots-Übersicht (3 Bereiche) ──────────── */
.offerings { background: var(--bg-2); }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 34px 30px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.offer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }
.offer-ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--bg-2); color: var(--accent-hi);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.offer-card:hover .offer-ico { background: var(--accent-bg); }
.offer-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; }
.offer-card p { font-size: .87rem; color: var(--secondary); line-height: 1.68; margin-bottom: 22px; }
.offer-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; font-weight: 600; color: var(--fg);
}
.offer-link svg { transition: transform var(--dur-fast) var(--ease-out); }
.offer-card:hover .offer-link { color: var(--accent-hi); }
.offer-card:hover .offer-link svg { transform: translateX(4px); }

/* ── Index: Zwei-Säulen-Leistungen (Textil & Web) ────── */
.duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.duo-grid .pkg-card { padding: 38px 34px; }
.pillar-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pillar-actions .btn { flex: 1 1 0; min-width: 150px; }

/* <picture> wrapper transparent: das innere <img> wird exakt wie zuvor
   gelayoutet (responsive AVIF/WebP via <source>, JPG-Fallback im <img>). */
picture { display: contents; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — neue Komponenten
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pkg-grid, .offer-grid, .duo-grid { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .info-cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Desktop-Dropdown aus, Drawer übernimmt */
  .nav-item--dropdown { display: none; }
  /* Sprachumschalter bleibt sichtbar neben dem Burger */
  .header-inner .lang-switch { margin-left: auto; margin-right: 4px; }
}



/* ========================= 3/3 · BRAND (theme.css) ========================= */

/* ═══════════════════════════════════════════════════════════════════
   LayerPulse · "Atelier Navy" — Brand Identity Layer
   ───────────────────────────────────────────────────────────────────
   Loaded LAST, after style.css and redesign.css. Re-themes the whole
   site (every page shares these tokens) into a deep-navy / warm-gold
   identity built for trust and authority:

     · Playfair Display headlines (serif authority) + Inter UI (clarity)
     · Deep navy ink, steel-blue body, warm gold reserved for action
     · Signature: a 3px gold rule to the left of every major heading
     · Sharper radii, quieter shadows, calm intentional motion

   Nothing structural is touched — all markup, i18n keys, JS hooks,
   forms and images stay exactly as they are. This file only re-skins.
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --bg:        #F7F8FA;   /* page canvas — neutral, faintly cool      */
  --bg-2:      #EDF0F5;   /* alt sections — a touch deeper, navy-cool */
  --white:     #FFFFFF;   /* cards, panels                            */
  --fg:        #1A2332;   /* deep navy — ink, headlines, dark beats   */
  --primary:   #1A2332;
  --ink:       #1A2332;   /* navy text used on gold fills             */
  --steel:     #2C4A6E;   /* steel blue — strong body, deep surfaces  */
  --secondary: #2C4A6E;   /* body copy — AA-strong on light (~8:1)    */
  --muted:     #5C6675;   /* labels & meta — kept readable (~5.6:1)   */
  --subtle:    #9AA3B2;
  --border:    #E2E6EC;   /* hairline, navy-tinted                    */
  --border-2:  #CBD3DE;

  /* ── Gold accent system ───────────────────────────────────────────
     Bright gold is for FILLS (CTA backgrounds, the signature rule,
     dots, icons on navy). Deep gold is for gold TEXT on light, where
     bright gold would fail contrast. This split keeps every gold token
     above WCAG AA in its context. ──────────────────────────────────*/
  --gold:      #C8A96E;   /* bright — fills, lines, CTA bg, text-on-navy */
  --gold-hi:   #D8BD86;   /* lighter — soft highlights                   */
  --gold-lo:   #B8975A;   /* darker  — CTA hover                         */
  --gold-ink:  #8A6A2E;   /* deep    — gold text/links on light (~4.7:1) */

  /* Remap the base engine's accent tokens onto the gold system.
     Bright where used as a fill, deep where used as text-on-light
     (the text-on-light cases are corrected explicitly further down). */
  --accent:     #8A6A2E;
  --accent-mid: #C8A96E;
  --accent-hi:  #C8A96E;
  --accent-bg:  #F7F1E4;  /* pale gold wash for tinted callouts        */

  --success:   #1F8A55;
  --error:     #C0392B;

  /* ── Radius — crisper, more architectural ─────────────────────────
     8px cards, ~4px controls. Pills (--r-full) stay round on purpose. */
  --r-xs: 3px;  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;
  --r-xl: 8px;  --r-2xl: 12px; --r-full: 9999px;

  /* ── Shadow — restrained, single soft elevation per the brief ───── */
  --shadow-xs: 0 1px 2px rgba(16,28,48,.05);
  --shadow-sm: 0 2px 12px rgba(16,28,48,.06);
  --shadow-md: 0 2px 20px rgba(16,28,48,.08);
  --shadow-lg: 0 14px 44px rgba(16,28,48,.11);
  --shadow-xl: 0 32px 84px rgba(16,28,48,.16);

  --max-w: 1200px;

  /* Gutter the signature gold rule hangs in. Heading AND its siblings
     (eyebrow, lead, intro, actions) share it so the text column aligns
     flush while the bar sits in the margin. */
  --sig-gap: clamp(18px, 2.2vw, 26px);
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Playfair display + Inter UI
═══════════════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.65;
  color: var(--secondary);
  background: var(--bg);
}
::selection { background: var(--gold); color: var(--ink); }

/* Display headlines + key display numbers → Playfair, gently tracked. */
.hero-headline,
.section-header h2,
.about-content h2,
.efg-copy h2,
.cs-copy h2,
.page-hero h1,
.legal-hero h1,
.studio-banner-text,
.studio-strip-cap p,
.cta-band h2,
.card h3,
.offer-card h3,
.pkg-card h3,
.project-card figcaption h4,
.project-overlay h4,
.calc-total,
.formula-result,
.pricing-total,
.hero-stat strong,
.about-stat-num,
.ev-stat strong,
.stat-number {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -.02em;
}
.hero-headline { line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
.section-header h2 { line-height: 1.12; }

/* Body / long-form copy: comfortable measure + readable rhythm. */
.hero-lead, .section-intro,
.card p, .offer-card p, .about-content p,
.legal-section p, .faq-answer-inner p {
  color: var(--secondary);
}
.hero-lead, .legal-section p, .faq-answer-inner p { text-wrap: pretty; }
.hero-headline, .section-header h2, .page-hero h1,
.about-content h2, .legal-hero h1 { text-wrap: balance; }

/* ═══════════════════════════════════════════════════════════════════
   SIGNATURE — the gold rule to the left of every major heading
   A 3px warm-gold bar, sized to the heading, like a typographic
   quotation mark. The quiet bracket that runs through the whole site.
═══════════════════════════════════════════════════════════════════ */
.hero-headline,
.section-header h2,
.about-content h2,
.efg-copy h2,
.cs-copy h2,
.page-hero h1,
.legal-hero h1 { position: relative; }

/* Homepage signature blocks: indent the CONTAINER (these have no base
   horizontal padding) so heading + eyebrow + lead + intro share one left
   edge; the gold bar then hangs in that gutter, aligned to the heading.
   This keeps the left column flush rather than ragged. */
.hero-content,
.section-header,
.about-content,
.efg-copy,
.cs-copy { padding-left: var(--sig-gap); }

.hero-headline::before,
.section-header h2::before,
.about-content h2::before,
.efg-copy h2::before,
.cs-copy h2::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sig-gap)); top: .14em; bottom: .14em;
  width: 3px; border-radius: 2px;
  background: var(--gold);
}

/* Sub-page & legal heroes self-indent the heading (their wrapper already
   carries the page gutter, so the bar sits at the heading's own left edge). */
.page-hero h1, .legal-hero h1 { padding-left: var(--sig-gap); }
.page-hero h1::before,
.legal-hero h1::before {
  content: "";
  position: absolute;
  left: 0; top: .14em; bottom: .14em;
  width: 3px; border-radius: 2px;
  background: var(--gold);
}

/* On the inverted (navy) process section the bar stays bright gold. */
.process.section--dark .section-header h2::before { background: var(--gold); }

/* Section headers become left-aligned so the signature reads correctly
   and the page gains editorial structure. Neutralise the old centered
   amber tick from redesign.css. */
.section-header {
  text-align: left;
  max-width: 760px;
  margin-left: 0; margin-right: auto;
}
.section-header::before { display: none !important; }
.section-header .section-intro { max-width: 64ch; }
.faq-list { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════════
   EYEBROWS, LABELS & GOLD TEXT ON LIGHT  → readable deep gold
   (bright gold as text on a light surface fails contrast)
═══════════════════════════════════════════════════════════════════ */
.eyebrow { color: var(--gold-ink); font-weight: 700; letter-spacing: .14em; }
.eyebrow-dot { background: var(--gold); }

.required,
.benefit-num,
.stat-unit,
.pkg-num,
.pos-pill .pos-pill-price,
.faq-question[aria-expanded="true"] .faq-icon { color: var(--gold-ink); }

/* Inline links carry the gold thread but stay legible. */
.contact-info-card a,
.efg-contact-hint a,
.form-privacy-note a,
.page-breadcrumb a,
.legal-breadcrumb a,
.legal-section a,
.legal-toc-link.active,
.file-link { color: var(--gold-ink); }
.contact-info-card a:hover,
.efg-contact-hint a:hover,
.legal-section a:hover { color: var(--fg); }

/* hover/active text colours that base set to bright gold → deep gold */
.faq-question:hover { color: var(--gold-ink); }
.offer-card:hover .offer-link { color: var(--gold-ink); }

/* Callout text on the pale-gold wash → navy for full contrast,
   and drop the heavy left stripe to a clean hairline border. */
.legal-highlight { border: 1px solid var(--gold-lo); border-left-width: 1px; color: var(--fg); }
.legal-highlight strong { color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════
   HEADER / NAV — white, sticky, gold underline, gold CTA
═══════════════════════════════════════════════════════════════════ */
.site-header.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.brand-name { font-weight: 700; letter-spacing: -.01em; }
.brand-accent { color: var(--gold-ink); }
.brand-mark { background: var(--fg); border-radius: 4px; }
.brand-mark::before { background: var(--gold); }

/* Animated gold underline on nav links + the services trigger. */
.nav-link, .nav-dd-trigger { position: relative; border-radius: 0; }
.nav-link::after, .nav-dd-trigger::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover::after, .nav-link.active::after,
.nav-item--dropdown:hover .nav-dd-trigger::after,
.nav-item--dropdown:focus-within .nav-dd-trigger::after { transform: scaleX(1); }
.nav-link:hover, .nav-link.active,
.nav-dd-trigger:hover,
.nav-item--dropdown:hover .nav-dd-trigger,
.nav-item--dropdown:focus-within .nav-dd-trigger { color: var(--fg); background: transparent; }
.nav-cta::after { display: none; }

.lang-btn.active { color: var(--gold-ink); }
.nav-dd-ico { color: var(--gold-ink); }
.nav-dd-item:hover .nav-dd-ico { background: var(--accent-bg); color: var(--gold-ink); }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — gold primary (uppercase) · navy ghost secondary
   Uses !important to override redesign.css's solid-black button rules.
═══════════════════════════════════════════════════════════════════ */
.btn { border-radius: 4px; }

.btn-accent,
.nav-cta,
.drawer-cta,
.floating-cta,
.cta-band .btn-accent,
.calc-result .btn-accent {
  background: var(--gold) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(16,28,48,.10);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}
.btn-accent:hover,
.nav-cta:hover,
.drawer-cta:hover,
.floating-cta:hover,
.cta-band .btn-accent:hover,
.calc-result .btn-accent:hover {
  background: var(--gold-lo) !important;
  color: var(--ink) !important;
  box-shadow: 0 6px 18px rgba(184,151,90,.34);
}
.nav-cta, .btn-accent { border-radius: 4px; }
.btn-accent svg, .nav-cta svg, .drawer-cta svg,
.floating-cta svg, .cta-band .btn-accent svg { color: var(--ink); }

/* Secondary: 2px navy outline → fills navy on hover. */
.btn-outline {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--fg);
  font-weight: 600;
}
.btn-outline:hover {
  background: var(--fg);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS & SURFACES — white on light, hairline border, lift on hover
═══════════════════════════════════════════════════════════════════ */
.card, .pricing-card, .offer-card, .guide-step, .prod-card,
.pkg-card, .mat-card, .info-box, .ptw-window,
.contact-form-wrapper, .efg-form-wrap, .cs-form-wrap,
.founder-card, .contact-info-card, .formula-part {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.card:hover, .pricing-card:hover, .offer-card:hover, .guide-step:hover,
.prod-card:hover, .pkg-card:hover, .contact-info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}
/* The big watermark numeral on service cards → quiet navy, gold on hover. */
.card::before { color: var(--border-2); }
.card:hover::before { color: rgba(200,169,110,.18); }

/* Featured / example accents use the gold border, pale-gold fill. */
.pricing-card--example,
.pkg-card--featured { border-color: var(--gold); }
.pricing-card--example { background: var(--accent-bg); }
.pricing-total { border-top: 2px solid var(--gold); }

/* Icon chips that sit on light → navy glyph in a cool wash. */
.offer-ico, .prod-ico { background: var(--bg-2); color: var(--fg); }
.offer-card:hover .offer-ico { background: var(--accent-bg); color: var(--gold-ink); }
.mat-card .mat-ico, .info-box .info-ico { color: var(--gold-ink); }
.pkg-features li svg { color: var(--gold-ink); }
.contact-info-icon { color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════ */
.hero::before {
  background: radial-gradient(ellipse 62% 72% at 82% 38%,
              rgba(200,169,110,.12) 0%, transparent 60%);
}
/* Replace the banned gradient-text with a solid deep-gold emphasis. */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--gold-ink) !important;
  color: var(--gold-ink) !important;
}
.hero-img-col::after { background: linear-gradient(90deg, var(--bg) 0%, transparent 30%); }
.hero-stat-sep { background: var(--border-2); }

/* ═══════════════════════════════════════════════════════════════════
   CONTRAST BEATS — navy sections & bars carry the gold
═══════════════════════════════════════════════════════════════════ */
/* Trust marquee → navy band, bright-gold marks. */
.trust-bar { background: var(--fg); border-block: none; }
.trust-item { color: rgba(255,255,255,.72); }
.trust-item svg { color: var(--gold); }
.trust-sep { color: rgba(255,255,255,.22); }

/* Process is the one dark beat (carries .section--dark). */
.process.section--dark .eyebrow { color: var(--gold); }
.process.section--dark .process-step:hover .step-num { background: var(--gold); color: var(--ink); }

/* Studio interludes keep the bright gold emphasis on photography. */
.studio-banner-text em, .studio-strip-cap em { color: var(--gold); }
.ss-eyebrow .eyebrow-dot { background: var(--gold); }
.scroll-progress { background: var(--gold); }

/* CTA bands stay navy with a gold button (handled above). */
.cta-band, .calc-result { background: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — deep navy, gold-on-hover links, divider above copyright
═══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--fg);
  border-top: none;
  color: rgba(255,255,255,.6);
}
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-accent { color: var(--gold); }
.footer-brand p { color: rgba(255,255,255,.55); }
.footer-nav a { color: rgba(255,255,255,.62); }
.footer-nav a:hover { color: var(--gold); }
.footer-copy {
  color: rgba(255,255,255,.42);
  flex-basis: 100%;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 18px; margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS & FOCUS — clear focus ring for keyboard users (WCAG AA)
═══════════════════════════════════════════════════════════════════ */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.calc-select:focus,
.item-product:focus {
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(44,74,110,.14);
}
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Playfair runs wider than the old sans, so the display
   scale is tightened on small screens and the signature gutter trims,
   guaranteeing headlines never overflow their container.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Grid items default to min-width:auto and won't shrink below their
     content's min-content width. The reveal wraps the headline in an
     inline-block whose min-content is the full (unbreakable) line, which
     forces the text column wider than the phone and clips it. Let the
     column shrink and let the line wrap. */
  .hero { grid-template-columns: 1fr; }
  .hero-text-col, .hero-content { min-width: 0; max-width: 100%; }
  .hero-headline { font-size: clamp(2.2rem, 8.5vw, 3.2rem); letter-spacing: -.015em; max-width: 100%; }
  .hero-headline .hl-line { overflow: visible; max-width: 100%; }
  .hero-headline .hl-inner {
    display: block; white-space: normal; max-width: 100%;
    overflow-wrap: break-word; transform: none !important;
  }
  /* The gutter (--sig-gap) lives on the containers now, so headings only
     need to be allowed to break long words here. */
  .hero-headline,
  .section-header h2,
  .about-content h2,
  .efg-copy h2,
  .cs-copy h2,
  .page-hero h1,
  .legal-hero h1 { overflow-wrap: break-word; }
}
@media (max-width: 420px) {
  :root { --sig-gap: 16px; }
  .hero-headline { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .section-header h2 { font-size: clamp(1.55rem, 7.2vw, 2rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION — calm, and safe under reduced-motion
   Reveal animations enhance an already-visible default: if the JS
   observer never runs (hidden tab, headless), content still shows.
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right { opacity: 1 !important; }
  .fade-up.visible, .fade-left.visible, .fade-right.visible { animation: none !important; }
  .hero-img-col img { transform: none !important; }
  .nav-link::after, .nav-dd-trigger::after { transition: none !important; }
  /* never let the masked hero reveal leave the headline hidden */
  .hero-headline .hl-line { overflow: visible !important; }
  .hero-headline .hl-inner { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   BOLD EVOLUTION — Navy statement hero
   ───────────────────────────────────────────────────────────────────
   The product shot is a black hoodie on black, so a deep-navy hero lets
   it sit lit in a dark field and flows seamlessly into the navy trust
   marquee below. A committed-colour opening for a confident brand.
   Scoped to the homepage only via :has(#hero.hero); sub-pages keep the
   light hero. The header inverts to light text while unscrolled over it,
   and snaps back to the white scrolled state untouched.
═══════════════════════════════════════════════════════════════════ */
.hero {
  /* Warm glow, upper-right. Two fixes vs. the old version that left a faint
     vertical line down the middle of the navy:
       1. End the falloff at 100% (the far corner) instead of a fixed % stop —
          a colour→transparent stop mid-canvas is a slope break, and the eye
          reads that break as a Mach-band line.
       2. Fade to rgba(200,169,110,0), not `transparent`: `transparent` is
          transparent BLACK, so the midtones interpolate through a muddy grey
          and brighten the contrast of the falloff. Same hue at 0 alpha stays
          clean. The result is one smooth wash with no detectable edge. */
  background:
    radial-gradient(75% 65% at 96% 10%, rgba(200,169,110,.16) 0%, rgba(200,169,110,0) 100%),
    linear-gradient(178deg, #10182a 0%, #1A2332 58%, #1A2332 100%);
}
.hero::before {
  background: radial-gradient(ellipse 58% 62% at 93% 38%, rgba(200,169,110,.08) 0%, rgba(200,169,110,0) 100%);
}

/* Bolder, commanding display type. Color + weight apply at every width;
   the larger size is desktop-only so it can't override the mobile
   clamps defined earlier (which keep the headline from overflowing). */
.hero-headline { color: #fff; font-weight: 900; }
@media (min-width: 769px) {
  .hero-headline { font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1.0; }
}
.hero .gradient-text {
  -webkit-text-fill-color: var(--gold) !important;
  color: var(--gold) !important;
}
.hero .eyebrow { color: var(--gold); }
.hero-lead { color: rgba(255,255,255,.74); }
.hero-stat strong { color: #fff; }
.hero-stat span { color: rgba(255,255,255,.55); }
.hero-stat-sep { background: rgba(255,255,255,.20); }
.hero-proof { color: rgba(255,255,255,.72); }
.hero-proof svg { color: #54d18c; }

/* USP-Zeile unter dem Lead (ersetzt die frühere Statistik-Reihe). */
.hero-usp {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .85rem; font-weight: 500;
  color: rgba(255,255,255,.72);
  margin-bottom: 38px;
}
.hero-usp-arrow { color: var(--gold); font-weight: 700; }

/* Scroll-Hinweis unter den Buttons — führt zur Leistungs-Sektion. */
.hero-scroll {
  display: inline-block;
  font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  color: rgba(255,255,255,.62); text-decoration: none;
  transition: color .2s ease;
}
.hero-scroll:hover, .hero-scroll:focus-visible { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll { animation: hero-scroll-bob 2.4s ease-in-out infinite; }
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Secondary CTA needs a light outline to read on navy. */
.hero .btn-outline {
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
}
.hero .btn-outline:hover {
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 2px #fff;
}

/* Seam-only dissolve. The product shot is a BLACK hoodie on a pure-black
   studio background. The previous approach overlaid the WHOLE column with the
   navy gradient via `mix-blend-mode: lighten` to lift the black bg up to navy
   — but `lighten` keeps whichever pixel is brighter, and the hoodie is darker
   than the navy (#1A2332), so the gradient won over the hoodie and ate it
   (worst at the bottom and in fullscreen, where the brightest part of the
   gradient covers the most hoodie). The product literally vanished behind the
   background.
   Fix: leave the photo at full contrast and only fade its LEFT edge into the
   text-side navy, so the column seam dissolves with no hard box. The photo's
   other three edges already bleed off-screen (object-fit: cover), so the left
   edge is the only one that needs blending. Result: a navy text field that
   darkens into a moody studio backdrop with the black hoodie clearly readable
   at every viewport height. */
.hero-img-col::after {
  /* Kills the vertical seam line at the column boundary. Two parts had to
     match the text side, not one:
       1. The navy fill uses the SAME vertical gradient as the hero (not a flat
          #1A2332), so its left edge equals the text-side navy at every height.
       2. The hero's warm upper-right glow (on .hero's bg + .hero::before) is
          centred OVER the image column but is blocked there by the opaque black
          photo, so it only lit the text column and was cut dead at the seam —
          brightest exactly at the boundary, which read as a bright/dark step.
          Re-paint the SAME two glows here so the overlay's left edge carries
          the identical warmth and the step disappears. Radii are scaled up
          (158%/122%) because % here is relative to the narrower image column,
          so they must be enlarged to span the same absolute distance as the
          hero's 75%/58% radii do across the full hero width.
     The horizontal reveal toward the photo is done with a mask, so the whole
     stack (glow + navy) fades out together as the hoodie takes over. */
  background:
    radial-gradient(158% 65% at 92% 10%, rgba(200,169,110,.16) 0%, rgba(200,169,110,0) 100%),
    radial-gradient(ellipse 122% 62% at 85% 38%, rgba(200,169,110,.08) 0%, rgba(200,169,110,0) 100%),
    linear-gradient(178deg, #10182a 0%, #1A2332 58%, #1A2332 100%);
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%, rgba(0,0,0,.92) 9%, rgba(0,0,0,.55) 20%, rgba(0,0,0,0) 44%);
          mask-image: linear-gradient(90deg,
    #000 0%, rgba(0,0,0,.92) 9%, rgba(0,0,0,.55) 20%, rgba(0,0,0,0) 44%);
  mix-blend-mode: normal;
  z-index: 3;
}
/* Studio-Spotlight: weicher Lichtkegel auf dem Hoodie. `screen` hebt nur die
   dunklen Pixel im Lichtkegel an, sodass das schwarze Kleidungsstück aus dem
   ebenso schwarzen Studio-Hintergrund heraustritt — wie ein gesetztes Licht,
   ohne die Bildränder oder die dunkle Hero-Stimmung aufzuhellen. */
.hero-img-col img { z-index: 1; }
.hero-img-col::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(58% 52% at 62% 46%,
    rgba(214,196,160,.22) 0%, rgba(214,196,160,.10) 36%, rgba(214,196,160,0) 70%);
  mix-blend-mode: screen;
}

/* Header inverts to light while unscrolled over the navy hero (homepage
   only). The scrolled state (white bg, navy text) is left as-is. */
body:has(#hero.hero) .site-header:not(.scrolled) .brand-name,
body:has(#hero.hero) .site-header:not(.scrolled) .nav-link,
body:has(#hero.hero) .site-header:not(.scrolled) .nav-dd-trigger { color: rgba(255,255,255,.82); }
body:has(#hero.hero) .site-header:not(.scrolled) .nav-link:hover,
body:has(#hero.hero) .site-header:not(.scrolled) .nav-dd-trigger:hover { color: #fff; }
body:has(#hero.hero) .site-header:not(.scrolled) .brand-accent { color: var(--gold); }
body:has(#hero.hero) .site-header:not(.scrolled) .brand-mark { background: var(--gold); }
body:has(#hero.hero) .site-header:not(.scrolled) .brand-mark::before { background: var(--fg); }
body:has(#hero.hero) .site-header:not(.scrolled) .menu-toggle .bar { background: #fff; }
body:has(#hero.hero) .site-header:not(.scrolled) .lang-btn { color: rgba(255,255,255,.62); }
body:has(#hero.hero) .site-header:not(.scrolled) .lang-btn.active { color: #fff; }
body:has(#hero.hero) .site-header:not(.scrolled) .lang-divider { color: rgba(255,255,255,.30); }

/* Bolder section headings for more editorial authority (weight only, no
   size change, so nothing risks overflow). */
.section-header h2 { font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════
   MOTION+ — a touch more life (2026-06)
   · A soft sheen sweeps across the primary gold CTAs on hover/focus.
   · The studio interlude captions reveal via the existing .fade-up
     system (hook set in the markup).
   Subtle, quick, and fully disabled under reduced-motion. Scoped with
   :not(.floating-cta) so the fixed floating CTA keeps position:fixed.
═══════════════════════════════════════════════════════════════════ */
.btn-accent { overflow: hidden; isolation: isolate; }
.btn-accent:not(.floating-cta) { position: relative; }
.btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30) 50%, transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 1;
  transition: left .6s var(--ease-out);
}
.btn-accent:hover::after,
.btn-accent:focus-visible::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  .btn-accent::after { display: none; }
}

/* ═══════════════════════════════════════════════════════
   WEBDESIGN — Angebots-Erweiterung
   5 Tiers · Enterprise-Band · Wartung · Add-ons · Schnellübersicht
═══════════════════════════════════════════════════════ */

/* 4-spaltiges Tier-Grid (Pakete + Wartung) — etwas schmalere Karten */
.pkg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pkg-grid--4 .pkg-card { padding: 30px 22px; }

/* 5-spaltiges Tier-Grid (Webdesign-Pakete) — kompakte Karten */
.pkg-grid--5 { grid-template-columns: repeat(5, 1fr); }
.pkg-grid--5 .pkg-card { padding: 26px 18px; }
.pkg-grid--5 .pkg-card h3 { font-size: 1.1rem; }
.pkg-grid--5 .pkg-card > p { font-size: .82rem; margin-bottom: 16px; }

/* Bezahlmodell-Erklärung (Kauf vs. Managed) */
.pkg-model { max-width: 880px; margin: 0 auto 28px; }
.pkg-model > h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; text-align: center; margin-bottom: 16px; }
.pkg-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pkg-model-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--r-md); padding: 18px 22px; }
.pkg-model-name { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; color: var(--fg); }
.pkg-model-card > p { font-size: .82rem; color: var(--secondary); line-height: 1.6; }

/* Dual-Preis im Paket-Footer (Kauf + Managed) */
.pkg-price-dual { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pkg-pay { display: flex; flex-direction: column; gap: 1px; }
.pkg-pay--managed { padding-top: 10px; border-top: 1px solid var(--border); }
.pkg-pay-label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pkg-managed-amount { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; color: var(--fg); }

/* Enterprise — Sonderfall: volle Breite, dunkel, horizontal */
.pkg-enterprise {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: var(--fg); color: #fff;
  border-radius: var(--r-xl); padding: 32px 36px; margin-top: 16px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.pkg-ent-main { max-width: 64ch; }
.pkg-enterprise .pkg-num { color: rgba(255,255,255,.5); margin-bottom: 10px; }
.pkg-enterprise h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 8px; }
.pkg-enterprise .pkg-ent-main > p { font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.7; }
.pkg-ent-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.pkg-enterprise .pkg-price { margin: 0; }
.pkg-enterprise .pkg-amount { color: #fff; font-size: 1.4rem; }
.pkg-enterprise .btn-accent { background: #fff !important; color: var(--fg) !important; }
.pkg-enterprise .btn-accent:hover { background: var(--accent-bg) !important; }

/* Kleingedrucktes */
.pkg-note, .section-note { font-size: .78rem; color: var(--muted); margin-top: 24px; text-align: center; }

/* Add-ons — zweispaltige Preisliste */
.addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.addon-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 18px 22px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.addon-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.addon-name { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; }
.addon-desc { font-size: .82rem; color: var(--secondary); line-height: 1.55; }
.addon-price { font-size: .92rem; font-weight: 700; color: var(--accent-hi); white-space: nowrap; flex-shrink: 0; }

/* Schnellübersicht — zwei Preistafeln */
.price-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; margin: 0 auto; }
.po-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 30px; }
.po-head { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; }
.po-unit { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.po-list { display: flex; flex-direction: column; }
.po-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--secondary); }
.po-list li:last-child { border-bottom: 0; }
.po-price { font-weight: 700; color: var(--fg); white-space: nowrap; }

/* Responsive — Tier-Grid 4 → 2 → 1, Add-ons/Übersicht → 1 */
@media (max-width: 1100px) {
  .pkg-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .pkg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pkg-grid--4 { grid-template-columns: 1fr; }
  .pkg-grid--5 { grid-template-columns: 1fr; }
  .pkg-model-grid { grid-template-columns: 1fr; }
  .addon-grid { grid-template-columns: 1fr; }
  .price-overview { grid-template-columns: 1fr; }
  .pkg-enterprise { padding: 26px 24px; }
  .pkg-ent-foot { width: 100%; }
  .pkg-ent-foot .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   BARRIEREFREIHEIT — WCAG 2.2 AA
═══════════════════════════════════════════════════════════════════ */

/* 2.4.1 Bypass Blocks: Skip-Link — unsichtbar, bis er Tastaturfokus erhält. */
.skip-link {
  position: absolute; top: 10px; left: 10px; z-index: 10000;
  padding: 12px 20px; border-radius: var(--r-full);
  background: var(--fg); color: #fff;
  font-size: .9rem; font-weight: 700; text-decoration: none;
  transform: translateY(-200%); opacity: 0;
  transition: none;
}
.skip-link:focus-visible {
  transform: translateY(0); opacity: 1;
  outline: 2px solid #fff; outline-offset: -5px;
}
/* Sprungziel des Skip-Links: kein sichtbarer Ring auf <main> selbst */
main#main:focus { outline: none; }

/* 2.4.11 Focus Not Obscured + Anker-Sprünge: Ziele nie unter dem
   fixierten Header verstecken (gilt für alle #anker-Ziele). */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* 2.5.8 Target Size (Minimum): interaktive Ziele ≥ 24×24 CSS-px.
   Sprach-Buttons waren mit .76rem + 6px Padding grenzwertig. */
.lang-btn { min-width: 32px; min-height: 28px; }
.faq-question { min-height: 44px; }

/* 1.4.13 Content on Hover or Focus: aufgeklapptes Nav-Dropdown muss per
   Escape schließbar sein. main.js setzt .dd-closed; diese Regel gewinnt
   gegen die :hover/:focus-within-Anzeigeregeln. */
.nav-item--dropdown.dd-closed .nav-dropdown {
  opacity: 0 !important; visibility: hidden !important;
  pointer-events: none !important; transform: translateY(4px) !important;
}

/* Fokus-Ring auch auf dunklen Flächen sichtbar (Hero, Process, Footer-CTA). */
.section--dark :focus-visible,
.hero :focus-visible,
.drawer-panel :focus-visible {
  outline-color: #fff;
}


/* ====================================================================
   Neue Preisstruktur 2026 — Mengenstaffel, Sets, Bundles, Werbung
   Scoped unter .lp-* / pkg-grid--3 · Atelier-Navy-Tokens
   ==================================================================== */
.pkg-grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .pkg-grid--3{ grid-template-columns:1fr; } }

.lp-matrix-wrap{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--white); }
.lp-matrix{ width:100%; border-collapse:collapse; font-size:.9rem; }
.lp-matrix th,.lp-matrix td{ padding:12px 16px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.lp-matrix th:first-child,.lp-matrix td:first-child{ text-align:left; white-space:normal; }
.lp-matrix thead th{ background:var(--fg); color:#fff; border-bottom:none;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.lp-matrix tbody tr:nth-child(even) td{ background:var(--bg-2); }
.lp-matrix tbody tr:last-child td{ border-bottom:none; }
.lp-matrix .mx-name{ font-weight:600; color:var(--fg); }
.lp-matrix .mx-sub{ display:block; font-size:.78rem; color:var(--muted); font-weight:400; margin-top:1px; }
.lp-matrix .mx-price{ color:var(--gold-ink); font-weight:700; }
.lp-matrix-note{ font-size:.84rem; color:var(--muted); margin-top:14px; max-width:64ch; }

.lp-disc{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.lp-disc-item{ flex:1 1 130px; border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 14px; background:var(--white); text-align:center; box-shadow:var(--shadow-xs); }
.lp-disc-item strong{ display:block; font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem; line-height:1; color:var(--gold-ink); margin-bottom:5px; }
.lp-disc-item span{ font-size:.82rem; color:var(--muted); }

.lp-split{ display:grid; grid-template-columns:1.25fr .85fr; gap:32px; align-items:start; }
@media (max-width:900px){ .lp-split{ grid-template-columns:1fr; gap:22px; } }
.lp-incl-title{ font-family:'Playfair Display',Georgia,serif; font-size:1.1rem;
  margin:0 0 10px; color:var(--fg); }
.lp-incl{ list-style:none; margin:0; padding:0; }
.lp-incl li{ position:relative; padding:8px 0 8px 28px; font-size:.9rem;
  color:var(--secondary); border-bottom:1px solid var(--border); }
.lp-incl li:last-child{ border-bottom:none; }
.lp-incl li::before{ content:""; position:absolute; left:2px; top:13px; width:13px; height:13px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(200,169,110,.18); }
.calc-tier{ font-size:.8rem; color:var(--muted); margin-top:6px; min-height:1.1em; }

/* ── Textil-Katalog (statisch aus business_management.sql) ───────────── */
.lp-tex-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: stretch; }
.lp-prod { display: flex; flex-direction: column; gap: 14px; text-align: left; height: 100%; }
/* Farb-Zeile füllt den restlichen Platz → alle Karten schließen unten bündig ab. */
.lp-prod > .lp-row:last-child { flex: 1 1 auto; }
/* Vorschau-Swatches auf einheitliche Höhe begrenzen; bei vielen Farben wird
   gescrollt (die komplette Liste bleibt zusätzlich über „Alle Farben“ erreichbar),
   sodass jede Karte gleich groß bleibt – unabhängig von der Farbanzahl. */
.lp-prod > .lp-row:last-child > .lp-swatches {
  max-height: 132px; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.lp-prod > .lp-row:last-child > .lp-swatches::-webkit-scrollbar { width: 6px; }
.lp-prod > .lp-row:last-child > .lp-swatches::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: var(--r-full);
}
.lp-prod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-prod-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.lp-prod-head .prod-price { flex: none; white-space: nowrap; }

.lp-mat { margin: 0; font-size: .84rem; color: var(--secondary); }
.lp-mat-label {
  display: inline-block; margin-right: 8px; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg);
}

.lp-row { display: flex; flex-direction: column; gap: 8px; }
.lp-row-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--secondary);
}
.lp-row-label em { font-style: normal; color: var(--fg); }

.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip {
  display: inline-flex; align-items: center; padding: 3px 10px;
  font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fg); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-full);
}

.lp-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-sw {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px;
  font-size: .74rem; color: var(--secondary);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-full);
}
.lp-sw i {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.lp-more { margin-top: 2px; }
.lp-more > summary {
  cursor: pointer; list-style: none; width: fit-content;
  font-size: .76rem; font-weight: 600; color: var(--fg);
  padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--bg); transition: border-color var(--dur-base), background var(--dur-base);
}
.lp-more > summary:hover { border-color: var(--border-2); background: var(--bg-2); }
.lp-more > summary::-webkit-details-marker { display: none; }
.lp-more[open] > summary { margin-bottom: 8px; }
.lp-more[open] > summary::after { content: " – schließen"; color: var(--secondary); font-weight: 400; }

/* ── Drucke / Druckveredelung ────────────────────────────────────────── */
.lp-print-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px;
}
.lp-print-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.lp-print-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.lp-print-card h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.lp-print-card p { margin: 0; font-size: .84rem; color: var(--secondary); line-height: 1.6; }
.lp-print-card .prod-price { margin-top: auto; }

/* ══════════════════════════════════════════════════════════════════
   THEMEN-HINTERGRUNDBILDER
   Sektions-Hintergrund (Foto) + dunkles Overlay für Lesbarkeit. Karten
   (.card/.pkg-card) haben eigene, deckende Hintergründe und bleiben lesbar;
   nur die direkt auf dem Bild liegenden Texte werden hell gesetzt.
   Bildpfade relativ zu assets/css/ → ../../img/ (Theme-Wurzel /img).
═══════════════════════════════════════════════════════════════════ */
.lp-bg-section { position: relative; isolation: isolate; background-color: var(--fg); }
.lp-bg-section > * { position: relative; z-index: 1; }
.lp-bg-section::before,
.lp-bg-section::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-bg-section::before {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.lp-bg-section::after {
  background: linear-gradient(180deg, rgba(12,10,9,.88) 0%, rgba(12,10,9,.76) 45%, rgba(12,10,9,.92) 100%);
}

/* Thematische Zuordnung der Bilder */
.lp-bg-textile::before { background-image: url('../../img/opt/jarmoluk-sweatshirts-428607.jpg'); }
.lp-bg-web::before     { background-image: url('../../img/opt/pexels-coding-1853305.jpg'); }
.lp-bg-combo::before   { background-image: url('../../img/opt/stocksnap-wordpress-923188_1920.jpg'); }

/* Direkt auf dem Bild liegende Texte hell halten */
.lp-bg-section .section-header h2,
.lp-bg-section .section-header .eyebrow { color: #fff; }
.lp-bg-section .section-header .section-intro,
.lp-bg-section .pricing-footer,
.lp-bg-section .pkg-note { color: rgba(255,255,255,.82); }
.lp-bg-section .project-card figcaption h4 { color: #fff; }
.lp-bg-section .project-card figcaption p { color: rgba(255,255,255,.78); }

/* ══════════════════════════════════════════════════════════════════
   DEZENTE FOTO-TEXTUR (Unterseiten – Rhythmus „jede dritte Section")
   Sehr zurückhaltendes Hintergrundfoto hinter ausgewählten Sections.
   Helle Optik & dunkle Schrift bleiben voll lesbar; Karten/Tabellen
   haben eigene deckende Flächen und liegen sauber über der Textur.
   Das Foto wird oben/unten weich ausgeblendet, damit es unabhängig von
   der Farbe der Nachbarsektionen sauber überblendet. Pfade rel. zu css/.
═══════════════════════════════════════════════════════════════════ */
.lp-bg-soft { position: relative; isolation: isolate; }
.lp-bg-soft > * { position: relative; z-index: 1; }
.lp-bg-soft::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--lp-soft-img);
  background-size: cover; background-position: center;
  opacity: .14; filter: grayscale(.35) contrast(1.03);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* Thematische Bildzuordnung */
.lp-soft-apparel { --lp-soft-img: url('../../img/background/pexels-nobleseed-32919789.jpg'); }
.lp-soft-textile { --lp-soft-img: url('../../img/background/jarmoluk-sweatshirts-428607.jpg'); }
.lp-soft-web     { --lp-soft-img: url('../../img/background/pexels-goumbik-574073.jpg'); }
.lp-soft-code    { --lp-soft-img: url('../../img/background/pexels-coding-1853305.jpg'); }
.lp-soft-wp      { --lp-soft-img: url('../../img/background/stocksnap-wordpress-923188_1920.jpg'); }
.lp-soft-startup { --lp-soft-img: url('../../img/background/pexels-eva-bronzini-6956318.jpg'); }