/* 4. Layout - Site Header
   ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header-inner {
    max-width: var(--max-wide);
    margin: 0 auto;
    padding: 0 var(--sp-5);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* News-Modus - Body-Background, Ticker & globale Icon-Groesse.
   Betrifft jede Nicht-LP-Seite (body.news-body, site-header-news), nicht nur
   die Startseite - deshalb hier statt in pharmaspektrum-home.css (verschoben
   31.08.2026, siehe dortiger Kommentar). */
.fa-solid,
.fa-regular {
    font-size: 0.88em;
    opacity: 0.78;
}

body.news-body {
    background:
        linear-gradient(180deg, var(--home-blue-wash) 0, var(--home-blue-page) 300px, var(--home-paper) 620px),
        var(--home-paper);
}

.site-header-news {
    height: auto;
    display: block;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}

.site-header-news .header-inner {
    min-height: var(--header-height);
}

.regulatory-ribbon {
    max-height: 38px;
    overflow: hidden;   /* haelt die max-height-Einklappung sauber (vorher am Header) */
    color: var(--home-blue-muted);
    background: var(--home-blue-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 0.78rem;
    transition: max-height 0.2s ease, opacity 0.18s ease, transform 0.18s ease;
}

.site-header-news.is-scrolled .regulatory-ribbon {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
}

.ribbon-inner {
    max-width: var(--max-wide);
    margin: 0 auto;
    padding: 7px var(--sp-5);
    display: flex;
    justify-content: space-between;
    gap: var(--sp-5);
}

.ribbon-track {
    display: contents;
}

/* Duplikat der Laufschrift - nur mobil sichtbar. */
.ribbon-dup {
    display: none;
}

/* Kein <strong>: die Laufschrift wird fuer die mobile Animation dupliziert, die Fettung
   stand damit zweimal pro Seite und auf jeder Seite - als Duplikat gemeldet, obwohl sie
   nur Typografie ist (Onpage-Audit 19.08.2026). */
.ribbon-inner .ribbon-lead {
    color: var(--ui-white);
    font-weight: 800;
}

.site-brand {
    display: block;
    width: auto;
    height: 2.5rem;
    aspect-ratio: 729 / 100;
    background-image: url("../img/pharmaspektrum.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    text-decoration: none;
    color: var(--fg);
    flex-shrink: 0;   /* im Flex-Header sonst gestaucht, sobald die Navigation eng wird */
}

/* Beschriftung der Wortmarke: im Anker vorhanden, optisch nicht. Traegt den Ankertext
   und zugleich den barrierefreien Namen des Links (siehe header.php). */
.brand-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Vorerst dieselbe Datei - Platzhalter fuer eine spaetere Hover-Fassung. */
.site-brand:hover,
.site-brand:focus-visible {
    background-image: url("../img/pharmaspektrum-hover.png");
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--sp-5);
}

.site-header-news .site-nav ul {
    gap: 0.35rem;
    padding: 0.34rem;
    background: var(--home-paper);
    border: 1px solid var(--ui-line-soft);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 2px rgba(20, 33, 43, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.65);
}

.site-nav a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.42rem 0.8rem;
    color: var(--home-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 750;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
    color: var(--home-blue-dark);
}

.site-nav a:hover {
    background: rgba(255, 255, 255, 0.58);
    border-color: var(--ui-nav-hover);
    box-shadow: 0 1px 7px rgba(20, 33, 43, 0.045);
}

.site-nav a.is-active {
    background: var(--ui-white);
    border-color: var(--ui-line-strong);
    box-shadow: 0 2px 10px rgba(20, 33, 43, 0.07);
}

.site-nav i {
    margin-right: 0.4rem;
}

.menu-toggle {
    display: none;   /* Mobile-Breakpoint schaltet auf inline-flex */
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--fg-muted);
    cursor: pointer;
}

/* Burger-Icon - der Button trug bisher nur das Wort "Menü". */
.menu-toggle i {
    font-size: 1.05rem;
}

/* Offenen Zustand sichtbar machen; aria-expanded pflegt site.js. */
.menu-toggle[aria-expanded="true"] {
    color: var(--fg);
    border-color: var(--fg-muted);
}

/* Header - LP-Variante */
.site-header-lp {
    position: static;
    height: auto;
    display: block;
    padding-top: 0;
}

.site-header-lp .header-inner {
    height: var(--header-height);
    max-width: calc(var(--max-wide) + 2 * var(--sp-5));
}

/* 4. Layout - Main
   ------------------------------------------------------------ */
main {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

main.wide {
    max-width: var(--max-wide);
}

/* 4. Layout - Footer
   ------------------------------------------------------------ */
.site-footer {
    background:
        linear-gradient(180deg, var(--ui-footer-bg) 0, var(--ui-white) 100%);
    border-top: 1px solid var(--home-line);
    padding: var(--sp-7) var(--sp-5) var(--sp-5);
    color: var(--fg-muted);
    font-size: 0.9rem;
}

.footer-inner {
    max-width: var(--max-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.7fr) minmax(180px, 0.7fr);
    gap: var(--sp-6);
    align-items: start;
}

.footer-about {
    max-width: 520px;
}

.footer-brand {
    height: 2rem;
    margin-bottom: var(--sp-4);
}

.footer-desc {
    max-width: 48em;
    margin: 0;
    color: var(--fg-muted);
    line-height: 1.65;
}

.footer-heading {
    margin: 0 0 var(--sp-3);
    color: var(--fg);
    font-size: var(--fs-sm);
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    color: var(--fg-muted);
    font-weight: 500;
}

.footer-links a::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--ui-line-strong);
    border-radius: 50%;
    flex: 0 0 auto;
}

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

.footer-links a:hover::before {
    background: var(--accent);
}

.footer-bottom {
    max-width: var(--max-wide);
    margin: var(--sp-6) auto 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ui-line-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    color: var(--fg-faint);
    font-size: var(--fs-sm);
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.footer-bottom-links a {
    color: var(--fg-faint);
    text-decoration: none;
}

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

.footer-bottom-links a + a::before {
    content: "·";
    margin: 0 0.6rem;
    color: var(--ui-line-strong);
}

/* Blaue Kopfzeile: selbstlaufende Schrift (verschoben aus pharmaspektrum-home.css
   31.08.2026 - betrifft jede Nicht-LP-Seite, nicht nur die Startseite). */
@media (max-width: 720px) {
    .ribbon-inner {
        overflow: hidden;
        padding-inline: 0;
    }

    .ribbon-track {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--sp-5);
        padding-left: var(--sp-5);
        width: max-content;
        animation: ribbon-marquee 26s linear infinite;
    }

    .ribbon-track > span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ribbon-dup {
        display: inline;
    }

    @keyframes ribbon-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .regulatory-ribbon {
        transition: none !important;
        animation: none !important;
    }
}