/* ============================================================
   The 360 Solution — Landingpage (Notch Nav)
   Ported from the Claude Design source to a standalone site.
   ============================================================ */

:root { --accent: #2f57e6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: #f4f1ea;
  color: #1b1e23;
  font-family: 'Hanken Grotesk', sans-serif;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Notch Navbar – responsive hooks */
[data-nav-mobileonly] { display: none; }
[data-nav-drawer] { display: none; }
@media (max-width:1120px){
  [data-nav-desktop] { display: none !important; }
  [data-nav-mobileonly] { display: flex !important; }
  [data-nav-drawer] { display: block; }
}
[data-navlink] { position: relative; }
[data-navlink]::after { content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1.5px; background:var(--accent,#2f57e6); transition:right .3s cubic-bezier(.2,.7,.2,1); }
[data-navlink]:hover::after { right:0; }

/* Notch Navbar v2 — refined */
header[data-navbar] { transition: filter .5s ease, height .5s cubic-bezier(.2,.7,.2,1); }
[data-rail],[data-notch] { transition: height .5s cubic-bezier(.2,.7,.2,1); }
header[data-navbar][data-scrolled="1"] { height:54px; filter:drop-shadow(0 12px 24px rgba(22,25,31,.15)); }
header[data-navbar][data-scrolled="1"] [data-rail] { height:42px; }
header[data-navbar][data-scrolled="1"] [data-notch] { height:54px; }

[data-ctaunder] { position:relative; padding-bottom:6px; }
[data-ctaunder]::before { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(22,25,31,.2); }
[data-ctaunder]::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--accent,#2f57e6); transition:right .42s cubic-bezier(.2,.7,.2,1); }
[data-ctaunder]:hover::after { right:0; }

@media (max-width:760px){
  [data-stack-grid] { flex-direction:column !important; }
  [data-stack-slot] {
    height:calc(100vh - 116px) !important;
    height:calc(100svh - 116px) !important;
    position:sticky !important;
    top:64px !important;
    margin-bottom:0 !important;
    align-items:flex-start !important;
  }
  [data-stack-card] { width:100% !important; }
  [data-stack-media] {
    flex:0 0 140px !important;
    height:140px !important;
    min-height:140px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(236,232,224,.08);
  }
  [data-stack-content] { padding:16px !important; }
  [data-stack-title] { font-size:1.45rem !important; margin-bottom:14px !important; }
  [data-stack-divider] { margin-bottom:14px !important; }
  [data-rolegrid] {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 12px !important;
    margin-bottom:14px !important;
  }
  [data-rolegrid] > div { padding:4px 0 !important; font-size:.73rem !important; line-height:1.25 !important; }
  [data-stack-approach-label] { margin-bottom:6px !important; }
  [data-stack-approach] { font-size:.82rem !important; line-height:1.28 !important; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  [data-stack-slot] { height:auto !important; position:static !important; margin-bottom:18px !important; }
  [data-stack-card] { transform:none !important; }
}
@media (max-width:1120px){
  [data-railcorner] { display:none !important; }
  [data-center] { flex:1 1 auto !important; width:auto !important; height:56px !important; }
  header[data-navbar] { height:56px !important; }
  header[data-navbar][data-scrolled="1"] { height:56px !important; }
  [data-navgrid] { display:flex !important; justify-content:space-between !important; padding:0 20px !important; column-gap:14px !important; }
  [data-brandcell] { position:static !important; justify-self:auto !important; }
  [data-brandcell] img { position:absolute !important; left:20px !important; top:50% !important; transform:translateY(-50%) !important; }
  [data-brandsub] { position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; display:block !important; font-size:13.5px !important; font-weight:900 !important; color:#3a362e !important; }
}
@media (max-width:400px){
  [data-brandsub] { font-size:12px !important; letter-spacing:.2em !important; }
}

@keyframes blinkDot { 0%,100%{opacity:.4;} 50%{opacity:.85;} }
@keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes ftSlideIn { from{transform:translateY(7px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes cursorClick { 0%,60%,100%{transform:scale(1) rotate(-8deg);} 70%{transform:scale(.8) rotate(-8deg);} 80%{transform:scale(1.05) rotate(-8deg);} }
@keyframes mqA { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.client-marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.client-marquee-track {
  display:flex;
  align-items:center;
  width:max-content;
  padding:14px 0;
  animation:mqA 55s linear infinite;
  will-change:transform;
}
.client-marquee-group { display:flex;align-items:center;flex:none; }
.client-marquee-item {
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:0 40px;
  border-right:1px solid rgba(22,25,31,.08);
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  color:#6f6a5f;
  white-space:nowrap;
}
.client-logo-slot {
  width:96px;
  height:22px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.client-logo-slot img { display:block;max-width:96px;max-height:22px;width:auto;height:auto; }
.client-logo-invert { filter:invert(1); }
.client-wordmark { font-size:15px;font-weight:700;letter-spacing:-.035em;color:#25282d;text-transform:lowercase; }
@media (max-width:640px){
  .client-marquee-item { padding:0 28px; }
  .client-logo-slot { width:82px; }
  .client-logo-slot img { max-width:82px; }
}
@media (prefers-reduced-motion:reduce){
  .client-marquee-track { animation:none;transform:none;will-change:auto; }
}

[data-credrow] { transition:background .3s, padding-left .3s, box-shadow .3s; }
[data-credrow]:hover { background:rgba(47,87,230,.05) !important; padding-left:12px !important; box-shadow:inset 2px 0 0 var(--accent,#2f57e6); }

@keyframes cardTurnA { 0%{transform:rotateY(-24deg);opacity:.35;} 55%{opacity:1;} 100%{transform:rotateY(0deg);opacity:1;} }
@keyframes roleFadeA { from{opacity:0;transform:translateY(7px);} to{opacity:1;transform:none;} }

/* ---- CTA Section: Double-Bezel Redesign ---- */
.cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,16px); }
@media (max-width:768px){ .cta-grid { grid-template-columns:1fr; } }

.cta-bezel {
  border-radius:20px;
  padding:6px;
  transition:transform .55s cubic-bezier(.32,.72,0,1), box-shadow .55s cubic-bezier(.32,.72,0,1);
}
@media (hover:hover){
  .cta-bezel:hover { transform:translateY(-6px); }
  .cta-bezel-dark:hover  { box-shadow:0 52px 96px -28px rgba(0,0,0,.6); }
  .cta-bezel-light:hover { box-shadow:0 40px 80px -28px rgba(22,25,31,.18); }
  .cta-bezel:hover .cta-pill-icon { transform:translate(2px,-1px); }
}
.cta-bezel-dark  { background:rgba(0,0,0,.09); border:1px solid rgba(0,0,0,.15); }
.cta-bezel-light { background:rgba(255,255,255,.42); border:1px solid rgba(0,0,0,.07); }

.cta-inner {
  border-radius:15px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.cta-inner-dark {
  background:linear-gradient(158deg,#1c2229 0%,#141a20 55%,#0f141b 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  padding:clamp(36px,3.8vw,52px);
}
.cta-inner-light {
  background:#f7f4ed;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
  padding:clamp(36px,3.8vw,52px);
}

.cta-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14.5px;
  padding:11px 11px 11px 22px;
  border-radius:999px;
  text-decoration:none;
  transition:transform .4s cubic-bezier(.32,.72,0,1);
}
.cta-pill:active { transform:scale(.97); }
.cta-pill-light { background:#f4f1ea; color:#16191f; }
.cta-pill-dark  { background:#16191f; color:#f4f1ea; }

.cta-pill-icon {
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex:none;
  transition:transform .4s cubic-bezier(.32,.72,0,1);
}

/* ---- Kontakt Strip ---- */
.kontakt-phone-pill {
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  transition:opacity .35s cubic-bezier(.32,.72,0,1);
}
.kontakt-phone-pill:hover { opacity:.7; }
.kontakt-phone-pill:hover .cta-pill-icon { transform:translate(2px,-1px); }
@media (max-width:640px){
  #kontakt .kontakt-strip { grid-template-columns:1fr !important; }
  #kontakt .kontakt-divider { display:none !important; }
}

[data-anim] { opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(.2,.6,.2,1), transform .85s cubic-bezier(.2,.6,.2,1); }
[data-anim].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-anim]{opacity:1;transform:none;transition:none;} }

@media (max-width:640px){
  [data-case-row] { flex-wrap:wrap; gap:6px 14px !important; }
  [data-case-row] [data-case-cat] { width:auto !important; }
  [data-case-detail] { padding-left:0 !important; }
}
@media (max-width:820px){
  [data-radar-cards] { grid-template-columns:repeat(2,1fr) !important; }
  [data-radar-funnel] { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px){
  [data-radar-cards] { grid-template-columns:1fr !important; }
}
@media (max-width:560px){
  [data-radar-titlebar-text] [data-full] { display:none !important; }
  [data-radar-titlebar-text] [data-short] { display:inline !important; }
}
@media (max-width:671px){
  [data-suchsystem-sticky] { position:static !important; top:auto !important; }
}
@media (max-width:640px){
  #hero-stats { grid-template-columns:repeat(2,1fr) !important; }
  #hero-stats > div:last-child { grid-column:1 / -1 !important; }
}
@media (max-width:480px){
  [data-stickybar-inner] { padding:13px 14px !important; gap:8px !important; }
  [data-stickybar-text] { font-size:.82rem !important; white-space:nowrap !important; }
  [data-stickybar-text] [data-full] { display:none !important; }
  [data-stickybar-text] [data-short] { display:inline !important; }
  [data-stickybar-cta] { padding:9px 12px !important; font-size:12.5px !important; white-space:nowrap !important; }
}

/* ---- hover behaviours (ported from the design's style-hover attributes) ---- */
a { color: inherit; }
.hv-ink:hover { color:#16191f; }
.hv-white:hover { color:#fff; }
.hv-brand:hover { opacity:.82; }
.hv-btn-light:hover { background:#fff; }
.hv-btn-light.hv-lift:hover { background:#fff; transform:translateY(-2px); }
.hv-btn-dark:hover { background:#000; }
.hv-underline:hover { border-color:var(--accent,#2f57e6) !important; }
.hv-op:hover { opacity:.78; }
.hv-case:hover { opacity:.72; }
.hv-linkedin:hover { border-color:var(--accent,#2f57e6) !important; color:var(--accent,#2f57e6); }
.hv-social { transition:border-color .25s,color .25s,transform .25s; }
.hv-social:hover { border-color:var(--accent,#2f57e6) !important; color:var(--accent,#7f93e8) !important; transform:translateY(-2px); }
.hv-profile:hover { border-color:rgba(236,232,224,.22) !important; transform:translateY(-2px); }
.hv-suchen:hover { background:#fff; transform:translateY(-1px); }
.hv-anpassen:hover { border-color:rgba(127,147,232,.65) !important; }
.profile-card { transition:border-color .25s, transform .25s; }
.chip { transition:all .22s; }

/* ---- Differentiators Editorial Rows ---- */
.diff-editorial {}

.diff-row {
  display:grid;
  grid-template-columns:clamp(56px,6vw,80px) 1fr;
  gap:0 clamp(28px,4vw,56px);
  padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid rgba(236,232,224,.1);
  align-items:start;
  cursor:default;
}
.diff-row:last-child { border-bottom:1px solid rgba(236,232,224,.1); }

.diff-row-num {
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(40px,5.2vw,64px);
  line-height:1;
  color:rgba(127,147,232,.26);
  letter-spacing:-.02em;
  user-select:none;
  padding-top:5px;
  transition:color .45s cubic-bezier(.32,.72,0,1);
}
.diff-row-title {
  font-family:'Newsreader',serif;
  font-weight:400;
  font-size:clamp(1.75rem,3vw,2.6rem);
  line-height:1.1;
  color:#f0ece4;
  text-wrap:balance;
  margin-bottom:clamp(10px,1.4vw,16px);
  transition:color .45s cubic-bezier(.32,.72,0,1);
}
.diff-row-desc {
  margin:0;
  color:#646760;
  font-size:.97rem;
  line-height:1.66;
  max-width:510px;
}
@media (hover:hover){
  .diff-row:hover .diff-row-num  { color:rgba(127,147,232,.88); }
  .diff-row:hover .diff-row-title { color:#f8f6f1; }
}
@media (max-width:520px){
  .diff-row { grid-template-columns:1fr; gap:10px 0; padding:clamp(32px,5vw,44px) 0; }
  .diff-row-num { font-size:36px; }
}