/* css/site.css */

/* Dat is de komplette CSS: Menü (Glass→Solid), Mega-Dropdown, Equal Cols, Hero, Animationen (50% langsamer), A11y */
:root{
  --accent: #f9b233;
  --ink: #0b0f14;

  --glass-bg: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.22);
  --glass-text: rgba(255,255,255,.94);

  --solid-bg: #ffffff;
  --solid-border: rgba(0,0,0,.08);
  --solid-text: rgba(0,0,0,.92);

  --radius-xl: 1.25rem;
  --radius-lg: 1rem;

  --ease: cubic-bezier(.2,.8,.2,1);

  /* Dat is dat Tempo: 1.5 = 50% langsamer */
  --motion-mult: 1.5;

  --reveal-dur: calc(0.65s * var(--motion-mult));
  --clip-dur:   calc(0.85s * var(--motion-mult));
  --tilt-dur:   calc(0.18s * var(--motion-mult));
  --sheen-dur:  calc(1.05s * var(--motion-mult));
  --pulse-dur:  calc(2.2s  * var(--motion-mult));
}
a {color: var(--ink);}
a:hover {color: var(--accent);}

/* Grundlayout */
html{ scroll-behavior: smooth; }
body{ background:#fff; color: rgba(0,0,0,.88); }


/* Skip-Link: för Tastatuur-Lüüd */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
  z-index:9999;
}
.skip-link:focus{
  left:1rem; top:1rem;
  width:auto; height:auto;
  padding:.75rem 1rem;
  background:#fff; color:#000;
  border:2px solid #000;
  border-radius:.75rem;
}

/* Fokus: good sichtbor */
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent), black 12%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent), black 12%);
  --bs-btn-focus-shadow-rgb: 255,106,0;
}

/* Kicker */
.kicker-light{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: rgba(255,255,255,.78);
}
.kicker{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: color-mix(in srgb, var(--ink), transparent 35%);
}



/* ---------- Hero ---------- */

a.chronocredits { 
  display: none !important;
}
.hero{
  position:relative;
  min-height:100vh;
  overflow:clip;
  display:grid;
  align-items:stretch;
}
.hero__media{ position:absolute; inset:0; }
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: translate3d(0,0,0) scale(1.03);
  will-change: transform;
  filter: saturate(.95) contrast(1.06);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side, rgba(249,178,51,.16), transparent 58%),
    linear-gradient(to bottom, rgba(11,15,20,.78), rgba(11,15,20,.70));
}
.hero__fade-top{
  position:absolute; top:0; left:0; right:0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(11,15,20,.62), rgba(11,15,20,0));
  pointer-events:none;
}
.hero__glow{
  position:absolute;
  inset:auto -15% -25% -15%;
  height: 420px;
  background: radial-gradient(closest-side, rgba(249,178,51,.22), transparent 72%);
  filter: blur(10px);
  opacity:.9;
}
.hero__content{
  position:relative;
  padding-top: 11.25rem;
  padding-bottom: 4.5rem;
}

/* Hero Card */
.hero-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,.22);
}
.hero-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.hero-steps{
  display:grid;
  gap:.85rem;
  margin-top:1rem;
}
.hero-step{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
}
.step-badge{
  width:2rem; height:2rem;
  border-radius:999px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--accent), white 85%);
  color: var(--ink);
  font-weight:900;
}

/* Scroll Hint */
.hero-scrollhint{
  margin-top: 3rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  color: rgba(255,255,255,.70);
  font-weight: 600;
}
.hero-scrollhint__dot{
  width:.5rem; height:.5rem;
  border-radius:999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 .35rem rgba(255,255,255,.14);
  animation: pulse var(--pulse-dur) var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.9; }
  50%{ transform: scale(1.22); opacity:.7; }
}

/* ---------- Sections ---------- */
.section{ padding: 5rem 0; }
@media (max-width: 576px){ .section{ padding: 3.5rem 0; } }

/* Panel */
.panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06);
}

/* Service */
.service{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06);
}
.service__thumb{
  width:100%;
  height:100%;
  max-height: 180px;
  object-fit:cover;
  border-radius: 1rem;
}
.service__body a{ color: inherit; text-decoration:none; }
.service__body a:hover{ text-decoration: underline; }

@media (max-width: 576px){
  .service{ grid-template-columns: 1fr; }
  .service__thumb{ max-height: 240px; }
}

/* CTA blocks */
.cta-block, .cta-mini, .cta-final{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.08);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.cta-mini{ padding: 1rem 1.25rem; box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06); }
.cta-final{ margin-top: 1rem; }

@media (max-width: 768px){
  .cta-block, .cta-mini, .cta-final{ flex-direction: column; align-items: stretch; }
  .cta-block .btn, .cta-mini .btn, .cta-final .btn{ width:100%; }
}

/* Referenz Card */
.card-case{
  display:flex;
  flex-direction: column;
  height:100%;
  text-decoration:none;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06);
  transition: transform var(--tilt-dur) var(--ease), box-shadow var(--tilt-dur) var(--ease);
}
.card-case:hover{
  transform: translateY(-3px);
  box-shadow: 0 .9rem 2.4rem rgba(0,0,0,.12);
}
.card-case .card-body{ flex:1 1 auto; }

/* Footer */
.footer{ padding: 1.25rem 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.footer__links{ display:flex; gap:1rem; }

/* ---------- Equal Cols ---------- */
/* Dat maakt all Cols op een Reeg glieks hoog */
.equal-cols{ align-items: stretch; }

/* Dat sorgt, dat Blocks de Höh utfüllt */
.equal-cols > [class*="col-"] > .panel,
.equal-cols > [class*="col-"] > .service,
.equal-cols > [class*="col-"] > .hero-card,
.equal-cols > [class*="col-"] > .card-case{
  height: 100%;
}

/* ---------- Animationen ---------- */
/* Reveal: fade + blur + move */
.reveal{
  opacity:0;
  transform: translate3d(0, 16px, 0);
  filter: blur(6px);
  transition:
    opacity var(--reveal-dur) var(--ease),
    transform var(--reveal-dur) var(--ease),
    filter var(--reveal-dur) var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* Extra Pop för Blocks */
.reveal.reveal-block{
  transform: translate3d(0, 18px, 0) scale(.985);
}
.reveal.is-visible.reveal-block{
  transform: translate3d(0,0,0) scale(1);
}

/* Clip-Reveal */
.clip-reveal{ display:inline-block; position:relative; overflow:hidden; }
.clip-reveal > span{
  display:inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--clip-dur) var(--ease);
}
.reveal.is-visible .clip-reveal > span{ transform: translate3d(0,0,0); }

/* Button Sheen */
.btn-sheen{ position:relative; overflow:hidden; }
.btn-sheen::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  opacity:0;
}
.btn-sheen:hover::after{
  opacity:1;
  animation: sheen var(--sheen-dur) var(--ease) 1;
}
@keyframes sheen{ 0%{left:-60%;} 100%{left:140%;} }

/* Card Glow */
.card-glow{ position:relative; isolation:isolate; }
.card-glow::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(120deg, rgba(249,178,51,0), rgba(249,178,51,.32), rgba(249,178,51,0));
  opacity:0;
  transition: opacity var(--tilt-dur) var(--ease);
  z-index:-1;
}
.card-glow:hover::before{ opacity:.7; }

/* Tilt Lite */
.tilt-lite{
  transform-style: preserve-3d;
  perspective: 900px;
  will-change: transform;
  transition: transform var(--tilt-dur) var(--ease);
}

/* Grid Steps */
.grid-steps{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 576px){ .grid-steps{ grid-template-columns: 1fr; } }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .clip-reveal > span{ transform:none !important; transition:none !important; }
  .btn-sheen::after{ display:none !important; }
  .hero__video{ transform:none !important; }
  .tilt-lite{ transition:none !important; }
  .hero-scrollhint__dot{ animation:none !important; }
}

/* Dat is Referenzen nach Bereich: Kacheln */
.area-card{
  display:flex;
  flex-direction: column;
  height:100%;
  text-decoration:none;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06);
  padding: 1.1rem;
  transition: transform var(--tilt-dur) var(--ease), box-shadow var(--tilt-dur) var(--ease);
}
.area-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 .9rem 2.4rem rgba(0,0,0,.12);
}

.area-card__badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  margin-bottom: .75rem;
}

.area-card__top{
  flex: 1 1 auto;
}

.area-card__kpis{
  display:grid;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(0,0,0,.08);
}

.area-kpi{
  display:flex;
  justify-content:space-between;
  gap: .75rem;
  font-size: .92rem;
}
.area-kpi__label{
  color: rgba(0,0,0,.55);
}
.area-kpi__value{
  color: rgba(0,0,0,.86);
  font-weight: 700;
  text-align:right;
}

.area-card__cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.86);
  font-weight: 800;
}

/* Dat is Referenzen nach Bereich: Kacheln mit Bild baven */
.ref-area-card{
  display:flex;
  flex-direction: column;
  height:100%;
  text-decoration:none;
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.06);
  transition: transform var(--tilt-dur) var(--ease), box-shadow var(--tilt-dur) var(--ease);
}
.ref-area-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 .9rem 2.4rem rgba(0,0,0,.12);
}

.ref-area-card__img{
  width:100%;
  height: 160px;
  object-fit: cover;
  display:block;
}
@media (max-width: 576px){
  .ref-area-card__img{ height: 190px; }
}

.ref-area-card__body{
  padding: 1rem 1.1rem;
  flex: 1 1 auto;
}

.ref-area-card__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: .75rem;
  padding: .95rem 1.1rem;
  border-top: 1px solid rgba(0,0,0,.08);
  font-weight: 800;
  color: rgba(0,0,0,.86);
}

.accordion-button:not(.collapsed) {
	background-color: var(--accent) !important;
    color:#fff;
}


:root{
  --footer-bg: #0b1020;
  --footer-surface: rgba(255,255,255,.045);
  --footer-border: rgba(255,255,255,.10);
  --footer-text: rgba(255,255,255,.86);
  --footer-muted: rgba(255,255,255,.66);
  --footer-accent: #7c3aed; /* kann durch euren Brand-Ton ersetzt werden */
  --footer-accent2: #22c55e;
  --footer-radius: 16px;
}

.site-footer{
  position: relative;
  overflow: hidden;
  color: var(--footer-text);
  background:
    radial-gradient(1100px 520px at 12% 0%, color-mix(in oklab, var(--footer-accent) 28%, transparent), transparent 60%),
    radial-gradient(900px 520px at 90% 12%, color-mix(in oklab, var(--footer-accent2) 22%, transparent), transparent 56%),
    var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.site-footer a{
  color: var(--footer-muted);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
.site-footer a:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .22rem;
}

.footer-card{
  background: var(--footer-surface);
  border: 1px solid var(--footer-border);
  border-radius: var(--footer-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer-title{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 1.125rem;
  line-height: 1.2;
}

.footer-title-sm{
  font-weight: 800;
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--footer-text) 92%, transparent);
}

.footer-muted{
  color: var(--footer-muted);
}

.footer-links{
  display: grid;
  gap: .55rem;
  padding-left: 0;
}
.footer-links li{
  line-height: 1.35;
}

.footer-link-cta{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  color: #fff !important;
}
.footer-link-cta::after{
  content: "→";
  opacity: .9;
  transform: translateX(0);
  transition: transform .15s ease;
}
.footer-link-cta:hover::after{
  transform: translateX(3px);
}

.footer-pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--footer-border);
  background: rgba(255,255,255,.05);
  color: color-mix(in oklab, var(--footer-text) 88%, transparent);
  font-size: .86rem;
  white-space: nowrap;
}
.footer-pill i{
  opacity: .95;
}

.footer-social-btn{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--footer-border);
  background: rgba(255,255,255,.05);
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.footer-social-btn i{
  font-size: 1.05rem;
}
.footer-social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff !important;
}

.footer-contact{
  display: grid;
  gap: .55rem;
}
.footer-contact li{
  display: flex;
  gap: .55rem;
  align-items: center;
}
.footer-contact i{
  opacity: .9;
}

.footer-divider{
  border-top: 1px solid var(--footer-border);
}

.footer-inline-link{
  color: var(--footer-muted);
}

/* Kleine Screens: etwas mehr Luft */
@media (max-width: 575.98px){
  .footer-card{ border-radius: 14px; }
  .footer-pill{ font-size: .84rem; }
}


:root{
  --tcmx-r: 22px;
  --tcmx-r2: 28px;
  --tcmx-shadow: 0 22px 70px rgba(0,0,0,.22);
  --tcmx-shadow2: 0 18px 60px rgba(0,0,0,.14);
  --tcmx-b: rgba(255,255,255,.14);
  --tcmx-b2: rgba(0,0,0,.10);
  --tcmx-dark: #070A12;
  --tcmx-dark2: #0B1020;
}

/* -----------------------------
   HERO (100vh)
------------------------------ */
.tcmx-hero{
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(1000px 650px at 85% 20%, rgba(16,185,129,.30), transparent 55%),
    radial-gradient(900px 600px at 55% 90%, rgba(244,114,182,.22), transparent 60%),
    linear-gradient(180deg, var(--tcmx-dark) 0%, var(--tcmx-dark) 35%, var(--tcmx-dark2) 100%);
}
.tcmx-hero__bg{
  position:absolute; inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity:.22;
  mask-image: radial-gradient(55% 45% at 25% 18%, #000 0%, transparent 72%);
}
.tcmx-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .28;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
}
.tcmx-hero__overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 650px at 18% 10%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(900px 650px at 92% 30%, rgba(16,185,129,.26), transparent 58%),
    linear-gradient(180deg, rgba(7,10,18,.40), rgba(7,10,18,.68));
}
.tcmx-hero__noise{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.tcmx-hero__container{
  flex: 1;
  display: flex;
  align-items: stretch;
  padding-top: clamp(3.5rem, 6vh, 6rem);
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

/* -----------------------------
   Typography
------------------------------ */
.tcmx-kicker{
  display:inline-flex;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size:.78rem;
}
.tcmx-h1{
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.53;
  font-size: clamp(2rem, 3.6824vw, 3.1rem);
  margin: .85rem 0 .65rem;
}
.tcmx-h2{
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin: .3rem 0 .6rem;
}
.tcmx-h3{
  font-weight: 850;
  letter-spacing: -.01em;
  margin: .25rem 0 .5rem;
}
.tcmx-hl{ position: relative; display: inline-block; }
.tcmx-hl::after_old{
  content:"";
  position:absolute;
  left:-.06em; right:-.06em; bottom:.12em;
  height: .36em;
  background: linear-gradient(90deg, rgba(99,102,241,.60), rgba(16,185,129,.45), rgba(244,114,182,.45));
  filter: blur(10px);
  z-index:-1;
  opacity:.9;
}
.tcmx-lead{
  color: rgba(255,255,255,.82);
  font-size: 1.12rem;
  max-width: 62ch;
}
.tcmx-text{
  color: rgba(0,0,0,.72);
  font-size: 1.02rem;
  line-height: 1.7;
}
.tcmx-text strong{ font-weight: 750; }
.tcmx-text--muted{ color: rgba(255,255,255,.78); }
.tcmx-note{
  color: rgba(255,255,255,.56);
  font-size:.88rem;
  margin-top: .65rem;
}

/* -----------------------------
   Pills + Buttons
------------------------------ */
.tcmx-pillgrid{
  display:flex;
  flex-wrap: wrap;
  gap:.55rem;
  margin-top: .9rem;
}
.tcmx-pill{
  display:inline-flex;
  align-items:center;
  padding:.45rem .7rem;
  border-radius: 999px;
  text-decoration:none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tcmx-pill:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.26);
}
.tcmx-btnMag{
  border-radius: 999px;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  box-shadow: 0 18px 46px rgba(99,102,241,.22);
  position: relative;
}
.tcmx-arrow{ display:inline-block; transform: translateX(0); transition: transform .18s ease; }
.tcmx-btnMag:hover .tcmx-arrow{ transform: translateX(4px); }
.tcmx-btnGhost{
  border-radius: 999px;
  border-color: rgba(255,255,255,.38) !important;
}

/* -----------------------------
   Metrics
------------------------------ */
.tcmx-metrics{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.tcmx-metric{
  min-width: 150px;
  padding: .85rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.tcmx-num{
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.tcmx-lbl{
  color: rgba(255,255,255,.72);
  font-size:.92rem;
}

/* -----------------------------
   Hero Visual Stack
------------------------------ */
.tcmx-stack{
  position: relative;
  height: min(520px, 55vh);
  min-height: 420px;
  border-radius: var(--tcmx-r2);
  transform-style: preserve-3d;
}
.tcmx-card{
  position:absolute;
  border-radius: var(--tcmx-r);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  box-shadow: var(--tcmx-shadow);
  transform: translateZ(0);
}
.tcmx-card img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.06);
  transition: transform .45s ease, filter .45s ease;
}
.tcmx-card:hover img{
  transform: scale(1.08);
  filter: saturate(1.14) contrast(1.10);
}
.tcmx-card--a{ left: 0; top: 40px; width: 56%; height: 60%; }
.tcmx-card--b{ right: 0; top: 10px; width: 56%; height: 56%; }
.tcmx-card--c{ left: 16%; bottom: 0; width: 68%; height: 52%; }

.tcmx-card__cap{
  position:absolute;
  left: 14px; right: 14px; bottom: 14px;
  display:flex;
  flex-wrap: wrap;
  gap:.5rem;
}
.tcmx-tag{
  padding:.25rem .55rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  font-size:.82rem;
}
.tcmx-orb{
  position:absolute;
  border-radius: 999px;
  filter: blur(26px);
  opacity:.6;
  mix-blend-mode: screen;
  pointer-events:none;
}
.tcmx-orb--1{
  width: 180px; height: 180px;
  left: -40px; bottom: 70px;
  background: rgba(99,102,241,.85);
  animation: tcmxFloat1 6s ease-in-out infinite;
}
.tcmx-orb--2{
  width: 220px; height: 220px;
  right: -60px; top: 90px;
  background: rgba(16,185,129,.75);
  animation: tcmxFloat2 7s ease-in-out infinite;
}
@keyframes tcmxFloat1{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(18px,-10px); } }
@keyframes tcmxFloat2{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-16px,12px); } }

.tcmx-trustbar{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap:.8rem 1rem;
  color: rgba(255,255,255,.72);
  font-size:.92rem;
}
.tcmx-trustbar i{ margin-right:.35rem; }

/* -----------------------------
   Marquee
------------------------------ */
.tcmx-marquee{
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  position: relative;
  z-index: 2;
}
.tcmx-marquee__track{
    width: max-content;
  flex-wrap: nowrap;
  display:flex;
  gap: 1.2rem;
  padding: .85rem 0;
  white-space: nowrap;
  will-change: transform;
  animation: tcmxMarq 70s linear infinite;
}
.tcmx-marquee:hover .tcmx-marquee__track{ animation-play-state: paused; }
.tcmx-marquee__track span{white-space: nowrap;
  color: rgba(255,255,255,.80);
  font-weight: 750;
  letter-spacing: .01em;
}
@keyframes tcmxMarq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* -----------------------------
   Sections base + eyebrow + lists
------------------------------ */
.tcmx-section{
  padding: 4.5rem 0;
  position: relative;
}
.tcmx-section--dark{
  padding: 4.8rem 0;
  color:#fff;
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(850px 550px at 85% 60%, rgba(244,114,182,.14), transparent 60%),
    linear-gradient(180deg, var(--tcmx-dark) 0%, var(--tcmx-dark2) 100%);
}
.tcmx-section--soft{ background: rgba(0,0,0,.03); }
.tcmx-eyebrow{
  display:inline-flex;
  padding:.35rem .65rem;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-weight: 750;
  margin-bottom: .5rem;
}
.tcmx-section--dark .tcmx-eyebrow{
  color:#fff;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.tcmx-check{
  list-style:none;
  padding:0;
  margin: 1rem 0 0;
  display:grid;
  gap:.7rem;
}
.tcmx-check li{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
}
.tcmx-check li::before{
  content:"";
  width: 18px; height: 18px;
  border-radius: 999px;
  margin-top: .22rem;
  background: rgba(16,185,129,.18);
  border: 1px solid rgba(16,185,129,.35);
  box-shadow: inset 0 0 0 4px rgba(16,185,129,.08);
}

/* 2x2 mini cards */
.tcmx-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 991.98px){
  .tcmx-grid2{ grid-template-columns: 1fr; }
}
.tcmx-miniCard{
  border-radius: 18px;
  border: 1px solid var(--tcmx-b2);
  background: rgba(255,255,255,.80);
  box-shadow: var(--tcmx-shadow2);
  padding: 1.05rem 1.05rem;
}
.tcmx-miniCard__title{ font-weight: 850; margin-bottom: .3rem; }
.tcmx-miniCard__text{ color: rgba(0,0,0,.70); line-height: 1.6; }

/* Service media cards */
.tcmx-media{
  position: relative;
  display:block;
  border-radius: var(--tcmx-r);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 80px rgba(0,0,0,.30);
  min-height: 30rem;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}
.tcmx-media img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .55s ease, filter .55s ease;
  filter: saturate(1.08) contrast(1.08);
}
.tcmx-media:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 110px rgba(0,0,0,.36);
}
.tcmx-media:hover img{
  transform: scale(1.10);
  filter: saturate(1.16) contrast(1.12);
}
.tcmx-media__overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
}
.tcmx-media__title{ color:#fff; font-weight: 900; font-size: 1.15rem; }
.tcmx-media__sub{ color: rgba(255,255,255,.78); font-size:.92rem; margin-top: .15rem; }
.tcmx-media__list{
  margin: .75rem 0 0;
  padding-left: 1.1rem;
  color: rgba(255,255,255,.78);
  font-size:.92rem;
  line-height: 1.5;
}
.tcmx-media__list li{ margin: .25rem 0; }

/* -----------------------------------------
   DECOR layers + dividers (soft separation)
------------------------------------------ */
.tcmx-decor{ position: relative; overflow: hidden; }
.tcmx-decor__layer{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(520px 220px at 18% 22%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(520px 220px at 82% 42%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(460px 240px at 52% 92%, rgba(244,114,182,.06), transparent 60%);
  filter: saturate(1.05);
}
.tcmx-decor__layer--alt{
  opacity:.45;
  background:
    radial-gradient(520px 240px at 12% 30%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(520px 240px at 88% 24%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(520px 280px at 58% 92%, rgba(244,114,182,.05), transparent 60%);
}
.tcmx-decor__layer--cases{
  opacity:.42;
  background:
    radial-gradient(560px 240px at 20% 40%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(560px 240px at 80% 60%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(520px 260px at 52% 10%, rgba(244,114,182,.06), transparent 60%);
}
.tcmx-decor__layer--faq{
  opacity:.40;
  background:
    radial-gradient(520px 240px at 20% 20%, rgba(244,114,182,.06), transparent 60%),
    radial-gradient(560px 260px at 84% 46%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(520px 260px at 52% 90%, rgba(16,185,129,.07), transparent 60%);
}

.tcmx-divider{
  height: 86px;
  margin-top: 28px;
  opacity: .22;
}
.tcmx-divider svg{ width:100%; height:100%; display:block; }
.tcmx-divider path{ fill: rgba(0,0,0,.22); }
.tcmx-divider--subtle{ opacity: .14; }
.tcmx-divider--soft{ opacity: .18; }

/* -----------------------------
   PROCESS: horizontal stepper + index
------------------------------ */
.tcmx-miniIndex{
  margin-top: 1.1rem;
  display: grid;
  gap: .5rem;
  max-width: 340px;
}
.tcmx-miniIndex__item{
  text-align:left;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--tcmx-shadow2);
  padding: .65rem .75rem;
  font-weight: 800;
  display:flex;
  gap:.6rem;
  align-items:center;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tcmx-miniIndex__item span{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.18);
  font-weight: 900;
}
.tcmx-miniIndex__item:hover{ transform: translateY(-2px); }
.tcmx-miniIndex__item.is-active{
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 22px 64px rgba(0,0,0,.14);
}
.tcmx-stepper{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding: 6px 4px 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.tcmx-stepper::-webkit-scrollbar{ height: 10px; }
.tcmx-stepper::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.tcmx-stepCard{
  flex: 0 0 min(520px, 86%);
  scroll-snap-align: start;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(520px 220px at 18% 10%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(520px 240px at 92% 28%, rgba(16,185,129,.08), transparent 60%),
    rgba(255,255,255,.86);
  box-shadow: var(--tcmx-shadow2);
  padding: 1.05rem 1.05rem;
}
.tcmx-stepCard__top{
  display:flex;
  align-items:center;
  gap: .75rem;
  margin-bottom: .55rem;
}
.tcmx-stepCard__n{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight: 950;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.22);
}
.tcmx-stepCard__t{ font-weight: 950; font-size: 1.08rem; }
.tcmx-stepCard__p{ color: rgba(0,0,0,.72); line-height: 1.65; margin: 0 0 .7rem; }
.tcmx-stepCard__list{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(0,0,0,.70);
  line-height: 1.55;
}
.tcmx-stepCard__list li{ margin: .25rem 0; }

.tcmx-ribbon{max-width: 340px;
  margin-top: 14px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--tcmx-shadow2);
  padding: 1rem 1rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
    
}
.tcmx-ribbon__t{ font-weight: 950; }
.tcmx-ribbon__p{ color: rgba(0,0,0,.70); margin-top: .15rem; }

/* -----------------------------
   FORM: offer cards + floating form
------------------------------ */
.tcmx-offerGrid{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.tcmx-offerCard{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  box-shadow: var(--tcmx-shadow2);
  padding: 1rem 1rem;
}
.tcmx-offerCard__t{ font-weight: 950; margin-bottom: .35rem; }
.tcmx-offerCard__list{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(0,0,0,.70);
  line-height: 1.55;
}

.tcmx-formCard{
  border-radius: calc(var(--tcmx-r2));
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(700px 260px at 10% 0%, rgba(99,102,241,.16), transparent 55%),
    radial-gradient(620px 280px at 98% 28%, rgba(16,185,129,.12), transparent 55%),
    rgba(255,255,255,.88);
  box-shadow: var(--tcmx-shadow2);
  padding: 1.25rem 1.25rem;
}
.tcmx-formCard--float{ transform: translateY(-10px); }
@media (max-width: 991.98px){ .tcmx-formCard--float{ transform: none; } }

.tcmx-lock{ color: rgba(0,0,0,.65); font-size:.95rem; }
.tcmx-lock i{ margin-right:.35rem; }

.tcmx-progressWrap{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tcmx-progressBar{
  flex: 1 1 260px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  overflow:hidden;
}
.tcmx-progressBar > span{
  display:block;
  height:100%;
  width: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,102,241,.95), rgba(16,185,129,.95), rgba(244,114,182,.85));
  transition: width .25s ease;
}
.tcmx-progressHint{ color: rgba(0,0,0,.62); font-size:.95rem; }

/* scanline */
.tcmx-scanline{
  margin-top: 16px;
  height: 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow:hidden;
  position: relative;
}
.tcmx-scanline::after{
  content:"";
  position:absolute;
  inset:-10px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.28), rgba(16,185,129,.18), transparent);
  transform: translateX(-60%);
  animation: tcmxScan 2.8s linear infinite;
  opacity:.9;
}
@keyframes tcmxScan{ from{ transform: translateX(-60%); } to{ transform: translateX(60%); } }

/* -----------------------------
   CASES cards
------------------------------ */
.tcmx-caseCard{
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.86);
  box-shadow: var(--tcmx-shadow2);
  transition: transform .22s ease, box-shadow .22s ease;
}
.tcmx-caseCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
}
.tcmx-caseCard--lift{ transform: translateY(-10px); }
.tcmx-caseCard--lift:hover{ transform: translateY(-16px); }

.tcmx-caseCard img{ width:100%; height: 220px; object-fit: cover; }
.tcmx-caseCard__b{ padding: 1rem 1rem; }

.tcmx-kpi{ font-weight: 900; letter-spacing: -.02em; font-size: 1.05rem; opacity: .9; }
.tcmx-bullets{
  margin: .6rem 0 .9rem;
  padding-left: 1.1rem;
  color: rgba(0,0,0,.70);
}
.tcmx-link{ text-decoration:none; font-weight: 800; }

.tcmx-navBtn{ border-radius: 999px; }

/* -----------------------------
   FAQ soft accordion + badges
------------------------------ */
.tcmx-accordionSoft .accordion-item{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow:hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--tcmx-shadow2);
}
.tcmx-accordionSoft .accordion-button{
  background: transparent;
  font-weight: 850;
}
.tcmx-accordionSoft .accordion-button:not(.collapsed){ box-shadow: none; }

.tcmx-faqBadges{
  margin-top: 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.tcmx-badgeSoft{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.74);
  box-shadow: var(--tcmx-shadow2);
  font-weight: 800;
  color: rgba(0,0,0,.75);
}
.tcmx-badgeSoft i{ opacity:.85; }

/* bottom cta */
.tcmx-bottomCta{
  margin-top: 16px;
  padding: 1rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.86);
  box-shadow: var(--tcmx-shadow2);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tcmx-bottomCta__t{ font-weight: 900; }
.tcmx-bottomCta__p{ color: rgba(0,0,0,.70); }

/* -----------------------------
   Reveal + Wipe
------------------------------ */
.tcmx-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.tcmx-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}
.tcmx-wipe{
  position: relative;
  overflow: hidden;
}

.tcmx-wipe2{
  overflow: none !important;
}

.tcmx-wipe::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.14), rgba(255,255,255,.0));
  transform: translateX(-120%) skewX(-12deg);
  opacity: .9;
  pointer-events:none;
}
.tcmx-section--dark .tcmx-wipe::after{
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,.16), rgba(0,0,0,0));
}
.tcmx-reveal.is-in.tcmx-wipe::after{
  animation: tcmxWipe 900ms ease forwards;
}
@keyframes tcmxWipe{
  0%{ transform: translateX(-120%) skewX(-12deg); }
  100%{ transform: translateX(140%) skewX(-12deg); }
}

/* Parallax elements */
[data-parallax]{ will-change: transform; }

/* -----------------------------
   FAB
------------------------------ */
.tcmx-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem 1rem;
  border-radius: 999px;
  text-decoration:none;
  color:#0b1020;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  transform: translateY(0);
  transition: transform .2s ease;
}
.tcmx-fab:hover{ transform: translateY(-2px); }
.tcmx-fab i{ font-size: 1.05rem; }

/* -----------------------------
   Responsive
------------------------------ */
@media (max-width: 991.98px){
  .tcmx-hero{ height: auto; min-height: 100vh; padding-top: 4rem;}
  .tcmx-hero__container{ padding-bottom: 1rem; }
  .tcmx-stack{ height: 420px; min-height: 420px; margin-top: .5rem; }
}

/* -----------------------------
   Reduced motion
------------------------------ */
@media (prefers-reduced-motion: reduce){
  .tcmx-reveal{ opacity:1; transform:none; transition:none; }
  .tcmx-wipe::after{ display:none; }
  .tcmx-marquee__track{ animation:none; }
  .tcmx-orb--1, .tcmx-orb--2{ animation:none; }
  .tcmx-scanline::after{ animation:none; }
  .tcmx-hero__video{ display:none; }
}

/* =========================================================
   PATCH: Stepper nicht abgeschnitten + nicer backgrounds + more effects
   ========================================================= */

/* 1) Stepper Cutoff Fix
   Ursache ist oft: scroll area ohne rechts padding + shadows werden "geclippt".
*/
.tcmx-stepper{
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 28px;             /* IMPORTANT: prevents last card from being cut */
  scroll-padding-right: 28px;      /* scroll-snap respects right padding */
  -webkit-overflow-scrolling: touch;
}

/* Cards a bit smaller so they fit nicer on common widths */
.tcmx-stepCard{
  flex: 0 0 min(480px, 84%);       /* slightly narrower than before */
}

/* Optional: Edge-fade so the horizontal scroll looks premium */
.tcmx-stepper{
  position: relative;
  mask-image: linear-gradient(to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%);
}
@media (max-width: 991.98px){
  .tcmx-stepper{
    mask-image: linear-gradient(to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%);
  }
}

/* 2) Background “komisch” -> softer, calmer decor layers */
.tcmx-decor__layer,
.tcmx-decor__layer--alt,
.tcmx-decor__layer--cases,
.tcmx-decor__layer--faq{
  filter: saturate(1.0);
}

/* Reduce harsh blobs + add subtle texture */
.tcmx-decor__layer{
  opacity: .38;
  background:
    radial-gradient(600px 260px at 18% 22%, rgba(99,102,241,.10), transparent 62%),
    radial-gradient(620px 280px at 82% 48%, rgba(16,185,129,.08), transparent 62%),
    radial-gradient(540px 280px at 50% 92%, rgba(244,114,182,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.0));
}
.tcmx-decor__layer--alt{
  opacity: .32;
  background:
    radial-gradient(640px 300px at 10% 30%, rgba(16,185,129,.10), transparent 62%),
    radial-gradient(640px 300px at 90% 24%, rgba(99,102,241,.10), transparent 62%),
    radial-gradient(600px 320px at 54% 92%, rgba(244,114,182,.05), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.0));
}
.tcmx-decor__layer--cases{
  opacity: .30;
  background:
    radial-gradient(680px 280px at 20% 40%, rgba(99,102,241,.10), transparent 64%),
    radial-gradient(680px 280px at 80% 58%, rgba(16,185,129,.08), transparent 64%),
    radial-gradient(620px 300px at 52% 10%, rgba(244,114,182,.06), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.0));
}
.tcmx-decor__layer--faq{
  opacity: .30;
  background:
    radial-gradient(620px 280px at 20% 20%, rgba(244,114,182,.06), transparent 64%),
    radial-gradient(700px 320px at 84% 46%, rgba(99,102,241,.10), transparent 64%),
    radial-gradient(640px 320px at 52% 90%, rgba(16,185,129,.07), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.0));
}

/* 3) More “wow” hover effects across cards */
.tcmx-media,
.tcmx-caseCard,
.tcmx-stepCard,
.tcmx-miniCard,
.tcmx-offerCard,
.tcmx-formCard{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

/* Premium hover: lift + glow border */
.tcmx-media:hover,
.tcmx-caseCard:hover,
.tcmx-stepCard:hover,
.tcmx-miniCard:hover,
.tcmx-offerCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 110px rgba(0,0,0,.18);
  border-color: rgba(0,0,0,.16);
}

/* Step cards: subtle gradient highlight on hover */
.tcmx-stepCard{
  position: relative;
  overflow: hidden;
}
.tcmx-stepCard::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 30% 20%, rgba(99,102,241,.14), transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.tcmx-stepCard:hover::after{ opacity: 1; }

/* Case cards + media cards image zoom already exists, strengthen slightly */
.tcmx-caseCard img,
.tcmx-media img{
  transition: transform .55s ease, filter .55s ease;
}
.tcmx-caseCard:hover img,
.tcmx-media:hover img{
  transform: scale(1.12);
  filter: saturate(1.18) contrast(1.12);
}

/* 4) Button shine sweep + stronger hover */
.tcmx-btnMag{
  overflow: hidden;
}
.tcmx-btnMag::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.tcmx-btnMag:hover{
  transform: translateY(-1px);
}
.tcmx-btnMag:hover::after{
  opacity: 1;
  animation: tcmxShine 900ms ease forwards;
}
@keyframes tcmxShine{
  from{ left:-120%; }
  to{ left: 160%; }
}

/* 5) Hero cursor glow layer (JS will move this) */
.tcmx-hero{
  position: relative;
}
.tcmx-cursorGlow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .65;
  background:
    radial-gradient(240px 240px at var(--gx, 50%) var(--gy, 50%), rgba(99,102,241,.22), transparent 60%),
    radial-gradient(320px 320px at calc(var(--gx, 50%) + 6%) calc(var(--gy, 50%) + 8%), rgba(16,185,129,.18), transparent 62%);
  mix-blend-mode: screen;
  transition: opacity .2s ease;
}
.tcmx-hero:hover .tcmx-cursorGlow{ opacity: .9; }

/* 6) Proof row (if you add it) */
.tcmx-proofRow{
  margin-top: 1.05rem;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1rem;
  color: rgba(255,255,255,.74);
  font-size:.95rem;
}
.tcmx-proofRow i{ margin-right:.35rem; }

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce){
  .tcmx-stepper{ mask-image: none; }
  .tcmx-btnMag::after{ display:none; }
}

/* =========================================================
   PROCESS Stepper: Vertical + higher cards
   (fixes width cut + increases visual height)
   ========================================================= */

.tcmx-stepperV{
  display: grid;
  gap: 14px;
  position: relative;
}

/* higher, richer cards */
.tcmx-stepCardV{
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(620px 260px at 18% 10%, rgba(99,102,241,.12), transparent 62%),
    radial-gradient(620px 280px at 92% 28%, rgba(16,185,129,.08), transparent 62%),
    rgba(255,255,255,.88);
  box-shadow: var(--tcmx-shadow2);
  padding: 1.15rem 1.15rem;
  overflow: hidden;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tcmx-stepCardV::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 260px at 30% 18%, rgba(244,114,182,.10), transparent 62%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.tcmx-stepCardV:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 110px rgba(0,0,0,.18);
  border-color: rgba(0,0,0,.16);
}
.tcmx-stepCardV:hover::after{ opacity: 1; }

.tcmx-stepCardV__top{
  display:flex;
  gap: .8rem;
  align-items:flex-start;
  margin-bottom: .6rem;
}

.tcmx-stepCardV__n{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-weight: 950;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.22);
  flex: 0 0 auto;
}

.tcmx-stepCardV__t{
  font-weight: 950;
  font-size: 1.1rem;
  line-height: 1.2;
}

.tcmx-stepCardV__s{
  color: rgba(0,0,0,.62);
  margin-top: .15rem;
}

.tcmx-stepCardV__p{
  color: rgba(0,0,0,.72);
  line-height: 1.7;
  margin: 0 0 .85rem;
}

.tcmx-stepCardV__list{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(0,0,0,.70);
  line-height: 1.6;
}
.tcmx-stepCardV__list li{ margin: .25rem 0; }

/* chips row */
.tcmx-stepCardV__grid{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.tcmx-chip2{
  display:inline-flex;
  padding:.28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--tcmx-shadow2);
  font-weight: 800;
  font-size: .88rem;
}

/* 3 column mini blocks inside step 03 */
.tcmx-stepCardV__cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 991.98px){
  .tcmx-stepCardV__cols{ grid-template-columns: 1fr; }
}
.tcmx-miniBlock{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--tcmx-shadow2);
  padding: .85rem .85rem;
}
.tcmx-miniBlock__t{ font-weight: 950; margin-bottom: .2rem; }
.tcmx-miniBlock__p{ color: rgba(0,0,0,.70); line-height: 1.55; }

.lawtopper {padding-top:106px; background: radial-gradient(1200px 800px at 20% 10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(1000px 650px at 85% 20%, rgba(16,185,129,.30), transparent 55%), radial-gradient(900px 600px at 55% 90%, rgba(244,114,182,.22), transparent 60%), linear-gradient(180deg, var(--tcmx-dark) 0%, var(--tcmx-dark) 35%, var(--tcmx-dark2) 100%);}

/* =========================================================
   ChronoForms optisch anpassen – inverse / helle Version
   Greift auf:
   - .moduletable.tcmy-style
   - .moduletable.tcmy-style-form
   ========================================================= */

.moduletable.tcmy-style,
.moduletable.tcmy-style-form {
  position: relative;
}

/* Formular-Karte */
.moduletable.tcmy-style #chronoform-kontaktformular,
.moduletable.tcmy-style-form #chronoform-kontaktformular {
  padding: 1.5rem;
  border-radius: 1.35rem;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(15, 23, 42, 0.96);
}

/* 2-spaltiges Raster */
.moduletable.tcmy-style #chronoform-kontaktformular .area_container2,
.moduletable.tcmy-style-form #chronoform-kontaktformular .area_container2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
}

/* Textarea volle Breite */
.moduletable.tcmy-style #chronoform-kontaktformular .field_textarea.field.holder,
.moduletable.tcmy-style-form #chronoform-kontaktformular .field_textarea.field.holder {
  grid-column: 1 / -1;
}

/* Feldabstände */
.moduletable.tcmy-style #chronoform-kontaktformular .field.holder,
.moduletable.tcmy-style-form #chronoform-kontaktformular .field.holder {
  margin: 0;
}

/* Labels */
.moduletable.tcmy-style #chronoform-kontaktformular .field > label,
.moduletable.tcmy-style-form #chronoform-kontaktformular .field > label {
  display: inline-block;
  margin: 0 0 0.52rem 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(15, 23, 42, 0.92);
}

/* Inputs / Textarea */
.moduletable.tcmy-style #chronoform-kontaktformular input[type="text"],
.moduletable.tcmy-style #chronoform-kontaktformular input[type="email"],
.moduletable.tcmy-style #chronoform-kontaktformular input[type="url"],
.moduletable.tcmy-style #chronoform-kontaktformular input[type="tel"],
.moduletable.tcmy-style #chronoform-kontaktformular textarea,
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="text"],
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="email"],
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="url"],
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="tel"],
.moduletable.tcmy-style-form #chronoform-kontaktformular textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9rem 1rem !important;
  border-radius: 0.9rem !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  background: rgba(255,255,255,0.72) !important;
  color: rgba(15, 23, 42, 0.96) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.45;
  box-shadow: none !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.moduletable.tcmy-style #chronoform-kontaktformular textarea,
.moduletable.tcmy-style-form #chronoform-kontaktformular textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Placeholder */
.moduletable.tcmy-style #chronoform-kontaktformular input::placeholder,
.moduletable.tcmy-style #chronoform-kontaktformular textarea::placeholder,
.moduletable.tcmy-style-form #chronoform-kontaktformular input::placeholder,
.moduletable.tcmy-style-form #chronoform-kontaktformular textarea::placeholder {
  color: rgba(15, 23, 42, 0.42);
  opacity: 1;
}

/* Focus */
.moduletable.tcmy-style #chronoform-kontaktformular input[type="text"]:focus,
.moduletable.tcmy-style #chronoform-kontaktformular input[type="email"]:focus,
.moduletable.tcmy-style #chronoform-kontaktformular input[type="url"]:focus,
.moduletable.tcmy-style #chronoform-kontaktformular input[type="tel"]:focus,
.moduletable.tcmy-style #chronoform-kontaktformular textarea:focus,
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="text"]:focus,
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="email"]:focus,
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="url"]:focus,
.moduletable.tcmy-style-form #chronoform-kontaktformular input[type="tel"]:focus,
.moduletable.tcmy-style-form #chronoform-kontaktformular textarea:focus {
  border-color: rgba(15, 23, 42, 0.24) !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 0 0 0.18rem rgba(15, 23, 42, 0.05) !important;
}

/* NUI hart überschreiben */
.moduletable.tcmy-style #chronoform-kontaktformular .nui.form .field input[type="text"],
.moduletable.tcmy-style #chronoform-kontaktformular .nui.form .field textarea,
.moduletable.tcmy-style-form #chronoform-kontaktformular .nui.form .field input[type="text"],
.moduletable.tcmy-style-form #chronoform-kontaktformular .nui.form .field textarea {
  border-width: 1px !important;
  border-radius: 0.9rem !important;
  padding: 0.9rem 1rem !important;
}

/* Checkbox */
.moduletable.tcmy-style #chronoform-kontaktformular .field_checkbox.field.holder,
.moduletable.tcmy-style-form #chronoform-kontaktformular .field_checkbox.field.holder {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.moduletable.tcmy-style #chronoform-kontaktformular .nui.checkbox,
.moduletable.tcmy-style-form #chronoform-kontaktformular .nui.checkbox {
  background: transparent !important;
}

.moduletable.tcmy-style #chronoform-kontaktformular .nui.checkbox > label,
.moduletable.tcmy-style-form #chronoform-kontaktformular .nui.checkbox > label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.74);
}

.moduletable.tcmy-style #chronoform-kontaktformular .nui.checkbox > label svg,
.moduletable.tcmy-style-form #chronoform-kontaktformular .nui.checkbox > label svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  color: rgba(15, 23, 42, 0.90) !important;
}

.moduletable.tcmy-style #chronoform-kontaktformular .nui.checkbox a,
.moduletable.tcmy-style-form #chronoform-kontaktformular .nui.checkbox a {
  color: rgba(15, 23, 42, 0.95);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Button mit --accent */
.moduletable.tcmy-style #chronoform-kontaktformular #senden,
.moduletable.tcmy-style #chronoform-kontaktformular button[type="submit"],
.moduletable.tcmy-style-form #chronoform-kontaktformular #senden,
.moduletable.tcmy-style-form #chronoform-kontaktformular button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 0.95rem 1.35rem;
  margin-top: 0.1rem;
  border: 0 !important;
  border-radius: 0.95rem !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}

.moduletable.tcmy-style #chronoform-kontaktformular #senden:hover,
.moduletable.tcmy-style #chronoform-kontaktformular button[type="submit"]:hover,
.moduletable.tcmy-style-form #chronoform-kontaktformular #senden:hover,
.moduletable.tcmy-style-form #chronoform-kontaktformular button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,0.20);
}

.moduletable.tcmy-style #chronoform-kontaktformular #senden:focus,
.moduletable.tcmy-style-form #chronoform-kontaktformular #senden:focus {
  outline: 0;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.20),
    0 0 0 0.18rem rgba(15, 23, 42, 0.06);
}

/* Fehler */
.moduletable.tcmy-style #chronoform-kontaktformular .field.error input,
.moduletable.tcmy-style #chronoform-kontaktformular .field.error textarea,
.moduletable.tcmy-style-form #chronoform-kontaktformular .field.error input,
.moduletable.tcmy-style-form #chronoform-kontaktformular .field.error textarea {
  background: rgba(255, 235, 235, 0.95) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.moduletable.tcmy-style #chronoform-kontaktformular .errormsg,
.moduletable.tcmy-style-form #chronoform-kontaktformular .errormsg {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.84rem;
  color: #b91c1c;
}

/* Credits dezenter */
.moduletable.tcmy-style #chronoform-kontaktformular .chronocredits,
.moduletable.tcmy-style-form #chronoform-kontaktformular .chronocredits {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.74rem;
  color: rgba(15, 23, 42, 0.34);
  text-decoration: none;
}

/* Mobile */
@media (max-width: 767.98px) {
  .moduletable.tcmy-style #chronoform-kontaktformular,
  .moduletable.tcmy-style-form #chronoform-kontaktformular {
    padding: 1.1rem;
    border-radius: 1.1rem;
  }

  .moduletable.tcmy-style #chronoform-kontaktformular .area_container2,
  .moduletable.tcmy-style-form #chronoform-kontaktformular .area_container2 {
    grid-template-columns: 1fr;
    gap: 1rem 0;
  }

  .moduletable.tcmy-style #chronoform-kontaktformular input[type="text"],
  .moduletable.tcmy-style #chronoform-kontaktformular input[type="email"],
  .moduletable.tcmy-style #chronoform-kontaktformular input[type="url"],
  .moduletable.tcmy-style #chronoform-kontaktformular input[type="tel"],
  .moduletable.tcmy-style #chronoform-kontaktformular textarea,
  .moduletable.tcmy-style-form #chronoform-kontaktformular input[type="text"],
  .moduletable.tcmy-style-form #chronoform-kontaktformular input[type="email"],
  .moduletable.tcmy-style-form #chronoform-kontaktformular input[type="url"],
  .moduletable.tcmy-style-form #chronoform-kontaktformular input[type="tel"],
  .moduletable.tcmy-style-form #chronoform-kontaktformular textarea {
    font-size: 16px !important;
  }
}

.mfp_newsy_skin_default .mfp_bg_mode_on .mfp_overlay {
	background-color: rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	background-repeat: repeat-x;
}

.btn-outline-secondary {
	--bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--accent);
	--bs-btn-hover-border-color: #6c757d;

}

.btn-outline-primary {
    background-color: var(--accent);
	--bs-btn-color: #fff;
	--bs-btn-border-color: #6c757d;
	--bs-btn-hover-color:var(--accent);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: var(--accent);

}
/* Blog-Listing (Mod MiniFrontpagePro): Premium Cards + Hover-Effekte */
.mfp_default_item{
  height: 100%;
}

.mfp_default_item_inner{
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  box-shadow: var(--tcmx-shadow2);
  overflow: hidden;
  position: relative;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* subtiler Glow-Rand (wie bei euren tcmx-cards) */
.mfp_default_item_inner::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(99,102,241,0), rgba(99,102,241,.18), rgba(16,185,129,.16), rgba(244,114,182,.14), rgba(99,102,241,0));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

/* Hover: lift + glow */
.mfp_default_item_inner:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 110px rgba(0,0,0,.18);
  border-color: rgba(0,0,0,.16);
}
.mfp_default_item_inner:hover::before{ opacity: .75; }

/* Thumbnail-Bereich */
.mfp_thumb_pos_top{
  display:block;
  position: relative;
  overflow:hidden;
}

/* Bild Zoom + Kontrast */
.mfp_thumb_pos_top img{
  width:100%;
  height: 220px;                 /* Desktop-Höhe */
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.08) contrast(1.05);
  transition: transform .55s ease, filter .55s ease;
}
.mfp_default_item_inner:hover .mfp_thumb_pos_top img{
  transform: scale(1.10);
  filter: saturate(1.16) contrast(1.10);
}

/* Dunkler Verlauf unten ins Bild für bessere Lesbarkeit */
.mfp_thumb_pos_top::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  opacity: .9;
  pointer-events:none;
}

/* Inhaltspadding */
.mfp_default_title,
.mfp_introtext{
  padding-left: 1rem;
  padding-right: 1rem;
}

.mfp_default_title{
  margin: .95rem 0 .35rem;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.mfp_default_title a{
  color: rgba(0,0,0,.90);
  text-decoration: none;
}
.mfp_default_title a:hover{
  color: var(--accent);
  text-decoration: none;
}

/* Introtext: clamp */
.mfp_introtext{
  margin: 0 0 1rem;
  color: rgba(0,0,0,.70);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 3 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile: Bildhöhe anpassen */
@media (max-width: 575.98px){
  .mfp_thumb_pos_top img{ height: 210px; }
}
.mfp_default_skin_card .mfp_default_item .mfp_thumb_pos_top img, .mfp_default_skin_card .mfp_default_item .mfp_thumb_pos_top2 img {
	
	 margin-bottom: 0em !important; 
}

.djacc-popup .djacc__openbtn--default {
  background: var(--accent);
  
}