/* mail-agentur: main.css */

/* Inter (self-hosted variable font) — the theme's primary sans (see --font-sans).
   One woff2 per subset, wght axis 100–900; font-display:swap avoids invisible text. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Long German compound words (e.g. „Datenschutzerklärung", „E-Mail-Marketing") must
   wrap instead of overflowing narrow viewports — break at hyphens, then anywhere. */
h1,
h2,
h3,
h4,
.display,
.hero__title,
.section-title,
.cta__title,
.legal-page h1,
.legal-page h2 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Listandsell base layer — keep at the top; override the tokens to match the brand. */
:root {
  /* Themed SVG icon color (ls_icon + "icon" field). Set to brand color; all icons follow. */
  --ls-icon-color: currentColor;

  /* 404 colors — fall back to your brand tokens (--color-*) if defined, else neutral. */
  --ls-404-bg: var(--color-bg, #ffffff);
  --ls-404-fg: var(--color-text, #14181f);
  --ls-404-muted: var(--color-muted, #5b6472);
  --ls-404-accent: var(--color-primary, #2563eb);
  --ls-404-accent-contrast: var(--color-on-primary, #ffffff);
  --ls-404-border: var(--color-border, rgba(0, 0, 0, 0.1));

  /* Breadcrumb (Yoast) text/link color — falls back to your text token. */
  --ls-breadcrumb-color: var(--color-muted, #5b6472);
}
.ls-icon {
  color: var(--ls-icon-color, currentColor);
  vertical-align: middle;
}

/* 404 (not found) page — styled from the --ls-404-* root tokens above */
.ls-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  box-sizing: border-box;
  padding: 64px 20px;
  background: var(--ls-404-bg);
  color: var(--ls-404-fg);
  text-align: center;
}
.ls-404__inner {
  max-width: 560px;
  margin: 0 auto;
}
.ls-404__code {
  margin: 0;
  font-size: clamp(88px, 22vw, 184px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ls-404-accent);
}
.ls-404__title {
  margin: 8px 0 0;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ls-404-fg);
}
.ls-404__text {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ls-404-muted);
}
.ls-404__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ls-404__btn {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ls-404-accent);
  color: var(--ls-404-accent-contrast);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}
.ls-404__btn:hover,
.ls-404__btn:focus {
  filter: brightness(0.92);
  transform: translateY(-1px);
  color: var(--ls-404-accent-contrast);
}
.ls-404__btn--ghost {
  background: transparent;
  border-color: var(--ls-404-border);
  color: var(--ls-404-fg);
}
.ls-404__btn--ghost:hover,
.ls-404__btn--ghost:focus {
  filter: none;
  background: var(--ls-404-accent);
  border-color: var(--ls-404-accent);
  color: var(--ls-404-accent-contrast);
}

/* Legal pages (Impressum / Datenschutz) — readable, structured typography */
.legal-page {
  padding-block: var(--space-8, 48px) var(--space-9, 64px);
  color: var(--color-text);
}
.legal-page h1 {
  margin: 0 0 var(--space-4, 16px);
  font-size: var(--fs-h1, clamp(28px, 4vw, 40px));
  line-height: 1.15;
  font-weight: var(--font-weight-bold, 700);
}
.legal-page .legal-block {
  margin-top: var(--space-7, 32px);
  padding-top: var(--space-6, 24px);
  border-top: 1px solid var(--color-border);
}
.legal-page .legal-block:first-of-type {
  margin-top: var(--space-5, 20px);
  padding-top: 0;
  border-top: 0;
}
.legal-page h2 {
  margin: 0 0 var(--space-3, 12px);
  font-size: var(--fs-h3, 20px);
  line-height: 1.3;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text);
}
.legal-page h3 {
  margin: var(--space-5, 20px) 0 var(--space-2, 8px);
  font-size: var(--fs-lg, 18px);
  font-weight: var(--font-weight-semibold, 600);
}
.legal-page p,
.legal-page li {
  font-size: var(--fs-base, 16px);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.legal-page p {
  max-width: 100%;
  margin: 0 0 var(--space-3, 12px);
}
.legal-page p:last-child {
  margin-bottom: 0;
}
.legal-page ul,
.legal-page ol {
  margin: 0 0 var(--space-3, 12px);
  padding-left: var(--space-5, 20px);
}
.legal-page li {
  margin-bottom: var(--space-2, 8px);
}
.legal-page a {
  color: var(--color-accent, var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page a:hover,
.legal-page a:focus {
  text-decoration: none;
}

/* Breadcrumb (Yoast `ls_breadcrumb()`) — neutral base; restyle per design */
.ls-breadcrumb {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ls-breadcrumb-color);
}
.ls-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.ls-breadcrumb a:hover,
.ls-breadcrumb a:focus {
  text-decoration: underline;
}
.ls-breadcrumb__sep {
  margin: 0 0.5em;
  opacity: 0.6;
}
/* Your site CSS starts here ↓ */

/* Converted site CSS (mail-agentur.de) */
/* mail-agentur.de — app.css Mobile-first base styles (no width breakpoints here). All responsive breakpoint rules live in responsive.css, which MUST be loaded AFTER this file. Design tokens are the single source of truth. */
/* Design Tokens */
:root {
  --color-primary: #0f172a;
  --color-primary-800: #162033;
  --color-primary-700: #1e293b;
  --color-primary-600: #334155;
  --color-accent: #16a34a;
  --color-accent-800: #166534;
  --color-accent-700: #15803d;
  --color-accent-600: #169b47;
  --color-accent-100: #dcfce7;
  --color-accent-50: #f0fdf4;

  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-invert: #ffffff;

  --color-success: #16a34a;
  --color-success-700: #15803d;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-warning: #b45309;
  --color-warning-700: #92400e;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;

  --color-error: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;

  --color-info: #1d4ed8;
  --color-info-700: #1e40af;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;

  --color-focus: #2563eb;
  --focus-ring: 0 0 0 3px
    color-mix(in srgb, var(--color-focus) 35%, transparent);
  --focus-ring-accent: 0 0 0 3px
    color-mix(in srgb, var(--color-accent) 24%, transparent);

  --font-sans:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --line-tight: 1.15;
  --line-snug: 1.3;
  --line-base: 1.6;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1400px;
  --container-pad: 1rem;
  --grid-cols: 12;
  --grid-gap: 1.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 28px 72px rgba(15, 23, 42, 0.16);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-out);

  --z-base: 1;
  --z-dropdown: 100;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-header: 1300; /* above the mobile drawer so logo + close stay clickable */

  --header-h: 64px; /* matches .site-header__inner min-height */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-600) var(--color-bg-muted);
}

/* Custom scrollbar (WebKit/Chromium) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-muted);
}
::-webkit-scrollbar-thumb {
  background: var(--color-primary-600);
  border-radius: var(--radius-full);
  border: 3px solid var(--color-bg-muted);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-700);
}
::-webkit-scrollbar-corner {
  background: var(--color-bg-muted);
}

/* Text selection */
::selection {
  background: var(--color-accent);
  color: var(--color-text-invert);
}
::-moz-selection {
  background: var(--color-accent);
  color: var(--color-text-invert);
}
body {
  min-height: 100vh;
  line-height: var(--line-base);
  -webkit-font-smoothing: antialiased;
}
img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}
a {
  color: inherit;
  text-decoration: none;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
}
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Base typography & element defaults */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-xl);
}

p {
  color: var(--color-text-muted);
  max-width: 70ch;
}
strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

a {
  color: var(--color-accent-700);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-accent);
}

small {
  font-size: var(--fs-sm);
}

:where(ul, ol):not([role="list"]) {
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}
/* Item spacing ONLY for real prose lists — bare <ul>/<ol> without a class
   (article body). Component lists (.steps, .icon-list, nav …) carry a class
   and manage their own spacing via flex/grid gap, so they are excluded here
   and no longer get an unwanted extra margin-top. */
:where(ul, ol):not([class]) > li + li {
  margin-top: var(--space-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

/* Accessibility */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animations & scroll-reveal */
@keyframes ma-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ma-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ma-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ma-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ma-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-fade-in {
  animation: ma-fade-in var(--duration-slow) var(--ease-out) both;
}
.animate-fade-up {
  animation: ma-fade-up var(--duration-slow) var(--ease-out) both;
}
.animate-scale-in {
  animation: ma-scale-in var(--duration-base) var(--ease-emphasized) both;
}
.animate-spin {
  animation: ma-spin 800ms linear infinite;
}
.animate-pulse {
  animation: ma-pulse 1.6s var(--ease-standard) infinite;
}

.stagger > * {
  animation: ma-fade-up var(--duration-slow) var(--ease-out) both;
}
.stagger > :nth-child(2) {
  animation-delay: 60ms;
}
.stagger > :nth-child(3) {
  animation-delay: 120ms;
}
.stagger > :nth-child(4) {
  animation-delay: 180ms;
}
.stagger > :nth-child(5) {
  animation-delay: 240ms;
}
.stagger > :nth-child(6) {
  animation-delay: 300ms;
}

/* Scroll-Reveal (Slide-up) — schlank & WP-Rocket-sicher. Der Versteckt-Startzustand greift NUR unter html.reveal-js, das die JS setzt, sobald sie läuft. Wird die JS blockiert oder verzögert ausgeführt (z. B. "Delay JS" von WP Rocket), bleibt der Inhalt normal sichtbar. Enthüllt wird per .visible (JS). */
html.reveal-js .is-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}
html.reveal-js .is-reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-js .is-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-up,
  .animate-scale-in,
  .animate-pulse,
  .stagger > * {
    animation: none;
  }
  .animate-spin {
    animation-duration: 1.6s;
  }
}

/* Layout — container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: 800px;
}
.container--wide {
  max-width: 1320px;
}

/* Layout — 12-col grid */
.grid {
  display: grid;
  gap: var(--grid-gap);
}
/* 12-column grid ONLY for grids that use .col-* spans (the kontakt layout).
   Card grids use .grid--auto and section grids set their own columns, so this
   no longer clobbers them. */
.grid:has(> [class*="col-"]) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-12 {
  grid-column: 1 / -1;
}
/* Desktop span helpers (12-col). Reset to auto at <=1024px in responsive.css. */
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-6 {
  grid-column: span 6;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Services grid (#8): 3 columns on laptop/desktop. */
.abschnitt-services .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Layout — section rhythm */
.section {
  padding-block: var(--space-8);
}
.section--sm {
  padding-block: var(--space-7);
}
.section--lg {
  padding-block: var(--space-9);
}
.section--subtle {
  background-color: var(--color-bg-subtle);
}
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}
.section--primary :where(h1, h2, h3, p) {
  color: inherit;
}

.section__head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}
/* Einheitlicher Styling-Hook für alle Sektions-Überschriften (Symmetrie über
   die ganze Website). Bewusst OHNE `color`, damit sektionsspezifische Themes
   (z. B. die dunkle .abschnitt-loesung mit weißer Schrift) erhalten bleiben. */
.section-title {
  font-size: var(--fs-h2);
  line-height: var(--line-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.section__kicker {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-2);
}
.section--center .section__head {
  margin-inline: auto;
  text-align: center;
}
/* Center a section head's items horizontally, applied directly on the head. */
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Editorial two-column layout for intro / problem / solution sections —
   heading left, prose right — so they fill the page width instead of a
   narrow, oddly-centered column. Collapses to one column <=1024px. */
.abschnitt-einleitung > .container--narrow,
.abschnitt-problem > .container--narrow,
.abschnitt-loesung > .container--narrow {
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-4) var(--space-8);
  align-items: start;
}
.abschnitt-einleitung > .container--narrow > * + *,
.abschnitt-problem > .container--narrow > * + *,
.abschnitt-loesung > .container--narrow > * + * {
  margin-top: 0;
} /* spacing comes from grid gap */
.abschnitt-einleitung .section__head,
.abschnitt-problem .section__head {
  margin-bottom: 0;
}

/* Two-column content + image (e.g. the About page). The image sticks alongside
   the text on desktop; stacks to one column (image first) below 1024px. */
.page-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-7) var(--space-8);
  align-items: center;
}
.page-split__media {
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}
.page-split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
/* Reversed split: image on the left, content (wider) on the right. */
.page-split--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
.page-split--reverse .page-split__media {
  order: -1;
}
/* Vertically center the two columns relative to each other (content beside a taller image). */
.page-split--center {
  align-items: center;
}

/* Dark-themed Lösung section (service pages). */
.abschnitt-loesung {
  background:
    radial-gradient(
      50% 70% at 12% 100%,
      color-mix(in srgb, var(--color-accent) 16%, transparent),
      transparent 70%
    ),
    var(--color-primary);
  color: var(--color-text-invert);
}
.abschnitt-loesung :where(h2, h3) {
  color: var(--color-white);
}
.abschnitt-loesung p {
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
}
.abschnitt-loesung .section__kicker {
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-white));
}
/* Cards liegen auf hellem Kartengrund im dunklen Abschnitt: eigene Textfarben wiederherstellen. */
.abschnitt-loesung .card__title {
  color: var(--color-primary);
}
.abschnitt-loesung .card__text {
  color: var(--color-text-muted);
}
/* Linke Spalte (Inhalt) vertikal mittig zur Illustration ausrichten. */
.abschnitt-loesung .page-split {
  align-items: center;
}

/* Einleitung, Problem & Fit: square image, columns vertically centered. */
.abschnitt-einleitung .page-split,
.abschnitt-problem .page-split,
.abschnitt-fit .page-split {
  align-items: center;
}
.abschnitt-einleitung .page-split__media,
.abschnitt-problem .page-split__media,
.abschnitt-fit .page-split__media {
  position: static;
}
.abschnitt-einleitung .page-split__media img,
.abschnitt-problem .page-split__media img,
.abschnitt-fit .page-split__media img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* Layout — site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--container-pad);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
/* Scale the logo by height and keep its aspect ratio (any source ratio). */
.site-header__logo img {
  height: 52px;
  width: auto;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Layout — site footer */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-text-invert);
  padding-block: var(--space-9) var(--space-6);
  /* Layered depth: two soft accent glows over a subtle vertical gradient. */
  background:
    radial-gradient(
      72% 120% at 90% -15%,
      color-mix(in srgb, var(--color-accent) 22%, transparent),
      transparent 55%
    ),
    radial-gradient(
      62% 110% at 2% 118%,
      color-mix(in srgb, var(--color-accent) 13%, transparent),
      transparent 55%
    ),
    linear-gradient(180deg, var(--color-primary-700), var(--color-primary) 62%);
}
/* Glowing accent hairline along the top edge. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent),
    color-mix(in srgb, var(--color-accent) 60%, var(--color-white)),
    var(--color-accent),
    transparent
  );
  opacity: 0.75;
}
/* Faint dotted texture, fading out toward the bottom. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--color-white) 6%, transparent) 1px,
    transparent 1.5px
  );
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.site-footer a {
  color: #a5a5a5;
}
.site-footer a:hover {
  color: var(--color-white);
}
/* Lead brand column + three link groups (desktop base; restacks in responsive.css). */
.site-footer__grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  align-items: start;
}
.site-footer__brand {
  max-width: 360px;
}
.site-footer__logo {
  display: inline-flex;
}
.site-footer__logo img {
  height: 55px;
  width: auto;
  /* Force the (full-colour) logo to solid white for the dark footer. */
  filter: brightness(0) invert(1);
}
.site-footer__about {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--line-base);
  color: #a5a5a5;
  max-width: 44ch;
}
.site-footer__col-heading {
  position: relative;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}
.site-footer__col-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}
/* Link-list columns nudge on hover. */
.site-footer__col .flow a {
  display: inline-block;
  transition:
    transform var(--transition-base),
    color var(--transition-base);
}
.site-footer__col .flow a:hover {
  transform: translateX(4px);
}
/* Brand trust badges. */
.site-footer__badges {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.site-footer__badges li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: #a5a5a5;
}
.site-footer__badges svg {
  flex: 0 0 auto;
  color: var(--color-accent);
}
/* Footer contact column — phone / email / address with icons. */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-contact a,
.footer-contact__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--line-snug);
  color: #a5a5a5;
}
.footer-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  color: var(--color-accent);
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}
.footer-contact a:hover {
  color: var(--color-white);
}
.footer-contact a:hover .footer-contact__icon {
  background: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-2px);
}
.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
  font-size: var(--fs-sm);
}
.site-footer__bottom > p {
  margin: 0;
  justify-self: start;
  color: #a5a5a5;
} /* match footer link color */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-self: end;
}
/* Light vertical separator centered in the gap between adjacent legal links. */
.site-footer__legal a + a {
  position: relative;
}
.site-footer__legal a + a::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: color-mix(in srgb, var(--color-white) 22%, transparent);
}
.credit {
  justify-self: end;
  text-align: right;
  color: color-mix(in srgb, var(--color-white) 78%, transparent);
}
.credit a {
  color: inherit;
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
}
.credit a:hover,
.credit a:focus {
  text-decoration: underline;
}
.credit .heart {
  color: #e5484d;
}
@media (max-width: 768px) {
  .site-footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .site-footer__bottom > p,
  .site-footer__legal,
  .credit {
    justify-self: center;
    text-align: center;
  }
}

/* Component — buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-base);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn--primary {
  background: var(--color-accent-700);
  color: var(--color-text-invert);
}
.btn--primary:hover {
  background: var(--color-accent-800);
  color: var(--color-text-invert);
}

.btn--secondary {
  background: var(--color-primary);
  color: var(--color-text-invert);
}
.btn--secondary:hover {
  background: var(--color-primary-700);
  color: var(--color-text-invert);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary);
  border-color: var(--color-text-muted);
}

.btn--invert {
  background: var(--color-white);
  color: var(--color-primary);
}
.btn--invert:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary);
}

.btn--link {
  background: transparent;
  color: var(--color-accent-700);
  padding-inline: 0;
  border: 0;
}
.btn--link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}
.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-lg);
}
.btn--block {
  width: 100%;
}

.btn--icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}
.btn__icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.btn[data-loading="true"] {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-text-invert);
  animation: ma-spin 640ms linear infinite;
}
.btn--ghost[data-loading="true"]::after,
.btn--link[data-loading="true"]::after {
  color: var(--color-primary);
}

.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Component — badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}
.badge--sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
}

.badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge--accent {
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-700);
}
.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-700);
}
.badge--error {
  background: var(--color-error-bg);
  color: var(--color-error-700);
}
.badge--info {
  background: var(--color-info-bg);
  color: var(--color-info-700);
}

.badge--solid {
  background: var(--color-accent);
  color: var(--color-text-invert);
}
.badge--dark {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

.badge--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Component — navigation */
.nav {
  display: block;
} /* desktop base; hidden <=1024px (responsive.css) */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__item {
  position: relative;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav__link:hover {
  color: var(--color-accent-700);
  background: var(--color-bg-muted);
}
.nav__link[aria-expanded="true"] {
  color: var(--color-accent-700);
}
.nav__chevron {
  transition: transform var(--transition-fast);
}
.nav__link[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  left: 0;
  top: 100%;
  width: max-content;
  max-width: min(720px, 90vw);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(220px, 1fr); /* single column by default */
  gap: var(--space-5) var(--space-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
  z-index: var(--z-dropdown);
}
/* Only mega panels with two column groups get two columns; others stay single. */
.mega:has(.mega__col + .mega__col) {
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.nav__item[data-open="true"] .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega__heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.mega__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}
.mega__link:hover {
  background: var(--color-bg-muted);
}
.mega__link-label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}
.mega__link-desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-primary);
}
.nav-toggle:hover {
  background: var(--color-bg-muted);
}
.nav-toggle__close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: inline;
}

/* Full-screen drawer that opens BELOW the sticky site-header (which sits on top
   via a higher z-index). Desktop base hides it; <=1024px enables it (responsive.css). */
.mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  display: none;
  flex-direction: column;
  background: var(--color-white);
  z-index: var(--z-overlay);
  padding-top: var(--header-h);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--transition-base),
    visibility var(--transition-base);
  overflow-y: auto;
}
.mobile-nav[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
}
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
  z-index: var(--z-overlay);
}
.mobile-nav__overlay[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__list {
  flex: 1;
  padding: var(--space-4) var(--space-5);
}
.mobile-nav__group + .mobile-nav__group {
  border-top: 1px solid var(--color-border);
}

.mobile-nav__link,
.mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  min-height: 56px;
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
}
.mobile-nav__link:hover,
.mobile-nav__summary:hover {
  background: var(--color-bg-muted);
}
.mobile-nav__summary::-webkit-details-marker {
  display: none;
}
.mobile-nav__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.mobile-nav__chevron {
  transition: transform var(--transition-base);
  color: var(--color-text-muted);
}
.mobile-nav__acc[open] .mobile-nav__summary {
  color: var(--color-accent-700);
}
.mobile-nav__acc[open] .mobile-nav__chevron {
  transform: rotate(180deg);
}
.mobile-nav__panel {
  padding: 0 var(--space-3) var(--space-2);
}
.mobile-nav__heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-2);
}
.mobile-nav__sublink {
  display: block;
  padding: var(--space-3);
  min-height: 44px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.mobile-nav__sublink:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary);
}

.mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.mobile-nav__footer .btn {
  width: 100%;
}

/* Component — hero */
.hero {
  padding-block: var(--space-8) var(--space-9);
}
.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
/* Desktop base: two columns when a hero image is present; stacks <=1024px. */
.hero__inner:has(.hero__media) {
  grid-template-columns: 1.1fr 0.9fr;
}
/* Centered hero for overview/general pages that have no hero image. */
.hero__inner--center {
  justify-items: center;
  text-align: center;
}
.hero__inner--center .hero__content {
  max-width: 760px;
}
.hero__inner--center .hero__actions {
  justify-content: center;
}
/* Text-only heroes (no right-column image): cap the content width on large
   screens (>1024px) so a single column doesn't stretch the full page width.
   The centered-hero variant keeps its own narrower cap. */
@media (min-width: 1025px) {
  .hero__inner:not(:has(.hero__media)):not(.hero__inner--center)
    .hero__content {
    max-width: 80%;
  }
}

.hero__kicker {
  color: var(--color-accent-700);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
}
.hero__title {
  margin-top: var(--space-3);
}
/* Highlighted words in the hero headline — accent colour, no background. */
.hero__hl {
  color: var(--color-accent);
}
.hero__sub {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero__media {
  position: relative;
  isolation: isolate;
}
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 376px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Hero image as an organic blob. More specific than .hero__media img, which lets
   it override the 376px cap: the radius percentages only read as a blob on a
   square-ish box, and a capped 820x820 source renders wide and flat. Hub heroes
   keep the cap — they share .hero__media but not .hero__img. */
.hero__media .hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 58% 42% 57% 43% / 52% 46% 54% 48%;
  box-shadow: var(--shadow-lg);
}

/* Dark theme for inner-page heroes (the homepage .hero--home keeps its light premium look). Dark navy base + subtle accent glow, light text. */
.hero:not(.hero--home) {
  background:
    radial-gradient(
      55% 75% at 88% 0%,
      color-mix(in srgb, var(--color-accent) 20%, transparent),
      transparent 70%
    ),
    var(--color-primary);
  color: var(--color-text-invert);
}
.hero:not(.hero--home) .hero__title {
  color: var(--color-white);
}
.hero:not(.hero--home) .hero__kicker {
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-white));
}
.hero:not(.hero--home) .hero__sub {
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
/* Breadcrumb on the dark hero — targets the real ls_breadcrumb('breadcrumb')
   markup (.breadcrumb .container > a / .breadcrumb_last / .ls-breadcrumb__sep),
   not a BEM structure the markup never emits. Ancestor links sit at muted white;
   the current crumb is full white; the separator is dim. */
.hero:not(.hero--home) .breadcrumb .container {
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}
.hero:not(.hero--home) .breadcrumb a:hover,
.hero:not(.hero--home) .breadcrumb a:focus {
  color: var(--color-white);
}
/* stylelint-disable-next-line selector-class-pattern -- Yoast emits .breadcrumb_last */
.hero:not(.hero--home) .breadcrumb .breadcrumb_last,
.hero:not(.hero--home) .breadcrumb [aria-current="page"] {
  color: var(--color-white);
}
.hero:not(.hero--home) .breadcrumb .ls-breadcrumb__sep {
  color: color-mix(in srgb, var(--color-white) 40%, transparent);
}
/* Ghost button readable on dark */
.hero:not(.hero--home) .btn--ghost {
  color: var(--color-text-invert);
  border-color: color-mix(in srgb, var(--color-white) 45%, transparent);
  background: transparent;
}
.hero:not(.hero--home) .btn--ghost:hover {
  color: var(--color-text-invert);
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.hero--home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-9);
}

.hero--home::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  z-index: -1;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background:
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--color-accent) 26%, transparent),
      transparent 70%
    ),
    radial-gradient(
      closest-side,
      color-mix(in srgb, var(--color-focus) 18%, transparent),
      transparent 70%
    );
  background-position:
    70% 0%,
    30% 30%;
  background-repeat: no-repeat;
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
}
.hero--home::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  z-index: -1;
  width: 50vw;
  height: 50vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-accent) 12%, transparent),
    transparent 70%
  );
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.hero__badge b {
  color: var(--color-accent-700);
  background: var(--color-accent-50);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
}

.hero__microtrust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.hero__microtrust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__microtrust svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex: none;
}

@media only screen and (max-width: 767px) {
	.hero--home {
		padding-top: 3rem !important;
	}
}

.abt__visual {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.abt__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.abt__visual-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}
.abt__visual-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}
.abt__visual-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-invert);
}
.abt__visual-stat {
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-radius: var(--radius-md);
}
.abt__visual-value {
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.abt__visual-label {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

/* Component — bento */
/* Desktop base: 6-col bento with mixed spans; collapses <=1024px (responsive.css). */
.bento {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bento__tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  grid-column: span 2;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}
.bento__tile--wide {
  grid-column: span 4;
}
.bento__tile--full {
  grid-column: span 6;
}
.bento__tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.bento__tile--accent {
  background: var(--color-primary);
  color: var(--color-text-invert);
  border-color: transparent;
}
.bento__tile--accent .bento__title {
  color: var(--color-text-invert);
}
.bento__tile--accent .bento__text {
  color: color-mix(in srgb, var(--color-white) 78%, transparent);
}
.bento__tile--accent::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  z-index: -1;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-accent) 55%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.bento__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
.bento__tile--accent .bento__icon {
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  color: var(--color-white);
}
.bento__title {
  font-size: var(--fs-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.bento__text {
  color: var(--color-text-muted);
}
.bento__metric {
  margin-top: auto;
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-accent-700);
}
.bento__tile--accent .bento__metric {
  color: var(--color-white);
}
.bento__link {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-700);
}
.bento__tile--accent .bento__link {
  color: var(--color-white);
}

/* Component — CTA */
.cta {
  background: var(--color-primary);
  color: var(--color-text-invert);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.cta--accent {
  background: var(--color-accent-700);
}
.cta--subtle {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.cta:not(.cta--subtle) .btn--ghost {
  color: var(--color-text-invert);
  border-color: color-mix(in srgb, var(--color-white) 45%, transparent);
  background: transparent;
}
.cta:not(.cta--subtle) .btn--ghost:hover {
  color: var(--color-text-invert);
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.cta__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
}
.cta--subtle .cta__eyebrow {
  color: var(--color-accent-700);
}
.cta__title {
  color: inherit;
}
.cta__text {
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
  margin: var(--space-3) auto 0;
  max-width: 60ch;
}
.cta--subtle .cta__text {
  color: var(--color-text-muted);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* Desktop base: text left, actions right; stacks at <=767px (responsive.css). */
.cta--split {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.cta--split .cta__text {
  margin-left: 0;
}
.cta--split .cta__actions {
  margin-top: 0;
  justify-content: flex-end;
  flex: none;
}

/* Component — card */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.card--link {
  cursor: pointer;
}
.card--link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--color-accent) 40%,
    var(--color-border)
  );
}
.card--link:focus-within {
  box-shadow: var(--focus-ring);
}
.card--link .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card--link {
  position: relative;
}

.card--feature {
  background: var(--color-bg-subtle);
  border-color: transparent;
}
.card--accent {
  border-color: color-mix(
    in srgb,
    var(--color-accent) 35%,
    var(--color-border)
  );
}
.card--flat {
  border: 0;
  box-shadow: none;
  background: var(--color-bg-subtle);
}
.card--center {
  text-align: center;
  align-items: center;
}
.card--pad-lg {
  padding: var(--space-6);
}

.card__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
.card__icon svg {
  width: 24px;
  height: 24px;
}
.card__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card__title {
  font-size: var(--fs-xl);
}
.card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.card__link {
  margin-top: auto;
  color: var(--color-accent-700);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.card--link:hover .card__link {
  color: var(--color-accent);
}
/* Arrow in a card link nudges right on card hover. */
.card__link svg {
  transition: transform var(--transition-base);
}
.card--link:hover .card__link svg {
  transform: translateX(4px);
}

/* Section — „Über uns" page body (.abschnitt-page-body) Numbered editorial cards. Scoped ONLY to this section so the site-wide .card component and every other page stay untouched. Card numbers are generated with a CSS counter — no markup needed, so adding/removing cards renumbers automatically. */

/* Lock to three equal columns on desktop and start the card counter. */
.abschnitt-page-body .grid--auto {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: pb-card;
}

/* Card shell — count each card, add room for the ghost number, and
   clip the top accent rule to the rounded corners. */
.abschnitt-page-body .card {
  counter-increment: pb-card;
  position: relative;
  padding-top: var(--space-6);
  overflow: hidden;
}

/* Short accent rule across the top of each card; grows full-width on hover. */
.abschnitt-page-body .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

/* Large, faint ghost numeral (01, 02, 03) sitting above each card title. */
.abschnitt-page-body .card__title {
  letter-spacing: -0.01em;
  line-height: var(--line-tight);
}
.abschnitt-page-body .card__title::before {
  content: counter(pb-card, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--color-accent) 26%, transparent);
}

/* Always-on craft: these cards aren't links, but a subtle lift signals polish. */
.abschnitt-page-body .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(
    in srgb,
    var(--color-accent) 40%,
    var(--color-border)
  );
}
.abschnitt-page-body .card:hover::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .abschnitt-page-body .card:hover {
    transform: none;
  }
  .abschnitt-page-body .card::after {
    transition: none;
  }
}

/* Section — Referenzen „Woran wir Erfolg messen" (light) Elevated metric cards on the standard light background: an accent icon chip plus a short bottom accent rule that extends on hover ("measured" indicator). Scoped to the section so the site-wide .card component and other pages stay untouched. */
/* Accent icon chip (matches the theme's other light-theme icon chips). */
.measure-card__icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
/* Signature: a short accent rule pinned to the card's bottom edge that
   extends to full width on hover — the "measured" indicator. */
.measure-card__rule {
  margin-top: auto;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}
.abschnitt-referenzen-intro .card:hover {
  transform: translateY(-4px);
  border-color: color-mix(
    in srgb,
    var(--color-accent) 40%,
    var(--color-border)
  );
  box-shadow: var(--shadow-md);
}
.abschnitt-referenzen-intro .card:hover .measure-card__rule {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .abschnitt-referenzen-intro .card:hover {
    transform: none;
  }
  .measure-card__rule {
    transition: none;
  }
}

/* Component — icon lists */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}
.icon-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-text);
  margin: 0;
}
.icon-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.icon-list--check svg {
  color: var(--color-success);
}
.icon-list--cross svg {
  color: var(--color-error);
}
.icon-list--neutral svg {
  color: var(--color-accent-700);
}

/* Contact section — elevated contact rows + accent-chip checkmarks. */
.abschnitt-kontakt .icon-list--neutral {
  gap: var(--space-4);
}
.abschnitt-kontakt .icon-list--neutral > li {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
.abschnitt-kontakt .icon-list--neutral > li:hover {
  border-color: color-mix(
    in srgb,
    var(--color-accent) 45%,
    var(--color-border)
  );
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.abschnitt-kontakt .icon-list--neutral > li > svg {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 12px;
  margin-top: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
  color: var(--color-accent-700);
}
.abschnitt-kontakt .icon-list--neutral strong {
  color: var(--color-primary);
}
.abschnitt-kontakt .icon-list--neutral a {
  color: var(--color-accent-700);
  font-weight: var(--font-weight-semibold);
}
.abschnitt-kontakt .icon-list--neutral a:hover {
  color: var(--color-accent);
}
.abschnitt-kontakt .icon-list--check {
  gap: var(--space-3);
}
.abschnitt-kontakt .icon-list--check > li > svg {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 5px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg));
  color: var(--color-accent-700);
}

.pros-cons {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr 1fr;
} /* stacks at <=767px */

.pros-cons__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.pros-cons__title svg {
  width: 24px;
  height: 24px;
}

/* Component — feature grid */
.feature-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
.feature__title {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.feature__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Component — steps */
/* Desktop base: multi-column with stacked items; single column at <=767px (responsive.css). */
.steps {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.steps__num {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-invert);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-lg);
  transition: transform var(--transition-base);
}
/* Sanftes Hervorheben der Nummer beim Hover über den Schritt (Home + Service). */
.steps__item:hover .steps__num {
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .steps__item:hover .steps__num {
    transform: none;
  }
}
.steps__title {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.steps__text {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
}
/* Verbindungslinie zwischen den nummerierten Schritten (nur Desktop, wo alle
   Schritte in einer Reihe liegen). Verläuft auf Höhe der Nummern-Kreise. */
@media (min-width: 1024px) {
  .steps__item {
    position: relative;
  }
  .steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(44px + var(--space-3));
    right: calc(-1 * var(--space-3));
    height: 2px;
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
    z-index: 0;
  }
  .steps__num {
    position: relative;
    z-index: 1;
  }
}

/* Component — stats */
.stats {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  text-align: center;
}
.stat__value {
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: var(--space-2);
  color: #8292a9;
  font-size: var(--fs-sm);
}
.section--primary .stat__value {
  color: var(--color-text-invert);
}
.section--primary .stat__label {
  color: color-mix(in srgb, var(--color-white) 68%, transparent);
}

/* Kennzahlen-Band — shared stats section (.abschnitt-kennzahlen). Same markup is reused across the home + leistung pages; style the recurring section type here once, in one common place. */
.abschnitt-kennzahlen .stats {
  gap: var(--space-7) var(--space-6);
}

/* Component — testimonials */
.testimonials {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.testimonial {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.testimonial__quote {
  font-size: var(--fs-lg);
  color: var(--color-text);
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto; /* an Kartenunterkante schieben (gleiche Höhe je Reihe) */
  padding-top: var(
    --space-4
  ); /* Mindestabstand zum Zitat, auch bei langem Text */
}
.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.testimonial__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.testimonial__role {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
/* Dunkles Testimonial-Band: hebt Social Proof premium hervor und gibt der
   Startseite mittig einen dunklen Anker (Rhythmus zw. Kennzahlen & CTA). */
.abschnitt-testimonials {
  background:
    radial-gradient(
      60% 80% at 80% 0%,
      color-mix(in srgb, var(--color-accent) 12%, transparent),
      transparent 70%
    ),
    var(--color-primary);
}
.abschnitt-testimonials .section-title {
  color: var(--color-white);
}
.abschnitt-testimonials .testimonial {
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 12%, transparent);
}
.abschnitt-testimonials .testimonial__quote {
  color: color-mix(in srgb, var(--color-white) 92%, transparent);
}
/* Dekoratives Anführungszeichen als Akzent. */
.abschnitt-testimonials .testimonial__quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.25rem;
  line-height: 0.7;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.abschnitt-testimonials .testimonial__name {
  color: var(--color-white);
}
.abschnitt-testimonials .testimonial__role {
  color: color-mix(in srgb, var(--color-white) 62%, transparent);
}

/* Component — trust bar */
.trust-bar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  ); /* desktop base; shrinks <=1024px */
}

.trust-bar__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.trust-bar__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}
.trust-bar__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trust-bar__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.trust-bar__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* /preise: render the shared trust-bar as a dark strip (scoped to this page's
   template so other pages' trust-bars stay light). Mirrors the dark item
   treatment used in .abschnitt-integration. */
.page-template-template-preise .abschnitt-vertrauen-und {
  background: var(--color-primary);
  color: var(--color-text-invert);
}
.page-template-template-preise .abschnitt-vertrauen-und .trust-bar__item {
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
}
.page-template-template-preise .abschnitt-vertrauen-und .trust-bar__icon {
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-white));
  color: var(--color-primary);
}
.page-template-template-preise .abschnitt-vertrauen-und .trust-bar__label {
  color: var(--color-white);
}
.page-template-template-preise .abschnitt-vertrauen-und .trust-bar__text {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

/* Component — logo cloud */
.logo-cloud__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto var(--space-6);
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}
.logo-cloud__label::before,
.logo-cloud__label::after {
  content: "";
  flex: 0 0 auto;
  height: 1px;
  width: clamp(24px, 8vw, 72px);
  background: currentColor;
  opacity: 0.3;
}
/* Endless marquee: viewport clips, track carries two identical groups and
   scrolls exactly one group-width (-50%) so the loop is seamless — no reset,
   no gap, no buffering. Edges softened with a fade mask. */
.logo-cloud__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.logo-cloud__track {
  display: flex;
  width: max-content;
  animation: logo-cloud-scroll 60s linear infinite;
  will-change: transform;
}
/* Pause the strip while the visitor hovers (or tabs into) it. */
.logo-cloud__marquee:hover .logo-cloud__track,
.logo-cloud__marquee:focus-within .logo-cloud__track {
  animation-play-state: paused;
}
/* No gap/padding on the group: even spacing comes entirely from the item
   (logo → separator → next logo), so groups sit flush and the whole track
   reads as one continuous strip rather than repeated blocks. */
.logo-cloud__grid {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
@keyframes logo-cloud-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-cloud__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-cloud__grid[aria-hidden="true"] {
    display: none;
  }
  .logo-cloud__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-6);
  }
  .logo-cloud__item {
    gap: 0;
    padding-inline-end: 0;
  }
  .logo-cloud__item::after {
    display: none;
  }
}

/* Fixed-width slot with the logo centred, so every item is the same width
   regardless of the logo's own aspect ratio or internal whitespace. */
.logo-cloud__item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /*   width: 190px; */
  padding: 0 3rem;
}
/* Star separator sits exactly on the boundary between two slots, so it always
   looks centred between logos. */
.logo-cloud__item::after {
  content: "\2726";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-accent) 55%, var(--color-white));
}
/* Text wordmarks (same font/weight/colour as the original logo SVGs). */
.logo-cloud__logo {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-primary);
  opacity: 0.65;
  transition:
    opacity var(--transition-base),
    color var(--transition-base);
}
.logo-cloud__logo:hover {
  opacity: 1;
}

/* Dark logo strip (homepage "wir-arbeiten"): a calm dark band that flows into
   the dark stats section below. Brand logos render as soft white silhouettes
   and light up in full colour on hover. */
.abschnitt-wir-arbeiten {
  background:
    radial-gradient(
      70% 130% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 12%, transparent),
      transparent 70%
    ),
    var(--color-primary);
  color: var(--color-text-invert);
}
.abschnitt-wir-arbeiten .logo-cloud__label {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}
.abschnitt-wir-arbeiten .logo-cloud__logo {
  color: var(--color-white);
  opacity: 0.55;
}
/* On the dark band, hover brings the wordmark to full strength. */
.abschnitt-wir-arbeiten .logo-cloud__logo:hover {
  opacity: 1;
}

/* Section — About (homepage, above the bento grid) Two columns: editorial text left, principles card right. */
/* About (PREVIOUS version — CSS kept so the commented-out markup still works if re-enabled) */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-7) var(--space-8);
  align-items: center;
}
.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.about__card {
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.about__card-title {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
@media (max-width: 1024px) {
  .about {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* About — NEW (reference redesign): image left, content right. Uses the standard .section__kicker + .section-title + .lead, so type sizes match the rest of the site. */
.abt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.abt__media {
  position: relative;
  isolation: isolate;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-4);
}
/* About image (marketing-agency picture in the about media). */
.abt__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.25;
}
.hero__float--rating {
  top: 20%;
  right: -2%;
  animation: hero-float-y 4s ease-in-out infinite;
}
.hero__float--insights {
  bottom: 12%;
  left: -5%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  animation: hero-float-y 5.5s ease-in-out infinite;
  animation-delay: -1.4s;
}
@keyframes hero-float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__float--rating,
  .hero__float--insights {
    animation: none;
  }
}
.hero__float-strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: var(--fs-sm);
}
.hero__float-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-white);
  flex: 0 0 auto;
}
.hero__spark {
  position: absolute;
  color: var(--color-accent);
  opacity: 0.55;
  z-index: 1;
}
.abt__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
/* About key points — accent-check pills that slide on hover. */
.abt__points {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-3);
}
.abt__point {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
.abt__point:hover {
  transform: translateX(5px);
  border-color: color-mix(
    in srgb,
    var(--color-accent) 50%,
    var(--color-border)
  );
  box-shadow: var(--shadow-sm);
}
.abt__point strong {
  color: var(--color-primary);
}
.abt__point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
  color: var(--color-accent-700);
}
.abt__rings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-2);
}
.abt__ring {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ring {
  position: relative;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring__track {
  fill: none;
  stroke: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg));
  stroke-width: 3;
}
.ring__value {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.abt__ring-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--line-snug);
}
.abt__cta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.abt__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  transition: color var(--transition-base);
}
.abt__phone:hover {
  color: var(--color-accent-700);
}
.abt__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  color: var(--color-accent-700);
  flex: 0 0 auto;
  transform-origin: center;
}
.abt__phone-num {
  font-size: var(--fs-lg);
}
/* Ringing shake while hovering the number or the icon. */
.abt__phone:hover .abt__phone-icon {
  animation: abt-phone-ring 0.7s ease-in-out infinite;
}
@keyframes abt-phone-ring {
  0%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(-16deg);
  }
  30% {
    transform: rotate(13deg);
  }
  45% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(-4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .abt__phone:hover .abt__phone-icon {
    animation: none;
  }
}
@media (max-width: 1024px) {
  .abt {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Testimonials — NEW (reference redesign). Standard .section__kicker + .section-title keep type sizes consistent with the site. */
.tst__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}
.tst__head-title {
  margin-top: var(--space-3);
}
.abschnitt-testimonials .section__kicker {
  color: color-mix(in srgb, var(--color-accent) 55%, var(--color-white));
}
.tst__intro {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  font-style: italic;
  color: #afb6c1;
}
/* Track first, arrows centred underneath it. */
.tst__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.tst__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base),
    transform var(--transition-base);
}
/* Both start white; the hovered/active/focused one turns green. */
.tst__nav-btn:not(:disabled):hover,
.tst__nav-btn:not(:disabled):active,
.tst__nav-btn:not(:disabled):focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-2px);
}
.tst__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tst__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-4) var(--space-2);
  scrollbar-width: none;
}
.tst__track::-webkit-scrollbar {
  display: none;
}
/* Three cards per view on desktop, two on tablet, one below 768px. */
.tst-card {
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
  scroll-snap-align: start;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.tst-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.tst-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.tst-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  flex: 0 0 auto;
}
.tst-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tst-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
  margin-bottom: var(--space-1);
}
.tst-card__stars svg {
  width: 16px;
  height: 16px;
}
.tst-card__name {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.tst-card__role {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.tst-card__quote {
  color: var(--color-text-muted);
  line-height: var(--line-base);
}
.tst-card__mark {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.tst-card__mark svg {
  width: 34px;
  height: 34px;
}
@media (max-width: 1024px) {
  .tst-card {
    flex-basis: calc((100% - var(--space-6)) / 2);
  }
}
@media (max-width: 900px) {
  .tst__head {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .tst-card {
    flex-basis: 100%;
  }
}

/* Dark integration section (software pages) — full-width, dark band with the platform trust-bar rendered as glassy tiles. */
.abschnitt-integration {
  background:
    radial-gradient(
      55% 90% at 85% 0%,
      color-mix(in srgb, var(--color-accent) 14%, transparent),
      transparent 70%
    ),
    var(--color-primary);
  color: var(--color-text-invert);
}
.abschnitt-integration :where(h2, h3) {
  color: var(--color-white);
}
.abschnitt-integration p {
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
}
.abschnitt-integration .section__kicker {
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-white));
}
.abschnitt-integration .trust-bar__item {
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
}
.abschnitt-integration .trust-bar__icon {
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-white));
  color: var(--color-primary);
}
.abschnitt-integration .trust-bar__label {
  color: var(--color-white);
}
.abschnitt-integration .trust-bar__text {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}
/* Two sibling columns: content wrapper on the left, trust-bar (stacked) right. */
.abschnitt-integration .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-6) var(--space-8);
  align-items: start;
}
.abschnitt-integration .container > * + * {
  margin-top: 0; /* spacing comes from grid gap, not .flow */
}
.abschnitt-integration .trust-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (max-width: 860px) {
  .abschnitt-integration .container {
    grid-template-columns: 1fr;
  }
}

/* Städte — dark "why work with us" band with elevated feature tiles. Scoped via --dark so branchen/homepage feature grids stay light. */
.abschnitt-leistungen--dark {
  background:
    radial-gradient(
      60% 95% at 12% 0%,
      color-mix(in srgb, var(--color-accent) 16%, transparent),
      transparent 72%
    ),
    var(--color-primary);
  color: var(--color-text-invert);
}
.abschnitt-leistungen--dark :where(h2) {
  color: var(--color-white);
}
.abschnitt-leistungen--dark .section__kicker {
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-white));
}
.abschnitt-leistungen--dark .feature {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}
.abschnitt-leistungen--dark .feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-white) 9%, transparent);
  box-shadow: var(--shadow-lg);
}
.abschnitt-leistungen--dark .feature__icon {
  background: color-mix(in srgb, var(--color-accent) 90%, var(--color-white));
  color: var(--color-primary);
}
.abschnitt-leistungen--dark .feature__title {
  color: var(--color-white);
}
.abschnitt-leistungen--dark .feature__text {
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

/* Wissen — long-form article body as an editorial layout. Sticky topic rail (left) + readable prose column (right) so the content fills the width without collapsing into a lonely column. Headings sit on a hairline, sub-topics on accent spines, and step lists render as numbered accent chips. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 720px);
  gap: var(--space-6) var(--space-8);
  justify-content: center;
  align-items: start;
}
.article-rail {
  position: sticky;
  top: calc(var(--header-h, 72px) + var(--space-6));
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-4);
}
.article-rail__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.article-rail__dek {
  margin-top: var(--space-3);
  font-size: var(--fs-xl);
  line-height: var(--line-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.article-prose {
  min-width: 0;
  font-size: var(--fs-lg);
}
.article-prose > h2 {
  font-size: var(--fs-h3);
  line-height: var(--line-tight);
  letter-spacing: -0.015em;
  color: var(--color-primary);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.article-prose > h2:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.article-prose h3 {
  font-size: var(--fs-lg);
  color: var(--color-primary);
  padding-left: var(--space-4);
  border-left: 3px solid
    color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.article-prose p {
  color: var(--color-text-muted);
  line-height: var(--line-base);
}
.article-prose strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
/* Unordered lists → accent square markers. */
.article-prose ul:not([class]) {
  list-style: none;
  padding-left: 0;
}
.article-prose ul:not([class]) > li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}
.article-prose ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
}
/* Ordered lists → numbered accent chips (the 30-/90-day plans). */
.article-prose ol:not([class]) {
  list-style: none;
  padding-left: 0;
  counter-reset: article-step;
}
.article-prose ol:not([class]) > li {
  position: relative;
  padding-left: calc(var(--space-7) + var(--space-1));
  min-height: 32px;
  padding-top: 4px;
  color: var(--color-text-muted);
  counter-increment: article-step;
}
.article-prose ol:not([class]) > li::before {
  content: counter(article-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-700);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-sm);
}
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .article-rail {
    position: static;
    border-left: 0;
    border-top: 2px solid var(--color-accent);
    padding-left: 0;
    padding-top: var(--space-3);
  }
}

/* Wissen — "Hebel"/items as a card grid (grid version of a content-heavy article block). Numbered badge overhangs each tile. */
.hebel-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 4rem;
}
@media (max-width: 1024px) {
  .hebel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .hebel-grid {
    grid-template-columns: 1fr;
  }
}
.abschnitt-hebel .section__head {
  margin-inline: auto;
  text-align: center;
}
.abschnitt-hebel .section__head > * {
  margin-inline: auto;
}
.hebel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.hebel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(
    in srgb,
    var(--color-accent) 40%,
    var(--color-border)
  );
}
.hebel-card__num {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-sm);
}
.hebel-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--line-snug);
}
.hebel-card__text {
  color: var(--color-text-muted);
  line-height: var(--line-base);
}

/* Component — FAQ accordion */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-size: var(--fs-lg);
}
.faq__icon {
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}
.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
}
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}
.faq__answer[data-open="true"] {
  grid-template-rows: 1fr;
}
.faq__answer-inner {
  overflow: hidden;
}
.faq__answer p {
  padding: 0 var(--space-5) var(--space-5);
  margin: 0;
}

/* Component — breadcrumb */
.breadcrumb {
  padding-block: var(--space-4);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb__sep {
  color: var(--color-border);
}
.breadcrumb__link:hover {
  color: var(--color-accent-700);
}
.breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* Yoast breadcrumb output — ls_breadcrumb('breadcrumb') wraps yoast_breadcrumb()
   in <nav class="breadcrumb">. Yoast emits a flat run of <span>/<a> nodes (last
   crumb = .breadcrumb_last / [aria-current]); these rules style that markup to
   match the design above. Also covers the no-Yoast fallback in ls_breadcrumb(). */
.breadcrumb .container,
.breadcrumb .container > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumb a {
  color: #8291a7;
  text-decoration: none;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--color-accent-700);
  text-decoration: underline;
}
/* stylelint-disable-next-line selector-class-pattern -- Yoast emits .breadcrumb_last */
.breadcrumb .breadcrumb_last,
.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}
.breadcrumb .ls-breadcrumb__sep {
  color: var(--color-border);
  margin: 0;
}

/* Component — pricing */
.pricing {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch; /* all price-boxes in a row share the tallest one's height */
}
.price-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.price-box--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  position: relative;
}
.price-box__badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  background: var(--color-accent);
  color: var(--color-text-invert);
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.price-box__name {
  font-size: var(--fs-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.price-box__price {
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.price-box__period {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.price-box__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.price-box__features li {
  display: flex;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
/* Pin each plan's button to the bottom so buttons align across equal-height boxes. */
.price-box .btn {
  margin-top: auto;
}

/* Component — tables */
/* Dark "Alternativen" section (software pages) — glassy cards on a dark band. */
.abschnitt-alt {
  background:
    radial-gradient(
      55% 90% at 12% 0%,
      color-mix(in srgb, var(--color-accent) 14%, transparent),
      transparent 70%
    ),
    var(--color-primary);
  color: var(--color-text-invert);
}
.abschnitt-alt :where(h2, h3) {
  color: var(--color-white);
}
.abschnitt-alt .section__kicker {
  color: color-mix(in srgb, var(--color-accent) 80%, var(--color-white));
}
.abschnitt-alt .card {
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
}
.abschnitt-alt .card__title {
  color: var(--color-white);
}
.abschnitt-alt .card__text {
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}
.abschnitt-alt .card__link {
  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-white));
}
.abschnitt-alt .card--link:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-white) 9%, transparent);
  box-shadow: var(--shadow-lg);
}

/* Modern table: rounded, elevated container that clips the table corners. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-bg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  color: var(--color-text);
}
.table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
}
.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.table thead th {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: color-mix(
    in srgb,
    var(--color-accent) 8%,
    var(--color-bg-subtle)
  );
  border-bottom: 1px solid var(--color-border);
}
.table tbody tr {
  transition: background var(--transition-fast);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table th[scope="row"] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.table .num,
.table [data-align="end"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table--striped tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-bg-subtle) 55%, var(--color-bg));
}
.table--hover tbody tr:hover {
  background: var(--color-accent-50);
}
/* Bordered variant → subtle vertical grid lines (outer frame comes from the wrap). */
.table--bordered th,
.table--bordered td {
  border-right: 1px solid var(--color-border);
}
.table--bordered th:last-child,
.table--bordered td:last-child {
  border-right: 0;
}
.table--compact th,
.table--compact td {
  padding: var(--space-2) var(--space-3);
}

.table .is-highlight {
  background: var(--color-accent-50);
}
.table thead .is-highlight {
  background: color-mix(
    in srgb,
    var(--color-accent) 14%,
    var(--color-bg-subtle)
  );
}

.table .cell-yes {
  color: var(--color-success-700);
  font-weight: var(--font-weight-semibold);
}
.table .cell-no {
  color: var(--color-text-muted);
}

/* Component — alerts */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.alert__icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
}
.alert__icon svg {
  width: 100%;
  height: 100%;
}
.alert__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.alert__title {
  font-weight: var(--font-weight-semibold);
  color: inherit;
  font-size: var(--fs-base);
}
.alert__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}
.alert__close {
  flex: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  line-height: 0;
}
.alert__close:hover {
  color: var(--color-text);
  background: var(--color-bg-muted);
}
.alert__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.alert--info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  border-left-color: var(--color-info);
}
.alert--info .alert__icon {
  color: var(--color-info-700);
}

.alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  border-left-color: var(--color-success);
}
.alert--success .alert__icon {
  color: var(--color-success-700);
}

.alert--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  border-left-color: var(--color-warning);
}
.alert--warning .alert__icon {
  color: var(--color-warning-700);
}

.alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  border-left-color: var(--color-error);
}
.alert--error .alert__icon {
  color: var(--color-error-700);
}

/* Component — figures */
.figure {
  margin: 0;
}
.figure-wide {
  margin: 0;
}
.figure-wide img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 880px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
}
.figure-wide figcaption,
.figure figcaption {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Component — forms */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 560px;
}
.form--wide {
  max-width: 760px;
}
.form__row {
  display: grid;
  gap: var(--space-4);
}
/* Desktop base: multi-column rows; stack at <=767px (responsive.css). */
.form__row--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.form__row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form__legend {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  padding: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  font-size: var(--fs-sm);
}
.field__label .req {
  color: var(--color-error);
  margin-left: 2px;
}

.field__control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
.field__control::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.field__control:hover {
  border-color: var(--color-text-muted);
}
.field__control:focus {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring-accent);
  outline: none;
}
.field__control:disabled {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.field__control[aria-invalid="true"],
.field__control:user-invalid {
  border-color: var(--color-error);
}
.field__control[aria-invalid="true"]:focus,
.field__control:user-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 22%, transparent);
}
.field--valid .field__control {
  border-color: var(--color-success);
}

.field__error {
  font-size: var(--fs-sm);
  color: var(--color-error);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.field__error[hidden] {
  display: none;
}
.field__hint {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

textarea.field__control {
  min-height: 140px;
  resize: vertical;
}

select.field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px;
}

.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .field__control {
  border-radius: 0;
}
.input-group > :first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.input-group > :last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.input-group__addon {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.input-group .field__control + .input-group__addon,
.input-group .input-group__addon + .field__control {
  border-left: 0;
}

.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
}
.choice input[type="checkbox"],
.choice input[type="radio"] {
  appearance: auto;
  accent-color: var(--color-accent);
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  flex: none;
  cursor: pointer;
}
.choice input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.choice--card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
}
.choice--card:hover {
  border-color: var(--color-text-muted);
}
.choice--card:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-50);
}

.form__consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.form__consent a {
  font-weight: var(--font-weight-medium);
}

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  left: -9999px;
}

.form__status {
  font-size: var(--fs-sm);
}
.form__status--ok {
  color: var(--color-success-700);
}
.form__status--err {
  color: var(--color-error-700);
}

/* Utilities — spacing */
.mt-0 {
  margin-top: 0;
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-0 {
  margin-bottom: 0;
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.gap-2 {
  gap: var(--space-2);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-6 {
  gap: var(--space-6);
}
.flow > * + * {
  margin-top: var(--space-4);
}
.flow-lg > * + * {
  margin-top: var(--space-6);
}

/* Utilities — typography */
.text-xs {
  font-size: var(--fs-xs);
}
.text-sm {
  font-size: var(--fs-sm);
}
.text-lg {
  font-size: var(--fs-lg);
}
.text-xl {
  font-size: var(--fs-xl);
}

.display {
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.25rem);
  line-height: var(--line-tight);
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  line-height: var(--line-base);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.text-muted {
  color: var(--color-text-muted);
}
.text-accent {
  color: var(--color-accent-700);
}
.text-invert {
  color: var(--color-text-invert);
}
.text-primary {
  color: var(--color-primary);
}

.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.max-prose {
  max-width: 65ch;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Utilities — visibility */
.hidden {
  display: none !important;
}
.is-clipped {
  overflow: hidden;
}
[hidden] {
  display: none !important;
}

/* Production guards (added in hardening pass) */
/* Prevent horizontal scroll without breaking the sticky header:
   overflow-x:clip propagates to the viewport and does NOT create a
   scroll container (unlike overflow:hidden). */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
}

/* Floating Action Buttons (FAB) — Kontakt + Nach-oben Nur auf der Startseite eingebunden (index.html). */
.fab-stack {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
}
.fab {
  position: relative;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24);
  transition:
    transform 0.28s var(--ease-emphasized),
    box-shadow 0.28s ease,
    background-color 0.28s ease;
}
.fab svg {
  transition: transform 0.28s var(--ease-emphasized);
}
.fab:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.32);
}
.fab:active {
  transform: translateY(-1px) scale(1.02);
}
.fab:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.fab--mail {
  background: var(--color-accent);
}
.fab--mail:hover {
  background: var(--color-accent-700);
}
.fab--mail:hover svg {
  transform: translateY(-1px) rotate(-8deg);
}

/* Light ring lifts the dark button off dark sections, where its navy background
   would otherwise merge into the band behind it. Overrides .fab's border: 0. */
.fab--top {
  background: var(--color-primary);
  border: 1px solid #e2e8f029;
}
.fab--top:hover svg {
  transform: translateY(-3px);
}

/* Nach-oben-Button erst nach etwas Scrollen einblenden (Klasse via JS). */
.fab--top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
}
.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Label, das beim Hover nach links herausgleitet. */
.fab[data-fab-label]::after {
  content: attr(data-fab-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.fab[data-fab-label]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Dezenter Aufmerksamkeits-Puls am Kontakt-Button. */
.fab--mail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
  animation: fab-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 18px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab,
  .fab svg {
    transition: none;
  }
  .fab:hover {
    transform: none;
  }
  .fab--mail:hover svg,
  .fab--top:hover svg {
    transform: none;
  }
  .fab--mail::before {
    animation: none;
  }
  .fab[data-fab-label]::after {
    transition: opacity 0.2s ease;
    transform: translateY(-50%);
  }
  .fab[data-fab-label]:hover::after {
    transform: translateY(-50%);
  }
}
/* mail-agentur.de — responsive.css  (DESKTOP-FIRST) Base styles in style.css target laptop/desktop (>1024px). This file only scales the layout DOWN: @media (max-width: 1024px)  → tablet AND mobile (shared) @media (max-width: 767px)   → mobile only (overrides the 1024 block) No min-width/desktop media queries. Load AFTER style.css. */

/* TABLET & MOBILE — up to 1024px */
@media (max-width: 1024px) {
  /* Col-span grids (kontakt layout) stack to one column; card grids (.grid--auto)
     keep their own auto-fit, section grids keep their own columns. */
  .grid:has(> [class*="col-"]) {
    grid-template-columns: 1fr;
  }
  .col-3,
  .col-4,
  .col-6,
  .col-8,
  .col-9 {
    grid-column: auto;
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento__tile,
  .bento__tile--wide,
  .bento__tile--full {
    grid-column: auto;
  }

  .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .abschnitt-services .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .abschnitt-page-body .grid--auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__inner:has(.hero__media) {
    grid-template-columns: 1fr;
  }

  /* Switch from desktop nav to the full-width mobile drawer */
  .nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .mobile-nav {
    display: flex;
  }
  .mobile-nav__overlay {
    display: block;
  }

  /* Footer: brand spans full width above the three link groups */
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__brand {
    grid-column: 1 / -1;
    max-width: 560px;
  }

  /* Editorial intro/problem/solution sections: single column on smaller screens */
  .abschnitt-einleitung > .container--narrow,
  .abschnitt-problem > .container--narrow,
  .abschnitt-loesung > .container--narrow {
    grid-template-columns: 1fr;
  }

  /* Content + image split stacks to one column, image first */
  .page-split {
    grid-template-columns: 1fr;
  }
  .page-split__media {
    position: static;
    order: -1;
  }
}

/* MOBILE ONLY — up to 767px */
@media (max-width: 767px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .trust-bar {
    grid-template-columns: 1fr;
  }
  .abschnitt-services .grid {
    grid-template-columns: 1fr;
  }
  .abschnitt-page-body .grid--auto {
    grid-template-columns: 1fr;
  }

  /* Stacking for components that share desktop+tablet layout */
  .cta--split {
    display: block;
    text-align: left;
  }
  .cta--split .cta__actions {
    margin-top: var(--space-6);
    justify-content: flex-start;
  }
  .pros-cons {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .steps__item {
    flex-direction: row;
  }
  .form__row--2,
  .form__row--3 {
    grid-template-columns: 1fr;
  }

  /* Footer link groups: two-up on phones */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .hide-mobile {
    display: none !important;
  }
}

/* SMALL PHONES — up to 600px */
@media (max-width: 600px) {
  .cta__actions .btn {
    width: 100%;
  }
}

/* WPForms — Kontaktformular styles */
#wpforms-65 .wpforms-field input,
#wpforms-65 .wpforms-field textarea,
#wpforms-65 .wpforms-field select {
  border-color: #e2e8f0;
  border-radius: 10px;
  border-width: 1px;
  box-shadow: none;
  outline: none;
}

#wpforms-65 .wpforms-field input:focus,
#wpforms-65 .wpforms-field textarea:focus,
#wpforms-65 .wpforms-field select:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 24%, transparent);
  outline: none;
}
/* Textarea sizing to match textarea.field__control. */
#wpforms-65 .wpforms-field-textarea textarea {
  resize: vertical;
}

/* Submit button */
#wpforms-65 .wpforms-submit-container,
div.wpforms-container-full:not(:empty) {
  margin: 0 !important;
  padding: 0;
}
#wpforms-65 button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 2rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;
  color: #ffffff;
  background: #15803d;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition:
    background 200ms cubic-bezier(0.2, 0, 0, 1),
    color 200ms cubic-bezier(0.2, 0, 0, 1),
    border-color 200ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
    transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
#wpforms-65 button.wpforms-submit:hover {
  background: #166534;
  color: #ffffff;
}
#wpforms-65 button.wpforms-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 35%, transparent);
}
#wpforms-65 button.wpforms-submit:active {
  transform: translateY(1px);
}
#wpforms-65 button.wpforms-submit[disabled],
#wpforms-65 button.wpforms-submit[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.abschnitt-artikel__band--dark {
  color: var(--color-text-invert);
  background:
    radial-gradient(
      70% 90% at 100% 0%,
      color-mix(in srgb, var(--color-accent) 20%, transparent),
      transparent 60%
    ),
    var(--color-primary);
}
.article-prose--invert {
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
}
.article-prose--invert > h2 {
  color: var(--color-white);
  border-top-color: color-mix(in srgb, var(--color-white) 16%, transparent);
}
.article-prose--invert h3 {
  color: var(--color-white);
  border-left-color: var(--color-accent);
}
.article-prose--invert p {
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
.article-prose--invert strong {
  color: var(--color-white);
}
.article-prose--invert ul:not([class]) > li,
.article-prose--invert ol:not([class]) > li {
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
.article-prose--invert ul:not([class]) > li::before {
  background: var(--color-accent);
}
.article-prose--invert ol:not([class]) > li::before {
  background: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: var(--color-white);
}
/* Numbered-circle design for the dark band (plan-split__list) ordered list —
   mirrors .article-prose ol:not([class]); the rule above supplies invert colors. */
.article-prose--invert ol:not([class]) {
  list-style: none;
  padding-left: 0;
  counter-reset: article-step;
}
.article-prose--invert ol:not([class]) > li {
  position: relative;
  padding-left: calc(var(--space-7) + var(--space-1));
  min-height: 32px;
  padding-top: 4px;
  counter-increment: article-step;
}
.article-prose--invert ol:not([class]) > li::before {
  content: counter(article-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-sm);
}
.plan-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6) var(--space-8);
  align-items: start;
}
.plan-split__list {
  padding-left: var(--space-7);
  border-left: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
}
.article-cta {
  margin-top: var(--space-5);
}
.abschnitt-integration .cta-inline {
  margin-top: 1rem;
}
.abschnitt-artikel__band--dark .alert__title,
.abschnitt-artikel__band--dark .alert__text {
  font-size: var(--fs-base);
}
@media (max-width: 860px) {
  .plan-split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .plan-split__list {
    padding-left: 0;
    border-left: 0;
  }
}