:root{
    --navy: #1F2734;
    --navy-soft: #5B6472;
    --blue: #145798;
    --blue-bright: #1B6FC2;
    --blue-tint: #EAF2FA;
    --blue-tint-2: #F3F8FC;
    --bg: #FFFFFF;
    --bg-soft: #F5F5F7;
    --line: rgba(31,39,52,0.09);
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 12px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--navy);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    font-weight:400;
  }
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.08;}
  .eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;
    display:block;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 32px;
    max-width:1120px; margin:0 auto;
  }
  .logo-img{height:34px; width:auto;}
  .logo-text{
    font-family:'Poppins', sans-serif;
    display:flex;
    align-items:baseline;
    gap:1px;
    line-height:1;
    user-select:none;
  }
  .logo-text .m{font-weight:800; font-size:22px; color:var(--navy); letter-spacing:-0.01em;}
  .logo-text .y{font-weight:800; font-size:22px; color:var(--blue); letter-spacing:-0.01em;}
  .logo-text .sep{
    width:1.5px; height:16px; background:var(--line); margin:0 9px;
    align-self:center;
  }
  .logo-text .sub{
    font-weight:600; font-size:14px; letter-spacing:0.06em; color:var(--navy);
    text-transform:uppercase;
  }
  .logo-text .sub .num{color:var(--blue);}
  .logo-full{display:flex; flex-direction:column; gap:6px;}
  .logo-full .logo-row{display:flex; align-items:baseline; gap:1px;}
  .logo-full .m{font-weight:800; font-size:30px; color:var(--navy); letter-spacing:-0.01em;}
  .logo-full .y{font-weight:800; font-size:30px; color:var(--blue); letter-spacing:-0.01em;}
  .logo-full .sub{
    font-weight:600; font-size:17px; letter-spacing:0.08em; color:var(--navy);
    text-transform:uppercase; margin-left:10px; align-self:center;
  }
  .logo-full .sub .num{color:var(--blue);}
  .logo-full .tag{
    font-family:'Inter', sans-serif;
    font-size:11.5px; font-weight:600; letter-spacing:0.06em;
    color:var(--blue); text-transform:uppercase;
  }
  .nav-links{
    display:flex; gap:34px; align-items:center;
    font-size:14.5px; font-weight:500;
  }
  .nav-links a:not(.pill){
    color:var(--navy-soft);
    transition:color .15s ease;
  }
  .nav-links a:not(.pill):hover{color:var(--navy);}
  .pill{
    background:var(--blue);
    color:#fff !important;
    font-weight:600;
    font-size:14px;
    padding:10px 22px;
    border-radius:999px;
    display:inline-flex; align-items:center; gap:8px;
    transition:background .15s ease, transform .15s ease;
  }
  .pill:hover{background:var(--blue-bright); transform:translateY(-1px);}
  .pill.ghost{
    background:transparent;
    color:var(--navy) !important;
    border:1.5px solid var(--line);
  }
  .pill.ghost:hover{border-color:var(--blue); background:var(--blue-tint);}
  .pill.large{
    padding:16px 30px;
    font-size:15.5px;
  }
  @media (max-width:860px){
    .nav-links a:not(.pill){display:none;}
    .wrap{padding:0 22px;}
    nav{padding:14px 22px;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:90px 0 40px;
    text-align:center;
  }
  .hero .eyebrow{
    display:flex; justify-content:center;
  }
  .hero h1{
    font-size:clamp(38px, 6.2vw, 72px);
    max-width:15ch;
    margin:0 auto 22px;
  }
  .hero h1 .accent{color:var(--blue);}
  .hero p.lead{
    font-size:19px;
    color:var(--navy-soft);
    max-width:46ch;
    margin:0 auto 36px;
    font-weight:400;
  }
  .cta-row{
    display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
    margin-bottom:56px;
  }
  .hero-image{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(31,39,52,0.28);
    max-width:720px;
    margin:0 auto;
  }
  .hero-image img{width:100%; height:auto; display:block;}

  /* ---------- VALUE STRIP ---------- */
  .value-strip{
    padding:70px 0;
  }
  .value-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:center;
  }
  @media (max-width:760px){ .value-grid{grid-template-columns:repeat(2,1fr);} }
  .value-icon{
    width:56px; height:56px;
    background:var(--blue-tint);
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px;
  }
  .value-icon svg{width:26px; height:26px; stroke:var(--blue);}
  .value-item h3{
    font-size:15px;
    font-weight:700;
    letter-spacing:0.01em;
    text-transform:uppercase;
  }

  /* ---------- SECTION GENERAL ---------- */
  section{padding:100px 0;}
  .section-head{
    max-width:640px;
    margin:0 auto 56px;
    text-align:center;
  }
  .section-head h2{
    font-size:clamp(30px,4.2vw,44px);
  }
  .section-head p{color:var(--navy-soft); margin-top:16px; font-size:17px;}
  .bg-soft{background:var(--bg-soft);}

  /* ---------- SERVICE CARDS ---------- */
  .card-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  @media (max-width:860px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }
  .card{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:30px 26px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(31,39,52,0.18);}
  .card-icon{
    width:48px; height:48px;
    background:var(--blue-tint);
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  .card-icon svg{width:24px; height:24px; stroke:var(--blue);}
  .card h3{font-size:18px; font-weight:700; margin-bottom:8px; letter-spacing:-0.01em;}
  .card p{font-size:14.5px; color:var(--navy-soft);}

  /* ---------- FEATURE ROWS (Ablauf) ---------- */
  .feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    padding:56px 0;
  }
  .feature-row:not(:last-child){border-bottom:1px solid var(--line);}
  .feature-row.reverse .feature-text{order:2;}
  .feature-row.reverse .feature-img{order:1;}
  @media (max-width:860px){
    .feature-row{grid-template-columns:1fr; gap:28px;}
    .feature-row.reverse .feature-text{order:1;}
    .feature-row.reverse .feature-img{order:2;}
  }
  .feature-num{
    font-size:14px; font-weight:700; color:var(--blue);
    letter-spacing:0.04em;
    margin-bottom:14px;
  }
  .feature-text h3{font-size:26px; margin-bottom:14px;}
  .feature-text p{color:var(--navy-soft); font-size:16px; max-width:42ch;}
  .feature-img{
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:0 24px 48px -20px rgba(31,39,52,0.22);
    max-width:400px;
    margin:0 auto;
    width:100%;
  }
  .feature-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .feature-img.portrait{max-width:380px;}
  .feature-img.portrait img{aspect-ratio:2/3;}
  .feature-img.squarish{max-width:420px;}
  .feature-img.squarish img{aspect-ratio:7/6;}

  /* ---------- INCLUDED LIST ---------- */
  .included-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:860px){ .included-wrap{grid-template-columns:1fr;} }
  .included-list{list-style:none;}
  .included-list li{
    display:flex; gap:14px; align-items:flex-start;
    padding:16px 0;
    border-top:1px solid var(--line);
  }
  .included-list li:first-child{border-top:none;}
  .check{
    width:22px; height:22px; flex-shrink:0;
    background:var(--blue);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin-top:2px;
  }
  .check svg{width:12px; height:12px; stroke:#fff;}
  .included-list strong{display:block; font-size:15.5px; font-weight:600;}
  .included-list span{color:var(--navy-soft); font-size:14px;}

  /* ---------- AREA (DARK) ---------- */
  .area-section{
    background:var(--navy);
    color:#fff;
    border-radius:var(--radius-lg);
    margin:0 32px;
    padding:80px 48px;
  }
  @media (max-width:640px){ .area-section{padding:56px 24px; margin:0 16px;} }
  .area-section .section-head p{color:rgba(255,255,255,0.65);}
  .area-section .eyebrow{color:#7DB8EE;}
  .area-tags{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  }
  .area-tag{
    font-size:14px;
    font-weight:500;
    padding:10px 20px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.22);
    color:#fff;
  }
  .area-tag.main{
    background:var(--blue-bright);
    border-color:var(--blue-bright);
    font-weight:600;
  }

  /* ---------- PRICING ---------- */
  .price-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media (max-width:860px){ .price-grid{grid-template-columns:1fr;} }
  .price-card{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:34px 28px;
    display:flex; flex-direction:column; gap:16px;
  }
  .price-card.highlight{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
    transform:scale(1.03);
  }
  .price-card.highlight .price-note{color:rgba(255,255,255,0.65);}
  .price-card.highlight .price-name{color:#7DB8EE;}
  .price-name{
    font-size:13px; font-weight:700; letter-spacing:0.04em;
    text-transform:uppercase; color:var(--blue);
  }
  .price-amount{font-size:36px; font-weight:800; letter-spacing:-0.02em;}
  .price-amount small{font-size:15px; font-weight:500;}
  .price-note{font-size:14px; color:var(--navy-soft);}
  .price-disclaimer{
    margin-top:24px; font-size:13px; color:var(--navy-soft); text-align:center;
  }

  /* ---------- CONTACT ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
  }
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-info h3{font-size:22px; margin-bottom:22px; font-weight:700;}
  .info-line{
    padding:14px 0;
    border-top:1px solid var(--line);
    font-size:15px;
  }
  .info-line:first-of-type{border-top:none;}
  .info-line b{
    display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--navy-soft); font-weight:600; margin-bottom:3px;
  }
  form{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:32px;
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  @media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
  label{
    display:block; font-size:13px; font-weight:600; color:var(--navy-soft);
    margin-bottom:6px;
  }
  input, textarea, select{
    width:100%;
    border:1.5px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--bg-soft);
    padding:12px 14px;
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    color:var(--navy);
  }
  input:focus, textarea:focus, select:focus{
    outline:none; border-color:var(--blue); background:#fff;
  }
  textarea{resize:vertical; min-height:100px;}
  .full-row{margin-bottom:14px;}
  .submit-btn{
    background:var(--blue);
    border:none;
    border-radius:999px;
    color:#fff;
    font-family:'Inter', sans-serif;
    font-size:15.5px;
    font-weight:600;
    padding:15px 24px;
    cursor:pointer;
    width:100%;
    margin-top:6px;
    transition:background .15s ease;
  }
  .submit-btn:hover{background:var(--blue-bright);}
  .form-msg{margin-top:14px; font-size:13.5px; display:none; color:var(--blue);}
  .form-msg.show{display:block;}

  /* ---------- LEGAL PAGES ---------- */
  .legal-page{padding:64px 0 100px;}
  .legal-page.first{padding-top:76px;}
  .legal-page .wrap{max-width:760px;}
  .legal-page h1{font-size:clamp(30px,4.5vw,40px); margin-bottom:6px;}
  .legal-page .legal-updated{font-size:12.5px; color:var(--navy-soft); margin-bottom:32px;}
  .legal-page h3{font-size:16px; margin:26px 0 8px; letter-spacing:0; text-transform:none; font-weight:700;}
  .legal-page p{font-size:14.5px; color:var(--navy-soft); line-height:1.7;}
  .legal-placeholder{background:var(--blue-tint); color:var(--blue); padding:1px 7px; border-radius:5px; font-size:0.92em; font-weight:600;}
  .legal-back{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13.5px; font-weight:600; color:var(--blue); margin-bottom:26px;
  }
  .legal-back svg{width:15px; height:15px;}

  /* ---------- FOOTER ---------- */
  footer{
    padding:48px 0 30px;
    border-top:1px solid var(--line);
  }
  .footer-top{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
    padding-bottom:28px; margin-bottom:22px;
    border-bottom:1px solid var(--line);
  }
  .footer-logo-img{height:26px;}
  .footer-links{display:flex; gap:26px; flex-wrap:wrap; font-size:14px;}
  .footer-links a{color:var(--navy-soft);}
  .footer-links a:hover{color:var(--navy);}
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:13px; color:var(--navy-soft);
  }

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}

  .reveal-left{opacity:0; transform:translateX(-36px); transition:opacity .7s ease, transform .7s ease;}
  .reveal-left.in{opacity:1; transform:none;}
  .reveal-right{opacity:0; transform:translateX(36px); transition:opacity .7s ease, transform .7s ease;}
  .reveal-right.in{opacity:1; transform:none;}

  /* ---------- DECORATIVE BLOBS ---------- */
  .hero{position:relative; overflow:hidden;}
  .blob{position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none;}
  .hero .blob-1{width:440px; height:440px; background:var(--blue); opacity:0.16; top:-160px; left:-120px; animation:blobDrift1 16s ease-in-out infinite;}
  .hero .blob-2{width:340px; height:340px; background:#7DB8EE; opacity:0.22; top:40px; right:-100px; animation:blobDrift2 20s ease-in-out infinite;}
  .hero .wrap{position:relative; z-index:1;}
  @keyframes blobDrift1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,30px) scale(1.1);}}
  @keyframes blobDrift2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,26px) scale(0.92);}}

  .live-badge{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--blue-tint); padding:8px 16px; border-radius:999px;
    font-size:13px; font-weight:600; color:var(--blue); margin-bottom:22px;
  }
  .live-dot{width:8px; height:8px; border-radius:50%; background:#2AAE5C; position:relative;}
  .live-dot::after{
    content:""; position:absolute; inset:0; border-radius:50%; background:#2AAE5C;
    animation:liveDotPulse 1.8s ease-out infinite;
  }
  @keyframes liveDotPulse{0%{transform:scale(1); opacity:0.7;} 100%{transform:scale(2.8); opacity:0;}}

  .hero-image-wrap{position:relative; max-width:720px; margin:0 auto;}
  .float-badge{
    position:absolute; background:#fff; border-radius:16px;
    box-shadow:0 20px 40px -14px rgba(31,39,52,0.32);
    padding:14px 18px; display:flex; align-items:center; gap:12px;
    animation:badgeFloat 5s ease-in-out infinite; z-index:2;
  }
  .float-badge .fb-icon{
    width:36px; height:36px; border-radius:10px; background:var(--blue-tint);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .float-badge .fb-icon svg{width:18px; height:18px; stroke:var(--blue);}
  .float-badge .fb-text{display:flex; flex-direction:column; line-height:1.25; text-align:left;}
  .float-badge .fb-text strong{font-size:14.5px; font-weight:700;}
  .float-badge .fb-text span{font-size:11px; color:var(--navy-soft);}
  .badge-insured{top:-18px; left:-26px;}
  .badge-guarantee{bottom:-18px; right:-26px; animation-delay:1.6s;}
  @keyframes badgeFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
  @media (max-width:680px){
    .float-badge{padding:10px 13px; gap:8px; border-radius:13px;}
    .float-badge .fb-icon{width:26px;height:26px;}
    .float-badge .fb-text strong{font-size:12.5px;}
    .float-badge .fb-text span{font-size:9.5px;}
    .badge-insured{top:-10px; left:-6px;}
    .badge-guarantee{bottom:-10px; right:-6px;}
  }

  /* ---------- MARQUEE ---------- */
  .marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
  .marquee-track{display:flex; gap:10px; width:max-content; animation:marqueeScroll 26s linear infinite;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  @keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ---------- FLOATING CTA ---------- */
  .floating-cta{
    position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%;
    background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 16px 32px -8px rgba(20,87,152,0.55); z-index:200;
    opacity:0; transform:translateY(24px) scale(0.7);
    transition:opacity .3s ease, transform .3s ease; pointer-events:none;
  }
  .floating-cta.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto; animation:ctaPulse 2.4s ease-in-out infinite;}
  .floating-cta svg{width:24px; height:24px; stroke:#fff;}
  @keyframes ctaPulse{0%,100%{box-shadow:0 16px 32px -8px rgba(20,87,152,0.55);} 50%{box-shadow:0 16px 40px -2px rgba(20,87,152,0.8);}}
  @media (max-width:640px){ .floating-cta{width:52px; height:52px; bottom:18px; right:18px;} }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal, .reveal-left, .reveal-right{opacity:1; transform:none; transition:none;}
    .blob, .live-dot::after, .float-badge, .floating-cta.show, .marquee-track{animation:none;}
  }