/*
  Quick Impact design system foundation
  Source of truth: approved visual language of the homepage.
  This file intentionally keeps selector specificity low. Existing page-specific
  styles and inline technology tokens remain active until they are migrated.
*/

:root {
  /* Color */
  --ds-bg: #0a0f0e;
  --ds-surface: #0f1714;
  --ds-surface-raised: #121c17;
  --ds-text: #f3f6f4;
  --ds-text-secondary: rgba(224, 229, 226, 0.86);
  --ds-text-muted: rgba(205, 211, 207, 0.8);
  --ds-text-subtle: rgba(205, 211, 207, 0.66);
  --ds-line: rgba(224, 229, 226, 0.17);
  --ds-line-strong: rgba(224, 229, 226, 0.28);
  --ds-green: #22c35d;
  --ds-green-soft: rgba(34, 195, 93, 0.18);
  --ds-purple: #6d51c7;
  --ds-blue: #6f7ee8;

  /* Layout */
  --ds-container-wide: 1180px;
  --ds-container: 1120px;
  --ds-content: 820px;
  --ds-text-column: 680px;
  --ds-narrow: 560px;
  --ds-page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --ds-section-space: clamp(4.75rem, 8vw, 7rem);
  --ds-section-space-compact: clamp(3.75rem, 7vw, 5.75rem);

  /* Typography */
  --ds-font-sans: "DM Sans", system-ui, sans-serif;
  --ds-font-mono: "DM Mono", monospace;
  --ds-type-page-title: clamp(2.75rem, 4.5vw, 4rem);
  --ds-type-overview-title: clamp(2.5rem, 3.4vw, 3.25rem);
  --ds-type-chapter: clamp(2rem, 2.85vw, 2.65rem);
  --ds-type-lead: clamp(1.25rem, 1.65vw, 1.5rem);
  --ds-type-content-title: clamp(1.05rem, 1.4vw, 1.25rem);
  --ds-type-ui-title: 1rem;
  --ds-type-display: var(--ds-type-page-title);
  --ds-type-section: var(--ds-type-chapter);
  --ds-type-title: var(--ds-type-content-title);
  --ds-type-body: clamp(0.96rem, 1.05vw, 1.04rem);
  --ds-type-small: clamp(0.88rem, 0.95vw, 0.96rem);
  --ds-type-label: 0.69rem;
  --ds-leading-page-title: 1.02;
  --ds-leading-chapter: 1.08;
  --ds-leading-content-title: 1.22;
  --ds-leading-ui-title: 1.25;
  --ds-leading-display: var(--ds-leading-page-title);
  --ds-leading-section: var(--ds-leading-chapter);
  --ds-leading-title: var(--ds-leading-content-title);
  --ds-leading-body: 1.65;
  --ds-tracking-label: 0.14em;

  /* Detail */
  --ds-radius-sm: 6px;
  --ds-radius: 10px;
  --ds-radius-pill: 999px;
  --ds-stroke: 1px;
  --ds-stroke-strong: 1.15px;
  --ds-glow-green: 0 0 8px rgba(34, 195, 93, 0.18);
  --ds-glow-purple: 0 0 8px rgba(109, 81, 199, 0.14);
  --ds-transition: 420ms ease-out;

  /* CTA system: primary = filled pill (same family as header), secondary = quieter outlined pill */
  --ds-cta-primary-bg: rgba(255, 255, 255, 0.94);
  --ds-cta-primary-bg-hover: #ffffff;
  --ds-cta-primary-border: rgba(255, 255, 255, 0.82);
  --ds-cta-primary-text: #07100b;
  --ds-cta-secondary-border: rgba(224, 229, 226, 0.32);
  --ds-cta-secondary-border-hover: rgba(224, 229, 226, 0.5);

  /* Documented responsive thresholds. CSS custom properties cannot be used in media queries. */
  --ds-breakpoint-desktop: 980px;
  --ds-breakpoint-tablet: 800px;
  --ds-breakpoint-mobile: 700px;
}

/* Neutral text hierarchy. Green is reserved for labels, CTAs, active states and status signals. */
:root {
  --muted: #adb5b1;
  --text-dim: rgba(224, 229, 226, 0.84);
  --qi-text: var(--ds-text);
  --qi-text-muted: var(--ds-text-muted);
  --qi-text-soft: var(--ds-text-subtle);
  --qi-copy-strong: var(--ds-text-secondary);
  --qi-copy-muted: var(--ds-text-muted);
}

.home-page {
  --home-text-primary: var(--ds-text);
  --home-text-secondary: var(--ds-text-secondary);
  --home-text-muted: var(--ds-text-muted);
}

/* Low-specificity defaults: page-level systems may override these safely. */
body {
  background-color: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
}

:where(.container) {
  width: min(var(--ds-container), calc(100% - (var(--ds-page-gutter) * 2)));
  margin-inline: auto;
}

:where(.section-tag, .structure-kicker, .xl-kicker, .hero-eyebrow, .hero-eyebrow-tag) {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-label);
  font-weight: 600;
  letter-spacing: var(--ds-tracking-label);
  line-height: 1.3;
  text-transform: uppercase;
}

:where(h1) {
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  line-height: var(--ds-leading-display);
}

:where(h2) {
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  line-height: var(--ds-leading-section);
}

:where(h3) {
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  line-height: var(--ds-leading-title);
}

:where(.btn, .btn-primary, .btn-cta, .cta-button, .final-cta-btn, .hero-text-link, .cta-text-link) {
  font-family: var(--ds-font-sans);
  transition-duration: var(--ds-transition);
}

:where(.site-header, .site-footer) {
  background-color: var(--ds-bg);
}

:where(a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible) {
  outline: 1px solid var(--ds-green);
  outline-offset: 3px;
}

/* Copy normalization for page-specific legacy rules that used green-tinted gray. */
.home-page #hero .hero-sub,
.home-page .section .sublead,
.home-page #arbeitsweise .process-orbit-header p,
.home-page #arbeitsweise .process-orbit-step p,
.home-page #situationen .wave-station p,
.home-page #ueber-uns .ueber-partner-content > p,
.home-page .contact-editorial-lead,
.contact-formv3 label,
.contact-formv3 .consent label,
.contact-formv3 .consent a,
.solution-detail-hero p,
.solution-practice-grid li,
.document-processing-page .document-practice-intro p,
.document-processing-page .document-practice-comparison li,
.document-processing-page .document-final-cta p,
.offer-configurator-page .offer-practice-intro p,
.offer-configurator-page .offer-practice-comparison li,
.offer-configurator-page .offer-final-cta p,
.approval-process-page .approval-practice-intro p,
.approval-process-page .approval-practice-comparison li,
.approval-process-page .approval-final-cta p,
.internal-systems-page .internal-practice-intro p,
.internal-systems-page .internal-practice-comparison li,
.internal-systems-page .internal-final-cta p,
.technology-flow-page p,
.technology-flow-page li,
.tech-decision-col p,
.solution-tile p,
.solution-overview-guide,
.knowledge-card p,
.knowledge-overview-hero p,
.knowledge-article p,
.knowledge-point-grid article p,
.knowledge-steps span,
.knowledge-overview-cta p {
  color: var(--ds-text-muted) !important;
}

.home-page #situationen .wave-station h3,
.home-page .sol-index-title,
.home-page .sol-index-desc,
.solution-detail-hero h1,
.document-processing-page .document-practice-intro h2,
.offer-configurator-page .offer-practice-intro h2,
.approval-process-page .approval-practice-intro h2,
.internal-systems-page .internal-practice-intro h2 {
  color: var(--ds-text) !important;
}

.contact-formv3 input,
.contact-formv3 textarea {
  color: var(--ds-text) !important;
}

.contact-formv3 label {
  color: rgba(225, 232, 228, 0.84) !important;
}

.contact-formv3 input::placeholder,
.contact-formv3 textarea::placeholder {
  color: rgba(199, 207, 202, 0.7) !important;
  opacity: 1 !important;
}

.contact-formv3 .consent label,
.contact-formv3 .consent a {
  color: rgba(211, 221, 215, 0.8) !important;
}

.contact-formv3 input[type="text"],
.contact-formv3 input[type="email"],
.contact-formv3 textarea {
  border-color: rgba(224, 229, 226, 0.14) !important;
}

.contact-formv3 input:focus,
.contact-formv3 textarea:focus {
  border-color: rgba(34, 195, 93, 0.56) !important;
}

/* Solution detail practice sections: keep title, lead and copy visually separated. */
.offer-configurator-page .offer-practice-intro h2,
.document-processing-page .document-practice-intro h2,
.approval-process-page .approval-practice-intro h2,
.internal-systems-page .internal-practice-intro h2,
.supplier-rating-page .supplier-practice-intro h2 {
  display: block !important;
  max-width: 760px !important;
  margin: 0 !important;
  color: var(--ds-text) !important;
  font-size: clamp(1.55rem, 2.05vw, 1.8rem) !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
}

.offer-configurator-page .offer-practice-intro h2::after,
.document-processing-page .document-practice-intro h2::after,
.approval-process-page .approval-practice-intro h2::after,
.internal-systems-page .internal-practice-intro h2::after {
  content: "" !important;
}

.offer-configurator-page .offer-practice-intro p:first-of-type,
.document-processing-page .document-practice-intro p:first-of-type,
.approval-process-page .approval-practice-intro p:first-of-type,
.internal-systems-page .internal-practice-intro p:first-of-type,
.supplier-rating-page .supplier-practice-intro p:first-of-type {
  display: block !important;
  max-width: 820px !important;
  margin: 0.65rem 0 0 !important;
  color: var(--ds-text-subtle) !important;
  font-size: clamp(1.1rem, 1.45vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.015em !important;
}

/* Vereinheitlicht die grauen erklärenden Absätze (Praxisbeschreibung und
   Abschlusstext) auf den vier Lösungsunterseiten mit der bereits korrekten
   Hero-Einführung (.hero-intro). Bewusst auf genau diese vier Seitenklassen
   begrenzt - schließt .supplier-rating-page und .tech-final-cta (u. a. auf
   ueber-uns.html) ausdrücklich aus. Nur Typografie wird angeglichen;
   max-width, margin und display bleiben unverändert durch die jeweils
   bestehenden Regeln (oben bzw. in css/structure-pages.css) gesteuert. */
.offer-configurator-page.offer-configurator-page .offer-practice-intro p:first-of-type,
.offer-configurator-page.offer-configurator-page .offer-final-cta p,
.document-processing-page.document-processing-page .document-practice-intro p:first-of-type,
.document-processing-page.document-processing-page .document-final-cta p,
.approval-process-page.approval-process-page .approval-practice-intro p:first-of-type,
.approval-process-page.approval-process-page .approval-final-cta p,
.internal-systems-page.internal-systems-page .internal-practice-intro p:first-of-type,
.internal-systems-page.internal-systems-page .internal-final-cta p {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-body) !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  letter-spacing: -0.005em !important;
  color: rgba(205, 211, 207, 0.68) !important;
}

.offer-configurator-page .offer-practice-intro p:nth-of-type(2),
.document-processing-page .document-practice-intro p:nth-of-type(2),
.approval-process-page .approval-practice-intro p:nth-of-type(2),
.internal-systems-page .internal-practice-intro p:nth-of-type(2),
.supplier-rating-page .supplier-practice-intro p:nth-of-type(2) {
  display: block !important;
  max-width: 760px !important;
  margin: 1rem 0 0 !important;
  color: var(--ds-text-muted) !important;
  font-size: clamp(0.96rem, 1vw, 1rem) !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

.offer-configurator-page .offer-practice-comparison span,
.document-processing-page .document-practice-comparison span,
.approval-process-page .approval-practice-comparison span,
.internal-systems-page .internal-practice-comparison > article > span,
.supplier-rating-page .supplier-practice-comparison span {
  color: var(--ds-text-subtle) !important;
}

.offer-configurator-page .offer-practice-result span,
.document-processing-page .document-practice-result span,
.approval-process-page .approval-practice-result span,
.internal-systems-page .internal-practice-result > span,
.supplier-rating-page .supplier-practice-result span {
  color: var(--ds-green) !important;
}

.offer-configurator-page .offer-practice-comparison li,
.document-processing-page .document-practice-comparison li,
.approval-process-page .approval-practice-comparison li,
.internal-systems-page .internal-practice-comparison li,
.supplier-rating-page .supplier-practice-comparison li {
  color: var(--ds-text-muted) !important;
  font-size: clamp(0.92rem, 1vw, 0.98rem) !important;
  line-height: 1.62 !important;
}

.offer-configurator-page .offer-practice-result li,
.document-processing-page .document-practice-result li,
.approval-process-page .approval-practice-result li,
.internal-systems-page .internal-practice-result li,
.supplier-rating-page .supplier-practice-result li {
  color: var(--ds-text-secondary) !important;
}

/* Link underline visibility: keep editorial links quiet, but clearly clickable. */
.btn-primary::after,
.btn-cta::after,
.final-cta-btn::after,
.cta-button::after,
.hero-text-link::after,
.cta-text-link::after,
.process-orbit-cta > a::after,
.contact-editorial .final-cta-btn::after {
  background: rgba(34, 195, 93, 0.72) !important;
  opacity: 1 !important;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-cta:hover::after,
.btn-cta:focus-visible::after,
.final-cta-btn:hover::after,
.final-cta-btn:focus-visible::after,
.cta-button:hover::after,
.cta-button:focus-visible::after,
.hero-text-link:hover::after,
.hero-text-link:focus-visible::after,
.cta-text-link:hover::after,
.cta-text-link:focus-visible::after,
.process-orbit-cta > a:hover::after,
.process-orbit-cta > a:focus-visible::after,
.contact-editorial .final-cta-btn:hover::after,
.contact-editorial .final-cta-btn:focus-visible::after {
  background: var(--ds-green) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Unified CTA text link (.cta-text-link)
   --------------------------------------------------------------------------
   Shared component for standalone text-style calls to action (not filled or
   bordered buttons). Applied additively next to each element's existing
   class(es) - it never replaces them, since those classes still carry card
   hover choreography (e.g. .sol-index-item:hover .sol-index-arrow) or
   page-specific layout that must keep working unchanged.

   Structure inside the existing link/button element:
     .cta-text-link-text   the visible wording; carries the underline and the
                            travelling glow dot, both sized relative to its
                            own rendered width so line and glow path always
                            match, for any text length.
     .cta-text-link-arrow  decorative arrow, aria-hidden, never underlined.

   Accent color defaults to the Quick Impact green and can be swapped per
   instance via --cta-accent (see /ki's local override) without touching
   typography, underline, arrow, spacing or animation.

   Uses its own qiCtaGlow keyframe below - intentionally not the existing
   qiUnderlineComet, which real buttons (.btn-cta, .final-cta-btn, ...)
   still depend on and which this task must not modify.
   ========================================================================== */

.cta-text-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 0.55rem 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #dff5e6 !important;
  font-family: var(--ds-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: color 0.35s ease, transform 0.35s ease !important;
}

.cta-text-link-text {
  position: relative;
  display: inline-block;
}

.cta-text-link-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  border-radius: 999px;
  background: var(--cta-accent, rgba(34, 195, 93, 0.42));
  transition: background-color 0.35s ease;
}

.cta-text-link-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 18px;
  /* 2px rather than a 1px hairline: at 1px, whether the line lands on a
     crisp device-pixel row or a sub-pixel boundary depends on each card's
     exact layout position (title/description line count above it shifts
     the CTA's fractional Y by different amounts per card), so the glow
     could anti-alias down to near-invisible on some cards while staying
     crisp on others despite 100% identical CSS. 2px plus a forced
     compositor layer make the glow render reliably regardless of that
     per-card sub-pixel offset. */
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(214, 255, 230, 1), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity, left;
  animation: qiCtaGlow 4.8s ease-in-out infinite;
}

.cta-text-link-arrow {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
}

.cta-text-link:hover,
.cta-text-link:focus-visible {
  color: #fff !important;
  transform: translateY(-2px);
}

.cta-text-link:hover .cta-text-link-text::after,
.cta-text-link:focus-visible .cta-text-link-text::after {
  background: var(--cta-accent, var(--ds-green));
}

.cta-text-link:hover .cta-text-link-text::before,
.cta-text-link:focus-visible .cta-text-link-text::before {
  animation-duration: 2.2s;
}

.cta-text-link:focus-visible {
  outline: 2px solid var(--cta-accent, rgba(34, 195, 93, 0.65)) !important;
  outline-offset: 4px !important;
  border-radius: 2px !important;
}

/* The homepage's #loesungsbereiche/#arbeitsweise contexts also carry an
   ID-scoped base-state !important color rule (styles.css ~12876/~9426,
   #dff5e6) whose specificity outranks the plain-class hover/focus rules
   above even while actually hovered/focused, since specificity comparison
   ignores pseudo-class state. Reinforce hover/focus color there explicitly
   at matching-or-higher specificity, for both direct and card-delegated
   interaction. */
.home-page #loesungsbereiche .sol-index-cta.cta-text-link:hover,
.home-page #loesungsbereiche .sol-index-cta.cta-text-link:focus-visible,
.home-page #arbeitsweise .process-orbit-cta > a.cta-text-link:hover,
.home-page #arbeitsweise .process-orbit-cta > a.cta-text-link:focus-visible,
.home-page #loesungsbereiche .sol-index-item:hover .sol-index-cta.cta-text-link,
.home-page #loesungsbereiche .sol-index-item:focus-visible .sol-index-cta.cta-text-link {
  color: #fff !important;
}

/* Card-level hover/focus delegation: the CTA sits inside a fully clickable
   card and must react when the card - not the CTA text itself - is hovered
   or focused, without touching the card's own existing hover animations. */
.sol-index-item:hover .cta-text-link,
.sol-index-item:focus-visible .cta-text-link,
.service-card:hover .cta-text-link,
.service-card:focus-visible .cta-text-link,
.tech-decision-col:hover .cta-text-link,
.tech-decision-col:focus-visible .cta-text-link {
  color: #fff !important;
}

.sol-index-item:hover .cta-text-link .cta-text-link-text::after,
.sol-index-item:focus-visible .cta-text-link .cta-text-link-text::after,
.service-card:hover .cta-text-link .cta-text-link-text::after,
.service-card:focus-visible .cta-text-link .cta-text-link-text::after,
.tech-decision-col:hover .cta-text-link .cta-text-link-text::after,
.tech-decision-col:focus-visible .cta-text-link .cta-text-link-text::after {
  background: var(--cta-accent, var(--ds-green));
}

.sol-index-item:hover .cta-text-link .cta-text-link-text::before,
.sol-index-item:focus-visible .cta-text-link .cta-text-link-text::before,
.service-card:hover .cta-text-link .cta-text-link-text::before,
.service-card:focus-visible .cta-text-link .cta-text-link-text::before,
.tech-decision-col:hover .cta-text-link .cta-text-link-text::before,
.tech-decision-col:focus-visible .cta-text-link .cta-text-link-text::before {
  animation-duration: 2.2s;
}

@keyframes qiCtaGlow {
  0%, 55%, 100% { left: 0; opacity: 0; }
  62% { opacity: 1; }
  77% { opacity: 0.82; }
  87% { left: calc(100% - 18px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-text-link-text::before {
    display: none !important;
    animation: none !important;
  }
}

/* .cta-text-link is also woven into several older, still-active shared CTA
   bundles (styles.css ~8435, ~9131) that predate this component and were
   never used with a real element until now. Restate the properties those
   bundles fight over at high-enough specificity to win regardless of source
   order, without editing those bundles (they still serve real buttons). */
.home-page #loesungsbereiche .sol-index-cta.cta-text-link,
.home-page #arbeitsweise .process-orbit-cta > a.cta-text-link {
  font-family: var(--ds-font-mono) !important;
}

/* Suppress each legacy CTA's own underline/glow pseudo-elements wherever
   .cta-text-link is layered on top, so only the unified treatment above is
   visible. Each selector below is an existing rule's selector with
   ".cta-text-link" appended, which is always more specific than the
   original - it wins regardless of source order and leaves the original
   rule fully active for any element that does not carry .cta-text-link. The
   bare .cta-text-link.cta-text-link fallback catches the shared bundles at
   styles.css ~8464 and ~9142 that apply the class with no extra ancestor
   scoping at all. */
.cta-text-link.cta-text-link::after,
.cta-text-link.cta-text-link::before,
.home-page #loesungsbereiche .sol-index-cta.cta-text-link::after,
.home-page #loesungsbereiche .sol-index-cta.cta-text-link::before,
.home-page #arbeitsweise .process-orbit-cta > a.cta-text-link::after,
.home-page #arbeitsweise .process-orbit-cta > a.cta-text-link::before,
.hero .hero-text-link.cta-text-link::after,
.hero .hero-text-link.cta-text-link::before,
.process-check-hero .process-check-cta-link.cta-text-link::after,
.process-check-hero .process-check-cta-link.cta-text-link::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

@media (max-width: 640px) {
  .offer-configurator-page .offer-practice-intro h2,
  .document-processing-page .document-practice-intro h2,
  .approval-process-page .approval-practice-intro h2,
  .internal-systems-page .internal-practice-intro h2,
  .supplier-rating-page .supplier-practice-intro h2 {
    font-size: clamp(1.5rem, 6.4vw, 1.75rem) !important;
    line-height: 1.16 !important;
  }

  .offer-configurator-page .offer-practice-intro p:first-of-type,
  .document-processing-page .document-practice-intro p:first-of-type,
  .approval-process-page .approval-practice-intro p:first-of-type,
  .internal-systems-page .internal-practice-intro p:first-of-type,
  .supplier-rating-page .supplier-practice-intro p:first-of-type {
    margin-top: 0.6rem !important;
    font-size: clamp(1.08rem, 5vw, 1.22rem) !important;
    line-height: 1.36 !important;
  }

  .offer-configurator-page .offer-practice-intro p:nth-of-type(2),
  .document-processing-page .document-practice-intro p:nth-of-type(2),
  .approval-process-page .approval-practice-intro p:nth-of-type(2),
  .internal-systems-page .internal-practice-intro p:nth-of-type(2),
  .supplier-rating-page .supplier-practice-intro p:nth-of-type(2) {
    margin-top: 1rem !important;
    font-size: clamp(0.94rem, 4vw, 1rem) !important;
    line-height: 1.58 !important;
  }
}

/* Cookie consent: compact editorial panel matching the current dark UI. */
.qi-consent.qi-consent {
  position: fixed;
  inset: auto 20px 20px;
  z-index: 9999;
  display: none;
  width: min(960px, calc(100vw - 40px));
  max-width: none;
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.25rem);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background:
    linear-gradient(135deg, rgba(34, 195, 93, 0.035), transparent 42%),
    rgba(7, 11, 9, 0.96);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-body);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.qi-consent.qi-consent.show {
  display: block;
  animation: qiConsentEnter 360ms ease-out both;
}

.qi-consent .qi-consent__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: 100%;
  max-width: none;
  margin: 0;
}

.qi-consent .qi-consent__content {
  min-width: 0;
  max-width: 680px;
}

.qi-consent .qi-consent__eyebrow {
  margin-bottom: 0.5rem;
  color: var(--ds-green);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
}

.qi-consent .qi-consent__txt {
  color: var(--ds-text-secondary);
  opacity: 1;
}

.qi-consent .qi-consent__txt strong {
  color: var(--ds-text);
  font-weight: 500;
}

.qi-consent .qi-link {
  color: var(--ds-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 195, 93, 0.5);
  transition: color var(--ds-transition), border-color var(--ds-transition);
}

.qi-consent .qi-link:hover,
.qi-consent .qi-link:focus-visible {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
}

.qi-consent .qi-consent__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
}

.qi-consent .qi-consent__details {
  display: grid;
  gap: .65rem;
  min-width: min(100%, 20rem);
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .75rem;
  background: rgba(0,0,0,.16);
}

.qi-consent .qi-consent__details[hidden] { display: none; }
.qi-consent .qi-consent__details label { display: flex; align-items: center; gap: .55rem; font-size: .86rem; }
.qi-consent .qi-consent__details input { width: 1rem; height: 1rem; accent-color: #22c35d; }
.footer-consent-settings { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.footer-consent-settings:hover, .footer-consent-settings:focus-visible { text-decoration: underline; }

.qi-consent .qi-btn {
  display: inline-flex;
  min-width: 126px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-secondary);
  font-family: var(--ds-font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition:
    color var(--ds-transition),
    border-color var(--ds-transition),
    background-color var(--ds-transition),
    transform var(--ds-transition);
}

.qi-consent .qi-btn--decline:hover,
.qi-consent .qi-btn--decline:focus-visible {
  color: var(--ds-text);
  border-color: rgba(224, 229, 226, 0.38);
  background: rgba(255, 255, 255, 0.025);
}

.qi-consent .qi-btn--accept {
  border-color: rgba(34, 195, 93, 0.58);
  background: rgba(34, 195, 93, 0.07);
  color: #e9fff0;
}

.qi-consent .qi-btn--accept:hover,
.qi-consent .qi-btn--accept:focus-visible {
  border-color: var(--ds-green);
  background: rgba(34, 195, 93, 0.12);
  color: #fff;
  transform: translateY(-1px);
}

.qi-consent .qi-btn:focus-visible,
.qi-consent .qi-link:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 3px;
}

@keyframes qiConsentEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .qi-consent.qi-consent {
    inset: auto 12px 12px;
    width: calc(100vw - 24px);
    max-width: none;
    padding: 1rem;
    border-radius: var(--ds-radius);
  }

  .qi-consent .qi-consent__wrap {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
  }

  .qi-consent .qi-consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .qi-consent .qi-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .qi-consent .qi-consent__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qi-consent.qi-consent.show {
    animation: none;
  }
}

/*
  Semantic typography roles
  -------------------------
  Heading tags keep their document meaning; these selectors assign the visual
  role of each component. Component-specific layout remains in its owning file.
*/
:where(.type-page-title),
body h1,
.loesungen-overview .solutions-flow-hero h1,
.praxis-kb-page .knowledge-overview-hero h1,
.technology-flow-hero h1,
.pricing-page .pricing-flow-hero h1,
.process-check-page .process-check-hero h1,
.solution-detail-page .solution-detail-hero .hero-heading h1,
.solution-detail-page .solution-detail-hero .hero-heading .hero-intro,
.technology-flow-hero > .container > p:not(.process-check-hero-note),
.pricing-flow-hero > .container > p,
.knowledge-article-page .knowledge-article-heading > p {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-page-title) !important;
  font-weight: 400 !important;
  line-height: var(--ds-leading-page-title) !important;
  letter-spacing: -0.035em !important;
}

/* Long statements on overview pages use a quieter page-title scale. */
body :is(h1, p).type-overview-title.type-overview-title.type-overview-title {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-overview-title) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
}

body .type-lead.type-lead {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-lead) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

:where(.type-chapter-title),
body section h2,
.section > .container > h2,
#ueber-uns > .container > h2,
.home-page .section > .container > .section-tag + h2,
.home-page .section > .container > header h2,
.home-page .contact-editorial-intro h2,
.xl-heading,
body #excel-anwendung .xl-heading,
body #webanwendung .xl-heading,
body #ki-anwendung .xl-heading,
body #moeglichkeiten .xl-heading,
body #technologien .xl-heading,
body #kontakt .xl-heading,
.structure-page .structure-band > .container > h2,
.solution-detail-section > .container > h2,
.solution-detail-section .section-heading h2,
.knowledge-category-heading h2,
.knowledge-overview-cta h2,
.knowledge-article-page .knowledge-example h2,
.knowledge-article-page .knowledge-cta h2,
.solution-detail-page .document-final-cta h2,
.solution-detail-page .offer-final-cta h2,
.solution-detail-page .approval-final-cta h2,
.solution-detail-page .internal-final-cta h2,
.solution-detail-page .supplier-final-cta h2,
.tech-final-cta h2,
.solution-detail-page .document-practice-intro h2,
.solution-detail-page .offer-practice-intro h2,
.solution-detail-page .approval-practice-intro h2,
.solution-detail-page .internal-practice-intro h2,
.solution-detail-page .supplier-practice-intro h2 {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-chapter) !important;
  font-weight: 400 !important;
  line-height: var(--ds-leading-chapter) !important;
  letter-spacing: -0.025em !important;
}

/* All homepage chapters share the "Typische Situationen" heading treatment. */
.home-page .section > .container > .section-tag + h2,
.home-page .section > .container > header h2,
.home-page .contact-editorial-intro h2 {
  width: 100%;
  max-width: 920px !important;
  color: var(--ds-text) !important;
}

.home-page .section > .container > .section-tag,
.home-page .section > .container > header > .section-tag,
.home-page .contact-editorial-intro > .structure-kicker {
  margin-bottom: 1.35rem !important;
}

:where(.type-content-title),
.home-page .section h3,
.structure-card :is(h2, h3),
.loesungen-overview .solution-tile h2,
.home-page .sol-index-title,
.knowledge-card h3,
.knowledge-diagnostic-question h3,
.knowledge-situation-list h2,
.knowledge-fit h2,
.technology-flow-hero + .tech-decision .tech-decision-col h2,
.knowledge-article-content h3,
.calc-problem-card h3,
.calc-feature-grid h3,
.calc-outcome-grid h3,
.calc-choice-card h3,
.calc-compare-lists h3,
.doc-loss-grid h3,
.doc-use-grid h3,
.doc-process-card h3,
.home-page #arbeitsweise .process-orbit-step h3,
#ueber-uns .ueber-partner h3 {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-content-title) !important;
  font-weight: 600 !important;
  line-height: var(--ds-leading-content-title) !important;
  letter-spacing: -0.02em !important;
}

.home-page .sol-index-title,
.loesungen-overview .sol-index-title {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.supplier-rating-page .supplier-rating-copy h1 > span {
  white-space: normal;
}

:where(.type-ui-title),
.offer-configurator-page .offer-demo-header h2,
.approval-process-page .safety-demo-header h2,
.supplier-rating-page .supplier-overview > header h2,
.internal-systems-page .qualification-modal h3,
.internal-systems-page .employee-profile-copy h3,
.internal-systems-page .demo-view-heading h4,
.approval-process-page .safety-panel-heading h3,
.document-processing-page .doc-platform-top strong {
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-type-ui-title) !important;
  font-weight: 600 !important;
  line-height: var(--ds-leading-ui-title) !important;
  letter-spacing: -0.01em !important;
}

:where(.type-label, .section-tag, .structure-kicker, .xl-kicker, .hero-eyebrow, .hero-eyebrow-tag) {
  font-family: var(--ds-font-mono) !important;
  font-size: var(--ds-type-label) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: var(--ds-tracking-label) !important;
}

:where(.type-body) {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-type-body);
  font-weight: 400;
  line-height: var(--ds-leading-body);
  letter-spacing: 0;
}

@media (max-width: 700px) {
  :root {
    --ds-type-page-title: clamp(2.35rem, 10vw, 2.85rem);
    --ds-type-chapter: clamp(1.85rem, 8vw, 2.4rem);
    --ds-type-content-title: clamp(1.05rem, 4.8vw, 1.2rem);
    --ds-type-body: clamp(0.95rem, 4vw, 1rem);
    --ds-type-small: clamp(0.86rem, 3.65vw, 0.92rem);
    --ds-type-label: 0.68rem;
  }
}

#hero .hero-trust {
  margin-top: 0.75rem;
  max-width: 520px;
  color: var(--ds-text-subtle);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-type-small);
  font-weight: 400;
  line-height: 1.5;
}

/* ============================================================
   CTA system: hero primary/secondary and the contact submit
   button join the header's existing pill family instead of the
   editorial underline-link style used elsewhere on the site.
   ============================================================ */
#hero .btn-cta,
.contact-editorial .final-cta-btn,
.home-page main#top #hero .btn-cta,
.home-page main#top .contact-editorial .final-cta-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  width: auto !important;
  max-width: none !important;
  min-height: 44px;
  padding: 0.75rem 1.4rem !important;
  border: 1px solid var(--ds-cta-primary-border) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-cta-primary-bg) !important;
  box-shadow: none !important;
  color: var(--ds-cta-primary-text) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--ds-transition);
}

#hero .btn-cta::before,
#hero .btn-cta::after,
.contact-editorial .final-cta-btn::before,
.contact-editorial .final-cta-btn::after,
.home-page main#top #hero .btn-cta::before,
.home-page main#top #hero .btn-cta::after,
.home-page main#top .contact-editorial .final-cta-btn::before,
.home-page main#top .contact-editorial .final-cta-btn::after {
  display: none !important;
  content: none !important;
}

#hero .btn-cta:hover,
#hero .btn-cta:focus-visible,
.contact-editorial .final-cta-btn:hover,
.contact-editorial .final-cta-btn:focus-visible,
.home-page main#top #hero .btn-cta:hover,
.home-page main#top #hero .btn-cta:focus-visible,
.home-page main#top .contact-editorial .final-cta-btn:hover,
.home-page main#top .contact-editorial .final-cta-btn:focus-visible {
  background: var(--ds-cta-primary-bg-hover) !important;
  color: var(--ds-cta-primary-text) !important;
  transform: translateY(-1px);
  outline: none;
}

/* Contact submit button only: a very subtle green accent so it reads as part of
   the Quick Impact system, while staying light and restrained (no filled/glowing green). */
.contact-editorial .final-cta-btn,
.home-page main#top .contact-editorial .final-cta-btn {
  border-color: rgba(34, 195, 93, 0.32) !important;
}

.contact-editorial .final-cta-btn:hover,
.contact-editorial .final-cta-btn:focus-visible,
.home-page main#top .contact-editorial .final-cta-btn:hover,
.home-page main#top .contact-editorial .final-cta-btn:focus-visible {
  border-color: rgba(34, 195, 93, 0.55) !important;
}

.contact-editorial .final-cta-btn:focus-visible,
.home-page main#top .contact-editorial .final-cta-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 195, 93, 0.18) !important;
}

.btn-secondary,
.home-page main#top .btn-secondary,
.home-page main#top #hero .btn-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  width: auto !important;
  max-width: none !important;
  min-height: 44px !important;
  padding: 0.75rem 1.4rem !important;
  border: 1px solid var(--ds-cta-secondary-border) !important;
  border-radius: var(--ds-radius-pill) !important;
  background: transparent !important;
  color: var(--ds-text-muted) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: var(--ds-transition);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.home-page main#top .btn-secondary:hover,
.home-page main#top .btn-secondary:focus-visible {
  border-color: var(--ds-cta-secondary-border-hover) !important;
  color: var(--ds-text) !important;
  background: transparent !important;
  transform: none !important;
}

/* Secondary copy contrast: a few high-specificity legacy rules still won
   over the normalization block above and stayed on the dim gray value. */
#loesungsbereiche .sublead,
#praxisbeispiele .sublead,
#praxisbeispiele .case-story-intro .sublead,
.process-check-hero > .container > p:not(.process-check-hero-note) {
  color: var(--ds-text-secondary) !important;
}

/* Green stays reserved for the positive/result side of a before-after pair;
   the "before" label goes neutral to match the solution detail pages. */
.case-story-chapter--before .case-story-label {
  color: var(--ds-text-subtle) !important;
}

/* Mobile stability pass: prevent narrow-view clipping without changing desktop rhythm. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  :where(.container, .hero-content, .hero-copy) {
    max-width: 100%;
    min-width: 0;
  }

  :where(.hero-eyebrow, .hero-eyebrow-tag, .hero-tags, h1, .hero-sub, .hero-honest, .hero-trust) {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  :where(.hero-eyebrow, .hero-eyebrow-tag, .hero-tags) {
    white-space: normal;
  }

  #kontakt,
  .contact-editorial {
    scroll-margin-top: 88px;
  }
}

@media (max-width: 980px) {
  .home-page #hero .hero-copy {
    width: 100% !important;
    max-width: min(100%, calc(100vw - 40px)) !important;
    min-width: 0 !important;
  }

  .home-page #hero .hero-copy h1 {
    font-size: clamp(2.2rem, 10.5vw, 2.85rem) !important;
    line-height: 1.03 !important;
    max-width: 100% !important;
  }

  .home-page #hero .hero-sub,
  .home-page #hero .hero-trust {
    max-width: min(100%, calc(100vw - 40px)) !important;
    overflow-wrap: break-word;
  }
}

/* Cookie banner: keep the existing desktop bar, but make the mobile state fit the viewport. */
@media (max-width: 640px) {
  .home-page #hero .hero-copy {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
    min-width: 0 !important;
  }

  .home-page #hero .hero-copy h1 {
    font-size: clamp(2.35rem, 10.7vw, 2.85rem) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
  }

  .home-page #hero .hero-sub,
  .home-page #hero .hero-trust {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  .qi-consent {
    inset: auto 10px 10px 10px;
    width: auto;
    max-width: calc(100vw - 20px);
    padding: 12px;
    border-radius: 14px;
  }

  .qi-consent__wrap {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .qi-consent__actions {
    display: grid;
    grid-template-columns: 1fr;
    flex-wrap: initial;
    align-items: stretch;
  }

  .qi-consent__actions .qi-btn,
  .qi-consent__actions button {
    width: 100%;
    min-width: 0;
  }
}