/* ═══════════════════════════════════════════════════════
 * REFINE.CSS — Welle 1: Struktur & Hierarchie
 * Layer über blocksandcolors.css — nicht editieren, nur overriden.
 * Erstellt: 2026-04-10 via /design-refine Welle 1
 * Source: .impeccable.md Design-Prinzipien
 * ═══════════════════════════════════════════════════════ */

/* ─── PARALUCENT — Brand Font (aus Logo) ─── */
@font-face {
  font-family: 'Paralucent';
  src: url('/fonts/Paralucent/Paralucent-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paralucent';
  src: url('/fonts/Paralucent/Paralucent-DemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paralucent';
  src: url('/fonts/Paralucent/Paralucent-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paralucent';
  src: url('/fonts/Paralucent/Paralucent-Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ─── DESIGN TOKENS (Single Source of Truth) ─── */
:root {
  /* Color Palette — grell, gesättigt (Webflow-Legacy bleibt, ist Vibe) */
  --bc-yellow:    #f9c806;  /* grelles Gelb */
  --bc-blue:      #2568F8;  /* primäres Blau */
  --dark-blue:    #2568F8;  /* override blocksandcolors.css */
  --bc-green:     #1ae6b3;  /* aquamarine */
  --bc-red:       #ff005c;  /* neon pink */
  --bc-purple:    #a73cdd;  /* sattes Lila */
  --bc-orange:    #ff5e27;  /* orange-rot */
  --bc-turquoise: #00c7fe;  /* bright cyan */
  --bc-bg:        #e5e9f6;  /* soft blue-gray */
  --bc-bg-dark:   #1a1a2e;
  --bc-text:      #1a1a2e;
  --bc-muted:     #6a6a6a;

  /* Fluid Section Padding — Welle 4 (2026-04-10): tightened
     for desktop after Tobias review.  Old desktop max was 56px
     per side → 112px stacked between sections, felt loose.
     New: ~32-40px max → ~64-80px stacked. */
  --refine-section-pad-sm: clamp(1.25rem, 2vw, 1.5rem);
  --refine-section-pad-md: clamp(1.75rem, 2.6vw, 2.25rem);
  --refine-section-pad-lg: clamp(2rem, 3vw, 2.75rem);

  /* Horizontal Container Gutter */
  --refine-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Grid System */
  --refine-grid-gap:    clamp(1rem, 2vw, 2rem);
  --refine-grid-gap-lg: clamp(1.5rem, 3vw, 3rem);

  /* Vertical Rhythm inside sections */
  --refine-rhythm-sm: 0.75rem;
  --refine-rhythm-md: 1.5rem;
  --refine-rhythm-lg: 3rem;

  /* Border Radii — konsistent über alle Cards */
  --refine-radius-sm: 0.5rem;
  --refine-radius-md: 1rem;
  --refine-radius-lg: 1.5rem;
  --refine-radius-xl: 2rem;
  --refine-radius-pill: 999px;

  /* Shadows — 3-stufig */
  --refine-shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.06);
  --refine-shadow-md: 0 8px 24px rgba(26, 26, 46, 0.08);
  --refine-shadow-lg: 0 16px 48px rgba(26, 26, 46, 0.12);
}

/* ─── FLUID OVERRIDES für bestehende Webflow-Klassen ─── */

.padding-section-small  { padding-block: var(--refine-section-pad-sm) !important; }
.padding-section-medium { padding-block: var(--refine-section-pad-md) !important; }
.padding-section-large  { padding-block: var(--refine-section-pad-lg) !important; }
.padding-global         { padding-inline: var(--refine-gutter) !important; }

/* ─── SECTION-SPECIFIC SPACING FIXES (override inline styles) ─── */

/* Hero — füllt gesamten Viewport, Content vertikal zentriert.
 * pointer-events: none bleibt (Webflow-Default) — Mouse-Events fallen durch zum
 * #splineCanvas (spline-viewer Web Component, same-origin). Der Custom-Cursor
 * greift jetzt nativ weil beide im gleichen Document sind. */

/* Custom Cursor explizit auf Hero-Spline-Canvas setzen */
#splineCanvas,
#splineWrapper {
  cursor: url('https://raw.githubusercontent.com/coob113/fancy-cursors/master/bold1.png') 64 64, auto !important;
}

/* "Built with Spline" Watermark unten rechts verdecken —
 * Cover-Overlay in Hero-Background-Farbe. */
#splineWrapper {
  position: relative;
}
#splineWrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 220px;
  height: 60px;
  background: #e5e9f6;
  pointer-events: none;
  z-index: 10;
}
#hero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 2rem) !important;
}

/* Spline-Layer: cursor wird jetzt via body-CSS geerbt (Canvas ist same-origin
 * dank Runtime SDK, kein iframe mehr). Keine spezielle cursor-Regel nötig. */

#hero .hero-flex {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: unset !important;
  padding-block-end: 22vh !important; /* drückt Content deutlich über die Mitte */
}

#hero .hero-flex-top {
  flex: 0 0 auto;
}

#hero .hero-flex-spacer,
#hero .hero-flex-bottom {
  flex: 0 0 auto;
}

/* Logo-Leiste (our-values) — kein Overlap mehr, scrollt normal nach dem Hero */
#our-values {
  margin-top: 0 !important;
  padding-block: var(--refine-section-pad-md) var(--refine-section-pad-sm) !important;
}

/* bc-values (3 Values-Cards) — normales Bottom-Padding */
#bc-values {
  padding-block-end: var(--refine-section-pad-md) !important;
}

/* Kern-Services */
#kern-services {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Prozess */
#process {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Use Cases */
#use-cases {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Projekte */
#our-projects {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Logo Run Banner — die anonyme Section zwischen Projekten und Clients */
section[style*="background:var(--blue-gray);padding:4rem 0"] {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Clients / Zahlen */
#clients {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Team */
#team {
  padding-block: var(--refine-section-pad-md) !important;
}

/* Contact / CTA */
#contact {
  padding-block: var(--refine-section-pad-md) !important;
}

/* FAQ */
#faq {
  padding-block: var(--refine-section-pad-md) !important;
}

/* ─── GRID NORMALIZATION ─── */

/* bc-values: Grid-Gap auf Token-System */
#bc-values-grid {
  gap: var(--refine-grid-gap-lg) !important;
}

/* Container-Large Gutter Consistency */
.container-large {
  padding-inline: 0; /* Parent .padding-global kümmert sich */
}

/* ─── VERTICAL RHYTHM in Text-Blöcken ─── */

/* Margin-Bottom Hierarchie für Headlines innerhalb Sections */
.heading-style-h1,
.heading-style-h2,
.heading-style-h3 {
  margin-block-end: var(--refine-rhythm-md);
}

/* ─── CARD RADIUS & SHADOW CONSISTENCY ─── */

.bc-card {
  border-radius: var(--refine-radius-lg) !important;
  box-shadow: var(--refine-shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.2s ease, outline 0.12s ease !important;
}

.bc-card:hover {
  box-shadow: var(--refine-shadow-md);
}

/* ─── RESPONSIVE FINE-TUNING ─── */

@media (max-width: 767px) {
  :root {
    --refine-gutter: 1.25rem;
  }

  /* Hero: enger auf Mobile */
  #hero {
    padding-block: var(--refine-section-pad-md) var(--refine-section-pad-sm) !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * WELLE 1.3 — /typeset
 * Paralucent (Display) + Satoshi (Body) — beide lokal, DSGVO-konform.
 * Line Awesome bleibt (Icon-Font, nicht text).
 * ═══════════════════════════════════════════════════════ */

:root {
  /* Font Stacks — Paralucent (Brand/Display) + Satoshi (Body) — beide lokal */
  --refine-font-display: 'Paralucent', system-ui, -apple-system, sans-serif;
  --refine-font-body:    'Satoshi', system-ui, -apple-system, sans-serif;

  /* Fluid Type Scale — kompakter, keine Maxed-Out Display Sizes */
  --refine-text-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);      /* eyebrows, labels */
  --refine-text-sm:   clamp(0.82rem, 0.8rem + 0.12vw, 0.92rem);    /* small body */
  --refine-text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);   /* body */
  --refine-text-lg:   clamp(1.05rem, 1rem + 0.25vw, 1.2rem);       /* lead paragraph */
  --refine-text-xl:   clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);      /* h4 */
  --refine-text-2xl:  clamp(1.4rem, 1.25rem + 0.75vw, 1.8rem);     /* h3 */
  --refine-text-3xl:  clamp(1.65rem, 1.4rem + 1.2vw, 2.3rem);      /* h2 */
  --refine-text-4xl:  clamp(2rem, 1.7rem + 1.5vw, 2.8rem);         /* h1 */
  --refine-text-5xl:  clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);       /* hero */

  /* Line-Height Scale */
  --refine-leading-tight:  1.1;
  --refine-leading-snug:   1.25;
  --refine-leading-normal: 1.5;
  --refine-leading-relaxed: 1.65;

  /* Letter-Spacing */
  --refine-tracking-tight:  -0.02em;
  --refine-tracking-normal: 0;
  --refine-tracking-wide:   0.06em;
}

/* ─── GLOBAL TYPE RESET ─── */

body {
  font-family: var(--refine-font-body) !important;
  font-size: var(--refine-text-base);
  line-height: var(--refine-leading-normal);
  color: var(--bc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── HEADING HIERARCHY (all via Space Grotesk) ─── */

h1, .heading-style-h1 {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-4xl) !important;
  line-height: var(--refine-leading-tight) !important;
  letter-spacing: var(--refine-tracking-tight);
  font-weight: 600 !important;
}

h2, .heading-style-h2 {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-3xl) !important;
  line-height: var(--refine-leading-snug) !important;
  letter-spacing: var(--refine-tracking-tight);
  font-weight: 600 !important;
}

h3, .heading-style-h3 {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-2xl) !important;
  line-height: var(--refine-leading-snug) !important;
  font-weight: 600 !important;
}

h4, .heading-style-h4 {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-xl) !important;
  line-height: var(--refine-leading-snug) !important;
  font-weight: 600 !important;
}

h5, .heading-style-h5 {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-lg) !important;
  line-height: var(--refine-leading-normal) !important;
  font-weight: 600 !important;
}

h6 {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-base) !important;
  font-weight: 600 !important;
}

/* ─── BODY TEXT (Inter) ─── */

p,
.text-size-regular,
.text-size-medium,
.text-size-large,
.text-rich-text p {
  font-family: var(--refine-font-body) !important;
  line-height: var(--refine-leading-normal);
}

.text-size-small,
.text-size-tiny {
  font-family: var(--refine-font-body) !important;
  font-size: var(--refine-text-sm) !important;
}

/* ─── EYEBROW / SUBHEADING (small caps above headlines) ─── */

.subheading-top,
.eyebrow,
.text-style-allcaps {
  font-family: var(--refine-font-body) !important;
  font-size: var(--refine-text-xs) !important;
  font-weight: 600;
  letter-spacing: var(--refine-tracking-wide);
  text-transform: uppercase;
}

/* ─── BUTTONS ─── */

.button,
.button.is-small,
.button.is-large,
.test-cta-btn,
button,
[type="button"],
[type="submit"] {
  font-family: var(--refine-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--refine-tracking-normal);
}

/* ─── NAV & MENU ─── */

.navbar4_menu,
.navbar4_link,
nav a {
  font-family: var(--refine-font-display) !important;
  font-weight: 500;
}

/* ─── FORM ELEMENTS ─── */

input,
textarea,
select,
label {
  font-family: var(--refine-font-body) !important;
}

/* ─── SATOSHI / ROCK SALT / SASSY MOLASSY KILL-OVERRIDES ─── */
/* Force-replace all inline Satoshi uses */
[style*="Satoshi"],
[style*="'Satoshi'"] {
  font-family: var(--refine-font-body) !important;
}

/* bc-values cards: spezifisch (haben Satoshi inline-styled) */
.bc-card-title {
  font-family: var(--refine-font-display) !important;
  font-size: var(--refine-text-xl) !important;
  font-weight: 700;
  line-height: var(--refine-leading-snug);
  color: var(--bc-text);
}

.bc-card-text {
  font-family: var(--refine-font-body) !important;
  font-size: var(--refine-text-sm) !important;
  line-height: var(--refine-leading-normal);
  color: var(--bc-muted);
}

/* Kern-Services browser-mockup labels (alle Satoshi inline) */
.wf-node-label,
.bw-app-name,
.bw-topbar-title,
.bw-metric-value {
  font-family: var(--refine-font-display) !important;
}

/* Logo Run Banner Headline (Satoshi inline) */
section [style*="Satoshi"] {
  font-family: var(--refine-font-display) !important;
}

/* ─── LINE AWESOME: icon font, bleibt ─── */
/* .la, .las, .fa bleiben unberührt — Icon-Rendering hängt daran */

/* ─── HERO-SPECIFIC TYPE ─── */

#hero h1,
#hero .heading-style-h1 {
  font-size: clamp(2.4rem, 1.6rem + 2.5vw, 3.75rem) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  margin-block-end: 0.75rem !important;
}

#hero h2,
#hero .heading-style-h2,
#hero .hero_sub-head,
#hero p,
#hero .text-size-medium,
#hero .text-size-large {
  font-family: var(--refine-font-body) !important;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#hero .subheading-top {
  margin-bottom: 0.5rem !important;
  font-size: clamp(0.7rem, 0.68rem + 0.12vw, 0.8rem) !important;
}

/* ═══════════════════════════════════════════════════════
 * WELLE 1.4 — /normalize
 * Legacy Webflow-Variablen → Impeccable Tokens mappen.
 * Non-destruktiv: kein HTML-Edit, nur CSS-Override.
 * ═══════════════════════════════════════════════════════ */

/* ─── LEGACY COLOR BRIDGE ─── */
/* ENTFERNT nach Tobias-Feedback: Die Webflow-Legacy-Farben sind der gewünschte Vibe
 * (grell, gesättigt, nicht blass). --bc-* Tokens sind bereits oben auf die Webflow-
 * Werte gesetzt, daher kein Mapping nötig — die Legacy-Vars bleiben ihre Original-
 * Werte aus blocksandcolors.css:41. */

/* ─── BUTTON SYSTEM ─── */
/* Ein Button-System für alle Varianten:
 * - Primary = filled blue, weiße Schrift, BORDER in fill-color (für gleiche Höhe)
 * - Secondary = outline schwarz, schwarze Schrift
 * - Beide haben identisches padding, radius, border-width (3px), height
 * - Beide haben identischen Hover-Lift (translateY -3px) + invert on hover (Secondary only)
 */

/* Base — gilt für alle Button-Varianten.
 * Padding wird NICHT geforced — inline paddings sind per Section konsistent.
 * Was gleich sein muss: border-width (für Höhen-Parität), box-sizing, radius. */
.button,
.button.is-small,
.button.is-large,
.button.w-button,
.button-v8---brix {
  box-sizing: border-box !important;
  border-radius: 5px !important;
  border-width: 3px !important;
  border-style: solid !important;
  font-family: var(--refine-font-display) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

/* Primary: filled blue, border same color for height parity */
.button-v8---brix {
  background-color: #2568F8 !important;
  color: #fff !important;
  border: 3px solid #2568F8 !important;
}

.button-v8---brix:hover {
  transform: translateY(-3px) !important;
  background-color: #2568F8 !important;
  border: 3px solid #2568F8 !important;
  color: #fff !important;
}

/* Secondary: transparent, black outline, black text */
.button,
.button.is-small,
.button.is-large,
.button.w-button {
  background-color: transparent !important;
  color: var(--bc-text) !important;
  border-color: var(--bc-text) !important;
}

.button:hover,
.button.is-small:hover,
.button.is-large:hover,
.button.w-button:hover {
  transform: translateY(-3px) !important;
  background-color: var(--bc-text) !important;
  color: #fff !important;
  border-color: var(--bc-text) !important;
}

/* Secondary inverted: for use on dark backgrounds — white outline, white text */
.button.is-on-dark,
.button.is-on-dark.is-small,
.button.is-on-dark.is-large,
.button.is-on-dark.w-button {
  background-color: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}

.button.is-on-dark:hover,
.button.is-on-dark.is-small:hover,
.button.is-on-dark.is-large:hover,
.button.is-on-dark.w-button:hover {
  transform: translateY(-3px) !important;
  background-color: #fff !important;
  color: var(--bc-text) !important;
  border-color: #fff !important;
}

/* Dark button arrow — black by default, white on hover */
.arrow-dark-btn { filter: brightness(0); transition: filter 0.2s; }
a:hover .arrow-dark-btn { filter: brightness(0) invert(1); }

/* ─── UNIFIED CARD TREATMENT ─── */
/* Subtle drop shadow on all major card types — consistent, modern */
.about-us_wrapper,
.cta_banner-wrapper,
.logos_grid-single,
.our-values_single-box {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Icon in Primary Button (arrow) */
.button-icon-right---brix {
  width: 1rem !important;
  height: auto !important;
  margin-left: 0.25rem !important;
}

/* Cards — alle auf refine-radius-lg */
.bc-card,
.our-services_list-single,
.project-card,
.testimonial-card,
.faq-item {
  border-radius: var(--refine-radius-lg) !important;
}

/* ─── SHADOW NORMALIZATION ─── */

/* Ersetze harte Shadow-Werte durch Token-Shadows wo möglich */
[style*="box-shadow"] {
  /* Kein globaler Override hier — zu risky.
   * Einzelne Section-Overrides oben in der Datei sind sicherer. */
}

/* Explicit card shadows (known classes) */
.our-services_list-single { box-shadow: var(--refine-shadow-sm); }
.our-services_list-single:hover { box-shadow: var(--refine-shadow-md); }

/* ─── HERO GRADIENT NORMALISIERUNG ─── */
/* Der Hero hatte linear-gradient(135deg, #0d80f2, #a73cdd). Via Legacy-Bridge ändert
 * sich das automatisch zu bc-blue → bc-purple. Hier nur Fallback-Override falls
 * Inline-Hex statt CSS-Var genutzt wurde. */
#hero [style*="#0d80f2"],
#hero [style*="#a73cdd"] {
  background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-purple) 100%) !important;
}

/* ─── BG-DARK / BG-LIGHT CLASS NORMALISIERUNG ─── */

.background-color-dark-blue { background-color: var(--bc-blue) !important; }
.background-color-blue { background-color: var(--bc-blue) !important; }
.background-color-light-blue { background-color: var(--bc-bg) !important; }
.background-color-yellow { background-color: var(--bc-yellow) !important; }
.background-color-green { background-color: var(--bc-green) !important; }
.background-color-red { background-color: var(--bc-red) !important; }
.background-color-purple { background-color: var(--bc-purple) !important; }
.background-color-orange { background-color: var(--bc-orange) !important; }
.background-color-turquoise { background-color: var(--bc-turquoise) !important; }

.text-color-blue { color: var(--bc-blue) !important; }
.text-color-yellow { color: var(--bc-yellow) !important; }
.text-color-purple { color: var(--bc-purple) !important; }
.text-color-red { color: var(--bc-red) !important; }
.text-color-green { color: var(--bc-green) !important; }
.text-color-orange { color: var(--bc-orange) !important; }
.text-color-turquoise { color: var(--bc-turquoise) !important; }

/* ─── BORDER COLOR NORMALISIERUNG ─── */

[style*="border:2px solid #1a1a2e"],
[style*="border: 2px solid #1a1a2e"] {
  border-color: var(--bc-text) !important;
}

[style*="border-left:4px solid"] {
  border-left-color: var(--bc-blue) !important;
}

/* ─── FOCUS STATES (a11y) ─── */

:focus-visible {
  outline: 2px solid var(--bc-blue);
  outline-offset: 2px;
  border-radius: var(--refine-radius-sm);
}

/* ─── BODY BACKGROUND ─── */

body {
  background-color: var(--bc-bg);
}

/* ─── SELECTION ─── */

::selection {
  background-color: var(--bc-yellow);
  color: var(--bc-text);
}

/* ═══════════════════════════════════════════════════════
 * ENDE Welle 1.4 (/normalize)
 * WELLE 1 COMPLETE — ready for Tobias Review
 * ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * WELLE 2 — MOBILE + TABLET P0 FIXES  (/adapt)
 * Erstellt: 2026-04-10
 *
 * Addresses:
 *   P0.1 — Sticky navbar overlapped section headlines
 *   P0.2 — #clients logos grid rendered empty on mobile
 *   P0.3 — Huge void spaces on mobile full-page scroll
 *   P1   — General mobile + tablet responsive polish
 *
 * Strategy: cover both tablet (≤991) and mobile (≤767, ≤479)
 * Breakpoints match Webflow legacy to stay consistent with
 * blocksandcolors.css media queries.
 * ═══════════════════════════════════════════════════════ */

/* ─── Global overflow lock — stop horizontal scroll from
       absolute-positioned puzzle pieces on small screens.

       IMPORTANT: Use `overflow-x: clip` on html ONLY.
       Setting overflow-x: hidden on BOTH html and body creates
       two nested scroll containers → two scrollbars stacked at
       <=991px.  `clip` truncates without spawning a scroll
       container. `max-width: 100vw` is also removed because
       100vw includes the vertical scrollbar width and can make
       the element wider than its own viewport → overflow loop. */
@media (max-width: 991px) {
  html { overflow-x: clip; }
  .main-wrapper, .split-wrapper { overflow-x: clip; }
}

/* ─── NAVBAR — opaque bg + backdrop-blur after hero,
       hide "Projekt anfragen" CTA on mobile, stable height ─ */
@media (max-width: 991px) {
  /* Paint a solid, slightly translucent background on the
     fixed navbar so it no longer x-rays onto the content. */
  .navbar4_component {
    background-color: rgba(229, 233, 246, 0.92) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    min-height: 3.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 1px 0 rgba(26, 26, 46, 0.06);
    z-index: 9999 !important;
    position: fixed !important;
  }
  /* Kill the container's overflow:hidden which clipped logos */
  .navbar4_container {
    overflow: visible;
    height: auto;
    min-height: 3.75rem;
    align-items: center;
  }
  /* Force hide the hero CTA in navbar — JS sets inline opacity:1
     after hero leaves, but we still don't want a second CTA fighting
     the hamburger on small screens. */
  .navbar4_wrapper .button.is-hero,
  .navbar4_wrapper a.button.is-hero {
    display: none !important;
  }
  .navbar4_wrapper {
    column-gap: 0.75rem;
  }
  .navbar4_logo {
    width: 9rem;
    max-width: 50vw;
  }
}

/* Reserve a tiny top offset on the first scrolling section so
   the sticky header never kisses the H2 below it on mobile. */
@media (max-width: 767px) {
  .section_our-values { margin-top: 0 !important; }
  .section_our-values,
  .section_our-projects,
  #clients,
  #team,
  #contact,
  #faq,
  #bc-values,
  #kern-services,
  #use-cases,
  #process { scroll-margin-top: 4.5rem; }
}

/* ─── HERO — reduce 100svh constraint + tighten top pad
       so intro fits without giant bottom void on small phones.
       Also: the Spline scene is gated to desktop in the JS
       (window.innerWidth > 991).  On tablet/mobile we hide the
       broken absolute-positioned .hero_embedd wrapper (it spans
       the whole page because .main-wrapper has no positioning
       context) and paint the Spline *thumbnail* directly on the
       hero section as a background image instead. ─ */
@media (max-width: 991px) {
  .hero-flex {
    height: auto !important;
    min-height: auto;
  }
  .hero-flex-top {
    padding-top: 6rem !important;
  }
  .hero-flex-bottom {
    padding-bottom: 2.5rem !important;
  }
  #hero .hero-marquee {
    margin-bottom: 1rem !important;
  }
  #hero .hero_text-headline {
    font-size: clamp(2.1rem, 7vw, 2.8rem) !important;
    padding: 0 0.5rem;
  }
  #hero .hero_sub-head {
    font-size: 1rem !important;
    padding: 0 0.5rem;
  }

  /* Kill the full-page absolute embedd wrapper on small screens
     — the Spline scene doesn't load here, and the wrapper's
     background image was bleeding at 0.6 opacity across the
     whole document. */
  .hero_embedd {
    display: none !important;
  }

  /* Paint the Spline thumbnail directly on the hero section.
     The image is the same scene export that desktop loads via
     spline-viewer — we're just showing the static version.
     The existing inline radial-gradient div inside #hero already
     handles the legibility wash — no pseudo-element needed. */
  #hero.section_hero {
    background-image: url("/images/test2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--bc-bg, #e5e9f6);
  }
}
@media (max-width: 767px) {
  /* Phones: portrait thumbnails feel cramped, so nudge the image
     so the busy center of the scene sits behind the headline. */
  #hero.section_hero {
    background-size: 140% auto;
    background-position: center 35%;
  }
}
@media (max-width: 479px) {
  .hero-flex-top {
    padding-top: 5.25rem !important;
  }
  #hero .hero_text-headline {
    font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
    line-height: 1.12 !important;
  }
}

/* ─── OUR-VALUES — the big blue block that sits under hero.
       Remove the aggressive negative margin-top on mobile so
       it doesn't collide with the hero CTA or leave a void. ─ */
@media (max-width: 991px) {
  #our-values.section_our-values {
    margin-top: 0 !important;
  }

  /* Text should span full width — the desktop 70% max-width
     leaves a huge empty band on the right for the lego brick
     that we're about to reposition. */
  #our-values .about-us_content-wrapper {
    max-width: 100% !important;
  }

  /* Lego brick image: on desktop it's pinned top-right with
     inline styles `width:54rem; top:4.5rem; right:-9.5rem`.
     On tablet/mobile we kill the top pin and anchor it to the
     bottom-right so it becomes a decorative accent under the
     content instead of stealing the right half of the card. */
  #our-values .about-us_main-image {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: -4rem !important;
    bottom: -2rem !important;
    width: 22rem !important;
    max-width: 60vw !important;
    height: auto !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  #our-values .about-us_wrapper {
    overflow: hidden !important;
    padding-bottom: 8rem !important;
  }
  #our-values #about-us-padding.padding-large {
    padding: 2rem 1.5rem 0 !important;
  }
}
@media (max-width: 767px) {
  /* Mobile: hide the decorative team avatars row — on a phone
     they only clip awkwardly at the bottom of the card.
     Keep only the lego bricks accent in the bottom-right. */
  #our-values .team-thumbs-row {
    display: none !important;
  }
  #our-values .about-us_main-image {
    right: -3rem !important;
    bottom: -1.5rem !important;
    width: 18rem !important;
    max-width: 70vw !important;
  }
  #our-values .about-us_wrapper {
    padding-bottom: 6rem !important;
  }
}

/* ─── PUZZLE PIECES — clamp size + contain on small screens
       so they stop inflating section heights or overflowing. ─ */
@media (max-width: 991px) {
  .puzzle-red-image {
    max-width: 40vw !important;
    width: auto !important;
    height: auto !important;
  }
}
@media (max-width: 767px) {
  .puzzle-red-image {
    max-width: 32vw !important;
    opacity: 0.85;
  }
}

/* ─── KERN-SERVICES — two-column stack, reset forced heights ─ */
@media (max-width: 991px) {
  #kern-services .our-services_wrapper,
  #kern-services [class*="our-services_card"] {
    width: 100% !important;
  }
  #kern-services .ks-animation {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ─── PROCESS — vertical list on mobile already works, only
       tighten step circles and kill horizontal overflow ─ */
@media (max-width: 767px) {
  #process { overflow: hidden !important; }
  #process .ks-step-circle,
  #process [class*="process_step-number"] {
    flex-shrink: 0;
  }
}

/* ─── USE-CASES — tabs scroll horizontally on mobile
       instead of wrapping into an unreadable cluster ─ */
@media (max-width: 991px) {
  #use-cases .uc-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.75rem;
    margin: 0 -1rem;
    scrollbar-width: none;
  }
  #use-cases .uc-tabs::-webkit-scrollbar { display: none; }
  #use-cases .uc-tabs > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  #use-cases .uc-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ─── OUR-PROJECTS — slider wide enough, arrows tappable ─ */
@media (max-width: 991px) {
  #our-projects .ps-track {
    padding: 0 1rem;
  }
  #our-projects .ps-arrow {
    min-width: 44px;
    min-height: 44px;
  }
  #our-projects .puzzle-red-image.projects {
    display: none;
  }
}

/* ─── CLIENTS — the P0 bug.  Reset the grid-area overrides
       that only made sense in a 2-column desktop layout so
       the logo-box, stats, and Werkzeugkiste stack cleanly.

       CRITICAL: use minmax(0, 1fr) not just 1fr — otherwise
       the nested logos_list-wrapper's intrinsic min-content
       size (sum of 3 logo columns at natural widths) blows
       the track out to ~2100px and everything overflows. ─ */
@media (max-width: 991px) {
  #clients .logos_grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-row-gap: 1rem !important;
    width: 100% !important;
    min-width: 0;
  }
  /* Reset the explicit grid-area that pinned the logo box to
     "span 2 / span 1 / span 2 / span 1" on desktop — on mobile
     it caused overlap + an empty void below the heading. */
  #clients .logos_grid > .logos_grid-single:first-child {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  #clients .logos_grid > .logos_grid-single {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
  }
  #clients .logos_grid > .logos_grid-single > .padding-medium {
    min-width: 0;
    width: 100%;
  }
  /* Logo wall inside first grid cell — 3 cols on mobile,
     4 cols on tablet for better density. minmax(0, 1fr)
     prevents intrinsic logo widths from breaking the track. */
  #clients .logos_list-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column-gap: 1rem !important;
    grid-row-gap: 1.5rem !important;
    align-items: center;
    justify-items: center;
    width: 100% !important;
    min-width: 0 !important;
  }
  #clients .logos_list-wrapper > img,
  #clients .client-logo-image {
    max-width: 100% !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    min-width: 0;
  }
  #clients .padding-section-medium {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  #clients .heading-style-h4 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
  #clients .padding-bottom.padding-large {
    padding-bottom: 1.25rem !important;
  }
  /* Werkzeugkiste on mobile: full width, smaller cards */
  #clients #tech-stack {
    grid-column: 1 / -1 !important;
  }
  #clients .toolbox-card {
    width: 88px !important;
  }
  #clients .tb-icon {
    width: 48px !important;
    height: 48px !important;
  }
  #clients .toolbox-card-name {
    font-size: 0.72rem !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #clients .logos_list-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ─── TEAM — 3 cols on mobile, keep overlay names readable ─ */
@media (max-width: 767px) {
  #team .team_members-thumbnails-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.6rem !important;
  }
  #team .team_member-single-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  #team .team_member-name {
    font-size: 1.05rem !important;
  }
  #team .counsel_members-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
  }
  #team .counsel_member-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  #team .padding-section-medium {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ─── FULLSCREEN MENU — root cause fix ─────────────────
   backdrop-filter: blur() auf .navbar4_component (aus Welle 2)
   erstellt einen neuen Containing Block für position:fixed
   Kinder — .menu_right-wrapper war dadurch auf Navbar-Höhe
   eingesperrt statt Viewport zu füllen.

   Fix:
   1. backdrop-filter entfernen wenn Menu offen (nav hat dann
      w--open class, button ebenfalls — wir targeten beides).
   2. Overlay via :has() + w--open triggern (nicht via .show
      class, weil Webflow die nicht zuverlässig setzt).
   ─ */
@media (max-width: 991px) {
  /* Entferne backdrop-filter wenn Menu offen — damit position:fixed
     wieder relativ zum Viewport arbeitet, nicht zur Navbar. */
  .navbar4_component:has(.navbar4_menu-button.w--open),
  .navbar4_component.w--open {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* Overflow visible damit das Overlay nicht geclippt wird */
    overflow: visible !important;
  }

  /* Fullscreen Overlay — wird getriggert wenn:
     (a) :has() erkennt w--open auf dem Hamburger-Button
     (b) nav-component selbst hat w--open (Webflow Standard)
     (c) .show class (Webflow IX2 Fallback) */
  .navbar4_component:has(.navbar4_menu-button.w--open) .menu_right-wrapper,
  .navbar4_component.w--open .menu_right-wrapper,
  .menu_right-wrapper.show {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100vw !important;
    padding: 5rem 2rem 2rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 500 !important;
    background-color: #000000e0 !important;
    overflow-y: auto !important;
  }

  .menu_link {
    font-size: 2rem !important;
    text-align: left !important;
    padding: 0.4rem 0 !important;
    color: #fff !important;
  }
  .menu_link-wrapper {
    margin-bottom: 1.5rem !important;
  }
  .menu_footer {
    margin-top: auto !important;
  }
  .menu_footer-link {
    color: rgba(255,255,255,0.55) !important;
  }
}

/* ─── CONTACT — form full width, kill marquee overlap ─ */
@media (max-width: 991px) {
  #contact .contact-us_form-wrapper,
  #contact .w-form,
  #contact form {
    width: 100% !important;
    max-width: 100% !important;
  }
  #contact .input-wrapper {
    width: 100% !important;
  }
  #contact .marquee-section {
    position: relative !important;
    transform: none !important;
    margin-top: 2rem;
  }
  #contact .padding-section-medium {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  /* The diagonal "hi@blocksandcolors" marquee eats the page on
     mobile — reel it in to a horizontal ribbon below the form. */
  .marquee-section,
  .marquee-wrapper {
    transform: none !important;
    width: 100% !important;
  }
}

/* ─── BC-VALUES — tighter cards on tablet/mobile
       The desktop layout sets min-height: 280px and pushes the
       text to flex-end, with the icon absolute top-right at 0.35
       opacity.  On small screens this leaves a huge empty band
       above the text.  We:
         · drop min-height entirely
         · pull text to the top (flex-start)
         · shrink + fade the 3D icon so it's pure background
         · tighten padding */
@media (max-width: 991px) {
  #bc-values .bc-card {
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding: 1.25rem 1.25rem 1.5rem !important;
  }
  #bc-values .bc-card-icon {
    width: 72px !important;
    height: 72px !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    opacity: 0.18 !important;
    z-index: 0;
  }
  #bc-values .bc-card-title,
  #bc-values .bc-card-text {
    position: relative;
    z-index: 1;
  }
  #bc-values .bc-card-title {
    font-size: 1.25rem !important;
    margin: 0 0 0.5rem !important;
    /* Reserve room on the right so the title doesn't overlap the
       faded icon — keeps the text clean without truncating. */
    padding-right: 3.5rem;
  }
  #bc-values .bc-card-text {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }
}
@media (max-width: 767px) {
  #bc-values .bc-cards-grid,
  #bc-values [class*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #bc-values .bc-card,
  #bc-values .bc-card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─── FAQ — expand width, tap targets comfortable ─ */
@media (max-width: 991px) {
  #faq .faq_question,
  #faq [class*="faq_list-item"] {
    min-height: 56px;
  }
  #faq .padding-section-medium {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ─── GENERAL — container + section padding tightening
       so the full page doesn't feel like a desert of spacing ─ */
@media (max-width: 991px) {
  .padding-section-large {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .padding-section-medium {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .padding-global {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .padding-bottom.padding-xxlarge {
    padding-bottom: 2rem !important;
  }
  .padding-bottom.padding-xlarge {
    padding-bottom: 1.5rem !important;
  }
}
@media (max-width: 479px) {
  .padding-section-large,
  .padding-section-medium {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .padding-global {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─── TYPOGRAPHY — never let a giant desktop H1 overflow ─ */
@media (max-width: 767px) {
  .heading-style-h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
    word-wrap: break-word;
  }
  .heading-style-h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }
  .heading-style-h3 {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 2 — MOBILE + TABLET P0 FIXES
 * ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * WELLE 3 — Review round after Tobias first pass
 *   · Hide diagonal purple marquee on tablet + mobile
 *   · Stats cards (56+ / 150+) side-by-side at <=991
 *   · Kill inner card padding so slider cards go full-width
 *   · Process section: uniform horizontal layout for all 5
 *     steps with vertical connector line running through them
 *   · Container-large / padding-global: already tightened
 * ═══════════════════════════════════════════════════════ */

/* ─── Purple "hi@blocksandcolors" diagonal marquee — hide
       on tablet + mobile (eats the screen, no longer fits
       into the compressed contact section) ─ */
@media (max-width: 991px) {
  .marquee-section,
  #contact .marquee-section,
  #contact + .marquee-section {
    display: none !important;
  }
}

/* ─── CLIENTS stats cards — on tablet and mobile the
       "56+ Wundervolle Kunden" and "150+ Projekte" cards
       should sit side-by-side (2 cols) instead of stacked.
       The first-child logo box stays full-width above. ─ */
@media (max-width: 991px) {
  #clients .logos_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-column-gap: 1rem !important;
  }
  #clients .logos_grid > .logos_grid-single:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Stats cards (children 2 + 3) share the 2-col row */
  #clients .logos_grid > .logos_grid-single:nth-child(2),
  #clients .logos_grid > .logos_grid-single:nth-child(3) {
    grid-column: auto !important;
  }
  /* Werkzeugkiste spans full width below */
  #clients #tech-stack {
    grid-column: 1 / -1 !important;
  }
  /* Make the stats number sizes a touch smaller in the
     narrower 2-col layout so they don't overflow. */
  #clients .stats-wrapper > .heading-style-h1 {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
  }
  #clients .stats-wrapper > .text-size-large {
    font-size: 0.95rem !important;
  }
  #clients .stats-wrapper > div:last-child {
    font-size: 0.82rem !important;
  }
}
@media (max-width: 479px) {
  /* Phones: 56/150 stat cards still side-by-side but a bit
     tighter padding so the text doesn't wrap awkwardly. */
  #clients .logos_grid > .logos_grid-single:nth-child(2) > .padding-medium,
  #clients .logos_grid > .logos_grid-single:nth-child(3) > .padding-medium {
    padding: 1rem !important;
  }
}

/* ─── OUR-PROJECTS slider — on tablet/mobile the .ps-slide
       wrapper has `padding: 1.5rem 2rem` which eats 4rem of
       horizontal space.  Kill it so the card fills the viewport
       edge-to-edge (minus the global gutter). Also stack
       card-left (content) + card-right (screenshot) vertically
       so neither gets crushed. ─ */
@media (max-width: 991px) {
  #our-projects .ps-slide {
    padding: 0 !important;
  }
  #our-projects .ps-card {
    flex-direction: column !important;
    max-height: none !important;
    border-radius: 1rem !important;
  }
  #our-projects .ps-card-left {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    overflow: visible !important;
  }
  #our-projects .ps-card-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    border-radius: 0 0 1rem 1rem !important;
    padding: 1rem !important;
  }
  #our-projects .ps-card-right img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  /* Tighter slider nav spacing */
  #our-projects .ps-nav {
    margin-top: 1.25rem !important;
    gap: 0.75rem !important;
  }
  #our-projects .ps-title {
    font-size: 1.35rem !important;
  }
}

/* ─── Containers full-width on tablet + mobile.  We don't
       want any nested max-widths smaller than the parent —
       text wraps full-width, cards fill edge to edge (minus
       the legitimate .padding-global gutter). ─ */
@media (max-width: 991px) {
  .container-large,
  .container-medium,
  .container-small {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Prose max-widths that were desktop-only */
  .text-size-regular,
  .text-size-large,
  .about-us_content-wrapper {
    max-width: 100% !important;
  }
}

/* ─── PROCESS SECTION — rework so all 5 steps share the same
       horizontal layout: [circle] [title + description].
       Step 1 keeps its white card wrapper but the inside
       matches the row layout of steps 2-5.  A single vertical
       connector line runs through all circles. ─ */
@media (max-width: 991px) {
  #process .proc-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    position: relative;
    padding: 0.5rem 0 0.5rem 0;
  }
  /* Vertical connector running through all the circle
     centers — drawn as a fixed-width strip behind them.
     Left offset = gutter (1.25rem) + half of circle (28px) -
     half of connector width (1.5px) ≈ 46px. */
  #process .proc-steps::before {
    content: '';
    display: block !important;
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: calc(1.25rem + 28px - 1.5px);
    width: 3px;
    background: var(--border-color-gray, #dfe3ec);
    z-index: 0;
  }
  /* Generic step 2-5: horizontal row (circle | title+desc).
     These steps have .proc-step-circle, .proc-step-title,
     .proc-step-text as DIRECT children — so we grid the step
     itself. Step 1 gets its own different rule below that
     grids the inner white box instead. */
  #process .proc-step:not(.active) {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    column-gap: 1.25rem !important;
    row-gap: 0 !important;
    align-items: center;
    text-align: left !important;
    padding: 0.75rem 1.25rem !important;
    position: relative;
    z-index: 1;
    background: transparent;
  }
  #process .proc-step:not(.active) > .proc-step-circle {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0 !important;
    align-self: start;
    box-shadow: 0 0 0 4px var(--bc-bg, #e5e9f6);
  }
  #process .proc-step:not(.active) > .proc-step-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.1rem !important;
    margin-bottom: 0.15rem !important;
    align-self: end;
  }
  #process .proc-step:not(.active) > .proc-step-text {
    grid-column: 2;
    grid-row: 2;
    max-width: none !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    align-self: start;
  }
  /* Step 1 — wrap the SAME row layout in a white card.
     The HTML has an extra <div> child; we target that and
     apply the card styling, the .proc-step itself stays
     block so the white box fills the row width. */
  #process .proc-step.active {
    display: block !important;
    padding: 0 1.25rem !important;
    margin-bottom: 0.75rem;
    text-align: left !important;
  }
  #process .proc-step.active > div:first-child {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    column-gap: 1.25rem !important;
    align-items: center !important;
    text-align: left !important;
    flex-direction: row !important;
    background: #fff !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    margin-top: 0 !important;
    box-shadow: 0 4px 20px rgba(13, 128, 242, 0.12),
                0 1px 4px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    gap: 0 !important;
    position: relative;
    z-index: 2;
  }
  #process .proc-step.active > div:first-child > .proc-step-circle {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0 !important;
    box-shadow: 0 0 0 4px #fff;
  }
  #process .proc-step.active > div:first-child > .proc-step-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0.15rem !important;
    text-align: left !important;
  }
  #process .proc-step.active > div:first-child > .proc-step-text {
    grid-column: 2;
    grid-row: 2;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
  /* The "Projekt anfragen" CTA inside step 1 — put it below
     the title+desc on its own row, still aligned to col 2. */
  #process .proc-step.active > div:first-child > a.w-inline-block {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.65rem !important;
    justify-self: start;
    padding: 0.55rem 1rem !important;
    font-size: 0.8rem !important;
  }
}
/* Mobile-only: slightly tighter overall spacing */
@media (max-width: 479px) {
  #process .proc-step {
    padding: 0.6rem 1rem !important;
  }
  #process .proc-steps::before {
    left: calc(1rem + 28px - 1.5px);
  }
  #process .proc-step.active {
    padding: 0 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 3
 * ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * WELLE 4 — Mobile Polish Runde 2  (/adapt)
 * Erstellt: 2026-04-11
 *
 *   · Logo Run Banner: komplett ausblenden auf Tablet+Mobile
 *     (Spline-Game funktioniert nur auf Desktop)
 *   · Hero CTA-Buttons: flex-wrap auf ≤400px Screens
 *   · Featured Case Thumbnail: hide auf sehr kleinen Phones
 * ═══════════════════════════════════════════════════════ */

/* ─── LOGO RUN BANNER — nur auf Desktop sichtbar.
       Das Spline-Spiel ist nicht für Touch/Mobile geeignet
       und das 2fr-3fr Grid bricht auf Tablet-Breiten zusammen.
       Komplett ausblenden auf ≤991px. ─ */
@media (max-width: 991px) {
  #logo-run-section {
    display: none !important;
  }
}

/* ─── HERO CTA BUTTONS — flex-wrap auf sehr kleinen Screens.
       Kein flex-wrap im Original → auf 320px passen beide
       Buttons nicht nebeneinander. Ab ≤400px: volle Breite. ─ */
@media (max-width: 400px) {
  .hero-cta-group {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  .hero-cta-group > a {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ─── FEATURED CASE THUMBNAIL — auf sehr kleinen Phones
       ausblenden. Unter ≤400px ist die Thumbnail-Spalte
       (1/3 der Karte) zu schmal für ein sinnvolles Preview.
       Text allein steht im Vordergrund. ─ */
@media (max-width: 400px) {
  .featured-case-thumb {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 4
 * ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * WELLE 5 — Spacing Tightening Tablet + Mobile
 * Erstellt: 2026-04-11
 *
 *   · kern-services: 2-col grid → 1 col auf ≤991px,
 *     inneres Karten-Padding 2.5rem → 1.25rem
 *   · kern-services: _2col-heading-wrapper margin-bottom
 *     von 3rem auf 1.5rem/1rem reduzieren
 *   · process: proc-steps margin-top + active card
 *     Padding auf Mobile deutlich verkleinern
 *   · Featured Case: padding auf Mobile tighten
 *   · Allgemein: padding-section-medium top auf Mobile
 *     für dichte sections weiter trimmen
 * ═══════════════════════════════════════════════════════ */

/* ─── KERN-SERVICES — 2-col Grid auf 1 col stellen,
       innere Karten-Paddings deutlich verkleinern ─ */
@media (max-width: 991px) {
  /* Grid: 2 nebeneinander → gestapelt */
  #kern-services .ks-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Section heading: margin-bottom von 3rem → 1.5rem */
  #kern-services ._2col-heading-wrapper {
    margin-bottom: 1.5rem !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Beide Spalten im 2col-Heading volle Breite */
  #kern-services ._2col-heading-wrapper .left-content,
  #kern-services ._2col-heading-wrapper .right-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Inneres Karten-Padding: 2.5rem → 1.25rem.
     Struktur: .ks-grid > div(white card) > .ks-animation + div(content)
     Content-Div ist immer das zweite Kind (nach .ks-animation). */
  #kern-services .ks-grid > div > div:not(.ks-animation) {
    padding: 1.25rem !important;
  }

  /* Featured Case Block: padding etwas tighter */
  .featured-case-trigger {
    padding: 1rem 1rem !important;
  }

  /* CTA Button-Gruppe in Service-Cards: Buttons voll breit */
  #kern-services .ks-grid > div > div > div[style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #kern-services .ks-grid > div > div > div[style*="display: flex"][style*="gap"] > a {
    justify-content: center !important;
    text-align: center !important;
  }

  /* padding-section-medium top in kern-services: 3rem → 2rem */
  #kern-services .padding-section-medium {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 479px) {
  /* Noch enger auf Phones */
  #kern-services .ks-grid {
    gap: 1rem !important;
  }
  #kern-services ._2col-heading-wrapper {
    margin-bottom: 1rem !important;
  }
  #kern-services .ks-grid > div > div:not(.ks-animation) {
    padding: 1rem !important;
  }
}

/* ─── PROCESS — Abstände deutlich straffen ─ */
@media (max-width: 991px) {
  /* proc-steps margin-top: inline 3rem → 1.5rem  */
  #process .proc-steps {
    margin-top: 1.5rem !important;
  }

  /* Active Card (Step 1): inneres Padding reduzieren.
     Die Div hat inline `padding:2rem 1rem 1.5rem; margin-top:-2rem`.
     Wir overriden beides. */
  #process .proc-step.active > div:first-child {
    padding: 1rem 1rem 0.9rem !important;
    margin-top: 0 !important;
  }

  /* CTA-Button in Active Card kleiner */
  #process .proc-step.active > div:first-child > a.w-inline-block {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
    margin-top: 0.5rem !important;
  }

  /* Steps 2-5: Vertikal-Padding etwas enger */
  #process .proc-step:not(.active) {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  /* Prozess-Sektion: padding-section-medium trimmen */
  #process .padding-section-medium {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 479px) {
  #process .proc-step.active > div:first-child {
    padding: 0.85rem 0.85rem 0.75rem !important;
  }
  #process .proc-steps {
    margin-top: 1.25rem !important;
  }
}

/* ─── ALLGEMEIN — 2col-heading-wrapper in anderen Sections ─ */
@media (max-width: 991px) {
  /* Überall wo 2col-heading-wrapper mit 3rem margin vorkommt */
  ._2col-heading-wrapper {
    margin-bottom: 1.5rem !important;
  }

  /* padding-section-medium standardisiert tight */
  .padding-section-medium {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 479px) {
  ._2col-heading-wrapper {
    margin-bottom: 1rem !important;
  }
  .padding-section-medium {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 5
 * ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * WELLE 6 — Projekte-Slider Mobile Fix
 * Erstellt: 2026-04-11
 *
 * Root cause: Welle-3-Track-Padding brach Slide-Breiten.
 * translateX(-%)-Ansatz funktioniert nicht zuverlässig auf
 * Mobile wegen Prozent-Auflösung auf Flex-Container.
 *
 * Fix: CSS Scroll Snap (browser-nativ) auf ≤991px.
 * JS wurde in index.html angepasst: goTo() nutzt scrollTo()
 * auf Mobile, translateX nur noch auf Desktop.
 *
 * Best Practices umgesetzt:
 * - scroll-snap-type: x mandatory (one slide at a time)
 * - overflow-x: scroll + scrollbar hidden
 * - scroll-snap-align: start auf jeder Slide
 * - Viewport bricht aus padding-global aus (edge-to-edge)
 * - Slide-Padding = padding-global-Betrag (visueller Ausgleich)
 * - Dots/Counter/Arrows sync über scroll-event
 * ═══════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  /* ─── Slider Viewport: scroll-snap statt overflow:hidden ─ */
  #our-projects .ps-slider-viewport {
    overflow-x: scroll !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bricht aus padding-global (1.25rem) heraus → volle Viewport-Breite */
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important;
  }
  #our-projects .ps-slider-viewport::-webkit-scrollbar {
    display: none;
  }

  /* ─── Track: explizite Breite + kein Padding ─ */
  #our-projects .ps-track {
    padding: 0 !important; /* Override Welle-3-Padding das Breiten brach */
    width: 100% !important; /* Definite width → flex-basis % löst korrekt auf */
  }

  /* ─── Slides: Snap-Punkt + Padding für Luft ─ */
  #our-projects .ps-slide {
    scroll-snap-align: start !important;
    padding: 0 1.25rem !important; /* Ausgleich für breakout — Card hat Abstand */
    box-sizing: border-box !important;
  }

  /* ─── Karte auf Mobile: Column-Stack, kompaktere Heights ─ */
  #our-projects .ps-card {
    flex-direction: column !important;
    max-height: none !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
  }
  #our-projects .ps-card-left {
    flex: none !important;
    width: 100% !important;
    padding: 1.25rem !important;
    overflow: visible !important;
  }
  #our-projects .ps-card-right {
    flex: none !important;
    width: 100% !important;
    height: 200px !important;
    padding: 0.75rem !important;
    border-radius: 0 0 1rem 1rem !important;
  }
  #our-projects .ps-card-right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
    border-radius: 0.5rem !important;
  }

  /* ─── Typography in Karte ─ */
  #our-projects .ps-title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }
  #our-projects .ps-desc {
    font-size: 0.85rem !important;
  }
  #our-projects .ps-quote {
    font-size: 0.88rem !important;
  }

  /* ─── Nav: Abstände enger ─ */
  #our-projects .ps-nav {
    margin-top: 1rem !important;
    gap: 0.75rem !important;
  }
  #our-projects .ps-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 479px) {
  /* Phones: schmalere breakout (padding-global ist 1rem statt 1.25rem) */
  #our-projects .ps-slider-viewport {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }
  #our-projects .ps-slide {
    padding: 0 1rem !important;
  }
  #our-projects .ps-card-right {
    height: 160px !important;
  }
}

/* ─── Puzzle piece: Dekoration ausblenden auf Mobile ─ */
@media (max-width: 991px) {
  #our-projects .puzzle-red-image.projects {
    display: none !important;
  }
}

/* ─── Section Heading Gap vor dem Slider ─ */
@media (max-width: 991px) {
  #our-projects .padding-bottom.padding-xlarge {
    padding-bottom: 1.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 6
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * WELLE 7 — Slider: gray bg füllt Slide-Höhe
 *           Process: Kreis-Alignment + sichtbare Linie
 * ═══════════════════════════════════════════════════════ */

/* ─── PROJECTS: Gray background fill ─ */
@media (max-width: 991px) {
  /* Slide bekommt definierte Höhe → Card füllt sie via flex-stretch */
  #our-projects .ps-slide {
    height: min(480px, calc(100svh - 8rem)) !important;
  }
  #our-projects .ps-card {
    height: 100% !important;
  }
  #our-projects .ps-card-left {
    flex: 0 0 auto !important;
    overflow-y: auto !important;
    max-height: 60% !important;
  }
  /* card-right wächst in den restlichen Platz */
  #our-projects .ps-card-right {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 140px !important;
  }
  #our-projects .ps-card-right img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: top !important;
  }
}
@media (max-width: 479px) {
  /* Phones: height:160px-Override aus Welle 6 zurücksetzen */
  #our-projects .ps-card-right {
    height: auto !important;
  }
}

/* ─── PROCESS: Circle alignment + connecting line ─ */
@media (max-width: 991px) {
  /* Active Step: horizontal Padding entfernen, damit Kreis 1
     auf gleicher X-Position steht wie Schritte 2-5 (= 1.25rem) */
  #process .proc-step.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Inner white box: 1.25rem indent damit Kreis-Mitte = line X */
  #process .proc-step.active > div:first-child {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Verbindungslinie sichtbar machen */
  #process .proc-steps::before {
    background: rgba(26, 26, 46, 0.18) !important;
  }
}
@media (max-width: 479px) {
  /* Phones: 1rem Gutter wie non-active Schritte */
  #process .proc-step.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #process .proc-step.active > div:first-child {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─── TEAM: Counsel-Karten kleiner + richtig rund ─ */
@media (max-width: 767px) {
  /* Grid zentrieren + Breite begrenzen → ~80px pro Karte */
  #team .counsel_members-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 1.25rem !important;
  }
  /* Karte: perfekter Kreis */
  #team .counsel_member-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }
  /* Wrapper füllt Karte komplett aus */
  #team .team_member-single-wrapper {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }
  /* Name-Overlay: kleiner Font damit er im Kreis passt */
  #team .counsel_member-card .team_member-name {
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
  }
  /* Spacer vor den Karten etwas kürzen */
  #team .padding-bottom.padding-xxlarge {
    padding-bottom: 1.5rem !important;
  }
}

/* ─── HERO: Vertikal zentriert + Navbar-Clearance ─ */
@media (max-width: 991px) {
  /* Selektorspezifität #hero .hero-flex (0-1-1) muss mit dem
     globalen Block übereinstimmen — sonst schlägt min-height:unset
     und padding-block-end:22vh durch und centering hat keinen Effekt. */
  #hero .hero-flex {
    min-height: 85svh !important;       /* Container groß genug für centering */
    padding-top: 4rem !important;       /* Navbar-Clearance im Flex-Container */
    padding-block-end: 0 !important;    /* 22vh-Push auf Mobile entfernen */
  }
  /* Spacer + Bottom verstecken — justify-content übernimmt Positionierung */
  .hero-flex-spacer,
  .hero-flex-bottom {
    display: none !important;
  }
  /* hero-flex-top: kein extra padding-top mehr nötig (Clearance im Parent) */
  .hero-flex-top {
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
  }
}
@media (max-width: 479px) {
  #hero .hero-flex {
    padding-top: 3.5rem !important;   /* kleine Phones: Navbar etwas kürzer */
  }
}

/* ─── BUTTONS: Natural width auf Mobile, zentriert ─ */
@media (max-width: 991px) {
  /* Webflow setzt .button-v8---brix { width: 100% } in ≤479px.
     Auch .button.w-button (z.B. "Weitere Cases sehen") muss erfasst werden. */
  .button-v8---brix,
  .button.w-button {
    width: auto !important;
    align-self: center !important;
  }
  /* Hero CTAs: column-stack mit natürlicher Breite */
  .hero-cta-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  .hero-cta-group > a {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 7
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * WELLE 8 — Global Spacing Normalisierung
 *   Webflow-Defaults: xxlarge=4-5rem, section-medium=4-5rem
 *   auf Tablet/Mobile — reduziert auf ein konsistentes Scale.
 *   Padding-Section-Medium schon in Welle 5 abgedeckt.
 * ═══════════════════════════════════════════════════════ */

/* ─── Tablet ≤991px ─ */
@media (max-width: 991px) {
  .padding-xxlarge { padding: 2rem !important; }
  .padding-xlarge  { padding: 1.75rem !important; }
  .padding-large   { padding: 1.5rem !important; }
  .padding-medium  { padding: 1.25rem !important; }
  /* Inline-padding-Overrides */
  #logo-run-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  #bc-values        { padding-bottom: 2rem !important; }
}

/* ─── Mobile ≤767px ─ */
@media (max-width: 767px) {
  .padding-xxlarge { padding: 1.5rem !important; }
  .padding-xlarge  { padding: 1.25rem !important; }
  .padding-large   { padding: 1rem !important; }
  .padding-medium  { padding: 1rem !important; }
}

/* ─── Phone ≤479px ─ */
@media (max-width: 479px) {
  .padding-xxlarge { padding: 1.25rem !important; }
  .padding-xlarge  { padding: 1rem !important; }
  .padding-large   { padding: 0.875rem !important; }
  .padding-medium  { padding: 0.875rem !important; }
  #logo-run-section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  #bc-values        { padding-bottom: 1.5rem !important; }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 8
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * WELLE 9 — Process Section: Step 1 Alignment + Connecting Line
 *   Step 1 circle war vertikal zentriert (kein align-self: start)
 *   → jetzt top-aligned wie Steps 2-5.
 *   Connecting Line war zu faint → sichtbarer gemacht.
 * ═══════════════════════════════════════════════════════ */

/* Step 1 circle: top-align statt stretch — NUR auf Mobile/Tablet */
@media (max-width: 991px) {
  #process .proc-step.active > div:first-child > .proc-step-circle {
    align-self: start !important;
  }
}

/* Connecting line: sichtbarer (0.35 war zu faint) */
@media (max-width: 991px) {
  #process .proc-steps::before {
    background: rgba(26, 26, 46, 0.5) !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 9
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * WELLE 10 — Final Audit Fixes
 *   1. Team Grid Orphan: Jan (7. Member) war allein in Spalte 1
 *      von Row 3 → jetzt in Spalte 2 (zentriert) auf Mobile
 * ═══════════════════════════════════════════════════════ */

/* Team Grid: letztes Member in die Mitte der letzten Reihe (Mobile + Tablet) */
@media (max-width: 991px) {
  #team .team_members-thumbnails-wrapper .team_member-single-wrapper:last-child {
    grid-column: 2 !important;
  }
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 10
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * WELLE 11 — Horizontal Overflow Fix
 *   Decorative elements (toolbox cards, ps-tags, puzzle images)
 *   protrude slightly at ~1280px viewport widths, causing a
 *   horizontal scrollbar. overflow-x: clip clips without
 *   creating a new BFC (no sticky/z-index side effects).
 * ═══════════════════════════════════════════════════════ */

html {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 11
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * WELLE 12 — Projects Section: Headline → Slider Abstand
 * ═══════════════════════════════════════════════════════ */

#our-projects .padding-bottom.padding-xlarge {
  padding-bottom: 24px !important;
}

/* ═══════════════════════════════════════════════════════
 * BUTTON VERTICAL ALIGNMENT FIX
 * ═══════════════════════════════════════════════════════ */
.button.w-button,
.button-v8---brix {
  padding-top: 0.85rem !important;
  padding-bottom: 0.65rem !important;
  line-height: 1 !important;
}

.button.w-button .line-awesome,
.button.w-button span {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════
 * ACCESSIBILITY — Contrast Fixes (WCAG AA 4.5:1)
 * Minimale Farbanpassungen, Markenwirkung bleibt gleich
 * ═══════════════════════════════════════════════════════ */

/* Metadata-Grau: #8a95a3 → #5c6b7a (4.8:1 auf weiß) */
.ps-label, .ps-stat-lbl, .ps-quote-title, .ps-counter { color: #5c6b7a !important; }

/* dim-grey auf blue-gray: #6a6a6a → #505a66 (4.7:1 auf #e5e9f6) */
.ps-desc,
[style*="color: var(--dim-grey)"],
[style*="color:var(--dim-grey)"] { color: #505a66 !important; }

/* Button-Blau kommt via --bc-blue Variable */

/* Touch-Targets: ps-dots auf 44×44px */
.ps-dot {
  position: relative;
  min-width: 10px;
  min-height: 10px;
}
.ps-dot::before {
  content: '';
  position: absolute;
  inset: -17px;
  min-width: 44px;
  min-height: 44px;
}

/* ─── Form: hide success/error by default ─── */
.w-form-done, .w-form-fail { display: none; }

/* ─── Sidebar Menu: above all sections ─── */
.menu_right-wrapper { z-index: 9998 !important; }

/* ─── About-Us Card: match lego image background ─── */
.about-us_wrapper { background-color: #0474f9 !important; }

/* ─── Language Switcher ─── */
.lang-switch {
  font-family: var(--refine-font-display), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bc-text) !important;
  text-decoration: none !important;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 0.25rem 0.5rem;
  margin-right: 0.25rem;
}
.lang-switch:hover { opacity: 1; }

/* ─── Cookie Text Rotation ─── */
@keyframes cookie-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cookies_text { animation: cookie-spin 15s linear infinite; }

/* ═══════════════════════════════════════════════════════
 * ENDE WELLE 12
 * ═══════════════════════════════════════════════════════ */