/* efg-bremerhaven.de – Farben aus dem Baptisten-Logo (Petrol/Hellblau), Schriften Bitter + Fira Sans (lokal) */
@font-face{font-family:"Fira Sans";font-weight:400;font-display:swap;src:url(fonts/fira-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/fira-sans-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:600;font-display:swap;src:url(fonts/fira-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Bitter;font-weight:600;font-display:swap;src:url(fonts/bitter-latin-600-normal.woff2) format("woff2")}

:root{
  --petrol:#07657f;--petrol-dunkel:#05495c;--hellblau:#7bb3ca;--mittelblau:#4b819d;--zart:#e7f1f5;--zart2:#f4f8fa;
  --text:#1c2b31;--leise:#5a6b72;--linie:#d5e3e9;--weiss:#fff;--rot:#b3261e;
  --titel:Bitter,Georgia,"Times New Roman",serif;--schrift:"Fira Sans",Calibri,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--weiss);color:var(--text);font:17px/1.65 var(--schrift)}
img{max-width:100%;height:auto;display:block}
a{color:var(--petrol)}
a:hover{color:var(--petrol-dunkel)}
:focus-visible{outline:3px solid var(--hellblau);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.sprung{position:absolute;left:-999px;top:0;background:var(--petrol);color:#fff;padding:8px 12px;z-index:30}
.sprung:focus{left:8px}
.vorschau-band{background:#fff3c4;color:#5c4400;text-align:center;font-size:14px;padding:6px 12px}
h1,h2,h3{font-family:var(--titel);font-weight:600;color:var(--petrol);line-height:1.2;margin:0;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
h1{font-size:clamp(28px,4vw,40px)}
h2{font-size:clamp(21px,2.4vw,26px)}
h3{font-size:19px}
p{margin:0}
.text{display:flex;flex-direction:column;gap:14px}
.text h3{margin-top:10px}
.text ul{margin:0;padding-left:1.3em}
.einleitung{max-width:72ch;font-size:18px}
.leer,.hinweis{color:var(--leise)}
.marke{display:inline-block;font:600 12px/1 var(--schrift);text-transform:uppercase;letter-spacing:.06em;color:var(--rot);border:1px solid currentColor;border-radius:3px;padding:3px 6px;vertical-align:middle}

/* Kopf mit Ausklapp-Menü */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-top:4px solid var(--petrol);border-bottom:1px solid var(--linie);backdrop-filter:blur(6px)}
.kopf-innen{display:flex;align-items:center;gap:18px;padding-block:10px;flex-wrap:wrap}
.logo{margin-right:auto;line-height:0}
.logo img{height:62px;width:auto}
.logo-text{font:600 18px/1.2 var(--titel);color:var(--petrol)}
.hauptmenue{display:flex;align-items:center;gap:6px}
.hauptmenue>a.intranet{color:var(--petrol);padding:8px;border-radius:50%;display:inline-flex}
.hauptmenue>a.intranet:hover{background:var(--zart)}
.ausklapp{position:relative}
.ausklapp-knopf{font:600 16px/1 var(--titel);color:var(--petrol);background:none;border:0;padding:12px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;border-radius:6px}
.ausklapp-knopf::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.ausklapp-knopf:hover,.ausklapp-knopf.aktiv{background:var(--zart)}
.ausklapp-liste{display:none;position:absolute;right:0;top:100%;min-width:230px;background:var(--zart);border:1px solid var(--linie);border-radius:0 0 8px 8px;padding:8px 0;box-shadow:0 10px 26px rgba(5,73,92,.14)}
.ausklapp:hover .ausklapp-liste,.ausklapp:focus-within .ausklapp-liste,.ausklapp.offen .ausklapp-liste{display:block}
.ausklapp-liste a{display:block;padding:8px 18px;color:var(--petrol);text-decoration:none;font:600 15px/1.4 var(--titel)}
.ausklapp-liste a:hover,.ausklapp-liste a[aria-current]{background:#d6e8ef}
.menue-knopf{display:none;background:var(--petrol);color:#fff;border:0;border-radius:6px;font:600 15px/1 var(--schrift);padding:10px 14px;cursor:pointer}
@media (max-width:860px){
  .logo img{height:50px}
  .menue-knopf{display:block}
  .hauptmenue{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px}
  .hauptmenue.offen{display:flex}
  .hauptmenue>a.intranet{order:9;align-self:flex-start}
  .ausklapp-knopf{width:100%;justify-content:space-between;font-size:17px;padding:14px 8px;border-radius:0;border-top:1px solid var(--linie)}
  .ausklapp:hover .ausklapp-liste{display:none}
  .ausklapp.offen .ausklapp-liste,.ausklapp:focus-within .ausklapp-liste{display:block}
  .ausklapp-liste{position:static;box-shadow:none;border:0;border-radius:0;background:var(--zart2)}
}

main{min-height:50vh}
.seite{padding-block:40px 64px;display:flex;flex-direction:column;gap:22px}
.seite.schmal{max-width:860px}
.seite.mit-bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:40px;align-items:start}
.seite.mit-bild>div{display:flex;flex-direction:column;gap:22px;min-width:0}
@media (max-width:860px){.seite.mit-bild{grid-template-columns:minmax(0,1fr)}}
.seitenbild img{border-radius:8px}
.breitbild{margin:0 0 32px}
.breitbild img{border-radius:8px;margin:0 auto}
.untertitel{font:600 19px/1.4 var(--titel);color:var(--mittelblau)}
.schluss{font:600 19px/1.4 var(--titel);color:var(--petrol)}
.schluss.gross{font-size:clamp(26px,3.5vw,36px);padding-bottom:48px}
.kontaktzeile{font-weight:600}
figure{margin:0}

/* Startseite */
.start-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:36px;padding-block:32px 48px;align-items:start}
@media (max-width:900px){.start-raster{grid-template-columns:minmax(0,1fr)}}
.start-haupt{display:flex;flex-direction:column;gap:18px}
.kirche img{width:100%;border-radius:10px;aspect-ratio:1366/700;object-fit:cover}
.start-haupt h1{font-size:clamp(24px,3vw,32px)}
.adresse{padding-top:6px;border-top:1px solid var(--linie)}
.start-seite{display:flex;flex-direction:column;gap:24px}
.kasten{background:var(--zart);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.kasten h2{font-size:21px;border-bottom:2px solid var(--petrol);padding-bottom:6px}
.demnaechst,.predigt-kurz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.termin-kurz{display:flex;flex-direction:column;line-height:1.35}
.termin-kurz time{font-size:14px;color:var(--leise)}
.termin-kurz time b{color:var(--petrol);font-weight:600}
.termin-kurz a{font-weight:600;text-decoration:none}
.termin-kurz.abgesagt a{text-decoration:line-through;color:var(--leise)}
.predigt-kurz a{font-weight:600;text-decoration:none;display:block}
.predigt-kurz small{color:var(--leise);font-size:14px}
.mehr{font-size:15px}
.diashow-bereich{background:var(--zart2);padding-block:36px 48px;border-top:1px solid var(--linie)}
.diashow-bereich h2{margin-bottom:16px}
.diashow{position:relative;aspect-ratio:16/9;max-height:78vh;overflow:hidden;border-radius:10px;background:#cfe0e7}
.dia{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.dia.aktiv{opacity:1;z-index:1}
.dia img{width:100%;height:100%;object-fit:cover}
.dia>a{display:block;width:100%;height:100%;position:relative}
.dia.ganz img{object-fit:contain;position:relative}
.dia-hg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(24px) brightness(.75);transform:scale(1.1)}
.dia figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font:600 20px/1.3 var(--titel)}
.dia-pfeil{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--petrol);font-size:30px;line-height:1;cursor:pointer}
.dia-pfeil.zurueck{left:12px}.dia-pfeil.weiter{right:12px}
.dia-punkte{position:absolute;z-index:2;right:16px;bottom:16px;display:flex;gap:8px}
.dia-punkte button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
.dia-punkte button[aria-current]{background:#fff}

/* Wer wir sind, Leitung */
.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.karten{grid-template-columns:minmax(0,1fr)}}
.karte{border:1px solid var(--linie);border-top:4px solid var(--hellblau);border-radius:8px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;background:#fff}
.karte h2{font-size:20px}
.personen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:760px){.personen{grid-template-columns:minmax(0,1fr)}}
.person{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;align-items:start;border-bottom:1px solid var(--linie);padding-bottom:22px}
.person-foto{width:130px;height:160px;object-fit:cover;border-radius:8px}
.person-foto.leer{background:var(--zart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2' fill='%237bb3ca'/%3E%3Cpath d='M3.5 21c.8-4.6 4.3-7 8.5-7s7.7 2.4 8.5 7z' fill='%237bb3ca'/%3E%3C/svg%3E") center/60% no-repeat}
.person .aufgabe{font:600 13px/1.3 var(--schrift);text-transform:uppercase;letter-spacing:.08em;color:var(--mittelblau)}
.person>div{display:flex;flex-direction:column;gap:8px}
@media (max-width:420px){.person{grid-template-columns:90px minmax(0,1fr)}.person-foto{width:90px;height:110px}}

/* Termine */
.termin-filter,.predigt-suche{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.termin-filter input,.predigt-suche input{flex:1;min-width:0;max-width:420px;font:16px var(--schrift);padding:10px 12px;border:1px solid var(--linie);border-radius:6px}
.monat h2{font-size:22px;padding:8px 0;border-bottom:2px solid var(--petrol)}
.termine{list-style:none;margin:0;padding:0}
.termin{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:18px;padding:16px 0;border-bottom:1px solid var(--linie);align-items:start}
.termin .datum{display:flex;flex-direction:column;align-items:center;background:var(--zart);border-radius:8px;padding:6px 0;line-height:1.1;color:var(--petrol);font-size:13px;text-transform:uppercase}
.termin .datum b{font:600 26px/1.1 var(--titel)}
.termin-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.termin .zeit{color:var(--leise);font-size:15px}
.termin .thema{font-style:italic}
.termin.abgesagt h3,.termin.abgesagt .datum{opacity:.6}
.termin.abgesagt h3{text-decoration:line-through;text-decoration-color:var(--rot)}
.flyer img{width:150px;border-radius:6px;border:1px solid var(--linie)}
@media (max-width:640px){.termin{grid-template-columns:56px minmax(0,1fr)}.flyer{grid-column:2}.flyer img{width:100%;max-width:280px}}

/* Predigten */
.spieler{position:sticky;top:86px;z-index:5;background:var(--petrol);color:#fff;border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.spieler audio{width:100%}
.spieler-titel{font-weight:600}
.tabelle-rahmen{overflow-x:auto}
table.predigten{width:100%;border-collapse:collapse;font-size:16px}
.predigten th{text-align:left;font:600 14px var(--schrift);color:var(--leise);border-bottom:2px solid var(--petrol);padding:8px}
.predigten td{padding:9px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
.predigten tbody tr:nth-child(odd){background:var(--zart2)}
.predigten td.titel{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.predigten .datum{white-space:nowrap;font-variant-numeric:tabular-nums}
.predigten .serie{display:block;font-weight:400;color:var(--leise)}
.abspielen{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--petrol);color:#fff;cursor:pointer;font-size:12px;line-height:30px;padding:0 0 0 2px}
.abspielen.laeuft{background:var(--hellblau)}
tr.versteckt{display:none}
@media (max-width:640px){
  .predigten thead{display:none}
  .predigten tr{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:8px 0}
  .predigten td{border:0;padding:2px 8px}
  .predigten td.titel{grid-column:1/-1}
  .predigten td:nth-child(2){grid-column:1/-1;color:var(--leise);font-size:14px}
  .predigten td:nth-child(3){color:var(--leise);font-size:14px}
}

/* Kontakt */
.anfrage{display:flex;flex-direction:column;gap:14px;max-width:640px}
.anfrage label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:15px}
.anfrage input,.anfrage textarea{font:16px var(--schrift);padding:10px 12px;border:1px solid #b9cdd5;border-radius:6px;width:100%}
.anfrage input:focus,.anfrage textarea:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px var(--zart)}
.anfrage .haken{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
.anfrage .haken input{width:auto;margin-top:5px}
.falle{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.formular-meldung{font-weight:600;color:var(--petrol)}
.knopf{font:600 16px/1 var(--schrift);background:var(--petrol);color:#fff;border:0;border-radius:6px;padding:13px 22px;cursor:pointer}
.knopf:hover{background:var(--petrol-dunkel)}
.knopf.zweit{background:var(--zart);color:var(--petrol)}
.rechtlich{font-size:16px}

/* Fuß */
.fuss{background:var(--petrol);color:#e4f0f4;margin-top:24px}
.fuss-innen{display:flex;flex-direction:column;gap:18px;padding-block:28px}
.fuss-logo{background:#fff;border-radius:8px;padding:10px 14px;height:auto;width:min(100%,560px);align-self:flex-start}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:14px}
.fuss nav{display:flex;flex-wrap:wrap;gap:18px}
.fuss a{color:#fff}
@media (prefers-reduced-motion:reduce){.dia{transition:none}}
@media print{.kopf,.fuss,.diashow-bereich,.spieler,.termin-filter,.predigt-suche{display:none}}
@media (max-width:700px){.dia-pfeil{width:32px;height:32px;font-size:22px;background:rgba(255,255,255,.7)}.dia-pfeil.zurueck{left:6px}.dia-pfeil.weiter{right:6px}}