/*
 * 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;
}
.c4m5-flip-front { color: #fff; }
.c4m5-flip-icon  { font-size: 2.8rem; margin-bottom: 12px; }
.c4m5-flip-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.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; }
@media (max-width: 900px) { .c4m5-flip-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .c4m5-flip-grid { grid-template-columns: 1fr; } .c4m5-flip-card { height: 220px; } }


/* ═══ 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; min-width: max-content; padding-top: 56px;
}
.c4m5-ht-item {
    width: 220px; padding: 0 20px; 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  { 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); } }
@media (max-width: 400px) { .c4m5-cstat-grid { grid-template-columns: 1fr; } }


/* ═══ 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 {
    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 { 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-author strong { 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 {
    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 { border-top: none; }

/* Karten-Bezeichnung im Customizer */
.c4m5-customizer-preview .c4m5-tab-card::before,
.is-customize-preview   .c4m5-tab-card::before {
    content:      attr(data-tab-label);
    display:      block;
    font-size:    .72rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:        var(--tab-accent);
    margin-bottom: 10px;
}

@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 { transform: none !important; }
.c4m5-customizer-preview .c4m5-flip-front,
.is-customize-preview .c4m5-flip-front { position: relative; }
.c4m5-customizer-preview .c4m5-flip-back,
.is-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 { 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: proper image containers */
.c4m5-ba-wrapper {
    position:   relative;
    overflow:   hidden;
    border-radius: 8px;
    cursor:     col-resize;
    user-select:none;
    touch-action:none;
    height:     420px;
}
.c4m5-ba-before,
.c4m5-ba-after {
    position:   absolute;
    inset:      0;
    background-size:   cover;
    background-position: center;
    background-repeat:   no-repeat;
}
.c4m5-ba-before { z-index: 1; }
.c4m5-ba-after  { z-index: 2; clip-path: inset(0 50% 0 0); }
.c4m5-ba-edit-hint {
    display:    none;
    font-size:  .78rem;
    color:      #70757a;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}
.c4m5-customizer-preview .c4m5-ba-edit-hint,
.is-customize-preview .c4m5-ba-edit-hint { display: block; }

/* 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; }

.c4m5-sq-items { width: 100%; }
.c4m5-sq-item { max-width: 800px; margin: 0 auto; }