/*
Theme Name:   coindiff Kadence Child
Theme URI:    https://coindiff.de
Description:  Child theme für coindiff.de – basierend auf Kadence Theme
Author:       coindiff UG
Author URI:   https://coindiff.de
Template:     kadence
Version:      1.2.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  coindiff-kadence-child
*/

/* ============================================================
   DESIGN TOKENS – coindiff Farbpalette & Typografie
   ============================================================ */

:root {
    /* Farben */
    --cd-color-primary:    #1C2B3A;   /* Tiefes Schieferblau */
    --cd-color-secondary:  #6B7280;   /* Warmes Mittelgrau */
    --cd-color-accent:     #B5924C;   /* Gedämpftes Gold / Messing */
    --cd-color-background: #F8F7F4;   /* Gebrochenes Weiß / Leinen */
    --cd-color-text:       #1F2937;   /* Dunkelgrau */
    --cd-color-white:      #FFFFFF;

    /* Abstufungen Primärfarbe */
    --cd-color-primary-light:  #2A3F56;
    --cd-color-primary-dark:   #111C26;

    /* Abstufungen Akzent */
    --cd-color-accent-light:   #CBA96A;
    --cd-color-accent-dark:    #8A6C33;

    /* Typografie */
    --cd-font-headline: 'Playfair Display', Georgia, serif;
    --cd-font-body:     'Inter', system-ui, sans-serif;

    /* Abstände */
    --cd-spacing-xs:   0.5rem;
    --cd-spacing-sm:   1rem;
    --cd-spacing-md:   2rem;
    --cd-spacing-lg:   4rem;
    --cd-spacing-xl:   8rem;

    /* Border-Radius */
    --cd-radius-sm: 4px;
    --cd-radius-md: 8px;
    --cd-radius-lg: 16px;
}

/* ============================================================
   LOKALE FONTS (DSGVO-konform – kein Google-Server-Aufruf)
   Variable Fonts: eine Datei deckt alle Gewichte ab (400–700)
   ============================================================ */

/* Playfair Display – Variable Font (400–700) */
@font-face {
    font-family: 'Playfair Display';
    font-style:  normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/playfair-display-v40-latin-variable.woff2') format('woff2');
}

/* Inter – Variable Font (400–700) */
@font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-v20-latin-variable.woff2') format('woff2');
}

/* ============================================================
   BASIS-OVERRIDES
   ============================================================ */

body {
    font-family: var(--cd-font-body);
    color:       var(--cd-color-text);
    background:  var(--cd-color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cd-font-headline);
    color:       var(--cd-color-primary);
    line-height: 1.2;
}

a {
    color: var(--cd-color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--cd-color-accent-dark);
}

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

/* Primär-Button: Gold */
.cd-btn-primary {
    background-color: var(--cd-color-accent);
    color:            var(--cd-color-white);
    border-radius:    var(--cd-radius-sm);
    padding:          0.75rem 1.75rem;
    font-family:      var(--cd-font-body);
    font-weight:      500;
    letter-spacing:   0.02em;
    transition:       background-color 0.2s ease;
    border:           none;
    cursor:           pointer;
}

.cd-btn-primary:hover {
    background-color: var(--cd-color-accent-dark);
    color: var(--cd-color-white);
}

/* Sekundär-Button: Schieferblau */
.wp-block-button__link {
    background-color: var(--cd-color-accent);
    color:            var(--cd-color-white);
    border-radius:    var(--cd-radius-sm);
    padding:          0.75rem 1.75rem;
    font-family:      var(--cd-font-body);
    font-weight:      500;
    letter-spacing:   0.02em;
    transition:       background-color 0.2s ease;
    border:           none;
    cursor:           pointer;
}

.wp-block-button__link:hover {
    background-color: var(--cd-color-accent-dark);
    color: var(--cd-color-white);
}

.cd-btn-accent {
    background-color: var(--cd-color-accent);
    color:            var(--cd-color-white);
    border-radius:    var(--cd-radius-sm);
    padding:          0.75rem 1.75rem;
    font-family:      var(--cd-font-body);
    font-weight:      500;
    letter-spacing:   0.02em;
    transition:       background-color 0.2s ease;
}

.cd-btn-accent:hover {
    background-color: var(--cd-color-accent-dark);
    color: var(--cd-color-white);
}

.cd-btn-outline {
    background-color: transparent;
    color:            var(--cd-color-primary);
    border:           2px solid var(--cd-color-primary);
    border-radius:    var(--cd-radius-sm);
    padding:          0.75rem 1.75rem;
    font-family:      var(--cd-font-body);
    font-weight:      500;
    letter-spacing:   0.02em;
    transition:       all 0.2s ease;
}

.cd-btn-outline:hover {
    background-color: var(--cd-color-primary);
    color:            var(--cd-color-white);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.cd-testimonial {
    background:     var(--cd-color-white);
    border-radius:  var(--cd-radius-md);
    padding:        2rem;
    box-shadow:     0 4px 20px rgba(28, 43, 58, 0.08);
    display:        flex;
    flex-direction: column;
    position:       relative;
}

/* Dekoratives Anführungszeichen */
.cd-testimonial::before {
    content:     '\201C';
    font-family: var(--cd-font-headline);
    font-size:   3.5rem;
    line-height: 1;
    color:       var(--cd-color-accent);
    display:     block;
    margin-bottom: 0.25rem;
    opacity:     0.85;
}

.cd-testimonial__quote {
    font-family:   var(--cd-font-body);
    font-style:    italic;
    font-size:     1rem;
    line-height:   1.75;
    color:         var(--cd-color-primary);
    flex-grow:     1;
    margin-bottom: 1.5rem;
}

/* Footer: Avatar + Meta */
.cd-testimonial__footer {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding-top: 1rem;
    border-top:  1px solid rgba(28, 43, 58, 0.09);
}

.cd-testimonial__avatar {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--cd-color-primary);
    color:           var(--cd-color-accent);
    font-family:     var(--cd-font-headline);
    font-weight:     700;
    font-size:       0.75rem;
    letter-spacing:  0.05em;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.cd-testimonial__meta {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
}

.cd-testimonial__name {
    font-weight:  600;
    font-size:    0.875rem;
    color:        var(--cd-color-primary);
    line-height:  1.3;
}

.cd-testimonial__role {
    font-size:       0.75rem;
    color:           var(--cd-color-secondary);
    letter-spacing:  0.03em;
}

/* Rückwärtskompatibilität: alter __author-Selektor */
.cd-testimonial__author {
    font-size:   0.875rem;
    color:       var(--cd-color-secondary);
    font-weight: 500;
}

/* ============================================================
   HERO-SEKTION
   ============================================================ */

.cd-hero {
    background-color: var(--cd-color-primary);
    color:            var(--cd-color-white);
    padding:          var(--cd-spacing-xl) var(--cd-spacing-md);
    text-align:       center;
}

.cd-hero h1 {
    font-family: var(--cd-font-headline);
    font-size:   clamp(2.5rem, 6vw, 4.5rem);
    color:       var(--cd-color-white);
    font-weight: 700;
    margin-bottom: var(--cd-spacing-md);
}

.cd-hero__subtitle {
    font-size:     1.25rem;
    color:         rgba(255, 255, 255, 0.8);
    margin-bottom: var(--cd-spacing-lg);
    max-width:     640px;
    margin-left:   auto;
    margin-right:  auto;
}

.cd-hero__cta-group {
    display:         flex;
    gap:             var(--cd-spacing-sm);
    justify-content: center;
    flex-wrap:       wrap;
}

/* ============================================================
   PRODUKT-CARDS
   ============================================================ */

.cd-product-card {
    background:    var(--cd-color-white);
    border-radius: var(--cd-radius-md);
    padding:       var(--cd-spacing-md);
    box-shadow:    0 2px 16px rgba(28, 43, 58, 0.06);
    border-top:    3px solid var(--cd-color-accent);
    transition:    transform 0.2s ease, box-shadow 0.2s ease;
}

.cd-product-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 8px 32px rgba(28, 43, 58, 0.12);
}

.cd-product-card__label {
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--cd-color-secondary);
    margin-bottom:  var(--cd-spacing-xs);
}

.cd-product-card__title {
    font-family:   var(--cd-font-headline);
    font-size:     1.5rem;
    color:         var(--cd-color-primary);
    margin-bottom: var(--cd-spacing-xs);
}

/* ============================================================
   ETF-ARGUMENTATION (Startseite Sektion 2)
   ============================================================ */

.cd-etf-section {
    background:  var(--cd-color-white);
    padding:     var(--cd-spacing-lg) var(--cd-spacing-md);
}

.cd-etf-section__intro {
    max-width:   720px;
    margin:      0 auto var(--cd-spacing-lg);
    text-align:  center;
}

.cd-argument {
    display:       flex;
    gap:           var(--cd-spacing-sm);
    align-items:   flex-start;
    margin-bottom: var(--cd-spacing-md);
}

.cd-argument__icon {
    flex-shrink:   0;
    width:         40px;
    height:        40px;
    border-radius: 50%;
    background:    var(--cd-color-accent);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--cd-color-white);
}

.cd-argument__text h3 {
    font-family:   var(--cd-font-headline);
    font-size:     1.125rem;
    margin-bottom: 0.25rem;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.cd-section {
    padding: var(--cd-spacing-lg) var(--cd-spacing-md);
}

.cd-section--alt {
    background: var(--cd-color-background);
}

.cd-section--dark {
    background: var(--cd-color-primary);
    color:      var(--cd-color-white);
}

.cd-section--dark h1,
.cd-section--dark h2,
.cd-section--dark h3 {
    color: var(--cd-color-white);
}

.cd-container {
    max-width:    1200px;
    margin-left:  auto;
    margin-right: auto;
    padding-left: var(--cd-spacing-sm);
    padding-right: var(--cd-spacing-sm);
}

.cd-text-accent {
    color: var(--cd-color-accent);
}

.cd-label {
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--cd-color-secondary);
}

/* ============================================================
   KADENCE HEADER – coindiff Design-Overrides
   ============================================================ */

/* Seitentitel-Text im Header ausblenden (Logo reicht) */
.site-title,
.site-title a,
.header-site-branding .site-title {
    display: none !important;
}

/* Page-Title-Hero auf Startseite ausblenden */
.home .entry-hero,
.home .page-hero-section,
.home .kadence-page-header,
.home .entry-header.page-title {
    display: none !important;
}

/* Header Hintergrund: Schieferblau – alle Kadence-Schichten */
#masthead,
.site-header,
.site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap,
.site-header-row-container,
.site-header-row-container-inner,
.site-main-header-wrap,
.site-main-header-wrap .site-header-row-container-inner,
.kadence-sticky-header {
    background-color: #1C2B3A !important;
    background: #1C2B3A !important;
    border-bottom: none !important;
}

/* Navigation Links: Weiß */
#masthead .main-navigation a,
.header-navigation .nav-primary a,
.main-navigation ul li a,
.primary-menu-container ul li a,
.main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: #FFFFFF !important;
    font-family: var(--cd-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

#masthead .main-navigation a:hover,
.header-navigation .nav-primary a:hover,
.main-navigation ul li a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: #B5924C !important;
}

/* Aktive Seite in Navigation hervorheben */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: #B5924C !important;
}

/* Logo-Größe im Header */
.custom-logo {
    max-height: 48px;
    width: auto;
}

/* Hamburger-Menü: Weiß auf Mobile */
.mobile-toggle-open-container .menu-toggle-open svg,
.mobile-toggle-open-container .menu-toggle-open svg path {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
    color: #FFFFFF !important;
}

/* ============================================================
   KADENCE FOOTER – coindiff Design
   ============================================================ */

.site-footer,
#colophon {
    background-color: var(--cd-color-primary) !important;
    color: rgba(255,255,255,0.7) !important;
    border-top: 1px solid rgba(181, 146, 76, 0.3);
}

.site-footer a,
#colophon a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover,
#colophon a:hover {
    color: var(--cd-color-accent) !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */

/* Tablet: max 1024px */
@media (max-width: 1024px) {
    .cd-hero h1 {
        font-size: clamp(2rem, 5vw, 3.5rem);
    }

    .cd-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Mobile: max 768px */
@media (max-width: 768px) {

    /* Hero: Buttons untereinander */
    .cd-hero__cta-group,
    .wp-block-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .wp-block-button {
        width: 100%;
    }

    .wp-block-button__link {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        min-height: 48px; /* Touch-Target min. 44px */
        padding: 0.875rem 1.5rem !important;
    }

    /* Spalten: auf Mobile einspaltig */
    .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Abstände reduzieren */
    .cd-section,
    .wp-block-group {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Überschriften */
    h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }

    /* Testimonials: volle Breite */
    .cd-testimonial {
        margin-bottom: 1.5rem;
    }

    /* Produkt-Cards: volle Breite */
    .cd-product-card {
        margin-bottom: 1.5rem;
    }

    /* Navigation Dropdown: besser lesbar */
    .main-navigation ul ul {
        background-color: var(--cd-color-primary-dark);
    }
}

/* Sehr kleine Screens: max 480px */
@media (max-width: 480px) {
    .cd-hero {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .custom-logo {
        max-height: 38px;
    }

    /* Schriftgrößen nochmals anpassen */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.35rem !important; }

    /* Abstände weiter reduzieren */
    .wp-block-group[style*="padding"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ============================================================
   KADENCE GLOBALE FARB- UND TYPO-OVERRIDES
   ============================================================ */

/* Globale Linkfarbe */
a { color: var(--cd-color-accent); }
a:hover { color: var(--cd-color-accent-dark); }

/* WordPress-Block-Buttons: Standard = Gold (Primär-CTA) – direkte HEX-Werte */
.wp-block-button__link,
.wp-element-button,
a.wp-block-button__link {
    background-color: #B5924C !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 500 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease !important;
    border: none !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
a.wp-block-button__link:hover {
    background-color: #8A6C33 !important;
    color: #FFFFFF !important;
}

/* Sekundär-Button: Outline */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline a.wp-block-button__link {
    background-color: transparent !important;
    color: #1C2B3A !important;
    border: 2px solid #1C2B3A !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #1C2B3A !important;
    color: #FFFFFF !important;
}

/* Outline auf dunklem Hintergrund: weiße Border */
.cd-section--dark .wp-block-button.is-style-outline .wp-block-button__link,
.cd-hero .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-group.cd-hero .wp-block-button.is-style-outline .wp-block-button__link {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    background-color: transparent !important;
}

.cd-section--dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cd-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #FFFFFF !important;
    color: #1C2B3A !important;
}

/* Kadence-Button-Klassen */
.kb-button.kb-btn-global-outline {
    border-color: var(--cd-color-primary) !important;
    color: var(--cd-color-primary) !important;
}

.kb-button.kb-btn-global-outline:hover {
    background-color: var(--cd-color-primary) !important;
    color: var(--cd-color-white) !important;
}

/* Kadence eigene Buttons normalisieren */
.kb-button {
    min-height: 44px;
}

/* Fließtext */
p {
    font-family: var(--cd-font-body);
    line-height: 1.7;
    color: var(--cd-color-text);
}

/* Seitenbreite */
.entry-content,
.wp-site-blocks {
    max-width: 100%;
}

/* ============================================================
   TESTIMONIAL SCROLL-SLIDER
   ============================================================ */

/* Äußerer Wrapper: kein overflow:hidden (würde Scroll + Arrows brechen) */
.cd-slider-wrapper {
    position: relative;
}

/* Zeile mit Arrows + Track */
.cd-slider-track-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Pfeil-Buttons */
.cd-slider-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cd-color-white);
    border: 2px solid var(--cd-color-accent);
    color: var(--cd-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(28,43,58,0.10);
}

.cd-slider-arrow:hover {
    background: var(--cd-color-accent);
    color: var(--cd-color-white);
}

/* Scroll-Track */
.cd-testimonial-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 0.5rem;
    flex: 1 1 0;
    min-width: 0;           /* verhindert flex-overflow */
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.cd-testimonial-slider::-webkit-scrollbar {
    display: none;
}

.cd-testimonial-slider:active {
    cursor: grabbing;
}

/* Einzelne Cards: feste Breite, kein Schrumpfen */
.cd-testimonial-slider .cd-testimonial {
    flex: 0 0 360px;
    width: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
}

/* Navigationspunkte */
.cd-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cd-slider-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cd-color-secondary);
    opacity: 0.4;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.cd-slider-dots__dot.is-active {
    opacity: 1;
    background: var(--cd-color-accent);
}

@media (max-width: 768px) {
    .cd-slider-arrow {
        display: none;
    }
    .cd-testimonial-slider .cd-testimonial {
        flex: 0 0 85vw;
        width: 85vw;
    }
}

/* ============================================================
   CALENDLY INLINE WIDGET
   ============================================================ */

.cd-calendly-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--cd-radius-md);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(28, 43, 58, 0.10);
}

.cd-calendly-wrapper .calendly-inline-widget {
    border-radius: var(--cd-radius-md);
}

@media (max-width: 768px) {
    .cd-calendly-wrapper .calendly-inline-widget {
        height: 900px !important; /* Mehr Platz auf Mobile (Monatsansicht + Zeitauswahl) */
    }
}

/* Datenschutz-Hinweis unter dem Widget */
.cd-calendly-wrapper + * {
    margin-top: 1rem;
}

/* ============================================================
   GLEICHHOHE KARTEN – Flexbox-Stretch für Buttons am Kartenende
   ============================================================ */

/* Spalten-Karten (Workshop-Karten, Privatpersonen) als Flex-Column
   Nur innerhalb von cd-section/cd-section--alt Sektionen, nicht im Kontaktformular */
.cd-section .wp-block-columns .wp-block-column > .wp-block-group,
.cd-section--alt .wp-block-columns .wp-block-column > .wp-block-group,
.cd-section .wp-block-columns .wp-block-column,
.cd-section--alt .wp-block-columns .wp-block-column {
    display: flex;
    flex-direction: column;
}

/* Buttons innerhalb von Karten ans Ende drücken */
.cd-section .wp-block-columns .wp-block-column .wp-block-buttons,
.cd-section--alt .wp-block-columns .wp-block-column .wp-block-buttons {
    margin-top: auto !important;
}

/* ============================================================
   BUTTONS ZENTRIEREN – Produktseiten Hero + Sektion
   ============================================================ */

/* Für Unternehmen + Für Privatpersonen: alle Buttons-Blöcke zentrieren */
.cd-hero .wp-block-buttons,
.cd-section .wp-block-buttons,
.cd-section--alt .wp-block-buttons {
    justify-content: center !important;
}

/* Ausnahme: Buttons direkt in Karten bleiben linksbündig */
.cd-section .wp-block-columns .wp-block-column .wp-block-buttons,
.cd-section--alt .wp-block-columns .wp-block-column .wp-block-buttons {
    justify-content: flex-start !important;
}