/* ===========================
   ECBG Papenburg – Custom CSS
   =========================== */

/* Design Tokens */
:root{
  --logo-url: url(https://u.jimcdn.com/cms/o/sdab1743014cfb693/userlayout/img/logo.png?t=1760384928);                 /* <- ggf. anpassen */
  --hero-url: url('REPLACE_WITH_BUILDING_URL'); /* <- anpassen */
  /* Event-Bild (für Event-Modal via .event-img) */
  --event-url: url(https://u.jimcdn.com/cms/o/sdab1743014cfb693/userlayout/img/banner.jpg?t=1766480865);

  --ink:#111827;
  --muted:#6b7280;
  --ring:#e5e7eb;
  --card:#ffffff;

  /* Hauptfarbe – dunkles Blau */
  --brand:#0f172a;
  --brand-ink:#ffffff;
}

/* Bildfläche fürs Event-Modal */
.event-img{
  width: 100%;
  aspect-ratio: 3/4;                 /* bei Querformat gern 16/9 */
  background: var(--event-url) center/contain no-repeat;
  background-color: #fff;            /* weißer Rand bei contain */
  border-radius: 12px;
}

/* Base / Reset */
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:#fff;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1120px;margin:0 auto;padding:0 16px}
.section{padding:64px 0}
.eyebrow{letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-size:12px}
.h1{font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.1;margin:12px 0 0;letter-spacing:-.01em}
.h2{font-weight:800;font-size:clamp(28px,4vw,40px);margin:0 0 24px}
.lead{font-size:clamp(16px,2.2vw,20px);color:#f9fafb}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid var(--ring);font-weight:600}
.btn--brand{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.btn--brand:hover{filter:brightness(1.1)}
.btn--glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}

.tag{display:inline-block;background:#fff;color:#111827;border-radius:999px;font-size:12px;padding:6px 10px;margin:4px 8px 0 0;border:1px solid var(--ring)}

.grid{display:grid;gap:24px}
@media(min-width:768px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#d1fae5;color:#065f46;font-size:12px;border:1px solid #bbf7d0}
.live-dot{width:6px;height:6px;border-radius:50%;background:#10b981;display:inline-block;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Header / Nav */
.header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #f3f4f6;z-index:50}
.nav{display:flex;align-items:center;gap:8px}
.nav a{padding:8px 12px;border-radius:8px}
.nav a:hover{background:#f3f4f6;text-decoration:none}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:40px;height:40px;background:var(--logo-url) left center/contain no-repeat;border-radius:10px}

/* Logo-Bild neben Text (falls <img class="brand__image"> genutzt wird) */
.brand{display:flex;align-items:center;gap:10px}
.brand__image{
  width:auto;height:36px;max-width:60px;object-fit:contain;border-radius:4px;
}

/* Mobile Menu */
.menu-btn{width:40px;height:40px;border:1px solid #d1d5db;border-radius:10px;background:#fff;display:none;place-items:center}
.menu{display:none}
@media(max-width:767px){
  .nav{display:none}
  .menu-btn{display:inline-grid}
  .menu{display:block;margin:12px 0}
  .menu a{display:block;padding:10px;border-radius:8px}
  .menu a:hover{background:#f3f4f6}
}

/* Hero */
.hero{position:relative;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;background:linear-gradient(to right,rgba(17,24,39,.8),rgba(55,65,81,.6)),var(--hero-url);background-size:cover;background-position:center}
.hero__body{position:relative;padding:96px 0}
/* Hero-Texte/Links weiß belassen */
.hero .h1,.hero .lead,.hero a{color:#fff}
.hero a:hover{color:#e5e7eb}
/* Tag-Fix im Hero */
.hero .tag{background:#fff;color:var(--ink);border:1px solid var(--ring)}

/* Personen */
.person{text-align:center}
.person__ph{width:96px;height:96px;margin:0 auto;border-radius:999px;overflow:hidden;border:1px solid var(--ring);background:#f3f4f6;display:grid;place-items:center;color:#6b7280;font-size:12px}
.person__name{font-weight:600;margin-top:12px}
.person__role{font-size:14px;color:#6b7280}

/* Footer */
.footer{border-top:1px solid var(--ring);padding:40px 0;background:#fff}
.small{font-size:12px}

/* Jimdo-Pflichtbereiche unsichtbar belassen */
#system-placeholders{display:none}

/* ==== DSGVO 2-Klick Embeds (YouTube + Google Maps) ==== */
.embed{position:relative}
.embed-placeholder{width:100%;background:#f3f4f6;border:1px solid var(--ring);border-radius:12px;overflow:hidden;display:grid;place-items:center;color:#9ca3af}
.embed-consent{background:#fff;border:1px solid var(--ring);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.embed-consent p{margin:0;color:var(--muted);font-size:14px}
.embed-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn--consent{background:#111827;color:#fff;border-color:transparent}
.embed.is-active .embed-consent{display:none}
/* Aspect ratios */
.embed--16x9 .embed-placeholder{aspect-ratio:16/9}
.embed--4x3  .embed-placeholder{aspect-ratio:4/3}

/* ==== Overrides gegen altes Jimdo-Orange ==== */
h1,h2,h3,h4,h5,h6{color:var(--ink) !important}
a,a:visited{color:var(--ink) !important;text-decoration:none !important}
a:hover{color:var(--brand) !important;text-decoration:underline !important}
.nav a,.menu a{color:var(--ink) !important}

/* ==== Modal (Backdrops & Card) ==== */
.no-scroll{overflow:hidden}

/* Hintergründe (Seitenoverlay) – ggf. transparenter stellen, z.B. .5 */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.6);
  display:none;align-items:center;justify-content:center;
  z-index:1000;padding:24px;
}
.modal-backdrop.is-open{display:flex} /* per JS gesetzt */

/* Modal-Karte: 50% transparent + Blur (Glas) */
.modal{
  width:min(960px,100%);
  max-height:90vh;
  background: rgba(255,255,255,.5);               /* 50% Transparenz */
  color: var(--ink);
  border-radius:16px;
  border:1px solid rgba(229,231,235,.7);          /* halbtransparent */
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:grid;
  grid-template-rows:auto 1fr;
  backdrop-filter: blur(8px);                      /* Unschärfe hinter dem Modal */
  -webkit-backdrop-filter: blur(8px);             /* Safari */
}

/* Header leicht unterlegen für bessere Lesbarkeit */
.modal__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--ring);
  background: rgba(255,255,255,.35);
}

.modal__title{font-weight:800;font-size:20px}

.modal__close{
  border:1px solid var(--ring);background:#fff;border-radius:10px;
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
}
.modal__close:hover{background:#f3f4f6}

.modal__body{padding:20px;overflow:auto;line-height:1.65}
.modal__body h3{margin:20px 0 6px;font-size:18px;font-weight:700}
.modal__body p{margin:8px 0}
.modal__body ul{margin:8px 0 16px 20px}

/* Bild im Modal optisch als Karte */
.modal__body img{
  border-radius:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.12);
}

/* Fallback, falls kein backdrop-filter unterstützt wird */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .modal{ background: rgba(255,255,255,.7); }     /* weniger transparent */
}

/* Buttons: Schriftfarbe erzwingen */
.btn--brand,
.btn--brand:visited,
.btn--glass,
.btn--glass:visited{color:#fff !important}

/* Hover-Effekt für beide Typen */
.btn--brand:hover,
.btn--glass:hover{filter:brightness(1.1);color:#fff !important}

/* Nur die Hero-Hauptüberschrift weiß */
.hero h1.h1{color:#fff !important;font-weight:800}

/* Map kompakter darstellen und Grid-Stretch verhindern */
.map-compact{
  width:auto;max-width:480px;margin:8px auto;justify-self:center;border-radius:12px;
}
@media (max-width: 767px){
  .map-compact{max-width:360px}
}
/* Event-Modal: weißen Rand um das Bild entfernen */
#eventModal .modal__body{
  padding: 0;               /* kein Innenabstand = kein sichtbarer Rand */
  background: transparent;
}

#eventModal .event-img{
  background-color: transparent;  /* statt #fff */
  border-radius: 12px;            /* gerne lassen oder 0 setzen */
}

/* (Optional) falls noch ein dünner Rahmen sichtbar ist: Modal-Rahmen für dieses Modal ausblenden */
#eventModal .modal{
  border: 0;                 /* optional: Rahmen weg */
  /* box-shadow: none;      // optional: Schatten auch weg */
}
/* Event-Modal: Header nicht hervorheben (ohne Leiste, gleiche Transparenz) */
#eventModal .modal__header{
  background: transparent;    /* Leiste weg */
  border: 0;                  /* keine Trennlinie */
  padding: 12px 16px;         /* etwas Luft rund ums Label */
  backdrop-filter: none;      /* kein zusätzlicher Glas-Effekt */
}

/* Titel bleibt sichtbar, aber dezent */
#eventModal .modal__title{
  opacity: .85;               /* weniger dominant */
  /* optional für bessere Lesbarkeit auf dunklem Hintergrund:
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  */
}

/* Close-Button dezenter, ohne „Karte“-Look */
#eventModal .modal__close{
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
}
#eventModal .modal__close:hover{
  background: rgba(255,255,255,.25);
}