/* =========================================================
   Customizer-Styles der Original-Seite kcb-sebnitz.de (1:1)
   Diese Regeln kommen bei WordPress als Inline-<style> im <head>
   NACH theme.css / genericons.css / theme-responsive.css.
   ========================================================= */

/* Beiger Seitenhintergrund (Custom Background) */
body.custom-background { background-color: #ededd3; }

/* Startseiten-Slider: Titel-Overlay ausgeblendet (nur Foto) */
#main-slider .entry-container { display: none; }

/* Logo ersetzt den Text-Titel: Titel/Beschreibung visuell versteckt */
#hgroup.with-logo { padding: 0; }
#site-title,
#site-description {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Inhaltsfläche der Unterseiten beige, mit seitlichem Innenabstand */
#content .entry-content {
  background-color: #ededd3;
  padding-left: 20px;
  padding-right: 20px;
}
#supplementary { padding-top: 0px; }

/* Bilderrahmen-Hilfsklasse (Original) */
.image-border {
  border: 1pt solid grey;
  border-radius: 0px;
  padding: 11px;
  box-shadow: 2px 2px 2px #ededd3;
}

/* =========================================================
   Kleine Ergänzungen für den statischen Nachbau
   (kein WordPress-JS vorhanden -> Slider/Menü selbst gesteuert)
   ========================================================= */

/* Slider-Höhe stabil halten, während Bilder umgeschaltet werden */
#main-slider .slides { position: relative; }
#main-slider .slider-image img { display: block; width: 100%; height: auto; }

/* Weicher Bildwechsel (Überblendung).
   Greift nur, wenn das JS die Klasse "has-fade" gesetzt hat -> ohne JS bleibt
   der alte Zustand (erstes Bild via .displayblock sichtbar) erhalten.
   Alle Bilder liegen per Grid in DERSELBEN Zelle übereinander; die Höhe
   ergibt sich weiterhin automatisch aus dem größten Bild. */
#main-slider.has-fade .featured-slider { display: grid; }
#main-slider.has-fade .slides {
  grid-area: 1 / 1;            /* alle Slides in einer Zelle stapeln */
  opacity: 0;
  pointer-events: none;        /* Links verdeckter Bilder nicht anklickbar */
  transition: opacity 1600ms ease-in-out;
}
#main-slider.has-fade .slides.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Nutzer, die reduzierte Bewegung wünschen: hart umschalten statt überblenden */
@media (prefers-reduced-motion: reduce) {
  #main-slider.has-fade .slides { transition: none; }
}

/* Anmeldeformular im Footer: schmalere Felder, Button etwas abgesetzt.
   (Die Breiten standen früher als inline-style im Markup in main.js.) */
#colophon #wpmem_login_widget_form .div_text input {
  box-sizing: border-box;
  width: 100%;
  max-width: 210px;
  padding-top: 5px;            /* flacher als die Theme-Vorgabe */
  padding-bottom: 5px;
  line-height: 1.3;
}
#colophon #wpmem_login_widget_form .button_div {
  margin-top: 16px;            /* Button etwas nach unten absetzen */
}
#colophon #wpmem_login_widget_form .buttons {
  padding: 6px 12px;           /* schmaler UND flacher als die Theme-Vorgabe (12px 20px 10px) */
  line-height: 1.3;
}

/* Featured-Kacheln: Bild mittig, Text im Blocksatz genau auf Bildbreite (300px) */
#featured-post figure,
#featured-post .featured-homepage-image { text-align: center; margin-left: 0; margin-right: 0; }
#featured-post .featured-homepage-image img { display: inline-block; }
#featured-post .entry-container { text-align: center; }
#featured-post .entry-content {
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

/* WordPress-Galerie: Core-Default-Style (bei WP inline pro Galerie, hier global).
   Bilder nebeneinander in Spalten + 2px-Rahmen – wie auf der Live-Seite. */
.gallery { margin: 0 auto; }
.gallery:after { content: ""; display: block; clear: both; }
.gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 33.3%;
}
.gallery-columns-1 .gallery-item { width: 100%; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-3 .gallery-item { width: 33.3%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }
.gallery-columns-6 .gallery-item { width: 16.6%; }
.gallery-columns-7 .gallery-item { width: 14.28%; }
.gallery-columns-8 .gallery-item { width: 12.5%; }
.gallery-columns-9 .gallery-item { width: 11.1%; }
.gallery img { border: 2px solid #cfcfcf; }
.gallery-caption { margin-left: 0; }

/* Gutenberg-Block-Galerie (Hütte, Bloßstock): 5 nebeneinander + Rahmen.
   Deckt beide Markup-Varianten ab: has-nested-images (>figure) und blocks-gallery-grid (ul/li). */
.wp-block-gallery.is-layout-flex { display: flex; flex-wrap: wrap; align-items: flex-start; }
.wp-block-gallery .blocks-gallery-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  list-style: none; margin: 0; padding: 0; width: 100%;
}
.wp-block-gallery.columns-5.has-nested-images > figure,
.wp-block-gallery.columns-5 .blocks-gallery-item { flex: 0 0 20%; max-width: 20%; }
.wp-block-gallery.columns-4.has-nested-images > figure,
.wp-block-gallery.columns-4 .blocks-gallery-item { flex: 0 0 25%; max-width: 25%; }
.wp-block-gallery.columns-3.has-nested-images > figure,
.wp-block-gallery.columns-3 .blocks-gallery-item { flex: 0 0 33.3%; max-width: 33.3%; }
.wp-block-gallery.columns-2.has-nested-images > figure,
.wp-block-gallery.columns-2 .blocks-gallery-item { flex: 0 0 50%; max-width: 50%; }
.wp-block-gallery.has-nested-images > figure,
.wp-block-gallery .blocks-gallery-item {
  box-sizing: border-box; padding: 4px; margin: 0;
}
.wp-block-gallery figure img,
.wp-block-gallery .blocks-gallery-item img,
.wp-block-gallery .wp-block-image img {
  width: 100%; height: auto; display: block;
  box-sizing: border-box; border: 2px solid #cfcfcf;
}
/* is-cropped: gleich große Kacheln (quadratischer Zuschnitt wie im Original) */
.wp-block-gallery.is-cropped figure img,
.wp-block-gallery.is-cropped .blocks-gallery-item img { aspect-ratio: 1 / 1; object-fit: cover; }
.wp-block-gallery figcaption,
.blocks-gallery-item__caption { font-size: 13px; text-align: center; margin-top: 4px; }

/* NextGEN-Album-Übersicht (Bilder-Seite): Album-Kacheln nebeneinander + Rahmen */
/* Album-Kacheln gleichmäßig über die Seitenbreite verteilen und mittig setzen:
   auto-fit legt so viele 160px-Spalten an, wie hineinpassen, 1fr verteilt den
   Platz gleichmäßig, justify-items zentriert jede Kachel in ihrer Spalte.
   (Vorher linksbündiges Flex -> die letzte Reihe hing am linken Rand.) */
.ngg-albumoverview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-items: center; align-items: start; gap: 18px 16px; }
/* Das frühere Clearfix-::after würde im Grid als eigene leere Kachel zählen. */
.ngg-albumoverview:after { content: none; }
.ngg-album-compact { width: 160px; text-align: center; }
.ngg-album-compactbox img,
.ngg-album-compact img { display: block; margin: 0 auto; border: 2px solid #cfcfcf; box-sizing: border-box; }
.ngg-album-compact h4 { margin: 6px 0 0; }
.ngg-album-desc { display: inline-block; }
.ngg-clear { clear: both; }

/* NextGEN-Galerie (Unteralbum): Bild-Thumbnails nebeneinander im Raster */
.ngg-galleryoverview { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.ngg-galleryoverview:after { content: ""; display: block; clear: both; }
.ngg-gallery-thumbnail-box { width: auto; }
.ngg-gallery-thumbnail { text-align: center; }
.ngg-gallery-thumbnail img { display: block; border: 2px solid #cfcfcf; box-sizing: border-box; margin: 0; }
.ngg-back { margin: 0 0 14px; font-size: 14px; }
.ngg-simplelightbox, a.rl-gallery-link { cursor: zoom-in; }

/* Album-Lightbox (Overlay fuer Vollbilder) */
.nlb { position: fixed; inset: 0; z-index: 9999; display: none; background: rgba(245,245,245,.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; }
.nlb.open { display: flex; }
.nlb__fig { margin: 0; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column;
  align-items: center; }
.nlb__img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 6px 40px rgba(0,0,0,.75); background: #fff; }
.nlb__cap { color: #222; font-size: 14px; text-align: center; padding: 10px 8px 0;
  text-shadow: 0 1px 2px rgba(255,255,255,.8); }
.nlb__close, .nlb__nav { position: fixed; background: transparent; color: #222; border: 0;
  cursor: pointer; line-height: 1; user-select: none; font-weight: bold;
  text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); }
.nlb__close { top: 14px; right: 18px; font-size: 34px; width: 46px; height: 46px; }
.nlb__nav { top: 50%; transform: translateY(-50%); font-size: 54px; width: 60px; height: 84px; }
.nlb__prev { left: 12px; }
.nlb__next { right: 12px; }
.nlb__close:hover, .nlb__nav:hover { color: #000; }
@media (max-width: 600px) { .nlb__nav { font-size: 34px; width: 44px; height: 64px; } }
/* Einzelbild-Popup (Mitglieder): deckender Hintergrund, kein Blättern, keine Bildunterschrift */
.nlb--single { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nlb--single .nlb__nav, .nlb--single .nlb__cap { display: none; }
.nlb--single .nlb__img { cursor: zoom-out; }

/* Interne Navigation (Mitgliederbereich) */
#intern-nav { margin-bottom: 24px; }
.intern-nav-top { font-size: 13px; color: #555; padding: 4px 0 8px; }
.intern-nav-top a { color: #0088cc; }
.intern-menu {
  list-style: none; margin: 0; padding: 0;
  background: #e6e6e6; border: 1px solid #d5d5d5; border-radius: 3px;
  display: flex; flex-wrap: wrap;
}
.intern-menu > li { position: relative; }
.intern-menu > li > a,
.intern-menu > li > span {
  display: block; padding: 10px 16px; color: #393938; text-decoration: none;
  font-size: 14px; cursor: default;
}
.intern-menu > li > a { cursor: pointer; }
.intern-menu > li:hover { background: #d8d8d8; }
.intern-menu > li.active > a,
.intern-menu > li.active > span { font-weight: bold; }
.intern-sub {
  list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%;
  min-width: 180px; background: #f4f4f4; border: 1px solid #d5d5d5; box-shadow: 0 2px 6px rgba(0,0,0,.15);
  display: none; z-index: 50; max-height: 60vh; overflow-y: auto;
}
.intern-menu > li:hover .intern-sub { display: block; }
.intern-sub li a {
  display: block; padding: 6px 16px; color: #0088cc; text-decoration: none; font-size: 14px; white-space: nowrap;
}
.intern-sub li a:hover { background: #e6e6e6; }
.intern-sub li a.active { font-weight: bold; color: #393938; }
@media screen and (max-width: 767px) {
  .intern-menu { flex-direction: column; }
  .intern-sub { position: static; display: block; box-shadow: none; border: 0; padding-left: 12px; }
}

/* Mobiles Menü: Umschalt-Knopf nur auf schmalen Screens */
.menu-toggle { display: none; }
@media screen and (max-width: 767px) {
  .menu-toggle {
    display: block;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    background: #e6e6e6;
    color: #393938;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
  }
  #access .menu-header-container .menu.open { display: block; }
}

/* Unten im gelben Inhaltsfenster denselben kleinen Abstand wie links/rechts (20px). */
.entry-content { padding-bottom: 20px; }

/* WordPress „Medien & Text"-Block: Bild und Text nebeneinander (fehlte im Klon). */
/* align-items:start statt center -> Bild und Textanfang stehen auf gleicher Höhe.
   Bei center schwamm das Bild mittig im Block; da die Blöcke je nach Textlänge
   unterschiedlich hoch sind, ergaben sich dadurch ungleiche Bildabstände. */
.wp-block-media-text{ display:grid; grid-template-columns:50% 1fr; grid-template-rows:auto; align-items:start; gap:0; margin-bottom:1.2em; }
/* Seite Hütte: Text und Bilder in zwei getrennte Bereiche.
   Links läuft der Text durchgehend, rechts stehen die Bilder gleichmäßig
   über die gesamte Texthöhe verteilt (space-between). Dadurch hängt die
   Bildposition nicht mehr an der Länge des einzelnen Absatzes. */
.media-stack{ display:grid; grid-template-columns:auto 31%; column-gap:4%; align-items:stretch; }
.ms-text > p:first-child{ margin-top:0; }
.ms-media{ display:flex; flex-direction:column; justify-content:space-between; gap:1.2em; }
.ms-figure{ margin:0; }
.ms-figure img{ width:100%; height:auto; display:block; }

/* Erster/letzter Absatz ohne Außenrand, sonst sitzt der Text ein paar Pixel
   tiefer als die Bildoberkante. */
.wp-block-media-text .wp-block-media-text__content > p:first-child{ margin-top:0; }
.wp-block-media-text .wp-block-media-text__content > p:last-child{ margin-bottom:0; }
.wp-block-media-text.has-media-on-the-right{ grid-template-columns:1fr 50%; }
.wp-block-media-text .wp-block-media-text__media{ grid-column:1; grid-row:1; margin:0; }
.wp-block-media-text .wp-block-media-text__content{ grid-column:2; grid-row:1; padding:0 8%; word-break:break-word; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{ grid-column:2; grid-row:1; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{ grid-column:1; grid-row:1; padding:0 8% 0 0; }
/* Bild füllt seine Spalte immer aus (so macht es auch das echte WordPress-Core-CSS).
   Vorher nur max-width:100% -> Bilder mit kleinerer Eigenbreite (328px neben 461px)
   blieben schmaler, dadurch standen die Bildkanten unterschiedlich weit rechts. */
.wp-block-media-text .wp-block-media-text__media img{ width:100%; max-width:unset; height:auto; display:block; }
@media (max-width:600px){
  /* Schmaler Schirm: eine Spalte – erst der Text, darunter die Bilder
     nebeneinander in zwei Reihen statt als lange Einzelkolonne. */
  .media-stack{ grid-template-columns:1fr; row-gap:1.2em; }
  .ms-media{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .wp-block-media-text, .wp-block-media-text.has-media-on-the-right{ grid-template-columns:1fr; }
  .wp-block-media-text .wp-block-media-text__media,
  .wp-block-media-text .wp-block-media-text__content{ grid-column:1; }
  .wp-block-media-text .wp-block-media-text__content{ padding:12px 0 0; }
}

/* Draw-Attention-Hotspots (z. B. Bloßstock-Anstiegsskizze): Text + Bild nebeneinander.
   Das Bild skaliert responsiv; die Pfeil-Klickflächen (image-map) werden per JS mitskaliert. */
.hotspots-interaction{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.hotspots-placeholder{ flex:1 1 280px; min-width:240px; }
.hotspots-image-container{ flex:1 1 380px; min-width:280px; max-width:100%; }
.hotspots-image{ max-width:100% !important; width:100%; height:auto; display:block; }
.hotspot-info{ display:none; }   /* Weg-Vorlagen ausblenden – bei Klick in den Detailbereich kopiert */
.hotspots-placeholder .hotspot-title{ margin-top:0; }
.hotspot-detail .hotspot-content{ line-height:1.5; }
@media (max-width:640px){
  .hotspots-interaction{ flex-direction:column; }
}

/* ---------- Handy-Layout: Luft zu den Bildschirmrändern ----------
   Das Ursprungs-Theme setzt auf Handys feste Breiten (380/450/300px). Dadurch
   klebte der Inhalt je nach Gerät am Rand bzw. lief darüber hinaus. Stattdessen
   fließende Breite mit Außenabstand + Innenabstand. */
@media screen and (max-width: 767px) {
  .site { width: auto; max-width: 100%; margin: 12px 14px; }
  .container { padding: 0 18px; }
  /* Bilder und breite Inhalte nie über den Rand hinaus */
  .entry-content img, .entry-content iframe, .entry-content video { max-width: 100%; height: auto; }
  .entry-content table { display: block; overflow-x: auto; max-width: 100%; }
}
@media screen and (max-width: 480px) {
  .site { margin: 10px 10px; }
  .container { padding: 0 14px; }
}
/* Galerien mit vielen Spalten (z. B. Mitglieder, 5 Spalten) auf dem Handy
   umbrechen – sonst schrumpfen die Bilder auf Briefmarkengröße. */
@media screen and (max-width: 600px) {
  .gallery-columns-4 .gallery-item,
  .gallery-columns-5 .gallery-item,
  .gallery-columns-6 .gallery-item,
  .gallery-columns-7 .gallery-item,
  .gallery-columns-8 .gallery-item,
  .gallery-columns-9 .gallery-item { width: 33.3%; }
}
@media screen and (max-width: 400px) {
  .gallery-columns-3 .gallery-item,
  .gallery-columns-4 .gallery-item,
  .gallery-columns-5 .gallery-item,
  .gallery-columns-6 .gallery-item,
  .gallery-columns-7 .gallery-item,
  .gallery-columns-8 .gallery-item,
  .gallery-columns-9 .gallery-item { width: 50%; }
}
@media screen and (max-width: 320px) {
  .site { width: auto; margin: 8px; }
  .container { padding: 0 12px; }
}

/* --- Tourenplan: Kalender-Abo und Termin-Knöpfe (assets/js/tourenplan-kalender.js) --- */
/* Untere Zeile: Links (PDF/Felsampel) links, Kalender-Kachel daneben */
.tp-unten {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 18px; margin: 14px 0 4px;
}
.tp-unten-links { flex: 1 1 220px; min-width: 200px; }
.tp-unten-links p { margin: 0 0 8px; }
.tp-abo {
  flex: 1 1 320px; max-width: 460px;
  background: #f3f3ea; border: 1px solid #ddd9c3; border-radius: 5px;
  padding: 12px 14px; margin: 0;
}
.tp-abo p { margin: 0 0 8px; }
.tp-abo p:last-child { margin-bottom: 0; }
.tp-abo-hint { font-size: 13px; color: #666; }
.tp-abo-btn {
  display: inline-block; border: 1px solid #4a6a99; background: #5577aa; color: #fff;
  padding: 7px 14px; border-radius: 5px; font: inherit; line-height: 1.1; text-decoration: none;
}
.tp-abo-btn:hover { background: #4a6a99; color: #fff; }
.tp-abo-btn.tp-abo-ghost { background: #fff; color: #333; border-color: #cfcfcf; }
.tp-abo-btn.tp-abo-ghost:hover { background: #f2f2f2; color: #333; }

/* --- Suchfeld über einer Tabelle (assets/js/tabellen-suche.js) --- */
.tab-suche {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px;
}
.tab-suche label { font-weight: bold; }
.tab-suche input[type="search"] {
  box-sizing: border-box; flex: 1 1 240px; max-width: 340px;
  padding: 6px 10px; border: 1px solid #cfcfcf; border-radius: 4px;
  font: inherit; line-height: 1.3; background: #fff;
}
.tab-suche input[type="search"]:focus { border-color: #5577aa; outline: none; }
.tab-suche-zahl { font-size: 13px; color: #666; }
.tab-suche-zahl.tab-suche-leer { color: #a15; }
