/*
Theme Name:     johannes
Theme URI:      n/a
Template:       kadence
Author:         Matthias Reinders
Author URI:     n/a
Description:    Child Theme fuer MODULDREI
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =======================================================
   GENERISCHE KLASSEN (fuer alle Sektionen wiederverwendbar)
   ======================================================= */

/* Full-Bleed Sektion: volle Browserbreite, max 100vh, kein Seitenabstand */
.section-fullbleed {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  overflow: hidden;
}

/* Innerer Container im Theme-Raster (gleiche Breite wie align:wide Sektionen) */
.section-fullbleed > .kt-row-column-wrap {
  max-width: 1352px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Vertikale Zentrierung fuer Full-Bleed-Sektionen */
.section-fullbleed .kt-row-layout-inner,
.section-fullbleed .wp-block-kadence-column,
.section-fullbleed .kt-inside-inner-col {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* Kein Leerraum zwischen Sektionen */
.entry-content { margin-top: 0 !important; }
.entry-content > .wp-block-kadence-rowlayout + .wp-block-kadence-rowlayout { margin-top: 0 !important; }
html, body { overflow-x: hidden; }

/* =======================================================
   SEKTIONS-SPEZIFISCH (nur was pro Sektion individuell ist)
   ======================================================= */

/* Modul 01 Hero: Outline-Typografie + Scroll-Indikator + Header-Offset */
.hero-wir .kt-adv-heading147_hero01-03 {
  -webkit-text-stroke: 2px #f5c518;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.04em;
}
.hero-wir .kt-inside-inner-col { padding-top: 128px !important; align-items: center; }
.hero-wir::after {
  content: "";
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent no-repeat center center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-size: 14px 14px;
  animation: heroBounce 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroBounce {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 10px; }
}

/* Modul 04 Projekt-Slide: Logo-Breite begrenzen */
.projekt-slide .wp-block-kadence-image img { max-width: 320px; height: auto; }

/* =======================================================
   HEADER / NAVIGATION
   ======================================================= */

/* Top-Bar (Social + Rechtslinks) */
.site-top-header-wrap { background-color: #23394a !important; }
.site-top-header-wrap a { color: #ffffff !important; }

/* Sticky-Header: halbtransparentes Weiss */
.site-main-header-wrap.kadence-sticky-header { background: #ffffffb0 !important; }

/* Submenu-Dropdown: runde Ecken sichtbar machen.
   border-radius allein reicht nicht, weil die Eintraege die Ecken ueberdecken.
   overflow: hidden beschneidet die Eintraege am runden Rand. */
.header-navigation .header-menu-container ul.sub-menu {
  border-radius: 8px;
  overflow: hidden;
}

/* Wissensportal: Filter-Buttons (All/Team/Studien/Blog) eckiger machen.
   Kadence setzt ueber .kt-button.kb-btn-global-pill in style-blocks-query.css
   border-radius:100px. Diese Kadence-Regel hat dieselbe Spezifitaet (3 Klassen)
   und laedt nach unserer style.css, daher braucht unsere Regel eine Klasse mehr
   (.kt-button zusaetzlich), damit sie ohne !important gewinnt. */
.wp-block-kadence-query-filter-buttons .kb-query-filter-filter-button.kt-button.kb-btn-global-pill {
  border-radius: 3px;
}

/* =======================================================
   WISSENSPORTAL: echte Beitrags-Kacheln wie die Design-Vorlagen
   Bild als Hintergrund + Teal-Overlay + weisse Headline oben +
   pinker Button unten rechts. Kategorie/Datum/Autor/Auszug ausgeblendet.
   Scope nur Seite 525 (Wissensportal), damit andere Query-Loops
   unberuehrt bleiben. Hinweis: Der Button-TEXT ("Read More") kommt aus
   dem Kadence-Query-Karten-Template und laesst sich per CSS nicht auf
   "Zum Fachartikel" aendern, das ist eine Feld-Aenderung im Editor.
   ======================================================= */
.page-id-525 .kb-query-item {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
}
/* Bild als Vollflaechen-Hintergrund */
.page-id-525 .kb-query-item > figure.wp-block-kadence-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.page-id-525 .kb-query-item > figure.wp-block-kadence-image a,
.page-id-525 .kb-query-item > figure .kb-is-ratio-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  padding: 0;
}
.page-id-525 .kb-query-item > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Teal-Overlay wie in der Vorlage (palette6 @ 0.77) */
.page-id-525 .kb-query-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(143, 211, 209, 0.77);
  z-index: 1;
}
/* Inhaltsspalte ueber das Bild, Titel oben / Button unten */
.page-id-525 .kb-query-item > .wp-block-kadence-column {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: stretch;
}
.page-id-525 .kb-query-item > .wp-block-kadence-column > .kt-inside-inner-col {
  width: 100%;
  padding: 72px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
/* Nur Titel + Button, Rest ausblenden */
.page-id-525 .kb-query-item .kb-dynamic-list,
.page-id-525 .kb-query-item .kadence-column624_e6c521-b8,
.page-id-525 .kb-query-item .kb-dynamic-html,
.page-id-525 .kb-query-item .kb-query-item-flip-back {
  display: none !important;
}
/* Titel wie Vorlage: weiss, gross, uppercase */
.page-id-525 .kb-query-item h2.wp-block-kadence-advancedheading,
.page-id-525 .kb-query-item h2.wp-block-kadence-advancedheading a {
  color: #ffffff !important;
  text-transform: uppercase;
  font-size: 42px;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none !important;
}
/* Titel auf max. 2 Zeilen begrenzen und feste Hoehe reservieren, damit der
   Button in allen Kacheln auf gleicher Hoehe steht (springt sonst bei
   ein- vs. zweizeiligen Ueberschriften). */
.page-id-525 .kb-query-item h2.wp-block-kadence-advancedheading {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
/* Unterstrich unter dem Titel entfernen (sitzt auf dem Link-Wrapper) */
.page-id-525 .kb-query-item a.kb-advanced-heading-link,
.page-id-525 .kb-query-item a.kb-advanced-heading-link:hover {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Button wie Vorlage: pink gefuellt, unten rechts */
.page-id-525 .kb-query-item .kb-buttons-wrap {
  align-self: flex-end;
  margin: 0;
}
.page-id-525 .kb-query-item .kb-buttons-wrap .kb-button {
  background: #ff009d !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 3px !important;
  font-size: 17px !important;
  text-transform: none !important;
}
.page-id-525 .kb-query-item .kb-buttons-wrap .kb-button:hover {
  background: #387091 !important;
}
@media (max-width: 1024px) {
  .page-id-525 .kb-query-item h2.wp-block-kadence-advancedheading,
  .page-id-525 .kb-query-item h2.wp-block-kadence-advancedheading a { font-size: 20px; }
  .page-id-525 .kb-query-item > .wp-block-kadence-column > .kt-inside-inner-col { padding: 40px 32px; }
}