/* ═══════════════════════════════════════════════════════
   addus. — EDITORIAL DESIGN SYSTEM
   Warm Editorial · Paper-Cream + Ink + Rust
   Fraunces (display) + Instrument Sans (body) + JetBrains Mono (caption)
   ═══════════════════════════════════════════════════════ */

html,body{overflow-anchor:none}

:root{
  --paper:#efe8d8; --paper-deep:#e6dcc4; --paper-shadow:#d8ccae;
  --ink:#1a1612; --ink-soft:#3d3530; --ink-mute:#6b5f54;
  --rust:#b8421f; --rust-deep:#8a2f15; --rust-glow:rgba(184,66,31,.12);
  --line:rgba(26,22,18,.85); --line-soft:rgba(26,22,18,.18); --line-faint:rgba(26,22,18,.08);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --container:1320px;
  --pad:clamp(1.25rem,4vw,2.75rem);
  --nav-h:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:700ms;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ══════════════════ NAV ══════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line-soft);height:var(--nav-h);transition:box-shadow .3s var(--ease)}
.nav.scrolled{box-shadow:0 1px 0 var(--line-soft)}
.nav__inner{max-width:var(--container);margin:0 auto;padding:0 var(--pad);height:100%;display:flex;align-items:center;gap:var(--pad)}
.nav__brand{font-family:var(--serif);font-weight:900;font-size:30px;letter-spacing:-.025em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1;line-height:1;text-transform:lowercase;flex-shrink:0}
.nav__brand-dot{color:var(--rust)}
.nav__menu{margin-left:auto}
.nav__menu ul{display:flex;gap:36px;align-items:center}
.nav__menu a{font-size:14px;font-weight:500;color:var(--ink);position:relative;padding:4px 0;transition:color .2s ease}
.nav__menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--rust);transition:width .32s var(--ease)}
.nav__menu a:hover{color:var(--rust)}
.nav__menu a:hover::after{width:100%}
.nav__cta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:9px 16px;transition:all .24s ease;display:inline-flex;align-items:center;gap:8px;font-weight:500}
.nav__cta::after{content:'↗';font-family:var(--sans);transition:transform .24s ease}
.nav__cta:hover{background:var(--ink);color:var(--paper)}
.nav__cta:hover::after{transform:translate(2px,-2px)}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:.5rem;margin-left:auto}
.nav__burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s ease}
.nav__burger.is-active span:first-child{transform:translateY(7px) rotate(45deg)}
.nav__burger.is-active span:nth-child(2){opacity:0}
.nav__burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══════════════════ SHARED — Section heads, buttons, reveal ══════════════════ */
.section__head{max-width:var(--container);margin:0 auto;padding:clamp(56px,8vw,112px) var(--pad) clamp(36px,5vw,64px);display:grid;grid-template-columns:1fr;gap:24px}
.section__head--split{grid-template-columns:auto 1fr;gap:48px;align-items:end}
.section__head--split .section__title{text-align:right}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:12px}
.kicker::before{content:'§';font-family:var(--serif);font-style:italic;font-size:22px;color:var(--rust);font-variation-settings:"opsz" 22,"WONK" 1;line-height:1}
.section__title{font-family:var(--serif);font-size:clamp(36px,5vw,72px);font-weight:300;line-height:1.02;letter-spacing:-.03em;color:var(--ink);font-variation-settings:"opsz" 80,"SOFT" 30}
.section__title em{font-style:italic;font-weight:600;color:var(--rust);font-variation-settings:"opsz" 80,"SOFT" 80,"WONK" 1}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:14px;margin-bottom:32px}
.eyebrow::before{content:'';width:38px;height:1px;background:var(--ink)}
.eyebrow__num{color:var(--rust);font-weight:500}

.btn{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;transition:all .28s var(--ease);cursor:pointer;border:none;text-decoration:none;font-weight:500}
.btn--primary{background:var(--ink);color:var(--paper);padding:16px 28px;position:relative;overflow:hidden}
.btn--primary::before{content:'';position:absolute;inset:0;background:var(--rust);transform:translateY(101%);transition:transform .38s var(--ease)}
.btn--primary span{position:relative;z-index:1}
.btn--primary:hover::before{transform:translateY(0)}
.btn--primary:disabled{opacity:.4;cursor:not-allowed}
.btn--ghost{background:transparent;color:var(--ink);padding:16px 4px;border-bottom:1px solid var(--ink)}
.btn--ghost:hover{color:var(--rust);border-bottom-color:var(--rust)}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.in-view{opacity:1;transform:none}

/* ══════════════════ HERO ══════════════════ */
.hero{padding-top:var(--nav-h);background:var(--paper);border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.hero__container{max-width:var(--container);margin:0 auto;padding:clamp(48px,7vw,88px) 0 clamp(48px,5vw,72px) var(--pad);display:grid;grid-template-columns:minmax(320px,1fr) 1.5fr;gap:clamp(32px,4vw,56px);align-items:center}
.hero__content{max-width:640px;position:relative;padding-left:32px}

/* ══ HERO EDITORIAL ENRICHMENT — alle Magazin-Tricks ══ */

/* Vertical side-text on far left edge (rotated -90°) */
.hero__side{position:absolute;left:-2px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left top;font-family:var(--mono);font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;pointer-events:none;z-index:2}

/* Folio top — book-page header */
.hero__folio{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);position:relative;z-index:1}
.hero__folio::after{content:'';position:absolute;bottom:-1px;left:0;width:42px;height:1px;background:var(--rust)}

/* Watermark "01" — chapter opener backdrop */
.hero__watermark{position:absolute;right:-12px;top:-32px;font-family:var(--serif);font-style:italic;font-weight:200;font-size:clamp(220px,28vw,360px);line-height:.78;color:var(--rust);opacity:.07;font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 100;letter-spacing:-.06em;z-index:0;pointer-events:none;user-select:none}

/* Editorial Eyebrow (date strip) */
.hero__eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:24px;position:relative;z-index:1}
/* Gold diamond ornament — matches the cert section's masthead ornaments */
.hero__eyebrow-dot{
  width:7px;
  height:7px;
  background:#c9a96e;
  transform:rotate(45deg);
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,235,200,.18);
}

/* Cycling word + hand-drawn underline — schnell & auffällig */
.hero__cycle{display:inline-block}
.hero__underline{position:absolute;left:-4%;right:-4%;bottom:-.18em;width:108%;height:.42em;color:var(--rust);pointer-events:none;overflow:visible}

/* Pull-quote between headline & lede */
.hero__pullquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;line-height:1.3;color:var(--rust);margin:-12px 0 28px;letter-spacing:-.01em;font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 80;display:flex;align-items:baseline;gap:10px;position:relative;z-index:1}
.hero__pullquote-mark{font-style:normal;color:var(--ink-mute);font-weight:400}
.hero__pullquote em{font-style:italic}

/* Lede + magazine drop-cap */
.hero__lede{position:relative;z-index:1}
.hero__dropcap{font-family:var(--serif);font-style:italic;font-weight:900;font-size:84px;line-height:.78;color:var(--rust);float:left;padding:10px 14px 0 0;font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 100}

/* USP bullets under CTAs */
.hero__usps{display:flex;align-items:center;gap:14px;margin:32px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft);flex-wrap:wrap;position:relative;z-index:1;list-style:none}
.hero__usps li{display:flex;flex-direction:column;gap:0;line-height:1}
.hero__usps li b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-.01em;font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 60}
.hero__usps li span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px}
.hero__usps-sep{width:1px;height:28px;background:var(--line-soft);align-self:center}

/* Caveat marginal note (handwritten) */
.hero__margin-note{position:absolute;right:-32px;top:46%;font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--rust);transform:rotate(-6deg);opacity:.85;pointer-events:none;z-index:2;white-space:nowrap}

/* Rubber-Stamp seal (rust, distressed) */
.hero__stamp{position:absolute;bottom:-30px;right:-44px;width:120px;height:120px;color:var(--rust);opacity:.4;transform:rotate(-12deg);pointer-events:none;z-index:2;filter:contrast(1.05)}

/* Postage / Atelier detail (small stamp on left) */
.hero__postage{position:absolute;bottom:24px;left:-44px;width:48px;height:60px;background:var(--rust-glow);border:1px solid var(--rust);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-4deg);z-index:2;pointer-events:none;box-shadow:0 4px 8px -2px rgba(26,22,18,.18)}
.hero__postage::before,.hero__postage::after{content:'';position:absolute;left:0;right:0;height:5px;background:radial-gradient(circle,var(--paper) 1.6px,transparent 1.8px) 0 0/8px 5px repeat-x}
.hero__postage::before{top:-3px}
.hero__postage::after{bottom:-3px}
.hero__postage-edge{display:none}
.hero__postage-num{font-family:var(--serif);font-size:18px;color:var(--rust);line-height:1}
.hero__postage-num em{font-style:italic;font-weight:400;font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 80}
.hero__postage-cap{font-family:var(--mono);font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin-top:2px}

/* Mobile: hide outermost decorative elements that need space */
@media (max-width:640px){
  .hero__side,.hero__margin-note,.hero__stamp,.hero__postage{display:none}
  .hero__watermark{font-size:clamp(160px,40vw,220px);right:-4px;top:-16px;opacity:.05}
  .hero__content{padding-left:0}
  .hero__dropcap{font-size:64px;padding:8px 10px 0 0}
  .hero__usps{gap:10px}
  .hero__usps li b{font-size:16px}
  .hero__pullquote{font-size:18px}
}
.hero__headline{font-family:var(--serif);font-size:clamp(40px,6.5vw,96px);font-weight:300;line-height:.98;letter-spacing:-.035em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 40;margin-bottom:32px}
.hero__headline em{font-style:italic;font-weight:600;color:var(--rust);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;position:relative;display:inline-block}
.word{display:inline-block;margin-right:.18em}
.word--accent em::before{content:'';position:absolute;left:-.05em;right:-.05em;bottom:.08em;height:.42em;background:var(--rust-glow);z-index:-1;transform:scaleX(0);transform-origin:left;animation:swipeRust 1.1s 1.4s var(--ease) forwards}
@keyframes swipeRust{to{transform:scaleX(1)}}

.hero__lede{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--ink-soft);font-weight:400;max-width:50ch;margin-bottom:36px;font-variation-settings:"opsz" 18}
.hero__actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

.hero__ribbon{border-top:1px solid var(--line-soft);max-width:var(--container);margin:0 auto;padding:18px var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.hero__ribbon b{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-right:8px;font-variation-settings:"opsz" 18}

/* ══ SICHERHEITS-ZERTIFIKAT ═══════════════════════════
   Schwarzer Premium-Block, wirkt wie ein offizielles
   Zertifikat. Riesige Italic-Grades, eigene Icons,
   Live-Monitoring-Marker, HSTS pending-State.
   ═══════════════════════════════════════════════════ */
.hero__verified{
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(201,169,110,.10) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(184,66,31,.08) 0%,transparent 50%),
    linear-gradient(180deg,#231811 0%,#1a110a 50%,#0d0805 100%);
  color:var(--paper);
  width:100%;
  position:relative;
  overflow:hidden;
  padding:18px 0 22px;
}
/* Linen grain — finer than before */
.hero__verified::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nv'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nv)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.22;
  pointer-events:none;
}
/* (Certificate frame removed — caused flickering during stamp animations) */

/* HEADER — certificate title with engraved rules + ornament */
.cert__head{
  max-width:var(--container);
  margin:0 auto;
  padding:48px var(--pad) 32px;
  text-align:center;
  position:relative;
  z-index:2;
}
/* Ornamental dingbat above the kicker */
.cert__head::before{
  content:'❧';
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:#c9a96e;
  opacity:.7;
  margin-bottom:14px;
  line-height:1;
}
.cert__head-cap{
  display:block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(201,169,110,.55);
  margin-bottom:14px;
}
.cert__head-title{
  font-family:var(--serif);
  font-size:clamp(36px,5vw,58px);
  font-weight:300;
  line-height:1;letter-spacing:-.03em;
  color:var(--paper);
  font-variation-settings:"opsz" 58,"SOFT" 50;
  margin-bottom:20px;
  display:inline-block;
  position:relative;
}
.cert__head-title em{
  font-style:italic;font-weight:400;color:var(--rust);
  font-variation-settings:"opsz" 58,"WONK" 1,"SOFT" 80;
}
/* Engraved double-hairline rules with diamond ornament at each end */
.cert__head-title::before,.cert__head-title::after{
  content:'';position:absolute;top:50%;
  width:80px;height:5px;
  border-top:1px solid rgba(201,169,110,.45);
  border-bottom:1px solid rgba(201,169,110,.18);
  pointer-events:none;
}
.cert__head-title::before{ right:calc(100% + 28px); transform:translateY(-50%); }
.cert__head-title::after { left:calc(100% + 28px);  transform:translateY(-50%); }

/* Small diamond ornament centered on each hairline */
.cert__head-orn{
  position:absolute; top:50%;
  width:6px; height:6px;
  background:#c9a96e;
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,235,200,.18);
}
.cert__head-orn--l{ right:calc(100% + 22px); }
.cert__head-orn--r{ left:calc(100% + 22px); }

.cert__head-sub{
  display:flex;justify-content:center;align-items:center;gap:14px;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,232,216,.5);
  flex-wrap:wrap;
}
.cert__sep{
  display:inline-block;
  width:4px; height:4px;
  background:#c9a96e;
  transform:rotate(45deg);
  opacity:.55;
}
.cert__live{display:inline-flex;align-items:center;gap:10px;color:rgba(239,232,216,.85)}
.cert__live-dot{
  width:7px;height:7px;
  background:#c9a96e;
  transform:rotate(45deg);
  box-shadow:0 0 0 0 rgba(201,169,110,.55), 0 0 0 1px rgba(255,235,200,.18);
  animation:certPulse 2.4s ease-in-out infinite;
}
@keyframes certPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,.55), 0 0 0 1px rgba(255,235,200,.18)}
  50%    {box-shadow:0 0 0 6px rgba(201,169,110,0),  0 0 0 1px rgba(255,235,200,.25)}
}

/* ── 4 PAPER POSTAGE STAMPS — affixed to the dark cert page ── */
.cert__grades{
  max-width:var(--container);
  margin:0 auto;
  padding:8px var(--pad) 44px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  position:relative;
  z-index:2;
  list-style:none;
}

.cert__grade{
  --mx:50%;
  --my:50%;
  --tilt:0deg;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:300px;
  padding:30px 22px 24px;
  background:#f6efdc;
  background-image:
    radial-gradient(ellipse at 18% 10%, rgba(180,140,90,.07), transparent 60%),
    radial-gradient(ellipse at 82% 90%, rgba(120,80,40,.06), transparent 60%);
  color:var(--ink);
  text-decoration:none;
  border:1px solid rgba(184,66,31,.4);
  border-radius:2px;
  box-shadow:
    0 2px 2px rgba(0,0,0,.35),
    0 14px 28px -10px rgba(0,0,0,.55);
  transition:
    transform .55s cubic-bezier(.2,.65,.3,1),
    box-shadow .55s cubic-bezier(.2,.65,.3,1);
  overflow:hidden;
}
.cert__spot{ display:none; }
/* Mini "ATELIER · ADDUS" header on each stamp */
.cert__grade::before{
  content:'ATELIER · ADDUS';
  position:absolute;
  top:14px; left:0; right:0;
  text-align:center;
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(184,66,31,.55);
  pointer-events:none;
}

/* Each stamp is loosely affixed — slight individual tilt set via custom prop */
.cert__grade:nth-child(1){ --tilt:-1.4deg; transform:rotate(var(--tilt)); }
.cert__grade:nth-child(2){ --tilt:.9deg;   transform:rotate(var(--tilt)); }
.cert__grade:nth-child(3){ --tilt:-.6deg;  transform:rotate(var(--tilt)); }
.cert__grade:nth-child(4){ --tilt:1.6deg;  transform:rotate(var(--tilt)); }

/* HOVER — card straightens, lifts gently */
.cert__grade:hover{
  transform:translateY(-6px) rotate(0deg) scale(1.025);
  box-shadow:
    0 4px 6px rgba(0,0,0,.3),
    0 28px 48px -10px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,169,110,.5);
  z-index:5;
}

/* Roman numeral — the centered focal point */
.cert__roman{
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:64px;
  line-height:.85;
  color:var(--rust);
  letter-spacing:-.04em;
  font-variation-settings:"opsz" 96,"WONK" 1,"SOFT" 60;
  margin-top:8px; margin-bottom:6px;
  transition:color .4s var(--ease), text-shadow .45s var(--ease), transform .45s var(--ease);
}
.cert__roman::after{
  content:'';
  display:block;
  width:28px; height:1px;
  background:var(--rust);
  margin:6px auto 12px;
  opacity:.55;
  transition:width .45s var(--ease), opacity .45s var(--ease), background-color .45s var(--ease);
}
/* Choreographed transitions — each element joins with a slight delay */
.cert__roman{ transition:color .5s var(--ease), text-shadow .55s var(--ease), transform .5s var(--ease); }
.cert__roman::after{ transition:width .5s var(--ease) .08s, opacity .5s var(--ease) .08s, background-color .5s var(--ease) .08s; }
.cert__title{ transition:letter-spacing .55s var(--ease) .12s, color .5s var(--ease) .12s; }
.cert__desc{ transition:color .5s var(--ease) .16s; }
.cert__source-mark{ transition:color .5s var(--ease) .2s, text-shadow .55s var(--ease) .2s, letter-spacing .5s var(--ease) .2s; }
.cert__source-mark::after{ transition:opacity .5s var(--ease) .2s, background-color .5s var(--ease) .2s, transform .55s var(--ease) .2s; }

/* HOVER — Roman & title keep their rust tone, gold lamp-light glow lays over */
.cert__grade:hover .cert__roman{
  text-shadow:
    0 0 14px rgba(201,169,110,.55),
    0 0 28px rgba(201,169,110,.22);
  transform:translateY(-2px);
}
.cert__grade:hover .cert__roman::after{
  width:60px;
  opacity:.95;
  background-color:#c9a96e;
}
.cert__grade:hover .cert__title{
  letter-spacing:-.015em;
  text-shadow:0 0 12px rgba(201,169,110,.4);
}
.cert__grade:hover .cert__desc{
  color:rgba(40,28,16,.88);
}

/* Italic title under the Roman */
.cert__title{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  color:var(--rust);
  letter-spacing:-.01em;
  line-height:1;
  font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 60;
  margin-bottom:12px;
}

/* Description */
.cert__desc{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(40,28,16,.75);
  letter-spacing:-.003em;
  font-variation-settings:"opsz" 14,"SOFT" 60;
  max-width:200px;
  margin:0 auto 16px;
}

/* Source link — small, mono, with A+ accent (like a stamp denomination + post office mark) */
.cert__source{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding-top:10px;
  border-top:1px solid rgba(40,28,16,.18);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(40,28,16,.55);
  text-decoration:none;
  transition:color .25s var(--ease);
}
.cert__source:hover{ color:var(--rust); }
/* A+ marker — the editorial flex: bigger, weighted, with a subtle pen-line */
.cert__source-mark{
  position:relative;
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:19px;
  letter-spacing:-.02em;
  color:var(--rust);
  text-transform:none;
  line-height:1;
  font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 80;
  padding:0 2px 3px;
  transition:color .4s var(--ease), text-shadow .45s var(--ease), letter-spacing .45s var(--ease);
}
.cert__source-mark::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:1.5px;
  background:var(--rust);
  opacity:.5;
  transform-origin:left center;
  transition:opacity .45s var(--ease), background-color .45s var(--ease);
}
.cert__grade:hover .cert__source-mark{
  text-shadow:0 0 12px rgba(201,169,110,.55);
  letter-spacing:-.015em;
}
.cert__grade:hover .cert__source-mark::after{
  opacity:.9;
  background-color:#c9a96e;
}

/* HSTS pending — amber tone, same paper-stamp framing */
.cert__grade--pending{
  border-color:rgba(224,144,64,.55);
}
.cert__grade--pending::after{
  border-color:rgba(224,144,64,.22);
}
.cert__grade--pending::before{
  color:rgba(224,144,64,.55);
}
.cert__grade--pending .cert__roman,
.cert__grade--pending .cert__title{
  color:#c87830;
}
.cert__grade--pending .cert__roman::after{
  background:#c87830;
}
.cert__grade--pending .cert__source-mark{
  font-family:var(--mono);
  font-style:normal;
  font-size:12px;
  letter-spacing:.06em;
  color:#c87830;
  font-variation-settings:normal;
  font-weight:700;
}

/* Cards fade in when section enters viewport — no dramatic affix anymore */
.cert__grade{
  opacity:0;
  transition:opacity .55s var(--ease), transform .55s cubic-bezier(.2,.65,.3,1), box-shadow .55s cubic-bezier(.2,.65,.3,1);
}
.hero__verified.is-stamped .cert__grade{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .cert__grade{ opacity:1; transition:none; }
}

/* Footer — clean two-column type, no ornament */
.cert__foot{
  max-width:var(--container);
  margin:0 auto;
  padding:36px var(--pad) 44px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  position:relative;
  z-index:2;
}
.cert__signed-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.cert__signature{
  width:200px;
  margin-bottom:2px;
}
.cert__signature svg{
  display:block;
  width:100%;
  height:44px;
  color:#e8d9b8;
}
.cert__signed-name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  line-height:1;
  color:var(--paper);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 60;
}
.cert__signed-role{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(201,169,110,.6);
}
.cert__foot-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.cert__serial{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:6px;
}
.cert__serial-label{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(201,169,110,.6);
}
.cert__serial-no{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.005em;
  color:var(--rust);
  font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 60;
}

@media (max-width:720px){
  .cert__foot{ flex-direction:column; align-items:flex-start; gap:24px; padding-bottom:32px; }
  .cert__serial{ align-items:flex-start; text-align:left; }
}

/* Mobile */
@media (max-width:980px){
  .cert__grades{grid-template-columns:repeat(2,1fr);gap:20px}
  .cert__head-title::before,.cert__head-title::after{display:none}
}
@media (max-width:560px){
  .cert__head{padding:28px var(--pad) 22px}
  .cert__head-sub{font-size:9px;gap:8px}
  .cert__grades{grid-template-columns:1fr;gap:22px;padding-bottom:24px}
  .cert__grade{padding:28px 22px 22px;min-height:240px}
  .cert__grade:nth-child(odd){ transform:rotate(-.8deg); }
  .cert__grade:nth-child(even){ transform:rotate(.8deg); }
  .cert__roman{font-size:54px}
  .cert__title{font-size:20px}
  .cert__desc{font-size:13px;max-width:none}
}

/* ══ Showcase — ATELIER-WAND ══════════════════════════
   Active demo hängt als großes Stück; darunter Museums-Wand-Tafel.
   Links unten: 4 kleine Tafeln in einer Reihe (alle Arbeiten).
   Aktive ist hervorgehoben, klickbar zum manuellen Wechsel.
   ═══════════════════════════════════════════════════ */

.hero__showcase.atelier{
  align-self:start;
  position:relative;
  padding:0;
  margin-right:calc(var(--pad) * -1);
  display:grid;
  grid-template-rows:auto auto auto;
  gap:0;
  isolation:isolate;
}

/* HEADER strip oben */
.atelier__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:8px 32px 14px 0;
  border-bottom:1px solid var(--ink);
  position:relative;
  z-index:2;
}
.atelier__head::before{
  content:'';position:absolute;
  bottom:-1px;left:0;
  width:80px;height:2px;background:var(--rust);
}
.atelier__head-cap{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);
}
.atelier__head-num{
  font-family:var(--serif);
  font-size:16px;color:var(--ink);
  font-variation-settings:"opsz" 18,"SOFT" 40;
}
.atelier__head-num em{
  font-style:italic;
  font-weight:600;
  color:var(--rust);
  font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 80;
}

/* WAND — main framed piece */
.atelier__wall{
  position:relative;
  padding:48px 32px 32px 0;
  background:
    radial-gradient(ellipse at 70% 18%,rgba(255,243,210,.5) 0%,transparent 55%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-deep) 100%);
}

/* Picture-light spotlight glow */
.atelier__spot{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:80%;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,236,180,.45) 0%,transparent 55%);
  pointer-events:none;
  z-index:1;
}

.atelier__main{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Picture frame — thick ink border + warm gold mat inside */
.atelier__frame{
  width:100%;
  max-width:720px;
  background:#1a1612;
  padding:16px;
  position:relative;
  box-shadow:
    0 36px 72px -28px rgba(26,22,18,.55),
    0 16px 32px -14px rgba(26,22,18,.35),
    0 1px 0 rgba(239,232,216,.04) inset;
  /* Subtle frame inner-detail rule */
}
.atelier__frame::before,.atelier__frame::after{
  content:'';position:absolute;
  width:14px;height:14px;
  border:1px solid var(--gold-deep,#9b7f44);
  pointer-events:none;
  z-index:5;
}
.atelier__frame::before{top:4px;left:4px;border-right:none;border-bottom:none}
.atelier__frame::after{bottom:4px;right:4px;border-left:none;border-top:none}
/* Inner mat — clean, lets iframe breathe */
.atelier__mat{
  position:relative;
  background:#0d0a07;
  padding:0;
  border:none;
}

/* MUSEUM WALL LABEL */
.atelier__label{
  margin-top:22px;
  max-width:720px;
  width:100%;
  background:var(--paper);
  border:1px solid var(--ink);
  padding:14px 18px 16px;
  position:relative;
  box-shadow:0 6px 16px -6px rgba(26,22,18,.18);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 18px;
  align-items:baseline;
}
.atelier__label::before{
  content:'';position:absolute;
  top:0;left:0;
  width:48px;height:3px;
  background:var(--rust);
}
.atelier__label-num{
  grid-row:1;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:6px;
}
.atelier__label-num em{font-style:normal}
.atelier__label-num b{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:24px;color:var(--rust);
  letter-spacing:-.02em;line-height:1;
  font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 80;
  text-transform:none;
}
.atelier__label-name{
  grid-row:1;grid-column:2;
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:24px;color:var(--ink);
  letter-spacing:-.015em;line-height:1;
  font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 60;
}
.atelier__label-meta{
  grid-row:2;grid-column:1 / -1;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:6px;border-top:1px dotted var(--line-soft);
  margin-top:6px;
}

/* Floor shadow line */
.atelier__floor{
  position:absolute;
  bottom:0;left:0;right:0;
  height:24px;
  background:linear-gradient(180deg,transparent 0%,rgba(26,22,18,.12) 100%);
  z-index:1;
}

/* INDEX — row of 4 small framed thumbnails */
.atelier__index{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:24px 32px 0 0;
  border-top:1px solid var(--line-soft);
  margin-top:8px;
  position:relative;
}
.atelier__index::before{
  content:'Index — alle Arbeiten';
  position:absolute;
  top:-9px;left:0;
  background:var(--paper);
  padding:0 10px 0 0;
  font-family:var(--mono);
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);
}

.exhibit{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:0;
  background:transparent;border:none;
  cursor:pointer;
  text-align:left;
  font:inherit;color:inherit;
  transition:transform .35s var(--ease);
  position:relative;
}
.exhibit:hover{transform:translateY(-3px)}
.exhibit.is-active{transform:translateY(-6px)}

.exhibit__frame{
  width:100%;aspect-ratio:4/3;
  background:#1a1612;
  padding:5px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  box-shadow:0 6px 14px -6px rgba(26,22,18,.3);
  transition:box-shadow .35s var(--ease),padding .35s var(--ease);
}
.exhibit:hover .exhibit__frame{box-shadow:0 12px 22px -8px rgba(26,22,18,.4)}
.exhibit.is-active .exhibit__frame{
  padding:6px;
  box-shadow:0 14px 26px -10px rgba(138,47,21,.45),0 0 0 1px var(--rust);
}

.exhibit__frame::before{
  content:'';position:absolute;
  inset:0;
  border-radius:0;
  z-index:1;
}
.exhibit__frame--rest::before{background:radial-gradient(ellipse at 30% 30%,#c84427 0%,#3d1108 100%)}
.exhibit__frame--steuer::before{background:linear-gradient(135deg,#1e3a5f 0%,#0f1f3a 100%)}
.exhibit__frame--hw::before{background:linear-gradient(135deg,#3a2818 0%,#0f0a07 70%);}
.exhibit__frame--ecom::before{background:linear-gradient(135deg,#5e3a82 0%,#2a1c40 100%)}

.exhibit__icon{
  position:relative;z-index:2;
  width:36%;
  height:auto;
  color:rgba(243,231,207,.7);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition:transform .45s var(--ease),color .45s var(--ease);
  overflow:visible;
}
.exhibit.is-active .exhibit__icon{
  color:rgba(243,231,207,.98);
  transform:scale(1.12);
}
.exhibit:hover .exhibit__icon{color:rgba(243,231,207,.92)}

.exhibit__meta{
  display:flex;flex-direction:column;gap:1px;
  width:100%;
}
.exhibit__meta em{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);
  font-style:normal;
  transition:color .25s ease;
}
.exhibit__meta b{
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:14px;color:var(--ink);
  letter-spacing:-.01em;line-height:1.1;
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 50;
}
.exhibit__meta span{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:2px;
}
.exhibit.is-active .exhibit__meta em{color:var(--rust)}
.exhibit.is-active .exhibit__meta b{color:var(--rust)}

/* The actual stage — sits inside the atelier frame */
.showcase-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#0d0a07;
  overflow:hidden;
  z-index:4;
  contain:layout paint style;
}

/* The active iframe panel — clean, the frame is provided by .atelier__mat */
.showcase-panel--front{
  position:absolute;inset:0;
  overflow:hidden;
  background:#0d0a07;
}

.showcase-touch-blocker{position:absolute;inset:0;z-index:5;background:transparent}
.showcase-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .72s var(--ease);pointer-events:none;visibility:hidden}
.showcase-iframe.is-active,.showcase-iframe.is-entering,.showcase-iframe.is-leaving{visibility:visible}
.showcase-iframe.is-active{opacity:1}
.showcase-iframe.is-entering,.showcase-iframe.is-leaving{opacity:0}

/* CAPTION strip beneath stage — magazine "image-credit" style */
.demo-now{
  margin-top:24px;
  margin-right:32px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  padding-top:12px;
  border-top:1px solid var(--ink);
  position:relative;
  z-index:4;
}
.demo-now::before{
  content:'';
  position:absolute;
  top:-1px;left:0;
  width:64px;height:2px;
  background:var(--rust);
}
.demo-now__pre{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.demo-now__items{position:relative;height:38px;overflow:hidden}
.demo-now__item{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.demo-now__item.is-active{opacity:1;transform:none}
.demo-now__type{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--rust);margin-bottom:2px}
.demo-now__name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 60;line-height:1.05}
.demo-now__counter{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:22px;
  color:var(--ink);
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 22,"WONK" 1;
}
.demo-now__counter span{color:var(--rust)}
.demo-now__counter i{color:var(--ink-mute);margin:0 2px;font-style:normal}

/* ══════════════════ TRUST ══════════════════ */
.trust{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(64px,8vw,112px)}
.trust__grid{max-width:var(--container);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,5vw,72px);align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:32px;padding-bottom:32px}
.trust__google{display:flex;align-items:center;gap:18px;padding-right:32px;border-right:1px solid var(--line-soft)}
.trust__g-row{display:flex;align-items:center;gap:10px}
.trust__g-score{font-family:var(--serif);font-style:italic;font-weight:300;font-size:42px;color:var(--rust);letter-spacing:-.02em;line-height:1;font-variation-settings:"opsz" 44,"WONK" 1}
.trust__g-cap{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}

/* ── Beispiel-Darstellung Badge (UWG-Transparenzhinweis) ── */
.demo-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;margin-left:8px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);background:rgba(184,66,31,.08);border:1px solid rgba(184,66,31,.28);border-radius:2px;vertical-align:middle;white-space:nowrap;line-height:1.3}
.demo-tag::before{content:"●";font-size:7px;color:var(--rust)}
.demo-tag--block{display:block;margin:8px 0 0;width:fit-content}
.demo-notice{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:14px var(--pad);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin:0 auto;max-width:var(--container)}
.demo-notice strong{color:var(--rust);font-weight:600}
.demo-notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.trust__nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust__num{display:flex;flex-direction:column;gap:6px}
.trust__num-val{font-family:var(--serif);font-size:42px;font-weight:300;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variation-settings:"opsz" 44,"SOFT" 40}
.trust__num-val em{font-style:italic;color:var(--rust);font-variation-settings:"opsz" 44,"SOFT" 80,"WONK" 1}
.trust__num-cap{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}

/* ── Reviews — editorial pull-quote vibe ────────────── */
.trust__reviews{max-width:880px;margin:72px auto 0;padding:0 var(--pad);position:relative;text-align:center}
.trust__reviews-cap{
  display:block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:32px;
  position:relative;
}
.trust__reviews-cap::before,.trust__reviews-cap::after{
  content:'';display:inline-block;
  width:32px;height:1px;background:var(--line-soft);
  vertical-align:middle;margin:0 14px;
}

.trust__carousel{position:relative;min-height:240px}
.trust__slide{
  position:absolute;inset:0;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:28px;
  margin:0;padding:0;
}
.trust__slide.is-active{opacity:1;transform:none;position:relative}

.trust__quote-open{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:96px;line-height:.4;
  color:var(--rust);
  opacity:.35;
  font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 100;
  display:block;
  height:32px;
}
.trust__review-text{
  font-family:var(--serif);
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.4;
  color:var(--ink);
  font-style:italic;font-weight:400;
  max-width:60ch;
  margin:0;
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 28,"WONK" 1,"SOFT" 50;
}

.trust__review-author{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
  width:fit-content;
  position:relative;
}
.trust__review-author::before{
  content:'';position:absolute;
  top:-1px;left:50%;transform:translateX(-50%);
  width:32px;height:2px;background:var(--rust);
}
.trust__review-stars{
  color:var(--rust);
  font-size:13px;letter-spacing:3px;
  margin-bottom:4px;
}
.trust__review-author strong{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:18px;color:var(--ink);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 60;
}
.trust__review-author span{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);
}

/* Nav: dots + counter */
.trust__nav{
  margin-top:36px;
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  position:relative;
  flex-wrap:wrap;
}
.trust__nav::before{
  content:'';position:absolute;
  top:-1px;left:50%;transform:translateX(-50%);
  width:48px;height:1px;background:var(--rust);
}
.trust__dots{display:flex;gap:10px}
.trust__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--line-soft);border:none;cursor:pointer;
  transition:all .3s ease;padding:0;
}
.trust__dot:hover{background:var(--ink-mute)}
.trust__dot.is-active{background:var(--rust);transform:scale(1.4)}
.trust__counter{
  font-family:var(--serif);
  font-size:16px;color:var(--ink-mute);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 16,"WONK" 1;
  display:inline-flex;align-items:baseline;gap:4px;
}
.trust__counter em{
  font-style:italic;font-weight:500;
  color:var(--rust);
  font-variation-settings:"opsz" 16,"WONK" 1,"SOFT" 80;
}
.trust__counter i{
  font-style:normal;color:var(--ink-mute);margin:0 2px;
}
.trust__badges{max-width:var(--container);margin:48px auto 0;padding:0 var(--pad);display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.trust__badges .dot{color:var(--rust)}

/* ══ PAIN / DREAM — Manuskript-Korrektur ══════════════
   Sieht aus wie ein Lektor-Manuskript: Falsches durchgestrichen
   mit roter handgezeichneter Tinte, Richtiges drunter in Italic-Rost.
   Römische Ziffern in der Marge, Caveat-Notizen am Rand.
   ═══════════════════════════════════════════════════ */
.pd{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px);position:relative}

.pd__list{
  max-width:980px;
  margin:0 auto;
  padding:0 var(--pad);
  list-style:none;
  border-top:1px solid var(--line);
  position:relative;
}

.pd__entry{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:28px;
  align-items:baseline;
  padding:32px 0;
  border-bottom:1px solid var(--line-faint);
  position:relative;
}
.pd__entry:last-child{border-bottom:none}

/* Big italic Roman numeral in left margin */
.pd__num{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:clamp(48px,5.5vw,76px);
  line-height:.85;
  color:var(--ink-mute);
  letter-spacing:-.04em;
  font-variation-settings:"opsz" 80,"WONK" 1,"SOFT" 80;
  transition:color .4s var(--ease);
  display:flex;align-items:baseline;
}
.pd__num i{font-style:italic}
.pd__entry:hover .pd__num{color:var(--rust)}

/* The single editorial line */
.pd__line{
  font-family:var(--serif);
  font-size:clamp(20px,2.6vw,30px);
  line-height:1.3;
  color:var(--ink);
  letter-spacing:-.015em;
  font-variation-settings:"opsz" 30,"SOFT" 40;
  display:inline;
}

/* Cut word — wrapped in a positioning container for the SVG strike */
.pd__cut-wrap{
  position:relative;
  display:inline-block;
  margin-right:2px;
}
.pd__cut{
  font-family:var(--serif);
  font-style:normal;
  color:var(--ink-mute);
  text-decoration:none;
  opacity:.55;
  font-variation-settings:"opsz" 30,"SOFT" 30;
  position:relative;
  z-index:1;
}
.pd__cut-strike{
  position:absolute;
  left:-3px;right:-3px;top:30%;
  width:calc(100% + 6px);height:18px;
  color:var(--rust);
  opacity:.9;
  pointer-events:none;
  overflow:visible;
  z-index:2;
}
.pd__entry.in-view .pd__cut-strike path,
.in-view .pd__cut-strike path{
  animation:strikeDraw 1s var(--ease) forwards;
  animation-delay:.5s;
}
@keyframes strikeDraw{to{stroke-dashoffset:0}}

/* The slash characters — magazine editor's mark */
.pd__slash{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  color:var(--rust);
  font-size:1.3em;
  line-height:1;
  display:inline-block;
  margin:0 6px;
  vertical-align:-0.06em;
  font-variation-settings:"opsz" 30,"WONK" 1;
  opacity:.85;
}

/* The replacement word — italic rust, prominent */
.pd__fix{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  color:var(--rust);
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 30,"WONK" 1,"SOFT" 80;
  display:inline-block;
  position:relative;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .6s var(--ease) .9s,transform .6s var(--ease) .9s;
}
.pd__entry.in-view .pd__fix,
.in-view .pd__fix{
  opacity:1;
  transform:none;
}

.pd__cta{max-width:var(--container);margin:48px auto 0;padding:0 var(--pad);text-align:center}

/* Mobile */
@media (max-width:768px){
  .pd__entry{grid-template-columns:42px 1fr;gap:14px;padding:24px 0}
  .pd__num{font-size:36px}
  .pd__line{font-size:17px}
  .pd__slash{font-size:1.2em;margin:0 4px}
}

/* ══════════════════ LEISTUNGEN ══════════════════ */
.lst{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px)}
.lst__grid{max-width:var(--container);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.lst__item{
  padding:56px 36px 48px 0;
  border-right:1px solid var(--line-soft);
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.lst__item:nth-child(2){padding-left:36px}
.lst__item:nth-child(3){padding-left:36px;border-right:none;padding-right:0}

/* Massive italic numeral as backdrop, top-right of each column */
.lst__numeral{
  position:absolute;
  top:-20px;right:-12px;
  font-family:var(--serif);
  font-style:italic;font-weight:200;
  font-size:clamp(160px,18vw,260px);
  line-height:.78;
  color:var(--rust);
  opacity:.10;
  letter-spacing:-.06em;
  font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 100;
  pointer-events:none;
  user-select:none;
  z-index:0;
  transition:opacity .5s var(--ease);
}
.lst__item:nth-child(2) .lst__numeral{right:auto;left:-12px}
.lst__item:nth-child(3) .lst__numeral{right:-12px}
.lst__item:hover .lst__numeral{opacity:.18}

.lst__num-cap{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-mute);
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
  position:relative;z-index:1;
}
.lst__num-cap::before{
  content:'';width:24px;height:1px;background:var(--rust);
}

.lst__title{
  font-family:var(--serif);
  font-size:clamp(28px,3vw,40px);
  font-weight:300;
  line-height:.98;
  color:var(--ink);
  margin-bottom:10px;
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 40,"SOFT" 40;
  position:relative;z-index:1;
}

.lst__tag{
  font-family:var(--serif);
  font-size:16px;line-height:1.3;
  color:var(--rust);
  margin-bottom:22px;
  font-variation-settings:"opsz" 16,"WONK" 1,"SOFT" 80;
  position:relative;z-index:1;
}
.lst__tag em{font-style:italic;font-weight:500}

.lst__body{
  font-family:var(--serif);
  font-size:15px;line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:18px;
  font-variation-settings:"opsz" 14;
  position:relative;z-index:1;
}

/* Inline pipe-separated facts (no bullets) */
.lst__facts{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px dotted var(--line-soft);
  position:relative;z-index:1;
}
.lst__facts i{color:var(--rust);font-style:normal;font-weight:600}

/* Spec card — magazine-spec style */
.lst__spec{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:24px;
  padding:14px 16px;
  background:var(--paper-deep);
  border-left:2px solid var(--rust);
  position:relative;z-index:1;
}
.lst__spec-meta{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);
}
.lst__spec-val{
  font-family:var(--serif);
  font-size:32px;font-weight:300;
  color:var(--ink);
  letter-spacing:-.02em;line-height:1;
  font-variation-settings:"opsz" 36,"SOFT" 30;
  margin-right:4px;
}
.lst__spec-val em{
  font-style:italic;font-weight:600;color:var(--rust);
  font-variation-settings:"opsz" 36,"WONK" 1,"SOFT" 80;
  margin-right:1px;
}
.lst__spec-note{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-left:auto;
  text-align:right;
  line-height:1.3;
}

.lst__link{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:0 0 4px;
  transition:all .24s ease;
  align-self:flex-start;
  font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
  position:relative;z-index:1;
  margin-top:auto;
}
.lst__link i{font-style:normal;color:var(--rust);transition:transform .24s ease}
.lst__link:hover{color:var(--rust);border-bottom-color:var(--rust)}
.lst__link:hover i{transform:translate(3px,-3px)}
.lst__branchen{max-width:var(--container);margin:48px auto 0;padding:24px var(--pad);border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.lst__branchen-label{color:var(--ink-mute);margin-right:8px}
.lst__branchen span:not(.lst__branchen-label){padding:5px 10px;border:1px solid var(--line-soft);transition:all .2s ease}
.lst__branchen span:not(.lst__branchen-label):hover{border-color:var(--rust);color:var(--rust)}

/* ══ CUSTOMER STORY — Magazin-Feature ════════════════
   Wirkt wie ein opener-spread aus einem Architektur-Magazin:
   Byline, Portrait mit credit, Drop-Cap, Pull-Quote, Eckdaten-Box.
   ═══════════════════════════════════════════════════ */
.cs{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px)}

/* Byline strip — magazine "issue"-line */
.cs__byline{
  max-width:var(--container);
  margin:0 auto 32px;
  padding:14px var(--pad);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:baseline;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.cs__byline::before{
  content:'';position:absolute;
  top:-1px;left:var(--pad);
  width:80px;height:2px;background:var(--rust);
}
.cs__byline-pre{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rust);
  font-weight:500;
}
.cs__byline-mid{
  font-family:var(--serif);
  font-size:15px;color:var(--ink-soft);
  font-variation-settings:"opsz" 16,"SOFT" 40;
}
.cs__byline-mid em{
  font-style:italic;font-weight:500;color:var(--ink);
  font-variation-settings:"opsz" 16,"WONK" 1,"SOFT" 80;
}
.cs__byline-folio{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);
  font-feature-settings:"tnum";
}

/* Magazine spread layout — 1fr 1.4fr asymmetric */
.cs__spread{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(32px,5vw,80px);
  align-items:start;
}

/* Portrait — magazine photo with full-style caption */
.cs__portrait{margin:0;display:flex;flex-direction:column;position:relative}
.cs__portrait-tag{
  position:absolute;
  top:14px;left:14px;
  z-index:2;
  font-family:var(--mono);
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  padding:5px 10px;
  font-weight:500;
}
.cs__portrait img{
  width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;
  filter:sepia(.18) contrast(1.04);
}
.cs__portrait figcaption{
  padding:14px 0 0;
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  border-top:1px solid var(--line);
  margin-top:14px;
  position:relative;
}
.cs__portrait figcaption::before{
  content:'';position:absolute;
  top:-1px;left:0;width:48px;height:2px;background:var(--rust);
}
.cs__portrait figcaption strong{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:22px;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);
  font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 60;
  margin-bottom:2px;
}
.cs__photo-credit{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:6px;
  padding-top:6px;
  border-top:1px dotted var(--line-soft);
  font-style:normal;
}

/* Content column — the article body */
.cs__content{display:flex;flex-direction:column}

.cs__lede{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,32px);
  line-height:1.3;
  color:var(--ink);
  margin-bottom:24px;
  letter-spacing:-.015em;
  font-variation-settings:"opsz" 32,"SOFT" 40;
  font-weight:300;
}
.cs__dropcap{
  font-family:var(--serif);
  font-style:italic;font-weight:900;
  font-size:96px;line-height:.78;
  color:var(--rust);
  float:left;
  padding:10px 14px 0 0;
  font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 100;
}

.cs__body{
  font-family:var(--serif);
  font-size:18px;line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:32px;
  font-variation-settings:"opsz" 18;
}

/* Pull-quote — magazine-style, breaks rhythm */
.cs__quote{
  margin:0 0 32px;
  padding:24px 0 24px 36px;
  position:relative;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.cs__quote::before{
  content:'';position:absolute;
  top:-1px;left:0;
  width:48px;height:2px;background:var(--rust);
}
.cs__quote-mark{
  position:absolute;
  left:-6px;top:8px;
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:88px;line-height:.5;
  color:var(--rust);
  opacity:.45;
  font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 100;
}
.cs__quote p{
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 28,"WONK" 1,"SOFT" 60;
  margin-bottom:14px;
}
.cs__quote p em{
  font-style:italic;font-weight:600;color:var(--rust);
  font-variation-settings:"opsz" 28,"WONK" 1,"SOFT" 80;
}
.cs__quote footer{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);
}

/* Eckdaten data box */
.cs__data{
  margin-bottom:32px;
  padding:20px 24px;
  background:var(--paper-deep);
  border-left:2px solid var(--rust);
  position:relative;
}
.cs__data-cap{
  display:block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px dotted var(--line-soft);
}
.cs__data-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.cs__stat{display:flex;flex-direction:column;gap:4px}
.cs__stat-num{
  font-family:var(--serif);
  font-size:34px;font-weight:300;
  line-height:1;letter-spacing:-.02em;
  color:var(--ink);
  font-variation-settings:"opsz" 36,"SOFT" 40;
}
.cs__stat-num em{
  font-style:italic;color:var(--rust);
  font-variation-settings:"opsz" 36,"WONK" 1,"SOFT" 80;
}
.cs__stat-cap{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.3;
}

/* CTA — editorial link with arrow */
.cs__cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:0 0 4px;
  align-self:flex-start;
  font-weight:500;
  transition:all .24s ease;
}
.cs__cta i{font-style:normal;color:var(--rust);transition:transform .24s ease}
.cs__cta:hover{color:var(--rust);border-bottom-color:var(--rust)}
.cs__cta:hover i{transform:translate(3px,-3px)}

/* Mobile */
@media (max-width:980px){
  .cs__byline{grid-template-columns:1fr;gap:6px;text-align:left}
  .cs__byline-folio{justify-self:start}
  .cs__spread{grid-template-columns:1fr;gap:32px}
  .cs__portrait{max-width:480px}
  .cs__data-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cs__lede{font-size:22px}
  .cs__dropcap{font-size:72px;padding:8px 10px 0 0}
  .cs__quote{padding-left:24px}
  .cs__quote p{font-size:20px}
  .cs__data-grid{grid-template-columns:1fr 1fr}
  .cs__stat-num{font-size:28px}
}

/* ══════════════════ SONDERANGEBOT ══════════════════ */
.off{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px);background:var(--paper-deep)}
.off__price{max-width:var(--container);margin:0 auto;padding:32px var(--pad);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.off__price-left{display:flex;flex-direction:column;gap:6px}
.off__was{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);text-decoration:line-through}
.off__now{font-family:var(--serif);font-size:clamp(80px,12vw,180px);font-weight:300;line-height:.9;letter-spacing:-.05em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 30}
.off__now em{font-style:italic;color:var(--rust);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1}
.off__cap{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.off__features{max-width:var(--container);margin:48px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.off__col h4{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:14px;letter-spacing:-.01em;font-variation-settings:"opsz" 20}
.off__col ul{display:flex;flex-direction:column;gap:10px}
.off__col li{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-soft);padding-left:18px;position:relative;font-variation-settings:"opsz" 14}
.off__col li::before{content:'+';position:absolute;left:0;top:0;color:var(--rust);font-weight:600}
.off__legal{max-width:var(--container);margin:48px auto 0;padding:0 var(--pad);text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.off__legal a{color:var(--rust);border-bottom:1px solid var(--rust)}

/* ══════════════════ ÜBER UNS ══════════════════ */
.abt{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px)}
.abt__split{max-width:var(--container);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:.7fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.abt__portrait{margin:0;display:flex;flex-direction:column}
.abt__portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:sepia(.18) contrast(1.02)}
.abt__portrait figcaption{padding-top:14px;border-top:1px solid var(--line-soft);margin-top:14px;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.abt__portrait figcaption strong{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink);font-variation-settings:"opsz" 18,"WONK" 1}
.abt__lede{font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--ink);margin-bottom:20px;font-variation-settings:"opsz" 24,"SOFT" 30}
.abt__content > p{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink-soft);margin-bottom:18px;font-variation-settings:"opsz" 18}
.abt__sig{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-soft);font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 80}
.abt__reasons{max-width:var(--container);margin:64px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:48px}
.abt__card{display:flex;flex-direction:column;gap:14px;padding:0 16px;border-left:1px solid var(--line-soft)}
.abt__card:first-child{border-left:none;padding-left:0}
.abt__card-num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:48px;line-height:1;color:var(--rust);letter-spacing:-.03em;font-variation-settings:"opsz" 48,"WONK" 1}
.abt__card h4{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em;font-variation-settings:"opsz" 22}
.abt__card p{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink-soft);font-variation-settings:"opsz" 14}
.abt__bottom{max-width:var(--container);margin:48px auto 0;padding:0 var(--pad);text-align:center}

/* ══════════════════ BLOG / JOURNAL ══════════════════ */
.blg{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px)}
.blg__list{max-width:var(--container);margin:0 auto;padding:0 var(--pad);border-top:1px solid var(--line)}
.blg__row{display:grid;grid-template-columns:auto 1fr auto auto;gap:32px;align-items:center;padding:28px 8px;border-bottom:1px solid var(--line-faint);transition:background .24s ease;color:var(--ink)}
.blg__row:hover{background:var(--paper-deep)}
.blg__row-num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:36px;line-height:1;color:var(--ink-mute);letter-spacing:-.02em;font-variation-settings:"opsz" 36,"WONK" 1;transition:color .24s ease}
.blg__row:hover .blg__row-num{color:var(--rust)}
.blg__row-main h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em;font-variation-settings:"opsz" 24}
.blg__row-main p{font-family:var(--serif);font-size:15px;color:var(--ink-soft);line-height:1.5;font-variation-settings:"opsz" 14;max-width:60ch}
.blg__row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.blg__tag{color:var(--rust)}
.blg__time{color:var(--ink-mute)}
.blg__row-arrow{font-size:20px;color:var(--ink-mute);transition:transform .24s ease,color .24s ease}
.blg__row:hover .blg__row-arrow{transform:translate(4px,-4px);color:var(--rust)}
.blg__bottom{max-width:var(--container);margin:48px auto 0;padding:0 var(--pad);text-align:center}

/* ══════════════════ KONTAKT ══════════════════ */
.ktk{border-bottom:1px solid var(--line-soft);padding-bottom:clamp(56px,7vw,88px)}
.ktk__channels{max-width:var(--container);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ktk__channel{display:grid;grid-template-columns:auto 1fr auto;gap:18px;padding:28px 24px;border-right:1px solid var(--line-soft);align-items:center;color:var(--ink);transition:background .24s ease}
.ktk__channel:last-child{border-right:none}
.ktk__channel:hover{background:var(--paper-deep)}
.ktk__channel-num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:42px;line-height:1;color:var(--rust);letter-spacing:-.03em;font-variation-settings:"opsz" 44,"WONK" 1}
.ktk__channel-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.ktk__channel-val{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:2px;font-variation-settings:"opsz" 18}
.ktk__channel-sub{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.ktk__channel-arrow{font-size:20px;color:var(--ink-mute);transition:transform .24s ease,color .24s ease}
.ktk__channel:hover .ktk__channel-arrow{transform:translate(4px,-4px);color:var(--rust)}

.ktk__form-wrap{max-width:780px;margin:64px auto 0;padding:0 var(--pad)}
.ktk__form-title{font-family:var(--serif);font-size:clamp(28px,3.5vw,42px);font-weight:300;line-height:1.15;color:var(--ink);margin-bottom:32px;letter-spacing:-.02em;font-variation-settings:"opsz" 36,"SOFT" 30}
.ktk__form-title em{font-style:italic;font-weight:600;color:var(--rust);font-variation-settings:"opsz" 36,"SOFT" 80,"WONK" 1}

.form{display:flex;flex-direction:column;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__group{display:flex;flex-direction:column;gap:6px}
.form__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.form__input,.form__textarea{width:100%;padding:12px 0;background:transparent;border:none;border-bottom:1px solid var(--ink);color:var(--ink);font-family:var(--serif);font-size:18px;outline:none;transition:border-color .2s;font-variation-settings:"opsz" 18}
.form__input::placeholder,.form__textarea::placeholder{color:var(--ink-mute);font-style:italic}
.form__input:focus,.form__textarea:focus{border-bottom-color:var(--rust)}
.form__textarea{min-height:120px;resize:vertical;line-height:1.5}
.form__checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.form__check{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-soft);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);transition:all .2s ease}
.form__check input{accent-color:var(--rust);width:14px;height:14px;cursor:pointer}
.form__check:hover{border-color:var(--ink);color:var(--ink)}
.form__check:has(input:checked){border-color:var(--rust);color:var(--rust);background:var(--rust-glow)}
.form__dsgvo{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:8px}
.form__dsgvo input{accent-color:var(--rust);width:16px;height:16px;margin-top:2px;cursor:pointer}
.form__dsgvo a{color:var(--rust);border-bottom:1px solid var(--rust)}
.form__submit-area{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:8px}
.form__hint{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.form__success{display:none;text-align:center;padding:48px 24px;border:1px solid var(--rust);background:var(--rust-glow)}
.form__success.is-shown{display:block}
.form__success-icon{font-family:var(--serif);font-size:64px;color:var(--rust);line-height:1;margin-bottom:16px}
.form__success-title{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);margin-bottom:12px;font-variation-settings:"opsz" 24}

/* FAQ */
.ktk__faq{max-width:var(--container);margin:64px auto 0;padding:0 var(--pad)}
.ktk__faq-title{font-family:var(--serif);font-size:clamp(28px,3.5vw,42px);font-weight:300;color:var(--ink);margin-bottom:24px;letter-spacing:-.02em;font-variation-settings:"opsz" 36,"SOFT" 30}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line-faint)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 8px;text-align:left;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);transition:color .24s;font-variation-settings:"opsz" 18}
.faq-q:hover{color:var(--rust)}
.faq-icon{font-family:var(--mono);font-size:20px;color:var(--rust);transition:transform .3s var(--ease)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-q[aria-expanded="true"] + .faq-a{max-height:400px}
.faq-a-inner{padding:0 8px 24px;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-soft);font-variation-settings:"opsz" 16}

/* ══ FOOTER — Editorial Colophon ══════════════════════
   Dunkle Buch-Rückseite. Closing-Statement, dramatischer
   Brand-Block, line-art Socials, Atelier-Brief Newsletter,
   Type-Colophon ganz unten.
   ═══════════════════════════════════════════════════ */
.ftr{
  background:
    radial-gradient(ellipse at 80% 0%,rgba(184,66,31,.10) 0%,transparent 50%),
    linear-gradient(180deg,#1a1612 0%,#0d0a07 100%);
  color:var(--paper);
  padding:0;
  font-family:var(--sans);
  font-size:14px;
  position:relative;
}
.ftr::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
  pointer-events:none;
}

/* CLOSING STATEMENT — final flourish */
.ftr__close{
  max-width:var(--container);
  margin:0 auto;
  padding:80px var(--pad) 64px;
  text-align:center;
  border-bottom:1px solid rgba(239,232,216,.14);
  position:relative;
}
.ftr__close::before{
  content:'';position:absolute;
  bottom:-1px;left:50%;transform:translateX(-50%);
  width:96px;height:2px;background:var(--rust);
}
.ftr__close-cap{
  display:block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(239,232,216,.45);
  margin-bottom:18px;
}
.ftr__close-title{
  font-family:var(--serif);
  font-size:clamp(36px,5vw,64px);
  font-weight:300;line-height:1.05;
  color:var(--paper);
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 64,"SOFT" 40;
  margin-bottom:32px;
}
.ftr__close-title em{
  font-style:italic;font-weight:400;color:var(--rust);
  font-variation-settings:"opsz" 64,"WONK" 1,"SOFT" 80;
}
.ftr__close-cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 36px;
  background:var(--paper);color:var(--ink);
  font-family:var(--mono);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;text-decoration:none;
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.ftr__close-cta::before{
  content:'';position:absolute;inset:0;
  background:var(--rust);
  transform:translateY(101%);
  transition:transform .38s var(--ease);
}
.ftr__close-cta span,.ftr__close-cta i{position:relative;z-index:1;font-style:normal}
.ftr__close-cta:hover{color:var(--paper)}
.ftr__close-cta:hover::before{transform:translateY(0)}
.ftr__close-cta i{transition:transform .24s ease}
.ftr__close-cta:hover i{transform:translate(3px,-3px)}

/* TOP — brand + columns */
.ftr__top{
  max-width:var(--container);
  margin:0 auto;
  padding:64px var(--pad) 48px;
  display:grid;
  grid-template-columns:1.4fr 2.2fr;
  gap:64px;
  border-bottom:1px solid rgba(239,232,216,.14);
  position:relative;
  z-index:2;
}
.ftr__brand{max-width:380px}
.ftr__logo{
  font-family:var(--serif);
  font-weight:900;
  font-size:64px;
  letter-spacing:-.03em;
  color:var(--paper);
  font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1;
  line-height:1;
  margin-bottom:14px;
  text-transform:lowercase;
}
.ftr__logo-dot{color:var(--rust)}
.ftr__tagline{
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:22px;
  color:var(--paper);
  margin-bottom:20px;
  font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 80;
  letter-spacing:-.01em;
}
.ftr__tagline em{font-style:italic}
.ftr__desc{
  font-family:var(--serif);
  font-size:15px;line-height:1.6;
  color:rgba(239,232,216,.62);
  margin-bottom:28px;
  max-width:38ch;
  font-variation-settings:"opsz" 14;
}

/* SOCIAL LINKS — line-art SVG icons */
.ftr__socials{display:flex;flex-direction:column;gap:8px}
.ftr__socials a{
  display:inline-flex;align-items:center;gap:14px;
  padding:10px 16px;
  border:1px solid rgba(239,232,216,.16);
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);
  transition:all .28s var(--ease);
  width:fit-content;
  font-weight:500;
}
.ftr__socials a svg{
  width:18px;height:18px;color:var(--rust);
  transition:transform .3s var(--ease);
}
.ftr__socials a:hover{
  background:rgba(184,66,31,.12);
  border-color:var(--rust);
}
.ftr__socials a:hover svg{transform:scale(1.12)}

/* COLUMNS */
.ftr__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  align-items:start;
}
.ftr__col h4{
  font-family:var(--serif);
  font-style:normal;font-weight:500;
  font-size:18px;color:var(--paper);
  margin-bottom:18px;
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 18,"SOFT" 50;
  display:flex;align-items:baseline;gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(239,232,216,.12);
  text-transform:none;
}
.ftr__col h4 em{
  font-style:italic;font-weight:300;
  font-size:22px;color:var(--rust);
  font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 80;
}
.ftr__col ul{display:flex;flex-direction:column;gap:10px}
.ftr__col li{
  font-family:var(--serif);
  font-size:14px;
  font-variation-settings:"opsz" 14;
}
.ftr__col a{
  color:rgba(239,232,216,.6);
  transition:color .22s ease,padding-left .22s ease;
  display:inline-block;
  position:relative;
}
.ftr__col a::before{
  content:'·';color:var(--rust);
  position:absolute;left:-12px;
  opacity:0;transition:opacity .22s ease;
}
.ftr__col a:hover{color:var(--paper);padding-left:14px}
.ftr__col a:hover::before{opacity:1;left:0}

/* NEWSLETTER — Atelier-Brief subscription card */
.ftr__newsletter{
  max-width:var(--container);
  margin:0 auto;
  padding:48px var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
  border-bottom:1px solid rgba(239,232,216,.14);
  position:relative;
  z-index:2;
}
.ftr__nl-text{position:relative}
.ftr__nl-cap{
  display:block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rust);
  margin-bottom:10px;
  font-weight:500;
}
.ftr__nl-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.4vw,40px);
  font-weight:300;line-height:1.1;
  color:var(--paper);
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 36,"SOFT" 40;
  margin-bottom:14px;
}
.ftr__nl-title em{
  font-style:italic;font-weight:400;color:var(--rust);
  font-variation-settings:"opsz" 36,"WONK" 1,"SOFT" 80;
}
.ftr__nl-desc{
  font-family:var(--serif);
  font-size:15px;line-height:1.55;
  color:rgba(239,232,216,.55);
  font-variation-settings:"opsz" 14;
  max-width:42ch;
}

.ftr__nl-form{display:flex;flex-direction:column;gap:14px}
.ftr__nl-label{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(239,232,216,.55);
  font-weight:500;
}
.ftr__nl-input-row{
  display:flex;gap:0;
  border-bottom:1px solid var(--paper);
}
.ftr__nl-input{
  flex:1;
  padding:14px 0;
  background:transparent;border:none;
  color:var(--paper);
  font-family:var(--serif);
  font-size:18px;
  outline:none;
  font-variation-settings:"opsz" 18;
}
.ftr__nl-input::placeholder{
  color:rgba(239,232,216,.32);
  font-style:italic;
}
.ftr__nl-input:focus{outline:none}
.ftr__nl-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  background:transparent;
  color:var(--paper);
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;
  cursor:pointer;
  transition:all .3s var(--ease);
  border:none;
  flex-shrink:0;
}
.ftr__nl-btn i{font-style:normal;color:var(--rust);transition:transform .24s ease}
.ftr__nl-btn:hover{color:var(--rust)}
.ftr__nl-btn:hover i{transform:translate(3px,-3px)}
.ftr__nl-meta{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,232,216,.4);
}

/* BOTTOM — legal + security + copyright */
.ftr__bottom{
  max-width:var(--container);
  margin:0 auto;
  padding:24px var(--pad);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  border-bottom:1px solid rgba(239,232,216,.12);
  flex-wrap:wrap;
  position:relative;z-index:2;
}
.ftr__legal{
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,232,216,.5);
}
.ftr__copyright{
  font-family:var(--serif);
  font-size:14px;color:var(--paper);
  letter-spacing:0;text-transform:none;
  display:inline-flex;align-items:baseline;gap:6px;
  font-variation-settings:"opsz" 14;
}
.ftr__copyright em{
  font-style:italic;color:var(--rust);
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 80;
  font-feature-settings:"tnum";
}
.ftr__copyright i{font-style:italic;color:var(--rust)}
.ftr__legal a{color:rgba(239,232,216,.55);transition:color .2s}
.ftr__legal a:hover{color:var(--rust)}
.ftr__credit{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:rgba(239,232,216,.45);
  text-align:center;
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 60;
}
.ftr__security{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.ftr__security-cap{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,232,216,.55);
  margin-right:4px;
}
.ftr__security-cap em{
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  color:var(--rust);text-transform:none;
  font-size:13px;letter-spacing:0;
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 80;
}
/* Editorial security badges — custom pills, no shields.io */
.ftr__badge{
  display:inline-flex;align-items:stretch;
  border:1px solid rgba(184,66,31,.4);
  text-decoration:none;
  font-family:var(--mono);
  overflow:hidden;
  transition:all .28s var(--ease);
  height:26px;
}
.ftr__badge-name{
  display:flex;align-items:center;
  padding:0 10px;
  background:rgba(239,232,216,.04);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,232,216,.85);
  font-weight:500;
  line-height:1;
}
.ftr__badge-grade{
  display:flex;align-items:center;justify-content:center;
  padding:0 10px;
  background:var(--rust);
  color:var(--paper);
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:14px;letter-spacing:-.01em;
  font-variation-settings:"opsz" 16,"WONK" 1,"SOFT" 80;
  line-height:1;
  min-width:32px;
}
.ftr__badge-grade i{
  font-style:italic;font-size:.78em;
  margin-left:.05em;
  vertical-align:.06em;
}
.ftr__badge:hover{
  border-color:var(--rust);
  background:rgba(184,66,31,.06);
  transform:translateY(-1px);
}
.ftr__badge:hover .ftr__badge-name{color:var(--paper)}

/* HSTS pending — orange instead of rust */
.ftr__badge--pending{border-color:rgba(224,144,64,.45)}
.ftr__badge--pending .ftr__badge-grade{
  background:#e09040;
  color:#1a1612;
  font-size:18px;
  letter-spacing:.04em;
  padding:0 14px 4px;
}
.ftr__badge--pending:hover{border-color:#e09040;background:rgba(224,144,64,.08)}

/* TYPE COLOPHON */
.ftr__colophon{
  background:#0d0a07;
  border-top:1px solid rgba(239,232,216,.08);
  position:relative;z-index:2;
}
.ftr__colophon-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px var(--pad);
  display:flex;justify-content:center;align-items:center;gap:18px;
  flex-wrap:wrap;
  font-family:var(--serif);
  font-size:13px;
  color:rgba(239,232,216,.42);
  font-variation-settings:"opsz" 14;
}
.ftr__colophon-line em{
  font-style:italic;color:rgba(239,232,216,.7);
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 80;
}
.ftr__colophon-mark{color:var(--rust);font-size:11px;opacity:.7}
.ftr__colophon-greenweb{
  display:inline-flex;align-items:center;
  opacity:.78;transition:opacity .25s ease;
  border-radius:3px;
}
.ftr__colophon-greenweb:hover,.ftr__colophon-greenweb:focus-visible{opacity:1}
.ftr__colophon-greenweb img{
  height:60px;width:auto;display:block;
  filter:saturate(.9);
}
@media (max-width:560px){
  .ftr__colophon-greenweb img{height:52px}
}

/* Footer Mobile */
@media (max-width:980px){
  .ftr__close{padding:56px var(--pad) 48px}
  .ftr__top{grid-template-columns:1fr;gap:48px;padding:48px var(--pad) 36px}
  .ftr__cols{grid-template-columns:repeat(2,1fr);gap:28px}
  .ftr__newsletter{grid-template-columns:1fr;gap:28px;padding:36px var(--pad)}
  .ftr__bottom{grid-template-columns:1fr;text-align:center;gap:18px}
  .ftr__legal,.ftr__security{justify-content:center}
}
@media (max-width:560px){
  .ftr__cols{grid-template-columns:1fr;gap:24px}
  .ftr__logo{font-size:48px}
  .ftr__close-title{font-size:32px}
  .ftr__nl-title{font-size:24px}
  .ftr__colophon-inner{flex-direction:column;gap:6px;text-align:center}
}

/* ── ATELIER MAP — Editorial Standort-Tafel ─────────── */
.ftr__map{max-width:var(--container);margin:0 auto;padding:32px var(--pad) 0}
.ftr__map-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;
  border-bottom:1px solid rgba(239,232,216,.18);
  position:relative;
  margin-bottom:0;
}
.ftr__map-head::before{
  content:'';position:absolute;
  bottom:-1px;left:0;
  width:64px;height:2px;background:var(--rust);
}
.ftr__map-cap{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(239,232,216,.55);
}
.ftr__map-coords{
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:18px;
  color:var(--rust);
  letter-spacing:-.01em;
  font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 80;
  font-feature-settings:"tnum";
}

.ftr__map-frame{
  position:relative;
  background:#0d0a07;
  padding:14px;
  border-top:none;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6) inset;
}
.ftr__map-frame::before,.ftr__map-frame::after{
  content:'';position:absolute;
  width:14px;height:14px;
  border:1px solid rgba(184,66,31,.5);
  pointer-events:none;
  z-index:5;
}
.ftr__map-frame::before{top:4px;left:4px;border-right:none;border-bottom:none}
.ftr__map-frame::after{bottom:4px;right:4px;border-left:none;border-top:none}

.ftr__map-frame iframe{
  display:block;
  filter:grayscale(1) sepia(.55) hue-rotate(345deg) contrast(.92) brightness(.85);
  border:1px solid rgba(184,66,31,.18);
}

/* Click-to-load shield (DSGVO: no data to Google before consent) */
.ftr__map-shield{
  position:relative;
  height:320px;
  background:linear-gradient(180deg,#1a1612 0%,#0d0a07 100%);
  border:1px solid rgba(184,66,31,.18);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ftr__map-shield-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  color:#b8421f;
  opacity:.45;
  pointer-events:none;
}
.ftr__map-shield-inner{
  position:relative;z-index:2;
  max-width:420px;
  padding:0 24px;
  text-align:center;
  color:#efe8d8;
}
.ftr__map-shield-text{
  font-family:var(--serif);
  font-size:15px;
  line-height:1.55;
  color:rgba(239,232,216,.82);
  margin-bottom:18px;
  font-variation-settings:"opsz" 14;
}
.ftr__map-shield-text em{
  color:#efe8d8;
  font-style:italic;
  font-weight:500;
}
.ftr__map-shield-text a{
  color:#d97759;
  border-bottom:1px solid rgba(217,119,89,.4);
  transition:color .2s ease,border-color .2s ease;
}
.ftr__map-shield-text a:hover{color:#efe8d8;border-bottom-color:#efe8d8}
.ftr__map-shield-btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#efe8d8;
  background:var(--rust);
  border:1px solid var(--rust);
  padding:12px 28px;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.ftr__map-shield-btn:hover{
  background:var(--rust-deep);
  border-color:var(--rust-deep);
  transform:translateY(-1px);
}
@media (max-width:720px){
  .ftr__map-shield{height:240px}
  .ftr__map-shield-text{font-size:13px}
}

/* Floating editorial address card */
.ftr__map-card{
  position:absolute;
  top:36px;left:36px;
  z-index:4;
  width:280px;
  background:var(--paper);
  color:var(--ink);
  padding:20px 22px 22px;
  box-shadow:0 16px 40px -10px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.25);
  border:1px solid var(--ink);
  transform:rotate(-1.2deg);
  transition:transform .4s var(--ease);
}
.ftr__map-card:hover{transform:rotate(0deg) translateY(-2px)}
.ftr__map-card::before{
  content:'';position:absolute;
  top:0;left:0;
  width:48px;height:3px;
  background:var(--rust);
}
.ftr__map-card-tag{
  display:block;
  font-family:var(--mono);
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rust);
  margin-bottom:6px;
  font-weight:500;
}
.ftr__map-card-name{
  font-family:var(--serif);
  font-style:italic;font-weight:600;
  font-size:32px;line-height:1;
  color:var(--ink);
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 36,"WONK" 1,"SOFT" 60;
  margin-bottom:10px;
  text-transform:lowercase;
}
.ftr__map-card-name i{color:var(--rust);font-style:italic}
.ftr__map-card-addr{
  font-family:var(--serif);
  font-size:15px;line-height:1.45;
  color:var(--ink);
  font-variation-settings:"opsz" 14;
  margin-bottom:0;
}
.ftr__map-card-rule{
  width:32px;height:1px;background:var(--rust);
  margin:14px 0;
}
.ftr__map-card-hours{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.7;
  margin-bottom:16px;
}
.ftr__map-card-day{color:var(--rust);font-weight:600}

.ftr__map-card-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:0 0 3px;
  font-weight:600;
  transition:color .2s ease,border-color .2s ease;
}
.ftr__map-card-link i{font-style:normal;color:var(--rust);transition:transform .24s ease}
.ftr__map-card-link:hover{color:var(--rust);border-bottom-color:var(--rust)}
.ftr__map-card-link:hover i{transform:translate(2px,-2px)}

/* Decorative compass rose */
.ftr__map-compass{
  position:absolute;
  top:30px;right:30px;
  width:54px;height:54px;
  color:var(--paper);
  opacity:.55;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

@media (max-width:768px){
  .ftr__map-card{
    position:relative;top:auto;left:auto;
    width:auto;margin:18px 0 0;
    transform:none;
  }
  .ftr__map-card:hover{transform:translateY(-2px)}
  .ftr__map-compass{display:none}
  .ftr__map-frame iframe{height:240px !important}
}
@media (max-width:560px){
  .ftr__map-head{flex-direction:column;align-items:flex-start;gap:6px}
}

.ftr__bottom{max-width:var(--container);margin:0 auto;padding:24px var(--pad);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border-bottom:1px solid rgba(239,232,216,.12);flex-wrap:wrap}
.ftr__legal{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,232,216,.6)}
.ftr__legal a{color:rgba(239,232,216,.6);transition:color .2s}
.ftr__legal a:hover{color:var(--rust)}
.ftr__credit{font-size:12px;color:rgba(239,232,216,.4);font-style:italic;text-align:center}
.ftr__security{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,232,216,.4)}
.ftr__security img{height:18px;width:auto;opacity:.85}

.ftr__regions{max-width:var(--container);margin:0 auto;padding:18px var(--pad) 32px;display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.ftr__regions-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(239,232,216,.4);flex-shrink:0;padding-top:4px}
.ftr__regions-list{display:flex;flex-wrap:wrap;gap:8px 14px}
.ftr__regions-list a{font-size:12px;color:rgba(239,232,216,.5);transition:color .2s}
.ftr__regions-list a:hover{color:var(--rust)}

/* ══════════════════ WHATSAPP FLOAT ══════════════════ */
.wa-float{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:90;transition:transform .24s var(--ease)}
.wa-float:hover{transform:scale(1.08)}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:1100px){
  .hero__container{grid-template-columns:1fr;gap:48px;padding-right:var(--pad)}
  .hero__showcase.atelier{order:-1;max-width:760px;margin:0 auto;width:100%}
  .atelier__head{padding-right:0}
  .atelier__wall{padding-right:0}
  .atelier__index{padding-right:0;grid-template-columns:repeat(4,1fr);gap:8px}
  .exhibit__meta b{font-size:13px}
  .trust__grid{grid-template-columns:1fr}
  .trust__google{padding-right:0;border-right:none;border-bottom:1px solid var(--line-soft);padding-bottom:24px}
  .trust__nums{grid-template-columns:repeat(2,1fr)}
  .lst__grid{grid-template-columns:1fr}
  .lst__item,.lst__item:nth-child(2),.lst__item:nth-child(3){padding:40px 0;border-right:none;border-bottom:1px solid var(--line-soft)}
  .lst__item:last-child{border-bottom:none}
  .cs__split,.abt__split{grid-template-columns:1fr;gap:32px}
  .cs__portrait,.abt__portrait{max-width:420px}
  .abt__reasons{grid-template-columns:1fr;gap:24px}
  .abt__card{border-left:none;border-top:1px solid var(--line-soft);padding:24px 0 0}
  .abt__card:first-child{border-top:none;padding-top:0}
  .off__features{grid-template-columns:1fr;gap:32px}
  .off__price{grid-template-columns:1fr;gap:24px;text-align:center}
  .off__price-left{align-items:center}
  .ktk__channels{grid-template-columns:1fr}
  .ktk__channel{border-right:none;border-bottom:1px solid var(--line-soft)}
  .ktk__channel:last-child{border-bottom:none}
  .ftr__top{grid-template-columns:1fr 1fr;gap:32px}
  .ftr__brand{grid-column:1 / -1}
  .ftr__bottom{grid-template-columns:1fr;text-align:center}
  .ftr__legal,.ftr__security{justify-content:center}
}
@media (max-width:768px){
  .section__head--split{grid-template-columns:1fr;gap:18px}
  .section__head--split .section__title{text-align:left}
  .pd__head,.pd__row{grid-template-columns:1fr;gap:8px}
  .pd__row{padding:18px 0}
  .pd__head span:last-child,.pd__head{border-color:var(--line-soft)}
  .blg__row{grid-template-columns:auto 1fr;gap:14px;padding:20px 8px}
  .blg__row-meta{grid-column:2 / -1;flex-direction:row;align-items:center;gap:14px}
  .blg__row-arrow{display:none}
  .form__row{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:24px}
  .ftr__newsletter{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:640px){
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__menu.is-open{display:flex;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--paper);padding:32px var(--pad);overflow-y:auto;z-index:99;flex-direction:column}
  .nav__menu.is-open ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .nav__menu.is-open a{display:block;padding:18px 0;font-size:18px;font-family:var(--serif);border-bottom:1px solid var(--line-soft);width:100%}
  .nav__menu.is-open a::after{display:none}
  .hero__headline{font-size:clamp(36px,11vw,64px)}
  .hero__lede{font-size:17px}
  .hero__ribbon{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Atelier mobile */
  .atelier__head{padding:8px 0 12px;flex-direction:column;align-items:flex-start;gap:4px}
  .atelier__head-num{font-size:14px}
  .atelier__wall{padding:32px 0 24px}
  .atelier__frame{padding:10px}
  .atelier__label{padding:12px 14px 14px;grid-template-columns:1fr;gap:2px}
  .atelier__label-name{font-size:20px}
  .atelier__index{grid-template-columns:repeat(2,1fr);gap:14px;padding-top:20px}
  .atelier__index::before{font-size:8px}
  .trust__nums{grid-template-columns:1fr 1fr}
  .trust__review-text{font-size:18px}
  .cs__lede,.abt__lede{font-size:20px}
  .cs__lede::first-letter{font-size:48px}
  .off__now{font-size:88px}
  .ktk__channel{grid-template-columns:auto 1fr;padding:20px 16px}
  .ktk__channel-arrow{display:none}
  .wa-float{width:50px;height:50px;bottom:18px;right:18px}
  .wa-float svg{width:24px;height:24px}
}

/* ════════════════════════════════════════════════════════
   HERO — Cinematic Reveal & Editorial Micro-Interactions
   Lektor-cycle, magnetic letters, watermark parallax,
   wandering spotlight. Stage instructions on page-load.
   ════════════════════════════════════════════════════════ */

/* ── Cinematic page-load choreography ── */
.hero__folio,
.hero__watermark,
.hero__eyebrow,
.hero__headline .word,
.hero__pullquote,
.hero__lede,
.hero__actions,
.hero__usps,
.hero__stamp,
.hero__postage,
.hero__showcase,
.hero__ribbon{
  opacity:0;
  will-change:transform,opacity,filter;
}
html.js-ready .hero__folio,
html.js-ready .hero__watermark,
html.js-ready .hero__eyebrow,
html.js-ready .hero__headline .word,
html.js-ready .hero__pullquote,
html.js-ready .hero__lede,
html.js-ready .hero__actions,
html.js-ready .hero__usps,
html.js-ready .hero__stamp,
html.js-ready .hero__postage,
html.js-ready .hero__showcase,
html.js-ready .hero__ribbon{
  animation:heroFade .9s var(--ease) forwards;
}
@keyframes heroFade{
  from{ opacity:0; transform:translateY(14px); filter:blur(4px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes heroFadeNoBlur{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* Staged delays — unfolds like a magazine spread */
html.js-ready .hero__folio       { animation-delay:.05s; }
html.js-ready .hero__eyebrow     { animation-delay:.18s; }
html.js-ready .hero__headline .word{ animation:heroWordIn .85s var(--ease) both; }
html.js-ready .hero__headline .word:nth-child(1){ animation-delay:.32s; }
html.js-ready .hero__headline .word:nth-child(2){ animation-delay:.40s; }
html.js-ready .hero__headline .word:nth-child(3){ animation-delay:.48s; }
html.js-ready .hero__headline .word:nth-child(4){ animation-delay:.56s; }
html.js-ready .hero__headline .word:nth-child(5){ animation-delay:.72s; }
html.js-ready .hero__headline .word:nth-child(6){ animation-delay:.80s; }
html.js-ready .hero__headline .word:nth-child(7){ animation-delay:.88s; }
html.js-ready .hero__headline .word:nth-child(8){ animation-delay:1.00s; }
html.js-ready .hero__pullquote   { animation-delay:1.18s; }
html.js-ready .hero__lede        { animation-delay:1.30s; }
html.js-ready .hero__actions     { animation-delay:1.48s; }
html.js-ready .hero__usps        { animation-delay:1.62s; }

/* Watermark "01" — dramatic zoom-in (parallax handled via --pY in inline transform) */
html.js-ready .hero__watermark{
  animation:heroWatermark 1.6s cubic-bezier(.16,.84,.3,1) .1s forwards;
}
@keyframes heroWatermark{
  from{ opacity:0; filter:blur(20px); letter-spacing:.4em; }
  to  { opacity:.07; filter:blur(0); letter-spacing:0; }
}

/* Stamp — rotates in like being pressed onto paper */
html.js-ready .hero__stamp{
  animation:heroStamp 1.1s cubic-bezier(.34,1.56,.64,1) 1.3s forwards;
  transform-origin:50% 50%;
}
@keyframes heroStamp{
  0%  { opacity:0; transform:scale(1.5) rotate(-22deg); filter:blur(6px); }
  60% { opacity:1; transform:scale(.92) rotate(-7deg); filter:blur(0); }
  100%{ opacity:1; transform:scale(1) rotate(-9deg); }
}

/* Postage — slides in from right */
html.js-ready .hero__postage{
  animation:heroPostage .8s var(--ease) 1.55s forwards;
}
@keyframes heroPostage{
  from{ opacity:0; transform:translateX(30px) rotate(8deg); }
  to  { opacity:1; transform:none; }
}

/* Showcase — lifts in from below */
html.js-ready .hero__showcase{
  animation:heroShowcase 1.2s cubic-bezier(.16,.84,.3,1) .55s forwards;
}
@keyframes heroShowcase{
  from{ opacity:0; transform:translateY(60px) scale(.96); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* Ribbon ticks in */
html.js-ready .hero__ribbon{
  animation:heroFadeNoBlur .8s var(--ease) 1.85s forwards;
}

/* Per-word fade — refined */
@keyframes heroWordIn{
  from{ opacity:0; transform:translateY(28px) rotateX(-30deg); filter:blur(5px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
.hero__headline .word{
  display:inline-block;
  transform-origin:50% 100%;
  perspective:600px;
}

/* ── Magnetic letters on headline (JS toggles per-letter spans) ── */
.hero__headline .char{
  display:inline-block;
  transition:transform .35s cubic-bezier(.2,.9,.2,1.4), color .25s ease;
  will-change:transform;
}
.hero__headline .word:not(.word--accent):hover .char{
  color:var(--rust);
}

/* ── Cycle word: Lektor-Korrektur (red-pen strikethrough + handwritten replace) ── */
.hero__cycle{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  transition:opacity .25s ease;
}
.hero__cycle.is-strike::after{
  content:'';
  position:absolute;
  left:-4%;right:-4%;
  top:55%;
  height:.18em;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--rust) 4%,
      var(--rust-deep) 50%,
      var(--rust) 96%,
      transparent 100%);
  border-radius:60% 40% 50% 60% / 50% 60% 40% 50%;
  transform:scaleX(0) rotate(-2deg);
  transform-origin:0 50%;
  animation:heroStrike .42s cubic-bezier(.55,.05,.4,1) forwards;
  filter:drop-shadow(0 1px 0 rgba(184,66,31,.4));
  pointer-events:none;
  z-index:2;
}
@keyframes heroStrike{
  0%  { transform:scaleX(0) rotate(-2deg); opacity:.9; }
  100%{ transform:scaleX(1) rotate(-1.5deg); opacity:1; }
}
.hero__cycle.is-out{
  animation:heroCycleOut .35s cubic-bezier(.55,.05,.4,1) forwards;
}
@keyframes heroCycleOut{
  to{ opacity:0; transform:translateY(-6px); filter:blur(2px); }
}
.hero__cycle.is-in{
  animation:heroCycleIn .55s cubic-bezier(.16,.84,.3,1) forwards;
}
@keyframes heroCycleIn{
  from{ opacity:0; transform:translateY(10px) rotate(-1.5deg); filter:blur(3px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* Underline draws AFTER cycle word settles */
html.js-ready .hero__underline path{
  animation:heroUnderline 1.4s cubic-bezier(.65,0,.35,1) 1.6s forwards;
}
@keyframes heroUnderline{
  to{ stroke-dashoffset:0; }
}
.hero__cycle.is-in ~ .hero__underline path{
  animation:heroUnderline .9s cubic-bezier(.65,0,.35,1) .15s forwards;
}

/* ── Watermark parallax (JS sets --pY) ── */
.hero__watermark{
  transform:translateY(var(--pY,0));
  transition:transform .15s linear;
}

/* ── Wandering atelier spotlight ── */
.atelier__spot{
  --sx:50%;
  background:
    radial-gradient(ellipse 70% 60% at var(--sx) 0%,
      rgba(255,232,180,.45),
      rgba(255,232,180,.12) 40%,
      transparent 75%) !important;
  transition:--sx 2.4s cubic-bezier(.4,0,.6,1);
}
@property --sx{
  syntax:'<percentage>';
  inherits:false;
  initial-value:50%;
}

/* ── CTA buttons — refined hover ── */
.hero__actions .btn--primary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero__actions .btn--primary::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.25) 50%,
    transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s cubic-bezier(.16,.84,.3,1);
  z-index:-1;
}
.hero__actions .btn--primary:hover::before{
  transform:translateX(120%);
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero__folio,.hero__watermark,.hero__eyebrow,.hero__headline .word,
  .hero__pullquote,.hero__lede,.hero__actions,.hero__usps,.hero__stamp,
  .hero__postage,.hero__showcase,.hero__ribbon{
    opacity:1 !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }
  .hero__underline path{ stroke-dashoffset:0 !important; animation:none !important; }
  .hero__cycle, .hero__cycle.is-in, .hero__cycle.is-out{ animation:none !important; }
  .hero__cycle.is-strike::after{ animation:none !important; transform:scaleX(1) rotate(-1.5deg) !important; }
  .hero__headline .char{ transition:none !important; }
}

/* ════════════════════════════════════════════════════════
   FEDERKIEL — Reading-Quill Progress Indicator
   ════════════════════════════════════════════════════════ */
.quill{
  position:fixed;
  top:calc(var(--nav-h) + 24px);
  bottom:24px;
  left:18px;
  width:28px;
  z-index:90;
  pointer-events:none;
  display:none;
}
@media (min-width:1200px){ .quill{ display:block; } }
/* Track — hairline, almost invisible, like a typeset ruling */
.quill__track{
  position:relative;
  width:1px;
  height:100%;
  margin:0 auto;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(26,22,18,.10) 6%,
    rgba(26,22,18,.10) 94%,
    transparent 100%);
}
/* Ink trail — dark ink, subtle, no glow */
.quill__ink{
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:0%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    rgba(26,22,18,.65) 0%,
    rgba(26,22,18,.85) 30%,
    rgba(26,22,18,.85) 100%);
  /* height is JS-lerped — no CSS transition (would double-smooth) */
}
/* Pen — refined small fountain-pen nib */
.quill__pen{
  position:absolute;
  left:50%;
  top:0;
  width:20px;
  height:54px;
  margin-left:-10px;
  margin-top:-3px;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.45))
    drop-shadow(0 3px 6px rgba(40,28,16,.3));
  /* transform is JS-lerped — no CSS transition (would fight the lerp) */
  transform-origin:50% 0;
}

/* ════════════════════════════════════════════════════════
   PAGE-CURL — top-right corner Easter Egg
   ════════════════════════════════════════════════════════ */
.curl{
  position:absolute;
  top:var(--nav-h); right:0;
  width:88px; height:88px;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:50;
  padding:0;
  outline:none;
}
.curl__page{
  position:absolute;
  top:0; right:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(225deg,
      var(--paper) 0%,
      var(--paper) 48%,
      rgba(255,255,255,.85) 50%,
      var(--paper-deep) 51%,
      #d4c8aa 100%);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
  box-shadow:
    inset -1px 1px 0 rgba(255,255,255,.5),
    inset 2px -2px 6px rgba(0,0,0,.1);
  transition:clip-path .55s var(--ease), filter .55s var(--ease);
  transform-origin:100% 0;
}
.curl__shadow{
  position:absolute;
  top:0; right:0;
  width:100%; height:100%;
  clip-path:polygon(100% 0, 100% 100%, 0 0);
  background:linear-gradient(225deg, transparent 50%, rgba(40,28,16,.18) 65%, transparent 80%);
  pointer-events:none;
  opacity:0;
  transition:opacity .55s var(--ease);
}
.curl__under{
  position:absolute;
  top:0; right:0;
  width:240px;
  padding:18px 20px 16px 22px;
  background:
    radial-gradient(ellipse at top right, rgba(184,66,31,.04), transparent 70%),
    linear-gradient(180deg, #2a201a 0%, #1f1814 100%);
  color:#e8dcc4;
  border-bottom-left-radius:2px;
  text-align:right;
  pointer-events:none;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .35s var(--ease) .1s, transform .45s var(--ease) .1s;
  z-index:-1;
  box-shadow:0 12px 24px -8px rgba(0,0,0,.4);
  clip-path:polygon(100% 0, 100% 100%, 0 100%, 78px 0);
}
.curl__under-cap{
  display:block;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a89376;
  margin-bottom:6px;
}
.curl__under-body{
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.5;
  color:#e8dcc4;
}
.curl__under-body em{ color:var(--rust); font-style:italic; }
.curl__under-body .mono{
  font-family:var(--mono);
  font-size:.7rem;
  color:#a89376;
  letter-spacing:.06em;
}
.curl:hover .curl__page,
.curl:focus-visible .curl__page{
  clip-path:polygon(100% 0, 100% 100%, 0 0, 0 0);
  /* peel further: actually use a transform-based approach for organic feel */
  filter:brightness(1.02);
}
.curl:hover .curl__shadow,
.curl:focus-visible .curl__shadow{ opacity:1; }
.curl:hover .curl__under,
.curl:focus-visible .curl__under{
  opacity:1;
  transform:translateX(0);
  z-index:51;
}
.curl.is-open .curl__page{ width:88px; height:88px; }
.curl.is-open .curl__under{
  opacity:1; transform:translateX(0); z-index:51;
}
@media (max-width:720px){ .curl{ display:none; } }

/* ════════════════════════════════════════════════════════
   MARGINALIA — handgeschriebene Lektor-Notizen
   Block-level captions unter jedem USP, robust auf allen
   Viewports. Reveal per IntersectionObserver (.is-on).
   ════════════════════════════════════════════════════════ */
.hero__usps{ position:relative; row-gap:6px; }
.hero__usps li{ position:relative; }
.hero__usps .marg{
  display:block;
  margin-top:8px;
  font-family:'Caveat','Brush Script MT',cursive;
  font-weight:600;
  font-size:1.1rem;
  font-style:italic;
  line-height:1;
  color:var(--rust);
  letter-spacing:.005em;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px) rotate(-2deg);
  transform-origin:left center;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  text-shadow:0 1px 0 rgba(255,250,240,.4);
}
.hero__usps .marg.is-on{
  opacity:.92;
  transform:translateY(0) rotate(-2deg);
}
/* Vary tilt per variant for organic feel */
.hero__usps .marg--top.is-on   { transform:translateY(0) rotate(-3.5deg); }
.hero__usps .marg--right.is-on { transform:translateY(0) rotate(2deg); }

/* Hide on very narrow screens to keep USP row tidy */
@media (max-width:520px){ .hero__usps .marg{ display:none; } }

/* ════════════════════════════════════════════════════════
   WERKSCHAU-NOTIZ — Bronze-Plakette unter Atelier-Index
   Updates with active exhibit; Lighthouse-Score counts up.
   ════════════════════════════════════════════════════════ */
.plak{
  position:relative;
  margin-top:18px;
  padding:18px 20px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,235,200,.15), transparent 60%),
    linear-gradient(160deg, #5e4528 0%, #6e542f 25%, #4a361e 60%, #3a2914 100%);
  color:#e8d9b8;
  border-radius:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,.18),
    inset 0 -2px 6px rgba(0,0,0,.45),
    0 12px 24px -10px rgba(40,28,16,.4),
    0 4px 8px -2px rgba(40,28,16,.2);
  overflow:hidden;
}
/* Brushed-metal grain */
.plak::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 2px,
      rgba(0,0,0,.06) 2px 3px,
      transparent 3px 5px,
      rgba(255,220,170,.04) 5px 6px);
  pointer-events:none;
  mix-blend-mode:overlay;
}
.plak__head{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(232,217,184,.18);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.plak__cap{ color:#c9b48a; font-weight:600; }
.plak__concept{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
  color:#a89376;
  margin-left:4px;
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 60;
}
.plak__id{ color:#d4a574; font-weight:600; }
.plak__body{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.plak__desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  line-height:1.45;
  color:#e8d9b8;
  font-variation-settings:"opsz" 14,"SOFT" 60;
  margin:0;
}
.plak__stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin:0;
  padding-top:10px;
  border-top:1px dashed rgba(232,217,184,.22);
}
.plak__stats > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:0 6px;
  border-right:1px solid rgba(232,217,184,.12);
}
.plak__stats > div:last-child{ border-right:none; }
.plak__stats dt{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a89376;
}
.plak__stats dd{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:#f0e2c4;
  font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 60;
  letter-spacing:-.005em;
  display:flex;
  align-items:baseline;
}
.plak__stats dd i{
  font-size:.65rem;
  font-style:normal;
  font-family:var(--mono);
  color:#a89376;
  margin-left:1px;
  letter-spacing:.04em;
}
.plak__score{
  font-variant-numeric:tabular-nums;
  color:#9fd498;
  min-width:1.6ch;
  text-align:right;
  display:inline-block;
}
/* Rivets in corners */
.plak__rivet{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c9a96e, #6b4f29 70%);
  box-shadow:
    inset -1px -1px 1px rgba(0,0,0,.5),
    0 1px 1px rgba(0,0,0,.4);
  pointer-events:none;
}

/* Stat field transitions for fade-in during typewriter */
.plak__stats dd, #plakId{
  transition:opacity .25s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════
   POSTCARD CONTACT FORM — letter-as-product
   Sender (left) + Recipient + Stamp (right), big message field with
   ruled paper, interest tags, ABSENDEN rubber-stamp button.
   ═══════════════════════════════════════════════════════════════ */
.postcard{
  position:relative;
  background:#f6efdc;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(60,40,20,.05) 26px 27px);
  border:1px solid rgba(40,28,16,.18);
  border-radius:2px;
  padding:28px 32px 24px;
  box-shadow:
    0 1px 0 rgba(255,235,200,.6) inset,
    0 16px 36px -14px rgba(40,28,16,.35),
    0 4px 8px -2px rgba(40,28,16,.15);
  font-family:var(--serif);
  color:var(--ink);
  transform:rotate(-.5deg);
  transition:transform .9s var(--ease), opacity .9s var(--ease);
  overflow:hidden;
}
.postcard::before{
  /* Paper grain — subtle */
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(180,140,90,.06), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(120,80,40,.05), transparent 60%);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.postcard__head{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding-bottom:8px;
  margin-bottom:18px;
  border-bottom:1px dashed rgba(40,28,16,.28);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.postcard__brand{ color:var(--rust); font-weight:600; }

.postcard__col-label{
  display:block;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:8px;
}
.postcard__col-sub{
  letter-spacing:.12em;
  text-transform:none;
  font-weight:400;
  color:var(--ink-mute);
  opacity:.7;
}

/* Top split: Sender (left) | Recipient + Stamp (right) */
.postcard__top{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:36px;
  margin-bottom:24px;
}
.postcard__sender,
.postcard__recipient{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.postcard__line{ position:relative; }
.postcard__line input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(40,28,16,.35);
  padding:5px 0 5px 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  color:var(--ink);
  font-variation-settings:"opsz" 18,"SOFT" 60;
  letter-spacing:-.003em;
  outline:none;
  transition:border-color .25s var(--ease);
}
.postcard__line input::placeholder{
  font-style:italic;
  color:rgba(40,28,16,.32);
}
.postcard__line input:focus{
  border-bottom-color:var(--rust);
}
.postcard__line input:focus::placeholder{
  color:rgba(40,28,16,.18);
}

/* Recipient block */
.postcard__recipient{
  align-items:flex-start;
}
.postcard__stamp{
  position:absolute;
  top:-8px; right:-4px;
  width:78px;
  transform:rotate(2.5deg);
  filter:drop-shadow(0 2px 3px rgba(40,28,16,.25));
  pointer-events:none;
}
.postcard__stamp svg{ display:block; width:100%; height:auto; }
.postcard__address{
  width:100%;
  padding-top:6px;
  padding-right:86px; /* clear room for the stamp */
}
.postcard__address-lines{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:6px;
}
.postcard__address-lines span{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--ink);
  font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 60;
  letter-spacing:-.005em;
  border-bottom:1px solid rgba(40,28,16,.18);
  padding-bottom:3px;
}
.postcard__address-lines span:last-child{ border-bottom:none; }

/* Big message area */
.postcard__message{
  margin-bottom:22px;
}
.postcard__message textarea{
  width:100%;
  min-height:140px;
  background:transparent;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(40,28,16,.18) 27px 28px);
  background-position:0 26px;
  border:none;
  padding:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  line-height:28px;
  color:var(--ink);
  font-variation-settings:"opsz" 18,"SOFT" 60;
  letter-spacing:-.003em;
  resize:vertical;
  outline:none;
}
.postcard__message textarea::placeholder{
  font-style:italic;
  color:rgba(40,28,16,.32);
}

/* Interest tags */
.postcard__interests{ margin-bottom:18px; }
.postcard__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.postcard__tag{
  position:relative;
  cursor:pointer;
}
.postcard__tag input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.postcard__tag span{
  display:inline-block;
  padding:6px 14px;
  border:1px dashed rgba(40,28,16,.4);
  border-radius:2px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  background:transparent;
  transition:all .22s var(--ease);
}
.postcard__tag:hover span{
  color:var(--ink);
  border-color:var(--ink);
}
.postcard__tag input:checked + span{
  background:var(--rust);
  color:#f6efdc;
  border-color:var(--rust);
  border-style:solid;
}

/* Foot section: DSGVO + Turnstile + Send button */
.postcard__foot{
  border-top:1px dashed rgba(40,28,16,.25);
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.postcard__dsgvo{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-family:var(--sans, system-ui);
  font-size:12px;
  line-height:1.5;
  color:var(--ink-mute);
}
.postcard__dsgvo input[type=checkbox]{
  margin:2px 0 0 0;
  accent-color:var(--rust);
  flex-shrink:0;
}
.postcard__dsgvo a{ color:var(--rust); }

.postcard__submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.postcard__hint{
  margin:0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* The rubber-stamp ABSENDEN button */
.postcard__send{
  position:relative;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  color:var(--rust);
  width:200px;
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.postcard__send svg{ display:block; width:100%; height:auto; }
.postcard__send:not(:disabled):hover{
  transform:scale(1.04) rotate(-2deg);
}
.postcard__send:not(:disabled):active{
  transform:scale(.98) rotate(-1deg);
}
.postcard__send:disabled{
  opacity:.32;
  cursor:not-allowed;
}
.postcard__send.is-sending{
  opacity:.55;
  animation:postcardSendingPulse 1.2s ease-in-out infinite;
}
@keyframes postcardSendingPulse{
  0%,100% { transform:scale(1) rotate(0deg); opacity:.55; }
  50%     { transform:scale(.97) rotate(-1deg); opacity:.85; }
}

/* Big drop stamp that lands on the postcard after submit */
.postcard__drop-stamp{
  position:absolute;
  top:50%; left:50%;
  width:180px; height:180px;
  transform:translate(-50%, -50%) scale(2.5) rotate(-20deg);
  color:var(--rust);
  opacity:0;
  pointer-events:none;
  z-index:6;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.3))
    drop-shadow(0 6px 14px rgba(40,28,16,.25));
  will-change:transform, opacity;
}
.postcard__drop-stamp svg{ display:block; width:100%; height:100%; }

@keyframes postcardStampDrop{
  0%   { transform:translate(-50%, -50%) scale(2.8) rotate(-22deg); opacity:0; }
  55%  { transform:translate(-50%, -50%) scale(0.9) rotate(-5deg);  opacity:1; }
  100% { transform:translate(-50%, -50%) scale(1)   rotate(-8deg);  opacity:.95; }
}
@keyframes postcardLiftOff{
  0%   { transform:rotate(-.5deg) translateY(0);    opacity:1; }
  100% { transform:rotate(-2.5deg) translateY(-24px); opacity:0; }
}
.postcard.is-sent .postcard__drop-stamp{
  animation:postcardStampDrop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
.postcard.is-sent{
  animation:postcardLiftOff .85s cubic-bezier(.65,0,.35,1) 1.4s forwards;
  pointer-events:none;
}

/* Compact stack on small screens */
@media (max-width: 720px){
  .postcard{ padding:22px 20px 20px; transform:none; }
  .postcard__top{ grid-template-columns:1fr; gap:24px; }
  .postcard__stamp{ width:64px; top:-4px; right:0; }
  .postcard__address{ padding-right:74px; }
  .postcard__address-lines span{ font-size:16px; }
  .postcard__line input{ font-size:16px; }
  .postcard__message textarea{ font-size:16px; }
  .postcard__send{ width:100%; max-width:240px; }
}

/* ═══════════════════════════════════════════════════════════════
   EDITOR'S RED PEN — hand-drawn circle around key terms on hover
   The svg is injected by JS so authors only need to add .mark class.
   ═══════════════════════════════════════════════════════════════ */
.mark{
  position:relative;
  display:inline-block;
  color:inherit;
}
.mark__circle{
  position:absolute;
  inset:-22% -10% -22% -10%;
  pointer-events:none;
  color:var(--rust, #b8421f);
  opacity:0;
  transition:opacity .25s var(--ease);
  overflow:visible;
}
.mark__circle path{
  stroke-dasharray:480;
  stroke-dashoffset:480;
  transition:stroke-dashoffset .9s cubic-bezier(.5,.1,.2,1);
}
.mark:hover .mark__circle,
.mark.is-circled .mark__circle{ opacity:.85; }
.mark:hover .mark__circle path,
.mark.is-circled .mark__circle path{ stroke-dashoffset:0; }

/* The zero-stat circle is bigger and stays after section enters viewport */
.cs__stat-zero{
  display:inline-block;
  position:relative;
}
.cs__stat-zero .mark__circle{
  inset:-30% -45% -30% -45%; /* wider for the standalone "0" */
}
@media (prefers-reduced-motion: reduce){
  .mark__circle path{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════
   TOC — floating chapter navigation (magazine-style)
   Fixed right edge, vertical list, active chapter marked with red mark.
   ═══════════════════════════════════════════════════════════════ */
.toc{
  position:fixed;
  top:50%;
  right:32px;
  transform:translateY(-50%);
  z-index:40;
  width:200px;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s var(--ease);
  font-family:var(--mono);
  color:var(--ink);
}
.toc.is-on{
  opacity:1;
}
/* Header — edition mark + diamond ornament + label */
.toc__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding-bottom:14px;
  margin-bottom:12px;
  position:relative;
}
.toc__head::after{
  /* Hairline rule beneath the header, fades at edges */
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(201,169,110,.55) 0%,
    rgba(201,169,110,.55) 30%,
    rgba(26,22,18,.12) 30%,
    rgba(26,22,18,.12) 100%);
}
.toc__edition{
  font-size:9px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
}
.toc__label{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:22px;
  letter-spacing:-.015em;
  color:var(--ink);
  font-variation-settings:"opsz" 24,"WONK" 1,"SOFT" 60;
  line-height:1;
}
.toc__label::before{
  /* Small gold diamond beside "Inhalt" */
  content:'';
  width:5px; height:5px;
  background:#c9a96e;
  transform:rotate(45deg);
  flex-shrink:0;
  align-self:center;
  box-shadow:0 0 0 1px rgba(255,235,200,.15);
}
/* List with a subtle vertical hairline running down the left margin */
.toc__list{
  list-style:none;
  margin:0;
  padding:0 0 0 14px;
  display:flex;
  flex-direction:column;
  gap:3px;
  position:relative;
}
.toc__list::before{
  /* Vertical typeset rule on the left */
  content:'';
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(26,22,18,.16) 8%,
    rgba(26,22,18,.16) 92%,
    transparent 100%);
}
.toc__item{ position:relative; }
.toc__item a{
  pointer-events:auto;
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:baseline;
  gap:10px;
  padding:6px 0 6px 0;
  text-decoration:none;
  color:var(--ink-mute);
  transition:color .3s var(--ease), transform .35s var(--ease);
}
.toc__item a:hover{
  color:var(--ink);
  transform:translateX(2px);
}
.toc__num{
  font-size:9px;
  letter-spacing:.22em;
  font-weight:600;
  color:inherit;
  opacity:.7;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.toc__title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:14px;
  letter-spacing:-.005em;
  line-height:1.25;
  color:inherit;
  font-variation-settings:"opsz" 16,"WONK" 1,"SOFT" 60;
}
/* Active chapter — gold diamond marker, bolder title, refined emphasis */
.toc__item.is-current a{
  color:var(--ink);
  transform:translateX(4px);
}
.toc__item.is-current::before{
  /* Small gold diamond marker centered on the vertical rule */
  content:'';
  position:absolute;
  left:-17px; top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:6px; height:6px;
  background:#c9a96e;
  box-shadow:0 0 0 1px rgba(255,235,200,.25);
}
.toc__item.is-current .toc__title{
  font-weight:500;
  font-variation-settings:"opsz" 16,"WONK" 1,"SOFT" 80;
}
.toc__item.is-current .toc__num{
  color:#9a6d3b;
  opacity:1;
}

/* Hide on smaller viewports — would crowd the reading column */
@media (max-width: 1180px){
  .toc{ display:none; }
}

/* Marginalia (Quill, TOC, Pageno) bleiben permanent in ihrer Heimfarbe
   (Ink auf Cream). Auto-Switch entfernt. */

/* Live page number — magazine-style bottom-left page indicator */
.pageno{
  position:fixed;
  bottom:24px;
  left:70px;
  z-index:39;
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:6px 14px 6px 0;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.pageno.is-on{ opacity:1; }
.pageno__label{ color:var(--ink-mute); }
.pageno__num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--rust);
  text-transform:none;
  font-variation-settings:"opsz" 22,"WONK" 1,"SOFT" 60;
  min-width:1.4em;
  text-align:center;
  transition:color .35s var(--ease);
}
.pageno__sep{
  color:var(--ink-mute);
  opacity:.45;
  font-size:13px;
}
.pageno__total{
  font-family:var(--mono);
  color:var(--ink-mute);
  opacity:.85;
}
@media (max-width: 1180px){
  .pageno{ display:none; } /* same breakpoint as TOC */
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE: content-visibility on off-screen sections
   Browser skips layout/paint for these until they near the viewport.
   Explicit allow-list — broad selectors caused subpixel render artefacts
   on rotated/transformed children (postcard form looked blurry).
   ═══════════════════════════════════════════════════════════════ */
.trust, .cs, .off, .abt, .blg, .ftr{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px;
}
/* Explicitly never applied to hero, .lst (services), .ktk (contact form),
   and .atelier — these contain transformed elements or live iframes. */

/* Handwriting SVG — filter on parent (1 pass) instead of per-path (N passes) */
.plak__desc svg{
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0.5px 0.6px rgba(15,8,3,.45));
}

/* Archive stamp — drops onto the plak between texts */
.plak__stamp{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%) scale(2.8) rotate(-22deg);
  width:118px; height:118px;
  pointer-events:none;
  opacity:0;
  z-index:6;
  color:#d4a574;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.5))
    drop-shadow(0 6px 16px rgba(0,0,0,.45));
  will-change:transform, opacity;
}
.plak__stamp svg{
  display:block;
  overflow:visible;
}

/* The body container animates as a whole during page transitions */
.plak__body{
  will-change:transform, opacity;
}

/* Fountain-pen — JS controls transform every frame for smooth lerp */
.plak__pen{
  position:absolute;
  top:0; left:0;
  width:44px; height:44px;
  pointer-events:none;
  opacity:0;
  z-index:5;
  /* Layered drop-shadow for "page contact" depth */
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.55))
    drop-shadow(0 3px 5px rgba(0,0,0,.35))
    drop-shadow(0 6px 14px rgba(0,0,0,.18));
  will-change:transform, opacity;
  transform-origin:0 0;
}
.plak__pen svg{
  display:block;
  overflow:visible;
}

/* Original italic desc fades out during handwriting, fades back on completion */
.plak__desc{
  transition:opacity .55s var(--ease);
}

@media (max-width:520px){
  .plak__stats{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .plak__stats > div:nth-child(2){ border-right:none; }
  .plak__stats > div{ padding:6px; border-bottom:1px solid rgba(232,217,184,.12); }
}

/* ════════════════════════════════════════════════════════
   AUFTRAGSBUCH — Notebook excerpt right of USPs
   Animated strikethroughs + pulsing "frei" highlight.
   ════════════════════════════════════════════════════════ */
.hero__usps-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;
  margin:32px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--line-soft);
  position:relative;
  z-index:1;
}
.hero__usps-row .hero__usps{
  margin:0;
  padding:0;
  border-top:none;
  flex:1 1 auto;
}

.hero__book{
  flex:0 0 auto;
  width:240px;
  max-width:100%;
  padding:14px 16px 12px 18px;
  background:
    /* ruled lines */
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(184,66,31,.07) 23px 24px),
    linear-gradient(180deg, #fbf5e3 0%, #f3eacd 100%);
  background-position:0 14px;
  border:1px solid rgba(26,22,18,.16);
  border-left:2px solid var(--rust);
  border-radius:1px;
  position:relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 8px 18px -10px rgba(40,28,16,.2),
    0 2px 6px -2px rgba(40,28,16,.08);
  transform:rotate(-.6deg);
}
/* Spiral binding holes on left edge */
.hero__book::before{
  content:'';
  position:absolute;
  top:10px; bottom:10px;
  left:-3px;
  width:4px;
  background-image:radial-gradient(circle, rgba(26,22,18,.55) 1.4px, transparent 1.6px);
  background-size:4px 14px;
  background-repeat:repeat-y;
  opacity:.6;
}

.book__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding-bottom:8px;
  margin-bottom:6px;
  border-bottom:1px dashed rgba(26,22,18,.25);
}
.book__cap{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  font-weight:500;
  color:var(--ink);
  font-variation-settings:"opsz" 14,"WONK" 1,"SOFT" 60;
  letter-spacing:-.005em;
}
.book__sub{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

.book__lines{
  list-style:none;
  margin:0; padding:0;
}
.book__line{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:6px;
  padding:5px 0;
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--ink);
  position:relative;
}
.book__month{
  font-style:italic;
  font-variation-settings:"opsz" 14;
  color:var(--ink-soft);
  letter-spacing:-.005em;
}
.book__dots{
  display:block;
  height:1px;
  background-image:radial-gradient(circle, rgba(26,22,18,.35) .9px, transparent 1.1px);
  background-size:5px 1px;
  background-repeat:repeat-x;
  background-position:0 50%;
  align-self:center;
  margin:0 4px;
  position:relative;
  top:2px;
}
.book__status{
  position:relative;
  font-family:var(--serif);
  font-style:italic;
  font-size:.9rem;
  color:var(--ink-soft);
  white-space:nowrap;
  font-variation-settings:"opsz" 14,"SOFT" 60;
}
.book__status b{ font-weight:500; }

/* Strike line for "vergeben" — animated by JS */
.book__strike{
  position:absolute;
  left:-2px; right:-2px;
  top:55%;
  height:2px;
  background:var(--rust);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(184,66,31,.3));
}
.book__line[data-state="taken"] .book__status{ color:var(--ink-mute); }

/* Hot line — Mai */
.book__line--hot .book__month{ color:var(--ink); font-weight:500; }
.book__line--hot .book__status{
  color:var(--rust);
  font-weight:600;
  background:linear-gradient(180deg, transparent 60%, rgba(184,66,31,.18) 60%, rgba(184,66,31,.18) 92%, transparent 92%);
  padding:0 4px;
  background-size:100% 100%;
  background-position:0 0;
}
.book__line--hot .book__status b{ font-weight:600; }
/* Pulsing dot before Mai number */
.book__pulse{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--rust);
  margin-left:6px;
  vertical-align:middle;
  animation:bookPulse 1.6s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(184,66,31,.5);
}
@keyframes bookPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(184,66,31,.5); transform:scale(1); }
  50%    { box-shadow:0 0 0 6px rgba(184,66,31,0); transform:scale(1.15); }
}

.book__foot{
  margin-top:8px;
  padding-top:6px;
  border-top:1px dashed rgba(26,22,18,.18);
  text-align:right;
}
.book__foot-mono{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* Responsive */
@media (max-width:880px){
  .hero__book{
    width:100%;
    transform:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .book__pulse{ animation:none; }
  .book__strike{ transform:scaleX(1) !important; }
}

/* ════════════════════════════════════════════════════════
   ATELIER-FRAME — Pre-Glow on Index hover (3D-tilt removed)
   ════════════════════════════════════════════════════════ */
/* Pre-glow when hovering an exhibit thumbnail */
.atelier__wall{ position:relative; }
.atelier__main::after{
  content:'';
  position:absolute;
  inset:-20px;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(184,66,31,.18), transparent 70%);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
  z-index:-1;
  border-radius:8px;
  filter:blur(20px);
}
.atelier__wall.is-pre-glow .atelier__main::after{ opacity:1; }

/* ════════════════════════════════════════════════════════
   SONDERANGEBOT — Quittungs-Aesthetic
   Receipt with perforated edges, mono items,
   counter & rubber-stamp drop on view.
   ════════════════════════════════════════════════════════ */

.off--receipt{
  position:relative;
  padding:clamp(80px,9vw,140px) 0 clamp(80px,9vw,140px);
  background:
    radial-gradient(ellipse 1000px 700px at 50% 30%, rgba(184,66,31,.04), transparent 60%),
    var(--paper);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.off--receipt::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(26,22,18,.022) 39px 40px);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 90%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 90%);
}

.receipt{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:0 0 0 0;
  background:
    /* faint grid lines like accountancy paper */
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(26,22,18,.04) 27px 28px),
    linear-gradient(180deg, #fbf5e3 0%, #f3eacd 100%);
  box-shadow:
    0 30px 60px -28px rgba(40,28,16,.35),
    0 8px 20px -8px rgba(40,28,16,.18),
    0 1px 0 rgba(255,255,255,.6) inset;
  border-left:1px solid rgba(26,22,18,.08);
  border-right:1px solid rgba(26,22,18,.08);
}

/* Perforated edges — zigzag clip with subtle holes overlay */
.receipt__perf{
  display:block;
  height:14px;
  background:
    radial-gradient(circle at 8px 0, var(--paper) 2.5px, transparent 3px) 0 0/16px 14px,
    linear-gradient(180deg, #fbf5e3, #fbf5e3);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 100%);
}
.receipt__perf--top{
  -webkit-mask:
    radial-gradient(circle at 7px 14px, transparent 7px, #000 8px) 0 0 / 14px 14px repeat-x;
          mask:
    radial-gradient(circle at 7px 14px, transparent 7px, #000 8px) 0 0 / 14px 14px repeat-x;
}
.receipt__perf--bot{
  -webkit-mask:
    radial-gradient(circle at 7px 0, transparent 7px, #000 8px) 0 0 / 14px 14px repeat-x;
          mask:
    radial-gradient(circle at 7px 0, transparent 7px, #000 8px) 0 0 / 14px 14px repeat-x;
}

/* Inner padding container — applied to direct children */
.receipt > header,
.receipt > .receipt__col-head,
.receipt > .receipt__items,
.receipt > .receipt__sub,
.receipt > .receipt__total,
.receipt > .receipt__action,
.receipt > .receipt__foot{
  padding-left:clamp(28px,6vw,56px);
  padding-right:clamp(28px,6vw,56px);
}

/* Header */
.receipt__head{
  padding-top:24px;
  padding-bottom:18px;
  border-bottom:1.5px dashed rgba(26,22,18,.32);
}
.receipt__head-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.receipt__brand{ color:var(--ink); font-weight:600; }
.receipt__no   { color:var(--rust); font-weight:600; }
.receipt__doc-title{
  margin-top:18px;
  font-family:var(--serif);
  font-size:clamp(1.2rem,2vw,1.55rem);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.01em;
}
.receipt__doc-title em{
  font-style:italic;
  color:var(--rust);
  font-variation-settings:"WONK" 1,"SOFT" 60;
}

/* Column header */
.receipt__col-head{
  padding-top:12px;
  padding-bottom:8px;
  display:grid;
  grid-template-columns:48px 1fr 60px;
  gap:14px;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-bottom:1px solid var(--line-soft);
}
.receipt__col-head span:last-child{ text-align:right; }

/* Items */
.receipt__items{
  list-style:none;
  margin:0;
  padding-top:14px;
  padding-bottom:18px;
}
.receipt__items li{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:14px;
  align-items:baseline;
  padding:9px 0;
  font-size:.95rem;
  border-bottom:1px dotted rgba(26,22,18,.18);
  opacity:0;
  transform:translateY(8px);
}
.receipt__items li:last-child{ border-bottom:none; }
.r-pos{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink-mute);
  letter-spacing:.05em;
}
.r-desc{
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.4;
  color:var(--ink);
  font-variation-settings:"opsz" 14;
  position:relative;
}
.r-inkl{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#2a8c4a;
  white-space:nowrap;
  font-weight:600;
  position:relative;
  padding-left:18px;
}
.r-inkl::before{
  content:'✓';
  position:absolute;
  left:0;
  font-size:.85rem;
  color:#2a8c4a;
  top:50%;
  transform:translateY(-52%);
}

/* Subtotal block */
.receipt__sub{
  padding-top:14px;
  padding-bottom:14px;
  border-top:1.5px dashed rgba(26,22,18,.32);
}
.receipt__sub-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--mono);
  font-size:.88rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  padding:5px 0;
}
.receipt__sub-row .r-amt{
  font-variant-numeric:tabular-nums;
  font-weight:500;
  color:var(--ink);
}
.receipt__sub-row--neg .r-amt{ color:var(--rust); font-weight:600; }

/* Total + Stamp */
.receipt__total{
  position:relative;
  padding-top:24px;
  padding-bottom:24px;
  border-top:1.5px solid var(--ink);
  border-bottom:3px double var(--ink);
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
}
.receipt__total-label{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  color:var(--ink);
  font-variation-settings:"opsz" 18,"WONK" 1,"SOFT" 70;
  margin-bottom:4px;
}
.receipt__total-cap{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.receipt__total-r{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.receipt__was{
  font-family:var(--mono);
  font-size:.95rem;
  color:var(--ink-mute);
}
.receipt__was s{ text-decoration:line-through; text-decoration-color:var(--rust); text-decoration-thickness:2px; }
.receipt__now{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-family:var(--serif);
  color:var(--ink);
  font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 50;
  letter-spacing:-.03em;
  line-height:1;
}
.r-counter{
  font-size:clamp(3.4rem,7vw,5.2rem);
  font-weight:600;
  font-style:italic;
  color:var(--rust);
  font-variant-numeric:tabular-nums;
  display:inline-block;
  min-width:3.2ch;
  text-align:right;
}
.receipt__now i{
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-style:italic;
  font-weight:400;
  color:var(--ink);
}

/* The stamp */
.receipt__stamp{
  position:absolute;
  top:-30px;
  right:clamp(28px,6vw,56px);
  width:clamp(120px,14vw,170px);
  height:clamp(120px,14vw,170px);
  color:var(--rust);
  pointer-events:none;
  opacity:0;
  transform:scale(2.6) rotate(-32deg);
  filter:drop-shadow(0 4px 8px rgba(184,66,31,.15));
  z-index:5;
}
.receipt__stamp svg{
  width:100%; height:100%;
  /* slight ink-irregular feel via filter */
  filter:url(#none) saturate(.95);
  mix-blend-mode:multiply;
}

/* Action area */
.receipt__action{
  padding-top:28px;
  padding-bottom:8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.receipt__legal{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--ink-mute);
}
.receipt__legal a{ color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--line-soft); }

/* Footer / signature */
.receipt__foot{
  padding-top:20px;
  padding-bottom:24px;
  border-top:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.receipt__sig{
  display:flex;
  align-items:center;
  gap:10px;
}
.receipt__sig-cap{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.receipt__sig-mark{
  width:90px;
  height:28px;
  color:var(--ink);
}
.receipt__sig-name{
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  color:var(--ink-soft);
}
.receipt__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-family:var(--serif);
  font-style:italic;
  font-size:.85rem;
  color:var(--ink-mute);
  text-align:right;
}
.receipt__meta-mono{
  font-family:var(--mono);
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.16em;
  color:var(--ink-mute);
  text-transform:uppercase;
}

/* Responsive */
@media (max-width:680px){
  .receipt__col-head,
  .receipt__items li{ grid-template-columns:36px 1fr auto; gap:10px; }
  .r-desc{ font-size:.92rem; }
  .receipt__total{ grid-template-columns:1fr; }
  .receipt__total-r{ align-items:flex-start; }
  .receipt__stamp{
    top:auto; right:clamp(20px,5vw,30px);
    width:110px; height:110px;
    transform:scale(2.6) rotate(-22deg);
  }
}

/* Reduced motion: show final state */
@media (prefers-reduced-motion:reduce){
  .receipt__items li{ opacity:1; transform:none; }
  .receipt__stamp{ opacity:.92; transform:rotate(-9deg); }
  #receiptSigPath{ stroke-dashoffset:0; }
}

/* ════════════════════════════════════════════════════════
   (legacy) SETZKASTEN — disabled, replaced by hero polish
   ════════════════════════════════════════════════════════ */

.setz{
  position:relative;
  padding:clamp(80px,10vw,140px) 0;
  background:
    radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(184,66,31,.05), transparent 60%),
    var(--paper);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.setz::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(26,22,18,.025) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(26,22,18,.025) 39px 40px);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
}
.setz__container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
}
.setz__head{
  max-width:760px;
  margin-bottom:clamp(48px,6vw,80px);
}
.setz__title{
  margin-top:14px;
  font-size:clamp(2.4rem,5.4vw,4.6rem);
  line-height:.96;
  letter-spacing:-.025em;
}
.setz__title em{
  font-style:italic;
  color:var(--rust);
  font-variation-settings:"WONK" 1,"SOFT" 60;
}
.setz__lede{
  margin-top:24px;
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:62ch;
}
.setz__lede-em{
  display:block;
  margin-top:6px;
  font-style:italic;
  color:var(--ink);
}
.setz__stage{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:clamp(28px,3vw,52px);
  align-items:start;
}

/* ── Wooden case ── */
.setz__case{
  --cell:clamp(54px,6.6vw,82px);
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  background:
    linear-gradient(135deg, #5a3a1f 0%, #6b452a 25%, #563618 60%, #3f2811 100%);
  padding:18px;
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,170,.08),
    inset 0 2px 8px rgba(0,0,0,.5),
    inset 0 -2px 8px rgba(0,0,0,.6),
    0 22px 48px -16px rgba(40,20,8,.55),
    0 6px 16px -8px rgba(40,20,8,.4);
  position:relative;
}
.setz__case::before{
  content:'';
  position:absolute;inset:18px;
  border-radius:2px;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(91deg,
      transparent 0 6px,
      rgba(0,0,0,.06) 6px 7px,
      transparent 7px 14px,
      rgba(255,200,140,.04) 14px 15px),
    repeating-linear-gradient(89deg,
      transparent 0 23px,
      rgba(0,0,0,.05) 23px 24px);
  mix-blend-mode:overlay;
  z-index:1;
}
.setz__cell{
  position:relative;
  z-index:2;
  aspect-ratio:1/1.15;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,235,200,.04), transparent 70%),
    linear-gradient(180deg, #2a1a0c 0%, #3a2614 60%, #1f130a 100%);
  border:1px solid rgba(0,0,0,.6);
  box-shadow:
    inset 1px 1px 2px rgba(255,200,140,.08),
    inset -1px -1px 3px rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  cursor:grab;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.setz__cell:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 1px 1px 2px rgba(255,200,140,.12),
    inset -1px -1px 3px rgba(0,0,0,.55),
    0 6px 14px -4px rgba(0,0,0,.6);
}
.setz__cell:active{ cursor:grabbing; transform:translateY(0) scale(.97); }
.setz__cell:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:2px;
  z-index:3;
}
.setz__cell.is-empty{
  cursor:default;
  background:linear-gradient(180deg, #1a0f06 0%, #261810 100%);
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.7),
    inset -1px -1px 2px rgba(255,200,140,.04);
}
.setz__cell.is-empty:hover{ transform:none; }
.setz__type{
  font-family:var(--serif);
  font-weight:500;
  font-size:calc(var(--cell) * .55);
  line-height:1;
  color:#f4e8d0;
  text-shadow:
    0 1px 0 rgba(0,0,0,.7),
    0 0 12px rgba(255,210,160,.12);
  font-variation-settings:"opsz" 60, "SOFT" 30;
  user-select:none;
  transform:translateY(-2%);
  letter-spacing:.01em;
}
.setz__type.is-orn{
  color:#d4a574;
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
}
.setz__cell::after{
  content:attr(data-pt);
  position:absolute;
  bottom:3px;right:5px;
  font-family:var(--mono);
  font-size:7px;
  color:rgba(255,210,160,.35);
  letter-spacing:.05em;
}

/* ── Composer / Setting stick ── */
.setz__composer{
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  background:linear-gradient(180deg, #faf3e0 0%, #f3e9cd 100%);
  border:1px solid var(--line-soft);
  border-radius:2px;
  padding:24px 22px 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 22px 40px -20px rgba(40,28,16,.25),
    0 4px 10px -4px rgba(40,28,16,.12);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.composer__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--line-soft);
}
.composer__label{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:var(--ink);
}
.composer__count{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.composer__count #setzCount{ color:var(--ink); font-weight:500; }
.composer__rail{
  min-height:96px;
  padding:18px 14px 14px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 23px,
      rgba(184,66,31,.06) 23px 24px),
    linear-gradient(180deg, #fffaee 0%, #f5ead0 100%);
  background-position:0 -1px;
  border:1px solid rgba(26,22,18,.22);
  border-radius:1px;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:2px;
  font-family:var(--serif);
  font-size:2.2rem;
  line-height:1;
  color:var(--ink);
  cursor:text;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.composer__rail:empty::before{
  content:attr(data-empty);
  font-style:italic;
  font-size:1rem;
  color:var(--ink-mute);
  opacity:.5;
  letter-spacing:.02em;
}
.composer__rail.is-target{
  border-color:var(--rust);
  background:
    repeating-linear-gradient(0deg,
      transparent 0 23px,
      rgba(184,66,31,.1) 23px 24px),
    linear-gradient(180deg, #fff5e0 0%, #fae6c0 100%);
}
.composer__letter{
  display:inline-block;
  font-family:var(--serif);
  font-weight:500;
  font-variation-settings:"opsz" 144, "SOFT" 40;
  letter-spacing:-.005em;
  cursor:pointer;
  position:relative;
  animation:setzDrop .42s var(--ease) backwards;
  transform-origin:50% 100%;
}
.composer__letter.is-orn{
  color:var(--rust);
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 90, "WONK" 1;
}
.composer__letter:hover{ color:var(--rust); }
.composer__letter::after{
  content:'';
  position:absolute;
  left:50%;bottom:-2px;
  width:60%;height:3px;
  background:radial-gradient(ellipse, rgba(26,22,18,.18), transparent 70%);
  transform:translateX(-50%);
  pointer-events:none;
}
.composer__letter.is-removing{
  animation:setzLift .25s var(--ease) forwards;
}
@keyframes setzDrop{
  0%  { transform:translateY(-18px) rotate(-3deg); opacity:0; filter:blur(2px); }
  60% { transform:translateY(2px) rotate(.5deg); opacity:1; filter:blur(0); }
  100%{ transform:translateY(0) rotate(0); opacity:1; }
}
@keyframes setzLift{
  to{ transform:translateY(-12px) scale(.85); opacity:0; filter:blur(1px); }
}
.composer__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:4px;
}
.composer__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.composer__dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--ink-mute);
  box-shadow:0 0 0 0 transparent;
  transition:background .25s, box-shadow .25s;
}
.composer__status[data-state="setting"] .composer__dot{
  background:var(--rust);
  animation:setzPulse 1.4s ease-in-out infinite;
}
.composer__status[data-state="setting"] .composer__statetext{ color:var(--rust); }
.composer__status[data-state="printed"] .composer__dot{ background:#2a8c4a; }
.composer__status[data-state="printed"] .composer__statetext{ color:#2a8c4a; }
@keyframes setzPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(184,66,31,.5); }
  50%    { box-shadow:0 0 0 6px rgba(184,66,31,0); }
}
.composer__clear{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--line-soft);
  padding:6px 10px;
  border-radius:1px;
  transition:border-color .2s, color .2s, background .2s;
}
.composer__clear:hover{
  color:var(--rust);
  border-color:var(--rust);
  background:var(--rust-glow);
}
.composer__clear:disabled{ opacity:.4; cursor:not-allowed; }
.composer__hint{
  font-size:.78rem;
  color:var(--ink-mute);
  line-height:1.5;
  margin-top:2px;
}
.composer__hint .mono{
  font-family:var(--mono);
  font-size:.7rem;
  background:var(--paper-deep);
  padding:1px 6px;
  border-radius:2px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.setz__foot{
  margin-top:clamp(36px,4vw,56px);
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.setz__foot i{
  font-style:italic;
  font-family:var(--serif);
  text-transform:none;
  letter-spacing:0;
  color:var(--ink-soft);
  margin-right:4px;
  font-size:.85rem;
}
.setz__foot-sep{ opacity:.4; }

@media (max-width:880px){
  .setz__stage{ grid-template-columns:1fr; }
  .setz__composer{ position:static; }
  .setz__case{ grid-template-columns:repeat(6, 1fr); }
}
@media (max-width:520px){
  .setz__case{ grid-template-columns:repeat(5, 1fr); padding:12px; }
  .composer__rail{ font-size:1.8rem; min-height:80px; }
}
@media (prefers-reduced-motion:reduce){
  .composer__letter,
  .composer__letter.is-removing,
  .composer__status[data-state="setting"] .composer__dot{
    animation:none !important;
  }
}