/*
 * C4mulo5 – Visuelle Sections CSS
 * Vorher/Nachher, Tabs, Flip, Bento, Split, H-Timeline,
 * Kreis-Stats, Einzelzitat, Testimonial-Karussell
 * Autor: Nico Eberhardt
 */

/* ═══ FLIP-KARTEN ════════════════════════════════════════ */
/* ::before/::after Bootstrap-Clearfix-Fix */
.c4m5-flip-grid::before,
.c4m5-flip-grid::after { display:none!important; content:none!important; }

.c4m5-flip-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.c4m5-flip-card { height: 260px; perspective: 1000px; cursor: pointer; }
.c4m5-flip-inner {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d; transition: transform .5s ease;
    border-radius: 10px;
}
.c4m5-flip-card:hover .c4m5-flip-inner,
.c4m5-flip-card.c4m5-flipped .c4m5-flip-inner { transform: rotateY(180deg); }
.c4m5-flip-front,
.c4m5-flip-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: 10px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 24px;
    text-align: center; overflow: hidden;
}
.c4m5-flip-front { color: #fff; }
.c4m5-flip-icon  { display: block; font-size: 2.8rem; margin-bottom: 12px; }
.c4m5-flip-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 8px; word-break: break-word; }
.c4m5-flip-hint  { font-size: .72rem; opacity: .7; color: #fff; }
.c4m5-flip-back  {
    background: #fff; color: #1d2327;
    transform: rotateY(180deg);
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.c4m5-flip-back-title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.c4m5-flip-text  { font-size: .84rem; color: #50575e; line-height: 1.6; margin: 0 0 16px; }
.c4m5-flip-link  { font-size: .82rem; padding: 6px 16px; }

/* ── Responsive: !important nötig weil Customizer inline-Styles setzt ── */
@media (max-width: 1024px) {
    .c4m5-flip-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; }
}
@media (max-width: 768px) {
    .c4m5-flip-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
    .c4m5-flip-card { height: 240px; }
    .c4m5-flip-front,
    .c4m5-flip-back { padding: 16px; }
    .c4m5-flip-icon  { font-size: 2.2rem; margin-bottom: 8px; }
    .c4m5-flip-title { font-size: 1rem; }
}
@media (max-width: 480px) {
    .c4m5-flip-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .c4m5-flip-card { height: 200px; }
    .c4m5-flip-icon  { font-size: 2rem; margin-bottom: 6px; }
    .c4m5-flip-title { font-size: .95rem; }
    .c4m5-flip-text  { font-size: .8rem; }
    .c4m5-flip-back  { padding: 14px; }
}


/* ═══ BENTO-GRID ════════════════════════════════════════ */
.c4m5-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:    auto auto;
    gap: 16px;
}
.c4m5-bento-item {
    border-radius: 16px; padding: 28px;
    display: flex; align-items: center;
}
.c4m5-bento-content { width: 100%; }
.c4m5-bento-large   { grid-column: 1 / 3; grid-row: 1 / 3; background: #1d2327; color: #fff; }
.c4m5-bento-stat    { background: #f6f7f7; }
.c4m5-bento-dark    { background: #1d2327; color: #fff; }
.c4m5-bento-wide    { grid-column: 1 / 3; background: #fff; border: 1px solid #e0e0e0; }
.c4m5-bento-accent  { background: #c8a84b; }
.c4m5-bento-accent-light { background: #fef9ec; border: 2px solid #c8a84b; }
.c4m5-bento-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .7; display: block; margin-bottom: 8px; }
.c4m5-bento-headline{ font-size: 2.5rem; font-weight: 800; line-height: 1.1; margin: 0 0 12px; }
.c4m5-bento-stat-num{ font-size: 3rem; font-weight: 800; display: block; line-height: 1; }
.c4m5-bento-stat-label { font-size: .85rem; opacity: .7; display: block; }
.c4m5-bento-icon    { font-size: 2rem; margin-bottom: 8px; display: block; }
.c4m5-bento-large p,.c4m5-bento-dark p { color: rgba(255,255,255,.75); margin: 0; font-size: .9rem; }
@media (max-width: 768px) {
    .c4m5-bento-grid { grid-template-columns: 1fr 1fr; }
    .c4m5-bento-large,.c4m5-bento-wide { grid-column: 1 / -1; grid-row: auto; }
    .c4m5-bento-headline { font-size: 1.8rem; }
}
@media (max-width: 480px) {
    .c4m5-bento-grid { grid-template-columns: 1fr; }
}


/* ═══ SPLIT-SCREEN ══════════════════════════════════════ */
.c4mulo5-split-screen {
    display: flex; min-height: 500px; padding: 0 !important;
}
.c4m5-split-left {
    flex: 1; display: flex; align-items: center;
    padding: 60px 48px; background: #fff;
}
.c4m5-split-right {
    flex: 1; min-height: 400px;
    background: center/cover no-repeat;
}
.c4m5-split-inner  { max-width: 480px; }
.c4m5-split-eyebrow{ display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #c8a84b; margin-bottom: 12px; }
.c4m5-split-title  { font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin: 0 0 16px; }
.c4m5-split-text   { color: #50575e; line-height: 1.7; margin: 0 0 24px; }
@media (max-width: 768px) {
    .c4mulo5-split-screen { flex-direction: column; }
    .c4m5-split-right     { min-height: 300px; }
    .c4m5-split-left      { padding: 40px 24px; }
}


/* ═══ HORIZONTALE TIMELINE ══════════════════════════════ */
.c4m5-ht-scroll-wrap {
    position: relative; overflow-x: auto; padding-bottom: 16px;
    scrollbar-width: thin; scrollbar-color: #c8a84b #f0f0f0;
}
.c4m5-ht-line {
    position: absolute; top: 28px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, #c8a84b 5%, #c8a84b 95%, transparent 100%);
}
.c4m5-ht-track {
    display: flex; gap: 0; padding-top: 56px;
}
.c4m5-ht-item {
    min-width: 140px; width: 200px; padding: 0 16px; position: relative;
    text-align: center; flex-shrink: 0;
}
.c4m5-ht-dot {
    position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    background: #c8a84b; border: 3px solid #fff; box-shadow: 0 0 0 2px #c8a84b;
    pointer-events: none;  /* Klick durch den Dot hindurch auf den Text darunter */
}
.c4m5-ht-year  { display: block; font-size: 1.3rem; font-weight: 800; color: #c8a84b; margin-bottom: 6px; }
.c4m5-ht-title { font-size: .95rem; font-weight: 700; margin: 0 0 6px; }
.c4m5-ht-desc  { font-size: .8rem; color: #70757a; line-height: 1.5; margin: 0; }


/* ═══ KREIS-STATISTIKEN ═════════════════════════════════ */
/* ::before/::after Bootstrap-Clearfix-Fix */
.c4m5-cstat-grid::before,
.c4m5-cstat-grid::after { display:none!important; content:none!important; }

.c4m5-cstat-grid {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center;
}
.c4m5-cstat     { position: relative; display: flex; flex-direction: column; align-items: center; }
.c4m5-cstat-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.c4m5-cstat-svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.c4m5-cstat-bg  {
    fill: none; stroke: #f0f0f0; stroke-width: 10;
}
.c4m5-cstat-ring {
    fill: none; stroke-width: 10; stroke-linecap: round;
    transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.c4m5-cstat-value {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    font-size:       1.4rem;
    font-weight:     800;
    color:           #1d2327;
    pointer-events:  none;
    text-align:      center;
    white-space:     nowrap;
    line-height:     1;
    z-index:         2;
}
.c4m5-cstat-num   { font-variant-numeric: tabular-nums; }
.c4m5-cstat-label { margin-top: 10px; font-size: .85rem; color: #50575e; font-weight: 600; }
@media (max-width: 768px) { .c4m5-cstat-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 400px) { .c4m5-cstat-grid { grid-template-columns: 1fr !important; } }


/* ═══ EINZELZITAT ═══════════════════════════════════════ */
.c4m5-sq-wrap   { text-align: center; padding: 20px 0; }
.c4m5-sq-mark   { font-size: 6rem; line-height: .6; color: #c8a84b; display: block; font-family: Georgia, serif; margin-bottom: -20px; }
.c4m5-sq-text   {
    font-size: 1.6rem; font-style: italic; line-height: 1.5;
    color: #1d2327; font-weight: 400; margin: 0 0 28px;
    font-family: 'Playfair Display', Georgia, serif;
}
.c4m5-sq-source { display: flex; align-items: center; justify-content: center; gap: 14px; }
.c4m5-sq-photo  { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #c8a84b; }
.c4m5-sq-meta   { text-align: left; }
.c4m5-sq-name   { display: block; font-weight: 700; font-size: .95rem; }
.c4m5-sq-role   { display: block; font-size: .8rem; color: #70757a; }
@media (max-width: 600px) { .c4m5-sq-text { font-size: 1.2rem; } }


/* ═══ TESTIMONIAL KARUSSELL ═════════════════════════════ */
.c4mulo5-testimonial-carousel { --tc-accent: #c8a84b; }
.c4m5-tc-wrap      { position: relative; min-height: 180px; }
.c4m5-tc-slide     {
    display:    none;
    text-align: center;
    padding:    10px 0;
    animation:  c4m5TcIn .4s ease;
}
.c4m5-tc-slide.c4m5-tc-active { display: block; }

/* Customizer: alle Slides sichtbar mit Trennlinie */
.c4m5-customizer-preview .c4m5-tc-slide,
.is-customize-preview    .c4m5-tc-slide,
.customize-preview       .c4m5-tc-slide {
    display:    block !important;
    border-top: 1px dashed #e0e0e0;
    padding:    16px 0;
}
.c4m5-customizer-preview .c4m5-tc-slide:first-child,
.is-customize-preview    .c4m5-tc-slide:first-child,
.customize-preview       .c4m5-tc-slide:first-child { border-top: none; }
@keyframes c4m5TcIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.c4m5-tc-stars     { font-size: 1.2rem; color: var(--tc-accent); letter-spacing: 3px; margin-bottom: 16px; }
.c4m5-tc-text      {
    font-size: 1.15rem; font-style: italic; line-height: 1.7;
    color: #1d2327; margin: 0 0 20px;
    font-family: 'Playfair Display', Georgia, serif;
}
.c4m5-tc-author    { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.c4m5-tc-name      { font-weight: 700; }
.c4m5-tc-author span   { font-size: .8rem; color: #70757a; }
.c4m5-tc-dots      { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.c4m5-tc-dot       {
    width: 10px; height: 10px; border-radius: 50%; border: none;
    background: #e0e0e0; cursor: pointer; transition: background .2s;
    padding: 0;
}
.c4m5-tc-dot.c4m5-tc-dot-active,
.c4m5-tc-dot:hover { background: var(--tc-accent); }

/* ══ TABS (v3) ═══════════════════════════════════════════ */
.c4mulo5-tabs          { --tab-accent: #c8a84b; }

/* ── Tab-Nav (per JS generiert) ─────────────────────── */
.c4m5-tab-nav-wrap {
    display:         flex;
    flex-wrap:       wrap;
    gap:             4px;
    border-bottom:   2px solid #e0e0e0;
    margin-bottom:   0;
}
.c4m5-tab-nav-btn {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 20px;
    border:          none;
    background:      transparent;
    cursor:          pointer;
    font-size:       .9rem;
    font-weight:     600;
    color:           #50575e;
    border-bottom:   3px solid transparent;
    margin-bottom:   -2px;
    transition:      color .2s, border-color .2s;
    white-space:     nowrap;
}
.c4m5-tab-nav-btn:hover,
.c4m5-tab-nav-btn[aria-selected="true"] {
    color:           var(--tab-accent);
    border-bottom-color: var(--tab-accent);
}
.c4m5-tab-nav-icon     { font-size: 1.1rem; }

/* ── Karten-Container ───────────────────────────────── */
.c4m5-tab-cards-wrap   {
    background:    #fff;
    border:        1px solid #e0e0e0;
    border-top:    none;
    border-radius: 0 0 6px 6px;
    min-height:    80px;
}

/* ── Einzelne Karte: im Frontend unsichtbar wenn nicht aktiv ── */
.c4m5-tab-cards        { position: relative; }
.c4m5-tab-card         {
    padding:    28px 32px;
    display:    none;           /* JS zeigt aktive Karte */
    animation:  c4m5TabIn .2s ease;
}
.c4m5-tab-card.c4m5-tab-active { display: block; }

/* Icon + Label innerhalb der Karte (versteckt – nur für Add Item Label) */
.c4m5-tab-card-icon,
.c4m5-tab-card-label   {
    display:  none;           /* nur von JS gelesen */
}

/* ── Im Customizer: alle Karten sichtbar + editierbar ── */
.c4m5-customizer-preview .c4m5-tab-card,
.is-customize-preview    .c4m5-tab-card,
.customize-preview       .c4m5-tab-card {
    display:      block !important;
    border-top:   1px dashed #e0e0e0;
    padding-top:  24px;
    padding-bottom: 24px;
}
.c4m5-customizer-preview .c4m5-tab-card:first-child,
.is-customize-preview    .c4m5-tab-card:first-child,
.customize-preview       .c4m5-tab-card:first-child { border-top: none; }

/* Icon + Label im Customizer als editierbare Spans anzeigen */
.c4m5-customizer-preview .c4m5-tab-card-icon,
.is-customize-preview    .c4m5-tab-card-icon,
.customize-preview       .c4m5-tab-card-icon {
    display:      inline !important;
    font-size:    1.2rem;
    margin-right: 6px;
}
.c4m5-customizer-preview .c4m5-tab-card-label,
.is-customize-preview    .c4m5-tab-card-label,
.customize-preview       .c4m5-tab-card-label {
    display:      inline !important;
    font-size:    .85rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:        var(--tab-accent, #c8a84b);
    margin-bottom: 8px;
}
/* ::before im Customizer nicht nötig – echte Spans sind sichtbar */
.c4m5-customizer-preview .c4m5-tab-card::before,
.is-customize-preview    .c4m5-tab-card::before,
.customize-preview       .c4m5-tab-card::before {
    display: none !important;
}

@media (max-width: 600px) {
    .c4m5-tab-nav-btn  { padding: 10px 12px; font-size: .82rem; }
    .c4m5-tab-card     { padding: 20px 16px; }
}

/* In Customizer: beide Seiten sichtbar, keine Flip-Animation */
.c4m5-customizer-preview .c4m5-flip-inner,
.is-customize-preview    .c4m5-flip-inner,
.customize-preview       .c4m5-flip-inner { transform: none !important; }
.c4m5-customizer-preview .c4m5-flip-front,
.is-customize-preview    .c4m5-flip-front,
.customize-preview       .c4m5-flip-front { position: relative; }
.c4m5-customizer-preview .c4m5-flip-back,
.is-customize-preview    .c4m5-flip-back,
.customize-preview       .c4m5-flip-back {
    position:   relative !important;
    transform:  none !important;
    display:    block !important;
    margin-top: 8px;
    border-top: 2px dashed #e0e0e0;
}
.c4m5-customizer-preview .c4m5-flip-card,
.is-customize-preview    .c4m5-flip-card,
.customize-preview       .c4m5-flip-card { height: auto !important; }
/* Flip-link als echter sichtbarer Button */
.c4m5-flip-link {
    display:         inline-block;
    background:      #c8a84b;
    color:           #fff !important;
    padding:         8px 18px;
    border-radius:   4px;
    text-decoration: none;
    font-weight:     600;
    font-size:       .85rem;
    margin-top:      8px;
    transition:      background .2s;
}
.c4m5-flip-link:hover { background: #b5963f; color: #fff !important; }

/* ═══ BEFORE/AFTER ══════════════════════════════════════ */

/* ── Frontend: Slider-Modus ──────────────────────────── */
.c4m5-ba-container {
    position:     relative;
    overflow:     hidden;
    border-radius: 8px;
    line-height:  0;
    cursor:       col-resize;
    user-select:  none;
    touch-action: none;
}
.c4m5-ba-slot { position: relative; }
/* Labels: direkte Kinder des Containers → nicht von clip-path betroffen */
.c4m5-ba-label {
    position:     absolute;
    top:          12px;
    padding:      4px 14px;
    background:   rgba(0,0,0,.55);
    color:        #fff;
    font-size:    .75rem;
    font-weight:  700;
    letter-spacing:.06em;
    border-radius: 4px;
    z-index:      15;
    pointer-events: none;
    line-height:  1.4;
}
.c4m5-ba-label--before { left: 12px; }
.c4m5-ba-label--after  { right: 12px; }
.c4m5-ba-img {
    display:      block;
    width:        100%;
    height:       auto;
}
/* Nachher-Slot: absolut über Vorher, clip-path zeigt rechte Hälfte */
.c4m5-ba-slot--after {
    position:     absolute;
    inset:        0;
    z-index:      2;
    clip-path:    inset(0 50% 0 0);
    overflow:     hidden;
}
.c4m5-ba-slot--after .c4m5-ba-img {
    width:        100%;
    height:       100%;
    object-fit:   cover;
}
/* Handle */
.c4m5-ba-handle {
    position:     absolute;
    top:          0;
    bottom:       0;
    left:         50%;
    width:        4px;
    z-index:      10;
    transform:    translateX(-50%);
    display:      flex;
    flex-direction: column;
    align-items:  center;
}
.c4m5-ba-handle-line {
    flex:         1;
    width:        3px;
    background:   #fff;
    box-shadow:   0 0 6px rgba(0,0,0,.4);
}
.c4m5-ba-handle-btn {
    width:        36px;
    height:       36px;
    background:   #fff;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-size:    16px;
    color:        #333;
    box-shadow:   0 2px 8px rgba(0,0,0,.3);
    cursor:       col-resize;
    flex-shrink:  0;
}

/* ── Customizer: Bilder untereinander, editierbar ────── */
.c4m5-customizer-preview .c4m5-ba-container,
.customize-preview       .c4m5-ba-container {
    cursor: default;
}
.c4m5-customizer-preview .c4m5-ba-slot--after,
.customize-preview       .c4m5-ba-slot--after {
    position:   relative;
    clip-path:  none;
    margin-top: 12px;
}
.c4m5-customizer-preview .c4m5-ba-handle,
.customize-preview       .c4m5-ba-handle {
    display: none;
}
.c4m5-customizer-preview .c4m5-ba-label,
.customize-preview       .c4m5-ba-label {
    position:   static;
    display:    inline-block;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Download-Button immer lesbar */
.c4mulo5-dl-btn {
    display:         inline-block !important;
    background:      #c8a84b !important;
    color:           #fff !important;
    border:          none !important;
    padding:         8px 16px;
    border-radius:   4px;
    font-weight:     600;
    font-size:       .85rem;
    text-decoration: none;
    transition:      background .2s;
    white-space:     nowrap;
}
.c4mulo5-dl-btn:hover { background: #b5963f !important; color: #fff !important; }

/* ═══ EINZELZITAT ═══════════════════════════════════════ */
.c4m5-sq-quote-col { max-width: 760px; margin: 0 auto; }
.c4m5-sq-mark {
    display: block; font-size: 3rem; line-height: 1; color: #c8a84b;
    margin-bottom: 8px;
}
.c4m5-sq-text {
    font-size: 1.25rem; font-style: italic; line-height: 1.8;
    color: #1d2327; border: none; margin: 0 0 24px; padding: 0;
    font-family: 'Playfair Display', Georgia, serif;
}
.c4m5-sq-sources {
    display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
    padding-top: 16px;
}
.c4m5-sq-source {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
}
.c4m5-sq-photo-wrap { margin-bottom: 4px; }
.c4m5-sq-photo {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 3px solid #c8a84b;
}
.c4m5-sq-role { font-size: .8rem; color: #70757a; }

/* ═══ MOBILE RESPONSIVE ════════════════════════════════ */

/* ── Before/After: Touch-freundlich ────────────────────── */
@media (max-width: 768px) {
    .c4m5-ba-handle-btn { width: 44px; height: 44px; font-size: 20px; }
    .c4m5-ba-label { font-size: .65rem; padding: 3px 10px; }
}

/* ── Testimonial Karussell: kompakter auf Mobil ────────── */
@media (max-width: 600px) {
    .c4m5-tc-text  { font-size: 1rem; line-height: 1.6; }
    .c4m5-tc-stars { font-size: 1rem; letter-spacing: 2px; }
}

/* ── Tabs: kompaktere Nav auf Mobil ─────────────────────── */
@media (max-width: 480px) {
    .c4m5-tab-nav-wrap { gap: 0; }
    .c4m5-tab-nav-btn  { flex: 1; padding: 10px 8px; font-size: .78rem; border-radius: 0; }
    .c4m5-tab-nav-btn:first-child { border-radius: 6px 0 0 0; }
    .c4m5-tab-nav-btn:last-child  { border-radius: 0 6px 0 0; }
}

/* ── Einzelzitat: kleiner auf Mobil ─────────────────────── */
@media (max-width: 600px) {
    .c4m5-sq-mark   { font-size: 2rem; }
    .c4m5-sq-text   { font-size: 1rem; line-height: 1.6; }
    .c4m5-sq-sources{ gap: 20px; }
}

/* ── Flip-Karten: Touch-Hinweis anpassen ───────────────── */
@media (hover: none) {
    .c4m5-flip-hint { display: none; }
    .c4m5-flip-front::after {
        content: 'Tippen für Details';
        display: block;
        font-size: .7rem;
        opacity: .7;
        margin-top: 8px;
    }
}

/* ── Timeline H: responsive ───────────────────────────── */
@media (max-width: 768px) {
    .c4m5-ht-item { min-width: 160px; width: 180px; }
    .c4m5-ht-scroll-wrap::after {
        content: '← scrollen →';
        display: block;
        text-align: center;
        font-size: .7rem;
        color: #999;
        padding: 8px 0 0;
    }
}
@media (max-width: 480px) {
    .c4m5-ht-item { min-width: 140px; width: 160px; }
    .c4m5-ht-year  { font-size: 1.1rem; }
    .c4m5-ht-title { font-size: .85rem; }
    .c4m5-ht-desc  { font-size: .75rem; }
}