/* ================================
   X-by-Wire – Clean Styles (v12.1)
   Fokus: unverändertes Layout + bessere Bilddarstellung
   ================================ */

/* ---------- Theme Vars ---------- */
:root{
    --bg:#0c1118;
    --bg-soft:#0f1624;
    --surface:#121a26;
    --text:#cfd7e6;
    --text-muted:#a9b7ce;
    --head:#eaf0ff;
    --brand:#5e86ff;
    --link:#8ab4ff;
    --link-hover:#cfe0ff;
    --border:rgba(255,255,255,0.08);
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:14px;
    --nav-h:46px;

    /* Hero Vars */
    --hero-max-h:100vh;
    --hero-min-h:56vh;
    --hero-h:var(--hero-max-h);
    --hero-zoom:1.05;
    --hero-shift:0px;
    --hero-opacity:1;

    /* Offsets */
    --abstract-right-offset:80px;
    --partner-offset:72px;
}

/* === LIGHT THEME (Independent Style) === */
:root[data-theme="light"]{
    --bg:#f3f4f6;
    --bg-soft:#ffffff;
    --surface:#ffffff;
    --text:#1e293b;
    --text-muted:#64748b;
    --head:#0f172a;

    --brand:#2563eb;
    --link:#2563eb;
    --link-hover:#1e40af;

    --border:rgba(0,0,0,0.07);
    --shadow:0 10px 24px rgba(15,23,42,0.08);
    --radius:14px;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }

body.section-white.profile-page{
    background:var(--bg);
    color:var(--text);
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height:1.7;
    font-size:17px;

    /* VORHER: padding-top: calc(var(--nav-h) + 40px); */
    padding-top:calc(var(--nav-h) + 18px);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:none; }

.title{ color:var(--head); font-weight:800; letter-spacing:.2px; font-size:2rem; }
.subtitle{ color:var(--head); font-weight:800; font-size:1.4rem; margin:1rem 0 .5rem; }
.lead{ font-weight:500; }
.description, .card-description, .category.text-muted, p{ color:var(--text-muted); }
.section-intro{ font-size:1.04rem; color:var(--text-muted); max-width:900px; margin:0 auto; }

.container, .container-fluid{ padding-left:18px; padding-right:18px; }
@media (min-width:1600px){
    .container-fluid{ padding-left:36px; padding-right:36px; }
}

#abstract .title,
#details .title,
#team .title{
    position:relative;
    display:inline-block;
}
#abstract .title::after,
#details .title::after,
#team .title::after{
    content:"";
    display:block;
    height:3px;
    margin-top:10px;
    width:100%;
    background:linear-gradient(90deg, var(--brand) 0%, rgba(255,255,255,0) 100%);
    border-radius:2px;
}

:focus-visible{
    outline:3px solid rgba(138,180,255,.45);
    outline-offset:2px;
    border-radius:8px;
}
.navbar a:focus-visible{ outline-offset:6px; }
.img-missing{ filter:grayscale(1) contrast(.9); opacity:.7; }

/* ---------- NAVBAR ---------- */
.navbar.navbar-default.navbar-fixed-top{
    position: fixed;
    top:12px;
    left:12px;
    right:12px;
    min-height:var(--nav-h);
    padding:0 8px;
    border-radius:10px;
    background: rgba(12,17,24,0.35);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.25);
    transform:translateY(0);
    transition: background .25s, box-shadow .25s, transform .25s;
    z-index:1030;
}
.navbar.navbar-default.navbar-fixed-top.scrolled{
    background: rgba(12,17,24,0.6);
    backdrop-filter: blur(20px) saturate(180%);
}
:root[data-theme="light"] .navbar.navbar-default.navbar-fixed-top{
    background:rgba(255,255,255,0.9);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border:1px solid rgba(0,0,0,0.05);
    box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
:root[data-theme="light"] .navbar.navbar-default.navbar-fixed-top.scrolled{
    background:rgba(255,255,255,0.6);
}

.navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.navbar .navbar-header{ margin:0; }
.navbar .nav.navbar-right.no-toggle{
    display:flex;
    align-items:center;
    gap:4px;
    margin:0;
}
.navbar-toggle{ display:none !important; }

.navbar .nav,
.navbar .nav.navbar-right,
.navbar .nav.navbar-right.no-toggle{
    list-style:none;
    margin:0;
    padding:0;
}
.navbar .nav>li{
    display:inline-flex;
    align-items:center;
    height:var(--nav-h);
}
.navbar .nav>li+li{ margin-left:6px; }

.navbar .nav>li>a,
.navbar .nav .btn.nav-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--nav-h);
    line-height:var(--nav-h);
    padding:0 12px;
    font-size:.93rem;
    color:var(--head);
    background:transparent;
    border:none;
    box-shadow:none;
    transition: color .2s, background .2s;
}
.navbar .nav>li>a:hover,
.navbar .nav .btn.nav-icon:hover{
    color:var(--link-hover);
    background: rgba(255,255,255,0.06);
}
:root[data-theme="light"] .navbar .nav>li>a{ color:#1f2a3a; }
:root[data-theme="light"] .navbar .nav>li>a:hover{
    background:rgba(0,0,0,0.06);
    color:#0e1726;
}

.navbar .nav>li>a.is-active{
    background:rgba(255,255,255,0.08);
    border-radius:999px;
}

.navbar .navbar-brand{
    height:var(--nav-h);
    line-height:var(--nav-h);
    font-size:1rem;
    font-weight:800;
    padding:0 10px;
    color:#ffffff !important;
    letter-spacing:.4px;
    text-shadow:none !important;
    transition:opacity .3s;
}
.navbar .navbar-brand:hover{ opacity:.8; }
:root[data-theme="light"] .navbar .navbar-brand{ color:#0f172a !important; }

.navbar .material-icons{
    font-size:20px;
    line-height:1;
    vertical-align:middle;
}

@media (max-width:991px){
    .navbar.navbar-default.navbar-fixed-top{
        top:0;
        left:0;
        right:0;
        border-radius:0;
        transform:none;
    }

    /* VORHER: padding-top: calc(var(--nav-h) + 20px); */
    body.section-white.profile-page{
        padding-top: calc(var(--nav-h) + 10px);
    }
}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    height:var(--hero-h);
    min-height:280px;
    border-radius:14px;

    /* VORHER: margin:4px 0 18px; */
    margin:0 0 18px;

    overflow:hidden;
    transition:height .18s;
}
.hero__media{
    position:absolute;
    inset:0;
    overflow:hidden;
}
.hero__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform: scale(var(--hero-zoom)) translateY(var(--hero-shift));
    transition: transform .18s;
    will-change: transform;
}
.hero__shade{
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(6,10,16,.35), rgba(6,10,16,.7));
}
:root[data-theme="light"] .hero__shade{
    background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5));
}

/* Text exakt mittig (kein Offset) */
body.section-white.profile-page header.hero>.hero__overlay{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    place-content:center !important;
    justify-items:center !important;
    align-items:center !important;
    padding:0 !important;
    margin:0 !important;
    text-align:center !important;
    transform:none !important;
}

.hero__badge,
.hero__title,
.hero__subtitle{
    color:#f0f4ff;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero__title{
    margin:0 0 .4rem;
    font-weight:900;
    line-height:1.05;
    font-size:clamp(34px, 7vw, 78px);
    letter-spacing:0.12em;
    text-transform:uppercase;
    max-width:90vw;
    margin-left:auto;
    margin-right:auto;
}

.hero__subtitle{
    margin:0;
    font-size:clamp(14px, 2.3vw, 18px);
    max-width:90vw;
    margin-left:auto;
    margin-right:auto;
}

.hero__title,
.hero__subtitle{
    opacity:0;
    transform: translateY(26px) scale(0.9);
    filter: blur(6px);
    will-change: opacity, transform, filter;
}
.hero.hero-anim-start .hero__title{
    animation: heroTitleIn 0.85s cubic-bezier(0.23, 0.78, 0.35, 1.05) forwards;
}
.hero.hero-anim-start .hero__subtitle{
    animation: heroSubtitleIn 0.9s cubic-bezier(0.23, 0.78, 0.35, 1.05) 0.12s forwards;
}

@keyframes heroTitleIn{
    0%{
        opacity:0;
        transform: translateY(30px) scale(0.88);
        filter: blur(8px);
        letter-spacing:0.3em;
    }
    55%{
        opacity:1;
        transform: translateY(-4px) scale(1.05);
        filter: blur(1px);
        letter-spacing:0.18em;
    }
    100%{
        opacity:1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        letter-spacing:0.12em;
    }
}

@keyframes heroSubtitleIn{
    0%{
        opacity:0;
        transform: translateY(22px);
        filter: blur(8px);
    }
    100%{
        opacity:1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-cta{
    margin-top:1.3rem;
    padding:0.7rem 1.8rem;
    border-radius:999px;
    border:none;
    background:linear-gradient(135deg, #5e86ff, #8aafff);
    color:#fff;
    font-weight:600;
    font-size:0.98rem;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
    transform:translateY(0);
    transition:transform .2s, box-shadow .2s, filter .2s;
}
.hero-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 38px rgba(0,0,0,0.45);
    filter:brightness(1.05);
}

.hero-scroll-hint{
    position:absolute;
    left:50%;
    bottom:18px;
    opacity:0.8;
    animation:scrollHint 1.6s ease-in-out infinite;
}
.hero-scroll-hint .material-icons{ font-size:30px; }

/* Scroll-Pfeil im Hero immer hell lassen */
.hero-scroll-hint{ color:#ffffff; }
.hero-scroll-hint .material-icons{ color:#ffffff !important; }

@keyframes scrollHint{
    0%,100%{ transform:translate(-50%, 0); opacity:0.5; }
    50%{ transform:translate(-50%, 6px); opacity:1; }
}

@media (min-width:1400px){
    .hero__title,
    .hero__subtitle{ max-width:60vw; }
}
@media (max-width:576px){
    .hero__title{ font-size:clamp(24px, 8vw, 40px); }
    .hero__subtitle{ font-size:.95rem; }
}

/* ---------- ABSTRACT ---------- */
#abstract .row.justify-content-center .col-12,
#abstract .row.justify-content-center .col-md-10,
#abstract .row.justify-content-center .col-lg-8{
    max-width:820px;
    margin-inline:auto;
    text-align:center;
}
#abstract h2.title{
    text-align:center;
    margin-bottom:.6rem;
}
#abstract .lead.description{
    text-align:center;
    margin-inline:auto;
    max-width:820px;
}

.abstract-grid{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:24px;
    align-items:start;
    margin-top:14px;
}
@media (max-width:992px){
    .abstract-grid{ grid-template-columns:1fr; }
}

.abstract-right{
    display:flex;
    flex-direction:column;
    gap:18px;
}
@media (min-width:992px){
    .abstract-right{ margin-top: var(--partner-offset) !important; }
}
@media (min-width:1200px){
    .abstract-right{ margin-top:111px !important; }
}
@media (max-width:991.98px){
    .abstract-right{ margin-top:12px !important; }
}

/* Partner Cards */
.partner{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    row-gap:8px;
    padding:8px 0;
    border-bottom:1px solid var(--border);
    text-align:center;
    text-decoration:none;
}
.partner:last-child{ border-bottom:0; }
.partner__label{ font-size:.96rem; color:var(--text-muted); }
.partner__logo{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.partner__img{
    width:auto;
    height:auto;
    max-height:56px;
    object-fit:contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}
.partner__img--htl{ max-width:180px; }
.partner__img--kai{ max-width:150px; }
.partner__caption{
    font-size:.9rem;
    color:var(--link);
    font-weight:600;
    line-height:1.25;
    transition:color .2s;
    cursor:pointer;
}
.partner:hover .partner__caption{
    color:var(--link-hover);
    text-decoration:underline;
}

/* ---------- DETAILS (Modern Core + 2-stufig) ---------- */
#details{
    position:relative;
    padding:88px 0 104px !important;
    background:var(--bg-soft);
    overflow:hidden;
}
:root[data-theme="light"] #details{
    background:#ffffff;
    border-radius:var(--radius);
    box-shadow:0 12px 26px rgba(15,23,42,0.05);
    padding:60px 0;
}
#details .title,
#details .section-intro{
    position:relative;
    z-index:2;
}
#details .section-intro{
    color:var(--text-muted);
    max-width:900px;
    margin:0 auto 40px;
}
#details .container{ max-width:1200px; }
#details .container-fluid{
    max-width:1200px;
    margin:0 auto;
    padding:0 28px;
}

/* Hintergrundglow – neutralisiert */
#details::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
            radial-gradient(600px 420px at 32% 8%,  rgba(120,135,170,0.05), transparent 70%),
            radial-gradient(600px 420px at 72% 92%, rgba(120,135,170,0.04), transparent 70%) !important;
}

/* Gruppen */
.detail-group{
    margin-top:32px !important;
    padding:24px 20px 16px !important;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--bg-soft);
}
:root[data-theme="light"] .detail-group{
    background:#fff;
    box-shadow:0 12px 30px rgba(16,24,40,.08);
    border-color:rgba(15,23,42,0.08);
}

/* Kopf + Subnav */
.detail-header{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:center;
    margin-bottom:18px !important;
}
.detail-title{
    color:var(--head);
    font-weight:800;
    margin:0;
    font-size:1.4rem;
}
.detail-subnav{
    position:sticky;
    top:calc(var(--nav-h) + 12px);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
    background:transparent;
    padding:4px 0;
}
.detail-subnav .pill{
    display:inline-flex;
    align-items:center;
    height:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:.92rem;
    background:rgba(255,255,255,0.02);
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.detail-subnav .pill:hover{
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.16);
    transform:translateY(-1px);
}
:root[data-theme="light"] .detail-subnav .pill{
    background:#f5f7fa;
    border:1px solid rgba(0,0,0,0.06);
    color:#1b2432;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
:root[data-theme="light"] .detail-subnav .pill:hover{
    background:#ebeff6;
    border-color:rgba(0,0,0,0.1);
}

/* Items – 2-Spalten, alternierend */
.detail-item{
    display:grid;
    grid-template-columns:minmax(420px,560px) 1fr;
    gap:30px !important;
    align-items:center;
    padding:22px 18px !important;
    margin:10px 0 16px !important;
    border-top:1px solid var(--border);
    scroll-margin-top:calc(var(--nav-h) + 18px);
    transition: background .2s, transform .2s, box-shadow .2s;
    border-radius:12px !important;
}
.detail-item:first-of-type{ border-top:0; }
.detail-item + .detail-item{ margin-top:18px !important; }

.detail-item.swap{ grid-template-columns:1fr minmax(420px,560px); }
.detail-item.swap .detail-media{ order:2; }
.detail-item.swap .detail-body{ order:1; }

/* Bild-Container & Bilder */
.detail-media{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
}
.detail-media img{
    width:100%;
    height: clamp(200px, 28vw, 320px);
    object-fit: contain;
    object-position: center;
    border-radius:12px;
    background: rgba(255,255,255,0.02);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.06);
}

@media (max-width:992px){
    .detail-item,
    .detail-item.swap{ grid-template-columns:1fr; }
    .detail-media img{ height: clamp(160px, 45vw, 220px) !important; }
    .detail-header{ grid-template-columns:1fr; }
    .detail-subnav{
        justify-content:flex-start;
        top:calc(var(--nav-h) + 8px);
    }
}

.detail-body{ width:100%; }
.detail-item-title{
    margin:0 0 6px;
    color:var(--head);
    font-weight:800;
    font-size:1.2rem;
}
.detail-points{
    margin:8px 0 0;
    padding-left:18px;
    color:var(--text-muted);
}
.detail-points li{ margin:3px 0; }

/* Hover neutral (kein Blau) */
.detail-item:hover{
    background:rgba(255,255,255,0.03) !important;
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,0.18) !important;
}
:root[data-theme="light"] .detail-item{
    background:#fff !important;
    border:1px solid rgba(0,0,0,0.06) !important;
    box-shadow:0 8px 22px rgba(16,24,40,0.06) !important;
}
:root[data-theme="light"] .detail-item:hover{
    background:#f7f8fa !important;
    box-shadow:0 14px 34px rgba(16,24,40,0.10) !important;
}

#details.details-bleed .container-fluid{
    max-width:none;
    padding-left:28px;
    padding-right:28px;
}
@media (max-width:992px){
    #details.details-bleed .container-fluid{
        padding-left:18px;
        padding-right:18px;
    }
}

/* Untertitel links unter dem Titel */
#details .details-subtext{
    text-align:left;
    margin:8px 0 32px;
    color:var(--text-muted);
    font-size:1.05rem;
    font-weight:500;
    max-width:900px;
}

/* ---------- TEAM (Clean Modern) ---------- */
#team{
    text-align:center;
    padding:36px 0 !important;
}

.team-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(220px, 1fr)) !important;
    column-gap:16px !important;
    row-gap:8px !important;
    justify-items:center !important;
    align-items:start !important;
    max-width:760px !important;
    margin:12px auto 0 !important;
}

.team-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}

.team-avatar{
    width:92px !important;
    height:92px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
    margin:0 0 6px 0 !important;
    border:1px solid var(--border) !important;
    box-shadow:none !important;
}

.team-name{
    font-size:1rem !important;
    line-height:1.25 !important;
    margin:2px 0 2px 0 !important;
    color:var(--head) !important;
}
.team-role{
    font-size:.9rem !important;
    line-height:1.35 !important;
    margin:0 !important;
    color:var(--text-muted) !important;
}

.team-card{
    transition:transform .2s, box-shadow .2s;
}
.team-card .team-avatar{
    filter:grayscale(0.35);
    transition:filter .2s;
}
.team-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(0,0,0,0.35);
}
.team-card:hover .team-avatar{
    filter:grayscale(0);
}

@media (max-width:768px){
    .team-grid{
        grid-template-columns:1fr !important;
        max-width:520px !important;
        column-gap:0 !important;
        row-gap:8px !important;
    }
}

/* ---------- FOOTER ---------- */
.footer{
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:14px 0;
    font-size:.95rem;
}
.footer-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}
.footer nav ul,
.footer .list-inline{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:40px;
    flex-wrap:wrap;
}
.footer .list-inline>li{
    display:inline-flex;
    align-items:center;
    min-height:40px;
}
.footer .list-inline>li>a{
    display:inline-flex;
    align-items:center;
    height:40px;
    padding:0 6px;
    text-decoration:none;
    color:var(--text-muted);
    transition: color .2s, background .2s;
}
.footer .list-inline>li>a:hover{
    color:var(--head);
    background:rgba(255,255,255,0.06);
    border-radius:8px;
}
.footer .copyright{
    color:var(--text-muted);
    white-space:nowrap;
}
@media (max-width:600px){
    .footer-container{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:6px;
    }
}

/* ---------- LIGHT THEME polish (Sections & Text) ---------- */
:root[data-theme="light"] #abstract,
:root[data-theme="light"] #details,
:root[data-theme="light"] #team{
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:50px 0;
    margin-block:18px;
}
:root[data-theme="light"] .title{ color:var(--head); }
:root[data-theme="light"] .section-intro,
:root[data-theme="light"] p{ color:var(--text-muted); }

/* Partner-Karten im Light Theme */
:root[data-theme="light"] .partner{
    background:#fff;
    border:1px solid rgba(0,0,0,0.05);
    box-shadow:0 6px 20px rgba(0,0,0,0.05);
    border-radius:10px;
}
:root[data-theme="light"] .partner__caption{ color:var(--link); }

/* Footer Light */
:root[data-theme="light"] .footer{
    background:#f3f4f6;
    border-top:1px solid rgba(0,0,0,0.05);
}

/* ---------- “Willkommen” Reveal ---------- */
#abstract .intro-reveal{
    opacity:0;
    transform:translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
#abstract .intro-reveal.visible{
    opacity:1;
    transform:none;
}

/* ========= GLOBAL LIGHT THEME OVERRIDES: Texte wirklich schwarz ========= */
[data-theme="light"] body.section-white.profile-page{
    color:#0b1220 !important;
}

/* Hauptbereiche */
[data-theme="light"] #abstract,
[data-theme="light"] #details,
[data-theme="light"] #team{
    color:#0b1220 !important;
}

/* Standardtexte in Bereichen */
[data-theme="light"] #abstract :is(p, .description, .section-intro, .lead, .details-subtext),
[data-theme="light"] #details  :is(p, .description, .section-intro, .lead, .details-subtext),
[data-theme="light"] #team     :is(p, .description, .section-intro, .lead, .details-subtext){
    color:#0b1220 !important;
    -webkit-text-fill-color:#0b1220 !important;
}

/* Überschriften */
[data-theme="light"] :is(
    h1, h2, h3, h4, h5, h6,
    .title, .subtitle,
    .detail-title, .detail-item-title
){
    color:#0b1220 !important;
}

/* Team-Texte */
[data-theme="light"] #team .team-name,
[data-theme="light"] #team .team-role{
    color:#0b1220 !important;
}

/* Partner-Texte */
[data-theme="light"] #abstract .partner__label,
[data-theme="light"] #abstract .partner__caption{
    color:#0b1220 !important;
}

/* LIGHT THEME: Detail-Bullets & Body fix schwarz */
[data-theme="light"] #details :is(
    p, li,
    .detail-points, .detail-body,
    .detail-item-title, .detail-title,
    .section-intro, .details-subtext
){
    color:#0b1220 !important;
    -webkit-text-fill-color:#0b1220 !important;
}
[data-theme="light"] #details .detail-points *,
[data-theme="light"] #details .detail-body *{
    color:#0b1220 !important;
}

/* ========= HERO: Titel & Untertitel immer weiß ========= */
header.hero .hero__title,
header.hero .hero__subtitle{
    color:#ffffff !important;
    text-shadow:0 3px 10px rgba(0,0,0,0.35) !important;
}

/* ========= Scroll-Reveal ========= */
.reveal{
    opacity:0;
    transform: translateY(40px);
    transition:
            opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}
.reveal.visible{
    opacity:1;
    transform:none;
}
.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-up    { transform: translateY(30px); }
.reveal-down  { transform: translateY(-30px); }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }

/* ---------- Slider für alle .detail-item.has-slider ---------- */

/* Layout: links Bild, rechts Text, Dots unter dem Bild */
.detail-item.has-slider{
    grid-template-areas:
        "media body"
        "dots  body";
}

.detail-item.has-slider .detail-media{
    grid-area: media;
    position: relative;
    overflow: hidden;
    min-height: clamp(220px, 28vw, 320px);
}

.detail-item.has-slider .detail-body{
    grid-area: body;
}

/* Bilder übereinander, nur das aktive sichtbar */
.detail-item.has-slider .detail-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.detail-item.has-slider .detail-media img.is-active{
    opacity: 1;
}

/* Pfeile links/rechts im Bild */
.detail-item.has-slider .slider-arrows{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}
.detail-item.has-slider .slider-arrow{
    pointer-events: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0,0,0,0.55);
    color: #fff;
    backdrop-filter: blur(8px);
}
:root[data-theme="light"] .detail-item.has-slider .slider-arrow{
    background: rgba(255,255,255,0.9);
    color: #111827;
}

/* Dots unter dem Bild */
.detail-item.has-slider .slider-dots{
    grid-area: dots;
    display: inline-flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Punkte */
.detail-item.has-slider .slider-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(148,163,184,0.9);
    cursor: pointer;
}
.detail-item.has-slider .slider-dot.is-active{
    background: var(--brand);
    box-shadow: 0 0 0 2px rgba(94,134,255,0.45);
}

/* Badge für DE/EN (bleibt wie gehabt) */
.badge-lang{
    display:inline-block;
    margin-right:0.4rem;
    padding:0.15rem 0.6rem;
    border-radius:999px;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    background:rgba(148,163,184,0.18);
    color:var(--head);
}

#kurzbeschreibung,
#details,
#team{
    scroll-margin-top: calc(var(--nav-h) + 26px);
}