/* ============================================================
   Classix Kempten – Newsletter-Popup
   Alle Klassen mit Präfix cxnl- (keine Kollision mit dem Theme).
   --cxnl-z und --cxnl-frame-h setzt das Plugin inline (Einstellungen).
   ============================================================ */

:root{--cxnl-z:99999;--cxnl-frame-h:650px}

.cxnl-overlay{position:fixed;inset:0;z-index:var(--cxnl-z,99999);display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,10,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cxnl-overlay.cxnl-open{display:flex}

.cxnl-box{position:relative;width:100%;max-width:1000px;max-height:94vh;overflow:auto;
  display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);
  background:#faf5ea;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:cxnl-in .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes cxnl-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cxnl-box{animation:none}}

/* Scroll-Sperre der Seite, solange das Popup offen ist (auch iOS) */
body.cxnl-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* Linke Spalte – Marke */
.cxnl-brand{background:#1a1a1a;color:#fff;padding:44px 36px;display:flex;flex-direction:column;
  justify-content:center;position:relative;overflow:hidden}
.cxnl-brand::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 52% at 50% 26%,rgba(255,195,0,.17),transparent 70%)}
.cxnl-brand>*{position:relative;z-index:1}
.cxnl-mark{width:112px;height:112px;margin:0 auto 22px;display:block}
.cxnl-kicker{font:700 11px/1.4 Raleway,Arial,Helvetica,sans-serif;letter-spacing:2.4px;
  text-transform:uppercase;color:#ffc300;text-align:center;margin:0 0 12px}
.cxnl-h{font:500 34px/1.08 "IBM Plex Serif",Georgia,"Times New Roman",serif;
  letter-spacing:-.4px;text-align:center;margin:0;color:#fff}
.cxnl-h span{color:#ffc300;font-style:italic}
.cxnl-rule{width:74px;height:1px;background:#ffc300;margin:20px auto}
.cxnl-lead{font:400 15px/1.65 Raleway,Arial,Helvetica,sans-serif;color:#ddd8cc;
  text-align:center;margin:0}
.cxnl-dates{font:700 11px/1.5 Raleway,Arial,Helvetica,sans-serif;letter-spacing:1.6px;
  text-transform:uppercase;color:#8f8f8f;text-align:center;margin:22px 0 0}

/* Rechte Spalte – Brevo-Formular */
.cxnl-form{padding:14px 14px 10px;display:flex;flex-direction:column;min-width:0}
.cxnl-frame{flex:1;min-height:var(--cxnl-frame-h,650px);border:0;width:100%;display:block;background:#faf5ea}

/* Schliessen */
.cxnl-x{position:absolute;top:10px;right:12px;z-index:5;width:38px;height:38px;
  border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.9);color:#1a1a1a;
  font:400 24px/1 Arial,sans-serif;display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .18s;padding:0;box-shadow:none;text-shadow:none}
.cxnl-x:hover{background:#ffc300;transform:rotate(90deg)}
.cxnl-x:focus-visible{outline:3px solid #ffc300;outline-offset:2px}

.cxnl-later{display:block;width:100%;margin:12px 0 0;padding:8px;border:0;background:none;
  cursor:pointer;font:600 12px/1.4 Raleway,Arial,Helvetica,sans-serif;letter-spacing:.6px;
  color:#8a8a8a;text-decoration:underline;text-underline-offset:3px;box-shadow:none;text-shadow:none}
.cxnl-later:hover{color:#1a1a1a;background:none}
.cxnl-later:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}

/* Mobil: gestapelt als Bottom-Sheet, Marke kompakt */
@media (max-width:760px){
  /* Abstand nach oben. Der Wert steckt im Padding des Overlays, damit das
     Sheet den oberen Rand nie erreicht – und im Offset des Schliessen-Knopfs. */
  .cxnl-overlay{
    --cxnl-gap:calc(56px + env(safe-area-inset-top,0px));
    padding:var(--cxnl-gap) 0 0;
    align-items:flex-end}

  /* KEIN vh: iOS Safari rechnet vh ohne Adress- und Tab-Leiste, dadurch wurde
     das Sheet höher als der sichtbare Bereich und der Kopf ragte oben heraus.
     100% bezieht sich auf die Inhaltsbox des Overlays (inset:0 minus Padding)
     und stimmt in jedem Browser. */
  .cxnl-box{
    grid-template-columns:1fr;
    max-height:100%;
    border-radius:14px 14px 0 0;
    /* Auf dem Handy ohne Transform: sonst wäre das Sheet während der
       Animation der Bezugsrahmen für den fixierten Schliessen-Knopf. */
    animation:cxnl-in-m .26s ease both}

  /* Fixiert statt im Sheet mitscrollend – der Knopf bleibt erreichbar, auch
     wenn man im Formular nach unten scrollt. Das Sheet ist mobil immer so
     hoch wie erlaubt, sein oberer Rand liegt also genau bei --cxnl-gap. */
  .cxnl-x{
    position:fixed;
    top:calc(var(--cxnl-gap) + 10px);
    right:12px}

  .cxnl-brand{padding:26px 22px 22px}
  .cxnl-mark{width:76px;height:76px;margin-bottom:16px}
  .cxnl-h{font-size:27px}
  .cxnl-lead{font-size:14px}
  .cxnl-dates{margin-top:16px}
  .cxnl-form{padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px))}
  .cxnl-frame{min-height:600px}
}
@keyframes cxnl-in-m{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cxnl-box{animation:none}}

@media print{.cxnl-overlay{display:none !important}}