/* ==========================================================
   SOZTHEO FILMKANON
   ========================================================== */


/* ==========================================================
   EINZELSEITE
   ========================================================== */

.film-short-description {
    margin-bottom: 2rem;
}

.film-trailer iframe {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    height: auto;
}

.rating-logo {
    height: 18px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: .4rem;
}

.film-ratings .theme-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.film-external-links {
    margin-top: .75rem;
}

.film-medium-badge {
    display: inline-block;
    margin: .15rem 0 .5rem;
    padding: .15rem .55rem;
    border: 1px solid #990000;
    border-radius: 999px;
    color: #990000;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

.soztheo-film-profile h2 {
    font-size: 1.55rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e5e5;
}

.soztheo-film-profile ul li {
    list-style-type: disc !important;
    list-style-position: outside;
}

.soztheo-film-profile ol li {
    list-style-type: decimal !important;
}

.soztheo-film-profile .film-meta ul {
    padding-left: 0 !important;
}

.soztheo-film-profile .film-meta ul li {
    list-style: none !important;
}

.soztheo-film-profile h2 {
    font-size: 1.45rem;
    font-weight: 700;
}

.soztheo-film-profile h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.film-kanon-nav-title{
    font-size:1.3rem;
}

.film-kanon-overview-title {
	 font-size: 1.3rem;
    font-weight: 700;
}

.recommended-image-link {
    flex:0 0 160px;
}

.recommended-image-link  img{
    width:160px;
}

/* ==========================================================
   FILMKANON GRID
   ========================================================== */

.film-kanon-grid {
    margin-top: 1.5rem;
}

.film-kanon-grid article.film-kanon-card {

    display: grid !important;

    grid-template-columns: 260px minmax(0,1fr);

    grid-template-areas: "image content";

    column-gap: 2rem;

    align-items: start;

    width: 100%;

    padding: 2rem 0;

    margin: 0;

    border-bottom: 1px solid #e5e5e5;

}

.film-kanon-card-image {

    grid-area:image;

    display:block;

    width:260px;

    height:260px;

}

.film-kanon-card-image img{

    width:260px;

    height:260px;

    object-fit:cover;

    border-radius:8px;

    display:block;

}

.film-kanon-card-content{

    grid-area:content;

}

.film-kanon-card-title{

    margin:0 0 .75rem;

    font-size:1.4rem;

    line-height:1.3;

}

.film-kanon-card-title a{

    color:#222;

    text-decoration:none;

}

.film-kanon-card-title a:hover{

    color:#990000;

}

.film-card-meta{

    font-size:.95rem;

    color:#666;

    margin-bottom:.75rem;

}

.film-kanon-card-excerpt{

    line-height:1.65;

}

/* Film-Grid: Titel schwarz halten */
.film-kanon-card-title a {
    color: #222 !important;
}

.film-kanon-card-title a:hover {
    color: #990000 !important;
}

/* A–Z-Ansicht */

.film-az-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.film-az-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid #e5e5e5;
	align-items: center;
}

.film-az-card > a {
    display: block;
    width: 160px;
    height: 160px;
}

.film-az-card img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.film-az-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.film-az-card h3 a {
    color: #222;
    text-decoration: none;
}

.film-az-card h3 a:hover {
    color: #990000;
}

.film-az-card .film-medium-badge {
    display: inline-block;
    width: auto;
    max-width: max-content;
    margin: 0 0 0.7rem;
}

.film-az-card p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.film-az-card-content {
    display: block;
}

.film-az-card-content .film-medium-badge {
    display: inline-block;
    width: auto;
    max-width: max-content;
    margin: 0 0 0.7rem;
}

.film-az-backtop {
    margin: 0 0 3rem;
    font-size: 0.9rem;
}

.film-az-backtop a {
    color: #990000;
    font-weight: 600;
    text-decoration: none;
}

.film-az-backtop a:hover {
    text-decoration: underline;
}

.film-az-nav {
    margin: 2rem 0 3rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fafafa;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.film-az-nav a {
    display: inline-block;
    margin: 0 0.45rem 0.35rem 0;
    color: #990000;
    text-decoration: none;
}

.film-az-nav a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .film-az-card {
        grid-template-columns: 1fr;
    }

    .film-az-card > a,
    .film-az-card img {
        width: 100%;
        height: auto;
    }
}

/* ==========================================================
   FOOTERNAVIGATION
   ========================================================== */

.film-kanon-footer-nav {

    margin-top:4rem;

    padding-top:2rem;

    border-top:1px solid #e5e5e5;

}

.film-kanon-footer-nav-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

}

.film-kanon-nav-item{

    display:flex;

    align-items:center;

    gap:.85rem;

    width:32%;

    color:#333;

    text-decoration:none;

}

.film-kanon-nav-next{

    flex-direction:row-reverse;

    text-align:right;

}

.film-kanon-nav-item img{

    width:70px;

    height:70px;

    object-fit:cover;

    border-radius:6px;

    transition:transform .2s ease;

}

.film-kanon-nav-item:hover img{

    transform:scale(1.05);

}

.film-kanon-nav-text{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.film-kanon-nav-direction{

    font-size:.8rem;

    color:#999;

}

.film-kanon-nav-title{

    font-weight:700;

    color:#222;

}

.film-kanon-nav-item:hover .film-kanon-nav-title{

    color:#990000;

}

.film-kanon-nav-overview{

    display:inline-flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-width:190px;

    padding:.8rem 1.25rem;

    border:1px solid #990000;

    border-radius:999px;

    color:#990000;

    text-decoration:none;

    text-align:center;

}

.film-kanon-overview-title{

    font-weight:700;

}

.film-kanon-overview-count{

    margin-top:.15rem;

    font-size:.82rem;

    color:#777;

}

.film-kanon-overview-subtitle{

    margin-top:.1rem;

    font-size:.75rem;

    color:#777;

}

.film-kanon-nav-overview:hover{

    background:#990000;

    color:#fff;

}

.film-kanon-nav-overview:hover .film-kanon-overview-count,

.film-kanon-nav-overview:hover .film-kanon-overview-subtitle{

    color:#fff;

}


/* ==========================================================
   LANDINGPAGE
   ========================================================== */

.film-categories-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin:30px 0 50px;

}

.film-category-card{

    display:flex;

    flex-direction:column;

    padding:24px;

    border:1px solid #d8d8d8;

    border-radius:8px;

    background:#fff;

    transition:.2s ease;

}

.film-category-card:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.film-category-card h3{

    margin:0 0 15px;

    font-size:1.2rem;

}

.film-category-card h3 a{

    color:#222;

    text-decoration:none;

}

.film-category-card h3 a:hover{

    color:#990000;

}

.film-category-card p{

    flex-grow:1;

    margin-bottom:20px;

    color:#555;

    line-height:1.6;

}

.film-category-link{

    color:#990000;

    font-weight:600;

}


/* ==========================================================
   SONSTIGES
   ========================================================== */

.film-related-strip{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .film-categories-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .film-kanon-footer-nav-inner{

        flex-direction:column;

        align-items:stretch;

    }

    .film-kanon-nav-item{

        width:100%;

    }

    .film-kanon-nav-next{

        flex-direction:row;

        text-align:left;

    }

    .film-kanon-nav-overview{

        order:-1;

        align-self:center;

    }

}

@media (max-width:700px){

    .film-kanon-grid article.film-kanon-card{

        grid-template-columns:1fr;

        grid-template-areas:

            "image"

            "content";

    }

    .film-kanon-card-image,

    .film-kanon-card-image img{

        width:100%;

        height:auto;

    }

}

@media (max-width:650px){

    .film-categories-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   FILMKANON KATEGORIEARCHIVE
   ========================================================== */

.film-category-archive {
    max-width: 960px;
    margin: 0 auto;
}

.film-category-header {
    margin-bottom: 3rem;
}

.film-category-intro {
    font-size: 1.08rem;
    line-height: 1.8;
    color: #444;
}

.film-category-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

.film-category-box {
    margin: 3rem 0;
}

.film-category-box h2 {
    font-size: 1.55rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.film-category-dossier {
    border: 1px solid #d8d8d8;
    border-left: 4px solid #990000;
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    background: #fff;
}

.film-category-dossier h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.film-category-dossier-link {
    font-weight: 700;
    color: #990000;
    text-decoration: none;
}

.film-category-dossier-link:hover {
    text-decoration: underline;
	font-size: 1.05rem;
}

.film-category-relation-group {
    margin-bottom: 2rem;
}

.film-category-relation-group h3 {
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
}

.film-category-films {
    margin-top: 4rem;
}

/* Filmkanon Kategoriearchive */

.film-category-archive {
    max-width: 960px;
    margin: 0 auto;
}

.film-category-intro {
    margin-bottom: 3rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

.film-category-box {
    margin: 3rem 0;
}

.film-category-box h2 {
    font-size: 1.55rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.film-category-dossier {
    border: 1px solid #d8d8d8;
    border-left: 4px solid #990000;
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    background: #fff;
    margin: 2.5rem 0;
}

.film-category-dossier h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.film-category-dossier-link {
    font-weight: 700;
	font-size: 1.05rem;
    color: #990000;
    text-decoration: none;
}

.film-category-relation-group {
    margin-bottom: 2.5rem;
}

.film-category-relation-group h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.film-category-dossier-text,
.film-category-dossier-text p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #444;
}

.film-category-archive .film-kanon-card-excerpt {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.film-category-archive .film-kanon-card-title {
    font-size: 1.35rem !important;
}

.film-category-archive .film-card-meta {
    font-size: 0.95rem !important;
}

.film-category-archive .film-kanon-card {
    grid-template-columns: 220px 1fr;
}

.film-category-archive .film-kanon-card-image,
.film-category-archive .film-kanon-card-image img {
    width:220px;
    height:220px;
}

.film-category-card-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto .1rem;
}

.film-category-intro-text,
.film-category-intro-text p {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #444;
    margin-bottom: 2rem;
}

.tax-film_category .archive-description,
.tax-film_category .taxonomy-archive-description,
.tax-film_category .taxonomy-description {
    max-width: 960px;
    margin: 0 auto 2rem !important;
    padding: 0 !important;
}

.tax-film_category .archive-title {
    font-size: 2.5rem;
}