/* ======================================================================
   Wolfsclansippe – style.css (final / entdoppelt / einheitliche Abstände)
   - EINHEITLICHE Seitenabstände: nur über main padding-top / padding-bottom
   - Kein margin-bottom am Header, kein extra bottom padding in Sections
   - Termine: NUR events-grid + event-card (keine Alt-Layouts mehr)
   ====================================================================== */

/* =========================
   Root / Base
========================= */
:root{
  --bg:#0b0f13;
  --panel:#111822;
  --panel-2:#0f151e;
  --text:#e7edf5;
  --muted:#a9b7c7;

  --accent:#b68a2a;
  --accent-2:#3a7a6b;

  --border:rgba(231,237,245,.10);
  --shadow:0 12px 40px rgba(0,0,0,.45);

  --radius:16px;
  --container:1100px;

  --font-head: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
             "Cormorant Garamond", Garamond, Georgia, "Times New Roman", Times, serif;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
             Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html, body { height: 100%; }

h1, h2, h3, .brand__text{
  letter-spacing: .04em;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font-body);
  color:var(--text);

  background: var(--bg);

  /* Background-Layer */
  position: relative;
  isolation: isolate;

  /* gegen horizontalen Overflow */
  overflow-x: hidden;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(182,138,42,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(58,122,107,.18), transparent 60%),
    var(--bg);
}

main{
  flex:1 0 auto;
  padding-top: 1.5rem;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(var(--container), calc(100% - 1.5rem));
  margin:0 auto;
}

/* klassischer Grid/Flex Overflow-Fix */
.hero__content,
.hero__image,
.card,
.about-text,
.about-image,
.text-block,
.next-card,
.event-card{
  min-width:0;
}

/* =========================
   Header
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(11,15,19,.65);
  border-bottom:1px solid var(--border);
}

.header__inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.9rem 0;
}

/* Brand left */
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.brand__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.25rem;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.brand__logo img{
  height:34px;
  width:auto;
  border-radius:10px;
  background:#fff;
  display:block;
}

.brand__text{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:.04em;
}

/* Nav right */
.site-nav{
  margin-left:auto;
  display:flex;
  gap:1rem;
  align-items:center;
}

.site-nav a{
  padding:.55rem .75rem;
  border-radius:12px;
  border:1px solid transparent;
}

.site-nav a:hover{
  border-color:var(--border);
  background:rgba(255,255,255,.04);
  text-decoration:none;
}

/* Burger */
.nav-toggle{
  display:none;
  margin-left:auto;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:.6rem .65rem;
  cursor:pointer;
}

.nav-toggle__bar{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  margin:4px 0;
}

/* =========================
   Typography
========================= */
.kicker{
  margin:0 0 .35rem;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

h1{
  margin:0 0 .6rem;
  font-family:var(--font-head);
  letter-spacing:.5px;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
}

.lead{
  margin:0 0 1.4rem;
  color:var(--muted);
  max-width:60ch;
}

.muted{ color:var(--muted); }

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  text-decoration:none;
}

.btn:hover{ text-decoration:none; }

.btn--primary{
  background:linear-gradient(180deg, rgba(182,138,42,.22), rgba(182,138,42,.08));
  border-color:rgba(182,138,42,.35);
}

.btn--ghost{
  background:rgba(255,255,255,.04);
}

/* kleine Variante (optional, falls genutzt) */
.btn--sm{
  padding:.55rem .8rem;
  border-radius:12px;
}

/* =========================
   Hero (index.php)
========================= */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1.5rem;
}

.hero__content{
  background:linear-gradient(180deg, rgba(17,24,34,.85), rgba(15,21,30,.65));
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 8px);
  padding:1.5rem;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero__content::after{
  content:"";
  position:absolute;
  inset:-80px -140px auto auto;
  width:320px;
  height:320px;
  background:radial-gradient(circle at 30% 30%, rgba(182,138,42,.20), transparent 60%);
  transform:rotate(12deg);
  pointer-events:none;
}

.hero__cta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

.hero__image{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  min-height:260px;
}

.hero__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   Content grid (index cards)
========================= */
.grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(12,1fr);
  padding:1.5rem 0 0; /* nur oben */
}

.card{
  grid-column:span 6;
  background:rgba(17,24,34,.7);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:var(--shadow);
}

.card h2{
  margin:0 0 .6rem;
  font-family:var(--font-head);
  letter-spacing:.4px;
  font-size:1.25rem;
}

/* Card Split: Aktuelles oben, Kontakt unten in EINER Box */
.card--split{
  display:flex;
  flex-direction:column;
  gap:0;
}

.card--split .card__section{
  padding:1.2rem;
}

.card--split .card__divider{
  height:1px;
  background:rgba(231,237,245,.10);
  margin:0 1.2rem;
}

/* Kontakt nach unten drücken (Desktop) */
.card--split .card__section--bottom{
  margin-top:auto;
}

/* Falls du die H2-Abstände in Sections etwas straffer willst */
.card--split .card__section h2{
  margin-top:0;
}

.list{
  margin:.75rem 0 0;
  padding-left:1.1rem;
  color:var(--muted);
}

.pill-row{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.6rem;
}

.pill{
  font-size:.9rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.contact a{
  font-weight:600;
  border-bottom:1px dashed rgba(182,138,42,.55);
}
.contact a:hover{
  border-bottom-style:solid;
}

/* Mini-Liste (Index: "3 Termine") */
.events-mini{
  list-style:none;
  margin:.85rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
}

.events-mini__item{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:.65rem;
  align-items: baseline;
  padding:.55rem .7rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

.events-mini__date{
  color:var(--muted);
  font-variant-numeric: tabular-nums;
}

.events-mini__title{
  font-weight:600;
}

.events-mini__loc{
  grid-column: 2 / -1;
  color:var(--muted);
  font-size:.95rem;
}

.card__actions{
  margin-top:.9rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

@media (max-width:520px){
  .events-mini__item{ grid-template-columns:1fr; }
  .events-mini__loc{ grid-column:auto; }
}

/* =========================
   About (ueber-uns.php)
========================= */
.about{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.about-block{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1.5rem;
  align-items:stretch;
}

.about-block--reverse{
  grid-template-columns:.9fr 1.1fr;
}

.about-text{
  background:rgba(17,24,34,.70);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 1.6rem;
  box-shadow:var(--shadow);
}

.about-text{
  width: 100%;
  background:rgba(17,24,34,.70);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 1.6rem;
  box-shadow:var(--shadow);
}

.about-image{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  min-height:320px;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   Footer
========================= */
.site-footer{
  margin-top: 1.2rem;
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--border);
  background: rgba(11,15,19,1);
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
  flex-wrap:wrap;
}

.footer__copy{ margin:0; color:var(--muted); }
.footer__links{ display:flex; gap:1rem; }
.footer__links a{ color:var(--muted); }
.footer__links a:hover{ color:var(--text); text-decoration:none; }

/* =========================
   Page head (Termine/Kontakt/Impressum/Datenschutz)
========================= */
.page-head{
  margin: 0 0 1.5rem;
}
.page-head .lead{
  margin-bottom: 0;
}

/* =========================
   Termine (termine.php) – FINAL
   - Desktop: 3 Spalten
   - Tablet:  2 Spalten
   - Mobile:  1 Spalte + Card View bleibt
========================= */
.next-card{
  background: linear-gradient(180deg, rgba(17,24,34,.85), rgba(15,21,30,.65));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}

.next-card__kicker{
  margin: 0 0 .35rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--muted);
}

.next-card__title{
  margin: 0 0 .6rem;
  font-family: var(--font-head);
  letter-spacing: .4px;
  font-size: 1.4rem;
}

.next-card__meta{
  margin: 0 0 1rem;
  color: var(--muted);
}

.next-card__actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Grid */
.events-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* Month heading: mobile sichtbar, desktop optional (siehe unten) */
.month-heading{
  grid-column: 1 / -1;
  margin: 1rem 0 .25rem;
  font-family: var(--font-head);
  letter-spacing: .4px;
  font-size: 1.5rem;
}

/* Event Card */
.event-card{
  position: relative;
  background: rgba(17,24,34,.70);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.event-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.event-card__date{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.event-card__chip{
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  white-space: nowrap;
}

.event-card__title{
  margin: 0 0 .4rem;
  font-family: var(--font-head);
  letter-spacing: .3px;
  font-size: 1.15rem;
}

.event-card__meta{
  margin: 0;
  color: var(--muted);
}

.event-card__actions{
  margin-top: .9rem;
}

/* Badge "Nächster" */
.event-card__badge{
  position: absolute;
  top: .9rem;
  right: .9rem;
  font-size: .75rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(182,138,42,.35);
  background: linear-gradient(180deg, rgba(182,138,42,.18), rgba(182,138,42,.06));
  color: var(--text);
}

/* ===== Sippe – Intro Block full width ===== */

.wide-intro{
  margin: 1rem 0 1rem; /* kleiner & gleichmäßig */
}

.wide-intro__card{
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(17,24,34,.85), rgba(15,21,30,.65));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.wide-intro__card h2{
  margin: 0 0 .75rem;
  font-family: var(--font-head);
  letter-spacing: .4px;
}

.wide-intro__card p{
  margin: 0 0 .9rem;
  color: var(--muted);
  max-width: none; /* WICHTIG → volle Breite */
}

.wide-intro__card p:last-child{
  margin-bottom: 0;
}

/* Tablet */
@media (max-width: 1100px){
  .events-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 720px){
  .events-grid{ grid-template-columns: 1fr; }
}

/* WICHTIG: Desktop-Layout-Fix
   Wenn pro Monat nur 1 Termin existiert, wirken Month-Headings wie "Zeilenbremsen".
   Mobile soll sie behalten, Desktop blendet sie aus -> Cards fließen sauber in 3 Spalten. */
@media (min-width: 901px){
  .month-heading{ display:none; }
}

/* =========================
   Responsive (global)
========================= */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero__image{ order:-1; min-height:240px; }
  .card{ grid-column:span 12; }

  .about-block,
  .about-block--reverse{ grid-template-columns:1fr; }
  .about-image{ order:-1; min-height:240px; }
}

@media (max-width:720px){
  .nav-toggle{ display:inline-block; }
  .site-nav{ display:none; }

  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:64px;
    width:min(var(--container), calc(100% - 1.5rem));
    margin:0 auto;
    display:none;
    flex-direction:column;
    gap:.25rem;
    padding:.7rem;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:rgba(17,24,34,.92);
    box-shadow:var(--shadow);
  }

  .site-nav.is-open{ display:flex; }
  .site-nav a{ padding:.8rem .9rem; }

  .brand__logo img{ height:30px; }
}

/* =========================
   Sippe (mitglieder.php)
========================= */

.filters{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin: 0 0 1.25rem;
}

.filter-chip{
  appearance:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 999px;
  padding: .45rem .75rem;
  cursor:pointer;
  font: inherit;
  line-height: 1;
}
.filter-chip:hover{
  border-color: rgba(231,237,245,.18);
  background: rgba(255,255,255,.05);
}
.filter-chip.is-active{
  border-color: rgba(182,138,42,.35);
  background: linear-gradient(180deg, rgba(182,138,42,.16), rgba(182,138,42,.06));
}

/* Grid: 3 / 2 / 1 */
.members-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.member-card{
  grid-column: span 4;
  background: rgba(17,24,34,.70);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.member-card__media{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-bottom: 1px solid rgba(231,237,245,.08);
}

.member-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 20%; /* Desktop: Fokus etwas nach oben */
  display:block;
}

.member-card__placeholder{
  width:100%;
  height:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
}

.member-card__body{
  padding: 1.05rem 1.1rem 1.1rem;
}

.member-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom: .45rem;
}

.member-card__name{
  margin:0;
  font-family: var(--font-head);
  letter-spacing: .35px;
  font-size: 1.15rem;
}

.member-badge{
  display:inline-flex;
  align-items:center;
  font-size: .78rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(182,138,42,.35);
  background: linear-gradient(180deg, rgba(182,138,42,.14), rgba(182,138,42,.06));
  color: var(--text);
  white-space: nowrap;
}

.member-card__text{
  margin: 0 0 .85rem;
  color: var(--muted);
}

.member-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.member-pill{
  font-size: .82rem;
  padding: .35rem .55rem;
}

/* Tablet */
@media (max-width: 980px){
  .member-card{ grid-column: span 6; }
}

/* Mobile */
@media (max-width: 720px){
  .member-card{ grid-column: span 12; }
  .member-card__media img{ object-position: center 10%; }
  .filters{ margin-bottom: 1rem; }
  .filter-chip{ padding: .5rem .8rem; } /* fingerfreundlich */
  .member-card__media{ aspect-ratio: 16 / 10; } /* wirkt “heroiger” auf Handy */
}

/* =========================
   Error Pages (/error/*.php)
========================= */

/* Error-Seiten: Inhalt zentrieren + sauberer Rahmen */
.error-wrap{
  min-height: calc(100vh - 120px); /* Header grob abziehen */
  display: grid;
  align-items: start;
}

.error-card{
  margin-top: 2rem;
  max-width: 860px;
  padding: 1.75rem 1.8rem;
  text-align: left;
}

/* große Statuszahl / Code */
.error-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 64px;
  height: 32px;
  padding: 0 .75rem;
  border-radius: 999px;
  border: 1px solid rgba(182,138,42,.35);
  background: linear-gradient(180deg, rgba(182,138,42,.18), rgba(182,138,42,.06));
  color: var(--text);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
}

/* Headline wie auf anderen Seiten, nur etwas größer */
.error-title{
  margin: .75rem 0 .6rem;
  font-family: var(--font-head);
  letter-spacing: .5px;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

/* Text */
.error-text{
  margin: 0 0 1.25rem;
  color: var(--muted);
  max-width: 70ch;
}

/* Buttons/Reihe */
.error-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}

/* optional: subtiler Trenner */
.error-meta{
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(231,237,245,.10);
  color: var(--muted);
  font-size: .95rem;
}

/* Mobil: schöner Luft */
@media (max-width: 720px){
  .error-card{
    margin-top: 1.25rem;
    padding: 1.25rem 1.15rem;
  }
  .error-wrap{
    min-height: calc(100vh - 100px);
  }
}