/* style.css – Church Teamfinder */

/* ================== Fonts ================== */
@font-face {
  font-family: 'Flama Semicondensed';
  src: url('fonts/FlamaSemicond-Book.woff2') format('woff2'),
       url('fonts/FlamaSemicond-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama Semicondensed';
  src: url('fonts/FlamaSemicond-Light.woff2') format('woff2'),
       url('fonts/FlamaSemicond-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Flama Semicondensed';
  src: url('fonts/FlamaSemicond-Medium.woff2') format('woff2'),
       url('fonts/FlamaSemicond-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --brand: #0b57d0;
  --brand-hover: #0a49b0;
  --brand-active: #083f98;
  --text: #111;
  --muted: #666;
  --card-radius: 14px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 6px 14px rgba(0,0,0,.15);
  --z-modal: 3000;
  --z-overlay: 4000;
}

/* ================== Base ================== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Flama Semicondensed','Roboto Condensed','Inter',system-ui,sans-serif;
  background:#f4f4f4;
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ================== Header ================== */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#333;
  color:#fff;
  padding:0 2rem;
  display:flex;
  align-items:center;
  height:102px;
}

.header-logo{
  height:64px;
  width:auto;
  margin-right:1rem;
}

.header-title{
  font-size:24px;
  font-weight:500;
  text-transform:uppercase;
}

/* ================== Buttons ================== */
.btn,button{font-family:inherit;font-size:1rem}
.btn-primary{
  appearance:none;border:none;background:var(--brand);color:#fff;
  padding:.7rem 1.15rem;border-radius:9999px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 2px 6px rgba(11,87,208,.25);
  transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-primary:hover{background:var(--brand-hover);box-shadow:0 6px 14px rgba(11,87,208,.3)}
.btn-primary:active{transform:translateY(1px);background:var(--brand-active)}
.btn-primary:focus{outline:2px solid rgba(11,87,208,.35);outline-offset:2px}

/* ================== Filterbar ================== */
.filtersbar{
  position: sticky;
  top: 102px; /* exakt unter dem Header */
  z-index: 900;
  display: block;
  margin: 0 2rem;
  padding: .75rem 0 .5rem;
  background: #f4f4f4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Scroller mittig, Platz für Pfeile */
.filters-scroller{
  position:relative;
  margin:0 48px;
}
.filters-track{
  display:flex;gap:.75rem;align-items:center;
  overflow-x:auto;overflow-y:visible;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:.25rem .25rem;
}
.filters-track::-webkit-scrollbar{display:none}

/* Pfeile */
.filters-nav{
  position:absolute;
  top:30%;
  transform:translateY(-50%);
  width:36px;height:36px;
  border:none;background:#fff;color:#333;
  border-radius:9999px;box-shadow:0 4px 12px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:opacity .2s ease, transform .06s ease, box-shadow .15s ease;
  z-index:5;
}
#filters-left{left:0;}
#filters-right{right:0;}
.filters-nav:hover{opacity:0.9;}
.filters-nav:active{transform:translateY(-50%) scale(0.96);}
.filters-nav[disabled]{opacity:.35;cursor:default;box-shadow:none}

/* Edge-Glows */
.filters-scroller::before,
.filters-scroller::after{
  content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;
  transition:opacity .2s ease;opacity:0;
}
.filters-scroller.has-left::before{
  left:-2px;background:linear-gradient(to right, rgba(244,244,244,1) 30%, rgba(244,244,244,0));opacity:1;
}
.filters-scroller.has-right::after{
  right:-2px;background:linear-gradient(to left, rgba(244,244,244,1) 30%, rgba(244,244,244,0));opacity:1;
}

/* Filterbuttons */
.filter{flex:0 0 auto}
.filter-btn{
  display:flex;align-items:center;gap:.5rem;background:#eee;border:none;border-radius:24px;
  padding:.6rem 1rem;cursor:pointer;font-weight:600;font-size:1rem;letter-spacing:.02em;white-space:nowrap;
}
.filter-btn .caret{font-size:.85em}
.filter-btn .count{
  display:inline-block;min-width:1.2rem;padding:.05rem .35rem;border-radius:.6rem;background:#333;color:#fff;font-size:.75rem;text-align:center;
}

/* Teams-Zähler */
.filters-info{
  margin-top:.5rem;
  font-weight:600;
  font-size:1rem;
  color:var(--text);
}

/* Menü-Portal + Animation */
.menu-portal{
  position: fixed;
  z-index: var(--z-overlay);
  width: 260px;
  max-height: 60vh;
  overflow: auto;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:.5rem;
  opacity:0;
  transform: translateY(6px) scale(0.985);
  transition: opacity .16s ease, transform .16s ease;
}
.menu-portal.show{opacity:1;transform:translateY(0) scale(1);}
.menu-portal.hide{opacity:0!important;transform:translateY(6px) scale(0.985)!important;}
.menu-portal .opt{display:flex;align-items:center;gap:.6rem;padding:.5rem;border-radius:8px;cursor:pointer;font-size:.95rem}
.menu-portal .opt:hover{background:#f3f3f3}
.menu-portal .footer{border-top:1px solid #eee;margin-top:.5rem;padding:.5rem .25rem;display:flex;justify-content:space-between;align-items:center}
.menu-portal .clear-btn{background:none;border:none;color:var(--brand);cursor:pointer;font-weight:600;padding:.25rem .25rem}

/* ================== Cards ================== */
.teamgroups{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem;
  justify-items:center;
  margin:0 2rem;
  padding:1.5rem 0 2rem;
}

.teamgroup{
  display:grid;grid-template-rows:auto auto 1fr auto;
  background:#fff;border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  min-height:260px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  width:100%;max-width:400px;overflow:hidden;
}
.teamgroup:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* Bilder in Cards */
.teamgroups .teamgroup > img.card-hero{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit:cover;
  border-top-left-radius:var(--card-radius);
  border-top-right-radius:var(--card-radius);
  background:#f4f4f4;
}
.teamgroups .teamgroup img.card-icon{
  width:110px;max-height:80px;object-fit:cover;border-radius:10px;
}

/* Inhalte */
.card-header{padding:1rem 1.25rem .5rem}
.card-header h3{margin:0;font-weight:700;font-size:1.15rem;line-height:1.2}

/* ✅ kräftigere Schrift in der Kartenansicht */
.card-body{
  padding:.75rem 1.25rem;
}
.card-body p{
  margin:0;
  font-size:1rem;
  line-height:1.45;
  font-weight:500;   /* war 400 → jetzt Medium wie Detail */
  color:#000;        /* satteres Schwarz */
}
.card-body p+p{margin-top:.35rem}
.card-body .spacer{margin-top:.6rem}

.card-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;margin-top:.25rem;padding:.75rem 1.25rem 1rem;
}
.card-footer .contact{margin:0;flex:1 1 auto;min-width:50%;font-size:1rem;color:#000;}
.card-footer .contact strong{font-weight:600;letter-spacing:.1px;color:#000;}

/* ================== Modal ================== */
.modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;padding:1rem;z-index:var(--z-modal)
}
.modal-content{
  background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  width:min(980px, 96vw);max-height:90vh;overflow:auto;
  padding:1.25rem 1.25rem 1rem;
}
.modal-content .close{float:right;font-size:1.8rem;cursor:pointer}

/* Detaildarstellung */
.detail-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
  align-items:stretch;
}
.detail-left h2{margin:0 0 .4rem}
.detail-left p{margin:.25rem 0; color:#000;}
#modal-description{color:#000;}
#modal-leader{color:#000;}

/* kleines Bild im Detail */
.contact-icon{
  width:300px;
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
  margin:.35rem 0 .5rem;
  display:block;
}

/* Meta-Typografie – kräftig */
.meta{margin-top:.85rem; display:grid; gap:.15rem;}
.meta p{margin:.15rem 0; line-height:1.45; color:#000;}
.meta .label{ font-weight:500; color:#000; letter-spacing:.02em; }
.meta .value{ color:#000; }
.detail-left .divider{ height:1px; background:#eee; margin:.6rem 0 .4rem; border:0; }

/* rechte Spalte */
.detail-right{
  display:grid;
  grid-template-rows: 1fr auto;
  gap:.5rem;
}
.detail-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  background:#f4f4f4;
}

/* Galerie */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* ================== Responsive ================== */
@media (max-width:900px){
  .teamgroups{margin:0 1rem}
}
@media (max-width:800px){
  .detail-layout{
    grid-template-columns:1fr;
    align-items:start;
  }
  .detail-right{
    grid-template-rows: auto auto;
  }
  .detail-right img{
    height:auto;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width:600px){
  .card-footer{flex-direction:column;align-items:flex-start}
  .card-footer .contact{min-width:100%}
  .teamgroups .teamgroup img.card-icon{width:96px;max-height:72px}
}

/* --- Fix: Close-Button im Modal auf Mobile immer klickbar --- */
@media (max-width:800px){
  .modal-content{
    position: relative;
  }
  .modal-content .close{
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 50;
    float: none;

    width: 44px;
    height: 44px;
    line-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.9);
    border-radius: 9999px;
    pointer-events: auto;
  }
}

/* ================== Mobile Header Shrink ================== */
@media (max-width: 768px){
  header{
    transition: height 0.25s ease;
  }

  .header-logo,
  .header-title{
    transition: all 0.25s ease;
  }

  header.shrink{
    height: 64px;
  }

  header.shrink .header-logo{
    height: 40px;
  }

  header.shrink .header-title{
    font-size: 18px;
  }

  .filtersbar{
    top: 102px;
    transition: top 0.25s ease;
  }

  body.header-shrink .filtersbar{
    top: 64px;
  }
}