/* ==========================================================================
   TSV 1919 – Gaststätte
   Ausgelagert aus Page-Code-Injection (head) am 2026-08-15.
   Verbatim übernommen: bestehendes body.page-gaststaette-Scoping unverändert,
   keine Deduplizierung, keine Designänderung, keine Selektoren umgeschrieben,
   keine Breakpoints verändert. Beide ursprünglichen Style-Blöcke in
   exakt derselben Cascade-Reihenfolge erhalten.
   Light-Mode-Regeln (html:not(.dark-mode) body.page-gaststaette …) unverändert.
   ========================================================================== */


/* ── Block 1: /gaststaette/ – FINAL ─────────────────────────────────────── */

/* =========================
   /gaststaette/ – FINAL
   Überschrift wie /sportanlage/
   + TSV Cards + Ghost Galerie (Design + Mobile)
   ========================= */

/* ---------- Überschrift ---------- */
body.page-gaststaette .article-header{
  padding-top: 80px !important;
  margin-top: 0 !important;
  text-align: center !important;
}
body.page-gaststaette .article-title{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
}

/* ---------- Fullwidth raus aus Casper ---------- */
body.page-gaststaette #site-main,
body.page-gaststaette .site-main,
body.page-gaststaette .article,
body.page-gaststaette .post,
body.page-gaststaette .gh-content,
body.page-gaststaette .gh-content.gh-canvas{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.page-gaststaette .gh-content.gh-canvas{ display:block !important; }

/* ---------- NUR TSV + Galerie anzeigen ---------- */
body.page-gaststaette .gh-content.gh-canvas > :not(.tsv-gast):not(figure.kg-gallery-card){
  display:none !important;
}
body.page-gaststaette figure.kg-gallery-card{ display:block !important; }

/* ---------- TSV Wrapper full-bleed ---------- */
body.page-gaststaette .tsv-gast{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  color: rgba(255,255,255,.92);
}

/* ================= PANEL ================= */
body.page-gaststaette .tsv-gast-panel{
  background: transparent !important;
  padding: 22px 0 44px !important;
  margin-top: 0 !important;
}
body.page-gaststaette .tsv-gast-panel > *{
  width: min(1100px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2 Cards */
body.page-gaststaette .tsv-gast-cards{
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 18px !important;
}
@media (max-width: 900px){
  body.page-gaststaette .tsv-gast-cards{ grid-template-columns: 1fr !important; }
  body.page-gaststaette .tsv-gast-panel > *{ width: calc(100% - 32px) !important; }
}

/* Card Look */
body.page-gaststaette .tsv-gast-card{
  background: rgba(18,18,20,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.50);
  backdrop-filter: blur(10px) saturate(155%);
  -webkit-backdrop-filter: blur(10px) saturate(155%);
}

/* Card header */
body.page-gaststaette .tsv-gast-card__top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
body.page-gaststaette .tsv-gast-ico{
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 16px;
}
body.page-gaststaette .tsv-gast-card__title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
}

/* Text */
body.page-gaststaette .tsv-gast-rows{
  font-size: 14px;
  line-height: 1.6;
  opacity: .95;
}
body.page-gaststaette .tsv-gast-rows p{ margin: 0 0 12px; }
body.page-gaststaette .tsv-gast-rows p:last-child{ margin-bottom: 0; }

/* Kontakt */
body.page-gaststaette .tsv-gast-contact{
  display: grid;
  gap: 14px;
}
body.page-gaststaette .tsv-gast-contact__block{
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}
body.page-gaststaette .tsv-gast-contact__label{
  font-size: 12px;
  font-weight: 900;
  opacity: .85;
  margin-bottom: 6px;
}
body.page-gaststaette .tsv-gast-contact__value{
  font-size: 14px;
  line-height: 1.55;
}
body.page-gaststaette .tsv-gast-contact__value a{
  color: rgba(255,255,255,.92) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Buttons */
body.page-gaststaette .tsv-gast-actions{
  display:flex;
  gap: 12px;
  margin-top: 2px;
}
body.page-gaststaette .tsv-gast-btn{
  flex: 1 1 0;
  height: 42px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.95) !important;
  text-decoration: none !important;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .15s ease, filter .15s ease;
}
body.page-gaststaette .tsv-gast-btn--primary{
  background: linear-gradient(180deg, rgba(196,0,20,.95), rgba(90,0,10,.95));
  border-color: rgba(255,255,255,.18);
}
body.page-gaststaette .tsv-gast-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}
@media (max-width: 520px){
  body.page-gaststaette .tsv-gast-actions{ flex-direction: column; }
}
body.page-gaststaette .tsv-gast-note{
  font-size: 12px;
  opacity: .85;
  line-height: 1.5;
}

/* ================= GALERIE – DESIGN MATCH ================= */

/* Galerie Headline Block */
body.page-gaststaette .tsv-gast-gallery-head{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(18,18,20,.52);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(10px) saturate(155%);
  -webkit-backdrop-filter: blur(10px) saturate(155%);
}
body.page-gaststaette .tsv-gast-gallery-head__top{
  display:flex;
  align-items:center;
  gap:10px;
}
body.page-gaststaette .tsv-gast-gallery-head__sub{
  margin-top: 8px;
  font-size: 12px;
  opacity: .82;
}

/* Ghost Galerie Card: gleiche Breite wie Content */
body.page-gaststaette figure.kg-gallery-card{
  width: min(1100px, calc(100% - 40px)) !important;
  margin: 14px auto 58px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Ghost Layout überschreiben -> GRID */
body.page-gaststaette .kg-gallery-container{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}
body.page-gaststaette .kg-gallery-row{
  display: contents !important; /* rows entfernen */
}
body.page-gaststaette .kg-gallery-image{
  margin: 0 !important;
  width: auto !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(18,18,20,.55) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.40) !important;
  transform: translateZ(0);
}
body.page-gaststaette .kg-gallery-image img{
  display:block !important;
  width:100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  transition: transform .22s ease, filter .22s ease;
}
body.page-gaststaette .kg-gallery-image:hover img{
  transform: scale(1.03);
  filter: brightness(1.03) contrast(1.02);
}

/* Breakpoints */
@media (max-width: 980px){
  body.page-gaststaette .kg-gallery-container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px){
  body.page-gaststaette figure.kg-gallery-card{
    width: calc(100% - 32px) !important;
  }
  body.page-gaststaette .kg-gallery-container{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.page-gaststaette .kg-gallery-image img{
    aspect-ratio: 16 / 11 !important;
  }
}

/* LIGHT MODE */
html:not(.dark-mode) body.page-gaststaette .tsv-gast{ color: rgba(0,0,0,.88); }
html:not(.dark-mode) body.page-gaststaette .tsv-gast-card,
html:not(.dark-mode) body.page-gaststaette .tsv-gast-gallery-head{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
html:not(.dark-mode) body.page-gaststaette .tsv-gast-card *,
html:not(.dark-mode) body.page-gaststaette .tsv-gast-gallery-head *{
  color: rgba(0,0,0,.88);
}
html:not(.dark-mode) body.page-gaststaette .tsv-gast-contact__value a{
  color: rgba(0,0,0,.88) !important;
}


/* ── Block 2: /gaststaette/ – SPACING FIX ───────────────────────────────── */

/* =========================================================
   /gaststaette/ – SPACING FIX (Cards <-> Gallery)
   -> sauberer Rhythmus, keine "komischen" Lücken
   ========================================================= */

/* Panel: unten weniger Luft */
body.page-gaststaette .tsv-gast-panel{
  padding: 22px 0 18px !important; /* vorher 22px 0 44px */
}

/* Gallery-Headline: Abstand nach unten klein & exakt */
body.page-gaststaette .tsv-gast-gallery-head{
  margin-top: 14px !important;     /* vorher 16px */
  margin-bottom: 10px !important;  /* NEU: kontrollierter Abstand */
  padding: 12px 14px !important;   /* minimal kompakter */
}

/* Ghost Galerie: exakt gleiche Breite wie Content + keine Extra-Luft */
body.page-gaststaette figure.kg-gallery-card{
  width: min(1100px, calc(100% - 40px)) !important;
  margin: 0 auto 42px !important;  /* vorher 14px auto 58px */
  padding: 0 !important;
}

/* Falls Casper irgendwo noch margin-top rein drückt -> kill */
body.page-gaststaette .gh-content.gh-canvas figure.kg-gallery-card{
  margin-top: 0 !important;
}

/* Grid gap etwas tighter (wirkt "geordnet") */
body.page-gaststaette .kg-gallery-container{
  gap: 12px !important; /* vorher 14px */
}

/* Mobile: gleiche Logik, keine Luft nach links/rechts */
@media (max-width: 520px){
  body.page-gaststaette figure.kg-gallery-card{
    width: calc(100% - 32px) !important;
    margin-bottom: 34px !important;
  }
  body.page-gaststaette .tsv-gast-gallery-head{
    margin-bottom: 10px !important;
  }
}