:root {
      --navy:        #1D3A52;
      --navy-dark:   #142838;
      --navy-mid:    #2E5170;
      --gold:        #C8902A;
      --gold-light:  #E8B860;
      --gold-pale:   #F7EDD6;
      --gold-ultra:  #FDF6E8;
      --white:       #FFFFFF;
      --cream:       #FAFAF8;
      --border:      #E8E0D0;
      --mid:         #6B7A8B;
      --charcoal:    #1D3A52;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Nunito', sans-serif;
      background: var(--cream);
      color: var(--navy);
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* ── NAVBAR ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(250,250,248,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 0 5%;
      display: flex; align-items: center; justify-content: space-between;
      height:90px;
      transition: box-shadow .3s;
    }
    nav.scrolled { box-shadow: 0 2px 24px rgba(29,58,82,.1); }

    .nav-logo img { height: 52px; width: auto; }
    .nav-tagline {
      font-size: .72rem; color: var(--gold);
      font-weight: 600; letter-spacing: .04em;
      margin-top: -.2rem;
    }

    .nav-links { display: flex; gap: 2rem; list-style: none; }
    .nav-links a {
      font-size: .85rem; font-weight: 600; letter-spacing: .05em;
      text-transform: uppercase; color: var(--mid);
      text-decoration: none; transition: color .2s;
    }
    .nav-links a:hover { color: var(--gold); }

    .nav-cta {
      background: var(--gold) !important;
      color: white !important;
      padding: .55rem 1.4rem;
      border-radius: 40px;
      transition: background .2s !important;
    }
    .nav-cta:hover { background: var(--gold-light) !important; color: white !important; }

    .hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
    .hamburger span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      background: linear-gradient(155deg, var(--white) 0%, var(--gold-ultra) 60%, #f0e8d4 100%);
      display: flex; align-items: center;
      padding: 120px 5% 80px;
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      width: 700px; height: 700px;
      border-radius: 50%;
      border: 70px solid rgba(200,144,42,.08);
      right: -180px; top: -120px;
    }
    .hero::after {
      content: '';
      position: absolute;
      width: 420px; height: 420px;
      border-radius: 50%;
      border: 50px solid rgba(29,58,82,.06);
      right: 80px; bottom: -100px;
    }

    .hero-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
      width: 100%; overflow: hidden;
    }

    .hero-tag {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .75rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--gold);
      background: var(--gold-pale); padding: .4rem 1rem;
      border-radius: 40px; margin-bottom: 1.5rem;
      border: 1px solid rgba(200,144,42,.2);
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.6rem, 4.5vw, 3.8rem);
      font-weight: 700;
      line-height: 1.15;
      color: var(--navy);
      margin-bottom: 1.5rem;
    }
    .hero h1 em {
      font-style: italic; color: var(--gold);
    }

    .hero-tagline {
      font-size: 1rem; color: var(--gold);
      font-weight: 700; margin-bottom: .6rem; letter-spacing: .02em;
    }

    .hero-desc {
      font-size: 1.05rem; color: var(--mid);
      font-weight: 400; max-width: 480px;
      margin-bottom: 2.5rem;
    }

    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

    .btn-primary {
      background: var(--gold);
      color: white;
      padding: .9rem 2.2rem;
      border-radius: 50px;
      text-decoration: none;
      font-size: .9rem; font-weight: 700; letter-spacing: .03em;
      transition: all .25s;
      box-shadow: 0 4px 20px rgba(200,144,42,.35);
      display: inline-block;
    }
    .btn-primary:hover {
      background: #b07a20;
      box-shadow: 0 6px 28px rgba(200,144,42,.45);
      transform: translateY(-1px);
    }

    .btn-secondary {
      color: var(--navy);
      text-decoration: none;
      font-size: .9rem; font-weight: 600;
      padding: .9rem 1.8rem;
      border: 2px solid var(--border);
      border-radius: 50px;
      transition: all .25s;
      display: inline-block;
    }
    .btn-secondary:hover {
      border-color: var(--gold);
      color: var(--gold);
    }

    .hero-price-badge {
      margin-top: 2.5rem;
      display: inline-flex; align-items: center; gap: 1rem;
      background: white; border: 1.5px solid var(--border);
      border-radius: 16px; padding: 1rem 1.4rem;
      box-shadow: 0 4px 20px rgba(29,58,82,.08);
    }
    .hero-price-badge .amount {
      font-family: 'Playfair Display', serif;
      font-size: 2.6rem; font-weight: 700; color: var(--gold);
      line-height: 1;
    }
    .hero-price-badge .amount sup { font-size: 1.2rem; }
    .hero-price-badge .label { font-size: .78rem; color: var(--mid); line-height: 1.5; }
    .hero-price-badge .label strong { display: block; color: var(--navy); font-weight: 700; font-size: .85rem; }

    /* hero right card */
    .hero-visual { position: relative; z-index: 1; overflow: hidden; isolation: isolate; }

    .hero-card {
      background: white;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(29,58,82,.12);
      border: 1px solid var(--border);
      transform: translateZ(0);
      will-change: transform;
      isolation: isolate;
      contain: paint;
    }

    .hero-card-img {
      width: 100%; height: 260px;
      background: linear-gradient(135deg, var(--gold-pale) 0%, var(--gold-ultra) 50%, #efe3c8 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 5rem;
      animation: float 4s ease-in-out infinite;
    }
    @keyframes float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-12px); }
    }

    .hero-card-body { padding: 1.8rem; }
    .hero-card-body h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem; color: var(--navy);
    }
    .hero-card-body p { font-size: .88rem; color: var(--mid); margin-bottom: 1.2rem; }

    .checks { display: flex; flex-direction: column; gap: .5rem; }
    .check-item {
      display: flex; align-items: center; gap: .7rem;
      font-size: .85rem; color: var(--navy); font-weight: 600;
    }
    .check-item::before {
      content: '✓';
      width: 22px; height: 22px;
      background: var(--gold-pale);
      color: var(--gold);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 800;
      flex-shrink: 0;
    }

    /* ── TRUST BAR ── */
    .trust-bar {
      background: var(--navy);
      color: white;
      padding: 1.3rem 5%;
      display: flex; justify-content: center; align-items: center;
      gap: 3rem; flex-wrap: wrap;
    }
    .trust-item {
      display: flex; align-items: center; gap: .6rem;
      font-size: .82rem; font-weight: 600; letter-spacing: .03em;
    }
    .trust-item .icon { font-size: 1.1rem; }

    /* ── SECTION BASE ── */
    section { padding: 100px 5%; }
    .section-inner { max-width: 1200px; margin: 0 auto; }

    .section-label {
      font-size: .75rem; font-weight: 800; letter-spacing: .12em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: .8rem;
    }
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 700; line-height: 1.2;
      color: var(--navy);
      margin-bottom: 1rem;
    }
    .section-title em { font-style: italic; color: var(--gold); }
    .section-sub {
      font-size: 1rem; color: var(--mid); max-width: 560px;
      font-weight: 400; margin-bottom: 3.5rem;
    }

    /* ── WHY ── */
    .why { background: white; }

    .why-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
    }

    .why-card {
      background: var(--cream);
      border-radius: 20px;
      padding: 2.2rem;
      border: 1.5px solid var(--border);
      transition: transform .3s, box-shadow .3s, border-color .3s;
      position: relative; overflow: hidden;
    }
    .why-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(29,58,82,.1);
      border-color: var(--gold-light);
    }
    .why-card::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      opacity: 0; transition: opacity .3s;
    }
    .why-card:hover::after { opacity: 1; }

    .why-icon { font-size: 2rem; margin-bottom: 1.2rem; display: block; }
    .why-card h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.25rem; font-weight: 700; margin-bottom: .6rem; color: var(--navy);
    }
    .why-card p { font-size: .9rem; color: var(--mid); }

    /* ── LEISTUNGEN ── */
    .leistungen { background: var(--gold-ultra); }

    .leistungen-inner {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
    }

    .leistungen-bg {
      background: white;
      border-radius: 24px;
      padding: 2.5rem;
      border: 1.5px solid var(--border);
      box-shadow: 0 8px 30px rgba(29,58,82,.07);
    }
    .leistungen-bg h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--navy);
    }

    .leistung-row {
      display: flex; align-items: flex-start; gap: .8rem;
      padding: .8rem 0;
      border-bottom: 1px solid var(--border);
    }
    .leistung-row:last-child { border-bottom: none; }
    .leistung-check {
      width: 22px; height: 22px; flex-shrink: 0;
      background: var(--gold); border-radius: 50%;
      color: white; display: flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 800; margin-top: 2px;
    }
    .leistung-text { font-size: .9rem; color: var(--navy); font-weight: 500; }

    .info-box {
      background: white; border-radius: 16px;
      padding: 1.5rem; border: 1.5px solid var(--border);
      margin-top: 1.5rem;
    }
    .info-box h4 {
      font-weight: 700; font-size: .9rem; margin-bottom: .8rem;
      color: var(--navy);
      display: flex; align-items: center; gap: .5rem;
    }
    .info-box ul { list-style: none; font-size: .85rem; color: var(--mid); }
    .info-box ul li { padding: .25rem 0; }
    .info-box ul li::before { content: '›  '; color: var(--gold); font-weight: 800; }

    /* ── TARIFF ── */
    .tariff { background: white; }

    .tariff-card {
      max-width: 780px; margin: 0 auto;
      background: var(--cream);
      border-radius: 28px;
      border: 1.5px solid var(--border);
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(29,58,82,.08);
    }

    .tariff-header {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
      color: white; padding: 2.5rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 1.5rem;
    }
    .tariff-header h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.7rem; font-weight: 700;
    }
    .tariff-header p { opacity: .7; font-size: .88rem; margin-top: .4rem; }

    .tariff-price { text-align: right; }
    .tariff-price .big {
      font-family: 'Playfair Display', serif;
      font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--gold-light);
    }
    .tariff-price .big sup { font-size: 1.5rem; }
    .tariff-price .small { font-size: .8rem; opacity: .7; }

    .tariff-body { padding: 2.5rem; }

    .tariff-rows { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); }
    .tariff-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1rem 1.4rem;
      background: white; font-size: .9rem;
      border-bottom: 1px solid var(--border);
    }
    .tariff-row:last-child { border-bottom: none; }
    .tariff-row:nth-child(odd) { background: var(--gold-ultra); }
    .tariff-row .key { color: var(--mid); font-size: .85rem; }
    .tariff-row .val { font-weight: 700; color: var(--navy); }

    .tariff-cta {
      margin-top: 2rem;
      display: flex; flex-direction: column; align-items: center; gap: .8rem;
    }
    .tariff-cta .btn-primary { width: 100%; text-align: center; font-size: 1rem; padding: 1.1rem; }
    .tariff-cta .note { font-size: .78rem; color: var(--mid); }

    /* ── PROCESS ── */
    .process { background: var(--gold-ultra); }

    .steps {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem; position: relative;
    }
    .steps::before {
      content: '';
      position: absolute;
      top: 36px; left: 10%; right: 10%;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-pale), var(--gold-light), var(--gold-pale));
    }

    .step { text-align: center; position: relative; z-index: 1; }
    .step-num {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: white;
      border: 2.5px solid var(--gold-light);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.2rem;
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem; font-weight: 700; color: var(--gold);
      box-shadow: 0 4px 20px rgba(200,144,42,.15);
    }
    .step h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; color: var(--navy);
    }
    .step p { font-size: .82rem; color: var(--mid); }

    /* ── RISIKO ── */
    .risiko-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
    }
    .risiko-card {
      background: var(--gold-ultra); border-radius: 16px; padding: 1.4rem;
      border: 1.5px solid var(--border); text-align: center;
      font-size: .88rem; color: var(--mid);
      transition: border-color .25s, transform .25s;
    }
    .risiko-card:hover { border-color: var(--gold-light); transform: translateY(-2px); }
    .risiko-card .emoji { font-size: 1.8rem; margin-bottom: .6rem; display: block; }
    .risiko-card strong { display: block; color: var(--navy); font-weight: 700; margin-bottom: .2rem; }

    /* ── FAQ ── */
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

    .faq-item {
      background: white;
      border-radius: 16px;
      padding: 1.6rem;
      border: 1.5px solid var(--border);
      cursor: pointer;
      transition: border-color .2s;
    }
    .faq-item:hover { border-color: var(--gold-light); }
    .faq-item.open { border-color: var(--gold); }

    .faq-q {
      font-weight: 700; font-size: .92rem; color: var(--navy);
      display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    }
    .faq-q::after {
      content: '+'; font-size: 1.5rem; color: var(--gold); flex-shrink: 0;
      transition: transform .3s;
    }
    .faq-item.open .faq-q::after { transform: rotate(45deg); }

    .faq-a {
      font-size: .85rem; color: var(--mid); margin-top: 1rem;
      line-height: 1.7; display: none;
    }
    .faq-item.open .faq-a { display: block; }

    /* ── CTA BANNER ── */
    .cta-banner {
      background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
      color: white;
      padding: 80px 5%;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .cta-banner::before {
      content: '';
      position: absolute; width: 500px; height: 500px;
      border-radius: 50%; border: 60px solid rgba(200,144,42,.1);
      right: -100px; top: -150px;
    }
    .cta-balloon {
      font-size: 3rem; margin-bottom: 1.5rem; display: block;
      animation: float 3s ease-in-out infinite;
    }

    .cta-banner h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
      margin-bottom: 1rem; position: relative; z-index: 1;
    }
    .cta-banner h2 em { font-style: italic; color: var(--gold-light); }
    .cta-banner p { color: rgba(255,255,255,.65); margin-bottom: .5rem; position: relative; z-index: 1; }
    .cta-tagline-banner {
      font-size: 1.1rem; font-weight: 700;
      color: var(--gold-light); margin-bottom: 2.5rem;
      position: relative; z-index: 1;
    }
    .cta-banner .btn-primary {
      background: var(--gold); color: white;
      font-size: 1rem; padding: 1.1rem 2.8rem;
      position: relative; z-index: 1;
    }
    .cta-banner .btn-primary:hover { background: var(--gold-light); }

    /* ── FOOTER ── */
    footer {
      background: var(--navy-dark);
      color: rgba(255,255,255,.45);
      padding: 3rem 5%;
      font-size: .82rem;
    }
    .footer-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    }
    .footer-logo img { height: 44px; width: auto; filter: brightness(0) invert(1) opacity(.7); }
    .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .footer-links a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s; }
    .footer-links a:hover { color: var(--gold-light); }

    /* ── ANIMATIONS ── */
    .fade-in {
      opacity: 1; transform: translateY(0);
      transition: opacity .7s ease, transform .7s ease;
    }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* ── MOBILE ── */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .hero-inner { grid-template-columns: 1fr; }
      .hero-visual { display: none; }
      .why-grid { grid-template-columns: 1fr; }
      .leistungen-inner { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      .steps::before { display: none; }
      .faq-grid { grid-template-columns: 1fr; }
      .risiko-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .steps { grid-template-columns: 1fr; }
      .risiko-grid { grid-template-columns: 1fr; }
      .trust-bar { gap: 1.2rem; }
      .tariff-header { flex-direction: column; }
      .tariff-price { text-align: left; }
    }

    /* ── PREISRECHNER ── */
    .price-calculator {
      max-width: 780px; margin: 0 auto 3rem;
      background: white; border-radius: 28px;
      border: 1.5px solid var(--border); overflow: hidden;
      box-shadow: 0 8px 40px rgba(29,58,82,.08);
    }
    .calc-header {
      background: linear-gradient(135deg, var(--gold), #b07a20);
      color: white; padding: 2rem 2.5rem; text-align: center;
    }
    .calc-header h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem; font-weight: 700; margin-bottom: .4rem;
    }
    .calc-header p { opacity: .85; font-size: .95rem; }
    .calc-body { padding: 2.5rem; }
    .calc-slider-wrap { margin-bottom: 2rem; }
    .calc-slider {
      width: 100%; height: 8px;
      -webkit-appearance: none; appearance: none;
      background: var(--gold-pale); border-radius: 4px;
      outline: none; cursor: pointer;
    }
    .calc-slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--gold); box-shadow: 0 2px 10px rgba(200,144,42,.4);
      cursor: pointer; transition: transform .15s;
    }
    .calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
    .calc-slider-labels {
      display: flex; justify-content: space-between;
      font-size: .75rem; color: var(--mid); margin-top: .5rem;
    }
    .calc-result {
      display: flex; align-items: center; justify-content: center;
      gap: 2rem; flex-wrap: wrap;
      background: var(--gold-ultra); border-radius: 20px;
      padding: 1.8rem 2rem; margin-bottom: 1.8rem;
      border: 1.5px solid var(--gold-pale);
    }
    .calc-result-left, .calc-result-right { text-align: center; }
    .calc-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); margin-bottom: .4rem; }
    .calc-cost { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--navy); }
    .calc-premium { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; }
    .calc-note { font-size: .75rem; color: var(--mid); margin-top: .3rem; }
    .calc-arrow { font-size: 1.8rem; color: var(--gold-light); }
    .calc-cta { width: 100%; text-align: center; font-size: 1rem; padding: 1.1rem; display: block; }

    /* ── PREISTABELLE ── */
    .price-table-wrap { max-width: 780px; margin: 0 auto; }
    .price-table-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem; font-weight: 700;
      color: var(--navy); margin-bottom: 1.2rem; text-align: center;
    }
    .price-table { border-radius: 20px; overflow: hidden; border: 1.5px solid var(--border); box-shadow: 0 4px 20px rgba(29,58,82,.06); }
    .pt-head {
      display: flex; justify-content: space-between;
      padding: 1rem 1.6rem;
      background: var(--navy); color: white;
      font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    }
    .pt-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: .85rem 1.6rem; background: white;
      border-bottom: 1px solid var(--border);
      transition: background .2s;
    }
    .pt-row:nth-child(odd) { background: var(--gold-ultra); }
    .pt-row:hover { background: var(--gold-pale); }
    .pt-row.active { background: var(--gold) !important; }
    .pt-row.active .pt-cost,
    .pt-row.active .pt-premium { color: white !important; }
    .pt-cost { font-size: .9rem; color: var(--mid); }
    .pt-premium { font-weight: 800; font-size: 1rem; color: var(--navy); }
    .pt-row.active .pt-premium { font-size: 1.1rem; }
    .pt-note { padding: .9rem 1.6rem; background: var(--navy-dark); color: rgba(255,255,255,.55); font-size: .78rem; text-align: center; }
  
    .nav-logo-link img, .nav-logo img { height:70px !important; width:auto !important;  display:block; }
    nav { height:90px; display:flex; align-items:center; }

    .hcp-wrap { width:100%; height:240px; overflow:hidden; display:block; }
    .hcp-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
    .hero-card { animation:hpFloat 5s ease-in-out infinite; }
    @keyframes hpFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-10px) rotate(.25deg)} 66%{transform:translateY(-5px) rotate(-.18deg)} }
    .check-item-hp { display:flex; align-items:center; gap:.65rem; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:.45rem; }
    .check-item-hp::before { content:"✓"; width:22px; height:22px; background:var(--gold-pale); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; flex-shrink:0; }

    .faq-price-item { grid-column:1/-1; background:var(--gold-ultra)!important; border-color:var(--gold-pale)!important; }
    .faq-price-item .faq-q { color:var(--gold); font-size:.95rem; }
    .faq-price-item.open { border-color:var(--gold)!important; }
    .faq-pt { margin-top:1rem; border-radius:14px; overflow:hidden; border:1.5px solid var(--border); }
    .faq-pt-head { display:grid; grid-template-columns:1fr auto; padding:.7rem 1.4rem; background:var(--navy); color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .faq-pt-r { display:grid; grid-template-columns:1fr auto; padding:.65rem 1.4rem; border-bottom:1px solid var(--border); font-size:.9rem; }
    .faq-pt-r:nth-child(even){background:var(--gold-ultra)} .faq-pt-r:nth-child(odd){background:#fff}
    .faq-pt-r span:first-child{color:var(--mid)} .faq-pt-r span:last-child{font-weight:800;color:var(--navy)}
    .faq-pt-note { padding:.75rem 1.4rem; background:var(--navy-dark); color:rgba(255,255,255,.5); font-size:.76rem; text-align:center; }

    .stn-g{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-bottom:3rem}
    .stn-g::before{content:'';position:absolute;top:40px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,var(--gold-pale),var(--gold-light),var(--gold-pale))}
    .stn-s{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1rem;position:relative;z-index:1}
    .stn-n{width:80px;height:90px;border-radius:50%;background:#fff;border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-family:"Playfair Display",serif;font-size:1.8rem;font-weight:700;color:var(--gold);box-shadow:0 4px 20px rgba(200,144,42,.2);flex-shrink:0}
    .stn-s h4{font-family:"Playfair Display",serif;font-size:1rem;font-weight:700;margin-bottom:.4rem}
    .stn-s p{font-size:.8rem;color:var(--mid);line-height:1.5}
    .scn-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
    .scn-c{border-radius:20px;padding:1.8rem;border:1.5px solid var(--border);background:var(--gold-ultra)}
    .scn-h{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
    .scn-i{width:44px;height:44px;border-radius:12px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
    .scn-c h4{font-family:"Playfair Display",serif;font-size:1.05rem;font-weight:700}
    .scn-c ul{list-style:none;font-size:.85rem;color:var(--mid)}
    .scn-c ul li{padding:.3rem 0;border-bottom:1px solid rgba(200,144,42,.15);display:flex;align-items:flex-start;gap:.5rem}
    .scn-c ul li:last-child{border-bottom:none}
    .scn-c ul li::before{content:"✓";color:var(--gold);font-weight:800;flex-shrink:0}
    .scn-w{background:#FFFBF0;border-color:#E8D080}
    .scn-w h4{color:#8B5500}
    .scn-d{background:linear-gradient(135deg,var(--navy),#2E5170);border:none}
    .scn-d h4{color:#fff}
    @media(max-width:700px){.stn-g{grid-template-columns:1fr 1fr}.stn-g::before{display:none}.scn-g{grid-template-columns:1fr}}

    .hp-ov{position:fixed;inset:0;background:rgba(14,28,42,.75);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(6px)}
    .hp-ov.open{display:flex !important;align-items:center;justify-content:center}
    .hp-modal{background:#fff !important;border-radius:22px;width:100%;max-width:660px;max-height:92vh;overflow:hidden;display:flex !important;flex-direction:column;box-shadow:0 30px 100px rgba(0,0,0,.3);position:relative;z-index:10000}
    .hp-mhead{background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:#fff;padding:1.5rem 2rem;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
    .hp-prog{padding:1rem 2rem .6rem;background:var(--cream);border-bottom:1px solid var(--border);flex-shrink:0}
    .hplbl{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mid)}
    .hplbl.cur{color:var(--gold)}.hplbl.done{color:var(--navy)}
    .hp-body{padding:1.6rem 2rem;overflow-y:auto;flex:1}
    .hps{display:none}.hps.on{display:block}
    .hpt{font-size:1rem;font-weight:700;margin-bottom:.2rem}
    .hpd{font-size:.8rem;color:var(--mid);margin-bottom:1.2rem}
    .hf{margin-bottom:.95rem}
    .hf label{display:block;font-size:.76rem;font-weight:700;margin-bottom:.28rem}
    .hf label span{color:var(--gold)}
    .hf input,.hf select,.hf textarea{width:100%;padding:.62rem .9rem;border:1.5px solid var(--border);border-radius:9px;font-size:.88rem;font-family:inherit;color:var(--navy);background:#fff;outline:none;transition:border-color .2s}
    .hf input:focus,.hf select:focus,.hf textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,144,42,.1)}
    .hf input.err,.hf select.err,.hf textarea.err{border-color:#C0392B}
    .hf textarea{resize:vertical;min-height:78px}
    .hfe{color:#C0392B;font-size:.7rem;margin-top:.2rem;display:none}
    .hf.bad .hfe{display:block}
    .hf2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
    .hp-info{background:var(--gold-ultra);border:1.5px solid var(--gold-pale);border-radius:9px;padding:.8rem 1rem;font-size:.78rem;color:var(--mid);margin-bottom:1rem;line-height:1.6}
    .hp-info strong{color:var(--navy)}
    .hf-rcol{display:flex;flex-direction:column;gap:.38rem;margin-top:.28rem}
    .hf-rrow{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.28rem}
    .hfr{display:flex;align-items:center;gap:.5rem;font-size:.84rem;cursor:pointer;padding:.42rem .7rem;border-radius:8px;border:1.5px solid var(--border);transition:all .2s}
    .hfr:hover{border-color:var(--gold-light);background:var(--gold-ultra)}
    .hfr input{accent-color:var(--gold);width:14px;height:14px;flex-shrink:0}
    .hfr.on{border-color:var(--gold);background:var(--gold-pale)}
    .hf-sumh{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:1rem 0 .4rem}
    .hf-srow{display:flex;justify-content:space-between;padding:.38rem 0;border-bottom:1px solid var(--border);font-size:.82rem}
    .hf-srow:last-child{border-bottom:none}
    .hf-sk{color:var(--mid)}.hf-sv{font-weight:600;text-align:right;max-width:58%}
    .hpm-ok{display:none;text-align:center;padding:1rem 0}.hpm-ok.on{display:block}
    .hp-foot{padding:1rem 2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--cream);flex-shrink:0}
    .hp-btnb{background:none;border:1.5px solid var(--border);color:var(--mid);padding:.62rem 1.4rem;border-radius:50px;font-size:.84rem;font-weight:700;cursor:pointer}
    .hp-btnb:disabled{opacity:.3;cursor:not-allowed}
    .hp-btnb:not(:disabled):hover{border-color:var(--navy);color:var(--navy)}
    .hp-btnn{background:var(--gold);color:#fff;border:none;padding:.62rem 1.8rem;border-radius:50px;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(200,144,42,.3);display:flex;align-items:center;gap:.4rem}
    .hp-btnn:hover{background:#b07a20}
    .hp-btnn.sub{background:var(--navy)}
    .hp-btnn.loading .hpbtxt{display:none}
    .hp-btnn.loading .hp-spin{display:block}
    .hp-spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:hpSpin .6s linear infinite;display:none}
    @keyframes hpSpin{to{transform:rotate(360deg)}}
    @media(max-width:560px){.hf2{grid-template-columns:1fr}.hf-rrow{grid-template-columns:1fr}.hp-body{padding:1.2rem}.hp-mhead,.hp-foot{padding:1.1rem 1.2rem}}

    /* Logo fixes */
    nav .nav-logo img, nav img[alt="HappyProtect"] {
      height: 80px !important;
      width: auto !important;
      
      display: block !important;
    }

    /* ── Tariff: Rechner + Karte nebeneinander ── */
    .tariff-two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }
    @media(max-width:900px){
      .tariff-two-col { grid-template-columns: 1fr; }
    }
  
    .price-calculator, .tariff-card { height: 100%; display: flex; flex-direction: column; }
    .calc-body { flex: 1; }
    .tariff-body { flex: 1; }
    /* ═══════════════════════════════════════════
       UNIFIED TARIFF CARD – final clean version
       ═══════════════════════════════════════════ */
    .unified-tariff-card {
      background: #fff;
      border-radius: 22px;
      border: 1.5px solid var(--border);
      box-shadow: 0 8px 40px rgba(29,58,82,.1);
      overflow: hidden;
      max-width: 920px;
      margin: 0 auto;
    }
    /* Header: Navy, full width */
    .utc-head {
      background: linear-gradient(135deg, #142838 0%, #1D3A52 100%);
      padding: 1.6rem 2.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .utc-head-left h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: #fff;
      margin: 0 0 .25rem;
    }
    .utc-head-left p { font-size: .83rem; color: rgba(255,255,255,.55); margin: 0; }
    .utc-badge {
      font-size: .7rem; font-weight: 800; letter-spacing: .07em;
      text-transform: uppercase; color: #E8B860;
      background: rgba(200,144,42,.18); padding: .28rem .75rem;
      border-radius: 40px; display: inline-block; margin-bottom: .5rem;
    }
    .utc-price { color: #fff; line-height: 1.2; }
    .utc-price strong {
      font-family: 'Playfair Display', serif;
      font-size: 2rem; font-weight: 700; color: #E8B860;
    }
    .utc-price span { font-size: .78rem; color: rgba(255,255,255,.45); margin-left: .25rem; }
    /* Body: 3-column grid (slider | divider | conditions) */
    .utc-body {
      display: grid !important;
      grid-template-columns: 1fr 1px 1fr !important;
      align-items: start;
      padding: 1.8rem 2.2rem;
      gap: 0;
    }
    .utc-calc { padding-right: 2rem; }
    .utc-divider {
      background: var(--border);
      align-self: stretch;
      margin: 0 2rem;
      min-height: 200px;
    }
    .utc-rows { display: flex; flex-direction: column; }
    .utc-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .6rem .8rem;
      font-size: .87rem;
      border-radius: 8px;
      margin-bottom: 3px;
    }
    .utc-row:nth-child(odd)  { background: var(--gold-ultra); }
    .utc-row:nth-child(even) { background: #fff; }
    .utc-row span:first-child { color: var(--mid); }
    .utc-row span:last-child  { font-weight: 700; color: var(--navy); }
    /* Result box */
    .utc-result {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 1rem;
      background: var(--gold-ultra);
      border: 1.5px solid var(--gold-pale);
      border-radius: 14px;
      padding: 1.1rem 1.3rem;
      margin-top: 1.2rem;
    }
    .utc-result-side { text-align: center; }
    .utc-rlabel {
      font-size: .65rem; font-weight: 800; letter-spacing: .07em;
      text-transform: uppercase; color: var(--mid); margin-bottom: .2rem;
    }
    .utc-rcost  { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--navy); }
    .utc-rpremium { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:var(--gold); line-height:1; }
    .utc-rnote  { font-size:.68rem; color:var(--mid); margin-top:.12rem; }
    .utc-arrow  { font-size:1.3rem; color:var(--gold-light); flex-shrink:0; }
    /* Footer */
    .utc-footer {
      border-top: 1.5px solid var(--border);
      background: var(--cream);
      padding: 1.4rem 2.2rem;
    }
    .utc-hint {
      text-align: center;
      font-size: .74rem;
      color: var(--mid);
      margin-top: .55rem;
    }
    @media(max-width:760px) {
      .utc-body { grid-template-columns: 1fr !important; }
      .utc-divider { height: 1px; min-height: 0; margin: 1.2rem 0; }
      .utc-calc { padding-right: 0; }
      .utc-head { flex-direction: column; text-align: center; }
    }
  
    .hcp-placeholder {
      background: linear-gradient(135deg, var(--navy-dark), var(--navy));
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
    .hcp-ph-inner {
      text-align: center;
      padding: 1rem;
    }