body {
    font-family: Roboto, sans-serif;
}
* {
    box-sizing: border-box !important;
}

/* general Page layout classes */
.custom-pageheader {
    height: 5vh;
    min-height: fit-content;
}
.custom-pagecontent {
    min-height: 88vh;
}

/* only image class */
.imagecoverfit {
    object-fit: cover;
}

/* logo classes */
.logo {
    height: 50px;
    width: 50px
}

/* ── Brand lockup: HS-Offenburg-Logo + "Digital Labs" ───────── */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.brand-lockup:hover { text-decoration: none; }

.brand-lockup__logo {
    height: 44px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.brand-lockup__divider {
    display: inline-block;
    width: 1px;
    height: 34px;
    background: #111F6D;
    opacity: 0.35;
}

.brand-lockup__name {
    font-family: Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #111F6D;
    white-space: nowrap;
    padding-top: 2px; /* Optical alignment with logo baseline */
}

.brand-lockup--footer .brand-lockup__logo { height: 40px; }
.brand-lockup--footer .brand-lockup__divider { height: 30px; }
.brand-lockup--footer .brand-lockup__name { font-size: 0.85rem; }
.backgroundcolor-ease {
    transition: background-color 0.3s ease;
}

a, p, label {
    color: var(--textcolor-80contrast);
}

a:hover {
    color: var(--textcolor-50contrast);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--textcolor-fullcontrast);
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--neutrals-10, var(--surface-border-light));
    padding: 2rem 0 1.5rem;
    background: var(--neutrals-0, #fff);
}

/* Subtle credit row — sits inside the footer, no heavy box. */
.footer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem 1.4rem;
    padding: 1.25rem 0 1rem;
}

.footer-credit-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--textcolor-50contrast, #888);
    white-space: nowrap;
}

.footer-credit-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.78;
}

.footer-credit-logo:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.footer-credit-logo img {
    display: block;
    width: auto;
}

.footer-credit-logo--shells img { height: 48px; }
.footer-credit-logo--stiftung img { height: 40px; }

.footer-credit-sep {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: var(--neutrals-10, var(--surface-border-light));
}

@media (max-width: 600px) {
    .footer-credit { gap: 0.6rem 1rem; padding: 1rem 0; }
    .footer-credit-sep { display: none; }
    .footer-credit-logo--shells img { height: 42px; }
    .footer-credit-logo--stiftung img { height: 34px; }
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--neutrals-10, var(--surface-border-light));
}

.footer-brand {
    flex: 1;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex: 1;
}

.footer-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--textcolor-80contrast);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-contact {
    text-align: right;
    flex: 1;
}

.footer-contact p {
    font-size: 0.85rem;
    color: var(--textcolor-50contrast, #888);
    margin: 0;
    line-height: 1.6;
}

.footer-bottom {
    padding-top: 1rem;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--textcolor-50contrast, #888);
    margin: 0;
}

@media (max-width: 767px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-contact {
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── Scrollbar utilities ─────────────────────────────────────── */

/* Subtle scrollbar — soft primary tint for content areas */
.scrollbar-subtle {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.2) rgba(var(--primary-rgb), 0.05);
}
.scrollbar-subtle::-webkit-scrollbar { width: 8px; }
.scrollbar-subtle::-webkit-scrollbar-track { background: rgba(var(--primary-rgb), 0.05); border-radius: 10px; }
.scrollbar-subtle::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.2); border-radius: 10px; }
.scrollbar-subtle::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), 0.3); }

/* Bold scrollbar — solid primary for sidebars/tables */
.scrollbar-primary {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}
.scrollbar-primary::-webkit-scrollbar { width: 8px; }
.scrollbar-primary::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.scrollbar-primary::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; }
.scrollbar-primary::-webkit-scrollbar-thumb:hover { background: var(--hoverprimary-color); }

/* Thin scrollbar — minimal for button lists */
.scrollbar-thin::-webkit-scrollbar { width: 5px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }