/* ============================================================
   Vitrinenmacher × Scheune Sonnhalde — demo design system
   Rustic-editorial. Fraunces + Hanken Grotesk. Oat / forest / rust.
   ============================================================ */

/* Self-hosted Hanken Grotesk (nDSG: no Google/gstatic request). woff2 subsets
   in ./fonts, sit beside this file, copied into every deployed claim bundle. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* palette */
  --paper:#f3ecdd;        /* warm oat */
  --paper-2:#ece2cd;      /* deeper oat for bands */
  --card:#fbf6ec;         /* near-white card */
  --ink:#241f1a;          /* charcoal-brown text */
  --ink-soft:#5b5042;     /* muted body */
  --forest:#2f3a2b;       /* deep Emmental green */
  --forest-2:#3d4a35;
  --moss:#6a7a4f;         /* secondary green */
  --rust:#bb542b;         /* terracotta accent */
  --rust-deep:#9c4321;
  --wheat:#c8a24a;        /* gold */
  --line:#d8cbae;         /* warm hairline */
  --line-soft:#e3d9c2;

  --maxw:1200px;
  --radius:3px;
  --shadow-sm:0 1px 2px rgba(40,30,15,.06), 0 6px 18px -10px rgba(40,30,15,.18);
  --shadow-lg:0 30px 70px -30px rgba(40,30,15,.45), 0 6px 18px -8px rgba(40,30,15,.18);

  --serif:'Hanken Grotesk',system-ui,-apple-system,sans-serif; /* serif dropped site-wide; alias kept so every var(--serif) ref resolves to the sans face */
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
em,i{font-style:normal}   /* no italics anywhere on the site */

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:480;line-height:1.05;
  margin:0;letter-spacing:-.015em;font-optical-sizing:auto}
.display{font-size:clamp(2.6rem,7vw,5.5rem);font-weight:420;line-height:.98;
  letter-spacing:-.02em}
.display em{font-style:normal;font-weight:380;color:var(--rust)}
h2.head{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:440}
h3{font-size:1.45rem;font-weight:500;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:1.22rem;color:var(--ink-soft);line-height:1.55}

.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--rust);
  display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--rust);display:inline-block}
.eyebrow.center::before{display:none}

.serif{font-family:var(--serif)}
.muted{color:var(--ink-soft)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:clamp(64px,9vw,128px) 0}
.band{background:var(--paper-2)}
.band-forest{background:var(--forest);color:#f0ead9}
.band-forest .eyebrow{color:var(--wheat)}
.band-forest .eyebrow::before{background:var(--wheat)}
.band-forest .muted{color:#c4bfa9}
.center{text-align:center}
.center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.96rem;letter-spacing:.01em;
  padding:.92em 1.5em;border-radius:var(--radius);border:1.5px solid transparent;
  transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  text-align:center;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--rust);color:#fff7ee;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--rust-deep)}
.btn-dark{background:var(--forest);color:#f0ead9}
.btn-dark:hover{background:#222b1f}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:#f0ead9;color:var(--forest)}
.btn-light:hover{background:#fff}
.btn-lg{padding:1.05em 1.9em;font-size:1.02rem}
.btn-block{width:100%;justify-content:center}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- photo treatment (cohesive warm grade) ---------- */
.ph{position:relative;overflow:hidden;background:var(--forest-2)}
.ph img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.04) brightness(1.02) sepia(.1);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(47,58,43,.05),rgba(70,40,20,.16));
  mix-blend-mode:multiply}
.ph.zoom:hover img{transform:scale(1.05)}

/* ============================================================
   SITE HEADER / NAV (venue site)
   ============================================================ */
.preview-strip{position:relative;z-index:30;background:var(--forest);
  color:#e9e2cf;font-size:.8rem;letter-spacing:.02em}
.preview-strip .wrap{display:flex;align-items:center;gap:14px;
  padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.preview-strip .dot{width:7px;height:7px;border-radius:50%;background:var(--wheat);
  box-shadow:0 0 0 3px rgba(200,162,74,.25);flex:none}
.preview-strip strong{color:#fff;font-weight:700}
.preview-strip .ps-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.5em;
  color:var(--wheat);font-weight:700}
.preview-strip .ps-cta:hover{text-decoration:underline}

.site-header{position:sticky;top:0;z-index:25;background:rgba(243,236,221,.82);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line-soft)}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:74px}
.brand{font-family:var(--serif);font-weight:500;font-size:1.32rem;letter-spacing:-.01em;
  line-height:1;display:flex;flex-direction:column}
.brand small{font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--rust);font-weight:700;margin-top:3px}
.site-nav{display:flex;gap:26px;margin-left:auto;font-size:.92rem;font-weight:500}
.site-nav a{padding:6px 0;position:relative;color:var(--ink-soft)}
.site-nav a:hover{color:var(--ink)}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--rust);transition:width .25s ease}
.site-nav a:hover::after{width:100%}
.site-header .btn{padding:.62em 1.1em;font-size:.86rem}
.nav-tog{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:1.5rem;color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  color:#f6f0e2;overflow:hidden}
.hero .ph{position:absolute;inset:0;z-index:0}
.hero .ph img{filter:saturate(.92) contrast(1.05) brightness(.92) sepia(.12)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,16,10,.28) 0%,rgba(20,16,10,.05) 38%,rgba(25,18,10,.72) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(48px,7vw,96px);padding-top:120px}
.hero .eyebrow{color:#f0d99a}
.hero .eyebrow::before{background:#f0d99a}
.hero .display{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .lead{color:#efe7d6;max-width:46ch;margin-top:1.2rem}
.hero-cta{display:flex;gap:14px;margin-top:2rem;flex-wrap:wrap}
/* Docked to the TOP-right of the hero so the venue stats and the fixed
   collapsed claim overlay (bottom-right) never share a corner — the overlay
   used to cut through the '180' / 'bis 250' numbers. Top-right sits in the
   lighter part of the gradient and stays clear of the overlay at every height. */
.hero-meta{position:absolute;right:28px;top:clamp(96px,12vw,128px);z-index:2;
  text-align:right;font-size:.82rem;letter-spacing:.04em;color:#f3ecdc;display:grid;gap:.5rem;
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero-meta b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:500;color:#fff;letter-spacing:0;
  text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* ---------- intro split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split-figure{aspect-ratio:4/5;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.split-figure.wide{aspect-ratio:5/4}
.stat-row{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.stat b{font-family:var(--serif);font-size:2.4rem;font-weight:500;display:block;line-height:1;color:var(--forest)}
.stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- spaces ---------- */
.space-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.space-card{background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--line-soft);display:flex;flex-direction:column}
.space-card .ph{aspect-ratio:4/3}
.space-card .sc-body{padding:24px 24px 28px}
.space-card h3{margin-bottom:6px}
.space-card .cap{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rust);font-weight:700;margin-bottom:14px}
.space-card p{font-size:.96rem;color:var(--ink-soft);margin:0}

/* ---------- offering list ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:50px}
.offer{background:var(--paper);padding:38px 30px}
.offer .no{font-family:var(--serif);font-size:1rem;color:var(--rust);font-weight:600}
.offer h3{margin:14px 0 10px}
.offer p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:50px}
.gallery .ph{border-radius:var(--radius)}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
/* Tonal coherence: two source photos read distinctly cooler/more saturated than
   the warm editorial grade used across the page — the crowd/event tile and the
   Emmental aerial. Pull them into the same warm family (slight warm white balance
   via sepia, lifted shadows via brightness, reduced blue punch via saturation).
   Grading-only enhancement of the real photos — no added features (image rule). */
.gallery img[src$="event.jpg"],
img[src$="countryside.jpg"]{
  filter:sepia(.2) saturate(.82) brightness(1.04) contrast(.98) hue-rotate(-6deg)}
/* The wedding-couple tile (ceremony.jpg, the tall top-left cell of the gallery)
   reads bright, cool and high-key with a white/blue cast next to the warm
   golden-hour grade used everywhere else, so the grid looks assembled rather
   than one body of work. Pull it into the same warm family: lift warmth (sepia),
   pull down the blue/white cast (saturation + warm hue-rotate), and drop
   exposure slightly (brightness < 1). Grading-only — no added features. */
.gallery img[src$="ceremony.jpg"]{
  filter:saturate(.86) contrast(1.03) brightness(.96) sepia(.22) hue-rotate(-8deg)}

/* ---------- location ---------- */
.loc-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:40px;box-shadow:var(--shadow-sm)}
.loc-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.loc-row:last-child{border-bottom:0}
.loc-row .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  font-weight:700;width:96px;flex:none;padding-top:3px}

/* ---------- inquiry form ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);margin-bottom:7px}
.input,select.input,textarea.input{width:100%;background:#fffdf8;border:1.5px solid var(--line);
  border-radius:var(--radius);padding:.82em .95em;font-family:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.input:focus{outline:0;border-color:var(--rust);box-shadow:0 0 0 3px rgba(187,84,43,.13)}
textarea.input{resize:vertical;min-height:110px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- site footer ---------- */
.site-footer{background:var(--forest);color:#cfc8b4;padding:70px 0 40px;font-size:.92rem}
.site-footer a{color:#cfc8b4}.site-footer a:hover{color:#fff}
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
.sf-brand{font-family:var(--serif);font-size:1.4rem;color:#f3ecda}
.sf-col h5{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wheat);
  margin:0 0 16px;font-family:var(--sans);font-weight:700}
.sf-col a,.sf-col p{display:block;margin-bottom:9px}
.sf-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#a59e8a}

/* ============================================================
   VITRINENMACHER — service layer (claim / checkout / done)
   ============================================================ */
.ew-header{position:sticky;top:0;z-index:25;background:rgba(243,236,221,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.ew-header .wrap{display:flex;align-items:center;gap:18px;height:68px}
.ew-logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);
  font-size:1.28rem;font-weight:520;letter-spacing:-.01em}
.ew-mark{width:30px;height:30px;flex:none}
.ew-header .tag{font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);
  border-left:1px solid var(--line);padding-left:18px}
.ew-header .right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:.86rem}
.ew-header .secure{display:inline-flex;align-items:center;gap:.5em;color:var(--moss);font-weight:600}

/* claim hero */
.claim-hero{padding:clamp(54px,7vw,96px) 0 clamp(40px,5vw,70px)}
.claim-hero .grid{display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(36px,5vw,72px);align-items:center}
.claim-hero .display{font-size:clamp(2.3rem,5vw,4.1rem)}
.tagpill{display:inline-flex;align-items:center;gap:.5em;background:rgba(106,122,79,.14);
  color:var(--forest);border:1px solid rgba(106,122,79,.3);padding:.45em .9em;border-radius:100px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;margin-bottom:22px}
.tagpill .dot{width:7px;height:7px;border-radius:50%;background:var(--moss)}

/* browser mock holding live preview */
.browser{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);background:#fff;transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transition:transform .5s ease}
.browser:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#e7ddc7;
  border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#c9b88f;display:block}
.browser-url{margin-left:12px;background:#fbf6ec;border-radius:100px;font-size:.74rem;
  padding:5px 14px;color:var(--ink-soft);flex:1;display:flex;align-items:center;gap:7px}
.browser-url svg{flex:none}
.browser-view{position:relative;aspect-ratio:16/10.4;overflow:hidden;background:var(--paper)}
/* PROVEN APPROACH (matches the checkout order-summary thumbnail + the Vorher/
   Nachher tiles): render the built site as a STATIC screenshot <img>, not a
   live transform-scaled iframe. transform:scale failed to paint on the claim
   mobile iframe three rounds running; a plain object-fit image renders
   identically on every viewport, desktop and phone. The browser chrome above
   it + the "Live öffnen" hover overlay keep the live-preview feel, and the
   whole frame is a link to index.html for the real thing. */
.browser-view .browser-shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;display:block}
.browser-view .open-ov{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:18px;background:linear-gradient(180deg,transparent 60%,rgba(20,15,8,.4));
  opacity:0;transition:opacity .3s}
.browser-view:hover .open-ov{opacity:1}

/* generic content cards */
.surface{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.feat-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:.55em;background:var(--card);
  border:1px solid var(--line);border-radius:100px;padding:.55em 1em;font-size:.85rem;font-weight:600}
.chip svg{color:var(--moss);flex:none}

/* swap before/after */
.swap{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:54px;align-items:stretch}
.swap-col{display:flex;flex-direction:column}
.swap-label{display:flex;align-items:center;gap:.6em;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;margin-bottom:14px}
.swap-label.old{color:#9a8e77}.swap-label.new{color:var(--rust)}
.oldsite{border:1px solid #cfc3a8;border-radius:var(--radius);overflow:hidden;flex:1;
  background:#fff;font-family:var(--sans);filter:saturate(.7)}
.oldsite-top{background:#1f5fa8;color:#fff;padding:12px 16px;font-size:1.2rem;font-weight:bold;
  border-bottom:3px solid #ffcc00}
.oldsite-nav{background:#dfe6ee;padding:6px 16px;font-size:.72rem;color:#1f5fa8;border-bottom:1px solid #bcc}
.oldsite-body{padding:18px 16px;font-size:.82rem;color:#333}
.oldsite-body marquee{color:#cc0000;font-weight:bold;margin-bottom:10px}
.oldsite-body .ob-img{background:repeating-linear-gradient(45deg,#e7e0cf,#e7e0cf 9px,#ddd5c0 9px,#ddd5c0 18px);
  height:80px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;
  color:#998;font-size:.7rem;margin:10px 0}
.oldsite-body hr{border:0;border-top:1px dashed #bbb}
.oldsite-body a{color:#1f5fa8;text-decoration:underline}
.newsite-shot{flex:1;border-radius:var(--radius);box-shadow:var(--shadow-sm);min-height:240px}

/* faq / disarm */
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 4px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;font-family:var(--serif);font-size:1.2rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--sans);font-size:1.5rem;color:var(--rust);transition:transform .2s;flex:none}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 4px 24px;color:var(--ink-soft);max-width:62ch}

/* sender / founder card */
.sender{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm)}
.monogram{width:72px;height:72px;border-radius:50%;background:var(--forest);color:var(--wheat);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.7rem;font-weight:600;flex:none}
.sig{font-family:var(--sans);font-style:normal;font-size:1.5rem;color:var(--forest);margin-top:6px}

/* platform-tax compare */
.tax{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:46px}
.tax-card{border-radius:var(--radius);padding:32px;display:flex;flex-direction:column}
.tax-old{background:#efe6d2;border:1px solid var(--line)}
.tax-new{background:var(--forest);color:#eee6d2}
.tax-card .amt{font-family:var(--serif);font-size:2.8rem;font-weight:500;line-height:1;margin:10px 0 4px}
.tax-old .amt{color:var(--rust-deep)}.tax-new .amt{color:#fff}
.tax-card ul{list-style:none;padding:0;margin:16px 0 0;font-size:.92rem}
.tax-card li{padding:7px 0;display:flex;gap:.6em;align-items:flex-start}
.tax-mid{display:grid;place-items:center;font-family:var(--serif);font-style:normal;
  color:var(--ink-soft);font-size:1.2rem}
.tax-new .muted{color:#bdb79f}

/* ============================================================
   CHECKOUT
   ============================================================ */
.co-wrap{max-width:1140px;margin:0 auto;padding:36px 28px 90px}
.co-grid{display:grid;grid-template-columns:1fr 372px;gap:44px;align-items:start}
.stepper{display:flex;gap:8px;margin-bottom:34px;flex-wrap:wrap}
.stepper .st{display:flex;align-items:center;gap:.6em;font-size:.82rem;font-weight:600;
  color:var(--ink-soft);padding:.5em .9em;border-radius:100px;border:1px solid transparent}
.stepper .st .n{width:22px;height:22px;border-radius:50%;background:#e2d7bd;color:var(--ink-soft);
  display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:none}
.stepper .st.active{color:var(--ink);background:var(--card);border-color:var(--line)}
.stepper .st.active .n{background:var(--rust);color:#fff}
.stepper .st.done .n{background:var(--moss);color:#fff}

.co-step{display:none;animation:fade .35s ease}
.co-step.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.co-step h2{font-size:1.9rem;margin-bottom:6px}
.co-step .sub{color:var(--ink-soft);margin-bottom:26px}

/* plan cards */
.toggle{display:inline-flex;background:#e7ddc7;border-radius:100px;padding:4px;margin-bottom:24px;font-size:.86rem}
.toggle button{border:0;background:none;padding:.55em 1.2em;border-radius:100px;cursor:pointer;
  font-weight:600;color:var(--ink-soft)}
.toggle button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.toggle .save{color:var(--rust);font-weight:700}

.plans{display:grid;gap:14px}
.plan{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.plan:hover{border-color:var(--moss)}
.plan.sel{border-color:var(--rust);box-shadow:0 0 0 3px rgba(187,84,43,.13)}
.plan .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;transition:border-color .2s;margin-top:2px}
.plan.sel .radio{border-color:var(--rust)}
.plan.sel .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--rust)}
.plan h3{font-size:1.3rem;display:flex;align-items:center;gap:.5em}
.plan .pdesc{font-size:.9rem;color:var(--ink-soft);margin-top:3px}
.plan .price{text-align:right;font-family:var(--serif);white-space:nowrap}
.plan .price b{font-size:1.7rem;font-weight:560;display:block;line-height:1;white-space:nowrap}
.plan .price span{font-size:.76rem;color:var(--ink-soft);font-family:var(--sans);letter-spacing:.04em}
.star{background:var(--wheat);color:#3a2c08;font-family:var(--sans);font-size:.64rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;border-radius:100px}
.plan .feats{grid-column:1/-1;margin-top:6px;font-size:.86rem;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:8px 18px;padding-left:40px}
.plan .feats span{display:inline-flex;align-items:center;gap:.4em}

/* extras / addons */
.addons{display:grid;gap:12px}
.addon{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  cursor:pointer;transition:border-color .2s,background .2s}
.addon:hover{border-color:var(--moss)}
.addon.on{border-color:var(--rust);background:#fbf3e8}
.addon.inc{cursor:default;opacity:.92;background:#eef0e6;border-color:var(--line-soft)}
.check{width:24px;height:24px;border-radius:6px;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;color:#fff;transition:.2s}
.addon.on .check{background:var(--rust);border-color:var(--rust)}
.addon.inc .check{background:var(--moss);border-color:var(--moss)}
.addon .check svg{opacity:0;transition:.15s}
.addon.on .check svg,.addon.inc .check svg{opacity:1}
.addon h4{font-family:var(--sans);font-size:1rem;font-weight:700;margin:0}
.addon p{font-size:.86rem;color:var(--ink-soft);margin:3px 0 0}
.addon .ap{font-family:var(--serif);font-weight:560;font-size:1.05rem;white-space:nowrap;text-align:right}
.addon .ap small{display:block;font-family:var(--sans);font-size:.7rem;color:var(--moss);font-weight:700;letter-spacing:.06em}

/* pay methods */
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.pay{border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 14px;text-align:center;
  cursor:pointer;background:var(--card);transition:.2s;font-weight:600;font-size:.9rem}
.pay:hover{border-color:var(--moss)}
.pay.sel{border-color:var(--rust);box-shadow:0 0 0 3px rgba(187,84,43,.13)}
.pay .pm-logo{height:30px;display:grid;place-items:center;margin-bottom:8px;font-family:var(--serif);font-weight:700}
.twint-logo{height:22px;width:auto;display:block}
.pay-body{display:none;margin-top:8px}
.pay-body.show{display:block;animation:fade .3s}

/* order summary — the WHOLE right column sticks as one unit, so the value box
   below the summary scrolls with it instead of overlapping the pinned card */
.co-grid > aside{position:sticky;top:90px;align-self:start}
.summary{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.summary-head{padding:22px 24px;border-bottom:1px solid var(--line-soft);
  display:flex;gap:14px;align-items:center}
.summary-head .ph{width:58px;height:46px;border-radius:4px;flex:none}
.summary-head .sn{font-family:var(--serif);font-size:1.1rem;line-height:1.1}
.summary-head small{font-size:.76rem;color:var(--ink-soft)}
.summary-body{padding:18px 24px}
.sline{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:.92rem}
.sline.muted-line{color:var(--ink-soft);font-size:.86rem}
.sline .x{color:var(--ink-soft);cursor:pointer;font-size:.8rem}
.summary-total{border-top:1.5px solid var(--line);margin-top:8px;padding-top:16px;
  display:flex;justify-content:space-between;align-items:baseline}
.summary-total b{font-family:var(--serif);font-size:1.8rem;font-weight:560}
.summary-total .per{font-size:.78rem;color:var(--ink-soft)}
.summary-foot{padding:18px 24px 24px;background:#f6efe1;border-top:1px solid var(--line-soft)}
.guarantee{display:flex;gap:9px;font-size:.82rem;color:var(--ink-soft);margin-top:14px;align-items:flex-start}
.guarantee svg{color:var(--moss);flex:none;margin-top:2px}

.co-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px}
.back-link{display:inline-flex;align-items:center;gap:.5em;color:var(--ink-soft);font-weight:600;
  font-size:.9rem;cursor:pointer;background:none;border:0}
.back-link:hover{color:var(--ink)}

/* ============================================================
   DONE
   ============================================================ */
.done-hero{text-align:center;padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,64px)}
.seal{width:92px;height:92px;border-radius:50%;background:var(--moss);color:#fff;
  display:grid;place-items:center;margin:0 auto 28px;box-shadow:0 12px 30px -8px rgba(106,122,79,.6);
  animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.timeline{max-width:680px;margin:0 auto;display:grid;gap:0}
.tl{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:0 0 6px}
.tl-mark{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:42px;height:42px;border-radius:50%;background:var(--card);border:2px solid var(--rust);
  color:var(--rust);display:grid;place-items:center;font-family:var(--serif);font-weight:600;flex:none}
.tl.done2 .tl-dot{background:var(--moss);border-color:var(--moss);color:#fff}
.tl-line{width:2px;flex:1;background:var(--line);margin:6px 0}
.tl:last-child .tl-line{display:none}
.tl-body{padding-bottom:34px}
.tl-body h3{font-size:1.25rem}
.tl-when{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:700}

.wa-card{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  background:var(--forest);color:#ece5d2;border-radius:var(--radius);padding:38px;box-shadow:var(--shadow-lg)}
.wa-qr{width:140px;height:140px;background:#fff;border-radius:10px;padding:12px;flex:none}
.wa-card h3{color:#fff;font-size:1.7rem}
.wa-num{font-family:var(--serif);font-size:1.5rem;color:var(--wheat);margin-top:10px}
.wa-steps{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;font-size:.82rem}
.wa-steps span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:.5em .9em;border-radius:100px}

/* ============================================================
   DEMO NAVIGATOR (floating, helps click through the journey)
   ============================================================ */
.demo-nav-scrim{display:none}
.demo-nav{position:fixed;left:18px;bottom:18px;z-index:9999;font-family:var(--sans);
  background:rgba(30,26,21,.98);color:#f0ead9;border-radius:12px;
  /* a fully opaque body + soft halo so the pill reads as a deliberate floating
     control over content (no card text bleeding through), not a debug element */
  box-shadow:0 0 0 6px rgba(250,250,251,.55),0 18px 40px -12px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);overflow:hidden;max-width:calc(100vw - 36px);
  transition:transform .3s ease,border-radius .3s ease}
/* collapsed: a compact pill that hides the step list + footer.
   Small footprint so it never obscures cards/forms behind it. */
.demo-nav.min{border-radius:999px}
.demo-nav.min .dn-head{border-bottom:0;padding:8px 14px}
.demo-nav.min .dn-body,.demo-nav.min .dn-foot{display:none}
.dn-head{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.08)}
.dn-head .pulse{width:8px;height:8px;border-radius:50%;background:var(--wheat);flex:none;
  box-shadow:0 0 0 0 rgba(200,162,74,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,162,74,.5)}70%{box-shadow:0 0 0 7px rgba(200,162,74,0)}100%{box-shadow:0 0 0 0 rgba(200,162,74,0)}}
.dn-head b{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.dn-head .min-btn{margin-left:auto;color:#b7b09c;font-size:1rem;line-height:1}
.dn-body{padding:6px 8px 10px}
.dn-steps{display:flex;flex-direction:column;gap:1px}
.dn-step{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;
  font-size:.85rem;color:#c7c0ac;transition:background .2s}
.dn-step:hover{background:rgba(255,255,255,.06);color:#fff}
.dn-step .si{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;flex:none}
.dn-step.active{color:#fff;background:rgba(187,84,43,.22)}
.dn-step.active .si{background:var(--rust);border-color:var(--rust);color:#fff}
.dn-step small{display:block;font-size:.68rem;color:#8f8978;letter-spacing:.02em}
.dn-foot{padding:4px 12px 11px;font-size:.68rem;color:#8a8472;letter-spacing:.03em}

/* reserve a safe-zone so the collapsed pill never hides content behind it.
   ~64px clears the pill + its bottom offset on every page. */
body{--dn-safe:64px}
/* DEPLOYED bundle (claim-bind stamps class="platform vm-live" and demo.js adds
   it again at runtime): the demo navigator is suppressed on a real claimant's
   flow, so there is no pill and no gutter strip to clear. Zeroing both vars here
   is what puts the sticky mobile price bar flush on the viewport edge; the class
   outranks the plain `body` rules below regardless of source order. */
body.vm-live{--dn-safe:0px;--dn-strip:0px}
body.platform{padding-bottom:var(--dn-safe)}
/* on checkout, the mobile price bar already adds bottom padding (78px);
   keep the larger of the two so neither the bar nor the pill clips content */
body.platform .co-wrap{padding-bottom:max(78px,var(--dn-safe))}

/* mobile: expanded navigator becomes a bottom sheet with a backdrop so it
   never floats over (and blocks) the form/cards underneath */
@media(max-width:700px){
  /* height of the collapsed pill strip that sits flush at the bottom edge */
  body{--dn-strip:calc(46px + env(safe-area-inset-bottom,0px))}
  .demo-nav{left:12px;right:12px;bottom:12px;max-width:none}
  /* COLLAPSED: an ultra-compact corner tab (pulse dot + chevron only — no
     "Demo · Schritt" text on phones) docked flush in the bottom-left gutter
     strip. The tiny footprint means it can't cover a reassurance chip, a plan
     card body, or a payment tab the way the wide pill did. Tap to expand to the
     full journey nav. Sits BELOW any sticky price bar / claim overlay, which are
     lifted to bottom:var(--dn-strip). */
  .demo-nav.min{left:0;right:auto;bottom:0;width:auto;display:inline-flex;
    border-radius:0 12px 0 0;
    box-shadow:0 -2px 16px -6px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .demo-nav.min .dn-head{padding:9px 12px 9px 12px;gap:7px}
  .demo-nav.min .dn-head b{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .demo-nav:not(.min){left:0;right:0;bottom:0;border-radius:16px 16px 0 0;border-bottom:0}
  body.dn-open .demo-nav-scrim{display:block;position:fixed;inset:0;z-index:9998;
    background:rgba(12,10,7,.5);backdrop-filter:blur(2px)}
  /* reserve the bottom strip on every mobile page so no real content (index
     claim-card CTA, claim chips, done checklist) ever sits under the pill */
  body.platform{padding-bottom:var(--dn-strip)}
}
/* TABLET (701–980px): the sticky price bar owns the bottom edge — lift the
   collapsed pill above it so the two don't stack and no card hides. */
@media(min-width:701px) and (max-width:980px){
  body.platform .demo-nav.min{bottom:74px}
}
/* PHONE checkout (<=700px): give the collapsed pill its own gutter strip flush
   at the very bottom-left, and lift the sticky price bar up by that strip so
   neither the bar nor the pill ever overlaps a card / tile / field.
   (The bar's bottom is overridden in platform.css, loaded after this file, so
   it wins the cascade; here we just reserve the matching scroll padding.) */
@media(max-width:700px){
  /* the pill flush rule (bottom:0) stands; the bar rides above it. reserve room
     below the checkout content for BOTH the bar and the strip so cards/tiles/
     fields are never hidden by either. */
  body.platform .co-wrap{padding-bottom:calc(78px + var(--dn-strip))}
}

/* ============================================================
   NARROW PHONE (<=430px) — the 390px-wide iPhone class, where the
   checkout/done chrome was squeezing text into ragged 5-line columns.
   ============================================================ */
/* the header's trust label shrinks to one word instead of wrapping */
.sec-short{display:none}
@media(max-width:430px){
  .ew-header .secure .sec-long{display:none}
  .ew-header .secure .sec-short{display:inline}
  /* the pay CTA breaks after the label, never inside "CHF 399 →"; the separator
     dot goes with the break (it would otherwise dangle at the start of line 2) */
  #payBtn{flex-wrap:wrap;justify-content:center;row-gap:2px}
  #payBtn .pb-label,#payBtn .pb-amt{white-space:nowrap}
  #payBtn .pb-sep{display:none}
  /* (the CHF 399 core card is restyled in checkout.html's own <style>, which
     loads after this file and owns .co-core) */
  /* tariff cards: the price moves under the text instead of stealing its column */
  .plan{grid-template-columns:auto 1fr;gap:12px;padding:18px 16px}
  .plan .price{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:.45em;margin-top:10px}
  .plan .price b{display:inline;font-size:1.45rem}
  .plan .price .anchor{display:block}
  .plan .feats{padding-left:0;margin-top:12px}
  /* done wizard: full-width stacked actions rather than two wrapping buttons */
  body.platform .wz-actions{flex-direction:column-reverse;align-items:stretch;gap:10px}
  body.platform .wz-actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   ACCESSIBILITY UTILITIES (shared)
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .browser{transform:none!important}
  /* WhatsApp mock: show the final state statically, no pop-in / typing */
  .wa[data-anim] .bubble{opacity:1!important;transform:none!important}
  .wa-typing{display:none!important}
  .bubble .tick.read{color:var(--wa-blue)}
}

/* ============================================================
   WHATSAPP CHAT MOCK (claim page)
   ============================================================ */
.wa-loop{list-style:none;padding:0;margin:22px 0 0}
.wa-loop li{display:flex;gap:14px;align-items:flex-start;padding:11px 0}
.wa-loop .wn{width:30px;height:30px;border-radius:50%;background:#25d366;color:#073b22;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.wa-loop b{font-weight:700}
.wa-loop p{margin:2px 0 0;font-size:.92rem;color:var(--ink-soft)}

/* Authentic WhatsApp Web (light) palette — intentionally WhatsApp brand
   colours, NOT the page's oat palette:
     header / input bar bg .. #f0f2f5      wallpaper base ........ #efeae2
     outgoing bubble ....... #d9fdd3      incoming bubble ....... #ffffff
     message text .......... #111b21      timestamp / icons ..... #667781
     blue read ticks ....... #53bdeb      send / avatar green ... #00a884 */
.wa{--wa-head:#f0f2f5;--wa-wall:#efeae2;--wa-out:#d9fdd3;--wa-in:#fff;
  --wa-ink:#111b21;--wa-sub:#667781;--wa-blue:#53bdeb;--wa-green:#00a884;
  width:360px;max-width:100%;margin:0 auto;border-radius:16px;overflow:hidden;
  background:var(--wa-wall);font-family:'Segoe UI','Helvetica Neue',Helvetica,system-ui,-apple-system,sans-serif;
  box-shadow:0 18px 48px -16px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.04);display:flex;flex-direction:column}

/* header */
.wa-head{background:var(--wa-head);color:var(--wa-ink);display:flex;align-items:center;
  gap:8px;padding:9px 12px;flex:none}
.wa-back{color:var(--wa-sub);flex:none;margin-right:-2px;display:none}
.wa-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(135deg,#00a884,#008f72);
  font-family:inherit}
.wa-id{display:flex;flex-direction:column;line-height:1.18;min-width:0;flex:1}
.wa-id b{font-weight:600;font-size:.95rem;color:#111b21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-presence{font-size:.74rem;color:var(--wa-sub)}
.wa-actions{display:flex;align-items:center;gap:16px;color:var(--wa-sub);flex:none}

/* chat body + iconic doodle wallpaper: a dense, evenly-packed field of faint
   outlined OBJECT doodles (cups, hearts, smileys, cameras, suns, balloons,
   paper planes, music notes, gifts) on #efeae2 — like real WhatsApp. The
   240×240 tile wraps seamlessly: motifs that sit near an edge have their
   y-positions chosen so the grid stays even across the repeat boundary. */
.wa-body{flex:1;padding:12px 7% 10px;display:flex;flex-direction:column;gap:3px;
  min-height:360px;overflow:hidden;position:relative;
  background-color:var(--wa-wall);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.06' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 24)'%3E%3Cpath d='M-6 0h12l-1 9a5 5 0 0 1-10 0z'/%3E%3Cpath d='M6 2c4 0 4 5 0 5'/%3E%3C/g%3E%3Cg transform='translate(74 18)'%3E%3Cpath d='M0 8c-5-6-10-2-10 2 0 4 6 7 10 11 4-4 10-7 10-11 0-4-5-8-10-2z'/%3E%3C/g%3E%3Cg transform='translate(128 22)'%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='-3' cy='-2' r='1'/%3E%3Ccircle cx='3' cy='-2' r='1'/%3E%3Cpath d='M-4 3a4 4 0 0 0 8 0'/%3E%3C/g%3E%3Cg transform='translate(186 16)'%3E%3Crect x='-10' y='-5' width='20' height='13' rx='2'/%3E%3Cpath d='M-4 -5l2-3h4l2 3'/%3E%3Ccircle cx='0' cy='2' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(224 28)'%3E%3Cpath d='M-6 0h12l-1 9a5 5 0 0 1-10 0z'/%3E%3Cpath d='M6 2c4 0 4 5 0 5'/%3E%3C/g%3E%3Cg transform='translate(30 66)'%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Cpath d='M0 -8v-5M0 8v5M-8 0h-5M8 0h5M-6 -6l-3 -3M6 -6l3 -3M-6 6l-3 3M6 6l3 3'/%3E%3C/g%3E%3Cg transform='translate(96 62)'%3E%3Cpath d='M-2 8c-7-3-9-9-9-13a4 4 0 0 1 8-1c1-4 9-4 9 2 0 5-4 9-8 12z'/%3E%3Cpath d='M-2 8l1 6'/%3E%3C/g%3E%3Cg transform='translate(150 64)'%3E%3Cpath d='M-7 6V-6l11-2v12'/%3E%3Ccircle cx='-7' cy='6' r='3'/%3E%3Ccircle cx='4' cy='4' r='3'/%3E%3C/g%3E%3Cg transform='translate(206 64)'%3E%3Cpath d='M-10 4l20-8-8 16-3-7z'/%3E%3C/g%3E%3Cg transform='translate(20 112)'%3E%3Crect x='-9' y='-4' width='18' height='13' rx='2'/%3E%3Cpath d='M-9 0h18M0 -4v13'/%3E%3Cpath d='M-4 -4c-2-4 4-4 4 0c0-4 6-4 4 0'/%3E%3C/g%3E%3Cg transform='translate(76 112)'%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='-3' cy='-2' r='1'/%3E%3Ccircle cx='3' cy='-2' r='1'/%3E%3Cpath d='M-4 4a4 4 0 0 0 8 0'/%3E%3C/g%3E%3Cg transform='translate(130 110)'%3E%3Cpath d='M-6 0h12l-1 9a5 5 0 0 1-10 0z'/%3E%3Cpath d='M6 2c4 0 4 5 0 5'/%3E%3C/g%3E%3Cg transform='translate(186 112)'%3E%3Cpath d='M0 8c-5-6-10-2-10 2 0 4 6 7 10 11 4-4 10-7 10-11 0-4-5-8-10-2z'/%3E%3C/g%3E%3Cg transform='translate(48 158)'%3E%3Crect x='-10' y='-5' width='20' height='13' rx='2'/%3E%3Cpath d='M-4 -5l2-3h4l2 3'/%3E%3Ccircle cx='0' cy='2' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(106 160)'%3E%3Cpath d='M-9 5l18-7-7 15-3-6z'/%3E%3C/g%3E%3Cg transform='translate(160 158)'%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Cpath d='M0 -8v-4M0 8v4M-8 0h-4M8 0h4M-6 -6l-3 -3M6 -6l3 -3'/%3E%3C/g%3E%3Cg transform='translate(214 160)'%3E%3Cpath d='M-7 6V-6l11-2v12'/%3E%3Ccircle cx='-7' cy='6' r='3'/%3E%3Ccircle cx='4' cy='4' r='3'/%3E%3C/g%3E%3Cg transform='translate(24 204)'%3E%3Cpath d='M-2 7c-7-3-9-9-9-13a4 4 0 0 1 8-1c1-4 9-4 9 2 0 5-4 9-8 12z'/%3E%3Cpath d='M-2 7l1 6'/%3E%3C/g%3E%3Cg transform='translate(80 206)'%3E%3Crect x='-9' y='-4' width='18' height='13' rx='2'/%3E%3Cpath d='M-9 0h18M0 -4v13'/%3E%3Cpath d='M-4 -4c-2-4 4-4 4 0c0-4 6-4 4 0'/%3E%3C/g%3E%3Cg transform='translate(134 204)'%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Cpath d='M0 -8v-5M0 8v5M-8 0h-5M8 0h5M-6 -6l-3 -3M6 -6l3 -3M-6 6l-3 3M6 6l3 3'/%3E%3C/g%3E%3Cg transform='translate(190 206)'%3E%3Cpath d='M0 7c-5-6-10-2-10 2 0 4 6 7 10 11 4-4 10-7 10-11 0-4-5-8-10-2z'/%3E%3C/g%3E%3Cg transform='translate(228 196)'%3E%3Cpath d='M-6 0h12l-1 9a5 5 0 0 1-10 0z'/%3E%3Cpath d='M6 2c4 0 4 5 0 5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}

.wa-day{align-self:center;margin:0 0 8px}
.wa-day span{display:inline-block;background:#fff;color:var(--wa-sub);font-size:.68rem;
  font-weight:500;letter-spacing:.02em;padding:5px 12px;border-radius:8px;
  box-shadow:0 1px 1px rgba(0,0,0,.06)}

/* bubbles */
.bubble{max-width:78%;padding:6px 9px 8px;border-radius:8px;font-size:.85rem;line-height:1.34;
  box-shadow:0 1px .5px rgba(11,20,26,.13);position:relative;color:var(--wa-ink);
  margin-top:6px;word-wrap:break-word}
.bubble .bt{display:block}
.bubble.in{background:var(--wa-in);align-self:flex-start;border-top-left-radius:0}
.bubble.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:0}
/* tail — only on the first bubble of a run */
.bubble.in::before,.bubble.out::before{content:'';position:absolute;top:0;width:10px;height:13px}
.bubble.in::before{left:-9px;background:radial-gradient(circle at top left,transparent 70%,var(--wa-in) 0)}
.bubble.out::before{right:-9px;background:radial-gradient(circle at top right,transparent 70%,var(--wa-out) 0)}
/* hide the tail when the previous bubble was the same side (a run) */
.bubble.in + .bubble.in::before,.bubble.out + .bubble.out::before{display:none}
.bubble.in + .bubble.in{border-top-left-radius:8px}
.bubble.out + .bubble.out{border-top-right-radius:8px}

.bubble .photo{width:100%;height:150px;border-radius:6px;margin:1px 0 4px;overflow:hidden}
.bubble .photo img{width:100%;height:100%;object-fit:cover;display:block}
.bubble .meta{float:right;display:inline-flex;align-items:center;gap:3px;
  margin:-2px 0 -3px 8px;transform:translateY(4px)}
.bubble .ts{font-size:.66rem;color:var(--wa-sub)}
.bubble .tick{font-size:.72rem;color:var(--wa-sub);letter-spacing:-2px;line-height:1}
.bubble .tick.read.lit{color:var(--wa-blue)}

/* input bar */
.wa-input{flex:none;background:var(--wa-head);display:flex;align-items:center;gap:8px;
  padding:8px 10px}
.wa-input svg{color:var(--wa-sub);flex:none}
.wa-emoji{color:var(--wa-sub)}
.wa-field{flex:1;background:#fff;border-radius:8px;padding:9px 12px;font-size:.85rem;
  color:#8696a0}
.wa-send{width:40px;height:40px;border-radius:50%;background:var(--wa-green);flex:none;
  display:grid;place-items:center}
.wa-send svg{color:#fff}

/* ---- animation: messages + day-dividers pop in on scroll-into-view (looping), typing dots between ---- */
/* During animated playback the body is a fixed-height scrolling window: each new
   message auto-scrolls into view (JS-driven) and older ones scroll up out of
   sight, like a real chat, so the full thread stays compact. Reduced-motion
   users never get data-anim, so they keep the static full-height thread. */
.wa[data-anim] .wa-body{flex:none;height:300px;min-height:0;overflow:hidden;scroll-behavior:smooth}
.wa[data-anim] .bubble,
.wa[data-anim] .wa-day{opacity:0;transform:scale(.7) translateY(6px);
  transform-origin:bottom center}
.wa[data-anim] .bubble.out{transform-origin:bottom right}
.wa[data-anim] .bubble.in{transform-origin:bottom left}
.wa[data-anim] .wa-day{transform-origin:center}
.bubble.pop,
.wa-day.pop{animation:waPop .26s cubic-bezier(.2,.7,.3,1.2) forwards}
@keyframes waPop{from{opacity:0;transform:scale(.7) translateY(6px)}
  to{opacity:1;transform:scale(1) translateY(0)}}

/* The typing bubble is OVERLAID on the incoming bubble's reserved slot
   (absolute, positioned by JS via --ty) so showing/hiding it never adds to
   the flow height of .wa-body — no layout shift. */
.wa-typing{position:absolute;left:7%;top:var(--ty,0);
  background:var(--wa-in);border-radius:8px;border-top-left-radius:0;
  padding:11px 12px;box-shadow:0 1px .5px rgba(11,20,26,.13);
  display:none;pointer-events:none;z-index:2}
.wa-typing::before{content:'';position:absolute;top:0;left:-9px;width:10px;height:13px;
  background:radial-gradient(circle at top left,transparent 70%,var(--wa-in) 0)}
.wa-typing.show{display:inline-flex;gap:4px;align-items:center}
.wa-typing i{width:7px;height:7px;border-radius:50%;background:#9aa6ad;display:block;
  animation:waDot 1.2s infinite ease-in-out}
.wa-typing i:nth-child(2){animation-delay:.18s}
.wa-typing i:nth-child(3){animation-delay:.36s}
@keyframes waDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .split,.split.rev,.claim-hero .grid,.tax{grid-template-columns:1fr}
  .tax-mid{transform:rotate(90deg)}
  .co-grid{grid-template-columns:1fr}
  .co-grid > aside{position:static}
  .space-grid,.offer-grid,.gallery{grid-template-columns:repeat(2,1fr)}
  .sf-grid{grid-template-columns:1fr 1fr}
  .swap{grid-template-columns:1fr}
  .browser{transform:none}
  .pays{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .site-nav{display:none}
  .nav-tog{display:block}
  .site-nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--paper);padding:18px 28px;border-bottom:1px solid var(--line);gap:14px}
  .hero-meta{display:none}
  .space-grid,.offer-grid,.gallery,.row2,.sf-grid{grid-template-columns:1fr}
  .gallery{grid-auto-rows:180px}.g-wide{grid-column:span 1}.g-tall{grid-row:span 1}
  .wa-card,.sender{grid-template-columns:1fr;text-align:center}
  .monogram,.wa-qr{margin:0 auto}
  .ew-header .tag{display:none}
  /* claim header only (the one with a CTA button): drop the inline trust text
     on mobile so the "Beanspruchen" button never clips off-screen. The same
     reassurance lives in the hero/feat-row just below. checkout/done headers
     keep their short "Sichere Verbindung" / "✓ Beansprucht" labels. */
  .ew-header .right:has(.btn) .secure{display:none}
  .ew-header .wrap{gap:12px}
  .ew-header .right{gap:10px}
  .stat-row{gap:24px}
  /* WhatsApp chat mock: trim down on phones so it doesn't dominate the section */
  .wa{max-width:296px}
  .wa-head{padding:7px 11px}
  .wa-av{width:32px;height:32px;font-size:.9rem}
  .wa-body{padding:9px 6% 8px;gap:2px}
  .wa[data-anim] .wa-body{height:262px}
  .wa-day{margin-bottom:6px}
  .wa-day span{font-size:.64rem;padding:4px 10px}
  .bubble{font-size:.82rem;margin-top:4px;padding:5px 8px 7px}
  .bubble .photo{height:96px}
  .wa-input{padding-top:7px;padding-bottom:7px}
  .wa-send{width:34px;height:34px}
}

/* ---------- Kundenstimmen (claim page) ---------- */
.kref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.kref{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.kref-q{font-family:var(--serif);font-size:3rem;line-height:.55;color:var(--rust);height:26px}
.kref blockquote{font-size:1.05rem;line-height:1.5;color:var(--ink);margin:14px 0 0}
.kref figcaption{display:flex;align-items:center;gap:13px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.kref-ava{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;object-fit:cover;
  background:rgba(187,84,43,.1);color:var(--rust);
  font-family:var(--serif);font-weight:600;font-size:1rem;letter-spacing:.02em}
.kref figcaption b{display:block;font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.25}
.kref figcaption .kref-meta{font-size:.84rem;color:var(--ink-soft);line-height:1.25}
@media(max-width:760px){.kref-grid{grid-template-columns:1fr}}