:root {
    /* Zwei Kurven für die Intro-Choreografie statt überall verstreutem "ease"/"ease-in-out" -
       sorgt für ein einheitliches, "premium" wirkendes Bewegungsgefühl statt der linear
       wirkenden Standardkurven. --ease-smooth: sanftes Ein-/Ausschwingen (Auffächern,
       Zuklappen, Skalieren). --ease-out: schnell los, sanft abbremsend (Reveals/Fades). */
    --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Bradford', sans-serif;
}
.site-wrapper {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 6px 40px 40px 40px;
}
@font-face {
    font-family: 'Bradford';
    src: url('../fonts/BradfordLL-BoldItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Bradford';
    src: url('../fonts/BradfordLL-BookItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Bradford-Mono';
    src: url('../fonts/BradfordMonoLL-Regular.otf') format('opentype');
    font-weight: 300;
    font-style: monospace;
}
@font-face {
    font-family: 'AnnaSimons';
    src: url('../fonts/AnnaSimons-Regular.ttf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Bradford';
    src: url('../fonts/BradfordLL-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

main.container {
    padding: 0px 40px 40px 40px;
}

.layout {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.site-title-bar{
    position: fixed;
    top: 5px;
    right: 8px;
    z-index: 3;
    font-size: clamp(0.7rem, 2vw, 1.15rem);
    color: rgb(0, 0, 0);
    font-family:'AnnaSimons', sans-serif;

    font-weight: 300;
    text-align:right;
    line-height: 1;
    /* ganz dünne Outline um die Schrift */
    -webkit-text-stroke: 0.4px rgb(0, 0, 0);
    letter-spacing: 0.03em;
    /* erst nach der Intro-Animation sichtbar (siehe app.js, gleicher Zeitpunkt wie
       Nav/Inhalt) - vorher nicht anzeigen. */
    opacity: 0;
    transition: opacity 0.6s ease;
}
.site-title-bar.show {
    opacity: 1;
}

/* INTRO*/
header {
    /* Wie die Nav: IMMER JS-positioniert (nie "natürlicher Fluss" per position:sticky) -
       top/left kommen in BEIDEN Zuständen aus derselben Messung/Formel (siehe alignNav),
       damit unmöglich eine Diskrepanz zwischen Ruhe- und Stuck-Zustand entstehen kann. */
    position: absolute;
    z-index: 1;
    text-align: left;
    padding: 0px 0px;
    background-color: transparent;
}
header.header-stuck {
    /* erst fixiert, sobald man zur natürlichen Position hochgescrollt hat (gleicher
       Zeitpunkt wie bei der Nav) - left/width werden per JS exakt gesetzt, damit nichts
       springt. z-index höher als nav: nav.nav-stuck ist jetzt der gemeinsame, vollbreite
       weiße Hintergrund der ganzen Leiste, der Header (Logo) muss sichtbar darüber sitzen -
       eigener weißer Hintergrund hier daher nicht mehr nötig, aber schadet nicht als
       zusätzliche Sicherheit falls die Breiten sich mal minimal überschneiden. */
    position: fixed;
    top: 0;
   
    z-index: 2;
}
header.header-stuck .logo-text.small {
    /* etwas kleiner als die normale kompakte Größe, damit es besser neben die Nav passt */
    transform: scale(0.5);
}
.header-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding:0px 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    margin-left: -50px;
}
.intro-header{
    /* Logo ist immer schon in seiner finalen (kompakten) Größe (siehe .logo-text) - der
       Header selbst ändert seine Höhe deshalb nie mehr, keine max-height-Animation nötig.
       overflow:visible bleibt bestehen, weil der Auffächer-Text während .intro-expand
       breiter werden kann als der Header (siehe .logo-expand max-width) - unkritisch,
       solange darunter noch nichts sichtbar sein muss (Nav bleibt bis zum Reveal
       ausgeblendet). */
    max-height: 90px;
    overflow: visible;
}
.intro-expand .logo-expand{
    max-width:900px;
    opacity:1;
}
.logo-letter + .logo-expand + .logo-letter{
    margin-left:0.03em;
}
.intro-collapse .logo-expand{
    max-width:0;
    opacity:0;
}
.page-content{
    opacity:0;
    transform: translateY(12px);
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
}
.page-content.show-content{
    opacity:1;
    transform: translateY(0);
}

/* INTRO ENDE*/


/* LOGO */
.logo-line{
    display:flex;
    justify-content:flex-start;
    overflow: visible;
    align-items:baseline;
}
.logo-letter{
    font-family:'AnnaSimons', serif;
    font-weight:500;
    line-height: 0.8;
}
.logo-expand{
    font-family:'AnnaSimons', sans-serif;
    font-style: normal;
    font-weight:300;
    font-size:5rem;
    max-width:0;
    overflow:visible;
    white-space:nowrap;
    opacity:0;
    transition:max-width 0.6s var(--ease-smooth), transform 0.5s var(--ease-smooth), font-size 0.35s var(--ease-smooth);
    margin-left:-0.06em;
}
.logo-line.bottom{
    /* "Augsburg" bleibt beim Auffächern/Zuklappen linksbündig an derselben Stelle, statt wie
       vorher (nur auf Desktop, uneinheitlich zu Tablet/Mobile) per translateX nach rechts zu
       rutschen - einheitliches Verhalten in jedem Breakpoint. */
    transition: transform 0.6s var(--ease-smooth);
}
.logo-text {
    position: relative;
    font-size:5rem;
    text-align:left;
    overflow:visible;
    padding-left: 40px;
    display:inline-block;
    transition:transform 0.6s var(--ease-smooth);
    line-height: 0.9;
    transform-origin: left top;
    padding-bottom: 5px;
    padding-top: 0px;
    /* Immer schon in der finalen (kompakten) Größe, statt groß zu starten und per JS auf
       diesen Wert runterzuskalieren - dadurch ist das Logo von Anfang an am richtigen Platz
       in richtiger Größe, keine nachträgliche "Verkleinern"-Animation/-Messung nötig, die
       Nav & Co. erst nachträglich neu positionieren müsste. */
    transform: scale(0.5);
    z-index: 10;
}
/* LOGO ENDE*/


/* NAVIGATION */
nav {
    position: absolute;
    /* top/left/width werden per JS gesetzt: immer gleicher Abstand zum Logo, volle Restbreite.
       Ruhezustand: absolute (relativ zu .site-wrapper), scrollt normal mit der Seite mit. */
    z-index: 1;
    background: white;
    /* Fängt einen minimalen Rest-Rundungsfehler beim Umschalt-Zeitpunkt (padding-top) ab,
       damit daraus keine sichtbare Kante/Sprung wird, sondern eine weiche Korrektur. */
    transition: padding-top 0.25s ease;
}
nav.nav-stuck {
    /* Statt zwei einzeln (und nie ganz passend) ausgerichtete weiße Boxen (Header + Nav) zu
       pflegen: DIESE Box ist der einzige weiße Hintergrund der ganzen Sticky-Leiste, über die
       komplette Fensterbreite (unabhängig von Logo-Position/Nav-Umbruch). Die eigentlichen
       Nav-Links werden per margin-left auf .ul verschoben (siehe JS), damit sie optisch an
       der gewohnten Stelle bleiben. Der Header (mit dem Logo) bekommt einen höheren z-index
       und sitzt einfach sichtbar darüber - kein Breiten-/Höhen-Abgleich zwischen zwei Boxen
       mehr nötig. */
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    border-bottom: 1.5px solid #000000;
}
nav.nav-stuck ul {
    /* margin-left/width werden per JS gesetzt (navLeftViewport/navWidthValue), damit der
       sichtbare Inhalt trotz der jetzt vollbreiten Box an derselben Stelle bleibt. */
    box-sizing: border-box;
}
nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hidden-nav{
    opacity:0;
    transform: translateY(-10px);
    pointer-events:none;
}
.show-nav{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
nav ul li a {
    display: block;
    /* Schriftgröße bleibt fest (nie kleiner als der Inhaltstext, .inhalt p = 0.95rem).
       Horizontales Padding kommt aus --nav-link-padding-h (per JS in alignNav() aus der
       echten Nav-Breite berechnet, die wiederum an main.container/die Eventbox gekoppelt
       ist) - dadurch hängt die Kategorien-Breite direkt und kontinuierlich am Container
       darunter und schiebt sich mit ihm zusammen, statt an einer festen Breakpoint-Grenze
       zu springen. (Reines CSS %-Padding geht hier nicht: <a> sitzt in einem Flex-Item <li>
       ohne festen Wert, % kann sich dann nicht auflösen und wird zu 0.) */
    padding: 8px var(--nav-link-padding-h, 20px);
    margin-bottom: -2px;
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    /* KEINE transition auf padding: die Breite muss beim Resize sofort passen (per JS pro
       Frame neu berechnet), sonst hinkt das Padding kurz hinterher und die Zeile bricht
       während der Übergangszeit sichtbar (aber nur kurz) um. */
    transition: transform 0.2s ease;
    border-left: 1.5px solid #000000;
}
nav ul li a:hover {
    transform: translateY(-10px);
    font-family: 'Bradford';
    font-style: italic;
    font-weight: 500;
    color: #000000;
    border-left: 1.5px solid #000000;
    border-top: 1.5px solid #000000;
}
nav ul li a.active {
    transform: translateY(-10px);
    font-family: 'Bradford';
    font-style: italic;
    font-weight: 500;
    color: #000000;
    border-left: 1.5px solid #000000;
    border-top: 1.5px solid #000000;
}
/* NAVIGATION ENDE*/


/* MEHR LESEN */
.toggle-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-family: 'Bradford';
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.025em;
    color: #000000;
    cursor: pointer;
}
.toggle-btn:hover {
    color: rgb(9, 147, 6);
}

.arrow {
    display: inline-block;
    font-size: 0.8em;
    line-height: 1;
}
/* MEHR LESEN ENDE*/


/* FILTER */
/* Label liegt um -90° gedreht auf der linken Border-Linie der Box (statt als eigene Zeile
   über den Optionen) - dafür aus dem Flex-Fluss genommen (position:absolute), eigene
   Collapse-/Expand-Regeln weiter unten (kombiniert rotate(-90deg) mit demselben
   Auf-/Zuklapp-Timing wie .filter-item, klappt also zusammen mit den Optionen auf).
   Offsets (left/translateY) sind ein erster Wurf - bei Bedarf im Browser nachjustieren. */
.filter-label {
    position: absolute;
    left: -20px;
    top: 50%;
    transform-origin: left top;
    white-space: nowrap;
    pointer-events: none;
}
.filter-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: left;
    align-self: flex-start;
    width: fit-content;
    gap: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    border-left: 1.5px solid #000000;
    transition: padding 0.35s ease-in-out, margin-bottom 0.35s ease-in-out;
}
/* Verbindet die border-left der aktiven Nav-Kategorie mit der border-left der
   Filter-/Sortier-Box darunter - die Lücke entsteht durch den
   transform:translateY(-10px)-Lift der aktiven Nav-Kategorie, deren tatsächliche Größe
   aber von Breakpoint/Schriftgröße abhängt. Statt einen festen px-Wert zu raten, misst
   alignFilterBar() (app.js) die echte Lücke und setzt --nav-connector-height passend -
   9px hier ist nur der Fallback, bevor JS das erste Mal gelaufen ist.
   Permanent sichtbar (nicht erst beim Hovern), außer wenn die Nav gestickt ist - dann passt
   die Geometrie zwischen Nav und Filter-Box ohnehin nicht mehr zusammen. */
.filter-column::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--nav-connector-height, 9px));
    left: -1.5px;
    width: 0;
    height: var(--nav-connector-height, 9px);
    border-left: 1.5px solid #000000;
    opacity: 1;
    /* nav hat z-index:1 und einen weißen Hintergrund, dessen (untransformierte) Box genau
       in diese Lücke hineinreicht - ohne höheren z-index malt nav den Verbindungsstrich
       einfach zu, egal wie korrekt Höhe/Position sind. */
    z-index: 2;
}
nav.nav-stuck ~ main .filter-column::before {
    opacity: 0;
}
/* Filter lassen sich nur bedienen, solange die Nav NICHT gestickt ist (also ganz oben auf
   der Seite) - sonst kann die Filterliste teilweise hinter der fixierten Nav-Leiste
   verschwinden, je nachdem wie weit gescrollt wurde. */
nav:not(.nav-stuck):has(a.active:hover) ~ main .filter-column,
nav:not(.nav-stuck) ~ main .filter-column:hover,
nav:not(.nav-stuck) ~ main .filter-column.expanded {
    padding: 8px 0px;
    margin-bottom: 10px;
}
nav:not(.nav-stuck):has(a.active:hover) ~ main .filter-column::before,
nav:not(.nav-stuck) ~ main .filter-column:hover::before,
nav:not(.nav-stuck) ~ main .filter-column.expanded::before {
    opacity: 1;
}
.filter-item,
.filter-label {
    display: flex;
    align-items: center;
    gap: 0 3px;
    padding: 0 3px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    /* muss immer identisch zur Nav-Schriftgröße sein (nav ul li a) */
    font-size: 0.95rem;
    line-height: 1.13;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    color: black;
    font-weight: normal;
}
/* Sortieroptionen unter dem Label etwas eingerückt, damit die Hierarchie Label -> Optionen
   erkennbar ist - nur wo tatsächlich ein Label in der Box steckt (aktuell Publikationen),
   die Kategorie-Filter bei Aktuelles/Forschung bleiben unverändert bündig. */
.filter-column:has(.filter-label) .filter-item {
    margin-left: 2px;
}
.filter-item.active {
    font-family: 'Bradford';
    font-style: italic;
}
/* .dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.filter-item.active .dot {
    background-image: url("../images/friedenstaube2.png");
} */
.filter-item:hover {
    font-family: 'Bradford';
    font-style: italic;
}

/* eingeklappt: alle Filter (auch der aktive) unsichtbar, fahren nur aus, wenn man über die aktive Navigationskategorie/die Box hovered */
.filter-item {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height 0.45s ease-in-out, opacity 0.35s ease-in-out, transform 0.45s ease-in-out;
}
/* Label: eigene Regel statt zusammen mit .filter-item, weil der transform-Wert hier immer
   das rotate(-90deg) enthalten muss (sonst überschreibt das gemeinsame translateY das rotate).
   translateX(-50%) läuft VOR dem rotate (Funktionen wirken von rechts nach links) und schiebt
   die noch ungedrehte Box um die HALBE eigene Breite nach links, bevor gedreht wird - dadurch
   wächst das gedrehte Label symmetrisch nach oben UND unten vom Anker weg (top:50% der Box,
   siehe oben), liegt also mittig auf der Border-Linie statt nur nach unten zu hängen. */
.filter-label {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: rotate(-90deg) translateX(-50%) translateY(-6px);
    transition: max-height 0.45s ease-in-out, opacity 0.35s ease-in-out, transform 0.45s ease-in-out;
}
nav:not(.nav-stuck):has(a.active:hover) ~ main .filter-item,
nav:not(.nav-stuck) ~ main .filter-column:hover .filter-item,
nav:not(.nav-stuck) ~ main .filter-column.expanded .filter-item {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
nav:not(.nav-stuck):has(a.active:hover) ~ main .filter-label,
nav:not(.nav-stuck) ~ main .filter-column:hover .filter-label,
nav:not(.nav-stuck) ~ main .filter-column.expanded .filter-label {
    max-height: 60px;
    opacity: 1;
    transform: rotate(-90deg) translateX(-50%) translateY(0);
}

/* Label bleibt auch aufgeklappt nicht klickbar - ist nur Beschriftung, kein Button */
.filter-label {
    pointer-events: none;
}
/* @media (max-width: 1054px) {
    nav:has(a.active:hover) ~ main .filter-item:not(.active),
    .filter-column:hover .filter-item:not(.active),
    .filter-column.expanded .filter-item:not(.active) {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
@media (max-width: 600px) {
    nav:has(a.active:hover) ~ main .filter-item:not(.active),
    .filter-column:hover .filter-item:not(.active),
    .filter-column.expanded .filter-item:not(.active) {
        padding-top: 4px;
        padding-bottom: 4px;
    }
} */
/* FILTER ENDE*/


/* INHALTE */
.event, .publikation, .forschung {
    display: flex;
    align-items: flex-start; 
    gap: 20px;
    padding: 20px 20px;
    border-top: 1.5px solid #000000;
    position: relative;
}
.img {
   margin-top: 5px;
    margin-left: 5px;
    width: 100px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
}
/* Publikationen: Bilder hochkant statt querformatig wie bei Aktuelles/Forschung, im
   A4-Seitenverhältnis (1:√2 ≈ 1:1.41421) - passend zum mobilen Breakpoint (siehe unten). */
.publikation .img {
    width: 150px;
    height: 212.13px;
}
/* Publikationen: Titel ist Link zur jeweiligen Publikation, Unterstrich erst beim Hover */
.publikation .inhalt h2 a {
    color: inherit;
    text-decoration: none;
}
.publikation .inhalt h2 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
/* Publikationen: Datum zeigt nur das Jahr - zentriert sieht das in der schmalen
   .datum-Box seltsam aus, rechtsbündig wirkt es aufgeräumter */
.publikation .datum {
    text-align: right;
    min-width: 0;
    width: fit-content;
}
.publikation .inhalt .autor {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 0.85rem;
    color: #000000;
    margin: 0;
}
.container {
    max-width: 1300px;  
    margin: 0 auto;   
    padding: 5px 20px;   
}
.inhalt {
    flex: 1;
    text-align: left;
}
.inhalt h2 {
    margin: 0 0 3px 0;
    font-size: 0.95rem;
    font-family: 'Bradford';
    font-style: italic;
    font-weight: 500;
}
.inhalt p,
.inhalt .text {
    margin: 0 0 0 0;
    font-size: 0.95rem;
    color: #000000;
}
/* Teaser: immer sichtbarer, kurzer Anrisstext (~250 Zeichen) - eigener, fester Absatz statt
   einer per max-height abgeschnittenen Version des vollen Texts. */
.inhalt .teaser {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    display: block;
    line-height: 1.05em;
    margin-bottom: 4px;
    margin-right: 80px;
}
/* Voller Beschreibungstext - komplett eingeklappt (max-height:0) bis zum Aufklappen per
   toggle-btn, unabhängig vom immer sichtbaren Teaser darüber. margin-left entspricht in
   etwa der Breite des Auf-/Zuklapp-Pfeils (.arrow), damit der Text darunter etwas
   eingerückt wirkt. */
.inhalt .text {
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    display: block;
    line-height: 1.05em;
    max-height: 0;
    margin-left: 28px;
    transition: max-height 0.4s ease-in-out;
}
.inhalt .text.expanded {
    max-height: none;
}
/* Kirbytext erzeugt bei Leerzeile im Panel mehrere <p>-Tags innerhalb von .text - ohne
   eigenen Abstand sieht das trotzdem wie ein durchgehender Block aus (.inhalt p hat
   margin:0). Letzter Absatz ohne Abstand nach unten, damit kein unnötiger Leerraum vor
   dem toggle-btn entsteht. */
.inhalt .text p {
    margin-bottom: 4px;
}
.inhalt .text p:last-child {
    margin-bottom: 0;
}
.datum{
    color: #000;
    min-width: 75px;
    font-size: 0.75rem;
    font-family:Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 3px;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid black;
    margin: -20px;
}
.datum::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 70%;
    width: 1.5px;
    background: black;
}
.no-anim * {
    transition: none !important;
    animation: none !important;
}

/* PERSONEN */
.content-column {
    flex: 1;
    min-width: 0;
}
.person {
    display: flex;
    /* Kein Aufklappen mehr, Bild oben, Text darunter zentriert - siehe .person .inhalt .text
       weiter unten für den immer sichtbaren Volltext. Bewusst KEINE max-width auf
       .person-column (mehr): .content-column hat bei den anderen Unterseiten
       (Aktuelles/Forschung/Publikationen) auch keine, wodurch deren border-top über die
       volle Breite durchläuft - mit einer max-width wären Personens Trennlinien
       schmaler/kürzer als überall sonst gewesen. Die Karte selbst bleibt trotzdem
       zentriert, das übernimmt align-items:center hier. */
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 30px 20px;
    border-top: 1.5px solid #000000;
}
.person-img {
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    border-radius: 0px;
    object-fit: cover;
}
.person .inhalt {
    text-align: center;
}
/* Kein Auf-/Zuklappen mehr bei Personen - Volltext ist immer komplett sichtbar, die
   Einklapp-/Einrück-Regeln aus der geteilten .inhalt .text-Basisregel (siehe oben, für
   Aktuelles/Forschung/Publikationen) hier gezielt aufgehoben. */
.person .inhalt .text {
    max-height: none;
    overflow: visible;
    margin-left: 0;
}
.rolle {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 300;
    color: rgb(9, 147, 6);
}
/* PERSONEN ENDE */


/* SANFTE ÜBERGÄNGE ZWISCHEN DEN BREAKPOINTS */
.site-wrapper,
.header-container,
.logo-text,
.layout,
.filter-item,
.filter-label,
.event, .publikation, .forschung, .person,
.img, .person-img,
.inhalt h2,
.inhalt p,
.datum,
.toggle-btn,
.arrow {
    transition:
        font-size 0.35s ease,
        padding 0.35s ease,
        margin 0.35s ease,
        gap 0.35s ease,
        width 0.35s ease,
        height 0.35s ease,
        max-width 0.35s ease,
        min-width 0.35s ease,
        line-height 0.35s ease;
}
/* nav ul separat OHNE margin: margin-left wird beim Nav-Stuck-Umschalten per JS gesetzt
   (siehe updateNavStuckState) - das soll instant sitzen, nicht beim Scrollen reinrutschen. */
nav ul {
    transition:
        font-size 0.35s ease,
        padding 0.35s ease,
        gap 0.35s ease,
        width 0.35s ease,
        height 0.35s ease,
        max-width 0.35s ease,
        min-width 0.35s ease,
        line-height 0.35s ease;
}
/* SANFTE ÜBERGÄNGE ENDE */


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

/* Tablet (max 1024px) */
@media (max-width: 1054px) {
    /* Logo oben separat, Nav darunter als normale vollbreite Zeile statt daneben schwebend -
       Positionierung (absolute/fixed per .nav-stuck) kommt weiterhin per JS, siehe alignNav(),
       genau wie am Desktop - kein natives position:sticky mehr (kollidierte mit dem eigenen
       Umschalt-Mechanismus: Title-Bar-Überlappung, die dann nicht sauber lösbar war). */
    nav ul {
        justify-content: flex-start;
        padding: 2px 15px;
    }
    .site-wrapper {
        padding: 6px 25px 30px 25px;
    }
    main.container {
        padding: 0 25px 30px 25px;
    }
    .logo-text {
        font-size: 3rem;
        padding-left: 10px;
        transform: scale(0.8);
        z-index: 10;
    }
    .logo-expand {
        font-size: 3rem;
        z-index: 200;
    }

    .intro-header {
        max-height: 85px;
    }

    .header-container {
        margin-left: -25px;
    }

    .datum::before {
        display: none;
    }

    .event, .publikation {
        padding: 15px 15px;
        position: relative;
        gap: 12px;
    }
    .person {
        padding: 15px 15px;
        gap: 18px;
    }
    .person-img {
        width: 160px;
        height: 160px;
    }
    .datum {
        margin: -15px;
        min-width: 58px;
        font-size: 0.65rem;
        position: absolute;
        right: 0;
    }
   
    .datum{
        font-size: 0.6rem;
        margin: -15px;
        margin-right: 0px;
        min-width: 58px;
        font-size: 0.65rem;
        position: absolute;
        right: 0;
    }
    .inhalt h2 {
        font-size: 0.85rem;
    }
    .inhalt p,
    .inhalt .text {
        font-size: 0.85rem;
    }
    /* Nav-Schriftgröße muss immer der Inhaltstext-Größe entsprechen */
    nav ul li a,
    .filter-item,
    .filter-label {
        font-size: 0.85rem;
    }

    .toggle-btn {
        margin-top: 0px;
        font-size: 0.85rem;
    }
}

/* Mobile (max 600px) */
@media (max-width: 600px) {

    .site-title-bar{
        padding: 0px -20px 0px 0px;
    }

    .site-wrapper {
        padding: 6px 15px 20px 15px;
    }
    main.container {
        padding: 0 0 20px 0;
    }
    .logo-text {
        font-size: 2rem;
        padding-left: 15px;
        padding-bottom: 10px;
        transform: scale(1);
        z-index: 10;
    }
    .datum::before {
        display: none;
    }
    .logo-expand {
        font-size: 2rem;
        z-index: 200;
    }
    .header-container {
        margin-left: -25px;
    }
    .intro-header {
        max-height: 85px;
    }
    nav ul {
        padding-top: 2px;
        padding-right: 10px;
        padding-bottom: 2px;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0;
    }
    nav ul li a:hover,
    nav ul li a.active {
        transform: translateY(-10px);
    }
    .page-title {
        order: 1;
    }

    .event-list {
        order: 3;
    }
   
    .datum {
        margin: -15px;
        margin-right: 0px;
        min-width: 58px;
        font-size: 0.65rem;
        position: absolute;
        right: 0;
    }
    .img {
        width: 55px;
        height: 35px;
    }
    .publikation .img {
        width: 74.375px;
        height: 105.25px;
    }
    .person {
        gap: 12px;
    }
    .person-img {
        width: 170px;
        height: 170px;
    }
    .inhalt h2 {
        font-size: 0.9rem;
    }
    .inhalt p,
    .inhalt .text {
        font-size: 0.8rem;
    }
    /* Nav-Schriftgröße muss immer der Inhaltstext-Größe entsprechen */
    nav ul li a,
    .filter-item,
    .filter-label {
        font-size: 0.8rem;
    }

    .toggle-btn {
        margin-left: 3px;
        font-size: 0.8rem;
    }

}

/* ÜBER UNS: EIN Button unten rechts, der sich beim Klick selbst vergrößert und den Text
   in sich aufnimmt - kein separates Feld/Panel daneben. Fixed statt irgendwo im normalen
   Fluss - unbedingt AUSSERHALB von main.container/.page-content im Markup halten: das
   trägt während des Intros transform, und ein transform auf einem Vorfahren macht aus
   position:fixed-Kindern faktisch position:absolute relativ zu DEM Vorfahren statt zum
   Viewport (siehe .site-wrapper-Kommentar an anderer Stelle).
   right/bottom bleiben fix (hier: 0, ganz in der Ecke), width/max-height wachsen - der
   Button wächst dadurch von der Ecke aus nach links/oben, ohne selbst zu "springen". Kein
   border-radius, nur border-left/-top statt umlaufendem Rahmen (wie z.B. .datum oder die
   aktive Nav-Kategorie) - liegt wie eine Lasche direkt in der Seitenecke. */
.about-toggle {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 92px;
    max-height: 30px;
    overflow: hidden;
    background: #fff;
    border: none;
    border-left: 1.5px solid #000000;
    border-top: 1.5px solid #000000;
    border-radius: 0;
    box-sizing: border-box;
    padding: 6px 10px 14px 10px;
    text-align: left;
    cursor: pointer;
    /* Schließen: zuerst die Höhe zurück (Text verschwindet), dann erst die Breite -
       umgekehrte Reihenfolge zum Öffnen (siehe .about-toggle.active). Sonst bricht der Text
       bei einer noch schmalen Zwischenbreite in mehr Zeilen um, wodurch die Box kurz höher
       wird/"hochschießt", als sie eigentlich sein müsste. */
    transition:
        max-height 0.35s var(--ease-smooth),
        width 0.3s var(--ease-smooth) 0.15s;
}
.about-toggle.active {
    width: min(360px, calc(100vw - 40px));
    max-height: 420px;
    /* Öffnen: zuerst die Breite auf ihre finale Größe, dann erst die Höhe wachsen lassen -
       so bricht der Text nicht mehr während einer noch schmalen Zwischenbreite um. */
    transition:
        width 0.3s var(--ease-smooth),
        max-height 0.35s var(--ease-smooth) 0.15s;
}
.about-label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    color: #000;
    white-space: nowrap;
}
.about-toggle:hover .about-label,
.about-toggle.active .about-label {
    font-family: 'Bradford';
    font-style: italic;
}
.about-text {
    margin: 5px 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    line-height: 1.05;
    color: #000;
    /* Keine eigene opacity-Animation mehr - die Box selbst (overflow:hidden + animierte
       max-height) zeigt/verdeckt den Text schon rein durchs Wachsen/Schrumpfen. */
}
@media (max-width: 600px) {
    .about-toggle {
        padding: 8px 14px;
    }
    .about-label,
    .about-text {
        font-size: 0.8rem;
    }
}