/* CC Eventseite – Nachbau book.ccdeutschland.de
   Alle Regeln sind unter .ccep gekapselt, damit das Seiten-Template (MDB) nicht kollidiert. */

.ccep {
    --ccep-black: #000;
    --ccep-yellow: #fbd714;
    --ccep-gold: #ffd700;
    --ccep-white: #fff;
    --ccep-line: #313131;

    background: var(--ccep-black);
    color: var(--ccep-white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    overflow-x: hidden;
}
.ccep *,
.ccep *::before,
.ccep *::after { box-sizing: border-box; }
.ccep h1, .ccep h2, .ccep h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ccep-white);
    line-height: 1.2;
    margin: 0 0 .5em;
}
.ccep h2 { font-size: 2rem; font-weight: 600; }
.ccep h3 { font-size: 1.75rem; font-weight: 600; }
.ccep p { margin: 0 0 .9em; }
.ccep a { color: var(--ccep-yellow); text-decoration: none; }
.ccep a:hover { text-decoration: underline; }
.ccep img { max-width: 100%; height: auto; display: block; }
.ccep svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.ccep-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------- Header ---------- */
.ccep-header { background: var(--ccep-black); }
.ccep-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.ccep-header__side { flex: 1 1 0; display: flex; }
.ccep-header__side--right { justify-content: flex-end; }
.ccep-header__logo img { width: 250px; }
.ccep-header__lang { display: inline-flex; width: 30px; height: 30px; }
.ccep-header__lang:hover { text-decoration: none; opacity: .85; }
.ccep-header__lang-text {
    width: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--ccep-white);
    border: 1px solid var(--ccep-white);
    padding: 3px 8px;
    line-height: 22px;
}

/* ---------- Hero ---------- */
.ccep-fade {
    position: relative;
    z-index: 5;
    height: 100px;
    margin-bottom: -100px;
    background: linear-gradient(180deg, #000 3%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.ccep-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 750px;
    margin-top: 20px;
    background-color: #181818;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.ccep-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18) 44%, #000 100%);
}
.ccep-hero__content {
    position: relative;
    z-index: 1;
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}
.ccep .ccep-hero__title {
    max-width: 950px;
    margin: 0 0 40px;
    font-size: 90px;
    font-weight: 700;
    text-align: center;
}

.ccep .ccep-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ccep-black);
    background: var(--ccep-white);
    border: 2px solid var(--ccep-white);
    transition: color .2s, background-color .2s, border-color .2s;
}
.ccep .ccep-button:hover {
    color: var(--ccep-white);
    background: transparent;
    border-color: var(--ccep-yellow);
    text-decoration: none;
}
.ccep-button__icon { width: 20px; height: 20px; transition: transform .2s; }
.ccep-button:hover .ccep-button__icon { transform: translateX(4px); }

/* ---------- Infoboxen ---------- */
.ccep-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 50px;
    padding-bottom: 100px;
}
.ccep-info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px 20px;
    text-align: center;
    border-right: 2px solid var(--ccep-line);
}
.ccep-info:last-child { border-right: 0; }
.ccep-info__icon { width: 60px; height: 60px; color: var(--ccep-yellow); }
.ccep .ccep-info__title { margin: 0; }

/* ---------- Galerie ---------- */
.ccep-gallery { --ccep-per-view: 3; --ccep-gap: 20px; }
.ccep-gallery__track {
    position: relative;
    display: flex;
    gap: var(--ccep-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.ccep-gallery__track::-webkit-scrollbar { display: none; }
.ccep .ccep-gallery__slide {
    flex: 0 0 calc((100% - (var(--ccep-per-view) - 1) * var(--ccep-gap)) / var(--ccep-per-view));
    margin: 0;
    scroll-snap-align: start;
}
.ccep-gallery__slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ccep-gallery__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 15px 20px 0;
}
.ccep .ccep-gallery__dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ccep-white);
    cursor: pointer;
}
.ccep .ccep-gallery__dots button.is-active { background: var(--ccep-yellow); }

/* ---------- Hotel ---------- */
.ccep-hotel { padding-top: 40px; text-align: center; }

/* ---------- Agenda ---------- */
.ccep-agenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding-top: 100px;
    padding-bottom: 100px;
}
.ccep .ccep-agenda__heading { margin: 0; font-size: 50px; font-weight: 600; text-align: center; }
.ccep-agenda__body { width: 100%; max-width: 1100px; }
.ccep .ccep-agenda__table {
    width: 100%;
    margin: 0 0 15px;
    border-collapse: collapse;
    background: var(--ccep-black);
    color: var(--ccep-white);
}
.ccep .ccep-agenda__table td {
    padding: 12px;
    font-size: 20px;
    color: var(--ccep-white);
    border: 0;
    border-bottom: 1px solid #666;
    vertical-align: top;
    background: transparent;
}
.ccep .ccep-agenda__table tr:last-child td { border-bottom: 0; }
.ccep .ccep-agenda__table td strong { color: var(--ccep-gold); white-space: nowrap; }
.ccep-agenda__note { font-size: 16px; }

/* ---------- Speaker ---------- */
.ccep-speaker {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding-bottom: 60px;
}
.ccep-speaker__image { flex: 0 0 25.4%; }
.ccep-speaker__text { flex: 0 0 48.4%; }
.ccep-speaker__body p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.ccep-footer { padding-bottom: 20px; }
.ccep .ccep-footer__divider {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #2a2a2a;
    opacity: 1;
}
.ccep-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 20px;
    font-size: 14px;
}
.ccep-footer__links { display: flex; flex-wrap: wrap; gap: 10px 25px; }
.ccep .ccep-footer__links a { color: var(--ccep-white); }

/* ---------- Modul „Inhalte Text mit Bild (1 - 3 Spalten)“ im Template „CC Eventseite“ ---------- */
.ccep-page .pictext {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 20px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
.ccep-page .pictext *,
.ccep-page .pictext *::before,
.ccep-page .pictext *::after { box-sizing: border-box; }
.ccep-page .pictext h1,
.ccep-page .pictext h2,
.ccep-page .pictext h3,
.ccep-page .pictext h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 .5em;
}
.ccep-page .pictext > h1,
.ccep-page .pictext > h2 { margin-bottom: 50px; font-size: 50px; text-align: center; }
.ccep-page .pictext > h3 { margin-bottom: 30px; font-size: 1.75rem; text-align: center; }
.ccep-page .pictext p { margin: 0 0 .9em; }
.ccep-page .pictext a { color: #fbd714; text-decoration: none; }
.ccep-page .pictext a:hover { text-decoration: underline; }
.ccep-page .pictext ul,
.ccep-page .pictext ol { margin: 0 0 .9em; padding-left: 1.3em; }
.ccep-page .pictext .row { display: flex; gap: 40px; }
.ccep-page .pictext .col-md-12 { flex: 1 1 100%; min-width: 0; }
.ccep-page .pictext .col-sm-8 { flex: 2 1 0; min-width: 0; }
.ccep-page .pictext .col-sm-4 { flex: 1 1 0; min-width: 0; }
.ccep-page .pictext img.content { display: block; width: 100%; height: auto; margin-bottom: 20px; }

@media (max-width: 1024px) {
    .ccep-page .pictext > h1,
    .ccep-page .pictext > h2 { font-size: 35px; }
}
@media (max-width: 767px) {
    .ccep-page .pictext { padding-top: 30px; padding-bottom: 30px; }
    .ccep-page .pictext > h1,
    .ccep-page .pictext > h2 { margin-bottom: 30px; font-size: 30px; }
    .ccep-page .pictext .row { flex-direction: column; gap: 20px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .ccep-hero { min-height: 500px; }
    .ccep-hero__content { width: 100%; }
    .ccep .ccep-hero__title { font-size: 60px; }

    .ccep-info { flex: 0 0 calc(50% - 15px); }
    .ccep-info:nth-child(2n) { border-right: 0; }

    .ccep-gallery { --ccep-per-view: 2; }

    .ccep-agenda { padding-top: 50px; padding-bottom: 50px; }
    .ccep .ccep-agenda__heading { font-size: 35px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
    .ccep-header__side:first-child { display: none; }
    .ccep-header__inner { flex-direction: column; gap: 10px; }
    .ccep-header__side--right { justify-content: center; }

    .ccep-hero { min-height: 400px; }
    .ccep .ccep-hero__title { font-size: 40px; }

    .ccep-infos { flex-direction: column; gap: 20px; }
    .ccep-info {
        flex: 1 1 auto;
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 2px solid var(--ccep-line);
    }
    .ccep-info:last-child { border-bottom: 0; }
    .ccep .ccep-info__title { font-size: 25px; }

    .ccep-gallery { --ccep-per-view: 1; }

    .ccep .ccep-agenda__heading { font-size: 30px; }
    .ccep .ccep-agenda__table,
    .ccep .ccep-agenda__table tbody { display: block; }
    .ccep .ccep-agenda__table tr { display: flex; flex-direction: column; padding: 10px 0; }
    .ccep .ccep-agenda__table td {
        display: block;
        padding: 6px 0;
        font-size: 18px;
        text-align: center;
        border-bottom: 0;
    }
    .ccep-agenda__body { text-align: center; }

    .ccep-speaker { flex-direction: column; align-items: center; gap: 20px; }
    .ccep-speaker__image { flex-basis: auto; width: 70%; }
    .ccep-speaker__text { flex-basis: auto; }
}