@charset "UTF-8";
  
      /* ===== HERO ===== */
      .hero {
        position: relative;
        height: 640px;
        display: flex;
        align-items: center;
        overflow: hidden;
        color: #fff;
      }
      .hero-bg {
        position: absolute; inset: 0;
      }
      .hero-bg img {
        width: 100%; height: 100%;
        object-fit: cover; object-position: center 30%;
      }
      .hero-overlay {
        position: absolute; inset: 0;
        background: rgba(0,0,0,.10);
      }
      .hero-content {
        position: relative; z-index: 1;
        max-width: 540px;
        background: rgba(10,4,4,.15);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-radius: 16px;
        padding: 44px 48px;
        border: 1px solid rgba(255,255,255,.18);
        margin: 1cm auto 0;
        transform: translateX(-180px);
      }
      .hero-kicker {
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(255,255,255,.65);
        margin-bottom: 20px;
      }
      .hero-content h1 {
        line-height: 1.2;
        margin-bottom: 20px;
      }
      .hero-brand {
        display: block;
        font-family: 'Times New Roman', Times, serif;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--primary);
        text-shadow: -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff;
      }
      .hero-slogan {
        display: block;
        font-family: 'Dancing Script', 'Monotype Corsiva', cursive;
        font-size: clamp(1rem, 1.95vw, 1.5rem);
        font-weight: 400;
        margin-top: 6px;
        color: rgba(255,255,255,.88);
      }
      .hero-content p {
        font-size: 1.05rem;
        line-height: 1.7;
        color: rgba(255,255,255,.82);
        margin-bottom: 36px;
        max-width: 500px;
      }
      .hero-actions {
        display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
      }
      .hero-trust {
        display: flex; gap: 28px; flex-wrap: wrap;
        margin-top: 48px;
        padding-top: 28px;
        border-top: 1px solid rgba(255,255,255,.15);
      }
      .hero-trust-item {
        font-size: .78rem;
        color: rgba(255,255,255,.6);
        letter-spacing: .04em;
      }
      .hero-trust-item strong {
        display: block;
        font-size: .88rem;
        font-weight: 600;
        color: rgba(255,255,255,.9);
        margin-bottom: 2px;
      }
  
  
      .ablauf-heading {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 24px;
        text-align: left;
      }
      .ablauf-heading a {
        color: var(--primary);
        border-bottom: 1px solid transparent;
        transition: border-color .15s;
      }
      .ablauf-heading a:hover { border-color: var(--primary); }
  
      /* ===== BEREICHE ===== */
      .bereiche-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .bereich-card {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: box-shadow .2s, border-color .2s;
      }
      .bereich-card:hover {
        box-shadow: 0 8px 32px rgba(0,0,0,.08);
        border-color: #c8b8b8;
      }
      .bereich-img {
        height: 200px;
        overflow: hidden;
        background: #f0ece8;
      }
      .bereich-img img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform .3s;
      }
      .bereich-card:hover .bereich-img img { transform: scale(1.03); }
      .bereich-body {
        padding: 28px 28px 32px;
        flex: 1;
        display: grid;
        grid-template-rows: 24px auto 1fr auto;
        gap: 0;
      }
      .bereich-typ {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 0;
        align-self: center;
      }
      .bereich-body h3 {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 12px;
        margin-top: 8px;
        color: var(--text);
      }
      .bereich-body p {
        font-size: .86rem;
        color: var(--text-muted);
        line-height: 1.7;
        font-weight: 300;
        margin-bottom: 20px;
      }
      .bereich-link {
        font-size: .85rem;
        font-weight: 600;
        color: var(--primary);
      }
  
      /* ===== ERKLÄRER ===== */
      .erklaer-block {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 72px;
        align-items: start;
        margin-bottom: 56px;
      }
      .erklaer-antwort p {
        font-size: .98rem;
        line-height: 1.85;
        color: var(--text-muted);
        margin-bottom: 14px;
        font-weight: 300;
      }
      .erklaer-antwort p strong { color: var(--text); font-weight: 700; }
      .erklaer-antwort p em { color: var(--text); font-style: normal; font-weight: 400; }
  
      .ablauf-grid {
        display: grid;
        grid-template-columns: 1fr 48px 1fr 48px 1fr;
        grid-template-rows: auto auto;
        gap: 0;
      }
      /* Row 1: images + arrows */
      .ablauf-img {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        overflow: hidden;
        background: var(--bg-soft);
        grid-row: 1;
      }
      .ablauf-img img {
        width: 100%; height: 100%;
        object-fit: cover;
      }
      .ablauf-img-placeholder {
        width: 100%; height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        color: #a89a90;
        font-size: .75rem;
        text-align: center;
        padding: 12px;
        line-height: 1.4;
      }
      .ablauf-img-placeholder span {
        font-size: 2rem;
        opacity: .4;
      }
      .ablauf-arrow {
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 2rem;
        line-height: 1;
      }
      /* Row 2: labels */
      .ablauf-label {
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 14px;
        gap: 6px;
      }
      .ablauf-arrow-spacer {
        grid-row: 2;
      }
      .ablauf-num {
        width: 28px; height: 28px;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        font-size: .78rem;
        font-weight: 700;
        display: flex; align-items: center; justify-content: center;
      }
      .ablauf-text {
        font-size: .9rem;
        font-weight: 600;
        color: var(--text);
        text-align: center;
      }
  
      /* ===== VIDEOS ===== */
      .video-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 48px;
      }
      .video-frame {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        min-height: 200px;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: #000;
        box-shadow: var(--shadow);
      }
      .video-frame iframe,
      .video-frame > * {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
      }
      .video-frame .borlabs-cookie-content-blocker,
      .video-frame [class*="borlabs"] {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      @media (max-width: 560px) {
        .video-grid { grid-template-columns: 1fr; }
      }

      /* ===== FEATURES ===== */
      .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 40px;
      }
      .feature-item {
        background: #fff;
        padding: 28px 24px;
      }
      .feature-item h4 {
        font-size: .9rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text);
      }
      .feature-item p {
        font-size: .82rem;
        color: var(--text-muted);
        line-height: 1.65;
      }
      .feature-icon {
        width: 52px; height: 52px;
        margin-bottom: 14px;
      }
      .feature-icon img {
        width: 100%; height: 100%;
        object-fit: contain;
      }
      .vorteile-block {
        margin-top: 56px;
        border-top: 1px solid var(--border);
        padding-top: 48px;
      }
      .vorteile-label {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 24px;
      }
      .vorteile-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .vorteil-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      .vorteil-check {
        width: 20px; height: 20px;
        background: var(--primary);
        border-radius: 50%;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        margin-top: 1px;
      }
      .vorteil-check::after {
        content: '';
        display: block;
        width: 5px; height: 9px;
        border: 2px solid #fff;
        border-top: none; border-left: none;
        transform: rotate(45deg) translate(-1px, -1px);
      }
      .vorteil-item span {
        font-size: .9rem;
        font-weight: 400;
        color: var(--text);
        line-height: 1.5;
      }
  
      /* ===== PRODUKTE ===== */
      .produkt-row {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 24px;
      }
      .produkt-row.reverse { direction: rtl; }
      .produkt-row.reverse > * { direction: ltr; }
      .produkt-img {
        background: var(--bg-soft);
        display: flex; align-items: center; justify-content: center;
        padding: 40px;
        min-height: 260px;
      }
      .produkt-img img {
        max-height: 180px;
        max-width: 100%;
        object-fit: contain;
      }
      .phone-frame {
        position: relative;
        display: inline-block;
        background: #1a1a1a;
        border-radius: 28px;
        padding: 10px 8px 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
      }
      .phone-frame::before {
        content: '';
        display: block;
        width: 40px; height: 5px;
        background: #333;
        border-radius: 3px;
        margin: 0 auto 8px;
      }
      .phone-frame img {
        display: block;
        border-radius: 18px;
        max-height: 200px !important;
        max-width: 110px;
        object-fit: cover;
      }
      .produkt-body {
        padding: 44px 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .produkt-typ {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 10px;
      }
      .produkt-body h3 {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--text);
      }
      .produkt-body p {
        font-size: .92rem;
        color: var(--text-muted);
        line-height: 1.75;
        margin-bottom: 20px;
      }
      .produkt-link {
        font-size: .88rem;
        font-weight: 600;
        color: var(--primary);
        border-bottom: 1px solid transparent;
        transition: border-color .15s;
        width: fit-content;
      }
      .produkt-link:hover { border-color: var(--primary); }
  
      /* ===== ORGELTYPEN ===== */
      .orgeltypen-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
      }
      .orgeltyp {
        background: #fff;
        padding: 36px 32px;
      }
      .orgeltyp-icon {
        font-size: 1.4rem;
        margin-bottom: 14px;
        color: var(--primary);
      }
      .orgeltyp h3 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--text);
      }
      .orgeltyp p {
        font-size: .86rem;
        color: var(--text-muted);
        line-height: 1.7;
        margin-bottom: 10px;
      }
      .orgeltyp-tech {
        font-size: .78rem;
        color: #aaa;
        font-style: italic;
      }
  
      /* ===== CTA ABSCHLUSS ===== */
      .cta-block {
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 56px 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
      }
      .cta-block-text h2 {
        font-size: clamp(1.3rem, 2.5vw, 1.7rem);
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text);
      }
      .cta-block-text p {
        font-size: .95rem;
        color: var(--text-muted);
        line-height: 1.65;
      }
      .cta-block-actions {
        display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap;
      }
  
      /* ===== SECTION LABELS ===== */
      .section-label {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 12px;
      }
      .section-heading {
        font-size: clamp(1.5rem, 2.8vw, 2rem);
        font-weight: 600;
        line-height: 1.25;
        margin-bottom: 16px;
        color: var(--text);
      }
      .section-sub {
        font-size: 1rem;
        color: var(--text-muted);
        line-height: 1.7;
        max-width: 600px;
        margin-bottom: 48px;
      }
  
      /* ===== RESPONSIVE ===== */
      @media (max-width: 1024px) {
        .bereiche-grid { grid-template-columns: repeat(2, 1fr); }
        .erklaer-block { grid-template-columns: 1fr; gap: 32px; }
        .features-grid { grid-template-columns: repeat(2, 1fr); }
        .produkt-row { grid-template-columns: 1fr; }
        .produkt-row.reverse { direction: ltr; }
        .produkt-img { min-height: 200px; }
        .cta-block { flex-direction: column; text-align: center; padding: 40px 28px; }
        .vorteile-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 768px) {
        .hero { height: auto; min-height: 520px; padding: 40px 0; }
        .hero-content {
          transform: none;
          max-width: 100%;
          padding: 32px 24px;
          margin: 0;
        }
        .hero-brand { font-size: clamp(1.8rem, 8vw, 2.4rem); }
        .hero-slogan { font-size: clamp(.95rem, 3.5vw, 1.2rem); }
        .hero-content p { font-size: .95rem; margin-bottom: 24px; }
        .hero-trust { gap: 16px; margin-top: 28px; padding-top: 20px; }
        .bereiche-grid { grid-template-columns: 1fr; }
        .ablauf-grid { grid-template-columns: 1fr; row-gap: 24px; }
        .ablauf-arrow { display: none; }
        .ablauf-arrow-spacer { display: none; }
        .features-grid { grid-template-columns: 1fr; }
        .orgeltypen-grid { grid-template-columns: 1fr; }
        .vorteile-grid { grid-template-columns: repeat(2, 1fr); }
        .cta-block-actions { flex-direction: column; width: 100%; }
        .cta-block-actions .btn { width: 100%; justify-content: center; }
      }
      @media (max-width: 480px) {
        .vorteile-grid { grid-template-columns: 1fr; }
        .hero-actions { flex-direction: column; }
        .hero-actions .btn { width: 100%; justify-content: center; }
        .hero-content { padding: 28px 20px; }
      }