/*
 * C4mulo5 – Neue Sections CSS
 * Countdown, Öffnungszeiten, Karte, FAQ, Schritte, Downloads, Video
 * Autor: Nico Eberhardt – https://nico-eberhardt.de
 */

/* ═══════════════════════════════════════════════════════════
   DSGVO-OVERLAY (gemeinsam für Karte + Video)
═══════════════════════════════════════════════════════════ */
.c4mulo5-map-container,
.c4mulo5-video-container {
    position:      relative;
    overflow:      hidden;
    border-radius: 8px;
    background:    #f0f0f0;
    min-height:    300px;
}
.c4mulo5-gdpr-overlay {
    position:        absolute;
    inset:           0;
    z-index:         10;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(29, 35, 39, .88);
    padding:         20px;
}
.c4mulo5-gdpr-overlay-inner {
    max-width:    480px;
    text-align:   center;
    color:        #fff;
}
.c4mulo5-gdpr-icon   { font-size: 2.5rem; margin-bottom: 10px; }
.c4mulo5-gdpr-title  { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.c4mulo5-gdpr-text   { font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 16px; }
.c4mulo5-gdpr-text a { color: #93c5fd; }
.c4mulo5-gdpr-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.c4mulo5-gdpr-accept {
    cursor:          pointer;
    font-size:       .9rem;
    background:      #c8a84b !important;
    color:           #fff !important;
    border:          none !important;
    padding:         10px 24px;
    border-radius:   4px;
    font-weight:     600;
    transition:      background .2s;
}
.c4mulo5-gdpr-accept:hover { background: #b5963f !important; }
.c4mulo5-gdpr-remember {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   .78rem;
    color:       rgba(255,255,255,.7);
    cursor:      pointer;
}
/* Nach Zustimmung: Overlay ausblenden */
.c4mulo5-gdpr-overlay.c4m5-accepted { display: none; }

/* iFrame nach Zustimmung */
.c4mulo5-map-container iframe,
.c4mulo5-video-container iframe {
    width:  100%;
    height: 400px;
    border: none;
    display: block;
}


/* ═══════════════════════════════════════════════════════════
   COUNTDOWN
═══════════════════════════════════════════════════════════ */
.c4mulo5-countdown {
    --cd-accent:    #c8a84b;
    --cd-text:      #1d2327;
    --cd-num-bg:    #1d2327;
    --cd-num-color: #fff;
}
.c4mulo5-cd-inner   { text-align: center; }
.c4mulo5-cd-title   { font-size: 2rem; font-weight: 700; margin: 0 0 8px; }
.c4mulo5-cd-subtitle{ color: #50575e; margin: 0 0 28px; }
.c4mulo5-cd-display {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             8px;
    flex-wrap:       wrap;
    margin-bottom:   28px;
}
.c4mulo5-cd-unit    { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c4mulo5-cd-value {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  80px;
    height: 80px;
    background:    var(--cd-num-bg);
    color:         var(--cd-num-color);
    font-size:     2.2rem;
    font-weight:   700;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.c4mulo5-cd-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #70757a; }
.c4mulo5-cd-sep   { font-size: 2rem; font-weight: 700; color: var(--cd-accent); align-self: flex-start; margin-top: 12px; }
.c4mulo5-cd-expired { color: #dc2626; font-size: 1.1rem; font-weight: 600; }
@media (max-width: 480px) {
    .c4mulo5-cd-value { width: 60px; height: 60px; font-size: 1.6rem; }
}


/* ═══════════════════════════════════════════════════════════
   ÖFFNUNGSZEITEN
═══════════════════════════════════════════════════════════ */
.c4mulo5-opening-hours { --oh-accent: #c8a84b; }
.c4mulo5-oh-title      { font-size: 1.8rem; font-weight: 700; margin: 0 0 8px; }
.c4mulo5-oh-subtitle   { color: #50575e; margin: 0 0 20px; }
.c4mulo5-oh-today-badge{
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    var(--oh-accent);
    color:         #fff;
    padding:       8px 16px;
    border-radius: 24px;
    font-size:     .9rem;
    font-weight:   600;
}
.c4mulo5-oh-table       { border-top: 1px solid #eee; }
.c4mulo5-oh-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         12px 0;
    border-bottom:   1px solid #eee;
    font-size:       .95rem;
    transition:      background .15s;
}
.c4mulo5-oh-row.c4m5-today {
    font-weight:   700;
    color:         var(--oh-accent);
    background:    #fef9ec;
    padding-left:  10px;
    padding-right: 10px;
    margin:        0 -10px;
    border-radius: 4px;
}
.c4mulo5-oh-row.c4m5-today::before {
    content:        '→ Heute';
    font-size:      .7rem;
    background:     var(--oh-accent);
    color:          #fff;
    padding:        2px 6px;
    border-radius:  3px;
    margin-right:   8px;
    font-weight:    700;
}
.c4mulo5-oh-day  { font-weight: 500; }
.c4mulo5-oh-time { color: #50575e; }
.c4mulo5-oh-row.c4m5-today .c4mulo5-oh-time { color: var(--oh-accent); }


/* ═══════════════════════════════════════════════════════════
   KARTE
═══════════════════════════════════════════════════════════ */
.c4mulo5-map-address-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 12px; }
.c4mulo5-map-address {
    font-style:   normal;
    line-height:  1.8;
    color:        #50575e;
    margin:       0 0 16px;
}
.c4mulo5-map-address a    { color: inherit; }
.c4mulo5-map-external-link{
    display:        inline-block;
    font-weight:    600;
    font-size:      .9rem;
    color:          #2271b1;
    text-decoration: none;
}
.c4mulo5-map-col          { padding-left: 0; }


/* ═══════════════════════════════════════════════════════════
   FAQ SCHEMA
═══════════════════════════════════════════════════════════ */
.c4mulo5-faq-schema { --faq-accent: #c8a84b; }
.c4mulo5-faq-item   { margin-bottom: 8px; }
.c4mulo5-faq-details{
    border:        1px solid #e0e0e0;
    border-radius: 6px;
    overflow:      hidden;
    background:    #fff;
}
.c4mulo5-faq-question {
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    padding:       16px 20px;
    cursor:        pointer;
    font-weight:   600;
    font-size:     .95rem;
    list-style:    none;
    user-select:   none;
    gap:           12px;
}
.c4mulo5-faq-question::-webkit-details-marker { display: none; }
.c4mulo5-faq-details[open] .c4mulo5-faq-question {
    border-bottom: 1px solid #e0e0e0;
    color:         var(--faq-accent);
}
.c4mulo5-faq-icon {
    flex-shrink:   0;
    font-size:     1.3rem;
    font-weight:   300;
    color:         var(--faq-accent);
    transition:    transform .2s;
}
.c4mulo5-faq-details[open] .c4mulo5-faq-icon { transform: rotate(45deg); }
.c4mulo5-faq-answer {
    padding:     14px 20px;
    line-height: 1.7;
    color:       #50575e;
    font-size:   .9rem;
}
.c4mulo5-faq-answer p { margin: 0; }


/* ═══════════════════════════════════════════════════════════
   SCHRITTE
═══════════════════════════════════════════════════════════ */
.c4mulo5-steps      { --step-accent: #c8a84b; }
.c4mulo5-steps-row  {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0;
    position:              relative;
}
/* Verbindungslinie – Bootstrap ::before/::after deaktiviert */
.c4mulo5-steps-row::before {
    content:    '' !important;
    display:    block !important;
    position:   absolute !important;
    top:        30px !important;
    left:       12.5% !important;
    right:      12.5% !important;
    height:     2px !important;
    width:      auto !important;
    background: var(--step-accent) !important;
    padding:    0 !important;
    z-index:    0;
}
.c4mulo5-steps-row::after {
    display: none !important;
    content: none !important;
}
.c4mulo5-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        0 16px;
    position:       relative;
    z-index:        1;
}
/* Nummer-Kreis: TEXT (editierbar) in einem gestylten Wrapper */
.c4mulo5-step-number-wrap {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--step-accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   12px;
    box-shadow:      0 0 0 5px #fff, 0 0 0 7px var(--step-accent);
    flex-shrink:     0;
    position:        relative;
    z-index:         2;
}
.c4mulo5-step-number {
    color:       #fff;
    font-size:   1.2rem;
    font-weight: 700;
    line-height: 1;
}
.c4mulo5-step-icon  { font-size: 2rem; margin-bottom: 10px; }
.c4mulo5-step-title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.c4mulo5-step-desc  { font-size: .85rem; color: #50575e; line-height: 1.6; margin: 0; }
@media (max-width: 767px) {
    .c4mulo5-steps-row { grid-template-columns: 1fr 1fr; }
    .c4mulo5-steps-row::before { display: none; }
    .c4mulo5-step { padding: 0 8px 24px; }
}
@media (max-width: 480px) {
    .c4mulo5-steps-row { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   DOWNLOADS
═══════════════════════════════════════════════════════════ */
.c4mulo5-downloads { --dl-accent: #2271b1; }
.c4mulo5-dl-list   { display: flex; flex-direction: column; gap: 12px; }
.c4mulo5-dl-card {
    display:       flex;
    align-items:   center;
    gap:           16px;
    background:    #fff;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
    padding:       16px 20px;
    box-shadow:    0 1px 4px rgba(0,0,0,.06);
    transition:    box-shadow .2s, transform .2s;
}
.c4mulo5-dl-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform:  translateY(-1px);
}
.c4mulo5-dl-icon   { flex-shrink: 0; }
.c4mulo5-dl-info   { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c4mulo5-dl-name   { font-weight: 600; font-size: .95rem; }
.c4mulo5-dl-desc   { font-size: .8rem; color: #70757a; }
.c4mulo5-dl-btn    {
    flex-shrink:   0;
    font-size:     .85rem;
    padding:       8px 16px;
    white-space:   nowrap;
    text-decoration: none;
}
@media (max-width: 600px) {
    .c4mulo5-dl-card   { flex-wrap: wrap; }
    .c4mulo5-dl-btn    { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════
   VIDEO EMBED
═══════════════════════════════════════════════════════════ */
.c4mulo5-video-thumb {
    width:    100%;
    height:   400px;
    background: #1a1a2e center/cover no-repeat;
    display:  flex;
    align-items: center;
    justify-content: center;
    cursor:   pointer;
}
.c4mulo5-video-play-btn {
    width:           68px;
    height:          68px;
    background:      rgba(255,255,255,.92);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.6rem;
    color:           #EA4335;
    box-shadow:      0 4px 20px rgba(0,0,0,.3);
    transition:      transform .2s;
}
.c4mulo5-video-thumb:hover .c4mulo5-video-play-btn { transform: scale(1.1); }