/* Söhne (Klim Type Foundry) wie auf makk.de:
   400 = kräftig (Fließtext), 500 = halbfett (Überschriften) */
@font-face {
    font-family: "Soehne";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/soehne-web-kraftig.woff2") format("woff2");
}

@font-face {
    font-family: "Soehne";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/soehne-web-halbfett.woff2") format("woff2");
}

:root {
    --makk-schwarz: #111;
    --makk-blau:rgb(106, 186, 236);
    --makk-grau: #6c6c6c;
    --makk-hellgrau: #ececec;
    --makk-linie: #d9d9d9;
    --makk-font: "Soehne", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

    /* Fluide Typografie nach dem makk.de-Prinzip: alle Größen skalieren
       per clamp(minimum, faktor der viewportbreite, maximum) stufenlos mit.
       Nur hier ändern – alles Weitere leitet sich ab. */
    --schrift-h1: clamp(1.5rem, 2.875vw, 3.5rem);    /* Seitentitel */
    --schrift-h2: clamp(1.25rem, 1.75vw, 1.5rem);    /* Zwischenüberschriften, Untertitel */
    --schrift-h3: clamp(1.1rem, 1.4vw, 1.3rem);      /* Kartentitel, Absatz-Überschriften, Bedienelemente */
    --schrift-kartentitel: 1.25rem;   /* Kacheltitel der Übersicht – fester Wert wie die Kacheln auf makk.de */
    --schrift-basis: clamp(1rem, 1.35vw, 1.45rem);   /* Fließtext */
    --schrift-klein: clamp(0.8rem, 0.95vw, 1rem);    /* Datumszeilen, Bildunterschriften, Hinweise, Fuß */
    --zeilen-basis: 1.35;
    --zeilen-titel: 1.1;
}

body {
    font-family: var(--makk-font);
    font-weight: 400;
    font-size: var(--schrift-basis);
    line-height: var(--zeilen-basis);
    color: var(--makk-schwarz);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    margin:-0.2rem 2vw 2rem 2vw;
    padding:0;
}

h1 {font-size:var(--schrift-h1);font-weight:700;line-height:var(--zeilen-titel);margin-bottom:3rem;}
a {
    color: var(--makk-schwarz);
    text-decoration: none;
}

a:hover {
    color: var(--makk-schwarz);
    text-decoration: underline;
}

.container {
    max-width: 1920px;
}
.container-fluid {max-width:1920px;}
/* ---------- Kopf ---------- */

.archiv-kopf {
    /*border-bottom: 2px solid var(--makk-schwarz);*/
    padding: 2rem 0 1.25rem 0;
    margin-bottom: 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    transition: padding 0.3s ease;
}

/* Beim Scrollen verkleinerter Kopf (Klasse setzt ein kleines Skript) */
.archiv-kopf.geschrumpft {
    padding: 0.6rem 0 0.6rem 0;
    box-shadow: 0 1px 0 var(--makk-linie);
}

.archiv-kopf.geschrumpft .makk-logo {
    height: 36px;margin-top:1rem;
}

.archiv-kopf.geschrumpft #breadcrumb {
    margin-top: 0.5rem; margin-bottom:0.3rem;
}

/* Breadcrumb-Schrift und Pfeil schrumpfen mit */
.archiv-kopf .breadcrumb__nav-item,
.archiv-kopf .breadcrumb__nav-link {
    transition: font-size 0.3s ease;
}

.archiv-kopf .icon-sm {
    transition: height 0.3s ease, width 0.3s ease;
}

.archiv-kopf.geschrumpft .breadcrumb__nav-item,
.archiv-kopf.geschrumpft .breadcrumb__nav-link {
    font-size: 0.85rem;
}

.archiv-kopf.geschrumpft .icon-sm {
    height: 1.05rem;
    width: 1.05rem;
}

.wortmarke {
    margin: 0;
}

.wortmarke a {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}

.wortmarke a:hover {
    text-decoration: none;
}

.makk-logo {
    height: 73px;
    width: auto;
    display: block;
    fill: var(--makk-blau);
    transition: height 0.3s ease;
}

.archiv-titel {
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--makk-grau);
    margin: 0.25rem 0 0 0;
    text-transform: uppercase;
}

.archiv-titel a {
    color: var(--makk-grau);
}

.extern-link {
    font-size: 0.95rem;
    border: 1px solid var(--makk-schwarz);
    padding: 0.4rem 0.9rem;
    white-space: nowrap;
}

.extern-link:hover {
    background: var(--makk-schwarz);
    color: #fff;
    text-decoration: none;
}

/* ---------- Sprachauswahl (Aufklapp-Panel wie auf makk.de) ---------- */

.sprachwahl {
    position: relative;
    display: inline-block;
    text-align: left;
}

.sprachwahl__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--makk-font);
    font-size: var(--schrift-h3);
    color: var(--makk-schwarz);
    cursor: pointer;
}

.sprachwahl__trigger .icon-sm {
    transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.sprachwahl.offen .sprachwahl__trigger .icon-sm {
    transform: rotate(-180deg);
}

.sprachwahl__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    background: #fff;
    border: 1px solid var(--makk-schwarz);
    padding: 0.9rem 1.25rem;
    min-width: 11rem;
    z-index: 1100;
}

.lang-switch__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lang-switch__list-item + .lang-switch__list-item {
    margin-top: 0.5rem;
}

.lang-switch__list-link {
    font-size: var(--schrift-h3);
    padding: 0;
    text-decoration: none;
    transition: color 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.lang-switch__list-link:hover {
    color: var(--makk-grau);
    text-decoration: none;
}

.lang-switch__list-link.is-current {
    color: var(--makk-grau);
}

/* Hinweis auf der EN-Seite, wenn nur deutscher Inhalt vorliegt */
.sprachhinweis {
    display: inline-block;
    font-size: var(--schrift-klein);
    color: var(--makk-grau);
    border: 1px solid var(--makk-linie);
    padding: 0.3rem 0.7rem;
    margin-bottom: 1rem;
}

/* ---------- Breadcrumb (Original-Styles von makk.de) ---------- */

/* Abstand zum Logo skaliert mit der Monitorbreite (Handy ~0.75rem bis 3rem am Desktop) */
#breadcrumb {margin-top: clamp(0.75rem, 3vw, 3rem); transition: margin-top 0.3s ease;}
.breadcrumb__nav-list,
.breadcrumb__nav-item {
    align-items: center;
    display: inline-flex;
    flex-flow: row wrap;
}

.breadcrumb__nav-list {
    gap: 0.9375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb__nav-item {
    gap: 0.625rem;
}

/* Breadcrumb bleibt einzeilig; ein zu langer Titel wird mit … abgeschnitten */
.breadcrumb__nav-list {
    flex-wrap: nowrap;
    max-width: 100%;
}

.breadcrumb__nav-item {
    flex-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
}

.breadcrumb__nav-item[aria-current="page"] {
    flex-shrink: 1;
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb__nav-item,
.breadcrumb__nav-link {
    /* skaliert mit der Monitorbreite: 0.85rem am Handy bis 1.1rem am Desktop */
    font-size: clamp(0.85rem, 0.6rem + 0.65vw, 1.15rem);
    font-weight: 400;
    line-height: 1;
}

.breadcrumb__nav-link {
    background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(hsla(0, 0%, 94%, 1), hsla(0, 0%, 94%, 1));
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 0.125rem, 100% 0.125rem;
    padding: 0 0 0.25rem;
    text-decoration: none;
    transition: background-size 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.breadcrumb__nav-link:hover {
    background-position: 0 100%, 0 100%;
    background-size: 0 0.125rem, 100% 0.125rem;
    color: currentcolor;
    text-decoration: none;
}

.icon {
    fill: currentColor;
    transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1), color 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.icon-sm {
    height: clamp(1rem, 0.7rem + 0.9vw, 1.375rem);
    width: clamp(1rem, 0.7rem + 0.9vw, 1.375rem);
}

/* ---------- Jahresfilter ---------- */

.jahresfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* Jahresauswahl als Dropdown (Optik wie die Dropdowns auf makk.de) */
.jahr-dropdown {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--makk-font);
    font-size: var(--schrift-h3);
    color: var(--makk-schwarz);
    background-color: #fff;
    border: 1px solid var(--makk-schwarz);
    border-radius: 0;
    padding: 0.7rem 3.2rem 0.7rem 1.1rem;
    min-width: 17rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.95rem;
    margin-bottom: 3rem;
}

.jahr-dropdown:hover {
    background-color: var(--makk-hellgrau);
}

.jahr-dropdown:focus {
    outline: 2px solid var(--makk-schwarz);
    outline-offset: 1px;
}

.treffer {
    color: var(--makk-grau);
    font-size: var(--schrift-klein);
    margin-bottom: 1.5rem;
}

/* ---------- Ausstellungsliste ---------- */

#ausstellungsliste {
    margin-bottom: 3rem;
}

.aus-karte {
    display: block;
    height: 100%;
}

.aus-karte:hover {
    text-decoration: none;
}

.aus-bild {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--makk-hellgrau);
    margin-bottom: 0.75rem;
}

.aus-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.aus-karte:hover .aus-bild img {
    transform: scale(1.04);
}

.kein-bild {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kein-bild span {
    font-weight: 800;
    font-size: var(--schrift-h2);
    letter-spacing: 0.1em;
    color: #d0d0d0;
}

/* Datumszeile: in den Übersichtskacheln klein (wie die makk.de-Cards) … */
.aus-zeitraum {
    font-size: var(--schrift-kartentitel);
    font-weight: 500;
    /*text-transform: uppercase;*/
    /*letter-spacing: 0.05em;*/
    /*color: var(--makk-grau);*/
    margin-bottom: 0.25rem;
    line-height:120%;
}

.aus-titel {
    font-size: var(--schrift-kartentitel);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.aus-karte:hover .aus-titel {
    text-decoration: underline;
}

.aus-untertitel {
    font-size: var(--schrift-kartentitel); font-weight: 500;
    /*color: var(--makk-grau);*/
    margin-bottom: 0.25rem;
}

/* ---------- Detailseite ---------- */

.zurueck {
    margin-bottom: 1.5rem;
    font-size: var(--schrift-klein);
}

/* Titelblock über dem Kopfbild (wie auf den makk.de-Ausstellungsseiten) */
.aus-kopfzeile {
    margin-bottom: 3.0rem;
}

.aus-kopfzeile .aus-titel-detail {
    margin-bottom: 0.75rem;
}

.aus-kopfzeile .aus-untertitel-detail {
    margin-bottom: 0.5rem;
}

/* … im Titelblock der Detailseite dagegen groß (wie die Datums-h2 auf makk.de) */
.aus-kopfzeile .aus-zeitraum {
    font-size: var(--schrift-h1);
    margin-bottom: 0;
}

.aus-hero {
    margin-bottom: 3rem;
}

/* Kopfbild unbeschnitten: volle Ansicht, nur begrenzt in Höhe/Breite */
.aus-hero img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 62vh;
    display: block;
}

/* Kopf-Slider (mehrere Header-Bilder): Container hat das Seitenverhältnis
   der Bilder (--ar wird von der Ausgabe gesetzt) und skaliert dadurch
   responsiv mit – keine Leerbänder, Marker sitzen immer an der Bildkante */
#kopfslider {margin-top:4rem;margin-bottom:4rem;}
.aus-hero .carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.aus-hero .carousel-inner {
    aspect-ratio: var(--ar, 16 / 9);
    max-height: 70vh;
}

.aus-hero .carousel-item {
    height: 100%;
}

.aus-hero .carousel-item img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.aus-hero .carousel-control-prev-icon,
.aus-hero .carousel-control-next-icon {
    filter: invert(1) grayscale(100%);
}

/* Positionsmarker unterhalb des Sliders   */
.aus-hero .carousel-indicators {
    position: static;
    order: 2;
    margin: 1.0rem 0 0 0;
}

/* Marker: inaktiv weiß mit schwarzem Rand, aktiv schwarz gefüllt */
.aus-hero .carousel-indicators [data-bs-target] {
    background-color: #fff;
    border: 1px solid var(--makk-schwarz);
    opacity: 1;
}

.aus-hero .carousel-indicators [data-bs-target].active {
    background-color: var(--makk-schwarz);
}

/* Pfeile mit negativen Werten außerhalb des Sliders  */
.aus-hero .carousel-control-prev {
    left: -3.0rem; display:none;
}

.aus-hero .carousel-control-next {
    right: -3.0rem;display:none;
}

.carousel-indicators [data-bs-target]{height:15px; width:15px;}

.aus-hero .carousel-control-prev,
.aus-hero .carousel-control-next {
    width: 3.5rem;
    opacity: 1;
    height: auto;
    top: 0;
    bottom: 1.75rem;
}

.aus-hero .carousel-item .hero-bu {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.75);
    text-align: right;
}

.aus-hero p, .hero-bu {
    font-size: var(--schrift-klein);
    /*font-size:1rem;*/
    /*color: var(--makk-grau);*/
    margin: 0.4rem 0 0 0;
}

.hero-bu p {
    margin: 0;
    display: inline;
}

.aus-titel-detail {
    font-size: var(--schrift-h1);
    font-weight: 500;
    line-height: var(--zeilen-titel);
    margin-bottom: 2.5rem;
    line-height:120%;
}

.aus-untertitel-detail {
    font-size: var(--schrift-h1);font-weight: 500;
    /*color: var(--makk-grau);*/
    margin-bottom: 1.5rem;
    line-height:120%;
}

.aus-inhalt {
    font-size: var(--schrift-basis);
    line-height: var(--zeilen-basis);
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.aus-inhalt .abs {
    margin-bottom: 1.75rem;
    width: 100%;
}

/* Spaltenbreiten aus dem alten Redaktionssystem (z. B. schmale Logos):
   col-N wird von der Ausgabe aus at_col gesetzt */
.aus-inhalt .abs.col-1 { width: 8.3333%; padding-right: 1rem; }
.aus-inhalt .abs.col-2 { width: 16.6667%; padding-right: 1rem; }
.aus-inhalt .abs.col-3 { width: 25%; padding-right: 1rem; }
.aus-inhalt .abs.col-4 { width: 33.3333%; padding-right: 1rem; }
.aus-inhalt .abs.col-6 { width: 50%; padding-right: 1rem; }

.aus-inhalt .abs.col-1 .aus-figur,
.aus-inhalt .abs.col-2 .aus-figur,
.aus-inhalt .abs.col-3 .aus-figur,
.aus-inhalt .abs.col-4 .aus-figur,
.aus-inhalt .abs.col-6 .aus-figur {
    margin: 0;
}

/* Verteilerabsätze waren im alten Layout halbbreit (col-sm-6 im La_Code) */
.aus-inhalt .abs.verteiler {
    width: 50%;
    padding-right: 1rem;
}

/* Video-Einbettungen: Zwei-Klick-Lösung (Datenschutz).
   Vor dem Klick grauer Platzhalter, nach Klick wird der iframe geladen. */
.einbettung {
    aspect-ratio: 16 / 9;
    background: var(--makk-hellgrau);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

.einbettung.geladen {
    display: block;
    aspect-ratio: auto;
    background: none;
    padding: 0;
}

.einbettung .video-laden {
    font-family: var(--makk-font);
    font-size: var(--schrift-klein);
    background: #fff;
    border: 1px solid var(--makk-schwarz);
    padding: 0.5rem 1.2rem;
    cursor: pointer;
}

.einbettung .video-laden:hover {
    background: var(--makk-schwarz);
    color: #fff;
}

.einbettung .video-hinweis {
    font-size: var(--schrift-klein);
    color: var(--makk-grau);
    margin: 0;
}

.einbettung iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Trennlinien-Absätze aus dem alten System */
.aus-inhalt .abs.absLinie hr {
    border-top: 1px solid var(--makk-linie);
    opacity: 1;
    margin: 0.5rem 0 1.5rem 0;
}

.aus-inhalt h3 {
    font-size: var(--schrift-h3);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.aus-inhalt h4 {
    font-size: var(--schrift-klein);
    font-weight: 700;
    color: var(--makk-grau);
    margin-bottom: 0.75rem;
}

.aus-inhalt img {
    max-width: 100%;
    height: auto;
}

.aus-seitenleiste {
    /*border-top: 2px solid var(--makk-schwarz);*/
    padding-top: 0rem;
    font-size: var(--schrift-klein);
    line-height: 1.55;
}

/* Abstand zum Inhalt nur, wenn die Seitenleiste daneben steht
   (ab Bootstrap-lg, darunter rutscht sie unter den Inhalt) */
@media (min-width: 992px) {
    .aus-seitenleiste {
        padding-left: 3rem;
    }
}

.aus-seitenleiste .abs {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--makk-linie);
}

.aus-seitenleiste .abs:last-child {
    border-bottom: 0;
}

.aus-seitenleiste h3 {
    font-size: var(--schrift-klein);
    font-weight: 500;
}

.aus-seitenleiste img {
    max-width: 100%;
    height: auto;
}

/* ---------- Figuren und Galerie ---------- */

.aus-figur {
    margin: 1.5rem 0;
}

.aus-figur img {
    max-width: 100%;
    height: auto;
    display: block;
}

.aus-figur figcaption {
    font-size: var(--schrift-klein);
    color: var(--makk-grau);
    margin-top: 0.4rem;
}

.aus-figur figcaption p {
    margin: 0;
    display: inline;
}

.aus-galerie {
    margin: 1rem 0 3rem 0;
}

.aus-galerie h2 {
    font-size: var(--schrift-h2);
    font-weight: 500;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--makk-schwarz);
}

/* Galerie ohne Beschnitt: Zeilen gleicher Höhe, Breite je nach
   Seitenverhältnis des Bildes (--ar = Breite/Höhe aus der Datenbank).
   Bilder werden nur skaliert, nie zugeschnitten. */
.galerie-raster {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.galerie-raster .aus-figur {
    margin: 0;
    flex-grow: calc(var(--ar, 1.5) * 100);
    flex-basis: calc(var(--ar, 1.5) * 12rem);
    max-width: calc(var(--ar, 1.5) * 22rem);
    min-width: 0;
}

.galerie-raster .aus-figur img {
    width: 100%;
    height: auto;
}

/* ---------- Fuß ---------- */

.archiv-fuss {
    border-top: 2px solid var(--makk-schwarz);
    padding: 1.5rem 0 2.5rem 0;
    font-size: var(--schrift-klein);
    color: var(--makk-grau);
}

.archiv-fuss a {
    color: var(--makk-grau);
    margin-left: 1rem;
}

.archiv-fuss a:first-child {
    margin-left: 0;
}

.archiv-fuss p {
    margin: 0;
}

/* ---------- Responsive Feinheiten ---------- */

@media (max-width: 767px) {
    .makk-logo {
        height: 44px;
    }

    .aus-hero .carousel-control-prev {
        left: -2.25rem;
    }

    .aus-hero .carousel-control-next {
        right: -2.25rem;
    }

    .aus-hero .carousel-control-prev,
    .aus-hero .carousel-control-next {
        width: 2rem;
    }

    .aus-hero img {
        max-height: 45vh;
    }
}