/* Full-width portrait header. All copy and controls remain live HTML. */
.mockup-home { --hero-bg:#020c16; }
.mockup-home .mockup-header { position:fixed; inset:0 0 auto; width:100%; background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
.mockup-home .mockup-header.scrolled { background:rgba(2,12,22,.96); box-shadow:0 8px 28px rgba(0,0,0,.18); }
.mockup-home .mockup-header .navlinks a { font-size:14px; }
.mockup-home .home-hero.hero-background {
  position:relative; isolation:isolate; width:100%; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; overflow:hidden; padding:130px 0 110px;
  background:var(--hero-bg); border:0;
}
.hero-background .hero-backdrop { position:absolute; inset:0; z-index:-2; display:block; pointer-events:none; }
.hero-background .hero-backdrop img { width:100%; height:100%; object-fit:cover; object-position:68% top; }
.home-hero.hero-background::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,rgba(2,12,22,.60),rgba(2,12,22,.26) 37%,transparent 58%,transparent 92%,rgba(2,12,22,.25)),linear-gradient(180deg,rgba(2,12,22,.36),transparent 16%,transparent 64%,var(--hero-bg) 100%);
}
.home-hero.hero-background::after { content:none; }
.hero-background .home-hero-grid { width:min(1560px,calc(100% - 112px)); min-height:0; display:block; position:static; }
.hero-background .home-hero-copy { width:46%; max-width:690px; padding:0; position:relative; z-index:2; opacity:1; transform:none; animation:portrait-copy-in .8s ease-out both; }
.hero-background h1 { font-size:clamp(52px,4.6vw,88px); line-height:1.04; letter-spacing:-.04em; text-shadow:0 2px 24px rgba(0,0,0,.22); }
.hero-background h1 em { white-space:normal; }
.hero-background .home-hero-copy>p { font-size:clamp(17px,1.35vw,22px); line-height:1.5; color:#e1e7eb; }
.hero-background .hero-kicker { font-size:12px; letter-spacing:.15em; line-height:1.5; color:#cad5dc; }
.hero-background .topic-line { font-size:12px; letter-spacing:.10em; gap:12px; flex-wrap:wrap; white-space:normal; color:#bdcbd4; }
.hero-background .home-actions { gap:12px; margin-top:28px; }
.hero-background .home-actions .btn { font-size:14px; min-height:50px; padding:12px 22px; }
.hero-background .home-actions .btn.secondary { background:rgba(2,12,22,.7); border-color:rgba(255,255,255,.34); }
.hero-background .hero-portrait { position:absolute; inset:0; margin:0; min-height:0; width:auto; height:auto; background:none; filter:none; overflow:visible; pointer-events:none; transform:none; animation:none; }
.hero-background .hero-portrait::before,.hero-background .hero-portrait::after { content:none; }
.hero-background .hero-socials { position:absolute; right:24px; top:45%; transform:translateY(-50%); margin:0; pointer-events:auto; }
.hero-background .hero-socials a { width:44px; height:44px; }
.hero-background .hero-quote { right:7%; bottom:7%; font-size:14px; line-height:1.6; width:290px; background:rgba(2,12,22,.66); }
.hero-background .social-hint { right:28px; top:calc(45% - 170px); color:#d4e0e7; font-size:12px; }
.mockup-home #analysen { background:linear-gradient(180deg,var(--hero-bg),rgba(2,12,22,0) 220px); border-top:0; }
@keyframes portrait-copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(min-width:1800px) {
  .hero-background .home-hero-grid { width:calc(100% - 160px); max-width:2100px; }
  .hero-background .home-hero-copy { max-width:760px; }
}
@media(min-width:761px) and (max-width:1100px) {
  .hero-background .home-hero-grid { width:calc(100% - 64px); }
  .hero-background .home-hero-copy { width:47%; }
  .hero-background h1 { font-size:clamp(42px,5vw,56px); }
  .hero-background .hero-socials { right:12px; }
  .hero-background .hero-quote { right:5%; bottom:5%; width:250px; }
  .mockup-home .mockup-header .navlinks { gap:16px; }
}
@media(max-width:760px) {
  .mockup-home .mockup-header { position:fixed; background:linear-gradient(180deg,rgba(2,12,22,.85),transparent); }
  .mockup-home .mockup-header .nav { width:calc(100% - 40px); height:64px; }
  .mockup-home .mockup-header .menu { width:44px; height:44px; }
  .mockup-home .home-hero.hero-background { --photo-height:clamp(370px,103vw,520px); padding:0 0 56px; align-items:stretch; }
  .hero-background .hero-backdrop { top:44px; bottom:auto; height:var(--photo-height); }
  .hero-background .hero-backdrop img { object-fit:cover; object-position:78% top; }
  .home-hero.hero-background::before { top:44px; bottom:auto; height:var(--photo-height); background:linear-gradient(180deg,rgba(2,12,22,.12),transparent 18%,transparent 53%,var(--hero-bg) 100%),linear-gradient(90deg,rgba(2,12,22,.18),transparent 20%,transparent 85%,rgba(2,12,22,.28)); }
  .hero-background .home-hero-grid { width:calc(100% - 40px); margin:0 auto; padding-top:calc(var(--photo-height) - 10px); min-height:0; }
  .hero-background .home-hero-copy { width:100%; max-width:560px; margin:auto; padding:0; }
  .hero-background h1 { font-size:clamp(36px,8.6vw,56px); line-height:1.07; letter-spacing:-.035em; }
  .hero-background .hero-kicker { font-size:12px; letter-spacing:.07em; margin-bottom:14px; }
  .hero-background .home-hero-copy>p { font-size:16px; margin-top:20px; }
  .hero-background .home-actions { display:flex; gap:10px; margin-top:24px; }
  .hero-background .home-actions .btn { min-height:48px; font-size:14px; padding:12px 18px; }
  .hero-background .topic-line { font-size:12px; gap:8px; margin-top:24px; letter-spacing:.02em; }
  .hero-background .hero-socials { right:10px; top:108px; transform:none; gap:6px; padding:6px; }
  .hero-background .hero-socials a { width:44px; height:44px; }
  .hero-background .hero-quote,.hero-background .social-hint { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-background .home-hero-copy { animation:none!important; }
}

/* Consistent brand glyphs, one quiet rail, generous touch targets. */
.hero-background .hero-socials {
  padding:8px; gap:8px; border:1px solid rgba(203,230,236,.13); border-radius:20px;
  background:rgba(3,16,25,.56); box-shadow:none; backdrop-filter:blur(12px);
}
.hero-background .hero-socials a {
  width:48px; height:48px; border:0; border-radius:12px;
  color:#b6d7dc; background:transparent; animation:none;
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.hero-background .hero-socials svg.brand-icon {
  display:block; width:23px; height:23px; fill:currentColor; stroke:none;
  transform:none; filter:none;
}
.hero-background .hero-socials a[data-social="youtube"] svg { width:26px; height:26px; }
.hero-background .hero-socials a:hover {
  color:#18e1d1; background:rgba(24,225,209,.10); transform:translateX(-2px); box-shadow:none;
}
.hero-background .hero-socials a:focus-visible {
  color:#18e1d1; background:rgba(24,225,209,.10); outline:2px solid #18e1d1;
  outline-offset:3px; transform:none; box-shadow:none;
}
.hero-background .hero-socials a:active { transform:scale(.96); }
.hero-background .social-hint {
  right:24px; width:66px; top:calc(45% - 161px); text-align:center;
  font-family:Inter,system-ui,sans-serif; font-size:12px; font-style:normal;
  font-weight:500; line-height:1.5; letter-spacing:0; color:#b6c9d2; transform:none;
}
@media(min-width:761px) and (max-width:1100px) {
  .hero-background .social-hint { right:12px; }
}
@media(max-width:760px) {
  .hero-background .hero-socials { padding:5px; gap:5px; border-radius:16px; }
  .hero-background .hero-socials a { width:44px; height:44px; border-radius:10px; }
  .hero-background .hero-socials svg.brand-icon { width:22px; height:22px; }
  .hero-background .hero-socials a[data-social="youtube"] svg { width:25px; height:25px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-background .hero-socials a { transition:none; }
}

/* Free-standing social icons; transparent border preserves their exact position. */
.hero-background .hero-socials {
  background:transparent; border-color:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}