/*  epochs.css  */


/* =====================================================================
   ======================== UI Akzente je Epoche ====================
   ===================================================================== */

/* ======== Ui accent für 20er + Rom ======== */
/* goldene farben für brand glow und ui komponenten */
.epoche-20s,
.epoche-rom,
body[data-epoche="zwanziger"],
body[data-epoche="rom"] {
    --ui-accent: var(--brand-gold);
    --ui-accent-soft: rgba(216,180,106,0.35);
}

/* ======== Ui accent für Mittelalter ======== */
/* gedämpftes gold für mittelalterliche atmosphäre */
.epoche-mittelalter,
body[data-epoche="mittelalter"] {
    --ui-accent: #c7a24a;
    --ui-accent-soft: rgba(199,162,74,0.35);
}


/* =====================================================================
   ====================== Body Tokens je Epoche =====================
   ===================================================================== */

/* ======== Rom: accent farben ======== */
/* goldene akzente für pager buttons und ui komponenten */
body[data-epoche="rom"] {
    --accent: #e2b561;
    --pager-accent: #e2b561;
    --pager-accent-soft: color-mix(in srgb, #e2b561 35%, transparent);
}

/* ======== Mittelalter: accent farben ======== */
/* grünliche akzente für naturverbundene mittelalter atmosphäre */
body[data-epoche="mittelalter"] {
    --accent: #6db8a2;
    --pager-accent: #7fbf6a;
    --pager-accent-soft: color-mix(in srgb, #7fbf6a 35%, transparent);
}

/* ======== 20er: accent farben ======== */
/* warme goldgelbe akzente für art deco look */
body[data-epoche="zwanziger"] {
    --accent: #f8d88a;
    --pager-accent: #f8d88a;
    --pager-accent-soft: color-mix(in srgb, #f8d88a 35%, transparent);
}

/* ======== Planner/Analysis/Abschluss: accent farben ======== */
/* türkise akzente für funktionale sektionen */
body[data-epoche="planner"],
body[data-epoche="analysis"],
body[data-epoche="abschluss"] {
    --accent: #6ef5ff;
    --pager-accent: #6ef5ff;
    --pager-accent-soft: color-mix(in srgb, #6ef5ff 35%, transparent);
}


/* =====================================================================
   ================ Grunddesign Rom/Mittelalter/20er ================
   ===================================================================== */

/* ======== Activity liste für klassische epochen ======== */
/* flex column layout für stopp cards (Rom/Mittelalter/20er) */
.epoche-template .epoche-activity {
    display: flex;
    flex-direction: column;
    gap: var(--epoch-activity-gap, 1rem);
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 65%;
    max-width: 100%;
    min-height: 0;
    color: var(--epoch-text, #f4e6c2);
    font-family: var(--epoch-font);
    text-align: left;
    align-items: stretch;
    justify-items: stretch;
    position: relative;
    background: none;
    overflow: visible;
    border: none;
    box-shadow: none;
    outline: none;
}


/* =====================================================================
   ============================ ROM =================================
   ===================================================================== */

/* ======== Rom: hintergrund + schrift ======== */
/* serifenschrift (MordredBold) + sandige farben für antike atmosphäre */
.epoche-rom {
    --epoch-bg:
        linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.5)),
        url('../pics/Rom.webp');
    --epoch-text: #f4e6c2;
    --epoch-subtext: #d9c9a2;
    font-family: "MordredBold", "Herculanum", "Georgia", "Times New Roman", serif;
    --epoch-font: "MordredBold", "Herculanum", "Georgia", "Times New Roman", serif;
    font-variant-ligatures: none;
}


/* =====================================================================
   ========================= MITTELALTER ============================
   ===================================================================== */

/* ======== Mittelalter: hintergrund + schrift ======== */
/* Macondo font + grünliche töne für mittelalterliche wald atmosphäre */
.epoche-mittelalter {
    --epoch-bg:
        linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.5)),
        url('../pics/Mittelalter.webp');
    --epoch-card-bg: rgba(24, 18, 13, 0.7);
    --epoch-card-border: rgba(143, 171, 120, 0.45);
    --epoch-text: #dbe9d4;
    --epoch-subtext: #b9ccb0;
    font-family: "Macondo", "MordredBold", "Georgia", serif;
    --epoch-font: "Macondo", "MordredBold", "Georgia", serif;
}


/* =====================================================================
   ========================== GOLDENE 20ER ==========================
   ===================================================================== */

/* ======== Goldene 20er: hintergrund + schrift ======== */
/* typewriter (Momstypewriter) + Monoton für art deco titel, goldige töne */
.epoche-20er {
    --epoch-bg:
        linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.5)),
        url('../pics/20er.webp');
    --epoch-card-bg: rgba(20, 14, 8, 0.7);
    --epoch-card-border: rgba(248, 216, 138, 0.5);
    --epoch-text: #f8d88a;
    --epoch-subtext: #d9c296;
    font-family: "Momstypewriter", var(--typewriter-stack);
    letter-spacing: 0.02em;
    --epoch-font: "Momstypewriter", var(--typewriter-stack);
    --epoch-title-font: "Monoton", "Playfair Display", serif;
}

/* ======== Alle kindelemente erben font ======== */
/* verhindert font overrides durch bootstrap/browser defaults */
.epoche-20er * { font-family: inherit; }

.epoche-20er .epoche-rules-mini {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
}

/* ======== Titel + subtitle zentriert ======== */
/* art deco ästhetik mit zentrierten headlines */
.epoche-20er .epoche-title,
.epoche-20er .epoche-subtitle {
    text-align: center;
}


/* =====================================================================
   =================== Stopp Modal (Rom/MA/20er) ====================
   ===================================================================== */

/* ======== Modal content basis ======== (Quelle: https://getbootstrap.com/docs/5.0/components/modal/) */
/* epochenspezifische border + glow für modal content */
#stoppModal[data-epoche="rom"] .modal-content,
#stoppModal[data-epoche="mittelalter"] .modal-content,
#stoppModal[data-epoche="zwanziger"] .modal-content{
    border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,0.12));
    box-shadow: 0 18px 46px rgba(0,0,0,0.55), 0 0 26px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ======== Modal title farbe ======== */
/* titel in epochen accent farbe */
#stoppModal[data-epoche="rom"] .modal-title,
#stoppModal[data-epoche="mittelalter"] .modal-title,
#stoppModal[data-epoche="zwanziger"] .modal-title{
    color: var(--accent);
}

/* ======== Modal action button ======== */
/* route button in epochen accent mit glow */
#stoppModal[data-epoche="rom"] #stoppModalAction,
#stoppModal[data-epoche="mittelalter"] #stoppModalAction,
#stoppModal[data-epoche="zwanziger"] #stoppModalAction{
    border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.2));
    color: var(--accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ======== Action button hover + focus ======== */
/* verstärkter glow für feedback */
#stoppModal[data-epoche="rom"] #stoppModalAction:hover,
#stoppModal[data-epoche="mittelalter"] #stoppModalAction:hover,
#stoppModal[data-epoche="zwanziger"] #stoppModalAction:hover,
#stoppModal[data-epoche="rom"] #stoppModalAction:focus-visible,
#stoppModal[data-epoche="mittelalter"] #stoppModalAction:focus-visible,
#stoppModal[data-epoche="zwanziger"] #stoppModalAction:focus-visible{
    border-color: color-mix(in srgb, var(--accent) 80%, rgba(255,255,255,0.2));
    box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ======== Modal footer für klassische epochen ======== */
/* route button zentriert statt bootstrap default (links/rechts) */
#stoppModal[data-epoche="rom"] .modal-footer,
#stoppModal[data-epoche="mittelalter"] .modal-footer,
#stoppModal[data-epoche="zwanziger"] .modal-footer{
    justify-content: center;
}

/* ======== Close button im footer verstecken ======== */
/* footer close button wird nicht gebraucht (header close bleibt) */
#stoppModal[data-epoche="rom"] .modal-footer .btn-close,
#stoppModal[data-epoche="mittelalter"] .modal-footer .btn-close,
#stoppModal[data-epoche="zwanziger"] .modal-footer .btn-close{
    display: none;
    pointer-events: none;
}

/* ======== Close button im header epochenspezifisch färben ======== */
/* bootstrap btn-close ist svg -> färben via css filter */
#stoppModal[data-epoche="rom"] .modal-header .btn-close{
    filter: brightness(0) saturate(100%) invert(76%) sepia(26%) saturate(854%) hue-rotate(356deg) brightness(95%) contrast(88%);
    opacity: 0.85;
}

#stoppModal[data-epoche="mittelalter"] .modal-header .btn-close{
    filter: brightness(0) saturate(100%) invert(63%) sepia(23%) saturate(676%) hue-rotate(122deg) brightness(92%) contrast(88%);
    opacity: 0.85;
}

#stoppModal[data-epoche="zwanziger"] .modal-header .btn-close{
    filter: brightness(0) saturate(100%) invert(88%) sepia(34%) saturate(819%) hue-rotate(325deg) brightness(102%) contrast(96%);
    opacity: 0.85;
}

#stoppModal[data-epoche="rom"] .modal-header .btn-close:hover,
#stoppModal[data-epoche="mittelalter"] .modal-header .btn-close:hover,
#stoppModal[data-epoche="zwanziger"] .modal-header .btn-close:hover{
    opacity: 1;
}

/* ======== Modal body für klassische epochen ======== */
/* bild oben, text unten (vertical layout statt horizontal) */
#stoppModal[data-epoche="rom"] .modal-body > div,
#stoppModal[data-epoche="mittelalter"] .modal-body > div,
#stoppModal[data-epoche="zwanziger"] .modal-body > div{
    flex-direction: column !important;
    align-items: center;
}

#stoppModal[data-epoche="rom"] .modal-body img,
#stoppModal[data-epoche="mittelalter"] .modal-body img,
#stoppModal[data-epoche="zwanziger"] .modal-body img{
    width: 100%;
    max-width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 1.25rem;
}

#stoppModal[data-epoche="rom"] .modal-body .flex-grow-1,
#stoppModal[data-epoche="mittelalter"] .modal-body .flex-grow-1,
#stoppModal[data-epoche="zwanziger"] .modal-body .flex-grow-1{
    width: 100%;
    text-align: left;
}

/* ======== Modal font + accent für Rom ======== */
/* MordredBold font + goldener accent */
#stoppModal[data-epoche="rom"]{
    --accent: #e2b561;
    --epoch-font: "MordredBold", "Herculanum", "Georgia", "Times New Roman", serif;
    font-family: var(--epoch-font, inherit);
}

/* ======== Modal font + accent für Mittelalter ======== */
/* Macondo font + grüner accent */
#stoppModal[data-epoche="mittelalter"]{
    --accent: #6db8a2;
    --epoch-font: "Macondo", "MordredBold", "Georgia", serif;
    font-family: var(--epoch-font, inherit);
}

/* ======== Modal font + accent für 20er ======== */
/* typewriter font + goldgelber accent */
#stoppModal[data-epoche="zwanziger"]{
    --accent: #f8d88a;
    --epoch-font: "Momstypewriter", var(--typewriter-stack);
    font-family: var(--epoch-font, inherit);
}