/*
 Theme Name: Blocksy Child
 Theme URI: https://creativethemes.com/blocksy/
 Description: Child Theme für Blocksy
 Author: Hatay
 Template: blocksy
 Version: 1.0.9
*/

/* =========================================================
   1. GLOBAL BRANDING (Variablen)
   ========================================================= */
:root {
    --cd-font-primary: "Candara", "Calibri", sans-serif;
    --cd-color-primary: #00674f;
    --cd-color-text: #373f42;
}

/* =========================================================
   2. BODY
   ========================================================= */
body {
    font-family: var(--cd-font-primary);
    color: var(--cd-color-text);
    line-height: 1.6;
    overflow-x: clip;
}

p, li {
    font-family: var(--cd-font-primary);
    font-size: 18px;
    font-weight: 400;
    color: var(--cd-color-text);
    line-height: 1.6;
}
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
    font-size: 18px !important;
}

/* =========================================================
   3. HEADER
   ========================================================= */
.ct-header-logo img {
    max-width: 150px;
    height: auto;
}

.ct-header, 
.ct-header a, 
.ct-header .ct-menu a {
    font-family: var(--cd-font-primary) !important;
    color: var(--cd-color-primary);
}

.ct-header .ct-menu a:hover,
.ct-header .ct-menu a.current-menu-item {
    color: #004d3a;
}

.ct-header .ct-menu a {
    font-size: 18px;
    font-weight: 600;
}

/* =========================================================
   4. FOOTER
   ========================================================= */
.site-footer {
    font-family: var(--cd-font-primary);
    color: var(--cd-color-text);
    text-align: center;
    background-color: #f5f5f5;
    padding: 2rem 1rem;
}

.site-footer .footer-separator {
    background: #dedede;
    width: 100%;
    height: 1px;
    max-width: 1140px;
    margin: 0 auto 20px auto;
}

.site-footer .footer-logo {
    text-align: center;
    width: 100%;
}

.site-footer .footer-logo img {
    display: block;
    margin: 0 auto 15px;
    max-width: 220px;
    height: auto;
}

.site-footer .footer-address {
    font-size: 16px;
    color: #373f42;
    margin-bottom: 15px;
}

.site-footer .footer-links {
    margin-bottom: 15px;
}

.site-footer .footer-links a {
    color: #00674f;
    text-decoration: none;
    font-weight: 800;
    margin: 0 10px;
    font-size: 15px;
}

.site-footer .footer-links a:hover {
    text-decoration: underline;
}

.site-footer .footer-copyright {
    font-size: 12px;
    color: #36454F;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .site-footer .footer-links {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
    .site-footer .footer-logo img {
        max-width: 180px;
    }
}

/* =========================================================
   5. LAYOUT-FIX HAUPTCONTAINER
   ========================================================= */
#main-container {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    z-index: auto !important;
}

#main-container > .site-content,
#main-container > .ct-main,
#main-container > main {
    position: relative !important;
    z-index: 1;
    overflow: visible !important;
}

/* =========================================================
   6. BLOG-UEBERSICHT – ELEMENTOR POSTS
   ========================================================= */
.elementor-post {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 22px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.elementor-post:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.elementor-post__thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 15px;
}

.elementor-post__meta-data {
    font-size: 14px;
    color: #666666;
    margin-bottom: 10px;
}

.elementor-post [class*="ct-term"],
[class*="ct-term"] {
    background: #e6f4f0;
    color: var(--cd-color-primary);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-right: 6px;
    margin-bottom: 6px;
    display: inline-block;
}

.elementor-post [class*="ct-term"]:hover,
[class*="ct-term"]:hover {
    background: #cce9e2;
    color: #004d3a;
}

.elementor-post__excerpt p {
    line-height: 1.6;
    color: var(--cd-color-text);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .elementor-post {
        padding: 18px;
    }
}

/* =========================================================
   7. FAQ-BLOCK
   ========================================================= */
.faq {
  padding: 2.5rem 1rem;
  background-color: #ffffff;
  font-family: var(--cd-font-primary);
  box-sizing: border-box;
}

.faq-inner {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid #dddddd;
  border-radius: 6px;
  background-color: #f5f6f7;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.faq-question {
  padding: 0.9rem 1.3rem;
  cursor: pointer;
  font-family: var(--cd-font-primary) !important;
  font-weight: 700;
  font-size: 18px;
  color: #373F42 !important;
  position: relative;
  background: transparent;
}

.faq-question::after {
  content: "∨";
  position: absolute;
  right: 1.3rem;
  font-size: 1.1rem;
  color: #373F42;
  transition: transform 0.2s ease;
}

.faq-item.active .faq-question::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.3rem 1rem 1.3rem;
  display: none;
  color: var(--cd-color-text);
  line-height: 1.6;
}

.faq-answer p {
  font-family: var(--cd-font-primary) !important;
  font-weight: 400;
  font-size: 18px;
  color: #373F42 !important;
  line-height: 1.6;
}

/* =========================================================
   8. CTA-BLOCK
   ========================================================= */
.cd-cta {
  padding: 1.5rem 1rem;
  background-color: #b2d4b2;
  font-family: var(--cd-font-primary) !important;
  border-radius: 10px;
  box-sizing: border-box;
}

.cd-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.cd-cta-title {
  font-family: var(--cd-font-primary) !important;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 30px);
  color: #00674F !important;
  margin-bottom: 1rem;
}

.cd-cta-text {
  font-family: var(--cd-font-primary) !important;
  font-weight: 400;
  font-size: 18px;
  color: #373F42 !important;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.cd-cta-button {
  display: inline-block;
  background-color: #00674F;
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1.2rem;
  border-radius: 5px;
  font-weight: 700;
  font-family: var(--cd-font-primary) !important;
  font-size: 18px;
  transition: background-color 0.2s ease;
}

.cd-cta-button:hover {
  background-color: #004d3a;
  color: #ffffff;
}

@media (max-width: 767px) {
  .cd-cta-title {
    font-size: clamp(20px, 6vw, 28px);
  }
  .cd-cta-text {
    font-size: 16px;
  }
  .cd-cta-button {
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 0.6rem 1rem;
  }
}

/* =========================================================
   9. HEADINGS
   ========================================================= */
.single-post .entry-title,
.single-post h1,
h1 {
    font-family: var(--cd-font-primary) !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 700 !important;
    color: #00674F !important;
    line-height: 1.2 !important;
}

h2 {
    font-family: var(--cd-font-primary) !important;
    font-size: clamp(26px, 3vw, 36px) !important;
    font-weight: 700;
    color: #00674F !important;
}

h3 {
    font-family: var(--cd-font-primary) !important;
    font-size: clamp(20px, 2.2vw, 26px) !important;
    font-weight: 700;
    color: #00674F !important;
}

h4 {
    font-family: var(--cd-font-primary) !important;
    font-size: clamp(17px, 1.8vw, 21px) !important;
    font-weight: 400;
    color: #373F42 !important;
}
/* =========================================================
   10. SINGLE POST THUMBNAIL
   ========================================================= */
.single-post-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 20px;
}

/* =========================================================
   11. RESPONSIVE MOBILE ADJUSTMENTS
   ========================================================= */
@media (max-width: 767px) {
    .single-post .entry-title {
        font-size: clamp(24px, 6vw, 32px);
    }
	.elementor-widget-heading h1.elementor-heading-title.elementor-size-default {
        font-size: 32px !important;
    }
    h2 {
        font-size: clamp(20px, 5vw, 28px);
    }
    h3 {
        font-size: clamp(18px, 4vw, 24px);
    }
    p, li {
        font-size: 16px;
    }
	.elementor-widget-text-editor p,
    .elementor-widget-text-editor li {
        font-size: 16px !important;
    }
}

/* =========================================================
   12. RESPONSIVE BILDER & ELEMENTE
   ========================================================= */
img, .elementor-widget img, .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

iframe, video {
    max-width: 100%;
    height: auto;
}

.elementor-section,
.elementor-column,
.wp-block-group,
.wp-block-cover {
    width: 100%;
    box-sizing: border-box;
}

.elementor-widget,
.wp-block-buttons .wp-block-button {
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   HFE Basic Posts – FIXED CARD LAYOUT
   ========================================================= */

/* Die komplette Karte */
.hfe-posts-grid article.hfe-post-card {
    display: grid !important;
    grid-template-columns: 25% 1fr;
    align-items: stretch;
    background: #f5f6f7;
    border-radius: 14px;
    overflow: hidden;
    min-height: 260px;
}

/* Bild-Container */
.hfe-posts-grid article.hfe-post-card .hfe-post-image {
    width: 100%;
    height: 100%;
}

/* Bild selbst */
.hfe-posts-grid article.hfe-post-card .hfe-post-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* WICHTIG: kein Abschneiden */
    background: #ffffff;
    padding: 12px;
    display: block;
}

/* Textbereich */
.hfe-posts-grid article.hfe-post-card .hfe-post-content {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
}

/* Button immer unten */
.hfe-posts-grid article.hfe-post-card .hfe-read-more {
    margin-top: auto;
}

/* Mobile */
@media (max-width: 767px) {
    .hfe-posts-grid article.hfe-post-card {
        grid-template-columns: 1fr;
    }

    .hfe-posts-grid article.hfe-post-card .hfe-post-image {
        height: 200px;
    }
}
/* =========================================================
   13. BLOG ARTIKEL FLIESSTEXT
   ========================================================= */
.single article .entry-content p,
.single article .entry-content li {
    font-weight: 400 !important;
}

/* =========================================================
   14. TABELLEN IN BLOG ARTIKELN
   ========================================================= */
.single article .entry-content td,
.single article .entry-content th {
    font-family: var(--cd-font-primary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--cd-color-text) !important;
    padding: 10px 14px;
    border: 1px solid #dddddd;
    line-height: 1.5;
}

.single article .entry-content th {
    font-weight: 700 !important;
    background-color: #f5f6f7;
}

.single article .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

/* =========================================================
   15. GUTENBERG PARAGRAPH ABSTAND
   ========================================================= */
.single article .entry-content p {
    margin-bottom: 1.5rem;
}