/* =========================================================
   THEMENDETAIL /themen/{slug}
   Ergänzt /css/themen.css
========================================================= */

.theme-page{
    --theme-accent:var(--accent, #b91c1c);
    --theme-accent-dark:#991b1b;
    --theme-text:var(--text, #17191f);
    --theme-muted:var(--text-3, #667085);
    --theme-line:var(--line, #e2e7ee);
    --theme-soft:#f6f8fb;
    --theme-radius:24px;
    min-height:60vh;
    padding:0 0 72px;
    color:var(--theme-text);
}

.theme-page .themes-wrap{
    width:min(var(--wrap, 1280px), calc(100% - 32px));
    margin:0 auto;
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */

.theme-detail-hero{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:46px;
    padding:38px 40px;
    overflow:hidden;
    border:1px solid #e3e8ef;
    border-radius:28px;
    background:
        radial-gradient(
            circle at 96% 0%,
            rgba(185,28,28,.10) 0%,
            rgba(185,28,28,0) 38%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
    box-shadow:
        0 14px 34px rgba(20,22,28,.05),
        0 28px 70px rgba(20,22,28,.05);
}

.theme-detail-hero::after{
    content:"";
    position:absolute;
    top:-72px;
    right:-70px;
    width:210px;
    height:210px;
    border:1px solid rgba(185,28,28,.10);
    border-radius:50%;
    box-shadow:
        0 0 0 32px rgba(185,28,28,.025),
        0 0 0 64px rgba(185,28,28,.018);
    pointer-events:none;
}

.theme-detail-hero__content{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    min-width:0;
    max-width:900px;
}

.theme-page .themes-eyebrow{
    display:block;
    margin-bottom:9px;
    color:var(--theme-accent);
    font-size:12px;
    font-weight:900;
    letter-spacing:.11em;
    line-height:1.2;
    text-transform:uppercase;
}

.theme-detail-hero h1{
    margin:0;
    color:#15171b;
    font-size:clamp(34px, 4.2vw, 58px);
    font-weight:900;
    letter-spacing:-.035em;
    line-height:1.02;
}

.theme-detail-hero__lead{
    max-width:900px;
    margin:16px 0 0;
    color:#5e6876;
    font-size:17px;
    line-height:1.72;
}

.theme-detail-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
}

.theme-detail-meta__item{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:32px;
    padding:0 12px;
    border:1px solid #dfe5ec;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    color:#697381;
    font-size:12px;
    font-weight:700;
}

.theme-detail-meta__item strong{
    color:#242931;
    font-size:13px;
}

.theme-detail-hero__back{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:0 15px;
    border:1px solid #dce2ea;
    border-radius:12px;
    background:rgba(255,255,255,.92);
    color:#404852;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    transition:
        transform .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.theme-detail-hero__back:hover{
    transform:translateY(-2px);
    border-color:#efb3b3;
    color:var(--theme-accent);
    box-shadow:0 9px 22px rgba(20,22,28,.08);
}

/* ---------------------------------------------------------
   Motive – exakt wie Unterkategorie-Karten
--------------------------------------------------------- */

.theme-motif-section{
    margin-bottom:44px;
}

.theme-motif-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:18px;
}

.theme-motif-heading h2{
    margin:0;
    color:#191c21;
    font-size:clamp(25px, 2.6vw, 34px);
    font-weight:900;
    letter-spacing:-.025em;
    line-height:1.08;
}

.theme-motif-total{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 11px;
    border:1px solid #e0e5eb;
    border-radius:999px;
    background:#fff;
    color:#697381;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

/* exakt aus kategorie.css */
.theme-page .topic-grid--image-cats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
    margin-top:8px;
    margin-bottom:42px;
}

.theme-page .topic-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    overflow:hidden;
    background:linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border:1px solid #e3e8ef;
    border-radius:24px;
    padding:24px 22px 20px;
    box-shadow:
        0 10px 24px rgba(20,22,28,.04),
        0 18px 40px rgba(20,22,28,.05);
    transition:
        transform .28s var(--ease, ease),
        box-shadow .28s var(--ease, ease),
        border-color .28s var(--ease, ease),
        background .28s var(--ease, ease);
    color:inherit;
    text-decoration:none;
}

.theme-page .topic-card--image{
    padding:0;
    border-radius:26px;
    overflow:hidden;
    background:#fff;
    border:1px solid #e1e7ef;
    box-shadow:
        0 12px 28px rgba(20,22,28,.06),
        0 24px 56px rgba(20,22,28,.07);
}

.theme-page .topic-card--image::before,
.theme-page .topic-card--image::after{
    display:none;
}

.theme-page .topic-card--image:hover{
    transform:translateY(-7px);
    border-color:#cbd4df;
    box-shadow:
        0 20px 42px rgba(20,22,28,.10),
        0 36px 76px rgba(20,22,28,.10);
}

.theme-page .topic-card__media{
    position:relative;
    height:245px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 40%),
        linear-gradient(180deg, #f4f6f9 0%, #e7ecf2 100%);
    overflow:hidden;
}

.theme-page .topic-card__media img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center top;
    transform:scale(1.04);
    transition:
        transform .36s var(--ease, ease),
        filter .36s var(--ease, ease);
}

.theme-page .topic-card--image:hover .topic-card__media img{
    transform:scale(1.10);
    filter:brightness(1.03);
}

.theme-page .topic-card__media.is-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 30%, rgba(198,40,40,.10) 0%, rgba(198,40,40,0) 45%),
        linear-gradient(180deg, #f7f9fc 0%, #e9eef4 100%);
}

.theme-page .topic-card__placeholder{
    width:92px;
    height:92px;
    border-radius:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
    border:1px solid #dce3ec;
    color:#8f1d1d;
    font-size:42px;
    font-weight:900;
    box-shadow:0 18px 34px rgba(20,22,28,.10);
}

.theme-page .topic-card__floating-count{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(220,225,232,.95);
    color:#20252c;
    font-size:12px;
    font-weight:900;
    box-shadow:0 12px 24px rgba(20,22,28,.13);
    backdrop-filter:blur(10px);
}

.theme-page .topic-card__content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:20px 20px 20px;
    min-height:220px;
}

.theme-page .topic-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.theme-page .topic-card--image .topic-card__top{
    margin-bottom:12px;
}

.theme-page .topic-card__badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 6px 14px rgba(20,22,28,.04);
}

.theme-page .topic-card--image .topic-card__badge{
    background:linear-gradient(180deg, #fff5f5 0%, #fef0f0 100%);
    border:1px solid rgba(198,40,40,.18);
    color:#8f1d1d;
}

.theme-page .topic-card--image h3{
    margin:0 0 10px;
    font-size:22px;
    line-height:1.12;
    letter-spacing:-.45px;
    color:#15181d;
}

.theme-page .topic-card--image p{
    margin:0;
}

.theme-page .topic-card__availability{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    box-sizing:border-box;
	gap:5px;
    margin:2px 0 18px !important;
    padding:14px 16px 14px 19px;

    border:1px solid #e1e6ed;
    border-radius:14px;

    background:linear-gradient(
        135deg,
        #f8f9fb 0%,
        #f1f4f7 100%
    );

    color:#4f5864;
    font-size:15px;
    font-weight:750;
    line-height:1.35;

    box-shadow:0 7px 18px rgba(20,22,28,.045);
}

.theme-page .topic-card__availability::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:4px;
    border-radius:0 4px 4px 0;
    background:var(--theme-accent);
}

.theme-page .topic-card__availability strong{

    color:#171a1f;
    font-size:19px;
    font-weight:950;
    letter-spacing:-.02em;
}

.theme-page .topic-card__description{
    margin:0 0 18px !important;
    color:var(--text-2, #525a66);
    font-size:14px;
    line-height:1.65;
}

.theme-page .topic-card--image .topic-card__bottom{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.theme-page .topic-card__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 15px;
    border-radius:12px;
    border:1px solid #d9dfe8;
    background:linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
    color:#1d2430;
    font-size:13px;
    font-weight:800;
    box-shadow:0 10px 18px rgba(20,22,28,.05);
    transition:
        transform .22s var(--ease, ease),
        box-shadow .22s var(--ease, ease),
        border-color .22s var(--ease, ease),
        background .22s var(--ease, ease);
}

.theme-page .topic-card__button::after{
    content:"→";
    font-size:12px;
    margin-left:8px;
}

.theme-page .topic-card--image .topic-card__button{
    width:100%;
    min-height:44px;
    border-radius:14px;
    background:linear-gradient(180deg, #5a5e66 0%, #31353c 100%);
    border:0;
    color:#fff;
    box-shadow:0 12px 22px rgba(45,49,56,.14);
}

.theme-page .topic-card--image:hover .topic-card__button{
    background:linear-gradient(180deg, #626771 0%, #2f333a 100%);
    box-shadow:0 18px 28px rgba(45,49,56,.18);
}

/* ---------------------------------------------------------
   Leerzustand
--------------------------------------------------------- */

.theme-detail-empty{
    padding:52px 24px;
    border:1px dashed #d9e0e8;
    border-radius:22px;
    background:#fafbfd;
    text-align:center;
}

.theme-detail-empty__icon{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 13px;
    border-radius:16px;
    background:#eef1f5;
    color:#aeb7c2;
    font-size:28px;
}

.theme-detail-empty h2{
    margin:0;
    font-size:22px;
}

.theme-detail-empty p{
    max-width:540px;
    margin:8px auto 0;
    color:#697482;
    font-size:14px;
    line-height:1.65;
}

.theme-detail-empty__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    margin-top:16px;
    padding:0 14px;
    border-radius:11px;
    background:#1e2229;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:850;
}

/* ---------------------------------------------------------
   Pagination – wie Kategorie
--------------------------------------------------------- */

.theme-pagination{
    margin:6px 0 46px;
}

.theme-pagination__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:18px 20px;
    border:1px solid #e3e8ef;
    border-radius:22px;
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );
    box-shadow:
        0 10px 24px rgba(20,22,28,.04),
        0 18px 40px rgba(20,22,28,.05);
}

.theme-pagination__pages{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:1 1 auto;
    flex-wrap:wrap;
}

.theme-pagination__btn,
.theme-pagination__page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border:1px solid #d9dfe8;
    border-radius:12px;
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #eef2f6 100%
    );
    color:#1d2430;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(20,22,28,.04);
    transition:
        transform .22s var(--ease, ease),
        border-color .22s var(--ease, ease),
        box-shadow .22s var(--ease, ease),
        background .22s var(--ease, ease),
        color .22s var(--ease, ease);
}

.theme-pagination__btn:hover,
.theme-pagination__page:hover{
    transform:translateY(-2px);
    border-color:#c7d0db;
    background:#ffffff;
    box-shadow:0 14px 24px rgba(20,22,28,.08);
}

.theme-pagination__page{
    min-width:44px;
    padding:0 12px;
}

.theme-pagination__page.is-active{
    border-color:rgba(198,40,40,.24);
    background:linear-gradient(
        180deg,
        #fff5f5 0%,
        #fef0f0 100%
    );
    color:#8f1d1d;
    box-shadow:
        0 10px 22px rgba(198,40,40,.10),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.theme-pagination__btn.is-disabled,
.theme-pagination__page.is-disabled{
    opacity:.45;
    pointer-events:none;
    box-shadow:none;
}

.theme-pagination__dots{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    color:#7b8390;
    font-size:16px;
    font-weight:800;
}

/* ---------------------------------------------------------
   SEO-Text
--------------------------------------------------------- */

.theme-content{
    position:relative;
    margin-top:58px;
    padding-top:42px;
    border-top:1px solid #e2e7ed;
}

.theme-content__head{
    width:100%;
    max-width:none;
    margin-bottom:26px;
}

.theme-content__head h2{
    margin:0;
    color:#171a1f;
    font-size:clamp(28px, 3vw, 38px);
    font-weight:900;
    line-height:1.12;
    letter-spacing:-.035em;
}

.theme-content__body{
    width:100%;
    max-width:none;
    color:#4f5966;
    font-size:16px;
    line-height:1.85;
}

.theme-content__body p{
    margin:0 0 22px;
}

.theme-content__body p:last-child{
    margin-bottom:0;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width:1180px){
}

@media (max-width:900px){
    .theme-detail-hero{
        align-items:flex-start;
        flex-direction:column;
        padding:30px;
    }

    .theme-detail-hero__back{
        align-self:flex-start;
    }
}

@media (max-width:700px){
    .theme-page{
        padding-bottom:48px;
    }
	.theme-content{
		margin-top:40px;
		padding-top:30px;
	}

	.theme-content__head{
		margin-bottom:20px;
	}

	.theme-content__head h2{
		font-size:27px;
	}

	.theme-content__body{
		font-size:15px;
		line-height:1.8;
	}

	.theme-content__body p{
		margin-bottom:19px;
	}
    .theme-page .themes-wrap{
        width:min(var(--wrap, 1280px), calc(100% - 18px));
    }

    .theme-breadcrumb{
        margin:12px 0 9px;
    }

    .theme-breadcrumb .breadcrumb__current{
        max-width:190px;
    }

    .theme-detail-hero{
        margin-bottom:34px;
        padding:24px 20px;
        border-radius:21px;
    }

    .theme-detail-hero::after{
        opacity:.55;
    }

    .theme-detail-hero h1{
        font-size:31px;
    }

    .theme-detail-hero__lead{
        margin-top:12px;
        font-size:14px;
        line-height:1.7;
    }

    .theme-detail-meta{
        margin-top:17px;
    }

    .theme-motif-heading{
        align-items:flex-start;
        margin-bottom:14px;
    }

    .theme-motif-heading h2{
        font-size:25px;
    }






    .theme-pagination__inner{
        padding:14px;
        border-radius:18px;
        justify-content:center;
    }

    .theme-pagination__btn{
        width:100%;
    }

    .theme-pagination__pages{
        width:100%;
    }


}

@media (max-width:440px){

    .theme-detail-hero{
        padding:21px 17px;
    }

    .theme-detail-hero h1{
        font-size:28px;
    }

    .theme-detail-hero__back{
        min-height:38px;
        font-size:12px;
    }




}


/* Kategorie-responsive Verhalten für Motivkarten */
@media (max-width:1250px){
    .theme-page .topic-grid--image-cats{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:700px){
    .theme-page .topic-grid--image-cats{
        grid-template-columns:1fr;
        gap:18px;
    }

    .theme-page .topic-card--image{
        border-radius:22px;
    }

    .theme-page .topic-card__media{
        height:230px;
    }

    .theme-page .topic-card__content{
        padding:18px;
        min-height:0;
    }

    .theme-page .topic-card--image h3{
        font-size:20px;
    }


}

@media (max-width:420px){
    .theme-page .topic-card__media{
        height:205px;
    }

    .theme-page .topic-card__placeholder{
        width:76px;
        height:76px;
        border-radius:22px;
        font-size:34px;
    }
}