/* ============================================================
   Robert — Legal Landing Page
   Built on the Verum Systems design system (gold + charcoal)
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap');

@font-face { font-family:'TiemposHeadline'; src:url('fonts/TiemposHeadline-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'TiemposHeadline'; src:url('fonts/TiemposHeadline-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'TiemposHeadline'; src:url('fonts/TiemposHeadline-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'TiemposHeadline'; src:url('fonts/TiemposHeadline-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'TiemposHeadline'; src:url('fonts/TiemposHeadline-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'TiemposHeadline'; src:url('fonts/TiemposHeadline-Semibold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'TiemposText'; src:url('fonts/TiemposText-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

/* ---- Tokens ---- */
:root{
  --white:#FFFFFF;
  --cream-50:#FDFCFA; --cream-100:#FAF8F5; --cream-200:#F2EDE6; --cream-300:#E8E0D6;
  --stone-200:#DDD8D2; --stone-300:#C8C0B8; --stone-400:#A8A29E; --stone-500:#8C857E; --stone-600:#6E6760;
  --charcoal-700:#44403C; --charcoal-800:#2D2926; --charcoal-900:#1C1917; --black:#0F0E0D;
  /* Schalke 04 royal-blue accent ramp (variable names kept as --gold* for minimal churn) */
  --gold-light:#93C0EC; --gold:#2F6FBF; --gold-deep:#1C5BA6; --gold-dark:#103E74;

  --bg-canvas:#FAF8F5;
  --ink:#0E1B2A;            /* deep navy-charcoal used for the dark blocks */
  --ink-2:#13243A;

  --font-display:'TiemposHeadline','Georgia',serif;
  --font-text:'TiemposText','Georgia',serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --maxw:1340px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-canvas);
  color:var(--charcoal-900);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---- Shared atoms ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--charcoal-700);
  padding:7px 16px; border:1px solid var(--stone-300); border-radius:999px;
  background:transparent; white-space:nowrap;
}
.dark .eyebrow{ color:var(--cream-200); border-color:rgba(255,255,255,0.18); }

.section-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.08; letter-spacing:-0.02em;
}
.section-title .gold{ color:var(--gold); font-style:italic; font-weight:400; }
.dark .section-title{ color:var(--cream-100); }

.lede{ color:var(--charcoal-700); font-size:16px; line-height:1.7; }
.dark .lede{ color:rgba(255,255,255,0.7); }

/* Gold pill button */
.btn-gold{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px 13px 24px;
  background:var(--gold); color:var(--white);
  font-size:13px; font-weight:600; letter-spacing:0.02em;
  border:none; border-radius:999px;
  transition:background var(--ease) .25s, box-shadow var(--ease) .25s, transform .15s var(--ease);
}
.btn-gold:hover{ background:var(--gold-deep); box-shadow:0 6px 22px rgba(47,111,191,0.32); transform:translateY(-1px); }
.btn-gold .ico{
  display:grid; place-items:center; width:26px; height:26px; border-radius:999px;
  background:var(--charcoal-900); color:var(--white);
}
.btn-gold .ico svg{ width:13px; height:13px; }

/* round icon button (arrow / chevrons) */
.iconbtn{
  display:grid; place-items:center; width:46px; height:46px; border-radius:999px;
  border:1px solid var(--stone-300); background:transparent; color:var(--charcoal-900);
  transition:all .25s var(--ease);
}
.iconbtn:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }
.iconbtn svg{ width:18px; height:18px; }
.dark .iconbtn{ border-color:rgba(255,255,255,0.2); color:var(--cream-100); }
.dark .iconbtn:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }

.tag{
  display:inline-block; white-space:nowrap; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--charcoal-700); padding:6px 12px; border:1px solid var(--stone-300); border-radius:6px;
}

/* ============================================================
   DARK BLOCK base (rounded card on cream)
   ============================================================ */
.block{ max-width:var(--maxw); margin:14px auto; }
.dark{
  position:relative; overflow:hidden;
  background:var(--ink);
  color:var(--cream-100);
  border-radius:34px;
}
.dark .veil{ position:absolute; inset:0; z-index:0; }
.dark > .wrap, .dark .inner{ position:relative; z-index:2; }

/* photographic texture for dark blocks */
.lawbg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 70% 0%, rgba(35,57,84,0.55), transparent 60%),
    linear-gradient(180deg,#102036 0%, #0c1828 55%, #0a1422 100%);
}
.lawbg::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39.5H40M39.5 0V40' stroke='%23ffffff' stroke-opacity='0.03'/%3E%3C/svg%3E");
  opacity:.5;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100;
  width:calc(100% - 28px); max-width:var(--maxw);
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px; border-radius:22px;
  transition:transform .62s cubic-bezier(0.4,0,0.2,1), background .4s ease, backdrop-filter .4s ease, padding .4s ease, box-shadow .45s ease;
}
.nav.nav-scrolled{ background:rgba(10,18,32,0.85); backdrop-filter:blur(16px) saturate(1.25); box-shadow:0 16px 44px rgba(0,0,0,0.34); padding-top:13px; padding-bottom:13px; }
.nav.nav-hidden{ transform:translateX(-50%) translateY(calc(-100% - 26px)); }
/* anchor jumps clear the fixed header */
section[id]{ scroll-margin-top:104px; }
/* reserve space for lazy-loaded reviews widget so #contact doesn't drift up */
#testimonials [data-elfsight-app-lazy]{ display:block; min-height:480px; }
.brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--cream-100); letter-spacing:-0.01em; }
.brand img{ height:30px; width:auto; display:block; }
.brand .dot{ width:9px; height:9px; border-radius:999px; background:var(--gold); margin-top:6px; }
.navlinks{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:6px; border-radius:999px; backdrop-filter:blur(6px); }
.navlinks a{ font-size:13px; font-weight:500; color:rgba(255,255,255,0.78); padding:9px 16px; border-radius:999px; transition:.2s var(--ease); }
.navlinks a:hover{ color:var(--cream-100); background:rgba(255,255,255,0.08); }
.navlinks a.active{ color:var(--charcoal-900); background:var(--cream-100); }

/* hamburger + mobile menu (hidden on desktop) */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; border:1px solid rgba(255,255,255,0.2); border-radius:14px; background:rgba(255,255,255,0.06); backdrop-filter:blur(6px); cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:2px; margin:0 auto; background:var(--cream-100); border-radius:2px; transition:.28s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:780px; }
.hero .wrap{ padding:0; position:relative; height:780px; }
.hero-copy{ position:absolute; left:28px; top:212px; max-width:720px; z-index:5; }
.hero-cta{ margin-top:30px; }
.hero-cta-mobile{ display:none; }
.brand-sub, .badge-check, .hero-photo-m, .hero-head-m, .hero-divider-m, .hero-body-m, .hero-checks-m, .hero-trust-m{ display:none; }
.hero-headline .l1, .hero-headline .it{ display:block; white-space:nowrap; }
.hero-copy .hero-badge{ text-shadow:0 1px 10px rgba(8,16,28,0.55); }
.hero-headline{ text-shadow:0 2px 22px rgba(8,16,28,0.6); }
.hero-headline{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem,4.6vw,3.8rem); line-height:1.07; letter-spacing:-0.02em;
  color:var(--cream-100);
}
.hero-headline .it{ font-style:italic; color:var(--gold); display:block; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cream-100); padding:9px 16px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
  margin-bottom:26px;
}
.hero-badge .dotg{ width:8px; height:8px; border-radius:999px; background:var(--gold); }

.hero-portrait{ position:absolute; right:2%; bottom:140px; left:auto; transform:none; width:min(460px,42vw); height:560px; z-index:1; }
.hero-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 4%; -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%); mask-image:linear-gradient(to bottom,#000 86%,transparent 100%); }
.hero-glow{ position:absolute; left:72%; top:42%; transform:translate(-50%,-50%); width:620px; height:620px; max-width:70vw; border-radius:50%; background:radial-gradient(circle, rgba(47,111,191,0.20) 0%, rgba(47,111,191,0.07) 38%, transparent 70%); z-index:0; filter:blur(8px); pointer-events:none; }

.review-card{
  position:absolute; right:28px; top:104px; z-index:5;
  width:240px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  border-radius:18px; padding:16px; backdrop-filter:blur(10px);
}
.review-card .rev-top{ display:flex; align-items:center; gap:12px; }
.review-card .g{ width:34px; height:34px; border-radius:9px; background:var(--white); display:grid; place-items:center; font-weight:700; flex:0 0 auto; }
.review-card .stars{ color:var(--gold); font-size:12px; letter-spacing:1.5px; }
.review-card .rscore{ color:var(--cream-100); font-weight:600; font-size:13px; }
.review-card .rcount{ font-size:11px; color:rgba(255,255,255,0.55); margin-top:2px; white-space:nowrap; }
.review-card p{ font-size:12px; color:rgba(255,255,255,0.68); line-height:1.5; margin-top:12px; }

.hero-start{
  position:absolute; right:28px; top:300px; z-index:5;
}

/* stats bar — anchored to bottom of hero */
.stats{
  position:absolute; left:28px; right:28px; bottom:40px; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.12); padding-top:30px; gap:20px;
}
.stat{ display:flex; align-items:flex-start; gap:14px; }
.stat .num{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:400; color:var(--cream-100); line-height:1; }
.stat .lbl{ font-size:12px; color:rgba(255,255,255,0.6); margin-top:6px; }
.stat .si{ color:var(--gold); margin-top:4px; }
.stat .si svg{ width:22px; height:22px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:90px 0 70px; }
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start; }
.about h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.1; letter-spacing:-0.02em; margin-top:18px; }
.about .copy p{ color:var(--charcoal-700); margin-bottom:18px; line-height:1.75; }
.about .copy p.first{ color:var(--charcoal-900); font-size:18px; font-weight:500; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:64px 0 70px; }
.services-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:42px; }
.services-head .right{ display:flex; flex-direction:column; align-items:flex-end; gap:18px; text-align:right; }
.svc-nav{ display:flex; gap:10px; }
.svc-track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; }
.svc-track::-webkit-scrollbar{ display:none; }
.svc-card{
  scroll-snap-align:start; flex:0 0 300px; background:#0A1320;
  border:1px solid rgba(47,111,191,0.55); border-radius:24px; padding:22px; min-height:430px;
  display:flex; flex-direction:column; transition:.3s var(--ease);
  box-shadow:0 0 0 1px rgba(47,111,191,0.25), 0 18px 44px rgba(0,0,0,0.35);
}
.svc-card.feature{ background:#0A1320; color:var(--cream-100); border-color:rgba(47,111,191,0.55); box-shadow:0 0 0 1px rgba(47,111,191,0.25), 0 18px 44px rgba(0,0,0,0.35); }
.svc-card .svc-tag{ position:absolute; top:16px; left:16px; z-index:3; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:7px 14px; border-radius:999px; background:rgba(10,19,32,0.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.12); color:var(--cream-100); }
.svc-card.feature .svc-tag{ background:var(--gold); border-color:transparent; color:var(--white); }
.svc-card h3{ font-family:var(--font-display); font-weight:500; font-size:24px; line-height:1.1; margin:16px 0 14px; }
.svc-card.feature p{ color:rgba(255,255,255,0.6); }
.svc-imgwrap{ position:relative; height:200px; margin:-22px -22px 6px; border-radius:24px 24px 0 0; overflow:hidden; background:#0A1320; }
.svc-img{ width:100%; height:100%; object-fit:contain; display:block; background:transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
  transition:transform .35s var(--ease); }
.svc-card:hover .svc-img{ transform:scale(1.05); }
.svc-ic{ width:100%; height:140px; border-radius:16px; margin-bottom:16px; display:grid; place-items:center; background:rgba(47,111,191,0.1); }
.svc-card.feature .svc-ic{ background:rgba(28,25,23,0.06); }
.svc-ic svg{ width:50px; height:50px; stroke:var(--gold); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.svc-card.feature .svc-ic svg{ stroke:var(--gold-deep); }
.services-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.services-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(8,16,28,0.84), rgba(8,16,28,0.93)); }
.elfsight-wrap{ margin-top:8px; min-height:320px; }
.svc-card p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,0.6); margin-bottom:auto; }
.svc-card.feature p{ color:rgba(255,255,255,0.6); }
.svc-card .svc-foot{ display:flex; justify-content:flex-end; margin-top:18px; }

/* ============================================================
   WORKS TABLE
   ============================================================ */
.works{ padding:80px 0; }
.works-body{ display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:start; }
.works-cover{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow:0 12px 32px rgba(28,25,23,0.14); }
.works-list{ min-width:0; }
.works-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:50px; }
.works-head .right{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.thead{ display:grid; grid-template-columns:1fr 0.6fr 0.5fr 70px; gap:20px; padding:0 8px 16px; border-bottom:1px solid var(--stone-200); font-size:14px; color:var(--charcoal-700); }
.trow{
  position:relative; display:grid; grid-template-columns:1fr 0.6fr 0.5fr 70px; gap:20px; align-items:center;
  padding:24px 8px; border-bottom:1px solid var(--stone-200); transition:.25s var(--ease);
}
.trow .ttitle{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,2.2vw,1.9rem); letter-spacing:-0.01em; }
.trow .tdate{ font-size:15px; color:var(--charcoal-700); }
.trow.feature{ background:var(--gold); border-radius:18px; border-bottom-color:transparent; padding:24px 22px; margin:6px 0; color:var(--white); }
.trow.feature .tdate{ color:var(--white); }
.trow.feature .tag{ border-color:rgba(255,255,255,0.4); color:var(--white); }
.trow .arrow{ justify-self:end; }
.trow .pop{ position:absolute; right:90px; top:50%; transform:translateY(-50%); width:120px; height:62px; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.3); display:none; }
.trow.feature .pop{ display:block; }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ padding:70px 0 80px; }
.process-head{ margin-bottom:30px; }
.proc-stage{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch; }
.proc-cards{ display:contents; }
.proc-swipe-hint, .proc-cta-m{ display:none; }
.proc-intro{ grid-column:1 / -1; max-width:820px; margin-bottom:16px; z-index:6; }
.proc-card, .proc-card.glass{
  position:relative; left:auto !important; top:auto !important; width:auto; overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,0.075), rgba(255,255,255,0.022));
  border:1px solid rgba(47,111,191,0.55); border-radius:22px; padding:30px 28px 28px;
  min-height:250px; display:flex; flex-direction:column; color:var(--cream-100); z-index:3;
  box-shadow:0 0 0 1px rgba(47,111,191,0.25), 0 18px 44px rgba(0,0,0,0.35);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.proc-card:hover{ transform:translateY(-6px); border-color:rgba(47,111,191,0.78); box-shadow:0 0 0 1px rgba(47,111,191,0.4), 0 28px 64px rgba(0,0,0,0.42); }
@media (hover:none){ .proc-card:hover{ transform:none; border-color:rgba(47,111,191,0.55); box-shadow:0 0 0 1px rgba(47,111,191,0.25), 0 18px 44px rgba(0,0,0,0.35); } }
.proc-card .pnum{ font-family:var(--font-display); font-weight:500; font-size:5.4rem; line-height:0.82; letter-spacing:-0.03em; color:rgba(47,111,191,0.18); margin:0 0 auto -2px; }
.proc-card h4{ font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--cream-100); margin:22px 0 0; line-height:1.15; }
.proc-card p{ font-size:13px; color:rgba(255,255,255,0.66); line-height:1.62; margin-top:12px; }
.proc-node{ display:none; }
.proc-node.dark{ width:15px; height:15px; background:var(--gold); box-shadow:0 0 0 5px rgba(47,111,191,0.16); }
.proc-node.active{ width:22px; height:22px; background:var(--cream-100); border:4px solid var(--gold); box-shadow:0 0 0 5px rgba(47,111,191,0.14); }
.proc-svg{ display:none; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{ padding:80px 0; }
.testi-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:46px; }
.testi-body{ display:grid; grid-template-columns:260px 1fr; gap:36px; align-items:center; }
.testi-photo{ position:relative; border-radius:20px; overflow:hidden; height:300px; }
.testi-count{ position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,0.9); border-radius:8px; padding:4px 10px; font-size:12px; font-weight:600; }
.quote-card{ position:relative; background:var(--white); border:1px solid var(--stone-200); border-radius:24px; box-shadow:var(--shadow-md,0 4px 16px rgba(28,25,23,0.08)); padding:40px 44px; }
.quote-card .qhead{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.quote-card .qg{ width:34px; height:34px; border-radius:8px; border:1px solid var(--stone-200); display:grid; place-items:center; font-weight:700; }
.quote-card .qname{ font-weight:600; font-size:15px; }
.quote-card .qstars{ color:var(--gold); font-size:13px; letter-spacing:2px; }
.quote-card .qmark{ position:absolute; right:40px; top:30px; font-family:var(--font-display); font-size:90px; line-height:1; color:var(--stone-200); }
.quote-card .qtext{ font-family:var(--font-text); font-style:italic; font-size:19px; line-height:1.6; color:var(--charcoal-800); position:relative; z-index:2; }
.quote-card .qrole{ margin-top:20px; font-size:13px; font-weight:600; color:var(--charcoal-700); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:70px 0 76px; }
.faq-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.faq-left .lede{ margin:18px 0 26px; max-width:330px; }
.acc{ display:flex; flex-direction:column; gap:14px; }
.acc-item{ background:var(--cream-100); border-radius:16px; overflow:hidden; transition:.25s var(--ease); }
.acc-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-size:15px; font-weight:600; color:var(--charcoal-900); }
.acc-q .chev{ flex:0 0 auto; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; background:var(--cream-300); transition:.25s var(--ease); }
.acc-item.open .acc-q .chev{ background:var(--gold); transform:rotate(180deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.acc-a-inner{ padding:0 24px 22px; font-size:14px; color:var(--charcoal-700); line-height:1.6; max-width:90%; }

/* Ihr Vorteil benefit grid (reuses the dark FAQ frame) */
.vorteil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vben{ display:flex; align-items:center; gap:14px; background:var(--cream-100); border-radius:14px; padding:16px 18px; }
.vben .vic{ width:42px; height:42px; border-radius:10px; background:rgba(47,111,191,0.16); display:grid; place-items:center; color:var(--gold-deep); flex:0 0 auto; }
.vben .vic svg{ width:20px; height:20px; }
.vben span{ font-size:14px; font-weight:600; color:var(--charcoal-900); line-height:1.25; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:96px 0; }
.contact-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.contact-head .eyebrow{ margin:0 auto; }
.contact-head .lede{ margin:18px auto 0; max-width:540px; }

.contact-card{ display:grid; grid-template-columns:0.82fr 1.18fr; background:var(--white); border:1px solid var(--stone-200); border-radius:30px; overflow:hidden; box-shadow:0 24px 60px rgba(28,25,23,0.10); }

/* dark info panel */
.contact-aside{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream-100); padding:46px 42px; display:flex; flex-direction:column; justify-content:space-between; gap:42px; }
.contact-aside .veil{ position:absolute; inset:0; z-index:0; }
.contact-aside .aside-top, .contact-aside .aside-foot{ position:relative; z-index:2; }
.contact-aside h3{ font-family:var(--font-display); font-weight:500; font-size:27px; letter-spacing:-0.01em; }
.contact-aside .aside-top > p{ color:rgba(255,255,255,0.62); font-size:14px; line-height:1.6; margin:10px 0 30px; max-width:300px; }
.contact-aside .cinfo-row{ margin-bottom:20px; }
.contact-aside .cinfo-row .ci{ background:rgba(47,111,191,0.18); color:var(--gold); }
.contact-aside .cinfo-row .ct{ color:rgba(255,255,255,0.5); }
.contact-aside .cinfo-row .cv{ color:var(--cream-100); }
.contact-aside .cinfo-row .cv a{ color:var(--gold-light); }
.contact-aside .cinfo-row .cv a:hover{ color:var(--cream-100); }
.aside-foot{ display:flex; flex-direction:column; gap:18px; }
.aside-hours{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,0.7); }
.aside-hours .dotg{ width:8px; height:8px; border-radius:999px; background:var(--gold); box-shadow:0 0 0 4px rgba(47,111,191,0.18); }

/* shared cinfo-row (used in footer/aside) */
.cinfo-row{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
.cinfo-row .ci{ width:42px; height:42px; border-radius:10px; background:rgba(47,111,191,0.14); display:grid; place-items:center; color:var(--gold-deep); flex:0 0 auto; }
.cinfo-row .ci svg{ width:18px; height:18px; }
.cinfo-row .ct{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-700); font-weight:600; }
.cinfo-row .cv{ font-size:15px; color:var(--charcoal-900); margin-top:3px; line-height:1.45; }
.cinfo-row .cv a{ color:var(--gold-deep); }

/* form panel */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; padding:46px 42px; align-content:start; }
.form .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:12px; font-weight:600; letter-spacing:0.02em; color:var(--charcoal-700); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; background:var(--cream-50); color:var(--charcoal-900);
  font-family:var(--font-body); font-size:14px; border:1px solid var(--stone-200); border-radius:12px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); background:var(--white); box-shadow:0 0 0 3px rgba(47,111,191,0.16); }
.field input::placeholder, .field textarea::placeholder{ color:var(--stone-400); }
.checkrow{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--charcoal-700); line-height:1.5; }
.checkrow input{ width:17px; height:17px; margin-top:1px; accent-color:var(--gold); flex:0 0 auto; }
.form-submit{ margin-top:2px; }
.form-submit .btn-gold{ width:100%; justify-content:center; padding:16px 24px; }

/* ============================================================
   INSTAGRAM
   ============================================================ */
.insta{ padding:84px 0; }
.insta-head{ text-align:left; margin-bottom:42px; }
.insta-head .lede{ margin-left:0 !important; }
.insta-embed{ min-height:380px; position:relative; }
.elfsight-wrap{ position:relative; }
.embed-fallback{ text-align:center; padding:44px 24px; }
.embed-fallback .stars{ color:var(--gold); font-size:22px; letter-spacing:4px; display:block; margin-bottom:14px; }
.embed-fallback p{ color:var(--charcoal-700); font-size:15px; max-width:440px; margin:0 auto 22px; line-height:1.6; }
.dark .embed-fallback p{ color:rgba(255,255,255,0.7); }
.embed-fallback .btn-gold{ margin:0 auto; }
.elfsight-wrap.loaded .embed-fallback, .insta-embed.loaded .embed-fallback{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:64px 0 0; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; }
.foot-col h5{ font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-col a{ font-size:14px; color:rgba(255,255,255,0.7); transition:.2s; }
.foot-col a:hover{ color:var(--cream-100); }
.foot-lead h4{ font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1.15; color:var(--cream-100); }
.foot-lead h4 .gold{ color:var(--gold); font-style:italic; }
.foot-lead p{ font-size:14px; color:rgba(255,255,255,0.6); margin:18px 0; max-width:280px; }
.foot-lead .work{ font-family:var(--font-display); font-size:20px; color:var(--gold); font-style:italic; }
.foot-contact-row{ display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,0.75); margin-bottom:12px; }
.foot-contact-row .fi{ color:var(--gold); display:grid; place-items:center; }
.foot-contact-row .fi svg{ width:16px; height:16px; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); display:grid; place-items:center; color:rgba(255,255,255,0.8); transition:.2s var(--ease); }
.socials a svg{ width:16px; height:16px; display:block; }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }
.bigname{ position:relative; text-align:center; line-height:0.8; overflow:hidden; }
.bigname span{
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(5rem,21vw,19rem); color:transparent;
  background:linear-gradient(180deg,#3a4a5e 0%, #1a2738 70%); -webkit-background-clip:text; background-clip:text;
  display:block;
}
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0 30px; border-top:1px solid rgba(255,255,255,0.1); font-size:13px; color:rgba(255,255,255,0.5); }

/* ============================================================
   BLOG
   ============================================================ */
.subnav{ position:sticky; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:18px 40px; background:rgba(10,19,32,0.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.08); }
.subnav .brand img{ height:26px; width:auto; display:block; }
.subnav .navlinks{ display:flex; align-items:center; gap:4px; }
.subnav .navlinks a{ font-size:13px; font-weight:500; color:rgba(255,255,255,0.78); padding:9px 14px; border-radius:999px; transition:.2s var(--ease); }
.subnav .navlinks a:hover, .subnav .navlinks a.active{ color:var(--charcoal-900); background:var(--cream-100); }

.blog-hero{ background:var(--ink); color:var(--cream-100); padding:80px 0 64px; }
.blog-hero .eyebrow{ color:var(--cream-200); border-color:rgba(255,255,255,0.18); white-space:nowrap; }
.blog-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.05; letter-spacing:-0.02em; margin-top:18px; }
.blog-hero h1 .gold{ color:var(--gold); font-style:italic; }
.blog-hero p{ color:rgba(255,255,255,0.7); font-size:17px; line-height:1.7; max-width:560px; margin-top:18px; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:70px 0 90px; }
.post-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--stone-200); border-radius:22px; overflow:hidden; transition:.3s var(--ease); }
.post-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(28,25,23,0.12); }
.post-card .pc-img{ position:relative; height:190px; background:#0A1320; overflow:hidden; }
.post-card .pc-img img{ width:100%; height:100%; object-fit:contain; -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%); mask-image:linear-gradient(to bottom,#000 82%,transparent 100%); }
.post-card .pc-cat{ position:absolute; top:14px; left:14px; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:rgba(10,19,32,0.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.12); color:var(--cream-100); }
.post-card .pc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-card h3{ font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.18; color:var(--charcoal-900); }
.post-card p{ font-size:14px; color:var(--charcoal-700); line-height:1.6; margin:12px 0 18px; }
.post-card .pc-more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--gold-deep); }
.post-card .pc-more svg{ width:15px; height:15px; }

/* Article */
.article-hero{ background:var(--ink); color:var(--cream-100); padding:72px 0 60px; }
.article-hero .crumbs{ font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:22px; }
.article-hero .crumbs a{ color:rgba(255,255,255,0.78); }
.article-hero .crumbs a:hover{ color:var(--gold); }
.article-hero .a-cat{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.article-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem,4.2vw,3.2rem); line-height:1.1; letter-spacing:-0.02em; max-width:880px; }
.article-hero .a-meta{ margin-top:20px; font-size:13px; color:rgba(255,255,255,0.6); display:flex; gap:18px; flex-wrap:wrap; }
.article-wrap{ max-width:760px; margin:0 auto; padding:64px 28px 30px; }
.article-figure{ max-width:1040px; margin:-36px auto 0; padding:0 28px; }
.article-figure .af-inner{ background:#0A1320; border-radius:22px; height:300px; overflow:hidden; position:relative; }
.article-figure img{ width:100%; height:100%; object-fit:contain; }
.prose{ font-family:var(--font-body); color:var(--charcoal-800); font-size:17px; line-height:1.75; }
.prose > p{ margin-bottom:22px; }
.prose h2{ font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.2; letter-spacing:-0.01em; color:var(--charcoal-900); margin:40px 0 14px; }
.prose h3{ font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--charcoal-900); margin:28px 0 10px; }
.prose ul{ margin:0 0 22px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.prose ul li{ position:relative; padding-left:30px; }
.prose ul li::before{ content:""; position:absolute; left:4px; top:9px; width:8px; height:8px; border-radius:2px; background:var(--gold); transform:rotate(45deg); }
.prose strong{ color:var(--charcoal-900); font-weight:600; }
.prose a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.prose .lead{ font-size:20px; line-height:1.6; color:var(--charcoal-900); font-weight:500; margin-bottom:28px; }
.callout{ background:var(--cream-100); border:1px solid var(--stone-200); border-radius:18px; padding:26px 28px; margin:32px 0; }
.callout h4{ font-family:var(--font-display); font-weight:500; font-size:19px; color:var(--charcoal-900); margin-bottom:8px; }
.callout p{ font-size:15px; color:var(--charcoal-700); margin:0; }
.article-cta{ background:var(--ink); border-radius:26px; padding:44px; text-align:center; margin:44px auto 0; max-width:760px; }
.article-cta h3{ font-family:var(--font-display); font-weight:400; font-size:28px; color:var(--cream-100); }
.article-cta h3 .gold{ color:var(--gold); font-style:italic; }
.article-cta p{ color:rgba(255,255,255,0.7); font-size:15px; margin:14px auto 24px; max-width:440px; }
.article-cta .btn-gold{ margin:0 auto; }
.related{ max-width:1040px; margin:80px auto 0; padding:0 28px 90px; }
.related h2{ font-family:var(--font-display); font-weight:400; font-size:28px; color:var(--charcoal-900); margin-bottom:26px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-headline .l1, .hero-headline .it{ white-space:normal; }
}

@media (max-width:760px){
  .wrap{ padding:0 20px; }
  .block{ margin:10px; }
  .dark{ border-radius:24px; }
  .dark .wrap, .dark .inner{ padding-left:20px; padding-right:20px; }

  /* ---- NAV ---- */
  .nav{ padding:14px 16px; align-items:center; top:10px; width:calc(100% - 20px); border-radius:18px; }
  .nav.nav-scrolled{ padding:11px 16px; }
  .navlinks, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .brand{ flex-direction:column; align-items:flex-start; gap:5px; }
  .brand img{ height:24px; }
  .brand-sub{ display:block; font-size:8px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
  .mobile-menu{ display:flex; flex-direction:column; gap:4px; position:fixed; top:0; left:0; right:0; z-index:200;
    max-height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:80px 22px 30px; background:rgba(8,16,28,0.98); backdrop-filter:blur(14px); text-align:center;
    transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .36s var(--ease), opacity .36s var(--ease);
    border-bottom:1px solid rgba(255,255,255,0.1); border-radius:0 0 28px 28px; box-shadow:0 24px 60px rgba(0,0,0,0.5); }
  .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-menu a{ font-size:17px; font-weight:500; color:var(--cream-100); padding:15px 8px; border-bottom:1px solid rgba(255,255,255,0.08); transition:.2s; text-align:center; }
  .mobile-menu a:hover{ color:var(--gold); }
  .mobile-menu a.mm-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,0.2); border-radius:999px; background:rgba(255,255,255,0.06); display:grid; place-items:center; }
  .mobile-menu a.mm-close svg{ width:18px; height:18px; }
  .mobile-menu .btn-gold{ justify-content:center; margin-top:18px; padding:16px 22px; border-bottom:none; color:var(--white); }
  .mobile-menu .btn-gold:hover{ color:var(--white); }

  /* ---- HERO (mobile redesign) ---- */
  .hero{ min-height:0; }
  .hero .wrap{ position:relative; z-index:2; height:auto; min-height:0; padding:76px 20px 40px; display:block; text-align:left; }
  .hero-portrait{ display:none; }
  .hero-glow{ display:block; left:62%; top:340px; bottom:auto; transform:translate(-50%,-50%); width:300px; height:300px; }

  .hero-copy{ position:relative; top:auto; left:auto; max-width:none; width:100%; display:block; }
  .hero-headline{ display:none; }
  .hero-head-m{ display:block; font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em; color:var(--cream-100); text-shadow:0 2px 22px rgba(8,16,28,0.6); }
  .hero-head-m .hm1, .hero-head-m .hm2, .hero-head-m .hm3{ display:block; font-size:clamp(1.6rem,6.8vw,2.05rem); line-height:1.12; }
  .hero-head-m .hm3{ font-style:italic; color:var(--gold); }
  .hm-row{ display:grid; grid-template-columns:1fr 50%; column-gap:4px; align-items:stretch; margin-top:2px; }
  .hm-left{ min-width:0; position:relative; z-index:2; }
  .hero-photo-m{ display:block; align-self:stretch; min-height:300px; margin-right:-20px; }
  .hero-photo-m img{ display:block; width:100%; height:100%; object-fit:cover; object-position:60% 8%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 32%, #000 64%), linear-gradient(to bottom,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 32%, #000 64%), linear-gradient(to bottom,#000 84%,transparent 100%);
    mask-composite:intersect; }
  .hero-badge{ display:flex; width:fit-content; max-width:280px; margin:0 0 30px; font-size:11px; padding:14px 20px; letter-spacing:0.04em; line-height:1.4; text-align:left; border-radius:16px; align-items:center; }
  .hero-badge .dotg{ display:none; }
  .badge-check{ display:inline-grid; place-items:center; width:24px; height:24px; flex:0 0 auto; border-radius:999px; background:var(--gold); color:var(--white); margin-right:9px; }
  .badge-check svg{ width:14px; height:14px; }
  .hero-divider-m{ display:block; width:56px; height:3px; border-radius:2px; background:var(--gold); margin:24px 0 0; }
  .hero-body-m{ display:block; color:rgba(255,255,255,0.72); font-size:15px; line-height:1.7; margin-top:20px; }
  .hero-cta{ display:none; }
  .hero-cta-mobile{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:30px; padding:18px 18px; font-size:12px; letter-spacing:0.01em; text-transform:uppercase; font-weight:700; white-space:nowrap; }
  .hero-cta-mobile .ico-lead{ display:inline-grid; place-items:center; }
  .hero-cta-mobile .ico-lead svg{ width:19px; height:19px; }
  .hero-cta-mobile .ico-chev{ display:inline-grid; place-items:center; margin-left:auto; }
  .hero-cta-mobile .ico-chev svg{ width:18px; height:18px; }

  .hero-checks-m{ display:none; }

  .stats{ position:static; order:0; width:100%; grid-template-columns:repeat(4,1fr); gap:14px 6px; margin-top:20px; padding:24px 16px;
    border-top:none; border:1px solid rgba(255,255,255,0.12); border-radius:18px; background:rgba(255,255,255,0.03); }
  .stat{ flex-direction:column; align-items:center; text-align:center; gap:7px; }
  .stat .si svg{ width:20px; height:20px; }
  .stat .num{ font-size:1.3rem; }
  .stat .lbl{ font-size:9px; line-height:1.25; }

  .hero-trust-m{ display:block; margin-top:34px; }
  .hero-trust-m .trust-label{ text-align:center; font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.45); padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); }
  .hero-trust-m .trust-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
  .hero-trust-m .trust-badges span{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; font-size:11px; color:rgba(255,255,255,0.78); line-height:1.3; }
  .hero-trust-m .trust-badges svg{ width:24px; height:24px; color:var(--gold); }

  /* ---- SECTION SPACING ---- */
  .about{ padding:56px 20px; }
  .services{ padding:50px 0 54px; }
  .works{ padding:56px 20px; }
  .process{ padding:50px 0 58px; }
  .testi{ padding:56px 20px; }
  .faq{ padding:50px 0 54px; }
  .contact{ padding:56px 20px; }
  .insta{ padding:56px 20px; }
  .footer{ padding:50px 0 0; }

  /* ---- HEADLINES CENTERED ---- */
  .about-grid > div:first-child,
  .services-head, .services-head > div,
  .works-head, .works-head > div,
  .testi-head, .process-head, .faq-left, .insta-head, .contact-head{
    text-align:center;
  }
  .about-grid, .services-head, .works-head, .faq-grid, .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .section-title, .about h2{ font-size:clamp(1.9rem,7.6vw,2.5rem); }
  .about h2 br{ display:none; }

  /* eyebrows + buttons center within centered heads */
  .about-grid > div:first-child .eyebrow,
  .services-head .eyebrow, .works-head .eyebrow, .testi-head .eyebrow,
  .process-head .eyebrow, .faq-left .eyebrow, .insta-head .eyebrow, .contact-head .eyebrow{ margin-left:auto; margin-right:auto; }

  /* ---- ABOUT ---- */
  .about .copy{ text-align:center; }
  .about .copy p{ text-align:left; }
  .about .copy .btn-gold{ margin:6px auto 0; }

  /* ---- SERVICES ---- */
  .services-head{ margin-bottom:30px; }
  .services-head .right{ align-items:center; }
  .services-head .right .lede{ max-width:none; }
  .svc-nav{ justify-content:center; }
  .svc-card{ flex-basis:84vw; min-height:0; }
  .insta-head .lede, .services-head .right .lede{ margin-left:auto; margin-right:auto; }

  /* ---- WORKS ---- */
  .works-head{ margin-bottom:34px; }
  .works-head .right{ align-items:center; }
  .works-head .right .btn-gold{ margin:0 auto; }
  .works-body{ grid-template-columns:1fr; gap:26px; }
  .works-cover{ max-width:none; width:100%; margin:0; }
  .thead{ display:none; }
  .trow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:18px 16px; }
  .trow .ttitle{ flex:0 0 100%; font-size:1.3rem; }
  .trow .arrow{ margin-left:auto; flex:0 0 auto; }
  .trow.feature{ padding:18px 16px; }
  .trow .pop{ display:none; }

  /* ---- PROCESS (horizontal swipe cards) ---- */
  .proc-stage{ display:block; }
  .proc-svg{ display:none; }
  .proc-cards{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:12px 2px 16px; margin-top:0; }
  .proc-cards::-webkit-scrollbar{ display:none; }
  .proc-card:active{ transform:none; }
  .proc-intro{ max-width:none; margin-bottom:8px; text-align:center; }
  .proc-intro .btn-gold{ display:none; }
  .proc-card{ flex:0 0 78%; scroll-snap-align:start; width:auto; margin-bottom:0; }
  .proc-swipe-hint{ display:inline-flex; align-items:center; gap:8px; margin:4px auto 12px; padding:7px 14px; border-radius:999px;
    background:rgba(47,111,191,0.14); border:1px solid rgba(47,111,191,0.34); color:var(--gold);
    font-size:12px; font-weight:600; letter-spacing:0.02em; width:fit-content; }
  .proc-swipe-hint svg{ width:16px; height:16px; animation:proc-nudge 1.4s ease-in-out infinite; }
  .proc-stage{ text-align:center; }
  .proc-cta-m{ display:block; margin-top:18px; }
  @keyframes proc-nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }

  /* ---- TESTIMONIALS ---- */
  .testi-head{ flex-direction:column; gap:22px; align-items:center; }
  .testi-body{ grid-template-columns:1fr; }

  /* ---- VORTEIL ---- */
  .faq-grid{ gap:34px; }
  .faq-left .lede{ margin:18px auto 24px; }
  .faq-left .btn-gold{ margin:0 auto; }
  .vorteil-grid{ grid-template-columns:1fr; }
  .vben{ justify-content:flex-start; }

  /* ---- CONTACT ---- */
  .contact{ padding:50px 20px; }
  .contact-head{ margin-bottom:30px; }
  .contact-card{ grid-template-columns:1fr; border-radius:22px; }
  .contact-aside{ padding:34px 24px; gap:30px; }
  .contact-aside .aside-top > p{ max-width:none; }
  .form{ grid-template-columns:1fr; padding:30px 24px; gap:18px; }
  .form-submit .btn-gold{ width:100%; }

  /* ---- INSTAGRAM ---- */
  .insta-head{ margin-bottom:30px; }

  /* ---- FOOTER (mobile: 2-column links) ---- */
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px 18px; text-align:left; }
  .foot-lead{ grid-column:1 / -1; }
  .foot-lead p{ margin-left:0; margin-right:0; }
  .foot-col ul{ align-items:flex-start; }
  .foot-contact-row{ justify-content:flex-start; }
  .socials{ justify-content:flex-start; }
  .foot-bottom{ flex-direction:column; gap:8px; text-align:center; }
  .bigname span{ font-size:24vw; }

  /* ---- BLOG / SUBNAV ---- */
  .subnav{ flex-wrap:wrap; padding:14px 18px; gap:12px; }
  .subnav .brand{ order:1; }
  .subnav .btn-gold{ order:2; margin-left:auto; padding:11px 16px; font-size:12px; }
  .subnav .navlinks{ order:3; display:flex; width:100%; gap:4px; overflow-x:auto; padding:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .subnav .navlinks::-webkit-scrollbar{ display:none; }
  .subnav .navlinks a{ white-space:nowrap; flex:0 0 auto; }
  .blog-hero{ padding:54px 0 46px; text-align:center; }
  .blog-hero .eyebrow{ margin-left:auto; margin-right:auto; }
  .blog-hero h1{ font-size:clamp(2rem,9vw,2.8rem); }
  .blog-hero p{ margin-left:auto; margin-right:auto; }
  .blog-grid{ grid-template-columns:1fr; gap:22px; padding:44px 0 64px; }
  .article-hero{ padding:48px 0 44px; text-align:center; }
  .article-hero .crumbs{ justify-content:center; display:flex; flex-wrap:wrap; gap:4px; }
  .article-hero .a-meta{ justify-content:center; }
  .article-hero h1{ font-size:clamp(1.8rem,8vw,2.4rem); }
  .article-wrap{ padding:44px 22px 24px; }
  .article-figure{ padding:0 20px; }
  .article-figure .af-inner{ height:210px; }
  .prose{ font-size:16px; }
  .prose h2{ font-size:24px; }
  .article-cta{ padding:32px 22px; }
  .related{ margin-top:56px; padding:0 20px 64px; }
  .related-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   NAV DROPDOWN — "Für wen"
   ============================================================ */
.navlinks .has-dd{ position:relative; }
.navlinks .dd-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:rgba(255,255,255,0.78); padding:9px 16px; border-radius:999px; transition:.2s var(--ease); cursor:pointer; }
.navlinks .dd-toggle svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.navlinks .has-dd:hover .dd-toggle, .navlinks .has-dd:focus-within .dd-toggle{ color:var(--cream-100); background:rgba(255,255,255,0.08); }
.navlinks .has-dd:hover .dd-toggle svg, .navlinks .has-dd:focus-within .dd-toggle svg{ transform:rotate(180deg); }
.navlinks .has-dd::after{ content:""; position:absolute; left:0; right:0; top:100%; height:18px; }
.dd-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:312px; background:rgba(10,19,32,0.97); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:10px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5); z-index:60;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.navlinks .has-dd:hover .dd-menu, .navlinks .has-dd:focus-within .dd-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.dd-menu a{ display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:12px; color:rgba(255,255,255,0.82); font-size:13.5px; font-weight:500; transition:.18s var(--ease); }
.dd-menu a:hover{ background:rgba(47,111,191,0.14); color:var(--cream-100); }
.dd-menu a .di{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:rgba(47,111,191,0.12); color:var(--gold); }
.dd-menu a .di svg{ width:17px; height:17px; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.dd-menu a .dl{ display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.dd-menu a .dl small{ font-size:11px; color:rgba(255,255,255,0.5); font-weight:400; }

/* mobile menu — "Für wen" collapsible group */
/* Für wen — collapsible dropdown (mobile) */
.mm-group{ width:100%; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); margin:4px 0; }
.mm-group-toggle{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:transparent; border:none; font-family:var(--font-body); font-size:17px; font-weight:500; color:var(--cream-100); padding:16px 8px; cursor:pointer; }
.mm-group.open .mm-group-toggle{ color:var(--gold); }
.mm-group-toggle svg{ display:inline-block; width:18px; height:18px; color:var(--gold); transition:transform .3s var(--ease); }
.mm-group.open .mm-group-toggle svg{ transform:rotate(180deg); }
.mm-sub{ display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.mm-group.open .mm-sub{ max-height:560px; }
.mm-sub a{ font-size:15px !important; color:rgba(255,255,255,0.82) !important; padding:14px 12px !important; text-align:center; border-bottom:1px solid rgba(255,255,255,0.05) !important; }
.mm-sub a:first-child{ border-top:1px solid rgba(255,255,255,0.06) !important; }
.mm-sub a:last-child{ border-bottom:none !important; }

/* ============================================================
   FÜR WEN — Lebenssituationen section (light)
   ============================================================ */
.fuerwen{ padding:96px 0; }
.fw-head{ max-width:760px; }
.fw-head .lede{ margin-top:20px; font-size:17px; }
.fw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.fw-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--stone-200); border-radius:24px; padding:34px 32px; box-shadow:0 4px 16px rgba(28,25,23,0.05); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.fw-card:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(28,25,23,0.12); border-color:var(--stone-300); }
.fw-ic{ width:54px; height:54px; border-radius:14px; background:rgba(47,111,191,0.12); display:grid; place-items:center; color:var(--gold-deep); margin-bottom:24px; }
.fw-ic svg{ width:27px; height:27px; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.fw-media{ position:relative; height:178px; margin:-6px -10px 22px; border-radius:18px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 18%, rgba(47,111,191,0.12), rgba(242,237,230,0.55) 62%, rgba(242,237,230,0) 100%); }
.fw-media img{ height:168px; width:auto; max-width:90%; object-fit:contain; filter:drop-shadow(0 14px 26px rgba(14,27,42,0.22)); transition:transform .35s var(--ease); }
.fw-card:hover .fw-media img{ transform:translateY(-4px) scale(1.03); }
.fw-card h3{ font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.16; letter-spacing:-0.01em; color:var(--charcoal-900); }
.fw-card .fw-text{ color:var(--charcoal-700); font-size:15px; line-height:1.62; margin-top:13px; }
.fw-bullets{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:22px 0 26px; }
.fw-bullets li{ position:relative; padding-left:28px; font-size:14px; color:var(--charcoal-700); line-height:1.5; }
.fw-bullets li svg{ position:absolute; left:0; top:1px; width:17px; height:17px; color:var(--gold); }
.fw-more{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--charcoal-900); transition:color .2s var(--ease); }
.fw-more svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.fw-card:hover .fw-more{ color:var(--gold-deep); }
.fw-card:hover .fw-more svg{ transform:translateX(4px); }

.fw-cta{ position:relative; overflow:hidden; margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; background:var(--ink); border-radius:28px; padding:44px 52px; }
.fw-cta .inner{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; width:100%; }
.fw-cta h3{ font-family:var(--font-display); font-weight:400; color:var(--cream-100); font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.15; letter-spacing:-0.01em; max-width:560px; }
.fw-cta h3 .gold{ color:var(--gold); font-style:italic; }
.fw-cta .btn-gold{ flex:0 0 auto; }

/* ============================================================
   SUBPAGE (Zielgruppen-Unterseiten)
   ============================================================ */
.sp-hero{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream-100); max-width:var(--maxw); margin:14px auto; border-radius:34px; }
.sp-hero .wrap{ position:relative; z-index:2; padding-top:150px; padding-bottom:88px; }
.sp-hero-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:56px; align-items:center; }
.sp-hero .eyebrow{ color:var(--cream-200); border-color:rgba(255,255,255,0.18); }
.sp-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.3rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-0.02em; margin-top:20px; color:var(--cream-100); }
.sp-hero h1 .gold{ color:var(--gold); font-style:italic; }
.sp-hero .sub{ color:rgba(255,255,255,0.74); font-size:17px; line-height:1.72; margin-top:22px; max-width:620px; }
.sp-hero .sp-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:34px; }
.sp-trustline{ display:flex; align-items:center; gap:12px; font-size:13px; color:rgba(255,255,255,0.62); }
.sp-trustline .dotg{ width:5px; height:5px; border-radius:999px; background:var(--gold); }
.sp-visual{ position:relative; }
.sp-visual::before{ content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:118%; height:118%; border-radius:50%; background:radial-gradient(circle, rgba(47,111,191,0.16), rgba(47,111,191,0.04) 45%, transparent 70%); z-index:0; pointer-events:none; }
.sp-img{ position:relative; z-index:1; width:100%; max-width:440px; height:auto; display:block; margin:0 0 0 auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.45)); }
.sp-cluster{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sp-cluster .sc{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.sp-cluster .sc.lead{ grid-column:1 / -1; background:linear-gradient(150deg, rgba(47,111,191,0.16), rgba(47,111,191,0.03)); border-color:rgba(47,111,191,0.3); }
.sp-cluster .sc .ci{ width:46px; height:46px; border-radius:12px; background:rgba(47,111,191,0.14); display:grid; place-items:center; color:var(--gold); }
.sp-cluster .sc .ci svg{ width:23px; height:23px; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sp-cluster .sc .ct{ font-size:14px; font-weight:600; color:var(--cream-100); line-height:1.3; }
.sp-cluster .sc .cs{ font-size:12.5px; color:rgba(255,255,255,0.6); line-height:1.45; }

.sp-section{ padding:84px 0; }
.sp-section.alt{ background:var(--cream-200); }
.sp-shead{ max-width:680px; margin-bottom:44px; }
.sp-shead.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sp-shead.center .eyebrow{ margin-left:auto; margin-right:auto; }
.sp-shead h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.1; letter-spacing:-0.02em; margin-top:16px; }
.sp-shead h2 .gold{ color:var(--gold); font-style:italic; }
.sp-shead .lede{ margin-top:16px; }

.prob-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.prob-card{ display:flex; gap:18px; align-items:flex-start; background:var(--white); border:1px solid var(--stone-200); border-radius:20px; padding:26px 28px; box-shadow:0 4px 16px rgba(28,25,23,0.04); }
.prob-card .pq{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:rgba(47,111,191,0.12); color:var(--gold-deep); display:grid; place-items:center; }
.prob-card .pq svg{ width:21px; height:21px; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.prob-card p{ font-size:15px; line-height:1.55; color:var(--charcoal-800); padding-top:8px; }

.sup-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px; }
.sup-item{ display:flex; gap:16px; align-items:flex-start; padding:22px 4px; border-bottom:1px solid var(--stone-200); }
.sup-item .si{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:var(--ink); color:var(--gold); display:grid; place-items:center; }
.sup-item .si svg{ width:20px; height:20px; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sup-item h4{ font-family:var(--font-body); font-size:15.5px; font-weight:600; color:var(--charcoal-900); }
.sup-item p{ font-size:13.5px; color:var(--charcoal-700); line-height:1.55; margin-top:5px; }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step-card{ position:relative; background:var(--white); border:1px solid var(--stone-200); border-radius:20px; padding:28px 26px; box-shadow:0 4px 16px rgba(28,25,23,0.04); }
.step-card .pnum{ font-family:var(--font-display); font-size:34px; font-weight:500; line-height:1; color:var(--gold); display:flex; align-items:center; gap:8px; }
.step-card .pnum .nd{ width:6px; height:6px; border-radius:999px; background:var(--gold); }
.step-card h4{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:16px 0 0; line-height:1.15; color:var(--charcoal-900); }
.step-card p{ font-size:13.5px; color:var(--charcoal-700); line-height:1.55; margin-top:10px; }
.step-card .sic{ position:absolute; top:26px; right:24px; width:38px; height:38px; border-radius:11px; background:rgba(47,111,191,0.12); color:var(--gold-deep); display:grid; place-items:center; }
.step-card .sic svg{ width:19px; height:19px; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.trustband{ position:relative; overflow:hidden; background:var(--ink); border-radius:28px; padding:56px 52px; }
.trustband .inner{ position:relative; z-index:2; }
.trustband .tb-head{ text-align:center; max-width:600px; margin:0 auto 40px; }
.trustband .tb-head .eyebrow{ margin:0 auto; white-space:nowrap; }
.sp-hero .eyebrow{ white-space:normal; max-width:100%; }
.trustband .tb-head h2{ font-family:var(--font-display); font-weight:400; color:var(--cream-100); font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.1; letter-spacing:-0.02em; margin-top:16px; }
.trustband .tb-head h2 .gold{ color:var(--gold); font-style:italic; }
.tb-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-top:1px solid rgba(255,255,255,0.12); padding-top:40px; }
.tb-stat{ text-align:center; }
.tb-stat .num{ font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.9rem); font-weight:400; color:var(--cream-100); line-height:1; }
.tb-stat .lbl{ font-size:13px; color:rgba(255,255,255,0.6); margin-top:10px; line-height:1.4; }

.faq-acc{ max-width:840px; margin:0 auto; }
.faq-acc .acc-item{ border:1px solid var(--stone-200); background:var(--white); }
.faq-acc .acc-item.open .acc-a{ max-height:480px; }
.faq-acc .acc-a-inner{ max-width:100%; }

.sp-final{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream-100); }
.sp-final .wrap{ position:relative; z-index:2; padding:90px 28px; text-align:center; }
.sp-final h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.1; letter-spacing:-0.02em; max-width:680px; margin:0 auto; color:var(--cream-100); }
.sp-final h2 .gold{ color:var(--gold); font-style:italic; }
.sp-final p{ color:rgba(255,255,255,0.72); font-size:17px; line-height:1.7; max-width:600px; margin:22px auto 0; }
.sp-final .btn-gold{ margin:34px auto 0; }
.sp-final .backlink{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-size:13px; color:rgba(255,255,255,0.6); transition:.2s var(--ease); }
.sp-final .backlink:hover{ color:var(--gold); }
.sp-final .backlink svg{ width:15px; height:15px; }

.sp-crumbs{ font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:6px; }
.sp-crumbs a{ color:rgba(255,255,255,0.78); transition:.2s; }
.sp-crumbs a:hover{ color:var(--gold); }

/* stroke color for all new stroke-based icons */
.dd-menu a .di svg, .fw-ic svg, .sp-cluster .sc .ci svg, .prob-card .pq svg, .sup-item .si svg, .step-card .sic svg{ stroke:currentColor; }

/* ---- FÜR WEN + SUBPAGE responsive ---- */
@media (max-width:1024px){
  .fw-grid{ grid-template-columns:repeat(2,1fr); }
  .sp-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .sp-visual{ max-width:460px; }
  .sp-img{ margin:0 auto; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
  .proc-stage{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .fuerwen{ padding:60px 0; }
  .fw-grid{ grid-template-columns:1fr; gap:18px; margin-top:36px; }
  .fw-card{ padding:28px 24px; }
  .fw-cta{ padding:32px 26px; text-align:left; }
  .fw-cta .btn-gold{ width:100%; justify-content:center; }

  .navlinks .has-dd{ display:none; }

  .sp-hero .wrap{ padding-top:120px; padding-bottom:60px; }
  .sp-hero{ margin:10px; }
  .sp-hero h1{ font-size:clamp(2rem,8vw,2.6rem); }
  .sp-section{ padding:56px 0; }
  .sp-shead{ margin-bottom:32px; }
  .prob-grid{ grid-template-columns:1fr; gap:16px; }
  .sp-img{ max-width:300px; }
  .sup-grid{ grid-template-columns:1fr; gap:0 28px; }
  .steps-grid{ grid-template-columns:1fr; gap:16px; }
  .trustband{ padding:40px 26px; }
  .tb-stats{ grid-template-columns:repeat(2,1fr); gap:30px 16px; }
  .sp-final .wrap{ padding:64px 24px; }
  .sp-final .btn-gold{ width:100%; justify-content:center; }
}

/* ---- Trust section: Max portrait + quote ---- */
.tb-quote{ display:grid; grid-template-columns:170px 1fr; gap:44px; align-items:center; max-width:900px; margin:0 auto; }
.tb-portrait{ position:relative; width:170px; height:170px; }
.tb-portrait::before{ content:""; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(47,111,191,0.32), transparent 68%); }
.tb-portrait img{ position:relative; z-index:1; width:170px; height:170px; border-radius:50%; object-fit:cover; object-position:center 14%; border:1px solid rgba(47,111,191,0.45); background:#0d1929; }
.tb-quote blockquote{ margin:0; position:relative; }
.tb-quote .qmark{ font-family:var(--font-display); font-size:60px; line-height:0.6; color:var(--gold); opacity:0.5; display:block; margin-bottom:6px; }
.tb-quote blockquote p{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.44; color:var(--cream-100); }
.tb-quote cite{ display:flex; flex-direction:column; gap:3px; margin-top:20px; font-style:normal; }
.tb-quote cite b{ font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.02em; color:var(--gold); }
.tb-quote cite span{ font-size:12.5px; color:rgba(255,255,255,0.55); }
.trustband .tb-stats.with-quote{ margin-top:44px; }
@media (max-width:760px){
  .tb-quote{ grid-template-columns:1fr; gap:24px; text-align:center; justify-items:center; }
  .tb-portrait, .tb-portrait img{ width:132px; height:132px; }
  .tb-quote cite{ align-items:center; }
  .tb-quote .qmark{ margin:0 auto 2px; }
}

/* ===== Subpage harmonization (premium pass) ===== */
.sp-section{ padding:74px 0; }
/* Herausforderungen — 4 equal cards, icon top-left */
.prob-grid{ grid-template-columns:repeat(4,1fr); gap:20px; }
.prob-card{ flex-direction:column; align-items:flex-start; gap:16px; padding:26px 24px; }
.prob-card p{ padding-top:0; }
/* Unterstützung — premium cards */
.sup-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
.sup-item{ flex-direction:column; align-items:flex-start; gap:14px; padding:26px 24px; border-bottom:none; background:var(--white); border:1px solid var(--stone-200); border-radius:20px; box-shadow:0 4px 16px rgba(28,25,23,0.05); }
/* Warum Max Riemer — light premium split (same width/radius as Ablauf block) */
.warum-card{ background:var(--white); border:1px solid var(--stone-200); border-radius:34px; padding:48px; box-shadow:0 18px 50px rgba(28,25,23,0.08); }
.warum-split{ display:grid; grid-template-columns:0.78fr 1.22fr; gap:48px; align-items:center; }
.warum-photo{ position:relative; border-radius:24px; overflow:hidden; min-height:360px; display:flex; align-items:flex-end; justify-content:center;
  background:radial-gradient(120% 90% at 70% 0%, #1b2e48, #0E1B2A 70%); }
.warum-photo img{ width:100%; max-width:330px; height:auto; object-fit:contain; object-position:bottom; filter:drop-shadow(0 22px 44px rgba(0,0,0,0.45)); }
.warum-photo .warum-badge{ position:absolute; top:18px; left:18px; z-index:2; white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--white); background:var(--gold); padding:7px 14px; border-radius:999px; }
.warum-body h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,3vw,2.6rem); line-height:1.1; letter-spacing:-0.02em; margin-top:16px; color:var(--charcoal-900); }
.warum-body h2 .gold{ color:var(--gold); font-style:italic; }
.warum-body > p{ color:var(--charcoal-700); font-size:16px; line-height:1.72; margin-top:18px; }
.warum-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:30px; }
.warum-metrics .metric{ background:var(--cream-100); border:1px solid var(--stone-200); border-radius:18px; padding:20px 22px; }
.warum-metrics .num{ font-family:var(--font-display); font-weight:500; font-size:2rem; line-height:1; color:var(--charcoal-900); }
.warum-metrics .num .u{ color:var(--gold); }
.warum-metrics .lbl{ font-size:13px; color:var(--charcoal-700); margin-top:8px; }
/* Reviews — premium container + rating */
.reviews-box{ background:var(--white); border:1px solid var(--stone-200); border-radius:28px; box-shadow:0 10px 36px rgba(28,25,23,0.06); padding:28px; }
.reviews-rating{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding-bottom:22px; margin-bottom:6px; border-bottom:1px solid var(--stone-200); }
.reviews-rating .rv-num{ font-family:var(--font-display); font-size:2.2rem; font-weight:500; color:var(--charcoal-900); line-height:1; }
.reviews-rating .rv-stars{ color:var(--gold); font-size:18px; letter-spacing:3px; }
.reviews-rating .rv-meta{ font-size:13px; color:var(--charcoal-700); }
.reviews-rating .rv-g{ font-weight:600; color:var(--charcoal-900); }
/* FAQ — 2 columns */
.faq-acc{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; max-width:none; margin:0; }

@media (max-width:1024px){
  .prob-grid{ grid-template-columns:repeat(2,1fr); }
  .sup-grid{ grid-template-columns:repeat(2,1fr); }
  .warum-split{ grid-template-columns:1fr; gap:30px; }
  .warum-photo{ min-height:300px; }
}
@media (max-width:760px){
  .sp-section{ padding:52px 0; }
  .prob-grid{ grid-template-columns:1fr; }
  .sup-grid{ grid-template-columns:1fr; }
  .warum-card{ padding:28px 22px; }
  .warum-metrics{ gap:12px; }
  .reviews-box{ padding:16px; }
  .faq-acc{ grid-template-columns:1fr; }
}

/* ---- Animated audience headline (hero) ---- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-headline .it.hero-aud-line{ white-space:normal; }
.hero-aud{ display:inline; position:relative; top:0; }
.hero-aud.is-out{ animation:heroAudOut .58s var(--ease) forwards; }
.hero-aud.is-in{ animation:heroAudIn .65s var(--ease) both; }
@keyframes heroAudOut{ from{ opacity:1; top:0; filter:blur(0); } to{ opacity:0; top:-0.3em; filter:blur(6px); } }
@keyframes heroAudIn{ from{ opacity:0; top:0.42em; filter:blur(8px); } to{ opacity:1; top:0; filter:blur(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-aud.is-out, .hero-aud.is-in{ animation:none !important; opacity:1 !important; top:0 !important; filter:none !important; }
}

/* ===== Blog + article hero wrapped like sp-hero, with full nav inside ===== */
.blog-hero, .article-hero{ position:relative; overflow:hidden; max-width:var(--maxw); margin:14px auto; border-radius:34px; }
.blog-hero{ padding:150px 0 72px; }
.article-hero{ padding:140px 0 60px; }
.blog-hero .wrap, .article-hero .wrap{ position:relative; z-index:2; }
.article-figure{ margin-top:26px; }
.post-card .pc-cat{ top:16px; left:16px; z-index:3; background:var(--gold); color:var(--white); border:none; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
@media (max-width:760px){
  .blog-hero, .article-hero{ margin:10px; }
  .blog-hero{ padding:118px 0 54px; }
  .article-hero{ padding:114px 0 48px; }
}

/* ===== Subpage hero reflow: text → visual → CTA ===== */
.sp-hero-grid{ grid-template-columns:1.12fr 0.88fr; column-gap:56px; row-gap:26px; align-items:center; grid-template-areas:"text visual" "cta visual"; }
.sp-htext{ grid-area:text; }
.sp-hero .sp-visual{ grid-area:visual; }
.sp-hcta{ grid-area:cta; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.sp-htext .sp-trustline{ margin-top:26px; }
.sp-microtrust{ display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,0.62); }
.sp-microtrust svg{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; }
.sp-hero .sp-img{ max-width:470px; }
@media (max-width:1024px){
  .sp-hero-grid{ grid-template-columns:1fr; grid-template-areas:"text" "visual" "cta"; gap:26px; }
  .sp-hero .sp-img{ margin:0 auto; max-width:500px; }
}
@media (max-width:760px){
  .sp-hcta{ align-items:stretch; width:100%; }
  .sp-hcta .btn-gold{ width:100%; justify-content:center; }
  .sp-microtrust{ justify-content:center; }
  .sp-hero .sp-img{ max-width:440px; }
}

/* ===== Article hero: mockup right of headline (desktop) ===== */
.article-hero .ah-grid{ display:grid; grid-template-columns:1.18fr 0.82fr; gap:52px; align-items:center; }
.ah-visual{ position:relative; }
.ah-visual img{ display:block; width:100%; max-width:420px; height:auto; margin-left:auto; filter:drop-shadow(0 26px 52px rgba(0,0,0,0.45)); }
@media (max-width:1024px){
  .article-hero .ah-grid{ grid-template-columns:1fr; gap:28px; }
  .ah-visual img{ margin:0 auto; max-width:460px; }
}

/* ===== Royal-blue gradient (Schalke premium) ===== */
.btn-gold{ background:linear-gradient(135deg,#3D82CF 0%,#2F6FBF 48%,#1C5BA6 100%); }
.btn-gold:hover{ background:linear-gradient(135deg,#357ACB 0%,#27649F 48%,#154C8A 100%); }
.gold, .hero-headline .it, .hero-head-m .hm3, .hero-aud{
  background:linear-gradient(120deg,#6FA8DC 0%,#2F6FBF 52%,#1C5BA6 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* uniform mobile buttons */
@media (max-width:760px){
  .btn-gold{ width:100%; justify-content:space-between; gap:10px; padding:17px 20px; font-size:14px; min-height:58px; white-space:nowrap; }
  .btn-gold .ico{ width:30px; height:30px; }
  .nav-toggle{ flex:0 0 auto; }
}

/* ===== Standort / Google Maps section ===== */
.findus{ padding:96px 0; }
.findus-head{ max-width:680px; margin:0 auto; text-align:center; }
.findus-head .eyebrow{ margin:0 auto; }
.findus-grid{ display:grid; grid-template-columns:1.25fr 0.9fr; margin-top:46px; border-radius:28px; overflow:hidden; border:1px solid var(--stone-200); box-shadow:0 18px 50px rgba(28,25,23,0.10); }
.findus-map{ position:relative; min-height:460px; background:var(--cream-200); }
.findus-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.findus-grid .contact-aside{ padding:46px 42px; }
@media (max-width:1024px){ .findus-grid{ grid-template-columns:1fr; } .findus-map{ min-height:320px; } }
@media (max-width:760px){ .findus{ padding:56px 0; } .findus-grid{ margin-top:32px; } .findus-grid .contact-aside{ padding:32px 24px; } }

/* contact form full-width (info moved to Standort) */
/* Homepage contact = form only → full width. Subpages keep merged aside+form card. */
.contact .contact-card:not(:has(.contact-aside)){ display:block; max-width:820px; margin:0 auto; background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible; }
.contact .contact-card:not(:has(.contact-aside)) .form{ background:var(--white); border:1px solid var(--stone-200); border-radius:28px; padding:38px; box-shadow:0 14px 44px rgba(28,25,23,0.07); }
@media (max-width:760px){ .contact .contact-card:not(:has(.contact-aside)) .form{ padding:24px 20px; } }

/* ===== Mobile swipe cards: Für wen + Dienstleistungen ===== */
@media (max-width:768px){
  .fw-grid{ display:flex; grid-template-columns:none; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:30px; padding-bottom:14px; }
  .fw-grid::-webkit-scrollbar{ display:none; }
  .fw-card{ flex:0 0 84%; scroll-snap-align:start; }
  .svc-card{ scroll-snap-align:start; }
}

/* ===== Instagram feed in a rounded wrapper ===== */
.insta-embed{ background:var(--white); border:1px solid var(--stone-200); border-radius:28px; box-shadow:0 14px 44px rgba(28,25,23,0.07); padding:26px; overflow:hidden; }
@media (max-width:760px){ .insta-embed{ padding:16px; border-radius:22px; } }

/* ===== Legal pages (Impressum / Datenschutz) ===== */
.article-hero.legal .ah-grid{ grid-template-columns:1fr; }
.legal-prose h2{ margin-top:1.7em; }
.legal-prose h3{ margin-top:1.15em; }
.legal-prose a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }

/* ===== Cover the Elfsight free-plan badge with a matching-colour strip ===== */
.reviews-box{ position:relative; }
.testi{ position:relative; }
.reviews-box::after, .insta-embed::after, .testi::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:48px; z-index:6; pointer-events:none;
}
.reviews-box::after{ background:var(--white); border-radius:0 0 28px 28px; }
.insta-embed::after{ background:var(--white); }
.testi::after{ background:var(--bg-canvas); height:44px; }
@media (max-width:760px){ .reviews-box::after{ border-radius:0 0 22px 22px; } }

/* ====================================================================
   Cookie-Consent (vanilla-cookieconsent v3) — Max Riemer Branding
   ==================================================================== */
#cc-main{
  --cc-font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cc-modal-border-radius:18px;
  --cc-btn-border-radius:999px;
  --cc-modal-margin:1.25rem;
  --cc-modal-transition-duration:0.3s;

  --cc-bg:#FAF8F5;
  --cc-primary-color:#0E1B2A;
  --cc-secondary-color:#6E6760;
  --cc-link-color:#2F6FBF;

  --cc-btn-primary-bg:#2F6FBF;
  --cc-btn-primary-color:#FFFFFF;
  --cc-btn-primary-border-color:#2F6FBF;
  --cc-btn-primary-hover-bg:#1C5BA6;
  --cc-btn-primary-hover-color:#FFFFFF;
  --cc-btn-primary-hover-border-color:#1C5BA6;

  --cc-btn-secondary-bg:transparent;
  --cc-btn-secondary-color:#0E1B2A;
  --cc-btn-secondary-border-color:rgba(14,27,42,0.25);
  --cc-btn-secondary-hover-bg:rgba(14,27,42,0.05);
  --cc-btn-secondary-hover-color:#0E1B2A;
  --cc-btn-secondary-hover-border-color:rgba(14,27,42,0.4);

  --cc-separator-border-color:rgba(14,27,42,0.09);
  --cc-toggle-on-bg:#2F6FBF;
  --cc-toggle-off-bg:#A8A29E;
  --cc-toggle-readonly-bg:#93C0EC;
  --cc-toggle-readonly-knob-icon-color:#2F6FBF;

  --cc-cookie-category-block-bg:#F2EDE6;
  --cc-cookie-category-block-border:rgba(14,27,42,0.07);
  --cc-cookie-category-block-hover-bg:#E8E0D6;
  --cc-cookie-category-block-hover-border:rgba(14,27,42,0.12);
  --cc-cookie-category-expanded-block-hover-bg:#E8E0D6;

  --cc-overlay-bg:rgba(14,27,42,0.45);
  --cc-footer-bg:#F2EDE6;
  --cc-footer-color:#6E6760;
  --cc-footer-border-color:rgba(14,27,42,0.07);
}

#cc-main .cm,
#cc-main .pm{
  border:1px solid rgba(14,27,42,0.08);
  box-shadow:0 24px 64px rgba(14,27,42,0.22);
}

#cc-main .cm__title,
#cc-main .pm__title{
  font-family:'TiemposHeadline','Georgia',serif;
  font-size:1.35em;
  font-weight:500;
  letter-spacing:-0.015em;
  line-height:1.2;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc{ line-height:1.65; }

#cc-main .cm__btn,
#cc-main .pm__btn{
  font-size:0.78em;
  font-weight:700;
  letter-spacing:0.04em;
  transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease;
}

#cc-main .pm__badge{
  background:rgba(47,111,191,0.16);
  color:#2F6FBF;
}

/* Blockierte iframes (Google Maps) bleiben unsichtbar, bis src nach Zustimmung gesetzt wird */
iframe[data-cc-src]:not([src]){ display:none !important; }

/* Platzhalter für blockierte Drittinhalte (Maps) */
.cc-embed-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; min-height:16rem; height:100%; padding:2.25rem 1.5rem;
  border:1px solid rgba(14,27,42,0.09); border-radius:16px;
  background:radial-gradient(110% 130% at 85% 0%, rgba(47,111,191,0.10), transparent 50%), #F2EDE6;
  text-align:center;
}
.cc-embed-placeholder[hidden]{ display:none; }
.cc-embed-placeholder__icon{
  display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%;
  background:rgba(47,111,191,0.16); color:#2F6FBF;
}
.cc-embed-placeholder__text{
  max-width:30rem; margin:0; color:#6E6760; font-size:0.92rem; line-height:1.65;
}
.cc-embed-placeholder__text strong{ color:#0E1B2A; font-weight:600; }
.cc-embed-placeholder__btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:3rem;
  padding:0.75rem 1.6rem; border:none; border-radius:999px;
  background:linear-gradient(135deg,#2F6FBF 0%, #1C5BA6 100%); color:#FFFFFF;
  font-size:0.8rem; font-weight:700; letter-spacing:0.04em; cursor:pointer;
  box-shadow:0 12px 28px rgba(47,111,191,0.28);
  transition:transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease;
}
.cc-embed-placeholder__btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(47,111,191,0.34); }
.cc-embed-placeholder__note{ margin:0; color:#8C857E; font-size:0.74rem; }
.cc-embed-placeholder__note a{ color:#2F6FBF; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* "Cookie-Einstellungen"-Link im Footer */
.cc-prefs-link{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
}
.cc-prefs-link:hover{ color:var(--gold); }