.elementor-kit-8{--e-global-color-primary:#1B5640;--e-global-color-secondary:#C21B1B;--e-global-color-text:#871811;--e-global-color-accent:#70988F;--e-global-color-794e2d3:#FFFFFF;--e-global-color-14efb25:#F3F3F3;--e-global-color-d5e32c6:#696969;--e-global-color-0ff6bfe:#363636;--e-global-color-2faca62:#6C757D;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.3em;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-weight:300;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================
   GLOBAL DESIGN SYSTEM - SCHACHJUGEND NRW
   ======================================== */

:root {
  /* Farben */
  --primary-green: #4A7C6E;
  --primary-red: #C41E3A;
  --text-dark: #2C3E50;
  --text-light: #6C757D;
  --bg-light: #F8F9FA;
  --white: #FFFFFF;
  
  /* Schriften */
  --font-primary: 'Outfit', sans-serif;
  --font-secondary: 'Work Sans', sans-serif;
  
  /* Größen */
  --h1-size: 48px;
  --h2-size: 36px;
  --h3-size: 28px;
  --h4-size: 22px;
  --body-size: 16px;
  --small-size: 14px;
  
  /* Abstände */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 72px;
  
  /* Schatten */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ========================================
   HEADER SPACING FIX - WICHTIG!
   ======================================== */

/* Entfernt ungewolltes Padding von Sections */
.elementor-section,
.elementor-top-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Entfernt Padding von Containern im Header-Bereich */
.elementor-section > .elementor-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Heading ohne Margin oben */
.elementor-section h1,
.elementor-section h2 {
  margin-top: 0 !important;
}

/* Für Column Padding */
.elementor-column > .elementor-widget-wrap {
  padding-top: 0 !important;
}

/* ========================================
   TYPOGRAFIE FIXES
   ======================================== */

body {
  font-family: var(--font-secondary);
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  margin-top: 0 !important; /* HINZUGEFÜGT */
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }

/* ========================================
   BUTTONS VEREINHEITLICHEN
   ======================================== */

.elementor-button,
.elementor-slide-button {
  background-color: var(--primary-red) !important;
  color: var(--white) !important;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 32px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.3s ease;
  border: none !important;
  text-transform: none !important;
}

.elementor-button:hover,
.elementor-slide-button:hover {
  background-color: #A01829 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========================================
   CARDS VEREINHEITLICHEN
   ======================================== */

.sjrw-card,
.elementor-post__card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.sjrw-card:hover,
.elementor-post__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card Icons einheitlich gestalten */
.sjrw-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 36px;
  margin: 0 auto var(--spacing-sm);
}

.sjrw-icon.red {
  background: linear-gradient(135deg, #C41E3A 0%, #A01829 100%);
}

.sjrw-icon.green {
  background: linear-gradient(135deg, #4A7C6E 0%, #3A6355 100%);
}

/* ========================================
   HEADER FIXES
   ======================================== */

#psp-search-field {
  border: 2px solid #E0E0E0;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  width: 200px;
}

#psp-search-field:focus {
  outline: none;
  border-color: var(--primary-green);
}

.elementor-element-c190036 .elementor-icon {
  cursor: pointer;
  transition: color 0.3s ease;
}

.elementor-element-c190036 .elementor-icon:hover {
  color: var(--primary-green);
}

/* Logo größer machen */
.elementor-element-6943b0e img {
  max-width: 180px !important;
  height: auto;
}

/* ========================================
   SLIDER FIXES
   ======================================== */

.elementor-slide-heading {
  font-size: 48px !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  margin-bottom: var(--spacing-sm) !important;
  margin-top: 0 !important; /* HINZUGEFÜGT */
}

.elementor-slide-description {
  font-size: 20px !important;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  margin-bottom: var(--spacing-md) !important;
  margin-top: 0 !important; /* HINZUGEFÜGT */
}

/* ========================================
   POST CARDS EINHEITLICH - AKTUELLES SEITE
   ======================================== */

/* Container als Grid mit 4 Spalten */
.elementor-posts-container.elementor-posts {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Einzelne Post-Elemente */
.elementor-posts-container .elementor-post {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Card selbst */
.elementor-posts-container .elementor-post__card {
  height: 100% !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #E0E0E0 !important;
  background: white !important;
}

/* Thumbnail IMMER gleiche Höhe */
.elementor-post__thumbnail {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  width: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Für Cards OHNE Bild - Grüner Platzhalter */
.elementor-post__card:not(:has(.elementor-post__thumbnail)) {
  position: relative !important;
}

.elementor-post__card:not(:has(.elementor-post__thumbnail))::before {
  content: '';
  display: block !important;
  height: 240px !important;
  width: 100% !important;
  background: linear-gradient(135deg, var(--primary-green) 0%, #3A6355 100%) !important;
  flex-shrink: 0 !important;
}

/* Text-Bereich */
.elementor-post__text {
  padding: 24px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Badge verstecken */
.elementor-post__badge {
  display: none !important;
}

/* Titel einheitlich */
.elementor-post__title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 84px !important;
}

.elementor-post__title a {
  color: var(--text-dark) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.elementor-post__title a:hover {
  color: var(--primary-red) !important;
}

/* Excerpt */
.elementor-post__excerpt {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text-light) !important;
  margin: 0 0 16px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Meta-Daten am Ende */
.elementor-post__meta-data {
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid #E0E0E0 !important;
}

.elementor-post__date {
  color: var(--text-light) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Read More Button */
.elementor-post__read-more {
  display: inline-block !important;
  margin-top: 16px !important;
  color: var(--primary-red) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.elementor-post__read-more:hover {
  color: var(--primary-green) !important;
  transform: translateX(4px) !important;
}

/* Hover-Effekt */
.elementor-post__card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

/* ========================================
   TEAM CARDS (ÜBER UNS)
   ======================================== */

.elementor-element-3e792f7 .elementor-widget-container img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--spacing-sm);
}

.elementor-element-3e792f7 h3 {
  font-size: 22px;
  margin-bottom: 4px;
  margin-top: 0 !important; /* HINZUGEFÜGT */
}

.elementor-element-3e792f7 p {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 0 !important; /* HINZUGEFÜGT */
}

/* ========================================
   FOOTER FIXES
   ======================================== */

footer a {
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--primary-red) !important;
}

/* ========================================
   RESPONSIVE FIXES
   ======================================== */

/* Tablet: 3 Spalten */
@media (max-width: 1200px) {
  .elementor-posts-container.elementor-posts {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Tablet Klein: 2 Spalten */
@media (max-width: 900px) {
  .elementor-posts-container.elementor-posts {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  .elementor-posts-container .elementor-post__card {
    min-height: 440px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --h1-size: 36px;
    --h2-size: 28px;
    --h3-size: 22px;
  }
  
  .elementor-slide-heading {
    font-size: 32px !important;
  }
  
  .elementor-slide-description {
    font-size: 16px !important;
  }
  
  #psp-search-field {
    width: 150px;
  }
  
  .elementor-posts-container.elementor-posts {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .elementor-posts-container .elementor-post__card {
    min-height: 400px !important;
  }
  
  .elementor-post__thumbnail {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }
  
  .elementor-post__card:not(:has(.elementor-post__thumbnail))::before {
    height: 200px !important;
  }
  
  .elementor-post__title {
    font-size: 20px !important;
    min-height: 78px !important;
  }
}

/* ========================================
   HOVER EFFEKTE FÜR SOCIAL ICONS
   ======================================== */

.elementor-icon-wrapper a {
  transition: transform 0.3s ease;
  display: inline-block;
}

.elementor-icon-wrapper a:hover {
  transform: scale(1.1);
}

/* ========================================
   ZUSÄTZLICHE FIXES
   ======================================== */

/* Verhindere dass Elementor das Grid überschreibt */
.elementor-posts--masonry .elementor-post {
  position: static !important;
}

.elementor-widget-posts .elementor-posts-container {
  margin: 0 !important;
}

/* Thumbnail Wrapper */
.elementor-post__thumbnail-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   ZUSÄTZLICHE SPACING FIXES - NEU!
   ======================================== */

/* Entfernt Default-Margin von Widgets */
.elementor-widget {
  margin-top: 0 !important;
}

/* Erste Elemente ohne Margin */
.elementor-widget-wrap > .elementor-element:first-child,
.elementor-container > .elementor-column:first-child > .elementor-widget-wrap > .elementor-element:first-child {
  margin-top: 0 !important;
}

/* Text Editor ohne Margin oben */
.elementor-text-editor > *:first-child {
  margin-top: 0 !important;
}

/* Column Gap auf 0 wenn gewünscht */
.elementor-section.no-gap .elementor-container {
  gap: 0 !important;
}/* End custom CSS */