.elementor-kit-4{--e-global-color-primary:#2036B3;--e-global-color-secondary:#21E8E6;--e-global-color-text:#1F2937;--e-global-color-accent:#FFB400;--e-global-color-aacc4f3:#F7F9FC;--e-global-color-2cb5a35:#5C6370;--e-global-color-3258256:#121212;--e-global-color-3aa9ec4:#6B7280;--e-global-color-36844cf:#FFFFFF;--e-global-color-2eca9e6:#000000;--e-global-color-2816a6f:#F9FAFB;--e-global-color-2053140:#F8F9FC;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-36844cf );color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:17px;line-height:24px;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Outfit", Sans-serif;font-size:16px;font-weight:600;line-height:1.2px;color:var( --e-global-color-36844cf );box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.16);border-radius:12px 12px 12px 12px;padding:14px 26px 14px 26px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:#3151D6;color:var( --e-global-color-36844cf );box-shadow:0px 4px 14px 0px rgba(0, 0, 0, 0.22);}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-primary );font-family:"Outfit", Sans-serif;}.elementor-kit-4 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-4 h1{color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:60px;font-weight:700;letter-spacing:-1px;}.elementor-kit-4 h2{color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:32px;font-weight:600;line-height:1.2em;letter-spacing:-0.5px;}.elementor-kit-4 h3{color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:22px;font-weight:700;}.elementor-kit-4 h4{color:var( --e-global-color-text );font-family:"Outfit", Sans-serif;font-size:18px;font-weight:500;}.elementor-kit-4 h5{font-family:"Outfit", Sans-serif;}.elementor-kit-4 h6{font-family:"Outfit", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4 h1{font-size:45px;}.elementor-kit-4 h2{font-size:32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4 a{font-size:1px;}.elementor-kit-4 h1{font-size:40px;}.elementor-kit-4 h2{font-size:26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   DIGITAL UPLIFT - CLEAN MASTER STYLESHEET v5.5
   
   VERSION HISTORY:
   v5.5 - 2025-01-14: KI-Page COMPLETE Styles integriert (alle Sektionen vollständig)
   v5.4 - 2025-01-14: DESKTOP STYLES für KI-Sektionen hinzugefügt (1025px+)
   v5.3 - 2025-01-13: Hero CTA Desktop fix (Link neben Button) + Mobile Link größer/sichtbar
   v5.2 - 2025-01-13: KI Hero Tablet/Mobile - Content zuerst, Visual danach (order gefixt)
   v5.1 - 2025-01-13: CTA Actions Trust-Line zentriert (width: 100%, text-align: center)
   v5.0 - 2025-01-12: Initial clean version
   
   Bereinigt, konsolidiert, wartbar
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */
:root {
  /* Brand Colors */
  --du-primary: #2038B3;
  --du-primary-dark: #1A2E94;
  --du-accent: #21E8E6;
  --du-dark: #111827;
  --du-body: #4B5563;
  --du-light: #F9FAFB;
  --du-white: #ffffff;
  --du-border: #E2E8F0;
  --du-grey-bg: #F8FAFC;
  
  /* Effects */
  --du-shadow: 0 14px 30px rgba(17, 24, 39, 0.06);
  --du-radius: 18px;
  
  /* Typography */
  --du-font: 'Outfit', sans-serif;
}

/* ==========================================================================
   2. GLOBAL RESET & BASE
   ========================================================================== */
.du-section * { 
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   3. LAYOUT SYSTEM - SECTIONS
   ========================================================================== */

/* Base Section */
.du-section {
  width: 100% !important;
  position: relative !important;
  padding: 100px 0 !important;
}

/* Section Color Variants */
.du-section-white {
  background-color: var(--du-white) !important;
}

.du-section-grey {
  background-color: var(--du-grey-bg) !important;
}

/* Hero Special Spacing */
.du-section-hero {
  padding: 80px 0 80px 0 !important;
}

/* Container */
.du-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   4. TYPOGRAPHY BASE
   ========================================================================== */

.du-section-title {
  font-family: var(--du-font);
  font-size: 42px;
  font-weight: 700;
  color: var(--du-dark);
  line-height: 1.2;
  margin: 0 0 24px 0;
}

/* ==========================================================================
   5. COMPONENTS - EYEBROWS
   ========================================================================== */

.du-eyebrow,
.du-eyebrow-cnt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--du-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--du-primary);
  margin-bottom: 14px;
  line-height: 1;
}

.du-eyebrow::before,
.du-eyebrow-cnt::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--du-primary);
  box-shadow: 0 0 0 4px rgba(32, 56, 179, 0.15);
  flex-shrink: 0;
}

/* Cyan Variant (für Zen Cards) */
.du-card .du-eyebrow-cnt::before,
.du-zen-card .du-eyebrow-cnt::before {
  background-color: var(--du-accent) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.25) !important;
}

/* Grey Variant (für Principle Cards) */
.du-principle-card .du-eyebrow-cnt {
  color: #94A3B8;
}

.du-principle-card .du-eyebrow-cnt::before {
  background-color: #94A3B8 !important;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.15) !important;
}

/* ==========================================================================
   6. COMPONENTS - BUTTONS & LINKS
   ========================================================================== */

.du-btn-pill {
  background-color: var(--du-primary);
  color: #fff !important;
  padding: 14px 32px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: none;
  line-height: 1.2;
  cursor: pointer;
}

.du-btn-pill:hover {
  background-color: var(--du-primary-dark);
  transform: translateY(-2px);
}

.du-link-arrow {
  color: var(--du-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.du-link-arrow:hover {
  gap: 10px;
}

/* ==========================================================================
   7. SECTION: HERO
   ========================================================================== */

/* Hero Container - Split Layout */
.du-hero-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Left Side: Content */
.du-hero-content {
  max-width: 600px;
}

.du-hero-title {
  font-family: var(--du-font);
  font-size: 52px;
  font-weight: 700;
  color: var(--du-dark);
  line-height: 1.15;
  margin: 0 0 8px 0;
}

.du-hero-subtitle {
  font-family: var(--du-font);
  font-size: 22px;
  font-weight: 400;
  color: #1F2937;
  line-height: 1.3;
  margin: 0 0 40px 0;
}

.du-hero-text {
  font-family: var(--du-font);
  font-size: 20px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 32px 0;
}

.du-hero-intro {
  font-family: var(--du-font);
  font-size: 15px;
  color: #64748B;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 0;
}

.du-hero-intro-divider {
  color: #CBD5E1;
  margin: 0 8px;
}

.du-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.du-hero-trust {
  font-family: var(--du-font);
  font-size: 13px;
  color: #94A3B8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.du-trust-divider {
  color: #E2E8F0;
  margin: 0 8px;
}

/* Right Side: Visual Card */
.du-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Output Card Styling */
.du-output-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--du-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.08);
  overflow: hidden;
  position: relative;
  max-width: 520px;
  width: 100%;
}

.du-output-header {
  background: #F8FAFC;
  border-bottom: 1px solid var(--du-border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.du-window-dots {
  display: flex;
  gap: 8px;
}

.du-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.du-dot.red { background-color: #EF4444; }
.du-dot.yellow { background-color: #F59E0B; }
.du-dot.green { background-color: #10B981; }

.du-window-label {
  font-family: var(--du-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #94A3B8;
  text-transform: uppercase;
}

.du-output-body {
  padding: 40px 32px;
}

.du-output-headline {
  font-family: var(--du-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--du-dark);
  margin: 0 0 28px 0;
  line-height: 1.3;
}

.du-output-item {
  margin-bottom: 24px;
}

.du-output-item:last-child {
  margin-bottom: 0;
}

.du-output-item p {
  font-family: var(--du-font);
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
  margin: 10px 0 0 0;
}

/* Tags in Output Card */
.du-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.du-tag.blue {
  background-color: rgba(32, 56, 179, 0.1);
  color: var(--du-primary);
}

.du-tag.cyan {
  background-color: rgba(34, 211, 238, 0.1);
  color: #0891B2;
}

.du-tag.indigo {
  background-color: rgba(99, 102, 241, 0.1);
  color: #6366F1;
}

/* Glow Effect */
.du-hero-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(32, 56, 179, 0.15) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ==========================================================================
   8. SECTION: WAS WIR TUN (WWD)
   ========================================================================== */

.du-wwd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.du-wwd-card {
  background: var(--du-white);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--du-border);
  height: 100%;
}

.du-wwd-card.negative {
  background-color: var(--du-grey-bg);
}

.du-wwd-overline {
  font-family: var(--du-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block;
  color: var(--du-primary);
}

.du-wwd-card.negative .du-wwd-overline {
  color: #64748B;
}

.du-wwd-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.du-wwd-list li {
  font-family: var(--du-font);
  font-size: 16px;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Icon Styles für WWD Liste */
.du-icon-check {
  width: 20px;
  height: 20px;
  color: var(--du-primary);
  flex-shrink: 0;
  margin-top: 3px;
}

.du-icon-check svg {
  width: 100%;
  height: 100%;
}

/* Dashes für "Was wir nicht tun" */
.du-wwd-list.dashes li {
  position: relative;
  padding-left: 28px;
}

.du-wwd-list.dashes li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  top: 0;
  color: #94A3B8;
  font-weight: 700;
}

/* ==========================================================================
   9. SECTION: DARK TESTIMONIAL
   ========================================================================== */

.du-quote-box {
  background-color: #151e32;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  padding: 50px 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.du-quote-icon {
  font-family: var(--du-font);
  font-size: 80px;
  line-height: 1;
  color: #94A3B8;
  margin-bottom: 50px;
  opacity: 0.8;
  display: block;
  font-weight: 700;
}

.du-quote-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--du-white);
  margin: 0 0 30px 0;
}

.du-quote-author {
  display: inline-block;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
  font-size: 14px;
  color: #94A3B8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.du-quote-author-divider {
  color: var(--du-primary);
  margin: 0 6px;
}

/* ==========================================================================
   10. SECTION: EINSTIEG (ZEN GRID)
   ========================================================================== */

.du-zen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.du-zen-card {
  background: var(--du-white);
  padding: 50px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #F1F5F9;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  height: 100%;
}

.du-zen-card.focus {
  border-color: #CBD5E1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.du-badge-focus {
  background-color: rgba(32, 56, 179, 0.06);
  color: var(--du-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 24px;
}

.du-zen-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--du-dark);
  margin: 0 0 20px 0;
}

.du-zen-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #334155;
  margin: 0 0 16px 0;
}

.du-zen-desc {
  font-size: 16px;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 32px 0;
  flex-grow: 1;
}

.du-spacer {
  height: 40px;
}

/* ==========================================================================
   11. SECTION: PRINZIPIEN (6er Grid)
   ========================================================================== */

.du-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.du-principle-card {
  padding: 32px;
  background: var(--du-white);
  border: 1px solid var(--du-border);
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.du-principle-title {
  font-family: var(--du-font);
  font-size: 20px;
  font-weight: 600;
  color: #1E293B;
  margin: 0 0 12px 0;
  min-height: 52px;
}

.du-principle-text {
  font-family: var(--du-font);
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   12. SECTION: PROMISE BOX (Häkchen Grid)
   ========================================================================== */

.du-promise-box {
  background: var(--du-white);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid #F1F5F9;
  padding: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.du-promise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 60px;
}

.du-promise-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.du-icon-box {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  color: var(--du-primary);
  line-height: 0;
}

.du-icon-box.gray {
  color: #94A3B8;
}

.du-promise-head {
  font-size: 20px;
  font-weight: 600;
  color: #0F172A;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.du-promise-desc {
  font-size: 16px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   13. SECTION: SZENARIEN (3 Wege)
   ========================================================================== */

.du-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.du-scenario-item {
  border-left: 1px solid var(--du-border);
  padding: 10px 10px 10px 24px;
  display: flex;
  flex-direction: column;
  background: var(--du-white);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid var(--du-border);
}

.du-scenario-label {
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.du-scenario-quote {
  background: rgba(32, 56, 179, 0.04);
  border-left: 3px solid var(--du-primary);
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-style: italic;
  color: #475569;
  font-size: 15px;
  line-height: 1.5;
}

/* ==========================================================================
   14. SECTION: FOOTER CTA
   ========================================================================== */

.du-cta-card {
  max-width: 900px;
  margin: 0 auto;
  background: var(--du-white);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #F1F5F9;
  text-align: center;
  padding: 60px 40px;
}

.du-cta-head {
  font-weight: 600;
  color: #1E293B;
  margin: 0 0 20px 0;
  font-size: 32px;
  line-height: 1.3;
}

.du-cta-text {
  color: #475569;
  line-height: 1.6;
  margin: 0 auto 40px auto;
  max-width: 700px;
  font-size: 18px;
}

.du-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.du-cta-actions .du-hero-trust {
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   15. UTILITY CLASSES
   ========================================================================== */

.du-padding-none { padding: 0 !important; }
.du-padding-top-none { padding-top: 0 !important; }
.du-padding-bottom-none { padding-bottom: 0 !important; }

.du-br-desktop { display: block; }

/* ==========================================================================
   16. DESKTOP STYLES - KI PAGE SECTIONS (1025px+)
   ========================================================================== */

/* Context Header + Dynamics Grid (Das Kernelement Section) */
.du-dynamics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Paper Section - 2 Spalten */
.du-paper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Bullets Section - 2 Spalten */
.du-bullets-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Usecase Split - 2 Spalten */
.du-usecase-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Process Grid - 3 Spalten */
.du-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Invest Wrapper - 5 Karten */
.du-invest-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* ==========================================================================
   KI-PAGE SPECIFIC STYLES - START
   Diese Styles können später in separate ki-page.css ausgelagert werden
   ========================================================================== */

/* ==========================================================================
   SEKTION 1: KONTEXT (Warum KI-Entscheidungen unsicher)
   ========================================================================== */

/* Header Block */
.du-context-header {
  max-width: 800px;
  margin-bottom: 48px;
}

.du-context-intro {
  font-size: 17px;
  line-height: 1.7;
  color: #4B5563;
  margin: 0;
}

/* ========== KI-HERO CTA GROUP - EIGENE KLASSE ========== */
.du-ki-cta-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 24px;
  width: 100%;
}

.du-ki-cta-group .du-ord-1 {
  order: 1;
}

.du-ki-cta-group .du-ord-desktop-2 {
  order: 2;
}

.du-ki-cta-group .du-ord-desktop-3 {
  order: 3;
  flex-basis: 100%;
  margin-top: 8px;
}


/* Dynamics Grid - 3 Karten */
.du-dynamics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.du-dyn-card {
  background: #F8FAFC;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.du-dyn-head {
  display: block;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 12px;
  font-size: 18px;
}

.du-dyn-text {
  font-size: 15px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* Statement Box mit blauem Strich */
.du-statement-box {
  padding: 32px;
  background: #F8FAFC;
  border-radius: 12px;
  border-left: 4px solid #2038B3;
  margin-bottom: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.du-statement-box p {
  margin: 0;
  font-style: italic;
  color: #1F2937;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
}

/* Transition Text */
.du-transition-text {
  max-width: 700px;
  margin: 0 auto;
}

.du-transition-text p {
  color: #4B5563;
  font-weight: 500;
  font-size: 17px;
  margin: 0;
}

/* ==========================================================================
   SEKTION 2: ENTSCHEIDUNGSPAPIER (Browser-Box Visual)
   ========================================================================== */

/* Grid Layout */
.du-paper-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
  width: 100%;
}

/* Left Content & Right Visual */
.du-paper-content,
.du-paper-visual {
  flex: 1;
  min-width: 320px;
}

/* Text Content */
.du-paper-intro {
  font-size: 17px;
  line-height: 1.7;
  color: #4B5563;
  margin: 0 0 32px 0;
}

/* Bullets Wrapper */
.du-bullets-wrapper {
  display: block;
  margin-bottom: 40px;
}

.du-bullet-list-block {
  display: inline-block;
  text-align: left;
}

.du-bullet-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.du-bullet-item p {
  margin: 0;
  font-size: 17px;
  color: #1F2937;
  line-height: 1.4;
}

/* Investment Card */
.du-invest-wrapper {
  display: block;
}

.du-invest-card {
  padding: 24px;
  background: #fff;
  border-left: 4px solid #2038B3;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  text-align: left;
  max-width: 520px;
}

.du-invest-header {
  margin-bottom: 12px;
}

.du-invest-label {
  font-weight: 700;
  color: #1F2937;
  display: block;
  margin-bottom: 4px;
}

.du-invest-text {
  color: #475569;
  font-size: 15px;
}

.du-invest-footer {
  font-size: 13px;
  color: #64748B;
  border-top: 1px solid #F1F5F9;
  padding-top: 12px;
  margin-top: 12px;
}

/* Browser Box Visual */
.du-browser-box {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  max-width: 480px;
}

.du-browser-bar {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.du-browser-bar .du-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.du-browser-bar .du-dot.red {
  background: #FF5F56;
}

.du-browser-bar .du-dot.yellow {
  background: #FFBD2E;
}

.du-browser-bar .du-dot.green {
  background: #27C93F;
}

.du-browser-title {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 1px;
}

.du-browser-body {
  padding: 40px;
  text-align: left;
}

.du-body-head {
  margin-bottom: 25px;
}

.du-blue-line {
  width: 30px;
  height: 3px;
  background: #2038B3;
  margin-bottom: 15px;
}

.du-summary-title {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
}

.du-summary-sub {
  font-size: 12px;
  color: #94A3B8;
}

.du-index-list {
  font-size: 14px;
  color: #475569;
  line-height: 2.4;
}

.du-index-row {
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.du-index-row b {
  color: #94A3B8;
}

.du-index-row-bold {
  font-weight: 700;
  color: #2038B3;
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}

.du-index-row-bold b {
  color: #94A3B8;
}

/* Caption */
.du-caption-wrapper {
  margin-top: 16px;
  max-width: 480px;
  font-size: 13px;
  color: #6B7280;
  text-align: left;
  line-height: 1.4;
}

/* ==========================================================================
   SEKTION 3: PROCESS (Wie aus Unsicherheit ein Fahrplan wird)
   ========================================================================== */

/* Header */
.du-process-header {
  max-width: 720px;
  margin-bottom: 60px;
}

.du-process-intro {
  font-size: 17px;
  line-height: 1.7;
  color: #4B5563;
  margin: 0;
}

/* Process Grid - 3 Cards */
.du-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.du-process-card {
  background: #ffffff;
  padding: 32px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}

.du-process-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 12px;
}

.du-process-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* Highlighted Card */
.du-process-highlight {
  border-color: #2038B3;
  box-shadow: 0 10px 30px rgba(32, 56, 179, 0.04);
}

/* Detail Box */
.du-detail-box {
  background: #F8FAFC;
  border-radius: 16px;
  padding: 48px;
  margin-bottom: 60px;
}

.du-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 32px;
}

/* Detail Bullets Grid */
.du-detail-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.du-detail-bullets ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.du-detail-bullets li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
}

.du-detail-bullets li:last-child {
  margin-bottom: 0;
}

/* Detail Footer */
.du-detail-footer {
  padding-top: 24px;
  border-top: 1px solid #E2E8F0;
}

.du-detail-footer p {
  font-size: 13px;
  color: #94A3B8;
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   SEKTION 4: USE CASES (Typische Fragestellungen aus der Praxis)
   ========================================================================== */

/* Section Background Color */
.du-section-offwhite {
  background-color: #F9FAFB !important;
  padding: 100px 0;
}

/* Split Layout */
.du-usecase-split {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* Left Side - Sticky */
.du-usecase-left {
  flex: 0 0 42%;
  position: sticky;
  top: 100px;
}

.du-usecase-header h2 {
  margin-bottom: 32px;
}

.du-p-intro {
  font-size: 17px;
  line-height: 1.7;
  color: #4B5563;
  margin: 0 0 20px 0;
}

/* Right Side - Cards */
.du-usecase-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Use Case Card */
.du-usecase-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 40px;
}

.du-usecase-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1F2937;
  margin-bottom: 8px;
}

.du-usecase-meta {
  font-size: 14px;
  color: #94A3B8;
  margin-bottom: 24px;
  font-style: italic;
}

.du-usecase-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.du-usecase-list li {
  font-size: 15px;
  color: #4B5563;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}

.du-usecase-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: #CBD5E1;
  font-weight: 700;
}

/* Question Box */
.du-usecase-question {
  background: #F8FAFC;
  border-left: 3px solid #2038B3;
  padding: 20px;
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 24px;
  border-radius: 6px;
}

/* Signal Badge */
.du-usecase-signal {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.du-usecase-signal::before {
  content: "?";
  width: 20px;
  height: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

/* ==========================================================================
   SEKTION 5: FAQ ACCORDION
   ========================================================================== */

/* FAQ Header */
.du-faq-header {
  max-width: 700px;
  margin: 0 auto 54px auto;
  text-align: center;
}

/* FAQ Wrapper */
.du-faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* FAQ Item */
.du-faq-item {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Highlighted First Item */
.du-faq-highlight {
  /* Highlight entfernt - nicht mehr benötigt */
}

/* Summary (Frage) */
.du-faq-item summary {
  padding: 24px 32px;
  font-size: 17px;
  font-weight: 700;
  color: #1F2937;
  cursor: pointer;
  list-style: none;
  position: relative;
  outline: none;
  user-select: none;
}

/* Custom Arrow Icon */
.du-faq-item summary::-webkit-details-marker {
  display: none;
}

.du-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 32px;
  font-size: 24px;
  font-weight: 300;
  color: #94A3B8;
  transition: transform 0.3s ease;
}

.du-faq-item[open] summary::after {
  content: '-';
  transform: rotate(0deg);
  color: #2038B3;
}

/* Content (Antwort) */
.du-faq-content {
  padding: 0 32px 32px 32px;
  font-size: 15px;
  line-height: 1.6;
  color: #4B5563;
}

.du-faq-highlight .du-faq-content {
  color: #1F2937;
}

/* ==========================================================================
   KI-PAGE RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 1024px) {
  
  /* Context Section */
  .du-context-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  
  .du-dynamics-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  
  .du-dyn-card,
  .du-statement-box {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .du-statement-box {
    border-left: none;
    border-top: 4px solid #2038B3;
  }
  
  .du-transition-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
  }
  
  /* Paper Section */
  .du-paper-grid {
    flex-direction: column;
    text-align: center;
  }
  
  .du-paper-content,
  .du-paper-visual {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-paper-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  
  .du-bullets-wrapper {
    text-align: center;
  }
  
  .du-bullet-list-block {
    display: inline-block;
    text-align: left;
  }
  
  .du-invest-card,
  .du-browser-box,
  .du-caption-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-caption-wrapper {
    text-align: center;
  }
  
  /* Process Section */
  .du-process-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  
  .du-process-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  
  .du-process-card,
  .du-detail-box {
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-detail-title {
    text-align: center;
  }
  
  /* Use Cases */
  .du-section-offwhite {
    padding: 80px 0;
  }
  
  .du-usecase-split {
    flex-direction: column;
    align-items: center;
  }
  
  .du-usecase-left {
    flex: 1;
    position: static;
    text-align: center;
    max-width: 720px;
  }
  
  .du-usecase-header h2 {
    text-align: center;
  }
  
  .du-usecase-right {
    width: 100%;
    max-width: 680px;
    align-items: stretch;
  }
  
  .du-usecase-card {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* FAQ */
  .du-faq-header {
    text-align: center;
  }
  
  .du-faq-item summary {
    padding: 20px 24px;
    font-size: 16px;
  }
  
  .du-faq-content {
    padding: 0 24px 24px 24px;
    font-size: 14px;
  }
  
  /* KI Hero CTA Group */
  .du-ki-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .du-ki-cta-group .du-ord-mobile-2 {
    order: 2;
  }
  
  .du-ki-cta-group .du-ord-mobile-3 {
    order: 3;
  }
}

@media (max-width: 767px) {
  
  /* Context Section */
  .du-dyn-card {
    padding: 28px 20px;
    max-width: 90%;
  }
  
  .du-statement-box {
    padding: 28px 20px;
    max-width: 90%;
  }
  
  .du-statement-box p,
  .du-transition-text p {
    font-size: 16px;
  }
  
  /* Paper Section */
  .du-paper-grid {
    text-align: center;
  }
  
  .du-paper-content {
    text-align: center;
  }
  
  .du-paper-intro {
    font-size: 16px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-bullets-wrapper {
    text-align: center;
  }
  
  .du-bullet-list-block {
    display: inline-block;
    text-align: left;
  }
  
  .du-bullet-item p {
    font-size: 16px;
  }
  
  .du-browser-box {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-browser-body {
    padding: 32px 20px;
  }
  
  .du-invest-card {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-caption-wrapper {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  /* Process Section */
  .du-process-intro {
    font-size: 16px;
  }
  
  .du-process-card {
    padding: 28px 20px;
    max-width: 90%;
  }
  
  .du-detail-box {
    padding: 32px 24px;
  }
  
  .du-detail-bullets {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  /* Use Cases */
  .du-section-offwhite {
    padding: 60px 0;
  }
  
  .du-usecase-header h2 {
    font-size: 30px;
  }
  
  .du-usecase-card {
    padding: 32px 16px;
    max-width: 98%;
  }
  
  .du-usecase-card h3 {
    font-size: 18px;
  }
  
  .du-usecase-meta {
    font-size: 13px;
  }
  
  .du-usecase-list li {
    font-size: 14px;
  }
  
  .du-usecase-question {
    font-size: 14px;
    padding: 16px;
  }
  
  /* FAQ */
  .du-faq-item summary {
    padding: 18px 20px;
    font-size: 15px;
  }
  
  .du-faq-item summary::after {
    right: 20px;
  }
  
  .du-faq-content {
    padding: 0 20px 24px 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   KI-PAGE SPECIFIC STYLES - END
   ========================================================================== */

/* ==========================================================================
   17. RESPONSIVE - TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  
  /* Section Padding */
  .du-section {
    padding: 80px 0 !important;
  }
  
  .du-section-hero {
    padding: 40px 0 50px 0 !important;
  }
  
  /* Eyebrow zentrieren */
  .du-eyebrow,
  .du-eyebrow-cnt {
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Hero Section - NUR für Startseite mit Standard-Visual */
  .du-hero-container {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 0 30px;
  }
  
  .du-hero-container:not(:has(.du-paper-abstract)) .du-hero-content {
    max-width: 100%;
    text-align: center;
    order: 1;
  }
  
  .du-hero-container:not(:has(.du-paper-abstract)) .du-hero-visual {
    order: 2;
  }
  
  .du-hero-title {
    font-size: 42px;
  }
  
  .du-hero-intro {
    justify-content: center;
  }
  
  .du-btn-wrapper {
    align-items: center;
    width: 100%;
  }
  
  .du-hero-trust {
    justify-content: center;
  }
  
  /* WWD Section */
  .du-wwd-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .du-wwd-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .du-wwd-list {
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    max-width: 100%;
  }
  
  /* Zen Grid */
  .du-zen-grid {
    grid-template-columns: 1fr;
  }
  
  .du-zen-card {
    text-align: center;
    align-items: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-badge-focus {
    display: inline-block;
  }
  
  .du-zen-card .du-link-arrow {
    justify-content: center;
    width: 100%;
  }
  
  /* Principles */
  .du-principles-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .du-principle-card {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
  
  .du-principle-card .du-eyebrow-cnt {
    margin-bottom: 6px;
    justify-content: center;
  }
  
  /* Scenarios */
  .du-scenario-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .du-scenario-item {
    border-left: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .du-scenario-label {
    margin: 0 auto 8px auto;
    display: block;
    width: 100%;
  }
  
  .du-scenario-quote {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 500px;
  }
  
  .du-scenario-item .du-link-arrow {
    justify-content: center;
    width: 100%;
    margin-top: 12px;
  }
  
  /* Promise Grid */
  .du-promise-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .du-promise-box {
    padding: 40px 24px;
    margin: 0 16px;
  }
  
  /* TABLET: KI-Sektionen zu 1 Spalte */
  .du-dynamics-grid {
    grid-template-columns: 1fr !important;
  }
  
  .du-paper-grid,
  .du-bullets-wrapper,
  .du-usecase-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  .du-process-grid {
    grid-template-columns: 1fr !important;
  }
  
  .du-invest-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   18. RESPONSIVE - MOBILE (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
  
  /* Section Padding */
  .du-section {
    padding: 60px 0 !important;
  }
  
  .du-section-hero {
    padding: 20px 0 40px 0 !important;
  }
  
  /* Container */
  .du-container {
    padding: 0 16px;
  }
  
  /* Typography */
  .du-section-title {
    font-size: 30px;
  }
  
  /* Hero Section */
  .du-hero-container {
    padding: 0 20px;
    gap: 40px;
  }
  
  .du-hero-title {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .du-hero-text {
    font-size: 17px;
  }
  
  .du-hero-intro {
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .du-output-card {
    max-width: 100%;
  }
  
  .du-output-body {
    padding: 32px 24px;
  }
  
  .du-output-headline {
    font-size: 19px;
  }
  
  /* Buttons - Global für ALLE Buttons auf Mobile */
  .du-btn-pill {
    width: 100%;
    max-width: 420px;
    padding: 18px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }
  
  /* WWD Cards */
  .du-wwd-card {
    padding: 32px 20px;
    max-width: 90%;
    margin: 0 auto;
  }
  
  .du-wwd-list li {
    font-size: 15px;
  }
  
  /* Quote Box */
  .du-quote-box {
    padding: 40px 24px;
  }
  
  .du-quote-icon {
    font-size: 60px;
  }
  
  .du-quote-text {
    font-size: 18px;
  }
  
  /* Zen Cards */
  .du-zen-card {
    padding: 40px 24px;
  }
  
  .du-zen-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .du-zen-subtitle {
    font-size: 17px;
  }
  
  .du-zen-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }
  
  .du-zen-card .du-link-arrow {
    font-size: 15px;
    font-weight: 700;
  }
  
  /* Principle Cards */
  .du-principle-card {
    padding: 28px 24px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .du-principle-title {
    font-size: 18px;
    min-height: auto;
  }
  
  .du-principle-text {
    font-size: 14px;
  }
  
  /* CTA */
  .du-cta-card {
    padding: 50px 24px;
  }
  
  .du-cta-head {
    font-size: 26px;
  }
  
  .du-cta-text {
    font-size: 16px;
  }
  
  .du-cta-actions .du-hero-trust {
    font-size: 14px;
    font-weight: 600;
  }
  
  /* Promise Box */
  .du-promise-box {
    padding: 40px 20px;
    margin: 0 12px;
  }
  
  .du-promise-head {
    font-size: 18px;
  }
  
  .du-promise-desc {
    font-size: 15px;
  }
  
  /* Scenario Items */
  .du-scenario-item {
    padding: 32px 24px;
    max-width: 90%;
    margin: 0 auto;
  }
  
  .du-scenario-quote {
    font-size: 14px;
  }
  
  .du-scenario-item .du-link-arrow {
    font-size: 15px;
    font-weight: 700;
  }
  
  /* Utility */
  .du-br-desktop {
    display: none;
  }
}

/* ==========================================================================
   18. HEADER & NAVIGATION
   ========================================================================== */

/* --- HEADER BASIS --- */
.du-preview-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
  z-index: 9999;
  font-family: var(--du-font);
}

.du-header-inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.du-logo-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* --- NAVIGATION MITTE --- */
.du-nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
}

.du-nav-links a,
.du-dropdown-trigger {
  text-decoration: none;
  color: #1F2937 !important;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.2s ease;
  padding: 8px 16px;
  border-radius: 8px;
}

.du-nav-links a:hover,
.du-dropdown:hover .du-dropdown-trigger {
  background: #F8FAFC;
  color: var(--du-primary) !important;
}

/* --- DROPDOWN --- */
.du-dropdown {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: -20px;
}

.du-dropdown-trigger .arrow {
  font-size: 8px;
  margin-left: 5px;
  color: #94A3B8;
}

.du-dropdown-content {
  display: none;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--du-white);
  min-width: 280px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--du-border);
  border-top: 3px solid var(--du-primary);
  border-radius: 8px;
  padding: 15px 0;
  z-index: 10000;
}

.du-dropdown:hover .du-dropdown-content {
  display: block;
}

.du-dropdown-content a {
  display: block;
  padding: 12px 24px;
  color: #475569 !important;
  font-size: 14px;
  font-weight: 500;
}

.du-dropdown-content a:hover {
  background: var(--du-grey-bg);
  color: var(--du-primary) !important;
}

/* --- HEADER BUTTON --- */
.du-cta-wrap {
  flex: 0 0 auto;
}

.du-header-btn {
  background-color: var(--du-primary) !important;
  color: var(--du-white) !important;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  display: inline-block;
  transition: all 0.2s ease;
}

.du-header-btn:hover {
  background-color: var(--du-primary-dark) !important;
  color: var(--du-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 56, 179, 0.2);
}

/* --- MOBILE HAMBURGER --- */
.du-menu-toggle {
  display: none;
  width: 30px;
  height: 30px;
  background: transparent !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  cursor: pointer;
  z-index: 10001;
  margin-left: auto;
}

.du-menu-toggle span {
  width: 26px;
  height: 3px;
  background: var(--du-primary) !important;
  border-radius: 4px;
}

/* --- MOBILE FLYOUT --- */
#mobileNav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 380px;
  height: 100vh;
  background: var(--du-white) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 40px;
  transition: right 0.4s ease-in-out !important;
  z-index: 100000;
}

#mobileNav.active {
  right: 0 !important;
}

.du-close-btn {
  align-self: flex-end;
  font-size: 35px;
  color: #1F2937;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: 300;
}

.du-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.du-mobile-links a {
  text-decoration: none;
  color: #1F2937;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 5px;
}

.du-mobile-service-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.du-mobile-service-list a {
  font-size: 16px;
  font-weight: 400;
  color: #475569;
  margin-bottom: 0;
}

.du-mobile-kontakt {
  color: #1F2937 !important;
  font-weight: 600 !important;
}

.du-mobile-info-box {
  margin-top: auto;
  background: var(--du-grey-bg);
  padding: 20px;
  border-radius: 12px;
  font-size: 13px;
  color: #64748B;
  line-height: 1.6;
}

.du-mobile-info-box a {
  color: var(--du-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.du-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(31, 41, 55, 0.5);
  display: none;
  z-index: 99999;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .du-nav-links,
  .du-cta-wrap {
    display: none !important;
  }

  .du-menu-toggle {
    display: flex !important;
  }
}

/* ==========================================================================
   19. FOOTER
   ========================================================================== */

/* Footer Basis */
.du-preview-footer {
  background-color: #0B1221 !important;
  color: var(--du-white) !important;
  padding: 60px 0 40px 0;
  font-family: var(--du-font);
  margin-top: 80px;
}

.du-footer-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

/* Footer Brand */
.du-footer-brand p {
  color: #A0AEC0 !important;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 280px;
}

/* Footer Column Headings */
.du-footer-col h4 {
  color: var(--du-white) !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 24px;
  opacity: 1 !important;
}

/* Footer Links */
.du-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.du-footer-links li {
  margin-bottom: 12px;
}

.du-footer-links a {
  color: #A0AEC0 !important;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-block;
}

.du-footer-links a:hover {
  color: var(--du-white) !important;
  transform: translateX(4px);
}

/* Footer Bottom */
.du-footer-bottom {
  max-width: 1140px;
  margin: 60px auto 0 auto;
  padding: 30px 20px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.du-footer-bottom span {
  color: #A0AEC0 !important;
  font-size: 13px;
}

/* Footer Mobile */
@media (max-width: 768px) {
  .du-footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .du-footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* ==========================================================================
   20. KI-HERO SPECIAL (Entscheidungspapier Visual)
   ========================================================================== */

/* KI Hero Container - 2 Column Layout */
.du-ki-hero-wrapper {
  display: flex;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.du-ki-hero-content {
  flex: 1;
  min-width: 480px;
}

.du-ki-hero-visual {
  flex: 1;
  min-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.du-ki-visual-inner {
  position: relative;
  width: 100%;
  max-width: 540px;
}

/* Paper Visual Styles */
.du-paper-abstract {
  background: #FAFBFC;
  border: 1px solid #E6EAF2;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(17, 24, 39, 0.06);
  position: relative;
  z-index: 2;
  font-family: var(--du-font);
}

.du-paper__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.du-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.du-dots span:nth-child(1) { background: #FF5F57; }
.du-dots span:nth-child(2) { background: #FFBD2E; }
.du-dots span:nth-child(3) { background: #28CA41; }

.du-paper__kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #9CA3AF;
  font-weight: 650;
}

.du-paper__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.du-accentbar-soft {
  width: 3px;
  border-radius: 6px;
  background: linear-gradient(180deg, #21E8E6, #2038B3);
  flex: 0 0 auto;
  align-self: stretch;
  opacity: 0.7;
}

.du-paper__title-abstract {
  font-size: 19px;
  font-weight: 800;
  color: #6B7280;
  line-height: 1.25;
}

.du-paper__sub-abstract {
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 6px;
  line-height: 1.5;
}

.du-paper__lines-short span {
  display: block;
  height: 7px;
  border-radius: 8px;
  background: #F1F5F9;
  margin: 10px 0;
}

.du-paper__lines-short span:nth-child(1) { width: 95%; }
.du-paper__lines-short span:nth-child(2) { width: 75%; }

.du-kpis-abstract {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.du-kpi-v {
  background: var(--du-white);
  border: 1px solid #E6EAF2;
  border-radius: 14px;
  padding: 14px;
}

.du-kpi__label-v {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 700;
  text-transform: uppercase;
}

.du-kpi__value-v {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #9CA3AF;
}

.du-kpi--outcome-v {
  background: rgba(32, 56, 179, 0.02);
  border-color: rgba(32, 56, 179, 0.12);
}

.du-kpi__value--focus {
  margin-top: 4px;
  font-size: 17px;
  color: var(--du-primary);
  font-weight: 900;
}

.du-paper__footer-v {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}

.du-chip-v {
  font-size: 10px;
  color: #9CA3AF;
  border: 1px solid #E6EAF2;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--du-white);
  line-height: 1.4;
}

.du-stamp-v {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid #1F7A4D;
  color: #1F7A4D;
  background-color: rgba(31, 122, 77, 0.06);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 6px;
  transform: rotate(-6deg);
}

.du-shadowcard-v {
  position: absolute;
  inset: 20px -15px -15px 20px;
  background: rgba(32, 56, 179, 0.03);
  border-radius: 22px;
  z-index: 1;
}

.du-visual-caption p {
  font-size: 13px;
  line-height: 1.4;
  color: #6B7280;
  margin: 0;
}

.du-visual-caption {
  margin-top: 32px;
}

/* Hero CTA Group - Order System */
/* Hero CTA Group Base */
.du-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 24px;
}

.du-btn-secondary-link {
  font-size: 15px;
  color: #64748B;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.du-btn-secondary-link:hover {
  color: var(--du-primary);
  text-decoration: underline;
}

.du-btn-secondary-link span {
  transition: transform 0.2s ease;
}

.du-btn-secondary-link:hover span {
  transform: translateY(3px);
}

/* Desktop: Link rechts neben Button, Trust darunter */
@media (min-width: 1025px) {
  .du-hero-cta-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px 24px !important;
    flex-direction: row !important;
  }
  
  .du-hero-cta-group > * {
    flex-shrink: 0 !important;
  }
  
  .du-hero-trust {
    flex-basis: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 8px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  .du-ord-1 {
    order: 1 !important;
  }
  
  .du-ord-desktop-2 {
    order: 2 !important;
  }
  
  .du-ord-desktop-3 {
    order: 3 !important;
  }
}

/* Tablet/Mobile: Vertikal zentriert */
@media (max-width: 1024px) {
  .du-hero-cta-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  
  .du-btn-secondary-link {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  
  .du-hero-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    width: 100% !important;
    font-size: 11px !important;
  }
  
  .du-trust-sep {
    display: inline-block !important;
    margin: 0 6px !important;
  }
  
  /* Reihenfolge: Button → Trust → Link */
  .du-ord-mobile-2 { order: 2 !important; }
  .du-ord-mobile-3 { order: 3 !important; }
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
  
  /* KI Hero Wrapper - Column Layout */
  .du-ki-hero-wrapper {
    flex-direction: column;
    gap: 60px;
  }
  
  .du-ki-hero-content {
    order: 1;
    min-width: auto;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .du-ki-hero-visual {
    order: 2;
    min-width: auto;
    width: 100%;
    align-items: center;
  }
  
  .du-visual-caption {
    text-align: center;
  }
  
  /* KI Hero spezifisch - Container als Flex Column */
  .du-section-hero .du-hero-container {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  
  /* Content zentrieren */
  .du-section-hero .du-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    order: 2;
    min-width: auto;
  }
  
  /* Visual oben */
  .du-section-hero .du-hero-visual-area {
    order: 1;
    min-width: auto;
    width: 100%;
  }
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  
  /* KI Hero Mobile */
  .du-ki-hero-wrapper {
    padding: 0 16px;
  }
  
  .du-ki-hero-content {
    width: 100%;
    max-width: 100%;
  }
  
  .du-ki-hero-visual {
    width: 100%;
    max-width: 100%;
  }
  
  .du-ki-visual-inner {
    width: 100%;
    max-width: 100%;
  }
  
  /* Container mit Padding */
  .du-section-hero .du-hero-container {
    padding: 0 16px;
  }
  
  /* Paper Visual kleiner + zentriert + Padding */
  .du-paper-abstract {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Visual Area zentriert */
  .du-section-hero .du-hero-visual-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .du-section-hero .du-hero-visual {
    max-width: 100%;
    width: 100%;
  }
  
  /* Content auch mit Padding */
  .du-section-hero .du-hero-content {
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  
  /* Kleinere Schriften */
  .du-paper__title-abstract {
    font-size: 16px;
  }
  
  .du-paper__sub-abstract {
    font-size: 12px;
  }
  
  .du-kpis-abstract {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   21. SECTION: KI-SEO HERO (v1.4 Visual Framework)
   ========================================================================== */

/* KI-SEO Hero Wrapper */
.du-ki-hero-wrapper {
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.du-ki-hero-content {
  flex: 1;
  max-width: 600px;
}

.du-ki-hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

.du-ki-cta-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

/* Visual v1.4 Framework */
.du-v14-audit-container {
  width: 100%;
  max-width: 560px;
  font-family: var(--du-font);
}

.du-v14-document {
  background: var(--du-white);
  border: 1px solid var(--du-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.08);
  overflow: hidden;
  text-align: left;
}

.du-v14-header {
  background: var(--du-grey-bg);
  border-bottom: 1px solid var(--du-border);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.du-v14-dots {
  display: flex;
  gap: 8px;
}

.du-v14-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.du-v14-dots span:nth-child(1) { background: #FF5F56; }
.du-v14-dots span:nth-child(2) { background: #FFBD2E; }
.du-v14-dots span:nth-child(3) { background: #27C93F; }

.du-v14-type {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.du-v14-body {
  padding: 40px 32px;
}

/* Title Block */
.du-v14-title-block {
  display: flex;
  gap: 18px;
  margin-bottom: 45px;
}

.du-v14-accent-line {
  width: 3px;
  background: linear-gradient(180deg, #21E8E6, #2038B3);
  border-radius: 4px;
  flex-shrink: 0;
  align-self: stretch;
}

.du-v14-kicker {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 4px;
}

.du-v14-main-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--du-dark);
  margin: 0;
  line-height: 1.2;
}

/* Timeline Engine */
.du-v14-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.du-v14-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--du-border);
  z-index: 1;
}

.du-v14-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* Marker Stability */
.du-v14-marker-wrap {
  width: 18px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}

.marker-dot {
  width: 14px;
  height: 14px;
  background: var(--du-white);
  border: 2px solid var(--du-border);
  border-radius: 50%;
}

.is-done .marker-dot {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.marker-active {
  width: 14px;
  height: 14px;
  background: var(--du-primary);
  border-radius: 50%;
  position: relative;
}

.pulse {
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(32, 56, 179, 0.2);
  border-radius: 50%;
  animation: v14Pulse 2s infinite;
}

@keyframes v14Pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.marker-goal {
  width: 14px;
  height: 14px;
  background: var(--du-white);
  border: 2px solid var(--du-primary);
  border-radius: 3px;
}

/* Content Alignment */
.du-v14-step-content {
  display: flex;
  flex-direction: column;
}

.du-v14-step-content .label {
  font-size: 15px;
  font-weight: 700;
  color: var(--du-dark);
}

.du-v14-step-content .status {
  font-size: 13px;
  color: #64748B;
  margin-top: 1px;
}

/* Highlight Box */
.highlight-box {
  background: rgba(32, 56, 179, 0.04);
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(32, 56, 179, 0.1);
  margin-top: -12px;
  width: 100%;
}

.focus-badge {
  font-size: 9px;
  font-weight: 800;
  color: var(--du-primary);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Caption */
.du-v14-caption {
  margin-top: 32px;
  text-align: left;
}

.du-v14-caption p {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE: KI-SEO HERO
   ========================================================================== */

@media (max-width: 1024px) {
  .du-ki-hero-wrapper {
    flex-direction: column;
    gap: 50px;
    padding: 0 20px;
  }

  .du-ki-hero-content,
  .du-ki-hero-visual {
    width: 100%;
    max-width: 100%;
    flex: none;
    text-align: center;
  }

  .du-ki-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .du-ki-cta-buttons,
  .du-hero-trust,
  .du-hero-intro {
    justify-content: center;
  }

  .du-v14-audit-container {
    margin: 0 auto;
    max-width: 500px;
  }
}

@media (max-width: 767px) {
  .du-v14-body {
    padding: 30px 20px;
  }

  .du-v14-main-title {
    font-size: 18px;
  }

  .du-v14-timeline {
    gap: 24px;
  }

  .du-v14-step {
    gap: 15px;
  }

  .highlight-box {
    padding: 12px 16px;
  }

  .du-v14-caption {
    padding: 0 15px;
    text-align: center;
  }
}


/* ==========================================================================
   22. SECTION: KI-SEO VERSTÄNDNIS & ARCHITEKTUR
   ========================================================================== */

/* Split Layout */
.du-kiseo-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 60px;
  align-items: start;
}

.ki-seo-intro {
  display: flex;
  flex-direction: column;
}

.ki-seo-intro .du-eyebrow-cnt {
  justify-content: flex-start;
}

.ki-seo-intro .du-section-title {
  text-align: left;
  margin-bottom: 32px;
}

.ki-seo-text {
  font-size: 17px;
  color: #334155;
  line-height: 1.7;
  margin-bottom: 24px;
}

.ki-seo-highlight {
  font-size: 18px;
  color: #1E293B;
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* Info Box */
.ki-seo-info-box {
  background: rgba(32, 56, 179, 0.04);
  border-left: 4px solid var(--du-primary);
  padding: 32px 40px;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.ki-seo-info-box p {
  font-size: 17px;
  color: #334155;
  line-height: 1.7;
  margin: 0;
}

/* Architektur Visual */
.du-kiseo-architecture-final {
  width: 100%;
  max-width: 100%;
  font-family: var(--du-font);
  color: #1F2937;
}

.du-kiseo-artefact {
  background: var(--du-white);
  border: 1px solid var(--du-border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.04);
  overflow: hidden;
}

.du-kiseo-header {
  background: var(--du-grey-bg);
  border-bottom: 1px solid var(--du-border);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.du-window-dots {
  display: flex;
  gap: 8px;
}

.du-window-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.red { background: #FF5F56; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #27C93F; }

.du-header-tag {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.1em;
}

.du-kiseo-body {
  padding: 48px 40px;
  text-align: center;
}

.du-arch-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.du-zone-label,
.du-zone-label-accent {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #94A3B8;
}

.du-zone-label-accent {
  color: var(--du-primary);
}

.du-foundation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.du-foundation-item {
  padding: 12px;
  background: #F9FAFB;
  border: 1px solid #F1F5F9;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.du-flow-connection {
  height: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.du-flow-line-main {
  width: 2px;
  height: 100%;
  background: var(--du-border);
}

.du-flow-dots {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.du-flow-dots span {
  width: 2px;
  height: 2px;
  background: var(--du-primary);
  border-radius: 50%;
}

.du-synthesis-center {
  margin: 8px 0;
}

.du-ai-processor {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  border: 2px solid var(--du-primary);
  border-radius: 99px;
  background: var(--du-white);
  position: relative;
  box-shadow: 0 4px 20px rgba(32, 56, 179, 0.05);
}

.du-ai-core-glow {
  width: 10px;
  height: 10px;
  background: var(--du-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(32, 56, 179, 0.4);
}

.du-ai-text {
  font-size: 13px;
  font-weight: 800;
  color: var(--du-primary);
  letter-spacing: 0.1em;
}

.du-result-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
}

.du-result-main {
  background: var(--du-white);
  border: 1px solid var(--du-primary);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  text-align: left;
  box-shadow: 0 10px 30px rgba(32, 56, 179, 0.03);
}

.du-result-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.du-result-lines div {
  height: 4px;
  background: #F1F5F9;
  border-radius: 2px;
}

.line-full { width: 100%; }
.line-mid { width: 75%; background: #E2E8F0 !important; }
.line-short { width: 45%; background: var(--du-primary) !important; }

.du-badge-primary {
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--du-primary);
  color: var(--du-white);
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.du-result-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.du-meta-tag {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--du-grey-bg);
  border-radius: 4px;
  border: 1px solid #F1F5F9;
}

.du-kiseo-caption {
  margin-top: 20px;
}

.du-kiseo-caption p {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE: KI-SEO VERSTÄNDNIS
   ========================================================================== */

@media (max-width: 1024px) {
  .du-kiseo-split-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ki-seo-intro {
    order: 1;
    text-align: center;
    align-items: center;
  }

  .ki-seo-intro .du-eyebrow-cnt {
    justify-content: center;
  }

  .ki-seo-intro .du-section-title {
    text-align: center;
  }

  .ki-seo-visual {
    order: 2;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .du-kiseo-architecture-final {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 767px) {
  .du-kiseo-body {
    padding: 40px 20px;
  }

  .du-foundation-grid {
    grid-template-columns: 1fr;
  }

  .du-result-meta {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .ki-seo-info-box {
    padding: 24px 20px;
  }

  .du-kiseo-architecture-final {
    max-width: 100%;
  }
}

/* ==========================================================================
   23. SECTION: SEO LEISTUNGSVERSTÄNDNIS
   ========================================================================== */

/* Intro Block */
.seo-leistung-intro {
  max-width: 850px;
  margin-bottom: 60px;
}

.seo-leistung-intro .du-eyebrow-cnt {
  justify-content: flex-start;
}

.seo-leistung-text {
  font-size: 17px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 20px;
}

.seo-leistung-highlight {
  font-size: 17px;
  color: #1F2937;
  font-weight: 500;
  margin: 0;
}

/* Service Cards Grid */
.seo-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.service-card {
  background: var(--du-white);
  border: 1px solid var(--du-border);
  border-radius: 8px;
  padding: 32px;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card:hover {
  transform: translateY(-2px);
}

.service-accent {
  width: 24px;
  height: 3px;
  background-color: var(--du-primary);
  margin-bottom: 8px;
}

.service-title {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
  font-family: var(--du-font);
}

.service-text {
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
  font-family: var(--du-font);
}

/* Outro Block */
.seo-leistung-outro {
  text-align: center;
}

.seo-leistung-outro p {
  font-size: 17px;
  color: #1F2937;
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE: SEO LEISTUNGSVERSTÄNDNIS
   ========================================================================== */

@media (max-width: 1024px) {
  .seo-leistung-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .seo-leistung-intro .du-eyebrow-cnt {
    justify-content: center;
  }

  .seo-leistung-intro .du-section-title {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .service-card {
    padding: 24px;
  }

  .seo-service-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   24. SECTION: SEO RELEVANZFILTER V10 (Audit Visualisierung)
   ========================================================================== */

.du-audit-filter-v10 {
  --du-blue: #2038B3;
  --du-text: #1F2937;
  --du-muted: #6B7280;
  --du-line: #E2E8F0;
  --du-micro-bg: #E2E8F0;
  --du-micro-dark: #94A3B8;
  --du-card: #FFFFFF;
  width: 100%;
  padding: 80px 0;
  background: #f8fafc;
  font-family: var(--du-font);
}

.du-v10-canvas {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* Typografie */
.du-v10-h3,
.du-v10-sub,
.du-v10-title,
.du-v10-desc,
.du-v10-caption,
.du-v10-step,
.du-v10-scan-box span {
  font-family: var(--du-font);
}

.du-v10-header-group {
  height: 90px;
  text-align: center;
  margin-bottom: 50px;
}

.du-v10-h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--du-text);
  margin: 0 0 10px 0;
  line-height: 1.2;
  text-transform: none;
}

.du-v10-sub {
  font-size: 13px;
  color: var(--du-muted);
  margin: 0;
  line-height: 1.5;
}

/* Visual Area */
.du-v10-visual-area {
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Asset Stack */
.du-asset-stack-v10 {
  position: relative;
  width: 260px;
  height: 260px;
}

.du-card-v10 {
  position: absolute;
  width: 160px;
  height: 115px;
  background: var(--du-white);
  border: 1.5px solid var(--du-line);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.a1 { top: 0; left: 10px; transform: rotate(-6deg); z-index: 1; }
.a2 { top: 40px; left: 60px; transform: rotate(4deg); z-index: 2; }
.a3 { top: 80px; left: -10px; transform: rotate(-3deg); z-index: 3; }
.a4 { top: 120px; left: 70px; transform: rotate(1deg); z-index: 4; }
.a5 { top: 160px; left: 20px; transform: rotate(-2deg); z-index: 6; }

.du-asset-stack-v10:hover .a1 { transform: translate(-30px, -35px) rotate(-12deg); }
.du-asset-stack-v10:hover .a2 { transform: translate(75px, -45px) rotate(10deg); }
.du-asset-stack-v10:hover .a3 { transform: translate(-75px, 45px) rotate(-10deg); }
.du-asset-stack-v10:hover .a4 { transform: translate(55px, -35px) rotate(8deg); z-index: 10; }
.du-asset-stack-v10:hover .a5 { transform: translate(0px, 45px) rotate(0deg); z-index: 10; }

/* Card Content */
.du-c-head {
  font-size: 8px;
  font-weight: 800;
  color: var(--du-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.7;
}

.du-c-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-line-v10 {
  height: 6px;
  background: var(--du-micro-bg);
  border-radius: 3px;
  width: 100%;
}

.c-line-v10.short { width: 40%; }
.c-line-v10.mid { width: 70%; }
.c-line-v10.code { background: var(--du-micro-dark); opacity: 0.3; }

.c-block-v10 {
  height: 16px;
  background: var(--du-micro-bg);
  border-radius: 4px;
  width: 100%;
  margin-bottom: 2px;
}

.tree-v10 {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.t-node-v10 {
  width: 8px;
  height: 8px;
  background: var(--du-micro-dark);
  border-radius: 50%;
}

.t-connect-v10 {
  display: flex;
  gap: 12px;
  border-top: 2px solid var(--du-micro-bg);
  padding-top: 6px;
  margin-top: 6px;
}

.t-connect-v10 span {
  width: 6px;
  height: 6px;
  background: var(--du-micro-dark);
  border-radius: 50%;
}

.signals-v10 {
  align-items: center;
  position: relative;
  height: 40px;
  justify-content: center;
  display: flex;
}

.s-center {
  width: 8px;
  height: 8px;
  background: var(--du-micro-dark);
  border-radius: 50%;
}

.s-extra-large {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--du-micro-bg);
  border-radius: 50%;
  top: 5px;
  right: 20%;
}

.s-extra-small {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--du-micro-dark);
  border-radius: 50%;
  bottom: 10px;
  left: 15%;
}

.s-out {
  position: absolute;
  width: 100%;
  height: 100%;
}

.s-out span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--du-micro-bg);
  border-radius: 50%;
}

.s-out span:nth-child(1) { top: 0; left: 30%; }
.s-out span:nth-child(2) { bottom: 5px; right: 10%; }

.ai-box-v10 {
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--du-micro-dark);
  background: var(--du-white);
  border: 1px solid var(--du-line);
  padding: 6px 8px;
  border-radius: 4px;
  line-height: 1.4;
  width: fit-content;
}

/* Center Window */
.du-v10-window {
  margin-top: 100px;
  background: var(--du-white);
  border: 1px solid var(--du-line);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(17, 24, 39, 0.1);
  overflow: hidden;
}

.du-v10-win-head {
  background: #F8FAFC;
  border-bottom: 1px solid var(--du-line);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.du-v10-dots {
  display: flex;
  gap: 8px;
}

.du-v10-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.r { background: #FF5F56; }
.y { background: #FFBD2E; }
.g { background: #27C93F; }

.du-v10-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--du-blue);
  letter-spacing: 0.1em;
}

.du-v10-win-body {
  padding: 45px 30px;
  text-align: center;
}

.du-v10-icon {
  width: 50px;
  height: 50px;
  background: #F8FAFC;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--du-blue);
}

.du-v10-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--du-text);
  margin-bottom: 6px;
}

.du-v10-desc {
  font-size: 14px;
  color: var(--du-muted);
  margin-bottom: 30px;
}

.du-v10-scan-box {
  position: relative;
  border-top: 1px solid var(--du-line);
  padding-top: 15px;
}

.du-v10-scan-box span {
  font-size: 10px;
  font-weight: 700;
  color: var(--du-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scan-bar {
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--du-blue);
  box-shadow: 0 0 10px var(--du-blue);
  animation: v10scan 3s infinite ease-in-out;
}

@keyframes v10scan {
  0% { left: 0; }
  50% { left: calc(100% - 40px); }
  100% { left: 0; }
}

/* Right Roadmap */
.du-v10-roadmap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.du-v10-step {
  background: #F8FAFC;
  border: 1px solid var(--du-line);
  padding: 16px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--du-text);
  display: flex;
  align-items: center;
  gap: 18px;
}

.du-v10-step span {
  font-size: 11px;
  font-weight: 800;
  color: var(--du-blue);
  opacity: 0.5;
}

/* Captions */
.du-v10-caption {
  font-size: 11px;
  color: var(--du-muted);
  opacity: 0.7;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-top: 30px;
}

/* Connector */
.du-v10-connector {
  position: absolute;
  right: -60px;
  top: 60%;
  height: 2px;
  background: linear-gradient(to right, var(--du-line), transparent);
  width: 60px;
  transform: scaleX(-1);
}

/* ==========================================================================
   RESPONSIVE: RELEVANZFILTER V10
   ========================================================================== */

@media (max-width: 1024px) {
  .du-v10-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .du-v10-col {
    width: 100%;
    max-width: 500px;
    margin-bottom: 40px;
  }

  .du-v10-header-group {
    height: auto;
    margin-bottom: 30px;
  }

  .du-v10-center {
    margin-top: 60px !important;
    margin-bottom: 80px !important;
  }

  .du-v10-window {
    margin-top: 0;
  }

  .du-v10-caption {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .du-v10-connector {
    display: none;
  }
}

/* ==========================================================================
   25. SECTION: ZEITRAHMEN & WIRKUNG (Erwartungsmanagement)
   ========================================================================== */

.du-expectations-layout {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.du-expectations-header {
  margin-bottom: 48px;
}

.du-expectations-content {
  margin-bottom: 60px;
}

.du-expectations-content p {
  font-family: var(--du-font);
  font-size: 20px;
  line-height: 1.6;
  color: var(--du-body);
  margin-bottom: 24px;
}

/* Zeitlogik Akzent */
.du-time-logic-v1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 80px;
}

.du-time-item {
  font-family: var(--du-font);
  font-size: 14px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.du-time-sep {
  color: #CBD5E1;
  font-weight: 300;
}

/* Key Statement */
.du-key-statement-v1 {
  padding-top: 40px;
  border-top: 1px solid #E2E8F0;
  max-width: 700px;
  margin: 0 auto;
}

.du-key-statement-v1 p {
  font-family: var(--du-font);
  font-size: 22px;
  font-weight: 500;
  color: var(--du-dark);
  line-height: 1.5;
}

.du-key-statement-v1 p span {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--du-primary);
  font-size: 18px;
}

/* ==========================================================================
   RESPONSIVE: ZEITRAHMEN & WIRKUNG
   ========================================================================== */

@media (max-width: 767px) {
  .du-expectations-content p {
    font-size: 18px;
  }

  .du-key-statement-v1 p {
    font-size: 19px;
  }

  .du-time-logic-v1 {
    gap: 12px;
  }

  .du-time-item {
    font-size: 12px;
  }
}

/* ==========================================================================
   26. SECTION: LOCAL SEO HERO (Google Maps Visual)
   ========================================================================== */

/* Local Maps Visual Container */
.du-local-maps-visual {
  width: 100%;
  max-width: 560px;
  font-family: var(--du-font);
}

.du-maps-card {
  background: var(--du-white);
  border: 1px solid var(--du-border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}

/* Maps Header */
.du-maps-header {
  background: var(--du-grey-bg);
  border-bottom: 1px solid var(--du-border);
  padding: 24px;
}

.du-maps-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.du-maps-avatar {
  width: 56px;
  height: 56px;
  background: var(--du-primary);
  border-radius: 8px;
  flex-shrink: 0;
}

.du-maps-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.du-maps-line {
  height: 10px;
  background: #E2E8F0;
  border-radius: 4px;
}

.du-maps-line.long {
  width: 100%;
}

.du-maps-line.short {
  width: 60%;
}

/* Maps Body */
.du-maps-body {
  padding: 32px 24px;
}

.du-maps-action-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.du-maps-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  cursor: pointer;
}

.du-maps-btn.primary {
  background: rgba(32, 56, 179, 0.08);
  border: 2px solid var(--du-primary);
  color: var(--du-primary);
}

.du-maps-btn.secondary {
  background: rgba(34, 211, 238, 0.06);
  border: 2px solid #E0F2FE;
  color: #0891B2;
}

.du-maps-btn.tertiary {
  background: rgba(239, 68, 68, 0.06);
  border: 2px solid #FEE2E2;
  color: #DC2626;
}

.du-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.du-btn-icon.phone {
  background: var(--du-primary);
  position: relative;
}

.du-btn-icon.phone::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--du-white);
  border-radius: 50%;
}

.du-btn-icon.compare {
  background: #0891B2;
}

.du-btn-icon.forward {
  background: #DC2626;
}

/* Caption */
.du-local-caption {
  margin-top: 24px;
  text-align: center;
}

.du-local-caption p {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE: LOCAL SEO HERO
   ========================================================================== */

@media (max-width: 1024px) {
  .du-local-maps-visual {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .du-maps-header {
    padding: 20px;
  }

  .du-maps-avatar {
    width: 48px;
    height: 48px;
  }

  .du-maps-body {
    padding: 24px 20px;
  }

  .du-maps-btn {
    padding: 16px 20px;
    font-size: 12px;
  }

  .du-btn-icon {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   27. SECTION: LOCAL SEO WARUM (Cycle Visual)
   ========================================================================== */

/* Layout */
.du-local-warum-layout {
  display: flex;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap-reverse;
}

.du-local-cycle-visual {
  flex: 1;
  min-width: 340px;
}

.du-local-warum-content {
  flex: 1.2;
  min-width: 320px;
}

/* Cycle Visual Container */
.du-local-cycle-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 400px;
  margin: 0 auto;
}

/* Center Circle */
.du-cycle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  background: var(--du-white);
  border: 2px solid var(--du-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 10px 25px rgba(32, 56, 179, 0.1);
}

.du-cycle-center span {
  font-weight: 800;
  color: var(--du-primary);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* Cycle Cards */
.du-cycle-card {
  position: absolute;
  background: var(--du-white);
  padding: 20px;
  border-radius: 18px;
  width: 200px;
  text-align: center;
}

.du-cycle-card.top {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
}

.du-cycle-card.right {
  bottom: 10%;
  right: 0;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
}

.du-cycle-card.left {
  bottom: 10%;
  left: 0;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
}

.du-cycle-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

.du-cycle-title {
  font-weight: 700;
  color: #1F2937;
  font-size: 14px;
  margin-bottom: 4px;
}

.du-cycle-title.green {
  color: #065F46;
}

.du-cycle-title.red {
  color: #9F1239;
}

.du-cycle-desc {
  font-size: 12px;
  color: #64748B;
  line-height: 1.4;
}

.du-cycle-desc.green {
  color: #065F46;
  opacity: 0.8;
}

.du-cycle-desc.red {
  color: #9F1239;
  opacity: 0.8;
}

/* SVG Connections */
.du-cycle-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Content Styling */
.du-local-warum-content .du-eyebrow-cnt {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.du-local-warum-content .du-section-title {
  font-size: 38px;
  line-height: 1.15;
  margin-bottom: 24px;
  text-align: left;
}

.du-local-warum-content .du-section-title .highlight {
  color: var(--du-primary);
}

.du-local-text {
  font-size: 17px;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 20px;
}

.du-local-text:last-of-type {
  margin-bottom: 32px;
}

/* Benefits List */
.du-local-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.du-benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.du-benefit-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--du-primary);
}

.du-benefit-label {
  font-weight: 700;
  color: #1F2937;
  display: inline-block;
  width: 160px;
}

.du-benefit-text {
  color: #475569;
}

/* ==========================================================================
   RESPONSIVE: LOCAL SEO WARUM
   ========================================================================== */

@media (max-width: 1024px) {
  .du-local-warum-layout {
    flex-direction: column;
    gap: 60px;
  }

  .du-local-warum-content {
    text-align: center;
  }

  .du-local-warum-content .du-eyebrow-cnt {
    justify-content: center;
  }

  .du-local-warum-content .du-section-title {
    text-align: center;
  }

  .du-local-benefits {
    max-width: 600px;
    margin: 0 auto;
  }

  .du-benefit-item {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .du-local-cycle-container {
    height: 350px;
    max-width: 100%;
  }

  .du-cycle-center {
    width: 90px;
    height: 90px;
  }

  .du-cycle-center span {
    font-size: 12px;
  }

  .du-cycle-card {
    width: 160px;
    padding: 16px;
  }

  .du-cycle-icon {
    font-size: 18px;
  }

  .du-cycle-title {
    font-size: 13px;
  }

  .du-cycle-desc {
    font-size: 11px;
  }

  .du-local-warum-content .du-section-title {
    font-size: 30px;
  }

  .du-local-text {
    font-size: 16px;
  }

  .du-benefit-label {
    width: auto;
    display: block;
    margin-bottom: 4px;
  }
}



/* ==========================================================================
   RESPONSIVE: LOCAL SEO WARUM - COMPLETE FIX
   ========================================================================== */

@media (max-width: 1024px) {
  .du-local-warum-layout {
    flex-direction: column;
    gap: 60px;
  }

  /* Visual nach unten */
  .du-local-cycle-visual {
    order: 2;
    max-width: 500px;
    margin: 0 auto;
  }

  .du-local-warum-content {
    order: 1;
    text-align: center;
  }

  .du-local-warum-content .du-eyebrow-cnt {
    justify-content: center;
  }

  .du-local-warum-content .du-section-title {
    text-align: center;
  }

  .du-local-benefits {
    max-width: 600px;
    margin: 0 auto;
  }

  .du-benefit-item {
    text-align: left;
  }

  /* Tablet: Cycle Container enger zusammen */
  .du-local-cycle-container {
    max-width: 400px;
    height: 360px;
  }

  .du-cycle-card {
    width: 180px;
  }

  .du-cycle-card.top {
    top: 8%;
  }

  .du-cycle-card.right {
    bottom: 12%;
    right: 5%;
  }

  .du-cycle-card.left {
    bottom: 12%;
    left: 5%;
  }
}

@media (max-width: 767px) {
  /* Container zentriert */
  .du-local-warum-content {
    text-align: center;
    width: 100%;
  }

  .du-local-warum-content .du-section-title {
    font-size: 28px;
    text-align: center;
  }

  .du-local-text {
    font-size: 16px;
    text-align: center;
  }

  /* Benefits Liste zentriert */
  .du-local-benefits {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .du-benefit-item {
    text-align: left; /* Items bleiben links */
    width: 100%;
    max-width: 100%;
  }

  .du-benefit-item > div:last-child {
    display: block; /* Stack statt inline */
  }

  .du-benefit-label {
    width: 100%;
    display: block;
    margin-bottom: 4px;
  }

  .du-benefit-text {
    display: block;
    width: 100%;
  }

  /* Visual Fix */
  .du-local-cycle-container {
    max-width: 300px;
    height: 300px;
  }

  .du-cycle-center {
    width: 75px;
    height: 75px;
  }

  .du-cycle-card {
    width: 120px;
    padding: 10px;
  }

  .du-cycle-card.top {
    top: 3%;
  }

  .du-cycle-card.right {
    bottom: 5%;
    right: -5px;
  }

  .du-cycle-card.left {
    bottom: 5%;
    left: -5px;
  }
}

/* ==========================================================================
   FIX: HINTERGRUND-REINIGUNG VISUAL (image_bd817c.png)
   Entfernt das bläuliche Grau für absolute Transparenz auf Weiß
   ========================================================================== */

.du-v11-box, 
.du-v11-visual-wrapper, 
.du-v11-container,
.du-visual-box {
    background-color: #ffffff !important; /* Erzwingt reines Weiß */
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Entfernt den Schattenwurf der inneren Container, 
   der oft wie eine dunkle Fläche wirkt */
.du-v11-inner {
    background: transparent !important;
    box-shadow: none !important;
}

/* Die weißen Karten links und rechts brauchen einen sauberen Kontrast */
.du-v11-card, 
.du-v11-step {
    background-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; /* Dezenter Schatten */
}

/* Mobile Links – einheitliches Styling */
.du-mobile-links a {
  font-weight: 400 !important;
  font-size: 1rem !important;
  padding: 6px 0 !important;
}

/* Tablet: normales Menü ab 768px */
@media (min-width: 768px) {
  .du-nav-links { display: flex !important; }
  .du-menu-toggle { display: none !important; }
  .du-cta-wrap { display: flex !important; }
}

/* Z-Index Reihenfolge */
#overlay {
  z-index: 100000 !important;
}

.du-preview-header {
  z-index: 100001 !important;
}

#mobileNav {
  z-index: 100002 !important;
  background: #ffffff !important;
  padding: 20px 40px !important;
  overflow-y: auto !important;
}

#mobileNav .du-close-btn {
  margin-bottom: 10px !important;
}

#mobileNav .du-mobile-links {
  gap: 8px !important;
}

#mobileNav .du-mobile-info-box {
  margin-top: 24px !important;
  padding: 16px !important;
}

.du-contact-hero {
  padding-top: 160px !important;
}

/* Google Fonts Inter von RCB blocken */
@font-face {
  font-family: 'Inter';
  src: local('Outfit'), local('outfit-v15-latin-regular');
  font-display: swap;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-regular.woff2') format('woff2'),
		url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-300.woff2') format('woff2'),
		url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-300.woff') format('woff');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-500.woff2') format('woff2'),
		url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-500.woff') format('woff');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-600.woff2') format('woff2'),
		url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-600.woff') format('woff');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-700.woff2') format('woff2'),
		url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-700.woff') format('woff');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-800.woff2') format('woff2'),
		url('https://digital-uplift.com/wp-content/uploads/2026/04/outfit-v15-latin-800.woff') format('woff');
}
/* End Custom Fonts CSS */