/* =========================================================================
   Qudits Redesign — Scroll-Effekte & Startseiten-Sektionen
   Lädt NACH styles.css und erweitert/überschreibt gezielt.
   ========================================================================= */

/* ---- Sticky-Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  background: rgba(18, 22, 31, 0.82);
  backdrop-filter: blur(12px);
  padding-top: 16px; padding-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
body.light .site-header.is-scrolled { background: rgba(255,255,255,0.9); }

/* ---- Hero-Bleed: Hero-Foto reicht bis ganz nach oben, Header schwebt transparent darüber ---- */
.hero-bleed {
  margin-top: calc(-1 * var(--header-h, 96px));
  padding-top: var(--header-h, 96px);
}
.hero-bleed .eyebrow,
.hero-bleed h1,
.hero-bleed .lead {
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
}

/* ---- Scroll-Reveals (richer) ----------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-56px); }
.reveal--right { transform: translateX(56px); }
.reveal--scale { transform: scale(.93); }
.reveal--none  { transform: none; }
.reveal.is-in  { opacity: 1; transform: none; }
/* Artikel- & Insights-Seiten: Inhalte sofort zeigen, ohne Einblend-Verzögerung */
body.page-static .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  [data-parallax] { transform: none !important; }
}

/* Mobile: horizontale Reveal-Bewegung vermeidet sonst seitlichen Overflow,
   da nicht eingeblendete Elemente 56px nach links/rechts ragen. */
@media (max-width: 640px) {
  .reveal--left, .reveal--right { transform: translateY(30px); }
}

/* ---- Generische Sektion ---------------------------------------------- */
.section { position: relative; z-index: 2; padding: clamp(70px, 10vw, 130px) clamp(24px, 6vw, 96px); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }
.section--tint { background: rgba(255,255,255,0.02); }
.section-head { max-width: 760px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1;
  color: #fff; margin: 12px 0 0;
}
.section-head p { font-weight: 300; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--text-dim); margin: 18px 0 0; }

/* ---- Statement-Sektion ----------------------------------------------- */
.statement { text-align: center; }
.statement h2 { font-weight: 600; font-size: clamp(30px, 5vw, 56px); line-height: 1.08; color: #fff; margin: 14px auto 0; max-width: 18ch; }
.statement p { font-weight: 300; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: var(--text-dim); max-width: 60ch; margin: 24px auto 0; }
.statement .btn-row { margin-top: 36px; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row.center { justify-content: center; }
.btn--ghost { background: transparent; color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
.btn--ghost:hover { border-color: var(--orange); color: #fff; transform: translateY(-2px); }

/* ---- Werte (Values) --------------------------------------------------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 28px; transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.value:hover { transform: translateY(-5px); border-color: rgba(218,91,41,0.5); background: rgba(255,255,255,0.07); }
.value__icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(218,91,41,0.14); color: var(--orange);
}
.value h3 { font-weight: 500; font-size: 19px; color: #fff; margin: 0 0 8px; }
.value p { font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--text-faint); margin: 0; }

/* ---- Kennzahlen (Stats) ---------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat__num { font-weight: 600; font-size: clamp(34px, 4.5vw, 52px); color: #fff; line-height: 1; }
.stat__num .unit { color: var(--orange); }
.stat__label { font-weight: 300; font-size: 15px; color: var(--text-dim); margin-top: 10px; }

/* ---- About-Split (Matterhorn + Zitat) -------------------------------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16/11; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); }
.split__quote { font-weight: 300; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; color: #fff; }
.split__quote .accent { color: var(--orange); }
.split__by { margin-top: 22px; font-size: 15px; color: var(--text-dim); }
.split__by strong { color: #fff; font-weight: 500; }

/* ---- Testimonials ----------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.quote p { font-weight: 300; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0; }
.quote__mark { color: var(--orange); font-size: 34px; line-height: .6; font-weight: 700; }
.quote__by { font-size: 14px; color: var(--text-dim); margin-top: auto; }
.quote__by strong { display: block; color: #fff; font-weight: 500; }

/* ---- Full-Bleed Bild-Sektion ----------------------------------------- */
.bleed { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; }
.bleed__bg { position: absolute; inset: -10% 0; z-index: 0; }
.bleed__bg img { width: 100%; height: 120%; object-fit: cover; display: block; }
.bleed__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(18,22,31,.92) 0%, rgba(18,22,31,.55) 45%, rgba(18,22,31,0) 100%); }
.bleed__inner { position: relative; z-index: 2; padding: 60px clamp(24px,6vw,96px); max-width: 720px; }

/* ---- CTA-Band --------------------------------------------------------- */
.cta-band { text-align: center; background: rgba(255,255,255,0.03); }
.cta-band h2 { font-weight: 600; font-size: clamp(28px, 4vw, 44px); color: #fff; margin: 0 0 14px; }
.cta-band p { font-weight: 300; font-size: 19px; color: var(--text-dim); margin: 0 0 30px; }

/* ---- Service-Liste auf der Startseite (5 Karten: 3 oben, 2 mittig darunter) */
.cards--five { display: flex; flex-wrap: wrap; justify-content: center; }
.cards--five .card { flex: 0 1 calc(33.333% - 20px); }
/* ---- Leistungs-Übersicht (6 Karten inkl. AI Starter Kit) -------------- */
.cards--six { grid-template-columns: repeat(3, 1fr); }
.card__link { margin-top: 14px; font-weight: 500; font-size: 15px; color: var(--orange); }
.card { cursor: pointer; }
.card:hover .card__link .arrow { display: inline-block; transform: translateX(4px); transition: transform .2s; }

/* ---- Foto-Kacheln (5 Disziplinen auf der Startseite) ------------------ */
.card--photo {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.card--photo__head { height: 160px; padding: 24px 24px 20px; box-sizing: border-box; overflow: hidden; }
.card--photo__head .card__num { margin: 0 0 12px; }
.card--photo__head .card__title { margin: 0 0 8px; font-size: 19px; overflow-wrap: break-word; hyphens: auto; }
.card--photo__img {
  flex: 1; min-height: 150px;
  background-size: cover; background-position: center;
  transition: transform .35s ease;
}
.card--photo:hover .card--photo__img { transform: scale(1.04); }
.card--photo:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.35); }
@media (max-width: 620px) { .card--photo__img { min-height: 120px; } }

/* ---- Footer (mehrspaltig) -------------------------------------------- */
.foot { background: #11151b; position: relative; z-index: 2; padding: 64px clamp(24px,6vw,96px) 40px; }
.foot__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot__col h4 { font-weight: 500; font-size: 15px; color: #fff; margin: 0 0 16px; }
.foot__col a, .foot__col p { display: block; font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.55); margin: 0 0 10px; }
.foot__col a:hover { color: #fff; }
.foot__brand img { height: 34px; margin-bottom: 16px; }
.foot__brand p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.6; }
.foot__bottom { max-width: var(--maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: rgba(255,255,255,0.4); font-size: 13px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 980px) {
  .values, .quotes { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cards--five .card { flex: 0 1 calc(50% - 15px); }
  .cards--six { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
/* ---- Kunden & Partner (Logo-Wall) ------------------------------------ */
.clients { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.client-chip {
  background: transparent; padding: 10px 18px;
  min-width: 150px; height: 70px; display: grid; place-items: center; flex: 0 1 auto;
  transition: transform .3s ease;
}
.client-chip:hover { transform: translateY(-3px); }
/* transparente Logos → dezent grau auf Navy, heller beim Hover (keine weißen Kacheln) */
.client-chip img { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: .55; transition: opacity .3s ease; }
.client-chip:hover img { opacity: .95; }

@media (max-width: 620px) {
  .values, .quotes, .stats, .cards--six { grid-template-columns: 1fr; }
  .cards--five .card { flex: 0 1 100%; }
  .foot__grid { grid-template-columns: 1fr; }
  .client-chip { min-width: 132px; height: 80px; padding: 16px 20px; }
  .client-chip img { max-height: 36px; max-width: 110px; }
}

/* ---- Header: zentriertes Menü + DE/EN-Umschalter -------------------- */
.header-right { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; letter-spacing: .3px; }
.lang a { color: var(--text-dimmer); transition: color .2s ease; }
.lang a.is-active, .lang a:hover { color: #fff; }
.lang span { color: rgba(255,255,255,.28); }
body.light .lang a { color: rgba(26,41,71,.5); }
body.light .lang a.is-active, body.light .lang a:hover { color: var(--bg-navy); }
body.light .lang span { color: rgba(26,41,71,.3); }

/* Menü mittig (Desktop) – per absoluter Zentrierung, unabhängig von der DOM-Reihenfolge */
@media (min-width: 861px) {
  .site-header .nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

/* Wellenlinien entfernt */
.waves { display: none !important; }

/* ---- Megamenü „Leistungen" ------------------------------------------- */
.nav__mega-trigger { background: none; border: none; font-family: var(--font); font-weight: 500; font-size: 17px;
  letter-spacing: .3px; color: var(--text-dimmer); cursor: pointer; padding: 0; transition: color .25s ease; }
.nav__mega-trigger:hover, .nav__mega-trigger.is-open { color: #fff; }
.megamenu { position: absolute; top: 100%; left: 0; width: 100%; z-index: 60;
  background: rgba(16,20,28,0.98); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border); box-shadow: 0 28px 50px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
.megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__inner { max-width: var(--maxw); margin: 0 auto; padding: 40px clamp(24px,6vw,96px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.mega-col__head { display: block; font-weight: 600; font-size: 15px; color: #fff; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); transition: color .2s ease; white-space: nowrap; }
/* Leistungen-Menue: Spalten auf Textbreite (kein 1/5-Umbruch mehr) */
#megamenu .megamenu__inner { display: flex; justify-content: space-between; gap: 40px; }
.mega-col__head:hover { color: var(--orange); }
.mega-col a:not(.mega-col__head) { display: block; font-weight: 300; font-size: 14px; color: var(--text-dim);
  margin: 0 0 9px; transition: color .2s ease; }
.mega-col a:not(.mega-col__head):hover { color: var(--orange); }
.megamenu__inner--4 { grid-template-columns: repeat(4, 1fr); }
.megamenu__inner--3 { grid-template-columns: repeat(3, 1fr); }
.mega-col__desc { display: none; }
@media (max-width: 860px) { .megamenu { display: none; } }

/* ---- Große Case-Kacheln (Accenture-Stil) ----------------------------- */
.case-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case-tile { position: relative; min-height: 360px; border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: flex-end; background-size: cover; background-position: center;
  transition: transform .35s ease, box-shadow .35s ease; }
.case-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.tile--a { background-image: linear-gradient(140deg, #16335c 0%, #47759e 100%); }
.tile--b { background-image: linear-gradient(140deg, #11151b 0%, #33475e 100%); }
.tile--c { background-image: linear-gradient(140deg, #3a2014 0%, #da5b29 120%); }
.case-tile__overlay { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,13,18,.88), rgba(10,13,18,.2) 58%, rgba(10,13,18,.05)); }
.case-tile__body { position: relative; z-index: 1; padding: 30px; }
.case-tile__tag { display: inline-block; font-size: 12px; letter-spacing: 1.5px; font-weight: 600; color: #fff;
  background: rgba(218,91,41,.92); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.case-tile__body h3 { font-weight: 500; font-size: clamp(20px, 2.2vw, 24px); color: #fff; margin: 0 0 12px; line-height: 1.2; }
.case-tile__link { color: rgba(255,255,255,.9); font-weight: 500; font-size: 15px; }
.case-tile:hover .case-tile__link { color: #fff; }
.case-tile:hover .case-tile__link .arrow { display: inline-block; transform: translateX(4px); transition: transform .2s; }
@media (max-width: 980px) { .case-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .case-tiles { grid-template-columns: 1fr; } .case-tile { min-height: 280px; } }
.case-tiles--5 { grid-template-columns: repeat(6, 1fr); }
.case-tiles--5 .case-tile { grid-column: span 2; }
.case-tiles--5 .case-tile:nth-child(4),
.case-tiles--5 .case-tile:nth-child(5) { grid-column: span 3; }
@media (max-width: 980px) { .case-tiles--5 { grid-template-columns: 1fr 1fr; } .case-tiles--5 .case-tile, .case-tiles--5 .case-tile:nth-child(4), .case-tiles--5 .case-tile:nth-child(5) { grid-column: span 1; } }
@media (max-width: 620px) { .case-tiles--5 { grid-template-columns: 1fr; } }

/* ---- Team -------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.member { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; text-align: center; transition: transform .3s ease, border-color .3s ease; }
a.member { text-decoration: none; color: inherit; display: block; }
.member:hover { transform: translateY(-5px); border-color: rgba(218,91,41,.5); }
.member__photo, .member__initials {
  width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 18px; display: block;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.member__photo { object-fit: cover; background: #222a37; }
.member__initials { display: grid; place-items: center; font-weight: 600; font-size: 34px; color: #fff;
  background: linear-gradient(135deg, rgba(71,117,158,.6), rgba(218,91,41,.5)); }
.member__name { font-weight: 500; font-size: 18px; color: #fff; margin: 0 0 4px; }
.member__role { font-weight: 300; font-size: 14px; color: var(--orange); }
.team--extended { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 0 auto; }
.team--extended .member { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; }
.team--extended .member__photo, .team--extended .member__initials { width: 58px; height: 58px; margin: 0; font-size: 18px; }

/* ---- Insights / Cases-Hub --------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; }
.filter { padding: 9px 20px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-family: var(--font); font-weight: 500; font-size: 14px; cursor: pointer; transition: all .2s ease; }
.filter:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.filter.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease; }
.post:hover { transform: translateY(-6px); border-color: rgba(218,91,41,.5); }
.post__media { height: 160px; position: relative; background-color: #1a2533;
  background-image: linear-gradient(135deg, rgba(71,117,158,.4), rgba(218,91,41,.28));
  background-size: cover; background-position: center; }
.post__tag { position: absolute; top: 14px; left: 14px; font-size: 12px; letter-spacing: 1px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.4); padding: 5px 11px; border-radius: 999px; }
.post__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__body h3 { font-weight: 500; font-size: 19px; color: #fff; margin: 0; }
.post__body p { font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--text-faint); margin: 0; }
.post__link { margin-top: auto; color: var(--orange); font-weight: 500; font-size: 15px; }
.post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__date { font-size: 12px; letter-spacing: .4px; color: var(--text-dim); text-transform: uppercase; }
.is-hidden { display: none !important; }

/* ---- Artikel ---------------------------------------------------------- */
.article { max-width: 760px; margin: 0 auto; }
.article h1 { font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; color: #fff; margin: 14px 0 0; }
.article__meta { color: var(--text-dim); font-size: 14px; margin-top: 16px; }
.article__hero { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin-top: 28px; border: 1px solid var(--border); }
/* Infografik-Titelbilder vollständig zeigen (kein Beschnitt) */
.article__hero--contain { aspect-ratio: auto; height: auto; object-fit: contain; }
.post__media--contain { background-image: none; }
.post__media--contain .post__img { object-fit: contain; }
.article__body { margin-top: 36px; }
.article__body p { font-weight: 300; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0 0 22px; }
.article__body h2 { font-weight: 600; font-size: 26px; color: #fff; margin: 38px 0 12px; }
.article__body ul { margin: 0 0 22px; padding-left: 22px; color: rgba(255,255,255,.82); font-weight: 300; font-size: 18px; line-height: 1.7; }
.article__fig { margin: 32px 0; }
.article__fig img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--border); }
.article__fig figcaption { margin-top: 10px; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.author-bios { display: grid; gap: 18px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
.author-bio { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.author-bio__name { font-weight: 600; font-size: 17px; color: #fff; margin: 0; }
.author-bio__role { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--orange); margin: 2px 0 10px; }
.author-bio p:last-child { font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--text-faint); margin: 0; }
.author-bio__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; display: block; margin: 0 0 14px; }
@media (min-width: 720px) { .author-bios { grid-template-columns: 1fr 1fr; } }

@media (max-width: 980px) { .team { grid-template-columns: repeat(2, 1fr); } .posts { grid-template-columns: repeat(2, 1fr); } .team--extended { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .team, .posts, .team--extended { grid-template-columns: 1fr; } }

/* ---- Hero-Frequenz-Hintergrund (animiertes „Frequenzbild") ----------- */
.hero-lead { position: relative; overflow: hidden; }
.hero-lead .section__inner { position: relative; z-index: 2; }
.vanta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 180vh; z-index: 0; pointer-events: none;
  background: #1a1f2b; /* sofort dunkles Navy, kein helles Blau-Warten */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); /* weicher Übergang unten statt harter Cut */ }
.freq { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 0 3%; pointer-events: none; opacity: .16; }
.freq .bar { width: 4px; border-radius: 3px; background: linear-gradient(180deg, #6fa0c8, #da5b29);
  transform: scaleY(.4); transform-origin: center; animation: freqBar 2.4s ease-in-out infinite; }
@keyframes freqBar { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .freq .bar { animation: none; transform: scaleY(.6); } }

/* ---- Cookie-Banner ------------------------------------------------------- */
#cookie-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(16, 21, 32, 0.97);
  border-top: 1px solid rgba(218,91,41,.35);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding: .85rem 1.5rem;
  font-size: .82rem; color: rgba(255,255,255,.7);
  transform: translateY(100%); transition: transform .35s ease;
}
#cookie-bar.cookie-bar--in { transform: translateY(0); }
#cookie-bar p { margin: 0; line-height: 1.5; }
#cookie-bar a { color: var(--orange); text-decoration: none; }
#cookie-bar a:hover { text-decoration: underline; }
#cookie-ok {
  flex-shrink: 0;
  background: var(--orange); color: #fff; border: none;
  padding: .45rem 1.1rem; border-radius: 6px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: opacity .2s;
}
#cookie-ok:hover { opacity: .85; }

/* ---- "Nach oben"-Pfeil unten rechts ----------------------------------- */
.to-home {
  position: fixed; z-index: 60;
  right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(26,31,43,.06);
  box-shadow: 0 10px 28px rgba(218,91,41,.30), 0 2px 8px rgba(13,18,24,.18);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, box-shadow .2s ease;
}
.to-home.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-home:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(218,91,41,.45), 0 4px 12px rgba(13,18,24,.22); }
.to-home__logo { width: 56%; height: 56%; object-fit: contain; display: block; }
@media (max-width: 640px) {
  .to-home { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-home { transition: opacity .2s ease, visibility .2s ease; }
}

/* Insights: zweite Filterzeile (nach Leistung) als sekundäre Ebene */
.filters { margin-bottom: 14px; }
.filters--service { margin-bottom: 40px; }
.filters--service .filter { font-size: 13px; padding: 7px 16px; }

/* Statement zweispaltig: Text links, QUDITS-Vorgehensrad rechts */
.statement--split { text-align: left; }
.statement--split .statement__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.statement--split h2 { margin: 14px 0 0; max-width: 20ch; }
.statement--split .statement__text p:not(.eyebrow) { margin: 22px 0 0; max-width: 54ch; }
.statement__figure img { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 860px) {
  .statement--split .statement__grid { grid-template-columns: 1fr; gap: 36px; }
  .statement--split, .statement--split h2, .statement--split .statement__text p:not(.eyebrow) { text-align: center; }
  .statement--split h2, .statement--split .statement__text p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .statement__figure { order: 2; }
}

/* ============================================================
   Mobile-Feinschliff (10.07.2026): Lesbarkeit, Dichte, Hero
   ============================================================ */

/* Hero-Startseite: Subline unter der H1 (mehr Substanz, weniger Leere) */
.hero-lead .hero-sub {
  font-weight: 300; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.55;
  color: var(--text-dim); max-width: 46ch; margin: 0 auto 32px;
}

@media (max-width: 640px) {
  /* Weniger Leerraum zwischen und in den Sektionen */
  .section { padding: 46px clamp(20px, 6vw, 26px); }
  .subpage { padding: 40px clamp(20px, 6vw, 26px) 72px; }
  .section-head { margin-bottom: 28px; }

  /* Hero verdichten (bewusst ohne Effekt) */
  .hero-lead.section { padding-top: 38px; padding-bottom: 44px; }
  .hero-lead .hero-sub { margin-bottom: 24px; }

  /* Kacheln flacher, weniger Innenraum */
  .case-tile { min-height: 196px; }
  .case-tile__body { padding: 22px; }

  /* Lesbarkeit: Fliesstext nicht zu klein */
  .lead { font-size: 17px; }
  .card__text { font-size: 15.5px; }
}

/* ============================================================
   Mobiler Matterhorn-Intro (10.07.2026)
   #vanta-bg wird mobil zum Foto-Hintergrund (Desktop = Vanta).
   Ablauf: Matterhorn kurz klar sichtbar -> dunkelt in den
   Hintergrund ab, waehrend Titel/Subline/Buttons gestaffelt
   einblenden. Scroll-Ausblendung kommt gratis aus main.js
   (fadeBg auf #vanta-bg).
   ============================================================ */
@media (max-width: 900px) {
  #vanta-bg {
    background: #1a1f2b url('/assets/img/matterhorn.jpg') center top / cover no-repeat;
  }
  #vanta-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(26,31,43,0.28) 0%,
      rgba(26,31,43,0.54) 45%,
      rgba(26,31,43,0.94) 100%);
    opacity: .12;                       /* Start: Matterhorn klar */
    animation: heroMattVeil 2.6s ease .4s forwards;   /* dann in den Hintergrund abdunkeln */
  }
  /* Inhalt erscheint gestaffelt NACH dem Matterhorn-Moment */
  .hero-lead h1.reveal        { transition-delay: .55s; }
  .hero-lead .hero-sub.reveal { transition-delay: .72s; }
  .hero-lead .btn-row.reveal  { transition-delay: .90s; }
  /* Lesbarkeit auf dem Foto absichern */
  .hero-lead h1, .hero-lead .hero-sub { text-shadow: 0 2px 16px rgba(8,11,16,.72); }
}
@keyframes heroMattVeil { to { opacity: 1; } }

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #vanta-bg::after { animation: none; opacity: .82; }
  .hero-lead h1.reveal, .hero-lead .hero-sub.reveal, .hero-lead .btn-row.reveal { transition-delay: 0s; }
}