/* ===========================================================================
   site.css - die EIGENE Gestaltungsebene der statischen Fassung.

   Hier wird von Hand bearbeitet. Alles unter /vendor/ ist Fremdcode
   (Bootstrap, das Theme adventurestrap, Font Awesome, Colorbox) und bleibt
   unangetastet - sonst ist jede spaetere Aktualisierung Handarbeit.

   Reihenfolge im <head>: erst vendor, dann khk-typography.css, dann diese
   Datei. Was hier steht, gewinnt also.

   ACHTUNG: Das Theme setzt html{font-size:10px}. `rem` bedeutet hier 10px,
   nicht 16px. Schriftgroessen deshalb in px angeben.
   =========================================================================== */

/* --- Bildergalerien (ehemals responsiveFG, jetzt statisches Raster) -------
   Die Verknuepfung zur Lightbox laeuft ueber rel="gallery-*"; die vorhandene
   Colorbox-Bindung greift darauf. Siehe README, Abschnitt "Galerien".        */
.khk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.khk-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f2ef;
  line-height: 0;
}
.khk-gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform .18s ease;
}
.khk-gallery a:hover img { transform: scale(1.04); }

@media (max-width: 600px) {
  .khk-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .khk-gallery img { height: 115px; }
}

/* --- Kleinigkeiten, die vorher im Template-PHP steckten ------------------- */
.page-body img { max-width: 100%; height: auto; }
.page-body table { max-width: 100%; }

/* --- Teaserkästen (ehemals Modul "teasers") -------------------------------
   Bild + Titel + kurzer Text, Titel und Bild verweisen auf die Zielseite.
   Bilder liegen unter /media/teasers-pictures/ (Vorschau in thumbs/).        */
.khk-teasers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
.khk-teaser {
  background: #faf9f7;
  border: 1px solid #e8e4dd;
  border-radius: 8px;
  overflow: hidden;
}
.khk-teaser img { width: 100%; height: 150px; object-fit: cover; display: block; }
.khk-teaser h3 {
  margin: 12px 14px 6px;
  font-size: 17px;
  line-height: 1.3;
}
.khk-teaser h3 a { color: inherit; text-decoration: none; }
.khk-teaser h3 a:hover { text-decoration: underline; }
.khk-teaser p { margin: 0 14px 14px; font-size: 15px; line-height: 1.5; color: #555; }

@media (max-width: 600px) {
  .khk-teasers { grid-template-columns: 1fr; gap: 14px; }
  .khk-teaser img { height: 170px; }
}

/* Galerie-Überschrift (im Original: section.rfg_gallery > .fg_header > h3) */
.khk-gallery-title {
  margin: 22px 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #444;
}

/* Schaltfläche im Teaser (im Original per JavaScript als "[Click!]" erzeugt) */
.khk-teaser-more { margin: 0 14px 14px; }
.khk-teaser-more a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--button-bg, #e2902a);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.khk-teaser-more a:hover { filter: brightness(0.92); text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Rechte Spalte - im CMS "Block 2", im Live-Template <div class="asides">.
   Dort stehen 21 Sektionen, fast alles Bildergalerien der Berichte.
   Das alte Template hing sie an "hidden-xs hidden-sm": auf Telefonen und
   kleinen Tablets waren diese Galerien UNSICHTBAR. Hier bleiben sie, und
   unterhalb von 992px rutschen sie mit einer Trennlinie unter den Text. */
.asides { margin-top: 6px; }
@media (max-width: 991px) {
  .asides {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #e6e2da;
  }
}