/* ===== Fächerunterseite • Biologie (scoped) ===== */
.subject-page .table-wrap {
    overflow: auto
}

.subject-page .table {
    width: 100%;
    border-collapse: collapse
}

.subject-page .table th,
.subject-page .table td {
    padding: .5rem;
    border-bottom: 1px solid #eee;
    text-align: left
}

.subject-page .table thead th {
    font-weight: 600;
    color: #333;
    background: #fafafa
}

.subject-page .subject-hero--split {
    display: grid;
    grid-template-columns: min(38ch, 45%) 1fr;
    gap: 1rem;
    align-items: center;
}

.subject-page .meta-badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none
}

.subject-page .badge {
    background: #f2f2f2;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .85rem;
    color: #444
}

.subject-page .section-card {
    border: 1px solid #eee;
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    margin: 1rem 0
}

.subject-page .section-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .5rem
}

.subject-page .section-sub {
    color: #666;
    margin: .25rem 0 0
}

.subject-page .section-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover
}

.subject-page .feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 1rem
}

.subject-page .feature {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: .75rem;
    background: #fafafa
}

.subject-page .cards-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.subject-page .card--soft {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: .75rem
}

.subject-page .info-cards {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: .75rem
}

.subject-page .info {
    background: #fbfbfb;
    border: 1px dashed #e9e9e9;
    border-radius: 12px;
    padding: .75rem
}

.subject-page .team-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start
}

.subject-page .person {
    display: flex;
    gap: .7rem;
    align-items: center;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: .6rem;
    background: #fff
}

.subject-page .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #eee;
    flex-shrink: 0
}

.subject-page .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.subject-page .person__meta {
    display: flex;
    flex-direction: column;
    gap: .15rem
}

.subject-page .person__meta span {
    color: #666;
    font-size: .9rem
}

.subject-page .anchor-btn {
    border: none;
    background: #f5f5f5;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: .25rem .45rem;
    cursor: pointer;
    color: #666
}

.subject-page .anchor-btn:hover {
    background: #efefef
}

.subject-page .toc a.active {
    color: #111;
    font-weight: 600
}

@media (max-width:900px) {
    .subject-page .subject-hero--split {
        grid-template-columns: 1fr
    }
}

/* Hero-Banner */
.subject-page .subject-hero .media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/9
}

.subject-page .subject-hero .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    display: block
}

@media (min-width:900px) {
    .subject-page .subject-hero--split {
        grid-template-columns: minmax(0, 52%) 1fr;
        align-items: center
    }

    .subject-page .subject-hero--split .media {
        aspect-ratio: 21/9
    }
}

/* Seitenrahmen / Maxbreite */
.subject-page {
    --page-max: 100%;
    max-width: 100%;
    padding-inline: .5rem;
    /* schmale Ränder */
    margin-inline: 0;
    background: var(--bg, #fff)
}



.subject-page > .subject-layout,
.subject-page > .subject-hero {
    max-width: 100%;
    margin-inline: 0;
}

/* Buttons & Aktionen */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border, #cdd7eb);
    background: var(--sotr-blue-50, #f7faff);
    color: var(--sotr-blue-700, #20344a);
    transition: all .15s ease
}

.btn:hover {
    background: var(--sotr-blue-50, #eef3fb);
    border-color: var(--sotr-blue-700, #2b4f88)
}

.btn--back::before {
    content: "←";
    margin-right: .4rem
}

.subject-actions {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0
}

.subject-actions--top {
    margin-bottom: 1.25rem
}

.subject-actions--bottom {
    margin-top: 2rem
}

/* Lede/Highlights */
.subject-page .subject-hero .meta .lede {
    margin-top: .25rem;
    color: #2b4f88;
    font-weight: 600
}

.subject-page .quick-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none
}

.subject-page .quick-highlights li {
    padding: .25rem .6rem;
    border: 1px dashed #e0e6f1;
    border-radius: 999px;
    font-size: .9rem;
    color: #3a5f9b;
    background: #f3f7ff
}

/* Pull-Image im Fließtext */
.pull-image {
    margin: .5rem 0 1rem
}

.pull-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px
}

@media (min-width:900px) {
    .pull-image {
        float: right;
        width: min(36ch, 40%);
        margin: .25rem 0 1rem 1.2rem;
        shape-outside: inset(0 round 12px)
    }
}

.prose::after {
    content: "";
    display: table;
    clear: both
}

/* Triptychon */
.media-triptych {
    display: grid;
    gap: .9rem;
    grid-template-columns: 1fr;
    margin: .9rem 0 0
}

.media-triptych .media-card {
    border: 1px solid #e6ecf4;
    border-radius: 14px;
    overflow: hidden;
    background: #f6f8fb;
    aspect-ratio: 4/3
}

.media-triptych .media-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

@media (min-width:780px) {
    .media-triptych {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* KC / Curricula */
.subject-page .kc-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .25rem 0 .75rem
}

.subject-page .table th,
.subject-page .table td {
    padding: .45rem .55rem;
    vertical-align: top
}

.subject-page .table td:first-child {
    white-space: nowrap
}

.year-image-strip {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: .9rem
}

.year-image-card {
    border: 1px solid #e6ecf4;
    border-radius: 12px;
    overflow: hidden;
    background: #f6f8fb
}

.year-image-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block
}

.year-image-card figcaption {
    font-size: .9rem;
    color: #334;
    padding: .4rem .6rem;
    background: #fff;
    border-top: 1px solid #eef3f8
}

.curriculum-cards {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
}

@media (min-width:1000px) {
    .curriculum-cards {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
    }
}

.curriculum-card {
    border: 1px solid #e6ecf4;
    background: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.curriculum-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid #eef3f8;
    padding: .5rem
}

.curriculum-card__media img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block
}

@media (min-width:1200px) {
    .curriculum-card__media img {
        max-height: 160px
    }
}

.curriculum-card__media--placeholder {
    width: 100%;
    height: 160px;
    background: #f6f8fb
}

.curriculum-card__body {
    padding: .65rem .75rem .75rem;
    display: grid;
    gap: .45rem
}

.curriculum-card__meta {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    align-items: center
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: .22rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .88rem;
    border: 1px solid #dbe5f5;
    background: #f5f8ff;
    color: #233a60
}

.chip--hours {
    background: #f7fbf4;
    border-color: #dcecdc;
    color: #254b29
}

.curriculum-card__topics {
    margin: .15rem 0 0 1rem
}

.curriculum-card__topics li {
    list-style: disc;
    margin: .12rem 0
}

/* Leistungsbewertung */
#bewertung .bewertung-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: start
}

#bewertung .bewertung-image {
    margin: 0;
    display: flex;
    justify-content: center
}

#bewertung .bewertung-image img {
    max-width: 100%;
    width: min(320px, 100%);
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    background: #f9fafc;
    padding: .75rem;
    border: 1px solid #e0e6f0
}

#bewertung .bewertung-text h4 {
    margin-top: .75rem;
    margin-bottom: .25rem
}

#bewertung .bewertung-text p {
    margin-bottom: .65rem;
    line-height: 1.45
}

@media (min-width:768px) {
    #bewertung .bewertung-layout {
        grid-template-columns: minmax(260px, 320px) 1fr;
        column-gap: 1.25rem
    }

    #bewertung .bewertung-image {
        justify-self: start
    }

    #bewertung .bewertung-text {
        align-self: start
    }
}

@supports not (display:grid) {
    #bewertung .bewertung-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 1.1rem
    }

    #bewertung .bewertung-image {
        flex: 0 0 320px
    }

    #bewertung .bewertung-text {
        flex: 1 1 300px
    }
}

/* Lehrwerke-Galerie */
.lehrwerke-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.25rem
}

.lehrwerke-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 1 360px;
    max-width: 400px
}

.lehrwerke-image img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #e0e6f0;
    background: #f9fafc;
    padding: .5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    transition: transform .2s ease
}

.lehrwerke-image img:hover {
    transform: scale(1.02)
}

.lehrwerke-image figcaption {
    margin-top: .4rem;
    font-size: .9rem;
    color: var(--muted, #5c708a);
    line-height: 1.3
}

@media (max-width:700px) {
    .lehrwerke-gallery {
        flex-direction: column;
        align-items: center
    }

    .lehrwerke-image {
        flex: 1 1 auto;
        max-width: 90%
    }
}

/* Natur erleben – (große) Galerie + kompakte Variante */
.gallery-block {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center
}

.gallery-wrapper {
    position: relative;
    max-width: 640px;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #d9e2ef;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05)
}

.gallery-slide {
    display: none
}

.gallery-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    transition: opacity 1s ease-in-out
}

.fade {
    animation: fadeEffect 1s
}

@keyframes fadeEffect {
    from {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

.gallery-prev,
.gallery-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: .4rem .75rem;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    background-color: rgba(0, 0, 0, .3);
    border: none;
    border-radius: 50%;
    transition: background-color .2s ease
}

.gallery-prev:hover,
.gallery-next:hover {
    background-color: rgba(0, 0, 0, .55)
}

.gallery-prev {
    left: .5rem
}

.gallery-next {
    right: .5rem
}

@media (max-width:700px) {
    .gallery-wrapper {
        max-width: 95%
    }

    .gallery-prev,
    .gallery-next {
        font-size: 1.2rem
    }
}

/* Kompakte Slideshow #natur-erleben */
#natur-erleben .nl-gallery {
    --nl-width: 520px;
    --nl-radius: 12px;
    --nl-btn-size: 34px;
    --nl-btn-bg: rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    margin-top: .9rem;
    width: 100%
}

#natur-erleben .nl-gallery__viewport {
    position: relative;
    width: min(100%, var(--nl-width));
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--nl-radius);
    border: 1px solid #dbe5f5;
    background: #f7f9fc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05)
}

#natur-erleben .nl-gallery__slide {
    position: absolute;
    inset: 0;
    transition: transform .5s ease;
    will-change: transform
}

#natur-erleben .nl-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--nl-radius)
}

#natur-erleben .nl-gallery__btn {
    position: relative;
    margin-top: .5rem;
    border: none;
    width: var(--nl-btn-size);
    height: var(--nl-btn-size);
    border-radius: 999px;
    background: var(--nl-btn-bg);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background-color .2s ease, transform .1s ease
}

#natur-erleben .nl-gallery__btn:hover {
    background: rgba(0, 0, 0, .5);
    transform: scale(1.03)
}

#natur-erleben .nl-gallery__btn--prev {
    margin-right: .5rem
}

@media (min-width:720px) {
    #natur-erleben .nl-gallery {
        grid-template-columns: minmax(280px, var(--nl-width));
        justify-content: center
    }

    #natur-erleben .nl-gallery__btn {
        position: absolute;
        margin: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        background: var(--nl-btn-bg)
    }

    #natur-erleben .nl-gallery__btn--prev {
        left: .5rem
    }

    #natur-erleben .nl-gallery__btn--next {
        right: .5rem
    }
}

/* Lernorte: 2-Spalten + Slideshow */
#lernorte .lernorte-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start
}

@media (min-width:960px) {
    #lernorte .lernorte-grid {
        grid-template-columns: 1fr minmax(300px, 520px);
        gap: 1.5rem
    }
}

#lernorte .lernorte-text h4 {
    margin-top: .6rem;
    margin-bottom: .25rem
}

#lernorte .lernorte-text p {
    margin: .35rem 0 .6rem;
    line-height: 1.55
}

#lernorte .lernorte-gallery {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-inline: auto
}

#lernorte .lernorte-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #dbe5f5;
    background: #f7f9fc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05)
}

#lernorte .lernorte-slide {
    position: absolute;
    inset: 0;
    transition: transform .5s ease
}

#lernorte .lernorte-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px
}

#lernorte .lernorte-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s ease, transform .1s ease
}

#lernorte .lernorte-btn:hover {
    background: rgba(0, 0, 0, .5);
    transform: translateY(-50%) scale(1.03)
}

#lernorte .lernorte-btn--prev {
    left: .5rem
}

#lernorte .lernorte-btn--next {
    right: .5rem
}

@media (max-width:959px) {
    #lernorte .lernorte-gallery {
        max-width: 100%
    }
}

/* Fachkollegium */
.fachkollegium {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
    margin-top: 1.5rem
}

.fachkollegium-group {
    max-width: 640px
}

.fachkollegium-group img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.fachkollegium-group .caption {
    font-size: .9rem;
    color: var(--muted, #5c708a);
    margin-top: .5rem
}

.fachkollegium-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    width: 100%;
    max-width: 900px;
    list-style: none;
    padding: 0;
    margin: 0 auto
}

.teacher-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d9e2ef);
    border-radius: var(--radius, 8px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .2s ease, box-shadow .2s ease
}

.teacher-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
}

.teacher-avatar {
    width: 80px;
    height: 80px;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--sotr-blue-50, #eef3fb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Bild bleibt im Kreis */
}

/* HART festgelegte Icon-Größe mit hoher Spezifität,
   damit sie sicher greift (falls andere Regeln existieren). */
.subject-page .teacher-card .avatar-placeholder img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    display: block;
}

.teacher-info strong {
    display: block;
    color: var(--fg, #1f2d3d)
}

.teacher-info span {
    font-size: .9rem;
    color: var(--muted, #5c708a)
}

/* === Alias: 2-Spalten-Layout + kompakter Slider wie bei #lernorte === */
.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start
}

@media (min-width:960px) {
    .split-grid {
        grid-template-columns: 1fr minmax(300px, 520px);
        gap: 1.5rem
    }
}

.split-gallery {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-inline: auto
}

.split-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #dbe5f5;
    background: #f7f9fc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05)
}

.split-slide {
    position: absolute;
    inset: 0;
    transition: transform .5s ease
}

.split-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px
}

.split-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s ease, transform .1s ease
}

.split-btn:hover {
    background: rgba(0, 0, 0, .5);
    transform: translateY(-50%) scale(1.03)
}

.split-btn--prev {
    left: .5rem
}

.split-btn--next {
    right: .5rem
}

@media (max-width:959px) {
    .split-gallery {
        max-width: 100%
    }
}

/* --- Slideshow mit Overlay-Text (Variante 1) --- */
/* --- Slideshow mit Overlay-Text (auf dem Bild, bündig unten) --- */
/* Overlay-Caption wirklich auf dem Bild, ohne weißen Rand darunter */
.split-gallery .split-viewport {
    position: relative;
    overflow: hidden;
    /* nichts ragt raus */
    border-radius: 12px;
}

.split-gallery .split-slide {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    /* Figure-Standardabstand entfernen */
    border-radius: 12px;
    overflow: hidden;
    /* Caption in der Rundung halten */
    transition: transform .5s ease;
}

.split-gallery .split-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* füllt die gesamte Fläche */
    display: block;
}

.split-gallery .split-slide > figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .4rem .6rem;
    text-align: center;
    font-size: .9rem;
    line-height: 1.3;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(3px);
}

.split-gallery .split-slide:hover > figcaption {
    background: rgba(0, 0, 0, .55);
}

/* ===== Tabs-Navigation (ergänzt vorhandene Buttons) ===== */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-bottom: 2px solid var(--border, #d9e2ef);
    padding-bottom: .25rem;
    margin-bottom: 1.5rem;
}

.tab-nav .btn {
    border-radius: 0;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--sotr-blue-700, #2b4f88);
    font-weight: 500;
    transition: all .2s ease;
}

.tab-nav .btn:hover {
    background: var(--sotr-blue-50, #eef3fb);
    color: var(--sotr-blue, #3a5f9b);
}

.tab-nav .btn.is-active,
.tab-nav .btn[aria-selected="true"] {
    border-bottom-color: var(--sotr-orange, #f6a34b);
    color: var(--sotr-orange, #f6a34b);
    background: var(--sotr-blue-50, #eef3fb);
}

/* Responsiv: Tabs umbrechen */
@media (max-width: 700px) {
    .tab-nav {
        justify-content: center;
        border-bottom: none;
        gap: .25rem;
    }

    .tab-nav .btn {
        border-radius: 999px;
        border: 1px solid var(--border, #d9e2ef);
        border-bottom: 2px solid transparent;
    }
}

/* Bildbegrenzung in der Prose-Spalte */
.split-grid .prose img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}


/* Grundlayout für alle Icons */
.avatar-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--sotr-blue-50, #eef3fb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    /* Größe des Symbols */
    overflow: hidden;
}

/* Fachspezifische Icons */
.icon-bio {
    background-image: url("icon/biologie.png");
}

.icon-ch {
    background-image: url("icon/chemie.png");
}


.icon-ds {
    background-image: url("icon/darstellendes-spiel.png");
}

.icon-ek {
    background-image: url("icon/erdkunde.png");
}

.icon-franz {
    background-image: url("icon/franzoesisch.png");
}

.icon-ge {
    background-image: url("icon/geschichte.png");
}

.icon-inf {
    background-image: url("icon/medienkunde-informatik.png");
}

.icon-ku {
    background-image: url("icon/kunst.png");
}

.icon-la {
    background-image: url("icon/latein.png");
}

.icon-ma {
    background-image: url("icon/mathematik.png");
}

.icon-mu {
    background-image: url("icon/musik.png");
}

.icon-pl {
    background-image: url("icon/philosophie.png");
}

.icon-ph {
    background-image: url("icon/physik.png");
}

.icon-pw {
    background-image: url("icon/politik-wirtschaft.png");
}

.icon-bil {
    background-image: url("icon/bilingual-politik-wirtschaft.png");
}

.icon-re {
    background-image: url("icon/religion.png");
}

.icon-sn {
    background-image: url("icon/spanisch.png");
}

.icon-sp {
    background-image: url("icon/sport.png");
}

.icon-wn {
    background-image: url("icon/werte-und-normen.png");
}

/* === Fachspezifische Icons === */
.icon-bio {
    background-image: url("icon/biologie.png");
}

.icon-ch {
    background-image: url("icon/chemie.png");
}

.icon-de {
    background-image: url("icon/deutsch.png");
}

.icon-en {
    background-image: url("icon/englisch.png");
}

.icon-ds {
    background-image: url("icon/darstellendes-spiel.png");
}

.icon-ek {
    background-image: url("icon/erdkunde.png");
}

.icon-franz {
    background-image: url("icon/franzoesisch.png");
}

.icon-ge {
    background-image: url("icon/geschichte.png");
}

.icon-inf {
    background-image: url("icon/medienkunde-informatik.png");
}

.icon-ku {
    background-image: url("icon/kunst.png");
}

.icon-la {
    background-image: url("icon/latein.png");
}

.icon-ma {
    background-image: url("icon/mathematik.png");
}

.icon-mu {
    background-image: url("icon/musik.png");
}

.icon-pl {
    background-image: url("icon/philosophie.png");
}

.icon-ph {
    background-image: url("icon/physik.png");
}

.icon-pw {
    background-image: url("icon/politik-wirtschaft.png");
}

.icon-bil {
    background-image: url("icon/bilingual-politik-wirtschaft.png");
}

.icon-re {
    background-image: url("icon/religion.png");
}

.icon-sn {
    background-image: url("icon/spanisch.png");
}

.icon-sp {
    background-image: url("icon/sport.png");
}

.icon-wn {
    background-image: url("icon/werte-und-normen.png");
}

/* === Einheitliche Darstellung === */
.avatar-placeholder[class^="icon-"],
.avatar-placeholder[class*=" icon-"] {
    background-color: #f5f7fa;
    /* neutraler Hintergrund */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    /* Symbolgröße (50–70 % je nach Geschmack) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Foto-Galerie: 1 / 2 / 4 Spalten */
.photo-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 1rem 0;
}

@media (min-width:700px) {
    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1200px) {
    .photo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}




/* ===== XL Slider (standalone) ============================================ */
.xl-slider {
    --xl-width: 960px;
    /* Gesamtbreite am Desktop */
    --xl-radius: 14px;
    /* Rundung */
    --xl-btn-size: 44px;
    /* Pfeilgröße */
    --xl-dot-size: 9px;
    /* Punktgröße */
    --xl-aspect: 16/9;
    /* Seitenverhältnis Desktop */
    --xl-aspect-mobile: 4/3;
    /* Seitenverhältnis Mobil */
    --xl-shadow: 0 8px 20px rgba(0, 0, 0, .06);

    display: grid;
    place-items: center;
    margin: 1.2rem auto;
    width: min(100%, var(--xl-width));
}

.xl-slider__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: var(--xl-aspect);
    border-radius: var(--xl-radius);
    overflow: hidden;
    background: #f6f8fb;
    border: 1px solid #dbe5f5;
    box-shadow: var(--xl-shadow);
}

@media (max-width:720px) {
    .xl-slider__viewport {
        aspect-ratio: var(--xl-aspect-mobile);
    }
}

/* Slides */
.xl-slide {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform .55s ease;
    display: flex;
}

.xl-slide.is-active {
    transform: translateX(0);
}

.xl-slide.is-prev {
    transform: translateX(-100%);
}

.xl-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caption (Overlay) */
.xl-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .8rem 1rem;
    color: #fff;
    line-height: 1.35;
    font-size: clamp(.92rem, .86rem + .25vw, 1rem);
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Pfeile */
.xl-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: var(--xl-btn-size);
    height: var(--xl-btn-size);
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.xl-btn:hover {
    background: rgba(0, 0, 0, .55);
    transform: translateY(-50%) scale(1.05);
}

.xl-btn--prev {
    left: .65rem;
}

.xl-btn--next {
    right: .65rem;
}

/* Dots */
.xl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .5rem;
    display: flex;
    gap: .45rem;
    justify-content: center;
    z-index: 3;
}

.xl-dots button {
    width: var(--xl-dot-size);
    height: var(--xl-dot-size);
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .55);
}

.xl-dots button.is-active {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .15) inset;
}

/* Barrierearmut & Motion-Respect */
.xl-slider__viewport:focus-visible {
    outline: 2px solid #6ea0ff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .xl-slide {
        transition: none !important;
    }
}