/* ============================================================
   Aborn Media — Designsystem
   Palette direkt aus dem Logo abgeleitet (Verlauf Amber → Orange).
   Typografie & Hero/Mockup-Bausteine nach hero-mockup-kit.html.
   ============================================================ */
:root{
  --paper:#FBF8F3;
  --paper-deep:#F2EAD9;
  --surface:#FFFFFF;
  --line:#E9E0CE;
  --line-strong:#D9CCAF;
  --ink:#1F1912;
  --ink-soft:#6F6353;
  --ink-faint:#9A8E7A;
  --amber:#FFBD59;
  --flame:#FF6A14;
  --flame-deep:#E85200;
  --tint:#FFF0DD;
  --deep:#1F1912;
  --deep-2:#2B2216;
  --deep-line:#3C3121;
  --grad:linear-gradient(135deg,#FFBD59 0%,#FF6A14 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,189,89,.20),rgba(255,106,20,.14));
  --radius:8px;
  --radius-lg:14px;
  --radius-xl:28px;
  --section-gutter:24px;
  --texture:radial-gradient(rgba(31,25,18,.07) 1px,transparent 1px);
  --texture-size:14px 14px;
  --shadow:0 1px 2px rgba(31,25,18,.06),0 10px 26px rgba(31,25,18,.07);
  --shadow-lift:0 3px 6px rgba(31,25,18,.09),0 20px 46px rgba(232,82,0,.16);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --max:clamp(1300px, 20.83vw + 1000px, 1400px);
  --header-h:92px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
body{margin:0;background-color:var(--paper);background-image:var(--texture);background-size:var(--texture-size);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--flame);outline-offset:2px;border-radius:2px;}
ul,ol{padding-left:0;}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
@media (max-width:640px){.wrap{padding:0 18px;}}
.section{padding:100px 0;}
.section.tight{padding:64px 0;}
.section.dark{background:var(--deep);color:#F5EEE3;--ink:#F5EEE3;--ink-soft:#BCAF9B;}
.section.dark .kicker{color:var(--amber);}
.section.dark .lede{color:#BCAF9B;}
.section.dark h2,.section.dark h3{color:#F5EEE3;}
.section.dark .card{background:var(--deep-2);border-color:var(--deep-line);}
.section.dark .tile p{color:#BCAF9B;}
/* price tables keep their own white surface — reset the ink tokens back to
   normal inside it so table text stays dark-on-white, not light-on-white */
.section.dark .price-wrap{--ink:#1F1912;--ink-soft:#6F6353;}
/* free-standing sections: page keeps one base background (--paper); these
   float on top of it as an inset, rounded panel instead of running edge-to-edge. */
.section.alt,.section.dark,.section.grad{margin:var(--section-gutter);border-radius:var(--radius-xl);}
.section.alt{background:var(--paper-deep);}
.section.grad{background:var(--grad);color:#fff;}
.section.grad .kicker{color:rgba(255,255,255,.9);}
.section.grad .kicker::before{background:#fff;}
.section.grad h2{color:#fff;}
.section.grad .lede{color:rgba(255,255,255,.92);}
@media (max-width:720px){
  .section{padding:64px 0;}
  .section.tight{padding:44px 0;}
  .section.alt,.section.dark,.section.grad,.site-header{margin:12px;border-radius:18px;}
}

/* ---------- free-standing section with a full-width background image ---------- */
.section.img-bg{position:relative;background-size:cover;background-position:center;background-color:var(--paper-deep);color:#fff;isolation:isolate;}
.section.img-bg::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(31,25,18,.85),rgba(31,25,18,.78));z-index:0;}
.section.img-bg>.wrap{position:relative;z-index:1;}
.section.img-bg .kicker{color:var(--amber);}
.section.img-bg .kicker::before{background:var(--amber);}
.section.img-bg h2{color:#fff;}
.section.img-bg .lede{color:rgba(255,255,255,.88);}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.14;margin:0 0 16px;}
h1{font-size:clamp(34px,5vw,56px);font-weight:700;}
h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;}
h3{font-size:20px;font-weight:600;}
p{margin:0 0 16px;}
.kicker{font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--flame-deep);margin:0 0 14px;display:flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:20px;height:2px;background:var(--grad);border-radius:2px;flex-shrink:0;}
.lede{font-size:17.5px;color:var(--ink-soft);max-width:600px;margin-bottom:0;}
.center{text-align:center;}
.center .kicker{justify-content:center;}
.center .lede{margin-left:auto;margin-right:auto;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mono{font-family:var(--font-mono);}

/* ---------- header: free-standing dark-glass panel (same inset/radius language as
   .section.alt/.dark/.grad), transparent + borderless on the hero, solid once scrolled,
   fully opaque on hover so the progress bar reads clearly against it. ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;margin:calc(var(--section-gutter)/2) var(--section-gutter);border-radius:var(--radius-xl);background:transparent;transition:background .25s ease,backdrop-filter .25s ease,box-shadow .25s ease;}
/* clips the bar to the header's own rounded silhouette so it can't poke past the curved corners */
.header-progress-mask{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:101;}
.scroll-progress{position:absolute;top:0;left:0;height:3px;width:0%;background:var(--grad);transition:width .1s linear;}
.site-header .wrap{max-width:1400px;}
.site-header.is-solid{background:rgba(31,25,18,.92);backdrop-filter:blur(10px);box-shadow:var(--shadow);}
.site-header.is-solid:hover{background:rgba(31,25,18,1);}
.nav{display:flex;align-items:center;gap:40px;height:var(--header-h);padding:0 64px;}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:#FDF9F2;transition:color .25s ease;flex-shrink:0;}
.brand .mark{width:40px;height:40px;border-radius:10px;flex-shrink:0;overflow:hidden;box-shadow:0 2px 10px rgba(232,82,0,.28);}
.brand .mark img{width:100%;height:100%;object-fit:cover;}
.brand-text{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap;}
.brand small{display:block;font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;color:rgba(253,249,242,.62);text-transform:uppercase;}
.nav-links{display:flex;gap:18px;flex:1;justify-content:center;align-items:center;list-style:none;padding:0;margin-top:0;margin-bottom:0;}
.nav-links>li>a,.nav-links>li>button:not(.nav-drawer-close){text-decoration:none;font-size:14px;color:rgba(253,249,242,.82);font-weight:500;transition:color .25s ease;background:none;border:none;font-family:var(--font-body);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.nav-links>li>a:hover,.nav-links a[aria-current],.nav-links>li>button:hover{color:#fff;}
.nav-links>li>a{position:relative;padding-bottom:4px;}
.nav-links>li>a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--grad);border-radius:2px;transition:left .25s ease,right .25s ease;}
.nav-links>li>a:hover::after,.nav-links>li>a[aria-current]::after{left:0;right:0;}
/* fixed-width slot so the CTA's hover padding-stretch never resizes this box, which would otherwise shift the centered nav-links */
.nav-cta{flex-shrink:0;min-width:190px;display:flex;justify-content:flex-end;}
.nav-cta>a{color:#fff;}
.nav-cta-mobile{display:none;}
.nav-overlay-brand{display:none;}
.nav-drawer-close{display:none;}
.nav-toggle{display:none;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;padding:0;flex-shrink:0;background:none;border:1px solid rgba(253,249,242,.32);border-radius:50%;cursor:pointer;color:#FDF9F2;transition:border-color .25s ease,color .25s ease,background .25s ease;}
.nav-toggle:hover{border-color:rgba(253,249,242,.6);}
.nav-toggle-bars{position:relative;width:17px;height:12px;flex-shrink:0;}
.nav-toggle-bars span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease,top .3s cubic-bezier(.4,0,.2,1);}
.nav-toggle-bars span:nth-child(1){top:0;}
.nav-toggle-bars span:nth-child(2){top:5px;}
.nav-toggle-bars span:nth-child(3){top:10px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:5px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:5px;transform:rotate(-45deg);}

.has-sub{position:relative;list-style:none;}
.has-sub>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.65;}
.sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 14px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);min-width:210px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:70;}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sub-menu li{margin:0;}
.sub-menu a{display:block;padding:10px 12px;border-radius:7px;font-size:14px;text-decoration:none;color:var(--ink-soft);}
.sub-menu a:hover,.sub-menu a[aria-current]{background:var(--paper-deep);color:var(--ink);}

@media (max-width:1180px){
  .nav{padding:0 24px;gap:16px;}
  .nav-toggle{display:flex;position:relative;z-index:2;}
  /* the persistent header CTA doesn't fit next to the full brand lockup + toggle at this width, so it moves into the overlay instead */
  .nav-cta{display:none;}

  /* ---------- full-screen overlay menu (inspired by gans-vertraut.com) ----------
     .nav-links becomes the overlay itself: fixed, full-bleed, portaled to <body>
     (see site.js) and painted above everything on the page, header included — so
     the header's own toggle button is covered once open. The drawer gets its own
     close button (also injected in site.js) instead of trying to keep the header's
     toggle visible above its own menu. */
  html.nav-open{overflow:hidden;}
  .nav-links{
    display:flex;flex-direction:column;justify-content:center;align-items:stretch;
    /* portaled to <body> at this breakpoint (see site.js), so it now competes with
       .site-header (z-index:100) and every other fixed element directly instead of
       inheriting the header's own top-level stacking position — must outrank all of it */
    position:fixed;inset:0;z-index:200;margin:0;gap:0;
    padding:calc(var(--header-h) + 30px) 8vw 40px;
    background:
      radial-gradient(58% 46% at 88% 10%,rgba(255,106,20,.28),transparent 62%),
      radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/14px 14px,
      linear-gradient(165deg,var(--deep) 0%,var(--deep-2) 100%);
    border:none;border-radius:0;box-shadow:none;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    counter-reset:navno;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(100%);
    transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),visibility .4s;
  }
  .nav-links.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}

  /* mirrors the header's own .brand lockup exactly (mark + name + subtitle) —
     the generic nav-link rules below (font size, hover slide, numbering) still
     match this li>a structurally, so this override needs to out-specificity
     them rather than relying on source order alone */
  .nav-overlay-brand{display:list-item;position:absolute;top:calc(var(--section-gutter)/2 + 14px);left:8vw;}
  .nav-overlay-brand>a.brand{width:auto;padding:0;color:#FDF9F2;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:13px;}

  /* the drawer's own close control — sits inside the drawer itself (injected by
     site.js) rather than relying on the header's toggle, which is covered once
     the drawer is open and z-indexed above it */
  .nav-drawer-close{display:flex;position:absolute;top:calc(var(--section-gutter)/2 + 14px);right:6vw;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(253,249,242,.32);background:none;color:#FDF9F2;cursor:pointer;transition:border-color .25s ease;}
  .nav-drawer-close:hover{border-color:rgba(253,249,242,.6);}

  .nav-links>li{border-top:1px solid rgba(253,249,242,.14);}
  .nav-links>li:first-child,.nav-links>li.nav-overlay-brand{border-top:none;}
  /* layout/typography only here — color is handled separately below so the
     number (::before) and label never end up sharing a color in any state */
  .nav-links>li:not(.nav-overlay-brand)>a,.nav-links>li>button:not(.nav-drawer-close){
    padding:15px 2px;width:100%;justify-content:flex-start;
    font-family:var(--font-display);font-weight:600;font-size:clamp(23px,6.4vw,36px);letter-spacing:-.01em;
    transition:color .25s ease,transform .3s cubic-bezier(.4,0,.2,1);
  }
  .nav-links>li:not(.nav-cta-mobile):not(.nav-overlay-brand)>a::before{
    counter-increment:navno;content:counter(navno,decimal-leading-zero)"  ";
    font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.06em;
    display:inline-block;
  }
  /* the number is part of the link's own box (::before content), so translating
     the link already carries the number along with it — giving the number its
     own translateX on top of that double-shifts it past the label text */

  /* rest: label off-white, number amber — color never changes on hover, only position.
     the plain :hover color re-pins to the resting color because a global,
     non-media-query rule (desktop nav hover) would otherwise turn it white. */
  .nav-links>li:not(.nav-overlay-brand)>a{color:#F5EEE3;}
  .nav-links>li:not(.nav-cta-mobile):not(.nav-overlay-brand)>a::before{color:var(--amber);}
  .nav-links>li:not(.nav-overlay-brand)>a:hover{color:#F5EEE3;transform:translateX(10px);}

  /* active: label AND number both take the accent color, always — including on hover */
  .nav-links>li:not(.nav-overlay-brand)>a[aria-current]{color:var(--amber);}
  .nav-links>li:not(.nav-cta-mobile):not(.nav-overlay-brand)>a[aria-current]::before{color:var(--amber);}
  .nav-links>li:not(.nav-overlay-brand)>a[aria-current]:hover{color:var(--amber);transform:translateX(10px);}

  .nav-links>li>a::after{display:none;}
  /* the CTA read as an odd, undersized floating button once the menu became a
     full-screen drawer — dropped from mobile rather than restyled to fit */
  .nav-cta-mobile{display:none;}

  .sub-menu{position:static;box-shadow:none;border:none;opacity:1;visibility:visible;transform:none;padding:2px 0 6px 12px;background:transparent;min-width:0;}
  .sub-menu a{padding:9px 0;}
}
@media (prefers-reduced-motion:reduce){
  .nav-links{transition:opacity .01ms linear,visibility .01ms linear;}
}

/* ---------- buttons ---------- */
.btn{--pad-x:26px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15px;padding:13px var(--pad-x);border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,background-position .35s ease,color .12s ease,padding .35s ease;white-space:nowrap;}
.btn.primary{background-image:linear-gradient(135deg,rgb(255,189,89) 0%,rgb(255,106,20) 50%,rgb(255,106,20) 50%,rgb(255,189,89) 100%);background-size:200% 100%;background-position:left;color:#fff;box-shadow:0 5px 18px rgba(232,82,0,.32);}
.btn.primary:hover{background-position:center;padding-left:calc(var(--pad-x) + 12px);padding-right:calc(var(--pad-x) + 12px);box-shadow:0 9px 26px rgba(232,82,0,.38);}
.btn.primary:not(.small)::after{content:"";width:15px;height:15px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s ease;}
.btn.primary:hover::after{transform:translateX(3px);}
.btn.ghost{border-color:var(--line-strong);color:var(--ink);background:transparent;}
.btn.ghost:hover{border-color:var(--ink);}
.btn.ghost.on-dark{border-color:rgba(255,255,255,.28);color:#FDF9F2;}
.btn.ghost.on-dark:hover{border-color:var(--amber);}
.btn.big{--pad-x:34px;font-size:17px;padding-top:16px;padding-bottom:16px;}
.btn.small{--pad-x:18px;font-size:13.5px;padding-top:9px;padding-bottom:9px;}
.section.dark .btn.ghost{border-color:var(--deep-line);color:#FDF9F2;}
.section.dark .btn.ghost:hover{border-color:var(--amber);}

/* ---------- tag ---------- */
.tag{display:inline-block;font-family:var(--font-mono);font-size:11px;border:1px solid var(--line-strong);border-radius:20px;padding:3px 11px;color:var(--ink-soft);}
.tag.accent{border-color:var(--flame);color:var(--flame-deep);background:var(--tint);}

/* ---------- cards & grid ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);}
.grid{display:grid;gap:22px;}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr;}}
.grid.centered{max-width:75%;margin-left:auto;margin-right:auto;}
@media (max-width:900px){.grid.centered{max-width:100%;}}

/* ---------- service tiles ---------- */
.tile{position:relative;overflow:hidden;z-index:0;}
.tile .t-icon{width:46px;height:46px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 4px 14px rgba(232,82,0,.3);color:#fff;font-size:21px;font-weight:700;flex-shrink:0;}
.tile h3{margin-bottom:8px;overflow-wrap:break-word;hyphens:auto;}
.tile p{color:var(--ink-soft);font-size:15px;margin-bottom:16px;}
.tile .t-list{list-style:none;margin:0 0 16px;padding:0;}
.tile .t-list li{font-size:13.5px;color:var(--ink-soft);padding:7px 0;border-top:1px dashed var(--line-strong);display:flex;gap:8px;align-items:baseline;}
.tile .t-list li:first-child{border-top:none;}
.tile .t-list li::before{content:"✓";color:var(--flame);font-weight:700;font-family:var(--font-mono);flex-shrink:0;}
.tile .t-price{font-family:var(--font-mono);font-size:12.5px;color:var(--flame-deep);margin-bottom:14px;}
.tile.addon{background:var(--tint);border:1.5px dashed var(--flame);}
.tile.addon .t-icon{background:var(--surface);color:var(--flame-deep);box-shadow:none;}
.tile.addon p{margin-bottom:18px;}
.t-watermark{position:absolute;right:0;bottom:0;width:150px;height:150px;z-index:-1;pointer-events:none;opacity:.1;transition:opacity .2s ease;}
.t-watermark svg{width:100%;height:100%;display:block;stroke:url(#wm-grad);transition:stroke .2s ease;}
.t-watermark svg [fill="currentColor"]{fill:url(#wm-grad);transition:fill .2s ease;}
.t-watermark img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);}
.leist-card:hover .t-watermark,.leist-card:focus-visible .t-watermark{opacity:.22;}
.leist-card:hover .t-watermark svg,.leist-card:focus-visible .t-watermark svg{stroke:#fff;}
.leist-card:hover .t-watermark svg [fill="currentColor"],.leist-card:focus-visible .t-watermark svg [fill="currentColor"]{fill:#fff;}
.leist-card:hover .t-watermark img,.leist-card:focus-visible .t-watermark img{filter:grayscale(1) brightness(0) invert(1);}

/* ---------- clickable service tiles (hover-to-gradient) ---------- */
.leist-card{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .18s ease,box-shadow .18s ease;}
.leist-card.static{cursor:default;}
.leist-card:hover,.leist-card:focus-visible{background:var(--grad);border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 36px rgba(232,82,0,.3);}
.leist-card:hover .t-icon,.leist-card:focus-visible .t-icon{background:rgba(255,255,255,.22);box-shadow:none;color:#fff;}
.leist-card:hover h3,.leist-card:focus-visible h3{color:#fff;}
.leist-card:hover p,.leist-card:focus-visible p{color:rgba(255,255,255,.92);}
.leist-card .tile-arrow{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--flame-deep);transition:color .2s ease,transform .2s ease;}
.leist-card:hover .tile-arrow,.leist-card:focus-visible .tile-arrow{color:#fff;transform:translateX(4px);}
.leist-card:hover .tag,.leist-card:focus-visible .tag{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);color:#fff;}

/* ---------- more link ---------- */
.more-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--flame-deep);text-decoration:none;}
.more-link:hover{color:var(--flame);}
.section.dark .more-link{color:var(--amber);}

/* ---------- differentiator / why-us split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:36px;}}
.check-list{list-style:none;margin:24px 0 0;padding:0;}
.check-list li{padding:12px 0;border-top:1px dashed var(--line-strong);display:flex;gap:12px;font-size:15.5px;}
.check-list li:first-child{border-top:none;}
.check-list li::before{content:"✓";color:var(--flame);font-weight:700;font-family:var(--font-mono);}
.section.dark .check-list li{border-color:var(--deep-line);}

/* swaps a couple of longer list items for a shortened mobile-only wording
   below the point where these cards go single-column narrow, so a lone
   trailing word doesn't wrap onto its own line — desktop copy is untouched */
.copy-mobile{display:none;}
@media(max-width:720px){
  .copy-full{display:none;}
  .copy-mobile{display:inline;}
}
.label-tag{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;}
.stamp{display:inline-block;border:2px solid var(--amber);color:var(--amber);font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.08em;padding:4px 12px;border-radius:4px;transform:rotate(-2deg);}

/* ============================================================
   MOCKUP PLATES — a real photographed device mockup (a laptop
   shown in a real setting) instead of a browser-window drawn in
   CSS. One honest photograph, framed well, reads as more premium
   than a simulated screenshot.
   ============================================================ */
.mockup-plate{position:relative;display:block;width:100%;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#2b2318,#181310);box-shadow:0 30px 60px -16px rgba(31,25,18,.45),0 0 0 1px rgba(255,255,255,.07);}
.mockup-plate img{width:100%;height:100%;object-fit:cover;display:block;}
.mockup-plate.square{aspect-ratio:1/1;}

.project-block+.project-block{margin-top:8px;}
.project-split{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;}
.project-split.rev{grid-template-columns:1.2fr 1fr;}

.project-square{max-width:460px;margin:0 auto;}

/* soft ambient glow behind a plate, tinted to the brand gradient, so the
   media column reads with depth instead of a flat cutout on the page */
.project-shots{position:relative;}
.project-shots::before{content:"";position:absolute;inset:6% -10%;background:var(--grad-soft);filter:blur(60px);z-index:-1;border-radius:50%;}

.project-quote{padding:8px;}
.project-quote p{font-size:18px;line-height:1.65;}

@media(max-width:900px){.project-split,.project-split.rev{grid-template-columns:1fr;gap:40px;}}

/* ============================================================
   HERO — intro section reused on every page (short variant on
   subpages). Sliding device-mockup wall behind a scrim.
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--deep);height:auto;will-change:transform;}
.hero.full-height{height:calc(100vh + 40px);}
/* the section right after the hero caps it like a rounded curtain — pairs with
   the JS scroll parallax on .hero-inner so it reads as sliding up over the hero */
.hero + .section{position:relative;z-index:2;margin-top:-40px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background-color:var(--paper);background-image:var(--texture);background-size:var(--texture-size);}
/* mirror of the hero curtain above: the section right before the footer dips down
   over it with rounded bottom corners, so the dark footer reads as peeking out from
   under a rounded-corner sheet — same trick, reversed, for a body that reads as one
   continuously rounded shape from top to bottom */
.section:has(+ footer.site-footer){position:relative;z-index:2;margin-bottom:-40px;border-radius:0 0 var(--radius-xl) var(--radius-xl);background-color:var(--paper);background-image:var(--texture);background-size:var(--texture-size);}
.hero-orb{position:absolute;border-radius:50%;background:var(--grad);filter:blur(100px);opacity:.4;pointer-events:none;}
.hero-orb-a{width:35vw;height:35vw;top:0%;right:15%;}
.hero-wall{position:absolute;inset:0;display:flex;gap:24px;padding:20px 32px 20px 38%;filter:saturate(.85);align-items:flex-start;pointer-events:none;}
.hero-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;align-self:flex-start;animation:herowallscroll 60s linear infinite;will-change:transform;}
.hero-col:nth-child(2){animation-duration:76s;animation-direction:reverse;}
.hero-col:nth-child(3){animation-duration:66s;}
.hero-col:nth-child(4){animation-duration:84s;animation-direction:reverse;}
.wall-shot{flex:0 0 auto;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#2b2318,#181310);box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);}
.wall-shot img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes herowallscroll{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes herowallscrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.hero-scrim{position:absolute;inset:0;background:
    radial-gradient(62% 78% at 72% 46%,transparent 0%,transparent 32%,rgba(31,25,18,.5) 62%,var(--deep) 100%),
    linear-gradient(100deg,var(--deep) 0%,var(--deep) 26%,rgba(31,25,18,.86) 38%,rgba(31,25,18,.32) 52%,transparent 66%);}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:calc(var(--header-h) + 64px) 24px 100px;height:100%;display:flex;align-items:center;}
.hero-inner.short{padding:calc(var(--header-h) + 48px) 24px calc(68px + 40px);}
.hero-text{max-width:700px;color:#F5EEE3;}
.hero-text>*{transform-origin:left center;}
.hero-text .kicker{color:var(--amber);}
.hero-text .breadcrumb{font-family:var(--font-mono);font-size:12px;color:#A2947E;margin-bottom:16px;display:flex;gap:8px;align-items:center;}
.hero-text .breadcrumb{opacity:0;}
.hero-text .breadcrumb a{text-decoration:none;color:#A2947E;}
.hero-text .breadcrumb a:hover{color:var(--amber);}
.hero-text h1{font-size:clamp(34px,4.8vw,54px);font-weight:700;color:#fff;line-height:1.1;margin:0 0 18px;}
.hero-text h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-lede{font-size:17.5px;line-height:1.55;color:#CDC0AD;max-width:490px;margin:0 0 30px;}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.hero-pills{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.hero-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:22px;padding:8px 14px;font-size:12.5px;font-weight:500;color:#F5EEE3;backdrop-filter:blur(8px);}

.hero-proof{display:flex;align-items:center;gap:18px;margin-top:22px;}
.contact-proof{display:flex;align-items:center;gap:14px;margin:0;}
.proof-logos{display:flex;flex-shrink:0;}
.proof-logo{width:48px;height:48px;border-radius:50%;background:#fff;margin-left:-14px;box-shadow:0 2px 8px rgba(0,0,0,.35);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}
.proof-logo:first-child{margin-left:0;}
.proof-logo img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box;display:block;}
.hero-proof .proof-text{font-size:14px;font-weight:600;color:#F5EEE3;font-family:var(--font-display);}
.proof-claim{margin:0;font-size:14px;font-weight:700;line-height:1.5;color:#F5EEE3;font-family:var(--font-display);}
.proof-claim .verified-badge{display:inline;width:15px;height:15px;vertical-align:-2px;margin:0 2px 0 1px;}

@media(max-width:900px){
  .hero-wall{padding-left:22%;opacity:.26;}
  .hero-inner{padding:calc(var(--header-h) + 40px) 20px 76px;}
  .hero-inner.short{padding:calc(var(--header-h) + 32px) 20px 56px;}
  .hero-text{max-width:100%;}
  .hero-lede{max-width:100%;}
}
@media(max-width:600px){
  /* rotated from the desktop's vertical columns squeezed into the right-hand third —
     at this width the text runs full-bleed over the wall anyway, so three full-width
     horizontal bands running left/right read as an intentional texture across the
     whole hero instead of mockups cropped into a narrow corner strip */
  .hero-wall{padding:0;flex-direction:column;align-items:stretch;justify-content:space-evenly;gap:14px;opacity:.3;}
  .hero-col{flex:0 0 auto;align-self:stretch;flex-direction:row;height:92px;gap:14px;animation-name:herowallscrollx;}
  .hero-orb{display:none;}
  .hero-inner{padding:calc(var(--header-h) + 24px) 18px 48px;}
  .hero-inner.short{padding:calc(var(--header-h) + 20px) 18px 40px;}
  .hero-proof{flex-wrap:wrap;}
  .proof-claim{max-width:100%;}
}
@media(max-width:720px){
  .hero + .section{margin-top:-22px;border-radius:18px 18px 0 0;}
  .section:has(+ footer.site-footer){margin-bottom:-22px;border-radius:0 0 18px 18px;}
  .site-footer{padding-top:86px;}
}
@media (prefers-reduced-motion:reduce){
  .hero{transform:none !important;}
}

/* ---------- inline cta band (subpages) ---------- */
.inline-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--deep);color:#F5EEE3;border-radius:20px;padding:38px 42px;}
.inline-cta h3{color:#fff;margin-bottom:4px;}
.inline-cta p{color:#BCAF9B;margin:0;font-size:14.5px;}

/* ---------- final cta band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:22px;background:var(--grad);color:#fff;padding:74px 48px;text-align:center;}
@media (max-width:640px){.cta-band{padding:54px 24px;}}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 30px;}
.cta-band .btn.primary{background:#fff;color:var(--flame-deep);box-shadow:0 6px 22px rgba(0,0,0,.18);}


/* ---------- pricing tables ---------- */
.price-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch;}
.price-table{width:100%;border-collapse:collapse;min-width:620px;}
.price-table th,.price-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top;color:var(--ink-soft);}
.price-table thead tr{background:var(--grad);}
.price-table thead th{font-family:var(--font-display);font-weight:700;font-size:15.5px;background:transparent;color:#fff;white-space:nowrap;}
.price-table tbody th{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap;font-weight:600;text-align:left;}
.price-table tr.row-price td,.price-table tr.row-price th{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);}
.price-table td.yes{color:var(--flame-deep);font-weight:600;}
.price-table td.yes::before{content:"✓ ";color:var(--flame);font-weight:700;}
.price-table td.no{color:var(--line-strong);}
.price-table tr:last-child td,.price-table tr:last-child th{border-bottom:none;}
.price-table th.highlight,.price-table td.highlight{background:var(--tint);}
.price-table thead th.highlight{background:transparent;color:#fff;}
.price-table .vat-note{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:400;color:var(--ink-soft);letter-spacing:.02em;margin-top:3px;}
.compare-table td.ico-yes,.compare-table td.ico-no{text-align:center;font-size:17px;font-weight:700;}
.compare-table td.ico-yes{color:#1E9E5A;}
.compare-table td.ico-no{color:#D6483A;}
.price-note{font-size:12.5px;color:var(--ink-soft);margin-top:12px;font-family:var(--font-mono);}
/* mobile pricing: one self-contained card per plan (built by buildPriceCards() in
   site.js from the same table markup) instead of stacking by row, which forced
   people to track a single plan's numbers across several disconnected cards */
.price-cards{display:none;}
@media(max-width:680px){
  .price-wrap{display:none;}
  .price-cards{display:flex;flex-direction:column;gap:16px;}
  .price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;}
  .price-card.highlight{border:2px solid var(--flame);background:var(--tint);}
  .price-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:8px;border-bottom:1px dashed var(--line-strong);}
  .price-card-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);}
  .price-card-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--grad);padding:4px 9px;border-radius:20px;white-space:nowrap;}
  .price-card-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;font-size:13.5px;}
  .price-card-label{color:var(--ink-soft);}
  .price-card-value{font-weight:600;color:var(--ink);text-align:right;}
  .price-card-row.price-row .price-card-label,.price-card-row.price-row .price-card-value{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);}
  .price-card-value.no{color:var(--line-strong);font-weight:400;}
  .price-card-value.yes{color:var(--flame-deep);}
  .price-card-value.ico-yes{color:#1E9E5A;font-weight:700;}
  .price-card-value.ico-no{color:#D6483A;font-size:11.5px;font-weight:600;}
}

/* ---------- notice / transparency box ---------- */
.notice{border-left:3px solid var(--amber);background:var(--tint);padding:16px 20px;font-size:14px;color:var(--ink);border-radius:0 8px 8px 0;}
.notice strong{color:var(--flame-deep);}

/* ---------- FAQ ---------- */
.faq-group{max-width:760px;margin:0 auto;counter-reset:faqno;}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:10px;overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease;}
.faq-item[open]{box-shadow:var(--shadow);border-color:var(--line-strong);}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:18px 22px;font-family:var(--font-display);font-weight:600;font-size:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{counter-increment:faqno;content:counter(faqno,decimal-leading-zero);font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--ink-faint);flex-shrink:0;}
.faq-item summary>*{flex:1;}
.faq-item summary::after{content:"";width:13px;height:13px;flex-shrink:0;background:var(--flame);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s ease;}
.faq-item[open] summary::after{transform:rotate(180deg);}
.faq-item .faq-body{padding:0 22px 20px 54px;color:var(--ink-soft);font-size:15px;overflow:hidden;transition:height .2s ease;}
.faq-item .faq-body p{margin-bottom:0;}

/* ---------- FAQ two-column layout: plain grid on the page's own background ---------- */
.faq-split{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:start;}
.faq-split .faq-group{max-width:none;margin:0;}
.faq-intro{position:relative;}
.faq-watermark{position:absolute;right:-6px;bottom:-46px;font-family:var(--font-display);font-weight:700;font-size:150px;line-height:1;letter-spacing:-.04em;color:rgba(31,25,18,.035);pointer-events:none;user-select:none;z-index:0;}
.faq-intro .c-label{color:var(--ink-faint);}
.faq-intro .c-value{color:var(--ink);}
.faq-intro .contact-list li{border-top-color:var(--line-strong);}
.faq-intro .c-hours{border-top-color:var(--line-strong);}
.faq-intro .c-hours-label{color:var(--ink-faint);}
.faq-intro .c-hours-row{color:var(--ink);border-top-color:var(--line-strong);}
.faq-intro .c-hours-row span:last-child{color:var(--ink-soft);}
@media(max-width:900px){.faq-split{grid-template-columns:1fr;gap:32px;margin-top:8px;}}

/* ---------- bio / über mich ---------- */
.bio-block{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:center;}
@media (max-width:760px){.bio-block{grid-template-columns:1fr;text-align:center;}}
.bio-photo{width:100%;border-radius:var(--radius-lg);overflow:hidden;background:var(--grad);box-shadow:0 26px 52px rgba(232,82,0,.24);aspect-ratio:3/4;position:relative;}
.bio-photo img{width:100%;height:100%;object-fit:contain;object-position:bottom center;display:block;}
.value-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
@media (max-width:760px){.value-tags{justify-content:center;}}
.value-tag{font-family:var(--font-mono);font-size:12px;border:1px solid var(--line-strong);border-radius:20px;padding:6px 13px;color:var(--ink-soft);}

.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;}
@media (max-width:520px){.expertise-grid{grid-template-columns:1fr;}}
.expertise-item{display:flex;gap:12px;align-items:flex-start;}
.expertise-item .e-icon{width:38px;height:38px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0;box-shadow:0 3px 10px rgba(232,82,0,.28);}
.expertise-item h3{font-size:15.5px;margin-bottom:3px;}
.expertise-item p{font-size:13.5px;color:var(--ink-soft);margin:0;}

/* ---------- testimonial ---------- */
.quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow);}
.quote-card p{font-size:16px;color:var(--ink);margin-bottom:16px;}
.quote-card .q-who{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);}
.quote-card .q-mark{font-family:var(--font-display);font-size:38px;color:var(--amber);line-height:1;margin-bottom:8px;display:block;}

/* ---------- referenzen: fixed-size testimonial cards ---------- */
/* three panels share the row equally at all times — no hover/tap resize.
   Each card carries its own permanent legibility scrim + review text,
   anchored to the bottom; the only hover polish is a slight image zoom. */
.hover-cases{display:flex;gap:16px;}
.hover-case{position:relative;flex:1 1 0%;overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);height:500px;}
.hover-case-media{position:absolute;inset:0;}
.hover-case-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.hover-case:hover .hover-case-media img{transform:scale(1.045);}
.hover-case::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(31,25,18,.02) 0%,rgba(31,25,18,.1) 32%,rgba(31,25,18,.48) 58%,rgba(31,25,18,.88) 100%);}
.hover-case-review{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 24px 22px;background:transparent;border:none;box-shadow:none;border-radius:0;}
.hover-case-review .q-mark{color:var(--amber);font-size:30px;margin-bottom:4px;}
.hover-case-review p{color:#fff;font-size:14px;line-height:1.55;margin-bottom:12px;}
.hover-case-review .q-who{color:rgba(255,255,255,.72);}
.hover-case-media.ph{display:flex;align-items:center;justify-content:center;background:var(--grad-soft),linear-gradient(135deg,#2b2318,#181310);background-blend-mode:overlay;}
.hover-case-media.ph img{display:none;}
.hover-case-media.ph::after{content:"Bild folgt";color:rgba(255,255,255,.55);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-align:center;padding:0 14px;}
.hover-case-media.ph[data-ph]::after{content:attr(data-ph);line-height:1.5;}
@media (max-width:900px){
  .hover-cases{flex-direction:column;}
  .hover-case{flex:none;height:430px;}
}
@media (prefers-reduced-motion:reduce){
  .hover-case-media img{transition:none;}
}

/* ---------- google reviews widget-style panel ----------
   Font is deliberately scoped to this panel only: Google's own review UI
   is set in Google Sans (headings) / Roboto (body), neither of which is
   the site's Space Grotesk/IBM Plex system. Google Sans isn't published
   on Google Fonts, so Roboto — the closest freely-licensed match, and
   the actual typeface Google ships on Search/Maps/Android — stands in
   for both roles here to read as authentically "Google" at a glance. */
.greviews-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);padding:36px;font-family:'Roboto',Arial,sans-serif;}
.greviews-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:28px;}
.greviews-brand{display:flex;align-items:center;gap:10px;}
/* Google's real wordmark SVG lives inside an obfuscated, blob-rendered widget bundle that
   couldn't be extracted byte-for-byte, so the wordmark is rebuilt as brand-colored letters
   (Google's own published per-letter palette) rather than risking a mistraced path. */
.g-wordmark{font-family:'Roboto',Arial,sans-serif;font-weight:700;}
.g-wordmark b{font-weight:700;}
.greviews-brand-text{font-family:'Roboto',Arial,sans-serif;font-weight:400;font-size:26px;color:var(--ink);}
.greviews-rating{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.greviews-score{font-family:'Roboto',Arial,sans-serif;font-weight:700;font-size:16px;}
.greviews-stars{color:var(--amber);letter-spacing:2px;font-size:14px;}
.greviews-panel .btn.g-write-review{font-family:'Roboto',Arial,sans-serif;font-weight:700;background:#197BFF;color:#fff;border:none;border-radius:24px;padding:9px 21px;box-shadow:none;}
.greviews-panel .btn.g-write-review:hover{background:#1569e0;}
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.review-avatar{position:relative;width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-family:'Roboto',Arial,sans-serif;font-weight:700;font-size:15px;}
.review-avatar .g-badge{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--surface);display:flex;align-items:center;justify-content:center;}
.review-avatar .g-badge svg{width:100%;height:100%;}
.review-name{display:inline-flex;align-items:center;gap:4px;font-family:'Roboto',Arial,sans-serif;font-weight:500;font-size:14.5px;color:var(--ink);}
.review-verified{flex-shrink:0;width:14px;height:14px;}
.review-time{font-family:'Roboto',Arial,sans-serif;font-size:11px;color:var(--ink-soft);margin-top:2px;}
.review-stars{color:var(--amber);letter-spacing:2px;font-size:13.5px;margin-bottom:10px;}
.review-text{font-family:'Roboto',Arial,sans-serif;font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.review-more-btn{display:inline;background:none;border:none;padding:0;margin:0;font-family:'Roboto',Arial,sans-serif;font-size:14.5px;font-weight:500;color:#197BFF;cursor:pointer;}
.review-more-btn:hover{text-decoration:underline;}
@media(max-width:640px){.greviews-panel{padding:24px;}}

/* ---------- floating google reviews badge ----------
   Colors/radius pulled from Elfsight's own "Floating Badge" template config
   (badgeBackgroundColor #FAFAFA, badgeCornerRadius 8, badgeRatingColor gold)
   so it reads as an authentic Google review badge, not an approximation. */
.float-stack{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.g-float-badge{display:flex;align-items:center;gap:10px;background:#FAFAFA;border-radius:8px;box-shadow:var(--shadow-lift);padding:12px 16px;text-decoration:none;font-family:'Roboto',Arial,sans-serif;cursor:default;}
.g-float-icon{width:26px;height:26px;flex-shrink:0;}
.g-float-info{display:flex;flex-direction:column;line-height:1.25;}
.g-float-score-row{display:flex;align-items:center;gap:6px;}
.g-float-score{font-weight:700;font-size:14.5px;color:rgba(17,17,17,1);}
.g-float-stars{color:rgba(252,191,2,1);font-size:12px;letter-spacing:1px;}
.g-float-label{font-size:10px;color:rgba(17,17,17,.5);}
@media(max-width:640px){
  /* on short mobile viewports this fixed badge sits directly over the hero's
     bottom-most content (proof line / CTA row) at first paint — the same
     trust signal already lives in the full reviews panel further down every
     page, so the floating teaser is dropped rather than left overlapping. */
  .g-float-badge{display:none;}
}

/* ---------- floating whatsapp button ---------- */
.wa-float-badge{position:relative;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.4);color:#fff;transition:transform .2s ease,box-shadow .2s ease;}
.wa-float-badge svg{width:29px;height:29px;}
.wa-float-badge:hover,.wa-float-badge:focus-visible{transform:scale(1.06);box-shadow:0 10px 30px rgba(37,211,102,.5);}

/* ---------- shared WhatsApp QR popup ----------
   mobile users have WhatsApp installed and logged in, so their click goes straight
   to the wa.me link (site.js only intercepts the click ≥641px). On desktop the
   markup below is reused as the *source content* (text + QR image) that site.js
   clones into the full-screen .wa-modal on click — see initWaQrGate() — rather
   than being shown in place, so it stays hidden here at all times.
   The QR image (wa-qr-svg.svg) is a high-resolution crop of WhatsApp's exported
   code (an SVG wrapper around an embedded raster source, not true vector paths —
   kept for its much higher source resolution than a plain PNG export) with the
   branded header removed. A margin was added around the crop, via the SVG's
   viewBox rather than new pixels, for the QR spec's "quiet zone" so scanners can
   still locate it reliably; the code pattern itself is untouched. */
.js-wa-link{position:relative;}
.wa-qr-popup{position:absolute;left:0;bottom:calc(100% + 12px);transform:translateY(6px);background:#fff;color:#4a4038;border-radius:14px;padding:16px;width:220px;text-align:center;box-shadow:var(--shadow-lift);opacity:0;visibility:hidden;pointer-events:none;z-index:30;}
.wa-qr-popup-text{display:block;font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1.45;margin-bottom:12px;}
.wa-qr-popup img{display:block;width:100%;height:auto;border-radius:8px;}

/* ---------- WhatsApp modal (desktop click target) ----------
   Clicking a .js-wa-link on desktop (≥641px) opens this full-screen modal instead
   of navigating — a dead-end wa.me tab can't be attributed back to the ad click
   anyway, so the click itself (still on the same device/session as the ad click,
   unlike a later QR scan on a phone) is what gets tracked as the conversion.
   The modal offers both paths onward: a direct wa.me button for WhatsApp
   Web/Desktop users, and the QR code for scanning with a phone. */
.wa-modal-backdrop{position:fixed;inset:0;background:rgba(30,20,12,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200;opacity:0;pointer-events:none;transition:opacity .22s ease;}
.wa-modal-backdrop.is-open{opacity:1;pointer-events:auto;}
.wa-modal-panel{position:relative;background:#fff;color:#4a4038;border-radius:24px;padding:48px 40px 40px;width:min(440px,100%);max-height:90vh;overflow-y:auto;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(14px) scale(.98);transition:transform .22s ease;}
.wa-modal-backdrop.is-open .wa-modal-panel{transform:translateY(0) scale(1);}
.wa-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease;}
.wa-modal-close:hover{background:var(--sand);border-color:var(--line-strong);}
.wa-modal-panel .wa-qr-popup-text{font-size:15px;margin-bottom:20px;}
.wa-modal-panel img{display:block;width:min(260px,80%);height:auto;border-radius:14px;margin:0 auto 24px;box-shadow:var(--shadow);}
.wa-modal-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#25D366;color:#fff;font-family:var(--font-display);font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:999px;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;box-shadow:0 8px 22px rgba(37,211,102,.35);}
.wa-modal-cta:hover{background:#20BD5A;box-shadow:0 10px 28px rgba(37,211,102,.42);}
.wa-modal-or{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:20px 0 16px;}

/* ---------- stat strip ---------- */
.stat-strip{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;flex-wrap:wrap;box-shadow:var(--shadow);}
.stat-strip>div{flex:1;min-width:150px;padding:22px 24px;border-right:1px dashed var(--line);}
.stat-strip>div:last-child{border-right:none;}
.stat-strip .s-num{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;}
.stat-strip .s-label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-top:3px;}

/* ---------- kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
/* mobile shows the form before the info block — reordered visually via grid `order`
   only, so desktop keeps rendering the markup's actual c-info-then-form DOM order */
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-grid .contact-form{order:1;}
  .contact-grid .c-info{order:2;}
}
.contact-grid .c-info{background:var(--deep);color:#F5EEE3;padding:42px;}
.contact-grid .c-info h3{color:#fff;}
.contact-grid .c-info p{color:#BCAF9B;font-size:14.5px;}
@media (min-width:761px){.contact-grid .c-info{border-right:1px solid var(--deep-line);}}
.contact-list{list-style:none;margin:20px 0 0;padding:0;}
.contact-list li{padding:14px 0;border-top:1px dashed var(--deep-line);display:flex;gap:14px;align-items:flex-start;}
.contact-list li:first-child{padding-top:0;border-top:none;}
.c-ico{display:flex;align-items:center;justify-content:center;color:var(--amber);flex-shrink:0;margin-top:2px;}
.c-ico svg{width:21px;height:21px;display:block;}
.c-text{display:flex;flex-direction:column;gap:3px;padding-top:3px;min-width:0;}
.c-label{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#9C8E7C;}
.c-value{font-size:14.5px;color:#F5EEE3;text-decoration:none;font-weight:500;}
a.c-value:hover{color:var(--amber);}

.c-hours{margin-top:22px;padding-top:20px;border-top:1px dashed var(--deep-line);}
.c-hours-label{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#9C8E7C;margin-bottom:12px;}
.c-hours-label svg{width:13px;height:13px;flex-shrink:0;}
.c-hours-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#F5EEE3;padding:7px 0;border-top:1px dashed var(--deep-line);}
.c-hours-row:first-of-type{border-top:none;padding-top:0;}
.c-hours-row span:last-child{font-family:var(--font-mono);font-size:12.5px;color:#BCAF9B;}
.contact-form{padding:42px;background:var(--surface);color:var(--ink);}
.contact-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:11px 13px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);margin-bottom:16px;background:var(--paper);}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--flame);}
.contact-form textarea{resize:vertical;min-height:100px;}
.check-group{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.check-group-inline{gap:8px;}
.contact-form label.check-item{display:inline-flex;align-items:center;gap:9px;width:auto;border:1px solid var(--line-strong);border-radius:20px;padding:9px 16px 9px 12px;font-family:var(--font-body);font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--ink-soft);background:var(--paper);cursor:pointer;margin:0;transition:border-color .15s,background .15s,color .15s;}
.contact-form label.check-item:hover{border-color:var(--ink-faint);}
.contact-form label.check-item:has(input:checked){border-color:var(--flame);background:var(--tint);color:var(--flame-deep);}
.check-item input[type="checkbox"],.check-item input[type="radio"]{-webkit-appearance:none;appearance:none;width:17px;height:17px;min-width:17px;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--surface);margin:0;padding:0;display:inline-grid;place-content:center;cursor:pointer;flex:none;transition:border-color .15s,background .15s;}
.check-item input[type="radio"]{border-radius:50%;}
.check-item input[type="checkbox"]::before,.check-item input[type="radio"]::before{content:"";width:9px;height:9px;border-radius:2px;transform:scale(0);transition:transform .1s ease-in;box-shadow:inset 1em 1em var(--flame);}
.check-item input[type="radio"]::before{border-radius:50%;}
.check-item input:checked{border-color:var(--flame);background:var(--tint);}
.check-item input:checked::before{transform:scale(1);}
.k-url-wrap{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .25s ease,opacity .2s ease,visibility 0s .25s;}
.k-url-wrap.show{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .25s ease,opacity .2s ease;}
.k-url-wrap-inner{overflow:hidden;min-height:0;}
.k-url-wrap.show .k-url-wrap-inner{margin-bottom:16px;}
.k-url-wrap input{margin-bottom:0!important;}

/* ---------- calendly booking ---------- */
.calendly-wrap{margin:0;border:none;border-radius:var(--radius-lg);overflow:hidden;box-shadow:none;background:transparent;}
.calendly-inline-widget{width:100%;min-width:320px;height:700px;color-scheme:light;background:transparent;}
.calendly-inline-widget iframe{color-scheme:light;background:transparent;}
@media (max-width:640px){.calendly-inline-widget{height:820px;}}
.form-success{display:none;text-align:center;padding:20px 0;}
.form-success.show{display:block;}
.form-success.show ~ *{display:none;}
.form-error{display:none;margin:0 0 16px;padding:12px 16px;border-radius:8px;background:#FBEAEA;border:1px solid #E3B5B5;color:#8A2E2E;font-size:13.5px;line-height:1.5;}
.form-error.show{display:block;}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.consent-row{display:flex;align-items:flex-start;gap:10px;margin:2px 0 18px;}
.consent-row input[type="checkbox"]{margin-top:3px;width:17px;height:17px;min-width:17px;-webkit-appearance:none;appearance:none;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--paper);display:inline-grid;place-content:center;cursor:pointer;flex:none;transition:border-color .15s,background .15s;}
.consent-row input[type="checkbox"]::before{content:"";width:9px;height:9px;border-radius:2px;transform:scale(0);transition:transform .1s ease-in;box-shadow:inset 1em 1em var(--flame);}
.consent-row input[type="checkbox"]:checked{border-color:var(--flame);background:var(--tint);}
.consent-row input[type="checkbox"]:checked::before{transform:scale(1);}
.consent-row label{font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink-soft);font-family:var(--font-body);line-height:1.5;margin:0;}
.consent-row label a{color:var(--flame);text-decoration:underline;}
.contact-form button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;}

/* ---------- process list (alternate, used on subpages) ---------- */
.process-list{max-width:780px;margin:0 auto;}
.process-step{display:grid;grid-template-columns:70px 1fr;gap:24px;padding:36px 0;border-top:1px dashed var(--line-strong);}
.process-step:first-child{border-top:none;padding-top:0;}
.process-step .ps-no{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;box-shadow:0 4px 14px rgba(232,82,0,.3);flex-shrink:0;}
.process-step h3{margin-bottom:4px;}
.process-step p{color:var(--ink-soft);margin-bottom:0;}
@media(max-width:560px){.process-step{grid-template-columns:1fr;}.process-step .ps-no{margin-bottom:4px;}}

/* ---------- footer ---------- */
.site-footer{background:var(--deep);color:#BCAF9B;padding:104px 0 36px;}
.site-footer .brand{color:#F5EEE3;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.site-footer h3{color:#F5EEE3;font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:14px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:9px;}
.site-footer a{text-decoration:none;font-size:14px;color:#BCAF9B;}
.site-footer a:hover{color:var(--amber);}
.site-footer p{font-size:14px;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(245,238,227,.08);color:#BCAF9B;transition:background .2s ease,color .2s ease;}
.footer-social-link svg{width:19px;height:19px;}
.footer-social-link:hover{background:var(--grad);color:#fff;}
.footer-bottom{border-top:1px solid var(--deep-line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;font-family:var(--font-mono);}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;}
.legal h2{font-size:22px;margin-top:44px;}
.legal h3{font-size:17px;margin-top:28px;}
.legal p,.legal li{color:var(--ink-soft);font-size:15px;}
.fill-in{color:var(--flame-deep);font-weight:600;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .45s ease-out,transform .45s ease-out;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* staggered reveal for card grids — each sibling fades in a beat later */
.grid>.reveal:nth-child(2){transition-delay:.07s;}
.grid>.reveal:nth-child(3){transition-delay:.14s;}
.grid>.reveal:nth-child(4){transition-delay:.21s;}
.grid>.reveal:nth-child(5){transition-delay:.28s;}
.grid>.reveal:nth-child(6){transition-delay:.35s;}
.grid>.reveal:nth-child(7){transition-delay:.42s;}
.grid>.reveal:nth-child(8){transition-delay:.49s;}

/* ---------- ablauf step-flow: horizontal stepper on top, detail card below ---------- */
.ablauf-flow{display:flex;flex-direction:column;gap:40px;margin-top:48px;}
.ablauf-flow[hidden]{display:none;}
.ablauf-list{position:relative;display:flex;gap:2px;counter-reset:ablaufno;}
.ablauf-list::before{content:"";position:absolute;top:23px;left:var(--ablauf-line-start,23px);width:var(--ablauf-line-width,calc(100% - 46px));height:1px;background:var(--line-strong);z-index:0;}
.ablauf-item{all:unset;box-sizing:border-box;position:relative;z-index:1;cursor:pointer;flex:1 1 0;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:4px 6px;}
.ablauf-item-no{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-faint);flex-shrink:0;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;background:var(--paper);transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;}
.ablauf-item-title{display:block;font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink-soft);transition:color .2s ease;}
.ablauf-item-title::before{counter-increment:ablaufno;content:counter(ablaufno,decimal-leading-zero)" – ";font-family:var(--font-mono);font-weight:600;color:var(--ink-faint);}
.ablauf-item.active .ablauf-item-no{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(232,82,0,.32);transform:scale(1.08);}
.ablauf-item.active .ablauf-item-title{color:var(--ink);}
.ablauf-panels{display:grid;}
.ablauf-panel{position:relative;overflow:hidden;grid-area:1/1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;}
.ablauf-panel.active{opacity:1;transform:none;pointer-events:auto;}
.ablauf-panel-no{font-family:var(--font-mono);font-size:13px;color:var(--flame-deep);margin-bottom:10px;}
.ablauf-panel-watermark{position:absolute;bottom:-30px;right:24px;font-family:var(--font-display);font-weight:800;font-size:132px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.16;margin:0;pointer-events:none;user-select:none;z-index:0;}
.ablauf-panel h3,.ablauf-panel p{position:relative;z-index:1;max-width:520px;}
.ablauf-panel p{margin-bottom:0;}
.ablauf-panel img{position:relative;z-index:1;border-radius:var(--radius-lg);margin-top:18px;width:100%;display:block;}
@media(max-width:900px){
  /* the horizontal tab list needed a scroll container to fit every step, which is
     exactly the overflow this is meant to avoid — mobile drops the tab/cross-fade
     interaction and instead shows every step's panel stacked vertically, always visible */
  .ablauf-list{display:none;}
  .ablauf-panels{display:flex;flex-direction:column;gap:20px;}
  .ablauf-panel{position:static;grid-area:auto;opacity:1;transform:none;pointer-events:auto;padding:28px;}
  /* with every panel visible at once, a faint 84px background numeral per card reads
     as decoration, not a step indicator — turned into an actual numbered badge instead,
     the same number the watermark always held, just no longer hidden in the background */
  .ablauf-panel-watermark{
    position:static;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin:0 0 14px;border-radius:50%;
    background:var(--grad);-webkit-background-clip:border-box;background-clip:border-box;
    color:#fff;-webkit-text-fill-color:#fff;
    font-size:14px;font-weight:700;line-height:1;opacity:1;
    box-shadow:0 4px 14px rgba(232,82,0,.3);
  }
}
@media (prefers-reduced-motion:reduce){.ablauf-panel,.ablauf-item,.ablauf-item-no{transition:none;}}

/* ---------- referenzen: 3-image gallery + popup button ---------- */
.ref-gallery{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:12px;}
.ref-shot{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,#2b2318,#181310);box-shadow:var(--shadow);aspect-ratio:4/3;}
.ref-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.ref-shot:hover img{transform:scale(1.05);}
.ref-shot-main{grid-row:1/3;aspect-ratio:auto;}
.ref-visit-btn{margin-top:18px;}
@media(max-width:900px){.ref-gallery{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.ref-gallery{grid-template-columns:1fr;}.ref-shot-main{grid-row:auto;}}
@media (prefers-reduced-motion:reduce){.ref-shot img{transition:none;}}

/* ---------- landing mockup cards: stacked full-width, no parallax ---------- */
.mockup-stack{position:relative;padding:0 var(--section-gutter);}
/* background image comes from --mc-bg/--mc-bg-mob custom properties (set inline per
   section) rather than a plain inline background-image, so the 720px breakpoint below
   can swap in the mobile-cropped image without fighting inline-style specificity */
.mockup-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-xl) var(--radius-xl) 0 0;aspect-ratio:2/1;min-height:620px;display:flex;align-items:center;background-image:var(--mc-bg);background-size:cover;background-position:center;background-color:var(--paper-deep);box-shadow:0 30px 60px -16px rgba(31,25,18,.35);}
/* last card has nothing overlapping it from below, so its bottom edge needs the full rounded silhouette */
.mockup-card:last-child{border-radius:var(--radius-xl);}
/* the next card's -40px overlap hides this card's bottom 40px, so centering against the full
   box height reads as slightly too low — this padding excludes that hidden strip from the
   centering calculation, re-centering the content within what's actually visible */
.mockup-card:not(:last-child){padding-bottom:40px;}
/* standalone use (a single floating card, not part of a stacked run) — full rounded silhouette,
   inset like the site's other floating panels, no overlap so no bottom-shadow band or centering compensation.
   comes after the :not(:last-child) rule above so it wins the equal-specificity cascade tie. */
.mockup-card.solo{margin:var(--section-gutter);border-radius:var(--radius-xl);padding-bottom:0;}
.mockup-card.solo::after{content:none;}
/* directional scrim: strongest on the side the text sits, fading toward the visible image.
   content-left cards and content-right (.rev) cards use different presets (picked by
   comparing 5 live variants), each lighter on the empty image side than a uniform scrim would be. */
.mockup-card::before{content:"";position:absolute;inset:0;z-index:0;background:
    linear-gradient(180deg,rgba(31,25,18,.06) 0%,rgba(31,25,18,.18) 100%),
    linear-gradient(to right,rgba(31,25,18,.78) 0%,rgba(31,25,18,.58) 32%,rgba(31,25,18,.06) 52%,transparent 66%);}
.mockup-card.rev::before{background:
    linear-gradient(180deg,rgba(31,25,18,.08) 0%,rgba(31,25,18,.24) 100%),
    linear-gradient(to left,rgba(31,25,18,.8) 0%,rgba(31,25,18,.66) 34%,rgba(31,25,18,.1) 58%,transparent 74%);}
/* cards with another card overlapping them from below get a soft shadow band along their own
   bottom edge, so the card underneath reads as casting a shadow up onto the one above it */
.mockup-card:not(:last-child)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 100%);}
.mockup-card+.mockup-card{margin-top:-40px;}
.mockup-card:nth-child(1){z-index:1;}
.mockup-card:nth-child(2){z-index:2;}
.mockup-card:nth-child(3){z-index:3;}
.mockup-card:nth-child(4){z-index:4;}
.mockup-card>.wrap{display:flex;width:100%;}
.mockup-card.rev>.wrap{justify-content:flex-end;}
.mockup-card-content{position:relative;z-index:1;max-width:520px;padding:64px 0;color:#fff;}
.mockup-card-content .kicker{color:var(--amber);}
.mockup-card-content .kicker::before{background:var(--amber);}
.mockup-card-content h2{color:#fff;}
.mockup-card-content .lede{color:rgba(255,255,255,.88);max-width:100%;font-size:16px;}
.mockup-card-content .check-list{margin-bottom:28px;}
.mockup-card-content .check-list li{border-color:rgba(255,255,255,.22);color:#fff;}
.mockup-card-content .price-note{color:rgba(255,255,255,.8);}
@media(max-width:1180px){
  /* aspect-ratio + min-height together force width=2×height once the card's
     natural width drops below ~1240px (620px min-height × 2) — that overflows
     the layout well into tablet widths. Dropping the ratio here lets
     min-height alone govern the height so width can never be pulled wider
     than its container. */
  .mockup-card{aspect-ratio:auto;}
}
@media(max-width:720px){
  /* full-bleed, single consistent portrait ratio, and the lede dropped — the desktop
     copy-heavy treatment (side gutter, free aspect ratio, intro paragraph) doesn't fit
     a narrow frame, so mobile gets its own simpler, uniform card shape */
  .mockup-stack{padding:0;}
  .mockup-card{aspect-ratio:1/2;min-height:0;align-items:flex-end;background-image:var(--mc-bg-mob,var(--mc-bg));}
  /* full width (no side gutter) but the rounded corners stay — dropping them
     entirely read as a bare rectangle rather than a deliberate full-bleed card */
  .mockup-card.solo{margin:0;border-radius:var(--radius-xl);}
  .mockup-card-content{padding:0 0 40px;max-width:100%;}
  .mockup-card-content .lede{display:none;}
  /* content is bottom-aligned on mobile now, so the veil needs to darken toward the
     bottom to keep that text legible — the old top-heavy scrim was tuned for the
     desktop's vertically-centered content and had it backwards for this layout */
  .mockup-card::before{background:
      linear-gradient(180deg,rgba(31,25,18,.06) 0%,rgba(31,25,18,.14) 40%,rgba(31,25,18,.5) 72%,rgba(31,25,18,.86) 100%);}
  .mockup-card.rev::before{background:
      linear-gradient(180deg,rgba(31,25,18,.1) 0%,rgba(31,25,18,.2) 40%,rgba(31,25,18,.58) 72%,rgba(31,25,18,.9) 100%);}
}