/*
Theme Name:   DigiBasiX Child
Description:  Child-Theme für Twenty Twenty-Five. Designtokens, Typografie und Komponentenstile für DigiBasiX.
Template:     twentytwentyfive
Version:      1.2.0
Author:       DigiBasiX
Text Domain:  digibasix-child
*/

/* ==========================================================================
   Design-Tokens — DigiBasiX (Warm Light)
   ========================================================================== */

:root {

  /* --- Oberflächen -------------------------------------------------------- */
  --bg-0:     #FAF7F2;
  --bg-1:     #FFFFFF;
  --bg-2:     #F4F1EC;
  --bg-3:     #ECE7E0;
  --bg-4:     #E2DCD3;
  --bg-ink:   #2A2E36;
  --bg-ink-2: #1F232A;

  /* --- Strokes ------------------------------------------------------------ */
  --stroke-1: rgba(42, 46, 54, 0.06);
  --stroke-2: rgba(42, 46, 54, 0.12);
  --stroke-3: rgba(42, 46, 54, 0.20);

  /* --- Text --------------------------------------------------------------- */
  --fg-1:        #2A2E36;
  --fg-2:        #5A616D;
  --fg-3:        #8A8780;
  --fg-4:        #B5B0A6;
  --fg-on-ink-1: #F7F4EE;
  --fg-on-ink-2: #9DA4AE;
  --fg-on-accent:#FFFFFF;

  /* --- Markenfarbe: Orange ------------------------------------------------ */
  --brand-orange:        #F58515;
  --brand-orange-strong: #D86A0E;
  --brand-orange-soft:   #F9A24E;
  --brand-orange-tint:   #FCE9D4;
  --brand-orange-wash:   #FDF4EA;

  /* --- Semantisch --------------------------------------------------------- */
  --success: #2E8C58;  --success-tint: #E6F2EC;
  --warning: #B8870C;  --warning-tint: #FBF1D7;
  --danger:  #C7423D;  --danger-tint:  #FBE6E5;
  --info:    #2C6FB6;  --info-tint:    #E4EEF9;

  /* --- Schriften (System-Stacks) ----------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Radien ------------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;

  /* --- Schatten ----------------------------------------------------------- */
  --shadow-1:           0 1px 3px rgba(42, 46, 54, 0.06);
  --shadow-2:           0 4px 16px rgba(42, 46, 54, 0.07), 0 1px 3px rgba(42, 46, 54, 0.04);
  --shadow-3:           0 12px 36px rgba(42, 46, 54, 0.11), 0 3px 8px rgba(42, 46, 54, 0.05);
  --shadow-4:           0 24px 72px rgba(42, 46, 54, 0.15), 0 6px 16px rgba(42, 46, 54, 0.07);
  --shadow-orange-glow: 0 1px 2px rgba(216, 106, 14, 0.20), 0 6px 20px rgba(245, 133, 21, 0.22);

  /* --- Abstände ----------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Motion ------------------------------------------------------------- */
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      300ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);

  /* --- Sektions-Padding --------------------------------------------------- */
  --space-section: 112px;

}

/* ==========================================================================
   Anti-Block-Builder-Artifacts
   ========================================================================== */

/* Kein abschließender Margin in Komponentencontainern */
.db-card > *:last-child,
.db-card-feature > *:last-child,
.db-step > *:last-child,
.db-faq-item > *:last-child {
  margin-bottom: 0 !important;
}

/* Kein führender Margin im ersten Kind */
.db-card > *:first-child,
.db-card-feature > *:first-child,
.db-step > *:first-child {
  margin-top: 0 !important;
}

/* Figure-Margins entfernen */
.wp-block-image {
  margin-block: 0;
}

.wp-block-image figure {
  margin: 0;
}

/* Enge Block-Lücken in Karten */
.db-card.is-layout-flow > * + *,
.db-card-feature.is-layout-flow > * + *,
.db-step.is-layout-flow > * + * {
  margin-block-start: var(--space-3) !important;
}

/* Listen in Karten: sauberer Einzug */
.db-card ul,
.db-card ol {
  padding-left: var(--space-5);
  margin: 0;
}

.db-card li {
  margin-bottom: var(--space-2);
}

.db-card li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Globale Basisstile
   ========================================================================== */

/* Textauswahl */
::selection {
  background-color: var(--brand-orange-tint);
  color: var(--fg-1);
}

/* Focus-Ring */
*:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Layout — Container und Sektionsrhythmus
   ========================================================================== */

.wp-block-group.alignfull {
  padding-inline: clamp(16px, 4vw, 32px);
}

.wp-block-group.alignfull.has-background {
  padding-block: var(--space-section);
}

.wp-block-separator {
  border-color: var(--stroke-1);
  opacity: 1;
  margin-block: 0;
}

/* Erste Sektion: kein Abstand zur Oberkante */
main > .wp-block-group:first-child {
  margin-block-start: 0;
}

/* Trennlinie bei gleichen benachbarten Sektionen */
.wp-block-group.alignfull.has-base-background-color
  + .wp-block-group.alignfull.has-base-background-color {
  border-top: 1px solid var(--stroke-1);
}

/* ==========================================================================
   Typografie
   ========================================================================== */

.wp-block-paragraph {
  max-width: 64ch;
}

.wp-block-heading + .wp-block-paragraph,
.wp-block-heading + .wp-block-list {
  margin-top: var(--space-4);
}

/* H1: maximale Präsenz — SaaS-Display-Niveau */
.wp-block-heading.wp-block-heading[level="1"],
h1.wp-block-heading {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

/* H2 auf Sektionsebene: scharf, präzise */
h2.wp-block-heading {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Technische Labels / Mono-Akzente */
.db-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

/* Sektions-Trennlinie: Hairline per Design-Spec */
.wp-block-group.alignfull.has-base-background-color
  + .wp-block-group.alignfull.has-base-background-color {
  border-top: 1px solid var(--stroke-1);
}

.wp-block-group.alignfull.has-surface-alt-background-color
  + .wp-block-group.alignfull.has-surface-alt-background-color {
  border-top: 1px solid var(--stroke-2);
}

/* ==========================================================================
   Eyebrow / Sektionslabel
   ========================================================================== */

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--space-3);
  line-height: 1.4;
  max-width: none !important;
}

/* ==========================================================================
   Ink-Sektion
   ========================================================================== */

.wp-block-group.has-ink-background-color {
  background-color: var(--bg-ink);
  color: var(--fg-on-ink-1);
  /* 1px Materialkante oben — macht den Hell→Dunkel-Übergang bewusst ohne harte Deko */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}


.wp-block-group.has-ink-background-color :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--fg-on-ink-1);
}

.wp-block-group.has-ink-background-color a {
  color: var(--brand-orange-soft);
  text-decoration-color: transparent;
  transition: color var(--dur-base) var(--ease-standard);
}

.wp-block-group.has-ink-background-color a:hover {
  color: var(--brand-orange);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
  transition:
    background-color var(--dur-base) var(--ease-standard),
    box-shadow       var(--dur-base) var(--ease-standard),
    transform        var(--dur-fast) var(--ease-standard);
}

/* Primary */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  box-shadow: var(--shadow-orange-glow);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--brand-orange-strong);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(216, 106, 14, 0.25), 0 8px 28px rgba(245, 133, 21, 0.28);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
  transform: translateY(0);
}

/* Outline / Secondary */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--fg-1) !important;
  border: 1.5px solid var(--stroke-3) !important;
  box-shadow: none !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--bg-3) !important;
  border-color: var(--fg-3) !important;
}

/* Outline auf Ink-Hintergrund */
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--fg-on-ink-1) !important;
  border-color: rgba(247, 244, 238, 0.25) !important;
}

.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(247, 244, 238, 0.07) !important;
  border-color: rgba(247, 244, 238, 0.45) !important;
}

/* ==========================================================================
   Karte — db-card
   ========================================================================== */

.db-card {
  background-color: var(--bg-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
  transition:
    box-shadow var(--dur-base) var(--ease-standard),
    transform  var(--dur-base) var(--ease-standard);
}

.db-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}

/* Trust-Karten und Karten auf surface-alt: weißer Hintergrund */
.wp-block-group.has-surface-alt-background-color .db-card {
  background-color: var(--bg-1);
}

/* ==========================================================================
   Feature-Karte — db-card-feature
   ========================================================================== */

.wp-block-group.db-card-feature {
  background-color: var(--bg-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition:
    box-shadow var(--dur-base) var(--ease-standard),
    transform  var(--dur-base) var(--ease-standard);
}

.wp-block-group.db-card-feature:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}

/* Orangene Akzentlinie oben */
.wp-block-group.db-card-feature::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background-color: var(--brand-orange);
  border-radius: 2px;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

.wp-block-group.db-card-feature .wp-block-heading {
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg-1) !important;
  margin-bottom: 0 !important;
  line-height: 1.3;
}

.wp-block-group.db-card-feature .wp-block-paragraph {
  color: var(--fg-2) !important;
  font-size: 14.5px !important;
  line-height: 1.65;
  flex-grow: 1;
  max-width: none !important;
  margin-top: var(--space-3) !important;
}

/* ==========================================================================
   Prozess-Schritte — db-step
   ========================================================================== */

.db-step {
  background-color: var(--bg-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-8);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

.db-step-number {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-orange);
  background-color: var(--brand-orange-wash);
  border: 1px solid var(--brand-orange-tint);
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.db-step .wp-block-heading {
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1) !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-3) !important;
  line-height: 1.25;
}

.db-step .wp-block-paragraph {
  font-size: 14.5px !important;
  color: var(--fg-2) !important;
  line-height: 1.65;
  max-width: none !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   FAQ — db-faq-item
   ========================================================================== */

.db-faq-item {
  border-bottom: 1px solid var(--stroke-2);
  padding-block: var(--space-8);
  padding-right: var(--space-2);
}

.db-faq-item:first-child {
  border-top: 1px solid var(--stroke-2);
}

.db-faq-item .wp-block-heading {
  font-size: 18px !important;
  font-weight: 600;
  color: var(--fg-1) !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.db-faq-item .wp-block-paragraph {
  font-size: 15.5px !important;
  color: var(--fg-2) !important;
  line-height: 1.75;
  max-width: 72ch;
  margin-top: var(--space-4) !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Header — Global
   ========================================================================== */

.db-header {
  background-color: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--stroke-1);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Site-Title (Fallback, falls kein Logo gesetzt) */
.db-header .wp-block-site-title a,
.db-header .wp-block-site-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}

.db-header .wp-block-site-title a:hover {
  color: var(--brand-orange);
  text-decoration: none;
}

/* Site-Logo im Header */
.db-header .wp-block-site-logo {
  line-height: 0;
  flex-shrink: 0;
}

.db-header .wp-block-site-logo a {
  display: inline-block;
  line-height: 0;
}

.db-header .wp-block-site-logo img {
  width: 152px !important;
  height: auto !important;
  display: block;
}

/* Inline-Navigation */
.db-header .wp-block-navigation a {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
  padding-block: 4px;
}

.db-header .wp-block-navigation a:hover {
  color: var(--fg-1);
}

/* CTA-Button im Header */
.db-header .db-header-cta .wp-block-button__link {
  font-size: 13px;
  padding: 8px 18px;
  letter-spacing: -0.01em;
}

/* Hamburger-Button */
.db-header .wp-block-navigation__responsive-container-open {
  background: none;
  border: 1.5px solid var(--stroke-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--fg-1);
  padding: 7px 10px;
  line-height: 0;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

.db-header .wp-block-navigation__responsive-container-open:hover {
  border-color: var(--fg-3);
  background-color: var(--bg-2);
}

.db-header .wp-block-navigation__responsive-container-open svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Mobile Overlay-Panel — Erscheinungsbild wenn offen (WP steuert Sichtbarkeit) */
.db-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--bg-0) !important;
  z-index: 200;
  overflow-y: auto;
}

/* Schließen-Button im Overlay */
.db-header .wp-block-navigation__responsive-close {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-5) var(--space-6) 0;
}

.db-header .wp-block-navigation__responsive-container-close {
  background: none;
  border: 1.5px solid var(--stroke-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--fg-1);
  padding: 7px 10px;
  line-height: 0;
  transition: border-color var(--dur-base) var(--ease-standard);
}

.db-header .wp-block-navigation__responsive-container-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Navigationsinhalt im Overlay */
.db-header .wp-block-navigation__responsive-dialog {
  padding: var(--space-6);
  flex: 1;
}

/* Desktop: Nav-Container reset — kein column, WP übernimmt row-Layout via CSS-Variablen */
.db-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Mobile Overlay wenn offen: vertikales Layout */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid var(--stroke-2);
}

.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  padding-block: var(--space-5);
  font-size: 20px !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1) !important;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}

.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--brand-orange) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* WP fügt margin-block-start: 1.2rem auf das footer-Element ein — erzeugt helle Lücke zwischen
   letzter Ink-Sektion und Footer. Auf Null setzen. */
footer.wp-block-template-part {
  margin-block-start: 0 !important;
}

.db-footer {
  /* ink-deep (#1F232A) — etwas dunkler als CTA-Sektion (ink #2A2E36), trennt Footer visuell */
  background-color: var(--bg-ink-2) !important;
  /* WP fügt bei has-background Blöcken automatisch Padding ein — komplett überschreiben */
  padding: 0 !important;
  /* Kein border-top — Übergang CTA→Footer nur über Farbwechsel, kein zusätzlicher Rand */
  border-top: none !important;
}

/* Constrained-Wrapper des Footers: kein automatisches Block-Gap */
.db-footer > .wp-block-group {
  padding: 0 !important;
  --wp--style--block-gap: 0px;
}

/* Footer-Inhaltszeilen auf 720px begrenzen — tighter als 860px, brand und nav kommen näher zusammen */
.db-footer .wp-block-group.alignwide {
  max-width: 720px !important;
}

.db-footer hr.wp-block-separator.db-footer-sep {
  max-width: 720px !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
}

/* 4-Spalten-Footer: CSS Grid übernimmt das Layout */
.db-footer .wp-block-group.alignwide:first-child {
  display: grid !important;
  grid-template-columns: 220px 1fr 1fr 1fr;
  gap: 40px 32px;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-items: start;
}

/* Brand-Spalte */
.db-footer-brand {
  flex: unset;
}

/* WP margin-inline-start: auto nicht mehr benötigt im Grid */
.db-footer-brand + .wp-block-group {
  margin-inline-start: 0;
}

@media (max-width: 860px) {
  .db-footer .wp-block-group.alignwide:first-child {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
}

@media (max-width: 500px) {
  .db-footer .wp-block-group.alignwide:first-child {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Spaltenüberschrift — volle Helligkeit für klare Hierarchie */
.db-footer-col-label {
  color: var(--fg-on-ink-1) !important;
  margin-bottom: var(--space-4) !important;
  margin-top: 0 !important;
}

.db-footer .wp-block-site-logo {
  line-height: 0;
}

.db-footer .wp-block-site-logo a {
  display: inline-block;
  line-height: 0;
}

.db-footer .wp-block-site-logo img {
  width: 140px !important;
  height: auto !important;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.db-footer-tagline {
  color: var(--fg-on-ink-2) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.db-footer-nav a,
.db-footer-nav .wp-block-navigation-item__content {
  font-size: 14px;
  color: var(--fg-on-ink-2) !important;
  text-decoration: none;
  padding-block: 4px !important;
  transition: color var(--dur-base) var(--ease-standard);
}

/* Nav-Link-Abstände im Footer: Gap sitzt via gap:inherit auf dem <ul> */
nav.db-footer-nav,
.db-footer-nav .wp-block-navigation__container {
  gap: 0 !important;
}

.db-footer-nav .wp-block-navigation-item,
.db-footer-nav .wp-block-navigation__container > li {
  margin-block: 0 !important;
}

/* WP Block-Gaps innerhalb des Footer-Containers minimieren */
.db-footer .is-layout-constrained > *,
.db-footer .is-layout-flow > * {
  margin-block-start: 0 !important;
}

.db-footer-nav a:hover,
.db-footer-nav .wp-block-navigation-item__content:hover {
  color: var(--fg-on-ink-1) !important;
}

.db-footer-sep {
  border-top: 1px solid rgba(247, 244, 238, 0.09) !important;
  border-bottom: none !important;
  height: 1px;
  margin-block: 0;
  opacity: 1;
}

.db-footer-copy {
  color: var(--fg-on-ink-2) !important;
  font-size: 13px;
}

.db-footer-legal a,
.db-footer-legal .wp-block-navigation-item__content {
  font-size: 13px;
  color: var(--fg-on-ink-2) !important;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}

.db-footer-legal a:hover,
.db-footer-legal .wp-block-navigation-item__content:hover {
  color: var(--fg-on-ink-1) !important;
}

/* ==========================================================================
   Hero-Sektion
   ========================================================================== */

/* Bilder im Hero: starker Schatten, runde Ecken */
.wp-block-group.alignfull.has-base-background-color .wp-block-image img {
  box-shadow: var(--shadow-4);
}

/* Hero-Abstand von Header — db-footer explizit ausschließen, da es ebenfalls alignfull:first-child.has-background ist */
.wp-block-group.alignfull:first-child.has-background:not(.db-footer) {
  padding-block-start: 96px;
}

/* ==========================================================================
   Utility
   ========================================================================== */

/* Paragraph-Breite in Fullwidth-Sektionen */
.wp-block-group.alignfull .wp-block-paragraph:not(.eyebrow):not([class*="has-text-align-center"]):not([class*="db-footer"]) {
  max-width: 68ch;
}

/* Zentrierte Paragraphen */
.wp-block-group.alignfull .has-text-align-center.wp-block-paragraph {
  margin-inline: auto;
  max-width: 60ch;
}

/* ==========================================================================
   Responsive — Breakpoints konsolidiert
   ========================================================================== */

/* ---- Tablet / kleiner Desktop: 960px ---- */
@media (max-width: 960px) {
  :root {
    --space-section: 88px;
  }
}

/* ---- Mobile: 780px ---- */
@media (max-width: 780px) {
  :root {
    --space-section: 72px;
  }

  /* Inline-Navigation auf Mobile ausblenden */
  .db-header .wp-block-navigation .wp-block-navigation__container:not(
    .wp-block-navigation__responsive-container .wp-block-navigation__container
  ) {
    display: none;
  }

  /* Hamburger-Button anzeigen */
  .db-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* CTA-Button im Header auf Mobile verbergen */
  .db-header .db-header-cta-wrap {
    display: none !important;
  }

  /* Hero-Spalten: Stack */
  .wp-block-columns.are-vertically-aligned-center {
    gap: 48px;
  }

  /* FAQ: weniger right-padding */
  .db-faq-item .wp-block-heading {
    padding-right: var(--space-8);
  }

  /* Feature-Karten und Steps: kompakteres Padding */
  .wp-block-group.db-card-feature,
  .db-step {
    padding: var(--space-6);
  }
}

/* ---- Schmales Mobile: 480px ---- */
@media (max-width: 480px) {
  .wp-block-group.alignfull {
    padding-inline: var(--space-5);
  }

  .db-card,
  .db-card-feature,
  .db-step {
    padding: var(--space-6);
  }
}

/* ---- Desktop: Hamburger verstecken ---- */
@media (min-width: 781px) {
  .db-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

/* ==========================================================================
   Hero — Produkt-Inszenierung
   ========================================================================== */

/* Hero: Dot-Grid + Orange-Glow (einmal pro Seite) */
.wp-block-group.alignfull.db-hero-section {
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 65% 70% at 82% 52%, rgba(245, 133, 21, 0.10) 0%, transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(42, 46, 54, 0.07) 1px, transparent 0);
  background-size: 100% 100%, 26px 26px;
}

/* Premium-Shadow für Hero-Screenshot — per Design-Spec: weißer BG, border, shadow-3, radius-xl */
.wp-block-image.db-hero-img img {
  background-color: var(--bg-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-3);
}

/* Standard Screenshot-Einbindung auf Modul-Seiten */
.wp-block-image.db-img-card img {
  background-color: var(--bg-1);
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2);
}

/* Trust-Strip unter den Hero-CTAs */
.db-trust-strip {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2) !important;
  margin-top: var(--space-5) !important;
}

.db-trust-chip {
  font-size: 11.5px !important;
  font-weight: 500;
  color: var(--fg-3) !important;
  background-color: var(--bg-2);
  border: 1px solid var(--stroke-2);
  border-radius: 100px;
  padding: 5px 13px;
  white-space: nowrap;
  max-width: none !important;
  margin: 0 !important;
  line-height: 1.3;
}

/* ==========================================================================
   Feature-Grid — Kategorie-Label in Karten
   ========================================================================== */

.db-card-category {
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3) !important;
  margin-bottom: var(--space-2) !important;
  margin-top: 0 !important;
  max-width: none !important;
  line-height: 1.4;
}

/* Weniger Abstand zwischen ::before-Bar und Kategorie-Label */
.wp-block-group.db-card-feature::before {
  margin-bottom: var(--space-4);
}

/* Überschrift in Feature-Karte mit Kategorie-Label: kein Margin-Top */
.wp-block-group.db-card-feature .wp-block-heading {
  margin-top: 0 !important;
}

/* ==========================================================================
   Trust-Sektion — stärker inszeniert
   ========================================================================== */

/* Trust-Karten: mehr Padding, orangene Linie oben */
.db-trust-card {
  padding: var(--space-10) !important;
}

.db-trust-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-orange) 0%, rgba(245, 133, 21, 0.25) 100%);
  border-radius: 2px;
  margin-bottom: var(--space-6);
}

/* Logo im Trust-Kard */
.db-trust-logo {
  margin-bottom: var(--space-6) !important;
}

.db-trust-logo img {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Trust-Badge Pill */
.db-trust-badge {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange) !important;
  background-color: var(--brand-orange-wash);
  border: 1px solid var(--brand-orange-tint);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: var(--space-5) !important;
  max-width: none !important;
  line-height: 1.3;
}

/* Fakten-Liste in Trust-Karten */
.db-trust-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: var(--space-5) !important;
}

.db-trust-list li {
  font-size: 13.5px;
  color: var(--fg-2) !important;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--stroke-1);
  padding-left: var(--space-5);
  position: relative;
  margin-bottom: 0 !important;
}

.db-trust-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--brand-orange);
  font-weight: 600;
  line-height: inherit;
}

.db-trust-list li:first-child {
  border-top: 1px solid var(--stroke-1);
}

/* Trust-Karten auf surface-alt: keine Hover-Transform
   (Trust soll ruhig und stabil wirken, nicht hoovern) */
.db-trust-card:hover {
  transform: none;
  box-shadow: var(--shadow-2);
}

/* ==========================================================================
   FAQ — Editorial
   ========================================================================== */

.db-faq-item {
  max-width: 800px;
  border-top: 1px solid var(--stroke-1);
  padding-block: var(--space-8);
}

.db-faq-item:last-child {
  border-bottom: 1px solid var(--stroke-1);
}

.db-faq-item .wp-block-heading {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}

/* ==========================================================================
   Badge / Status-Pill — db-badge
   ========================================================================== */

.db-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 12px;
  line-height: 1.4;
  white-space: nowrap;
  max-width: none !important;
}

.db-badge-orange {
  color: var(--brand-orange) !important;
  background-color: var(--brand-orange-wash);
  border: 1px solid var(--brand-orange-tint);
}

.db-badge-neutral {
  color: var(--fg-2) !important;
  background-color: var(--bg-2);
  border: 1px solid var(--stroke-2);
}

/* Statistik-Zahl — für Fakten-Reihen */
.db-stat-value {
  display: block !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  color: var(--fg-1) !important;
  margin-bottom: 4px !important;
}

.db-stat-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--fg-3) !important;
  line-height: 1.4;
  max-width: none !important;
}

/* ==========================================================================
   CTA Ink — Trust-Strip am Ende
   ========================================================================== */

.db-cta-trust {
  font-size: 13px !important;
  color: rgba(247, 244, 238, 0.55) !important;
  margin-top: var(--space-8) !important;
  max-width: none !important;
  letter-spacing: 0.01em;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Art-Direction v3 — Before/After · Feature-Grid · Steps · Trust v2
   ========================================================================== */

/* ------------------------------------------------------------------
   Before / After — Problemvergleich
   ------------------------------------------------------------------ */

.db-before-after {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 36px !important;
}

.db-before-card,
.db-after-card {
  border-radius: 14px !important;
  padding: 28px 28px 32px !important;
}

.db-before-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--stroke-2) !important;
  box-shadow: var(--shadow-1) !important;
}

.db-after-card {
  background: var(--bg-1) !important;
  border: 1.5px solid rgba(245, 133, 21, 0.35) !important;
  box-shadow:
    0 0 0 3px rgba(245, 133, 21, 0.06),
    var(--shadow-2) !important;
}

.db-compare-label {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fg-3) !important;
  margin: 0 0 18px !important;
}

.db-compare-label-orange { color: var(--brand-orange) !important; }

.db-compare-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.db-compare-list li {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--fg-2) !important;
  padding-left: 20px !important;
  position: relative !important;
}

.db-compare-list li::before {
  content: "×" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--fg-3) !important;
  font-weight: 600 !important;
  line-height: inherit !important;
}

.db-compare-list-positive li::before {
  content: "✓" !important;
  color: var(--brand-orange) !important;
}

@media (max-width: 600px) {
  .db-before-after { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   Feature-Grid auf Ink-Hintergrund
   ------------------------------------------------------------------ */

.db-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.db-feature-grid-item {
  background: transparent !important;
  padding: 32px 28px 28px !important;
  transition: background 0.18s;
}

.db-feature-grid-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.db-feature-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(245, 133, 21, 0.80) !important;
  margin: 0 0 14px !important;
  line-height: 1.3 !important;
}

.db-feature-grid-item h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  color: rgba(247, 244, 238, 0.95) !important;
  margin: 0 0 10px !important;
}

.db-feature-grid-item p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(247, 244, 238, 0.50) !important;
  margin: 0 !important;
}

.db-feature-grid-item a.db-feature-link {
  display: inline-block !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(245, 133, 21, 0.75) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}

.db-feature-grid-item a.db-feature-link:hover {
  color: var(--brand-orange) !important;
}

@media (max-width: 780px) {
  .db-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .db-feature-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   Ablauf-Steps v2 — Large-Number-Cards
   ------------------------------------------------------------------ */

.db-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.db-step-v2 {
  background: var(--bg-1) !important;
  border: 1px solid var(--stroke-2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 24px 24px !important;
}

.db-step-num {
  display: block !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.85 !important;
  color: var(--stroke-2) !important;
  margin-bottom: 18px !important;
  font-family: inherit !important;
}

.db-step-phase {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--fg-3) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

.db-step-v2 h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  color: var(--fg-1) !important;
  margin: 0 0 8px !important;
}

.db-step-v2 > p:not(.db-step-phase) {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--fg-2) !important;
  margin: 0 !important;
}

@media (max-width: 780px) {
  .db-steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

@media (max-width: 480px) {
  .db-steps-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   Trust v2 — Fakten-Strip + Elevated Cards
   ------------------------------------------------------------------ */

.db-trust-facts {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--stroke-1) !important;
  border: 1px solid var(--stroke-1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.db-trust-fact {
  background: var(--bg-0) !important;
  padding: 20px 24px !important;
}

.db-trust-fact-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--fg-1) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin-bottom: 3px !important;
}

.db-trust-fact-detail {
  display: block !important;
  font-size: 12.5px !important;
  color: var(--fg-3) !important;
  line-height: 1.4 !important;
}

.db-trust-card-v2 {
  padding: 40px !important;
  background: var(--bg-1) !important;
  border: 1px solid var(--stroke-2) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
}

.db-trust-card-v2::before {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-orange) 0%, rgba(245, 133, 21, 0.20) 100%) !important;
  border-radius: 2px !important;
  margin-bottom: 28px !important;
}

.db-trust-logo-v2 {
  margin-bottom: 24px !important;
}

.db-trust-logo-v2 img {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

@media (max-width: 780px) {
  .db-trust-facts { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   Contact Form 7 — DigiBasiX Design-Integration
   ========================================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--stroke-3) !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  background: var(--bg-1) !important;
  color: var(--fg-1) !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
  transition: border-color 0.15s ease !important;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  outline: none !important;
  border-color: var(--brand-orange) !important;
}

.wpcf7 label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg-2) !important;
  margin-bottom: 2px !important;
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block !important;
  margin-top: 4px !important;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  background: var(--brand-orange) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: opacity 0.15s ease !important;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  opacity: 0.88 !important;
}

.wpcf7 .wpcf7-not-valid-tip {
  font-size: 12px !important;
  color: #c0392b !important;
  margin-top: 3px !important;
}

.wpcf7 .wpcf7-response-output {
  font-size: 14px !important;
  padding: 10px 14px !important;
  margin-top: 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--stroke-2) !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #27ae60 !important;
  color: #1e8449 !important;
  background: #f0fff4 !important;
}

/* ─── Complianz Cookie-Banner — DigiBasiX Farbanpassung ─────────────────── */

/* Complianz Cookie Banner Fix */
.cmplz-cookiebanner,
.cmplz-cookiebanner * {
  color: #F7F4EE !important;
}

.cmplz-cookiebanner {
  background-color: #2A2E36 !important;
  border-top: 2px solid #F58515 !important;
  font-family: inherit !important;
  font-size: 14px !important;
}

.cmplz-cookiebanner .cmplz-title {
  color: #F7F4EE !important;
  font-weight: 600 !important;
}

.cmplz-cookiebanner p,
.cmplz-cookiebanner .cmplz-body {
  color: rgba(247,244,238,0.85) !important;
}

.cmplz-cookiebanner a {
  color: #F58515 !important;
}

/* Akzeptieren-Button: Markenorange */
.cmplz-btn.cmplz-accept,
.cmplz-accept,
#cmplz-cookie-message .cmplz-btn.cmplz-accept {
  background-color: #F58515 !important;
  border-color: #F58515 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.cmplz-btn.cmplz-accept:hover,
.cmplz-accept:hover {
  background-color: #d9720f !important;
  border-color: #d9720f !important;
}

/* Ablehnen-Button: dezent, wie outline */
.cmplz-btn.cmplz-deny,
.cmplz-deny {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #F7F4EE !important;
  border-radius: 6px !important;
}