/* ===== Seite: Kontakt (scoped unter #contact) ===== */
    :root{
      /* Fallbacks – werden von globalen Tokens übersteuert, falls vorhanden */
      --it-g1:#ff2d7a;
      --it-g2:#ff8a00;
      --sticky-top: 112px; /* Fallback; wird per JS live gesetzt */
    }

    /* Hero mit Kartenhintergrund */
    #contact .content-hero-neo.hero-variant--map{
      position:relative;
      overflow:hidden;
      margin:0;
      min-height:var(--content-hero-height);
      background:transparent;
      display:block;
    }
    #contact .hero-variant--map.content-hero-neo::before,
    #contact .hero-variant--map.content-hero-neo::after{
      display:none;
    }
    #contact .hero-variant--map .content-hero-neo__background{
      position:absolute;
      inset:0;
    }
    #contact .hero-variant--map .content-hero-neo__divider{
      bottom:0;
    }
    #contact .contact-hero-map{
      position:absolute;
      inset:0;
      z-index:0;
    }
    #contact .contact-hero-map iframe{
      width:100%;
      height:100%;
      border:0;
      filter:saturate(1.05) contrast(1.04);
    }
    #contact .contact-hero-map__overlay{
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(140deg, rgba(13,21,43,.82) 0%, rgba(22,32,64,.68) 45%, rgba(32,56,118,.48) 100%);
    }
    #contact .contact-hero-map__overlay::after{
      content:""; position:absolute; inset:-220px -140px -160px -140px;
      background:radial-gradient(circle at 50% 20%, rgba(108,153,255,.24) 0%, rgba(108,153,255,.08) 55%, rgba(108,153,255,0) 90%);
      opacity:.75;
    }
    #contact .contact-hero-map__overlay::before{
      content:""; position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(8,13,28,0) 0%, rgba(8,13,28,.52) 78%, rgba(8,13,28,.78) 100%);
    }
    #contact .hero-variant--map .content-hero-neo__inner{
      position:relative;
      z-index:1;
      gap:8px;
      align-items:center;
    }

    /* Layout */
    #contact{
      isolation:isolate;
    }
    #contact .content-wrap{
      display:grid;
      grid-template-columns:minmax(0,1fr) 380px;
      gap:28px;
      align-items:start;
      max-width:1200px;
      margin:0 auto;
      padding:20px 24px 40px;
    }
    #contact .content-main,
    #contact .content-aside{ min-width:0; }

    /* Sticky-Box rechts */
    #contact .side-sticky{
      position:sticky;
      top:calc(var(--sticky-top) + 12px);
      background:#fff; border:1px solid #e9e9e9; padding:18px;
      box-shadow:0 10px 22px rgba(0,0,0,.06);
      border-radius:8px;
    }
    @media (max-width:980px){
      #contact .content-wrap{ grid-template-columns:1fr; }
      #contact .side-sticky{ position:static; }
    }

    /* Karten/Boxen */
    #contact .info-box{
      background:#fff;
      border:1px solid #e9e9e9;
      padding:28px;
      box-shadow:0 20px 40px rgba(15,23,42,0.08);
      border-radius:14px;
    }
    #contact .ibox-head{ margin-bottom:10px; }
    #contact .info-box h2{ margin:8px 0 8px; line-height:1.2; }

    /* Unterstrich unter H1 (links Verlauf, rechts feine Linie) */
    #contact .ibox-underline{
      margin-top:10px; height:3px; position:relative;
      background:linear-gradient(90deg,var(--it-g1),var(--it-g2)) left/220px 3px no-repeat;
    }
    #contact .ibox-underline::after{
      content:""; position:absolute; left:220px; right:0; top:1px; height:1px; background:#eaeaea;
    }

    #contact .lead{ color:#333; font-size:18px; }

    /* Formular */
    #contact .contact-form{ margin-top:14px; }
    #contact .form-grid{
      display:grid; grid-template-columns:1fr 1fr; gap:14px;
    }
    #contact .form-span-2{ grid-column:1 / -1; }
    @media (max-width:780px){
      #contact .form-grid{ grid-template-columns:1fr; }
    }

    #contact .form-field label{
      display:block; font-weight:800; margin:0 0 6px; color:#111;
    }
    #contact .req{ color:#ff2d7a; margin-left:2px; }
    #contact .form-field .hint{ color:#666; display:block; margin-top:6px; }
    #contact .contact-privacy-link{ color:#0c1830; font-weight:800; text-decoration:none; }
    #contact .contact-privacy-link:hover{ text-decoration:underline; }

    #contact .form-field input[type="text"],
    #contact .form-field input[type="email"],
    #contact .form-field input[type="tel"],
    #contact .form-field input[type="file"],
    #contact .form-field select,
    #contact .form-field textarea{
      width:100%;
      padding:11px 12px;
      border:1px solid rgba(15,23,42,0.12);
      border-radius:12px;
      background:#fff;
      color:#0f172a;
      outline:none;
      font:inherit;
      transition:border-color .2s ease, box-shadow .2s ease;
      box-sizing:border-box;
    }
    #contact .form-field textarea{ resize:vertical; min-height:150px; }
    #contact .form-field input:focus,
    #contact .form-field select:focus,
    #contact .form-field textarea:focus{
      border-color:#3b82f6;
      box-shadow:0 0 0 3px rgba(59,130,246,0.15);
    }

    #contact .form-field input.is-invalid,
    #contact .form-field textarea.is-invalid,
    #contact .form-field select.is-invalid{
      border-color:#f43f5e;
      box-shadow:0 0 0 3px rgba(244,63,94,0.18);
      animation:contactFieldFlash .5s ease;
    }
    #contact .form-field.has-error label{
      color:#d92d20;
    }
    #contact .event-form__privacy-label input.is-invalid{
      outline:2px solid rgba(217,45,32,.45);
      border-radius:4px;
    }
    @keyframes contactFieldFlash{
      0%{ background-color:rgba(217,45,32,.16); }
      100%{ background-color:transparent; }
    }

    #contact .form-field label.event-form__privacy-label{ color:#666; font-weight:600; display:flex; align-items:flex-start; gap:10px; font-size:14px; }
    #contact .event-form__privacy-label input{ margin-top:3px; }

    #contact .form-actions{
      display:flex; align-items:center; gap:12px; margin-top:8px;
    }
    #contact .form-actions .cta{
      border-radius:12px;
      padding:11px 20px;
    }
    #contact .form-actions .cta[disabled]{ opacity:.7; cursor:not-allowed; }
    #contact .form-actions .subnote{ color:#555; }
    #contact .form-status{
      margin-top:12px;
      min-height:20px;
      font-size:14px;
      font-weight:600;
      transition:color .2s ease;
    }
    #contact .form-status.is-success{ color:#0f766e; }
    #contact .form-status.is-error{ color:#b91c1c; }

    #contact .form-success{
      margin-top:24px;
      padding:28px 32px;
      border:1px solid rgba(37, 99, 235, 0.25);
      background:linear-gradient(135deg, rgba(240, 249, 255, 0.95), rgba(219, 234, 254, 0.92));
      color:#0f172a;
      font-size:16px;
      font-weight:600;
      box-shadow:0 16px 40px rgba(15, 23, 42, 0.12);
    }
    #contact .form-success[hidden]{
      display:none !important;
    }
    #contact .form-success strong{
      display:block;
      margin-bottom:6px;
      font-size:18px;
    }
    @media (prefers-reduced-motion: reduce){
      #contact .form-success{
        transition:none;
      }
    }

    /* Honeypot */
    #contact .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

    /* Rechte Spalte: Kontaktkarten */
    #contact .aside-title{
      margin:0 0 10px;
      font-size:18px;
      font-weight:900;
      text-align:center;
    }
    #contact .aside-card{
      border:1px solid #eee; padding:12px; margin:10px 0; background:#fafafa; border-radius:8px;
    }
    #contact .aside-row{
      display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed #e6e6e6;
    }
    #contact .aside-row:last-child{ border-bottom:none; }
    #contact .aside-row .ico{ width:24px; text-align:center; font-size:18px; line-height:1.2; }
    #contact .aside-row .label{ font-weight:800; line-height:1.2; }
    #contact .aside-row .value{ color:#111; }
    #contact .aside-actions{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:12px;
    }
    #contact .btn-gradient{
      border-radius:12px;
      padding:11px 18px;
      text-align:center;
      display:inline-block;
    }
    #contact .aside-actions .btn-gradient{
      display:block;
      width:100%;
      margin:0;
    }

    /* Deal-Ribbon – schlanke lokale Variante, falls global fehlt */
    #contact .deal-ribbon{
      position:relative;
      width:100%; background:linear-gradient(90deg,#0d0e11,#1b1c20); color:#fff;
      padding:18px 0 10px; box-shadow:0 18px 40px rgba(0,0,0,.12) inset, 0 10px 26px rgba(0,0,0,.08);
    }
    #contact .deal-ribbon::before{
      content:""; position:absolute; left:0; right:0; top:0; height:3px;
      background:linear-gradient(90deg,var(--it-g1),var(--it-g2));
    }
    #contact .deal-inner{ max-width:1200px; margin:0 auto; padding:0 24px;
      display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative;
    }
    #contact .deal-text{ margin:0; font-weight:700; line-height:1.45; flex:1; text-align:center; }
    #contact .deal-cta{ display:inline-block; white-space:nowrap; padding:10px 14px;
      background:linear-gradient(90deg,var(--it-g1),var(--it-g2)); color:#fff; font-weight:900; border:0;
    }
    #contact .deal-note{ max-width:1200px; margin:6px auto 0; padding:0 24px; font-size:12px; opacity:.9; color:#cdd5e1; text-align:center; }
    @media (max-width:760px){
      #contact .deal-inner{ flex-direction:column; }
      #contact .deal-cta{ width:100%; text-align:center; }
    }

    /* Buttons – rechteckig (wie global) */
    #contact .cta,
    #contact .btn-gradient{
      padding:12px 20px;
      font-weight:600;
      border:0;
      border-radius:12px;
      background:linear-gradient(90deg,#FF6A00 0%,#FFA200 100%);
      box-shadow:0 10px 24px rgba(0,0,0,.18);
      transition:transform .15s ease, filter .2s ease, box-shadow .2s ease, background-position .2s ease;
    }
    #contact .cta:hover,
    #contact .btn-gradient:hover{
      background-position:100% 0;
      transform:translateY(-1px);
      box-shadow:0 14px 30px rgba(0,0,0,.22);
    }
    #contact .cta:active,
    #contact .btn-gradient:active{
      transform:translateY(0);
      box-shadow:0 8px 18px rgba(0,0,0,.16);
    }

    /* ==== Scroll-Ghosting / grauer Kasten Fix ==== */

/* Keine Paint-Containment auf schwebenden/fixen Elementen */
.support-float { contain: none !important; }

/* Sticky-Karte & große Box auf eigene stabile Layer setzen */
#contact .side-sticky,
#contact .info-box {
  transform: translateZ(0);           /* eigener Compositing-Layer */
  backface-visibility: hidden;
  will-change: transform;
}

/* Container darf nichts wegclippen */
#contact .content-wrap {
  overflow: visible !important;
  contain: none !important;
}

/* Für Sicherheit: Footer und Body ohne Extra-Spacing/Klippen */
.site-footer { overflow: visible; }
html, body { background: var(--bg); }
body.contact-modal-open{ overflow:hidden; }
  :where(#contact, body) .contact-modal[hidden]{ display:none; }
  :where(#contact, body) .contact-modal{
    --contact-modal-padding:clamp(18px,4vw,48px);
    --contact-modal-safe-top:env(safe-area-inset-top, 0px);
    --contact-modal-safe-bottom:env(safe-area-inset-bottom, 0px);
    --contact-modal-gap-top:clamp(48px,12vh,140px);
    --contact-modal-gap-bottom:clamp(64px,14vh,180px);
    position:fixed;
    inset:0;
    z-index:12000;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:var(--contact-modal-gap-top) var(--contact-modal-padding) var(--contact-modal-gap-bottom);
    overflow:hidden;
    background:rgba(8,13,28,.76);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    -webkit-overflow-scrolling:touch;
  }
  :where(#contact, body) .contact-modal__backdrop{
    position:absolute;
    inset:0;
  }
  :where(#contact, body) .contact-modal__window{
    position:relative;
    z-index:1;
    width:min(860px, 100%);
    max-height:var(--contact-modal-max-height, calc(100vh - var(--contact-modal-gap-top) - var(--contact-modal-gap-bottom)));
    min-height:min(520px, var(--contact-modal-max-height, 520px));
    background:linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);
    color:#0c1830;
    border-radius:26px;
    border:1px solid rgba(12,24,48,.08);
    box-shadow:
      0 42px 110px rgba(15,22,46,.26),
      0 16px 36px rgba(15,22,46,.18);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  :where(#contact, body) .contact-modal__header{
    position:relative;
    padding:28px 32px 20px;
    border-bottom:1px solid rgba(12,24,48,.08);
  }
  :where(#contact, body) .contact-modal__header::after{
    content:"";
    position:absolute;
    left:32px;
    right:32px;
    bottom:-1px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,#ff2d7a 0%,#ff8a00 100%);
    opacity:.88;
  }
  :where(#contact, body) .contact-modal__header h2{
    margin:0;
    font-size:23px;
    line-height:1.3;
    color:#0c1830;
  }
  :where(#contact, body) .contact-modal__body{
    padding:28px 32px 32px;
    overflow:auto;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    background:#fff;
  }
  :where(#contact, body) .contact-modal__body p{
    color:#1e2742;
  }
  :where(#contact, body) .contact-modal__close{
    position:absolute;
    top:22px;
    right:26px;
    width:36px;
    height:36px;
    border-radius:999px;
    border:1px solid rgba(12,24,48,.1);
    background:#ffffff;
    color:#0c1830;
    font-size:20px;
    line-height:1;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(15,22,46,.14);
    z-index:2;
    transition:
      background .2s ease,
      border-color .2s ease,
      transform .2s ease,
      box-shadow .2s ease;
  }
  :where(#contact, body) .contact-modal__close:hover{
    background:#f3f6ff;
    border-color:rgba(12,24,48,.22);
    transform:translateY(-1px);
    box-shadow:0 16px 36px rgba(15,22,46,.18);
  }
  :where(#contact, body) .contact-modal__spinner{
    width:46px;
    height:46px;
    border:4px solid rgba(12,24,48,.12);
    border-top-color:#0c1830;
    border-radius:50%;
    margin:60px auto;
    animation:contactModalSpin 1s linear infinite;
  }
  @keyframes contactModalSpin{
    to{ transform:rotate(360deg); }
  }
  @media (max-width:720px){
    :where(#contact, body) .contact-modal{
      --contact-modal-padding:clamp(12px,5vw,22px);
      --contact-modal-gap-top:clamp(32px,14vh,120px);
      --contact-modal-gap-bottom:clamp(48px,18vh,140px);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    :where(#contact, body) .contact-modal__window{
      width:100%;
      border-radius:16px;
    }
    :where(#contact, body) .contact-modal__header{
      padding:20px 22px 16px;
    }
    :where(#contact, body) .contact-modal__header::after{
      left:22px;
      right:22px;
      bottom:-1px;
    }
    :where(#contact, body) .contact-modal__body{
      padding:20px 22px 24px;
    }
    :where(#contact, body) .contact-modal__close{
      top:16px;
      right:16px;
    }
  }