/*! /julia-digitale-rezeptionistin Page Styles (Hotel WA + Demo + Mobile Fixes) · 2026-08-08 */

/* =====================================================
   CSS Hotel WA Agent — FINAL CSS v6 (Maximum Specificity)
   - Überschreibt ALLE globalen Regeln
   - Ultra-spezifische Selektoren
   - Sanfte Übergänge garantiert
   - Kompakter Hero garantiert
===================================================== */

/* ---------- Base reset ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* FORCE INTER */
.jh-wrap,
.jh-wrap * {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

html {
    scroll-behavior: smooth;
}

/* ---------- CSS Variables ---------- */
:root {
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.70);
    --muted2: rgba(255, 255, 255, 0.55);
    --panel: rgba(255, 255, 255, 0.06);
    --panel2: rgba(255, 255, 255, 0.04);
    --stroke: rgba(255, 255, 255, 0.10);
    --accent: #2d7cff;
    --accent2: #00d3ff;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    --shadow2: 0 16px 50px rgba(0, 0, 0, 0.40);
    --r1: 18px;
    --r2: 26px;
    --max: 1120px;
    --baseBlue: #0b1f33;
}

/* =====================================================
   WRAPPER / FULLBLEED
===================================================== */
.jh-wrap {
    background: transparent !important;
    color: var(--text) !important;
}

.jh-fullbleed {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* =====================================================
   SECTION / CONTAINER
===================================================== */
.jh-section {
    width: 100% !important;
    padding: 100px 0 !important;
    position: relative !important;
}

.jh-container {
    max-width: var(--max) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =====================================================
   HERO - KOMPAKT (MAXIMUM SPECIFICITY)
===================================================== */
.jh-section.jh-hero,
section.jh-hero,
.jh-hero {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 60px 0 100px !important;
    position: relative !important;
}

/* Sanfter Gradient-Übergang am unteren Hero-Rand */
.jh-section.jh-hero::after,
section.jh-hero::after,
.jh-hero::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 300px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 31, 51, 0.3) 40%, rgba(11, 31, 51, 0.7) 70%, var(--baseBlue) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

@media (min-width: 768px) {

    .jh-section.jh-hero,
    section.jh-hero,
    .jh-hero {
        padding: 70px 0 110px !important;
    }
}

/* =====================================================
   BACKGROUND SYSTEM (MAXIMUM SPECIFICITY)
===================================================== */
.jh-section.jh-bg--hero,
section.jh-bg--hero,
.jh-bg--hero {
    background:
        radial-gradient(1100px 650px at 20% 10%, rgba(45, 124, 255, 0.35), transparent 60%),
        radial-gradient(900px 520px at 78% 18%, rgba(0, 211, 255, 0.15), transparent 62%),
        linear-gradient(180deg, #000 0%, #0b1f33 85%, #0b1f33 100%) !important;
    background-size: cover !important;
}

.jh-section.jh-bg--base,
section.jh-bg--base,
.jh-bg--base {
    background:
        radial-gradient(1200px 700px at 50% -10%, rgba(45, 124, 255, 0.12), transparent 55%),
        radial-gradient(900px 520px at 80% 10%, rgba(0, 211, 255, 0.05), transparent 60%),
        var(--baseBlue) !important;
    background-size: cover !important;
    position: relative !important;
}

/* ⭐ KRITISCH: Sanfter Übergang oben bei ALLEN Base-Sections */
.jh-section.jh-bg--base::before,
section.jh-bg--base::before,
.jh-bg--base::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 250px !important;
    background: linear-gradient(180deg, rgba(11, 31, 51, 0) 0%, rgba(11, 31, 51, 0.5) 50%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.jh-section.jh-bg--hero+.jh-section.jh-bg--base,
.jh-bg--hero+.jh-bg--base {
    background:
        radial-gradient(1400px 500px at 50% 0%, rgba(45, 124, 255, 0.18), transparent 50%),
        radial-gradient(1200px 700px at 50% -10%, rgba(45, 124, 255, 0.12), transparent 55%),
        radial-gradient(900px 520px at 80% 10%, rgba(0, 211, 255, 0.05), transparent 60%),
        var(--baseBlue) !important;
}

/* =====================================================
   TYPOGRAPHY (MAXIMUM SPECIFICITY)
===================================================== */
.jh-section .jh-h1,
.jh-hero .jh-h1,
.jh-h1 {
    font-size: clamp(32px, 4.5vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin: 16px 0 12px !important;
    text-align: center !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jh-section .jh-h2,
.jh-head .jh-h2,
.jh-h2 {
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 600 !important;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jh-section .jh-h3,
.jh-card .jh-h3,
.jh-h3 {
    margin: 0 0 10px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.3 !important;
}

/* ⭐⭐⭐ SUPER KRITISCH: Mehr Abstand nach Sub-Text */
.jh-section .jh-head .jh-sub,
.jh-hero .jh-head .jh-sub,
section.jh-hero .jh-head .jh-sub,
.jh-head .jh-sub,
.jh-sub {
    max-width: 720px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
}

.jh-section .jh-lead,
.jh-head .jh-lead,
.jh-lead {
    max-width: 720px !important;
    margin: 10px auto 0 !important;
    color: var(--muted) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* =====================================================
   LAYOUT HELPERS (MAXIMUM SPECIFICITY)
===================================================== */
.jh-section .jh-row,
.jh-hero .jh-row,
.jh-head .jh-row,
.jh-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ⭐⭐⭐ SUPER KRITISCH: Mehr Abstand zwischen Button-Zeile und Pill-Zeile */
.jh-section.jh-hero .jh-head .jh-row+.jh-row,
.jh-hero .jh-head .jh-row+.jh-row,
.jh-hero .jh-row+.jh-row,
.jh-head .jh-row+.jh-row {
    margin-top: 24px !important;
}

/* =====================================================
   SECTION HEAD (MAXIMUM SPECIFICITY)
===================================================== */
.jh-section .jh-head,
.jh-hero .jh-head,
section.jh-hero .jh-head,
.jh-head {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.jh-section .jh-head .jh-h2,
.jh-head .jh-h2 {
    margin-bottom: 20px !important;
}

.jh-section .jh-head .jh-sub,
.jh-head .jh-sub {
    margin: 0 auto 28px !important;
}

/* =====================================================
   BUTTONS
===================================================== */
.jh-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    border: 1px solid var(--stroke) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
}

.jh-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px) !important;
}

.jh-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: var(--shadow2) !important;
}

.jh-btn-primary:hover {
    filter: brightness(1.1) !important;
}

/* =====================================================
   PILLS / TAGS
===================================================== */
.jh-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: var(--panel) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    color: var(--muted) !important;
    backdrop-filter: blur(6px) !important;
}

.jh-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    box-shadow: 0 0 8px rgba(45, 124, 255, .7) !important;
}

/* =====================================================
   CARDS / GLASS
===================================================== */
.jh-card {
    background: var(--panel2) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: var(--r1) !important;
    padding: 30px 26px !important;
    box-shadow: var(--shadow2) !important;
    backdrop-filter: blur(10px) !important;
    transition: all .25s ease !important;
}

.jh-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow) !important;
}

.jh-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: var(--r1) !important;
    backdrop-filter: blur(10px) !important;
}

.jh-cardTop {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.jh-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--stroke) !important;
}

.jh-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: rgba(255, 255, 255, 0.85) !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.jh-tag {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--stroke) !important;
    color: var(--muted2) !important;
    font-size: 12px !important;
}

.jh-card p,
.jh-card .jh-p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* =====================================================
   GRIDS
===================================================== */
.jh-grid {
    display: grid !important;
    gap: 20px !important;
}

.jh-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.jh-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

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

@media(max-width: 1024px) {
    .jh-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .jh-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media(max-width: 560px) {

    .jh-grid-4,
    .jh-grid-3,
    .jh-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* =====================================================
   QUOTES / TESTIMONIALS
===================================================== */
.jh-quote {
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.jh-quoteText {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--text) !important;
    font-style: italic !important;
}

.jh-quoteFooter {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.jh-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--panel) !important;
    border: 1px solid var(--stroke) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

.jh-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin-bottom: 2px !important;
}

.jh-role {
    font-size: 13px !important;
    color: var(--muted2) !important;
}

/* =====================================================
   CTA SECTION
===================================================== */
.jh-cta {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 60px 24px !important;
}

.jh-cta .jh-h2 {
    margin-bottom: 16px !important;
}

.jh-cta .jh-sub {
    margin-bottom: 32px !important;
}

/* =====================================================
   PARAGRAPH
===================================================== */
.jh-p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* =====================================================
   SPLIT-SECTION
===================================================== */
.jh-split {
    display: grid !important;
    grid-template-columns: 1.05fr 1.2fr !important;
    gap: 28px !important;
    align-items: center !important;
    margin-top: 24px !important;
}

@media(max-width: 900px) {
    .jh-split {
        grid-template-columns: 1fr !important;
    }
}

.jh-photo {
    overflow: hidden !important;
    border-radius: var(--r2) !important;
    border: 1px solid var(--stroke) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: var(--shadow2) !important;
}

.jh-photo img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transform: scale(1.01) !important;
}

.jh-aboutBox {
    padding: 34px 30px !important;
}

.jh-aboutBox .jh-h2,
.jh-aboutBox .jh-sub {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.jh-aboutBox .jh-sub {
    max-width: none !important;
}

.jh-cal {
    border-radius: var(--r2) !important;
    overflow: hidden !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: var(--shadow2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* =====================================================
   HERO VISUAL
===================================================== */
.jh-heroVisual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 12px auto 12px !important;
    position: relative !important;
    z-index: 2 !important;
}

.jh-heroVisualFrame {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
}

.jh-heroVisualFrame::before {
    content: "" !important;
    position: absolute !important;
    inset: -25% !important;
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 180, 255, .18), rgba(0, 180, 255, 0) 60%),
        radial-gradient(circle at 50% 85%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%) !important;
    pointer-events: none !important;
}

.jh-heroMaxImg {
    position: absolute !important;
    inset: 12% !important;
    width: 76% !important;
    height: 76% !important;
    object-fit: cover !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .04) !important;
}

.jh-heroVisualHint {
    font-size: 12px !important;
    opacity: .55 !important;
}

@media (max-width: 900px) {
    .jh-heroVisualFrame {
        width: 140px !important;
        height: 140px !important;
        max-width: 140px !important;
        max-height: 140px !important;
    }
}

@media (min-width: 901px) {
    .jh-heroVisualFrame {
        width: 180px !important;
        height: 180px !important;
        max-width: 180px !important;
        max-height: 180px !important;
    }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px) {
    .jh-section {
        padding: 80px 0 !important;
    }

    .jh-section.jh-hero,
    section.jh-hero,
    .jh-hero {
        padding: 50px 0 90px !important;
    }

    .jh-container {
        padding: 0 20px !important;
    }

    .jh-h1 {
        font-size: 30px !important;
    }

    .jh-h2 {
        font-size: 28px !important;
    }

    .jh-sub {
        font-size: 16px !important;
    }

    .jh-head {
        margin-bottom: 40px !important;
    }
}

/* ===== FINALE LÖSUNG: Gradienten direkt im Background ===== */

/* Hero mit sanftem Übergang nach unten */
.jh-section.jh-bg--hero,
section.jh-bg--hero,
.jh-bg--hero {
    background:
        /* Gradient nach unten (300px) */
        linear-gradient(180deg,
            transparent 0%,
            transparent calc(100% - 300px),
            rgba(11, 31, 51, 0.3) calc(100% - 180px),
            rgba(11, 31, 51, 0.7) calc(100% - 90px),
            #0b1f33 100%),
        /* Original Glows */
        radial-gradient(1100px 650px at 20% 10%, rgba(45, 124, 255, 0.35), transparent 60%),
        radial-gradient(900px 520px at 78% 18%, rgba(0, 211, 255, 0.15), transparent 62%),
        linear-gradient(180deg, #000 0%, #0b1f33 85%, #0b1f33 100%) !important;
    background-size: 100% 100%, cover, cover, cover !important;
}

/* Base Sections mit sanftem Übergang nach oben */
.jh-section.jh-bg--base,
section.jh-bg--base,
.jh-bg--base {
    background:
        /* Gradient nach oben (250px) */
        linear-gradient(180deg,
            rgba(11, 31, 51, 0) 0%,
            rgba(11, 31, 51, 0.5) 125px,
            transparent 250px,
            transparent 100%),
        /* Original Glows */
        radial-gradient(1200px 700px at 50% -10%, rgba(45, 124, 255, 0.12), transparent 55%),
        radial-gradient(900px 520px at 80% 10%, rgba(0, 211, 255, 0.05), transparent 60%),
        #0b1f33 !important;
    background-size: 100% 100%, cover, cover, cover !important;
    position: relative !important;
}

/* Erste Base Section nach Hero: Extra Glow */
.jh-section.jh-bg--hero+.jh-section.jh-bg--base,
.jh-bg--hero+.jh-bg--base {
    background:
        /* Gradient nach oben (250px) */
        linear-gradient(180deg,
            rgba(11, 31, 51, 0) 0%,
            rgba(11, 31, 51, 0.5) 125px,
            transparent 250px,
            transparent 100%),
        /* Extra Glow oben */
        radial-gradient(1400px 500px at 50% 0%, rgba(45, 124, 255, 0.18), transparent 50%),
        radial-gradient(1200px 700px at 50% -10%, rgba(45, 124, 255, 0.12), transparent 55%),
        radial-gradient(900px 520px at 80% 10%, rgba(0, 211, 255, 0.05), transparent 60%),
        #0b1f33 !important;
    background-size: 100% 100%, cover, cover, cover, cover !important;
}

/* =====================================================
   MAX-SEITE SPEZIFISCH - Überschreibt globales CSS
===================================================== */

/* Fix für "Vielleicht kennen Sie das" Cards */
/* cardTop und H3 sollen auf EINER Zeile sein */
html.jh-ai-page .jh-glass.jh-card .jh-cardTop,
html.jh-ai-page .jh-card .jh-cardTop {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

/* H3 direkt nach cardTop: KEIN Abstand nach oben */
html.jh-ai-page .jh-cardTop+.jh-h3,
html.jh-ai-page .jh-cardTop+h3 {
    margin-top: 0 !important;
}

  .demo-section {
      background: linear-gradient(180deg, #0b1f33 0%, #0d2240 100%);
      padding: 80px 24px;
      font-family: 'Inter', sans-serif;
  }

  html.jh-ai-page .demo-section {
      width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;

      background: rgba(45, 124, 255, 0.04) !important;

      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

      padding: 80px 24px !important;
      overflow: visible !important;
  }

  .demo-inner {
      max-width: 640px;
      margin: 0 auto;
  }

  .demo-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(45, 124, 255, 0.12);
      border: 1px solid rgba(45, 124, 255, 0.25);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(120, 180, 255, 1);
      margin-bottom: 20px;
  }

  .demo-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2d7cff;
      box-shadow: 0 0 6px rgba(45, 124, 255, 0.8);
      animation: blink 2s infinite;
  }

  @keyframes blink {

      0%,
      100% {
          opacity: 1
      }

      50% {
          opacity: .3
      }
  }

  .demo-title {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 10px;
      text-align: center;
  }

  .demo-title span {
      background: linear-gradient(90deg, #2d7cff, #00d3ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .demo-sub {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      text-align: center;
      margin-bottom: 36px;
  }

  .demo-steps {
      display: flex;
      gap: 0;
      margin-bottom: 36px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      overflow: hidden;
  }

  .demo-step {
      flex: 1;
      padding: 16px 12px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
  }

  .demo-step:last-child {
      border-right: none;
  }

  .demo-step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2d7cff, #00d3ff);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 8px;
  }

  .demo-step-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.4;
  }

  .demo-card {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  }

  .demo-card-title {
      font-size: 18px;
      font-weight: 700;
      color: #111827;
      margin-bottom: 4px;
  }

  .demo-card-sub {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 24px;
  }

  .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
  }

  @media(max-width: 520px) {
      .form-row {
          grid-template-columns: 1fr;
      }

      .demo-steps {
          flex-direction: column;
      }

      .demo-step {
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .demo-step:last-child {
          border-bottom: none;
      }

      .demo-title {
          font-size: 24px;
      }
  }

  .form-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
  }

  .form-group.full {
      grid-column: 1 / -1;
  }

  .form-label {
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      letter-spacing: 0.03em;
  }

  .form-input {
      padding: 10px 12px;
      border: 1.5px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      color: #111827;
      background: #f9fafb;
      outline: none;
      transition: border-color .15s, background .15s;
      width: 100%;
      box-sizing: border-box;
  }

  .form-input:focus {
      border-color: #2d7cff;
      background: #fff;
  }

  .form-input::placeholder {
      color: #9ca3af;
  }

  .date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
  }

  .btn-demo-submit {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #2d7cff, #00d3ff);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      font-family: 'Inter', sans-serif;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      margin-top: 8px;
      transition: filter .2s, transform .1s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }

  .btn-demo-submit:hover {
      filter: brightness(1.08);
  }

  .btn-demo-submit:active {
      transform: scale(.99);
  }

  .btn-demo-submit:disabled {
      opacity: .6;
      cursor: not-allowed;
  }

  .demo-disclaimer {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 14px;
      padding: 12px 14px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
  }

  .demo-disclaimer-text {
      font-size: 12px;
      color: #15803d;
      line-height: 1.5;
  }

  .demo-success {
      display: none;
      text-align: center;
      padding: 32px 16px;
  }

  .demo-success-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      font-size: 28px;
  }

  .demo-success-title {
      font-size: 20px;
      font-weight: 700;
      color: #111827;
      margin-bottom: 8px;
  }

  .demo-success-sub {
      font-size: 14px;
      color: #6b7280;
      line-height: 1.6;
  }

  .demo-error {
      display: none;
      padding: 10px 14px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 8px;
      font-size: 13px;
      color: #dc2626;
      margin-top: 10px;
      text-align: center;
  }

  /* Flatpickr Fix — verhindert Überschreibung durch globales CSS */

  .flatpickr-calendar {
      background: #ffffff !important;
      color: #111827 !important;
      font-family: Inter, sans-serif !important;
      border-radius: 12px !important;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
      border: 1px solid #e5e7eb !important;
      z-index: 999999 !important;
      position: fixed !important;
  }

  .flatpickr-day {
      color: #111827 !important;
      background: transparent !important;
  }

  .flatpickr-day:hover {
      background: #eff6ff !important;
      color: #1e40af !important;
  }

  .flatpickr-day.selected,
  .flatpickr-day.selected:hover {
      background: #2d7cff !important;
      border-color: #2d7cff !important;
      color: #ffffff !important;
  }

  .flatpickr-day.inRange {
      background: #dbeafe !important;
      border-color: #dbeafe !important;
      color: #1e40af !important;
      box-shadow: -5px 0 0 #dbeafe, 5px 0 0 #dbeafe !important;
  }

  .flatpickr-day.flatpickr-disabled,
  .flatpickr-day.flatpickr-disabled:hover {
      color: #d1d5db !important;
      background: #f9fafb !important;
      text-decoration: line-through !important;
      cursor: not-allowed !important;
  }

  .flatpickr-months,
  .flatpickr-month {
      background: #f9fafb !important;
      color: #111827 !important;
      fill: #111827 !important;
  }

  .flatpickr-current-month,
  .flatpickr-current-month span,
  .flatpickr-current-month input {
      color: #111827 !important;
      font-weight: 600 !important;
  }

  .flatpickr-weekday {
      color: #6b7280 !important;
      background: #f9fafb !important;
  }

  .flatpickr-prev-month,
  .flatpickr-next-month {
      fill: #6b7280 !important;
  }

  .flatpickr-prev-month:hover,
  .flatpickr-next-month:hover {
      fill: #2d7cff !important;
  }

  .numInputWrapper span {
      border-color: #e5e7eb !important;
  }

  .flatpickr-calendar.open {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
  }

  .demo-card {
      position: relative;
      overflow: visible !important;
  }

  .demo-section {
      overflow: visible !important;
  }

  .flatpickr-calendar {
      background: #fff !important;
      opacity: 1 !important;
      color: #111827 !important;
      z-index: 9999999 !important;
  }

  .flatpickr-calendar * {
      opacity: 1 !important;
  }

  .flatpickr-day {
      color: #111827 !important;
  }

  .flatpickr-calendar,
  .flatpickr-calendar.open {
      background: #ffffff !important;
      opacity: 1 !important;
      color: #111827 !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .25) !important;
  }

  .flatpickr-months,
  .flatpickr-month,
  .flatpickr-weekdays,
  .flatpickr-weekday {
      background: #ffffff !important;
      color: #111827 !important;
      opacity: 1 !important;
  }

  .flatpickr-current-month,
  .flatpickr-current-month span,
  .flatpickr-current-month input {
      color: #111827 !important;
      opacity: 1 !important;
  }

  .flatpickr-day {
      background: #ffffff !important;
      color: #111827 !important;
      opacity: 1 !important;
      border-radius: 999px !important;
  }

  .flatpickr-day:hover {
      background: #eff6ff !important;
      color: #1d4ed8 !important;
  }

  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
      background: #2d7cff !important;
      color: #ffffff !important;
      border-color: #2d7cff !important;
  }

  .flatpickr-day.inRange {
      background: #dbeafe !important;
      color: #1e40af !important;
      box-shadow: none !important;
  }

  .flatpickr-day.disabled,
  .flatpickr-day.flatpickr-disabled {
      background: #f3f4f6 !important;
      color: #c4c4c4 !important;
  }

  .flatpickr-day.flatpickr-disabled,
  .flatpickr-day.flatpickr-disabled:hover,
  .flatpickr-day.disabled,
  .flatpickr-day.disabled:hover {
      background: #f3f4f6 !important;
      color: #c4c4c4 !important;
      text-decoration: line-through !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
  }

  html.jh-ai-page .demo-inner-wide {
      max-width: 980px !important;
      display: grid !important;
      grid-template-columns: 1fr 1.1fr !important;
      gap: 36px !important;
      align-items: center !important;
      margin: 0 auto !important;
  }

  html.jh-ai-page .demo-left {
      text-align: left !important;
  }

  html.jh-ai-page .demo-left .demo-title {
      text-align: left !important;
      margin-bottom: 14px !important;
  }

  html.jh-ai-page .demo-left .demo-sub {
      text-align: left !important;
      margin-bottom: 20px !important;
  }

  html.jh-ai-page .demo-benefits {
      display: grid !important;
      gap: 8px !important;
      margin-bottom: 18px !important;
      font-size: 14px !important;
      color: rgba(255, 255, 255, .78) !important;
  }

  html.jh-ai-page .demo-mini-flow {
      display: inline-flex !important;
      padding: 10px 14px !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .06) !important;
      border: 1px solid rgba(255, 255, 255, .1) !important;
      color: rgba(255, 255, 255, .72) !important;
      font-size: 13px !important;
  }

  html.jh-ai-page .demo-card-compact {
      max-width: 520px !important;
      padding: 26px !important;
  }

  html.jh-ai-page .demo-disclaimer-compact {
      display: block !important;
      margin-top: 12px !important;
      padding: 10px 12px !important;
      font-size: 12px !important;
      color: #15803d !important;
      background: #f0fdf4 !important;
      border: 1px solid #bbf7d0 !important;
      border-radius: 8px !important;
      text-align: center !important;
  }

  @media (max-width: 820px) {
      html.jh-ai-page .demo-inner-wide {
          grid-template-columns: 1fr !important;
          gap: 28px !important;
      }

      html.jh-ai-page .demo-left,
      html.jh-ai-page .demo-left .demo-title,
      html.jh-ai-page .demo-left .demo-sub {
          text-align: center !important;
      }

      html.jh-ai-page .demo-mini-flow {
          display: flex !important;
          justify-content: center !important;
      }
  }

  /* =====================================================
   MOBILE FIX — ans Ende des globalen CSS (CSS-Tab)
   einfügen. Überschreibt beide CSS-Systeme.
===================================================== */

  @media (max-width: 768px) {

      /* ---- Globale Regel: alles linksbündig ---- */
      html.jh-ai-page .sec-label,
      html.jh-ai-page h2,
      html.jh-ai-page .sec-desc,
      html.jh-ai-page .hero-sub,
      html.jh-ai-page .jh-h2,
      html.jh-ai-page .jh-sub,
      html.jh-ai-page .jh-lead,
      html.jh-ai-page .jh-head {
          text-align: left !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
      }

      /* ---- Hero ---- */
      html.jh-ai-page .hero-inner {
          text-align: left !important;
      }

      html.jh-ai-page .hero-meta {
          justify-content: flex-start !important;
      }

      html.jh-ai-page .hero-inner>div[style*="display:flex"] {
          text-align: left !important;
      }

      /* ---- Demo Section ---- */
      html.jh-ai-page .demo-section {
          padding: 48px 16px !important;
      }

      html.jh-ai-page .demo-inner-wide {
          grid-template-columns: 1fr !important;
          gap: 28px !important;
      }

      html.jh-ai-page .demo-left,
      html.jh-ai-page .demo-left .demo-title,
      html.jh-ai-page .demo-left .demo-sub,
      html.jh-ai-page .demo-title,
      html.jh-ai-page .demo-sub {
          text-align: left !important;
      }

      html.jh-ai-page .demo-mini-flow {
          display: flex !important;
          justify-content: flex-start !important;
      }

      /* ---- Wrap-Elemente mit text-align:center ---- */
      html.jh-ai-page .wrap {
          text-align: left !important;
      }

      html.jh-ai-page .wrap[style*="text-align:center"],
      html.jh-ai-page .wrap[style*="text-align: center"] {
          text-align: left !important;
      }

      /* ---- Gästegedächtnis ---- */
      html.jh-ai-page .memory-card {
          flex-direction: column !important;
      }

      html.jh-ai-page .memory-stat {
          text-align: left !important;
      }

      html.jh-ai-page .memory-stat-label {
          text-align: left !important;
      }

      html.jh-ai-page .memory-grid {
          grid-template-columns: 1fr !important;
      }

      /* ---- Social Proof ---- */
      html.jh-ai-page .proof-bar {
          justify-content: flex-start !important;
          text-align: left !important;
      }

      html.jh-ai-page .proof-stat {
          text-align: left !important;
      }

      /* ---- Bewertungen ---- */
      html.jh-ai-page .bewertungen-grid {
          grid-template-columns: 1fr !important;
      }

      /* ---- WhatsApp Stats ---- */
      html.jh-ai-page .wa-stats-grid {
          grid-template-columns: 1fr !important;
      }

      /* ---- Pricing Box ---- */
      html.jh-ai-page .sec>.wrap>div[style*="text-align:center"],
      html.jh-ai-page .sec>.wrap>div[style*="text-align: center"] {
          text-align: left !important;
      }

      /* ---- FAQ CTA ---- */
      html.jh-ai-page .faq-body {
          font-size: 14px !important;
      }

      /* ---- Architektur ---- */
      html.jh-ai-page .arch-grid {
          grid-template-columns: repeat(2, 1fr) !important;
      }

      /* ---- Jannes Section ---- */
      html.jh-ai-page .jannes-flex {
          flex-direction: column !important;
          align-items: flex-start !important;
      }

      html.jh-ai-page .jannes-flex>div:last-child {
          text-align: left !important;
          min-width: unset !important;
      }

      /* ---- CTA Box ---- */
      html.jh-ai-page .cta-box {
          text-align: left !important;
          padding: 32px 20px !important;
      }

      html.jh-ai-page .cta-box p {
          text-align: left !important;
          margin: 0 0 24px 0 !important;
      }

      html.jh-ai-page .cta-meta {
          text-align: left !important;
      }

      /* ---- Spec Rows ---- */
      html.jh-ai-page .spec-row {
          flex-direction: column !important;
          gap: 8px !important;
      }

      html.jh-ai-page .spec-label {
          min-width: unset !important;
      }

      /* ---- WhatsApp Headline mit Logo ---- */
      html.jh-ai-page div[style*="justify-content:center"][style*="align-items:center"] {
          justify-content: flex-start !important;
      }

      /* ---- Video Section ---- */
      html.jh-ai-page .wrap[style*="text-align:center"] .sec-label,
      html.jh-ai-page .wrap[style*="text-align:center"] h2,
      html.jh-ai-page .wrap[style*="text-align:center"] .sec-desc {
          text-align: left !important;
      }

  }

  @media (max-width: 480px) {
      html.jh-ai-page .proof-bar {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 16px !important;
      }

      html.jh-ai-page .proof-divider {
          display: none !important;
      }

      html.jh-ai-page .arch-grid {
          grid-template-columns: 1fr !important;
      }

      html.jh-ai-page .ki-grid {
          grid-template-columns: 1fr !important;
      }
  }

  /* =====================================================
   MOBILE FIX v2 — Ergänzung, ans Ende des globalen CSS
===================================================== */

  @media (max-width: 768px) {

      /* ---- 4,9 Sterne Box — zentriert lassen ---- */
      html.jh-ai-page .bewertungen-grid>div:last-child {
          text-align: center !important;
      }

      html.jh-ai-page .bewertungen-grid>div:last-child>div[style*="text-align:center"],
      html.jh-ai-page .bewertungen-grid>div:last-child>div[style*="justify-content:center"] {
          text-align: center !important;
          justify-content: center !important;
      }

      /* ---- Bewertungen linke Spalte — linksbündig ---- */
      html.jh-ai-page .bewertungen-grid>div:first-child {
          text-align: left !important;
      }

      /* ---- Multimodal Highlight-Box ---- */
      html.jh-ai-page div[style*="margin-top: 24px"][style*="padding: 22px 28px"],
      html.jh-ai-page div[style*="margin-top:24px"][style*="padding:22px 28px"] {
          text-align: left !important;
      }

      html.jh-ai-page div[style*="margin-top: 24px"][style*="padding: 22px 28px"]>div,
      html.jh-ai-page div[style*="margin-top:24px"][style*="padding:22px 28px"]>div {
          text-align: left !important;
      }

      /* ---- "Warum kein E-Mail" Box — Text linksbündig ---- */
      html.jh-ai-page div[style*="font-size:28px"][style*="flex-shrink:0"]+div {
          text-align: left !important;
      }

      html.jh-ai-page .wrap div[style*="display:flex"][style*="align-items:flex-start"]>div:last-child {
          text-align: left !important;
      }

      html.jh-ai-page .wrap div[style*="display:flex"][style*="align-items:flex-start"]>div:last-child div,
      html.jh-ai-page .wrap div[style*="display:flex"][style*="align-items:flex-start"]>div:last-child p {
          text-align: left !important;
      }

      /* ---- WhatsApp Headline (Logo + h2 nebeneinander) ---- */
      html.jh-ai-page div[style*="display:flex"][style*="justify-content:center"][style*="margin-bottom:8px"] {
          justify-content: flex-start !important;
      }

          /* =====================================================
       MOBILE FIX v3 — weitere Ergänzung ans Ende CSS-Tab
    ===================================================== */
    
          @media (max-width: 768px) {
    
              /* ---- 4,9★ Box: Zeilen-Tabelle linksbündig ---- */
              html.jh-ai-page .bewertungen-grid>div:last-child div[style*="justify-content:space-between"] {
                  justify-content: space-between !important;
                  text-align: left !important;
              }
    
              html.jh-ai-page .bewertungen-grid>div:last-child div[style*="justify-content:space-between"]>span:first-child {
                  text-align: left !important;
              }
    
              /* 4,9 Zahl + Stern zentriert lassen */
              html.jh-ai-page .bewertungen-grid>div:last-child>div:first-child {
                  text-align: center !important;
              }
    
              html.jh-ai-page .bewertungen-grid>div:last-child>div:first-child>div {
                  justify-content: center !important;
              }
    
              /* ---- "Warum kein E-Mail" Box: volle Breite, kein Overflow ---- */
              html.jh-ai-page .wrap>div[style*="background:var(--panel2)"][style*="display:flex"],
              html.jh-ai-page .wrap>div[style*="background: var(--panel2)"][style*="display:flex"] {
                  width: 100% !important;
                  box-sizing: border-box !important;
                  flex-direction: column !important;
                  gap: 10px !important;
              }
    
              html.jh-ai-page .wrap>div[style*="background:var(--panel2)"][style*="display:flex"]>div,
              html.jh-ai-page .wrap>div[style*="background: var(--panel2)"][style*="display:flex"]>div {
                  text-align: left !important;
              }
    
              /* Emoji-Icon nicht zu groß */
              html.jh-ai-page .wrap>div[style*="background:var(--panel2)"]>div[style*="font-size:28px"],
              html.jh-ai-page .wrap>div[style*="background: var(--panel2)"]>div[style*="font-size:28px"] {
                  font-size: 22px !important;
              }
    
          }

  }