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

/* Design Tokens */
:root{
  --logo-url: url(https://u.jimcdn.com/cms/o/sdab1743014cfb693/userlayout/img/logo.png?t=1760384928);   /* <- anpassen */
  --hero-url: url('REPLACE_WITH_BUILDING_URL'); /* <- anpassen */

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

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

/* 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 */
.brand {
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Bild und Text */
}

.brand__image {
  width: auto;
  height: 36px; /* maximale Höhe des Logos */
  max-width: 60px; /* Sicherheitsbegrenzung für sehr breite Logos */
  object-fit: contain; /* verhindert Verzerrung */
  border-radius: 4px; /* optional: leicht abgerundet */
}

/* 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{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden} */
#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 (Glaubensbekenntnis) ==== */
.no-scroll{overflow:hidden}
.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{
  width:min(960px,100%);max-height:90vh;background:#fff;color:var(--ink);
  border-radius:16px;border:1px solid var(--ring);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:grid;grid-template-rows:auto 1fr;
}
.modal__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--ring);
}
.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}

/* 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; /* wie im Screenshot 2 */
}

/* Map kompakter darstellen und Grid-Stretch verhindern */
.map-compact{
  width: auto;                 /* nicht automatisch 100% füllen */
  max-width: 480px;            /* Desktop: maximale Breite */
  margin: 8px auto;            /* zentriert; wenn linksbündig: margin:8px 0 */
  justify-self: center;        /* Grid: nicht stretchen, mittig einrasten */
  border-radius: 12px;         /* optional */
}

@media (max-width: 767px){
  .map-compact{
    max-width: 360px;          /* auf Smartphones kleiner */
  }
}