/* Minimal, helles, modernes Styling */
.mod-r4g-supporter { background: #ffffff; border: 1px solid #eee; border-radius: 16px; padding: 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.mod-r4g-supporter h3 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.mod-r4g-supporter .field { margin-bottom: 12px; }
.mod-r4g-supporter .field label { display: block; font-weight: 600; margin-bottom: 6px; }
.mod-r4g-supporter .field input[type="text"], 
.mod-r4g-supporter .field input[type="email"], 
.mod-r4g-supporter .field input[type="tel"],
.mod-r4g-supporter .field select,
.mod-r4g-supporter .field textarea { width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; }
.mod-r4g-supporter .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mod-r4g-supporter .actions { margin-top: 16px; display: flex; gap: 12px; align-items: center;}
.mod-r4g-supporter button[type="submit"] { 
    border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700;
    background: linear-gradient(90deg, #235385, #cc412f); color: #fff; cursor: pointer;
}
.mod-r4g-supporter .muted { color: #6b7280; font-size: 0.9rem; font-style: italic; }
.mod-r4g-supporter .success { padding: 14px; border-radius: 12px; background: #eefdf3; border: 1px solid #b7f0cd; }
.mod-r4g-supporter .error { padding: 14px; border-radius: 12px; background: #fff2f2; border: 1px solid #ffd0d0; }
.mod-r4g-supporter .honeypot { display:none !important; }

/* Cards Grid */
.mod-r4g-supporter .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.mod-r4g-supporter .card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; justify-content: space-between;
}
.mod-r4g-supporter .card h4 {
  margin: 0 0 8px 0; font-size: 1.1rem; color: #111827;
}
.mod-r4g-supporter .card .meta {
  font-size: 0.95rem; color: #374151; margin-bottom: 8px;
}
.mod-r4g-supporter .card .addr { color: #6b7280; font-size: 0.9rem; }
.mod-r4g-supporter .card .actions { margin-top: 12px; }
.mod-r4g-supporter .card button {
  border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700;
  background: linear-gradient(90deg, #235385, #cc412f); color: #fff; cursor: pointer;
}

/* Modal */
.r4g-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center; z-index: 9999;
 display:none !important; opacity:0; visibility:hidden; }
.r4g-modal {
  width: min(680px, 94vw); background: #fff; border-radius: 16px; padding: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.r4g-modal .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }
.r4g-modal .modal-header h3 { margin:0; font-size: 1.25rem; }
.r4g-modal .close-btn {
  background: transparent; border: 0; font-size: 22px; cursor: pointer; line-height: 1;
}
.r4g-hidden { display:none; }

/* --- Design Tokens --- */
}

/* Headline underline */
.mod-r4g-supporter h3{
  position:relative;
  padding-bottom:8px;
}
.mod-r4g-supporter h3:after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:72px; height:3px;
  background: linear-gradient(90deg, var(--r4g-primary), var(--r4g-accent));
  border-radius:999px;
}

/* Card Grid */
.mod-r4g-supporter .cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 14px;
}

/* Glassy gradient border */
.mod-r4g-supporter .card{
  position:relative;
  background: var(--r4g-bg);
  border-radius: var(--r4g-radius);
  padding: 18px;
  box-shadow: var(--r4g-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid var(--r4g-border);
  overflow: hidden;
  isolation: isolate;
}
.mod-r4g-supporter .card:before{
  content:"";
  position:absolute; inset: -2px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(35,83,133,.15), rgba(204,65,47,.15), rgba(35,83,133,.15));
  filter: blur(18px);
  z-index:-1;
}
@media (prefers-reduced-motion: reduce){
  .mod-r4g-supporter .card{ transition:none; }
  .mod-r4g-supporter .card:before{ display:none; }
}
.mod-r4g-supporter .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2, 8, 23, 0.10);
}

.mod-r4g-supporter .card h4{
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.mod-r4g-supporter .meta{
  display:flex; flex-wrap:wrap; gap:10px;
  font-size: .95rem; color: var(--r4g-text);
  align-items:center;
}

.mod-r4g-supporter .badge{
  display:inline-flex; align-items:center; gap:8px;
  background: #f8fafc;
  border: 1px solid var(--r4g-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

.mod-r4g-supporter .addr{
  color: var(--r4g-muted);
  font-size: .95rem;
  margin-top: 8px;
}

/* Icon sizing */
.mod-r4g-supporter .icon{ width:18px; height:18px; vertical-align:middle; opacity:.9; }

/* Button */
.mod-r4g-supporter .btn{
  border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700;
  background: linear-gradient(90deg, var(--r4g-primary), var(--r4g-accent));
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 14px rgba(35,83,133,.25);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.mod-r4g-supporter .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(204,65,47,.25); }
.mod-r4g-supporter .btn:focus-visible{ outline: 3px solid rgba(35,83,133,.35); outline-offset: 2px; }
.mod-r4g-supporter .actions{ margin-top: 12px; display:flex; justify-content:space-between; align-items:center; }

/* Modal refinement */
.r4g-modal{ padding: 22px; }
.r4g-modal .modal-header{ margin-bottom: 12px; }
.r4g-modal .modal-header h3{ display:flex; gap:10px; align-items:center; }
.r4g-modal .close-btn{ border-radius: 8px; padding: 4px 8px; }
.r4g-modal .close-btn:hover{ background:#f1f5f9; }

/* Form controls nicer focus */
.mod-r4g-supporter .field input[type="text"],
.mod-r4g-supporter .field input[type="email"],
.mod-r4g-supporter .field input[type="tel"],
.mod-r4g-supporter .field select,
.mod-r4g-supporter .field textarea{
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mod-r4g-supporter .field input:focus,
.mod-r4g-supporter .field select:focus,
.mod-r4g-supporter .field textarea:focus{
  outline: 0;
  border-color: var(--r4g-primary);
  box-shadow: 0 0 0 3px rgba(35,83,133,.15);
}

/* === 3D Cards & Milky Glass Backdrop === */

/* 3D card look: layered shadows + subtle top highlight */
.mod-r4g-supporter .card{
  background:#fff;
  border-radius:16px;
  border:1px solid #e5e7eb;
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 8px 14px rgba(16,24,40,.06),
    0 20px 40px rgba(16,24,40,.08);
  position:relative;
}
.mod-r4g-supporter .card:after{
  /* top light edge for 3D pop */
  content:"";
  position:absolute; left:0; right:0; top:0; height:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  border-top-left-radius:16px; border-top-right-radius:16px;
  pointer-events:none;
}

/* CTA button unchanged from prior gradient version */
.mod-r4g-supporter .card .actions .r4g-open,
.mod-r4g-supporter button[type="submit"]{
  background: linear-gradient(90deg, #235385, #cc412f);
  color:#fff; border:0; border-radius:999px; padding:10px 16px; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 14px rgba(35,83,133,.25);
}
.mod-r4g-supporter .card .actions .r4g-open:hover{ transform: translateY(-1px); }
.mod-r4g-supporter .card .actions .r4g-open{ transition: transform .12s ease; }

/* Milky glass backdrop: bright blur to improve readability; modal itself stays solid */
.r4g-modal-backdrop{
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.r4g-modal{
  background:#ffffff; /* solid for readability */
  border:1px solid #e5e7eb; border-radius:16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.20);
}

/* Ensure text contrast inside modal */
.r4g-modal, .r4g-modal *{ color:#111; }

.r4g-modal-backdrop.r4g-open{ display:flex !important; opacity:1; visibility:visible; }


/* --- Fix: Badges Datum/Uhrzeit in schwarz --- */
.mod-r4g-supporter .badge {
  color: #000 !important;
}
.mod-r4g-supporter .badge .icon {
  stroke: #000 !important;
}


/* Info block in card */
.mod-r4g-supporter .card .info{
  margin-top:10px; font-size:.95rem; color:#374151;
}
.mod-r4g-supporter .card .link.moreless{
  background:transparent; border:0; color:#235385; font-weight:600; cursor:pointer; padding:0; margin-top:6px;
  text-decoration:underline;
}

/* Ensure backdrop centers modal */
.r4g-modal-backdrop{
  align-items:center !important;
  justify-content:center !important;
}


/* --- Robust centering & visibility control for overlay --- */
.r4g-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  display: none !important;
  opacity: 0;
  visibility: hidden;
}
.r4g-modal-backdrop.r4g-open{
  display: grid !important;
  place-items: center;
  opacity: 1;
  visibility: visible;
}
.r4g-modal{
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: 0; /* centered by grid */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.20);
}



/* --- Smaller, centered modal --- */
.r4g-modal{
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 !important; /* grid-centered */
  padding: 16px 18px !important;
  border-radius: 14px !important;
}


/* --- Modal: fit to content, centered, with viewport padding --- */
.r4g-modal-backdrop.r4g-open{
  display: grid !important;
  place-items: center !important;
  padding: 16px !important; /* ensure left/right gap to viewport */
}
.r4g-modal{
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100vw - 40px) !important; /* keep some side gap */
  max-height: calc(100vh - 40px) !important;
  box-sizing: border-box !important;
  padding: 20px 22px !important;
  border-radius: 14px !important;
  margin: 0 !important;
}

/* Inputs: cap max width so modal doesn't stretch too wide on desktop */
@media (min-width: 480px){
  .r4g-modal .field input[type="text"],
  .r4g-modal .field input[type="email"],
  .r4g-modal .field input[type="tel"],
  .r4g-modal .field select,
  .r4g-modal .field textarea{
    max-width: 420px !important;
  }
}


/* --- Compact modal variant --- */
.r4g-modal-backdrop.r4g-open{
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-height: 100vh !important;
  padding: 24px 16px !important; /* symmetric padding to keep side and top/bottom gaps */
}

.r4g-modal{
  width: clamp(320px, 92vw, 420px) !important; /* narrow, responsive */
  max-height: calc(100vh - 48px) !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
}

/* Single-column layout inside modal for compactness */
.r4g-modal .grid-2{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

/* Tighter fields */
.r4g-modal .field{ margin-bottom: 8px !important; }
.r4g-modal .field label{ font-size: 12.5px !important; margin-bottom: 4px !important; }
.r4g-modal .field input[type="text"],
.r4g-modal .field input[type="email"],
.r4g-modal .field input[type="tel"],
.r4g-modal .field select,
.r4g-modal .field textarea{
  height: 38px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}
.r4g-modal .field textarea{ height:auto !important; min-height: 70px !important; }

.r4g-modal .actions{ gap: 8px !important; flex-wrap: wrap !important; }
.r4g-modal .actions .muted{ font-size: 12.5px !important; }


/* --- Spec: min 200px side gaps, modal ~700x400, centered --- */
.r4g-modal-backdrop{
  /* defaults set earlier (hidden, blur, fixed, full screen) */
}
.r4g-modal-backdrop.r4g-open{
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  /* At least 200px side padding; auto center relative to 700px width */
  padding: 48px max(200px, calc(50vw - 350px)) !important;
  box-sizing: border-box !important;
}

.r4g-modal{
  width: 700px !important;
  height: 400px !important;
  max-width: 700px !important;
  max-height: 400px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  border-radius: 12px !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

/* Fallback for small screens (keeps UI usable if viewport < 1100px) */
@media (max-width: 1100px){
  .r4g-modal-backdrop.r4g-open{
    padding: 16px !important;
  }
  .r4g-modal{
    width: min(700px, calc(100vw - 32px)) !important;
    height: min(400px, calc(100vh - 32px)) !important;
  }
}


/* --- Hard centering via fixed modal to defeat template CSS --- */
.r4g-modal{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 700px !important;
  height: 800px !important;
  max-width: 700px !important;
  max-height: 800px !important;
  overflow: auto !important;
}

/* Keep 200px min side gaps on wide screens */
@media (min-width: 1500px){
  .r4g-modal-backdrop.r4g-open{ padding-left: 200px !important; padding-right: 200px !important; }
}

/* Fallback for smaller screens: scale down but keep center */
@media (max-width: 740px){
  .r4g-modal{ width: calc(100vw - 32px) !important; }
}
@media (max-height: 820px){
  .r4g-modal{ height: calc(100vh - 32px) !important; }
}