/*
 * Theme Name:  Kuriose Feiertage Child
 * Theme URI:   https://www.kuriose-feiertage.de
 * Description: Child-Theme fuer GeneratePress - Homepage, Single Post, Header-Bar, Tag-Archiv, 404.
 * Author:      Sven Giese
 * Template:    generatepress
 * Version:     1.2.2
 * Text Domain: kf-child
 */


/* =============================================================
   HEADER-BAR (alle Seiten)
   ============================================================= */

.kf-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 1.25rem;
  background: #111;
  font-size: .72rem;
  line-height: 1;
}

.kf-header-bar__datum {
  color: #888;
  font-weight: 400;
  letter-spacing: .02em;
}

.kf-header-bar__nav {
  display: flex;
  gap: 1.5rem;
}

.kf-header-bar__link {
  color: #ccc;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: color .15s;
}

.kf-header-bar__link:hover        { color: #f7b800; }
.kf-header-bar__link--active      { color: #f7b800; border-bottom: 2px solid #f7b800; padding-bottom: 1px; }
.kf-header-bar__link--current     { color: #fff; }

@media (max-width: 480px) {
  .kf-header-bar__datum  { display: none; }
  .kf-header-bar         { justify-content: center; }
}


/* =============================================================
   SEKTION-CONTAINER (Homepage + Archive)
   ============================================================= */

.kf-sektion {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
}

.kf-sektion:last-child {
  border-bottom: none;
  margin-bottom: 0;
}


/* =============================================================
   SEKTIONS-HEADER (Label + Datum)
   ============================================================= */

.kf-sektion-label {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .08em;
  color: #111;
  margin-bottom: .15rem;
}

.kf-sektion-date {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  border-bottom: 3px solid #f7b800;
  padding-bottom: .2rem;
  margin-bottom: 1.25rem;
}

.kf-archiv-anzahl {
  display: block;
  font-size: .8rem;
  color: #888;
  font-weight: 400;
  margin-bottom: 1.5rem;
  margin-top: -.75rem;
}

.kf-archiv-jahr {
  font-size: .7rem;
  color: #aaa;
  margin: 0;
  line-height: 1;
}


/* =============================================================
   2-SPALTEN-GRID (Hero + Liste)
   ============================================================= */

.kf-grid.wp-block-columns {
  gap: 2rem;
  align-items: flex-start;
}

@media (min-width: 769px) {
  .kf-grid.wp-block-columns { flex-wrap: nowrap; }
}

@media (max-width: 768px) {
  .kf-grid.wp-block-columns { flex-direction: column; }
  .kf-grid.wp-block-columns > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* =============================================================
   FIX: wp-block-post-template – keine Bulletpoints
   ============================================================= */

.wp-block-post-template {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.wp-block-post-template .wp-block-post {
  list-style: none !important;
}


/* =============================================================
   HEUTE – Hero + Liste nebeneinander (65% / 35%)
   ============================================================= */

.kf-sektion-grid--heute {
  display: grid;
  grid-template-columns: 65% 1fr;
  gap: 2rem;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .kf-sektion-grid--heute { grid-template-columns: 1fr; }
}


/* =============================================================
   FIX: GP-Block-Group Padding entfernen
   ============================================================= */

.wp-block-group.kf-sektion {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wp-block-html { margin-bottom: 0 !important; }


/* =============================================================
   META – Post-Datumszeile (Single Post + Archive) – wie Live-Site
   ============================================================= */

.kf-post-dates {
  font-size: .82rem;
  color: #666;
  margin: .3rem 0 1rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .1rem;
}

.kf-post-dates--archive {
  margin: .2rem 0 .6rem;
  font-size: .76rem;
}

.kf-post-dates .dashicons {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  color: #aaa;
  margin-right: .2rem;
}

.kf-sep {
  color: #ccc;
  margin: 0 .35rem;
}

.kf-updated  { color: #666; }
.kf-author   { color: #666; }
.kf-published { color: #666; }

.kf-pub-daymonth { font-weight: 600; color: #111; }
.kf-pub-year     { font-weight: 600; color: #111; }

/* Trennlinie zwischen Hero-Titel und Liste in Gestern / Morgen */
.kf-sektion-gestern .kf-liste,
.kf-sektion-morgen  .kf-liste {
  border-top: 2px solid #e5e5e5;
  padding-top: 1.1rem;
  margin-top: 1.25rem;
}


/* =============================================================
   HERO – Heute: Overlay-Stil (Titel auf dem Bild)
   ============================================================= */

/* Post-Wrapper: Referenzpunkt für absolut positionierte Kinder */
.kf-sektion-heute .kf-hero .wp-block-post {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

/* Bild: normaler Flow → bestimmt die Höhe des Wrappers */
.kf-sektion-heute .kf-hero .wp-block-post-featured-image {
  position: relative;
  margin: 0;
}

.kf-sektion-heute .kf-hero .wp-block-post-featured-image a,
.kf-sektion-heute .kf-hero .wp-block-post-featured-image img {
  display: block;
  width: 100%;
}

.kf-sektion-heute .kf-hero .wp-block-post-featured-image a {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
}

.kf-sektion-heute .kf-hero .wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: 100%;
}

/* Gradient – stärkere Version weiter unten (HERO OVERLAY Sektion) */
.kf-sektion-heute .kf-hero .wp-block-post-featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Titel: schwebt über dem Bild */
.kf-sektion-heute .kf-hero .wp-block-post-title {
  position: absolute;
  bottom: 2.75rem;
  left: 0;
  right: 0;
  padding: 0 1.25rem;
  margin: 0 !important;
  z-index: 2;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  line-height: 1.3;
}

.kf-sektion-heute .kf-hero .wp-block-post-title a       { color: #fff !important; text-decoration: none; }
.kf-sektion-heute .kf-hero .wp-block-post-title a:hover { color: #f7b800 !important; }

/* Excerpt ausblenden */
.kf-sektion-heute .kf-hero .wp-block-post-excerpt { display: none; }

/* Weiterlesen-Link: ebenfalls auf dem Bild */
.kf-sektion-heute .kf-hero .wp-block-read-more {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  z-index: 2;
  margin-top: 0;
  color: rgba(255,255,255,.8);
  border-bottom-color: rgba(255,255,255,.35);
}

.kf-sektion-heute .kf-hero .wp-block-read-more:hover {
  color: #f7b800;
  border-bottom-color: #f7b800;
}

@media (max-width: 768px) {
  .kf-sektion-heute .kf-hero .wp-block-post-title { font-size: 1.25rem; bottom: 2.5rem; }
}


/* =============================================================
   HEUTE – TRENDING-LISTE (nummeriert, kein Thumbnail)
   ============================================================= */

.kf-sektion-heute .kf-liste .wp-block-post-featured-image { display: none; }

.kf-sektion-heute .kf-liste .wp-block-post-template { counter-reset: kf-trending; }

.kf-sektion-heute .kf-liste .wp-block-post {
  counter-increment: kf-trending;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem 0;
}

.kf-sektion-heute .kf-liste .wp-block-post::before {
  content: '#' counter(kf-trending);
  flex: 0 0 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #f7b800;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 4px;
}

.kf-sektion-heute .kf-liste .wp-block-post-title {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.kf-sektion-heute .kf-liste .wp-block-post-title a       { color: #111; }
.kf-sektion-heute .kf-liste .wp-block-post-title a:hover { color: #f7b800; }

.kf-sektion-heute .kf-liste .wp-block-post-date {
  font-size: .7rem;
  color: #aaa;
  margin: .2rem 0 0;
  display: block;
}


/* =============================================================
   GESTERN + MORGEN – 2-Spalten-Wrapper
   ============================================================= */

.wp-block-columns.kf-gestern-morgen {
  gap: 2.5rem;
  align-items: flex-start;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
}

@media (min-width: 769px) {
  .wp-block-columns.kf-gestern-morgen { flex-wrap: nowrap; }
}

@media (max-width: 768px) {
  .wp-block-columns.kf-gestern-morgen { flex-direction: column; }
  .wp-block-columns.kf-gestern-morgen > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* Innen-Sektionen: eigene border-bottom deaktivieren */
.kf-gestern-morgen .kf-sektion {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Sektions-Header mit "Alle →"-Link */
.kf-sektion-header--alle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid #111;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.kf-sektion-header--alle .kf-sektion-label { margin-bottom: .1rem; }
.kf-sektion-header--alle .kf-sektion-date  { margin-bottom: .2rem; border-bottom: none; padding-bottom: 0; }

.kf-sektion-alle {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #888;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: .2rem;
}

.kf-sektion-alle:hover { color: #f7b800; }


/* =============================================================
   HERO – Gestern & Morgen (4:3)
   ============================================================= */

.kf-sektion-gestern .kf-hero .wp-block-post-featured-image a,
.kf-sektion-morgen  .kf-hero .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.kf-sektion-gestern .kf-hero .wp-block-post-featured-image img,
.kf-sektion-morgen  .kf-hero .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: 100%;
}

.kf-sektion-gestern .kf-hero .wp-block-post-title,
.kf-sektion-morgen  .kf-hero .wp-block-post-title {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.35;
  margin-top: .6rem;
  margin-bottom: .4rem;
}

.kf-sektion-gestern .kf-hero .wp-block-post-title a,
.kf-sektion-morgen  .kf-hero .wp-block-post-title a       { color: #111; text-decoration: none; }

.kf-sektion-gestern .kf-hero .wp-block-post-title a:hover,
.kf-sektion-morgen  .kf-hero .wp-block-post-title a:hover { color: #f7b800; }

/* Excerpt in Gestern/Morgen via CSS ausblenden */
.kf-sektion-gestern .kf-hero .wp-block-post-excerpt,
.kf-sektion-morgen  .kf-hero .wp-block-post-excerpt { display: none; }


/* =============================================================
   WEITERLESEN-LINK
   ============================================================= */

.kf-hero .wp-block-read-more {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
  text-decoration: none;
  border-bottom: 2px solid #f7b800;
  padding-bottom: 1px;
  margin-top: .5rem;
}

.kf-hero .wp-block-read-more:hover { color: #f7b800; }


/* =============================================================
   LISTE (rechte Spalte)
   ============================================================= */

.kf-liste .wp-block-post {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem 0;
  border-bottom: 1px solid #eee;
}

.kf-liste .wp-block-post:last-child { border-bottom: none; }

.kf-liste .wp-block-post-featured-image         { flex: 0 0 72px; }
.kf-liste .wp-block-post-featured-image a,
.kf-liste .wp-block-post-featured-image img      { display: block; width: 72px; height: 56px; }
.kf-liste .wp-block-post-featured-image img      { object-fit: cover; }

.kf-liste .wp-block-post-title {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

/* Post-Body: Titel + Meta übereinander */
.kf-liste .kf-post-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.kf-liste .wp-block-post-title a       { color: #000; text-decoration: none; }
.kf-liste .wp-block-post-title a:hover { color: #f7b800; }

/* Meta in der Listen-Ansicht kompakter */
.kf-liste .kf-post-dates {
  margin: 0;
  font-size: .75rem;
}

.kf-hero .wp-block-query-no-results p,
.kf-liste .wp-block-query-no-results p { font-size: .875rem; color: #888; margin: 0; }

/* Gestern/Morgen: Thumbnail rechts, Text links */
.kf-sektion-gestern .kf-liste .wp-block-post,
.kf-sektion-morgen  .kf-liste .wp-block-post {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.kf-sektion-gestern .kf-liste .wp-block-post-title,
.kf-sektion-morgen  .kf-liste .wp-block-post-title { font-size: .9rem; }

/* Gestern/Morgen Hero: kein Read-More */
.kf-sektion-gestern .kf-hero .wp-block-read-more,
.kf-sektion-morgen  .kf-hero .wp-block-read-more    { display: none; }


/* =============================================================
   MONATS-ARCHIV (Grid)
   ============================================================= */

.kf-monat-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.5rem;
}

.kf-monat-grid .wp-block-post {
  display: flex;
  flex-direction: column;
}

.kf-monat-grid .wp-block-post-featured-image a,
.kf-monat-grid .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kf-monat-grid .kf-monat-card-date {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #f7b800;
  margin-top: .6rem;
  margin-bottom: .2rem;
}

.kf-monat-grid .wp-block-post-title {
  font-size: .9rem;
  line-height: 1.35;
  margin: 0;
}

.kf-monat-grid .wp-block-post-title a       { color: #111; text-decoration: none; }
.kf-monat-grid .wp-block-post-title a:hover { color: #f7b800; }


/* =============================================================
   SINGLE POST
   ============================================================= */

/* Datum-Badge (oben) */
.kf-datum-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #111;
  text-decoration: none;
  border-bottom: 3px solid #f7b800;
  padding-bottom: 2px;
  margin-bottom: .75rem;
}

.kf-datum-badge:hover { color: #f7b800; }

/* "Weitere Anlässe" Sektion */
.kf-post-weitere {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 3px solid #f7b800;
}

.kf-post-weitere-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: .25rem;
}

.kf-post-weitere-datum {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.25rem;
}

/* Kompaktere Liste in "Weitere Anlässe" */
.kf-post-weitere .kf-liste .wp-block-post           { padding: .4rem 0; }
.kf-post-weitere .kf-liste .wp-block-post-featured-image { flex: 0 0 60px; }
.kf-post-weitere .kf-liste .wp-block-post-featured-image a,
.kf-post-weitere .kf-liste .wp-block-post-featured-image img { width: 60px; height: 46px; }

/* Tag-zu-Tag-Navigation */
.kf-day-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e5;
  gap: 1rem;
}

.kf-day-nav a {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
  text-decoration: none;
}

.kf-day-nav a:hover     { color: #f7b800; }
.kf-day-nav__next       { margin-left: auto; }

@media (max-width: 480px) {
  .kf-day-nav             { flex-direction: column; align-items: flex-start; }
  .kf-day-nav__next       { margin-left: 0; }
}


/* =============================================================
   404
   ============================================================= */

.kf-404 {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.kf-404__header { margin-bottom: 2rem; }

.kf-404__header h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: .5rem;
}

.kf-404__header p {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

.kf-404__heute { margin-bottom: 2.5rem; }

.kf-404__posts {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.kf-404__post a {
  font-size: .95rem;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  display: block;
  padding-bottom: .4rem;
}

.kf-404__post a:hover { color: #f7b800; border-color: #f7b800; }

.kf-404__back {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
  text-decoration: none;
  border-bottom: 2px solid #f7b800;
  padding-bottom: 1px;
}

.kf-404__back:hover { color: #f7b800; }


/* =============================================================
   TAG-ARCHIV TEMPLATE – PHP-gerenderte Bilder anpassen
   ============================================================= */

/* Hero-Bild im taxonomy-post_tag.php Template */
.kf-archiv-hero .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.kf-archiv-hero .wp-block-post-featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 0;
}

/* Liste: Thumbnail-Bilder auf exakte Größe zwingen */
.kf-liste .wp-block-post-featured-image img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  display: block;
}

/* Monats-Archiv: Header-Wrapper (injiziert via Hook) */
.kf-archiv-monat-header {
  margin-bottom: 2rem;
}


/* =============================================================
   HOMEPAGE – Weißraum zwischen Nav und Content reduzieren
   ============================================================= */

/* GP: alle möglichen Wrapper auf Startseite ohne Top-Abstand */
.home .site-content,
.home .hfeed,
.home .site-main,
.home .content-area,
.home .singular-content-wrap,
.home .page-hero-section {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* GP: Entry-Header / Entry-Content der Startseite ohne Extra-Padding */
.home .entry-header,
.home .entry-content,
.home .entry-content > *:first-child {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* ── Einheitlicher Abstand unter der Nav – alle Seitentypen identisch ──────── */
.site-inner {
  padding-top: 1.5rem !important;
}

/* GP Page-Header (Seitentitel + Breadcrumbs) auf allen Seitentypen ausblenden
   KF hat eigene Sektions-Header für jede Ansicht                            */
.home .page-header,
.single .page-header,
.tag .page-header,
.category .page-header,
.date .page-header,
.author .page-header,
.search .page-header,
.error404 .page-header { display: none; }

/* GP entry-header: auf Archiv-/Tag-Seiten kein Extra-Padding */
.tag .entry-header,
.category .entry-header,
.date .entry-header,
.archive .entry-header { padding: 0 !important; margin: 0 !important; }

/* ── Startseite: volle 1300px, kein seitliches Padding ─────────────────────── */
.home .grid-container,
.home .inside-site-container {
  max-width:     1300px !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

.home .inside-article,
.home .entry-content {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* Block-Editor: constrained layout auto-margin aufheben */
.home .entry-content .is-layout-constrained > *,
.home .entry-content .wp-block-group.is-layout-constrained {
  max-width:    100% !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}


/* =============================================================
   HEUTE HERO – Meta ausblenden (Overlay braucht keine Meta-Zeile)
   ============================================================= */

.kf-sektion-heute .kf-hero .kf-post-dates { display: none; }


/* =============================================================
   HOVER-EFFEKTE – Anklickbare Artikel-Teaser
   ============================================================= */

.kf-liste .wp-block-post {
  transition: background .18s ease, transform .18s ease;
  border-radius: 4px;
}

.kf-liste .wp-block-post:hover {
  transform: translateY(-2px);
  background: #fafafa;
}

/* Heute-Hero: Bild leicht skalieren */
.kf-sektion-heute .kf-hero .wp-block-post-featured-image img {
  transition: transform .3s ease;
}

.kf-sektion-heute .kf-hero .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.03);
}

/* Gestern/Morgen Hero */
.kf-sektion-gestern .kf-hero .wp-block-post-featured-image img,
.kf-sektion-morgen  .kf-hero .wp-block-post-featured-image img {
  transition: transform .3s ease;
}

.kf-sektion-gestern .kf-hero .wp-block-post:hover .wp-block-post-featured-image img,
.kf-sektion-morgen  .kf-hero .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.03);
}


/* =============================================================
   TYPOGRAFIE – Mindestgröße 12px für Meta auf Mobile
   ============================================================= */

@media (max-width: 768px) {
  .kf-post-dates {
    font-size: .75rem; /* 12px */
    gap: .2rem .05rem;
  }

  .kf-liste .kf-post-dates {
    font-size: .72rem;
  }
}


/* =============================================================
   HERO OVERLAY – stärkerer Gradient für besseren Kontrast
   ============================================================= */

.kf-sektion-heute .kf-hero .wp-block-post-featured-image::after {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.15) 65%,
    transparent 80%
  );
}


/* =============================================================
   FOOTER – 4-Spalten Widget-Bereich (schwarz / weiß)
   ============================================================= */

.kf-footer-widgets {
  background: #000;
  color: #fff;
  padding: 3rem 0 2rem;
  margin-top: 3rem;
}

.kf-footer-widgets__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.kf-footer-widgets__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

@media (max-width: 900px) {
  .kf-footer-widgets__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .kf-footer-widgets__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Widget-Titel */
.kf-footer-widget__title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #f7b800;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #333;
}

/* Generische Widget-Texte + Links */
.kf-footer-widgets a           { color: #ccc; text-decoration: none; }
.kf-footer-widgets a:hover     { color: #f7b800; }
.kf-footer-widgets p           { color: #aaa; font-size: .85rem; margin: 0 0 .5rem; }
.kf-footer-widgets ul          { list-style: none; margin: 0; padding: 0; }
.kf-footer-widgets ul li       { margin-bottom: .45rem; }
.kf-footer-widgets ul li a     { font-size: .85rem; color: #ccc; }
.kf-footer-widgets ul li a:hover { color: #f7b800; }

/* GP eigene Widget-Klassen */
.kf-footer-widgets .widget_text p   { color: #aaa; font-size: .85rem; }
.kf-footer-widgets .widget_nav_menu .menu-item a { font-size: .85rem; }

/* Textwidget */
.kf-footer-widget { margin-bottom: 0; }

/* GP Footer (Sitename + Copyright) – separat dunkel halten */
.site-footer { background: #111; color: #666; font-size: .75rem; }
.site-footer a { color: #888; }
.site-footer a:hover { color: #f7b800; }


/* =============================================================
   SINGLE POST – Zweispalten-Layout (ToC links + Inhalt rechts)
   ============================================================= */

/* Single Post: Container exakt 1300px nutzbare Breite
   GP hat padding: 0 16px eingebaut → auf 0 setzen, max-width auf 1300px */
.single .grid-container,
.single .site-container {
  max-width:     1300px !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* GP Navigation-Container: alle möglichen Varianten global ansprechen */
.inside-navigation-grid-container,
.inside-navigation.grid-container,
.inside-navigation.grid-parent,
.inside-navigation {
  max-width:     1300px !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* GP-Wrapper auf Single-Post-Seiten: seitliche Constraints aufheben */
.single .inside-article,
.single .entry-content {
  padding-left:  0 !important;
  padding-right: 0 !important;
  max-width:     100% !important;
}

/* H1: selbes Grid wie .kf-single-layout → pixelgenaue Ausrichtung mit Content-Spalte */
.single .entry-header {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* H1 in Spalte 2 – bündig mit Content-Spalte, Typografie kompakt */
.single .entry-title {
  grid-column: 2;
  margin: 0;
  padding: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  line-height: 1.2;
}

/* Mobile: kein Grid, H1 vollbreit */
@media (max-width: 800px) {
  .single .entry-header {
    display: block;
  }
}

/* Haupt-Grid: 220px ToC | 1024px Content */
.kf-single-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
}

/* -- ToC-Sidebar ------------------------------------------------ */
.kf-toc-sidebar {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.kf-toc {
  background: #f7f7f7;
  border-left: 3px solid #f7b800;
  border-radius: 4px;
  padding: 1rem 1.1rem 1.1rem;
}

.kf-toc__title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #777;
  margin: 0 0 .7rem;
}

.kf-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kf-toc__list li {
  margin-bottom: .4rem;
  line-height: 1.3;
}

.kf-toc__list a {
  color: #222;
  text-decoration: none;
  font-size: .82rem;
  display: block;
  transition: color .15s;
}

.kf-toc__list a:hover { color: #f7b800; }

/* H3-Einrueckung */
.kf-toc__sub { padding-left: 1rem; }
.kf-toc__sub a { font-size: .78rem; color: #555; }

/* -- Artikel-Inhalt --------------------------------------------- */
.kf-article-body {
  min-width: 0;
  max-width: 1024px;
}

.kf-article-body img {
  max-width: 100%;
  height: auto;
}

/* -- Typografie: größer für breite Content-Spalte (~1024px) ----- */
.single .entry-content,
.kf-article-body {
  font-size: 1.125rem;   /* 18px – gut lesbar bei großer Spaltenbreite */
  line-height: 1.8;
}

.kf-article-body h2 {
  font-size: 1.65rem;
  margin-top: 2.25rem;
  margin-bottom: .65rem;
}

.kf-article-body h3 {
  font-size: 1.3rem;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}

.kf-article-body h4 {
  font-size: 1.1rem;
  margin-top: 1.25rem;
  margin-bottom: .4rem;
}

/* -- Mobile: ToC über Content, keine Sidebar, kleinere Schrift -- */
@media (max-width: 800px) {
  .kf-article-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .kf-single-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .kf-toc-sidebar {
    position: static;
    max-height: none;
  }
}


/* -- Meta-Block im Artikel-Body --------------------------------- */
.kf-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  font-size: .8rem;
  color: #555;
  padding: .65rem 0 .75rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1.25rem;
}

.kf-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
}

.kf-meta-item .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: #888;
  vertical-align: middle;
}

.kf-meta-sep {
  color: #ccc;
  user-select: none;
}



/* Mobile: Meta-Items umbrechen statt ausblenden */
@media (max-width: 800px) {
  .kf-article-meta {
    gap: .3rem .5rem;
    font-size: .75rem;
  }
  .kf-meta-sep { display: none; }
  .kf-meta-item { width: 100%; }
}